Usha Rama College of Engineering and Technology

Telaprolu,Ungutur Mandalam, Andhra Pradesh 521109

L T P C

0 1 2 2

II Year II Semester
FULL STACK DEVELOPMENT – 1
(SKILL ENHANCEMENT COURSE)
Course Objectives:
The main objectives of the course are to
• Make use of HTML elements and their attributes for designing static web pages
• Build a web page by applying appropriate CSS styles to HTML elements
• Experiment with JavaScript to develop dynamic web pages and validate forms
Experiments covering the Topics:
• Lists, Links and Images
• HTML Tables, Forms and Frames
• HTML 5 and Cascading Style Sheets, Types of CSS
• Selector forms
• CSS with Color, Background, Font, Text and CSS Box Model
• Applying JavaScript - internal and external, I/O, Type Conversion
• JavaScript Conditional Statements and Loops, Pre-defined and User-defined Objects
JavaScript Functions and Events
• [Link]
Sample Experiments:
1. Lists, Links and Images
a) Write a HTML program, to explain the working of lists. Note: It should have an
ordered list, unordered list, nested lists and ordered list in an unordered list and
definition lists.
b) Write a HTML program, to explain the working of hyperlinks using tag and href,
target Attributes.
c) Create a HTML document that has your image and your friend’s image with a specific
height and width. Also when clicked on the images it should navigate to their
respective profiles.
d) Write a HTML program, in such a way that, rather than placing large images on a
page, the preferred technique is to use thumbnails by setting the height and width
parameters to something like to 100*100 pixels. Each thumbnail image is also a link
to a full sized version of the image. Create an image gallery using this technique
2. HTML Tables, Forms and Frames
a) Write a HTML program, to explain the working of tables. (use tags:
<table>,<tr>,<th>,<td> and attributes: border, rowspan, colspan )
b) Write a HTML program, to explain the working of tables by preparing a timetable.
(Note: Use tag to set the caption to the table & also use cell spacing, cell padding,
border, rowspan, colspan etc.).
c) Write a HTML program, to explain the working of forms by designing Registration
form. (Note: Include text field, password field, number field, date of birth field,
checkboxes, radio buttons, list boxes using <select>&<option> tags, <text area> and
two buttons ie: submit and reset. Use tables to provide a better view).
d) Write a HTML program, to explain the working of frames, such that page is to be
divided into 3 parts on either direction. (Note: first frame image,
second frame paragraph, third frame hyperlink. And also make sure of using “no
frame” attribute such that frames to be fixed).

3. HTML 5 and Cascading Style Sheets, Types of CSS

a) Write a HTML program, that makes use of <article>, <aside>, <figure>, <figcaption>,
<footer>, <header>, <main>, <nav>, <section>, <div>, <span> tags.
b) Write a HTML program, to embed audio and video into HTML web page.
c) Write a program to apply different types (or levels of styles or style specification
formats) - inline, internal, external styles to HTML elements. (identify selector,
property and value).
4. Selector forms
[Link] a program to apply different types of selector forms
I. Simple selector (element, id, class, group, universal)
II. Combinator selector (descendant, child, adjacent sibling, general sibling)
III. Pseudo-class selector
IV. Pseudo-element selector
V. Attribute selector
5. CSS with Color, Background, Font, Text and CSS Box Model
a. Write a program to demonstrate the various ways you can reference a color in CSS.
b. Write a CSS rule that places a background image halfway down the page, tilting it
horizontally. The image should remain in place when the user scrolls up or down.
c. Write a program using the following terms related to CSS font and text:
I. font-size
II. font-weight
III. font-style
IV. text-decoration
V. text-transformation
VI. text-alignment
d. Write a program, to explain the importance of CSS Box model using
I. Content
II. Border
III. Margin
IV. padding
6. Applying JavaScript - internal and external, I/O, Type Conversion
a. Write a program to embed internal and external JavaScript in a web page.
b. Write a program to explain the different ways for displaying output.
c. Write a program to explain the different ways for taking input.
d. Create a webpage which uses prompt dialogue box to ask a voter for his name and age.
Display the information in table format along with either the voter can vote or not
7. Java Script Pre-defined and User-defined Objects
a. Write a program using document object properties and methods.
b. Write a program using window object properties and methods.
c. Write a program using array object properties and methods.
d. Write a program using math object properties and methods.
e. Write a program using string object properties and methods.
f. Write a program using regex object properties and methods.
g. Write a program using date object properties and methods.
h. Write a program to explain user-defined object by using properties, methods, accessors,
constructors and display.

8. Java Script Conditional Statements and Loops

a. Write a program which asks the user to enter three integers, obtains the numbers from the
user and outputs HTML text that displays the larger number followed by the words
“LARGER NUMBER” in an information message dialog. If the numbers are equal, output
HTML text as “EQUAL NUMBERS”.
b. Write a program to display week days using switch case.
c. Write a program to print 1 to 10 numbers using for, while and do-while loops.
d. Write aprogram to print data in object using for-in, for-each and for-of loops
e. Develop a program to determine whether a given number is an ‘ARMSTRONG
NUMBER’ or not. [Eg: 153 is an Armstrong number, since sum of the cube of the digits is
equal to the number i.e.,13 + 53+ 33 = 153]
f. Write a program to display the denomination of the amount deposited in the bank in terms
of 100’s, 50’s, 20’s, 10’s, 5’s, 2’s & 1’s. (Eg: If deposited amount is Rs.163, the output should
be 1-100’s, 1-50’s, 1- 10’s, 1-2’s & 1-1’s)

9. Java Script Functions and Events

a. Design a appropriate function should be called to display
i. Factorial of that number
ii. Fibonacci series up to that number
iii. Prime numbers up to that number
iv. Is it palindrome or not
b. Design a HTML having a text box and four buttons named Factorial, Fibonacci, Prime, and
Palindrome. When a button is pressed an appropriate function should be called to display
i. Factorial of that number
ii. Fibonacci series up to that number
iii. Prime numbers up to that number
iv. Is it palindrome or not
c. Write a program to validate the following fields in a registration page
i. Name (start with alphabet and followed by alphanumeric and the length should not be less
than 6 characters)
ii. Mobile (only numbers and length 10 digits)
iii. E-mail (should contain format like xxxxxxx@[Link] )

Text Books:
1. Programming the World Wide Web, 7th Edition, Robet W Sebesta, Pearson, 2013.
2. Web Programming with HTML5, CSS and JavaScript, John Dean, Jones & Bartlett
Learning, 2019 (Chapters 1-11).
3. Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and
Node, Vasan Subramanian, 2nd edition, APress, O’Reilly.
 Week 1
1. Lists, Links and Images
a. Write a HTML program, to explain the working of lists. Note: It should have an ordered
list, unordered list, nested lists and ordered list in an unordered list and definition lists.
b. Write a HTML program, to explain the working of hyperlinks using tag and href, target
Attributes.
c. Create a HTML document that has your image and your friend’s image with a specific
height and width. Also when clicked on the images it should navigate to their respective
profiles.
d. Write a HTML program, in such a way that, rather than placing large images on a page, the
preferred technique is to use thumbnails by setting the height and width parameters to
something like to 100*100 pixels. Each thumbnail image is also a link to a full sized version
of the image. Create an image gallery using this technique
1. Lists, Links, and Images
a. Write a HTML program, to explain the working of lists. Note: It should have an
ordered list, unordered list, nested lists and ordered list in an unordered list and
definition lists.
Theory:
HTML provides different types of lists to structure and organize content. The primary types
of lists are:
1. Ordered List (<ol>):
o Displays items in a numbered sequence.
o Each item is wrapped in an <li> (list item) tag.
2. Unordered List (<ul>):
o Displays items with bullets or other symbols.
o Each item is also wrapped in an <li> tag.
3. Nested Lists:
o A list (ordered or unordered) inside another list.
4. Mixed Lists:
o Combining ordered and unordered lists.
5. Definition List (<dl>):
o Consists of terms and their definitions.
o <dt>: Represents the term.
o <dd>: Represents the definition.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Lists Example</title>
</head>
<body>
<h1>Lists in HTML</h1>
<h2>Ordered List</h2>
 <ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<h2>Nested Lists</h2>
<ul>
<li>Parent Item
<ol>
<li>Child Item 1</li>
<li>Child Item 2</li>
</ol>
</li>
<li>Parent Item 2</li>
</ul>
<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
</body>
</html>
Output:
b. Write a HTML program, to explain the working of hyperlinks using tag and href,
target Attributes.
Theory:
Hyperlinks are fundamental elements in HTML used to navigate between different web pages
or sections within the same page. They are created using the <a> (anchor) tag. The following
key attributes are commonly used with hyperlinks:
1. href Attribute: Specifies the URL of the page the link goes to. It can be an absolute
URL (e.g., [Link] or a relative URL (e.g., [Link]).
2. target Attribute: Determines where to open the linked document. Common values for
the target attribute include:
o _self (default): Opens the link in the same tab/window.
o _blank: Opens the link in a new tab/window.
o _parent: Opens the link in the parent frame (if the page is inside a frame).
o _top: Opens the link in the full body of the window (if the page is inside a
frame).
Program:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlinks Example</title>
</head>
<body>
<h1>Hyperlinks in HTML</h1>
<a href="[Link] target="_blank">Visit Google</a><br>
<a href="[Link] target="_self">Visit Example</a>
</body>
</html>
Output:
c. Create a HTML document that has your image and your friend’s image with a
specific height and width. Also when clicked on the images it should navigate to their
respective profiles.
Theory:
In HTML, images can act as hyperlinks, allowing users to navigate to different pages or
websites when the image is clicked. This is achieved by embedding an <img> tag inside an
<a> (anchor) tag.
Key attributes used:
1. <img> Tag:
o src: Specifies the source of the image.
o alt: Provides alternative text for the image.
o height and width: Specify the dimensions of the image.
2. <a> Tag:
o href: Specifies the URL to navigate to when the image is clicked.
Program
<!DOCTYPE html>
<html>
<head>
<title>Image Navigation</title>
</head>
<body>
<h1>Images with Navigation</h1>
<a href="[Link]
<img src="[Link]" alt="Friend's Image" width="200" height="200">
</a>
<a href="[Link]
<img src="[Link]" alt="My Image" width="200" height="200">
</a>
</body>
</html>
Output:
d. Write a HTML program, in such a way that, rather than placing large images on a
page, the preferred technique is to use thumbnails by setting the height and width
parameters to something like to 100*100 pixels. Each thumbnail image is also a link to a
full sized version of the image. Create an image gallery using this technique
Theory:
Thumbnails are smaller versions of images, often used to save space and provide a preview.
When clicked, these thumbnails typically link to the full-sized image. In HTML, this is
accomplished using the <a> (anchor) and <img> (image) tags together. The following steps
describe how this works:
1. Thumbnail Display:
o Use the <img> tag to display a smaller version of the image.
o Set the width and height attributes of the <img> tag to control the size of the
thumbnail.
2. Link to Full-Sized Image:
o Wrap the <img> tag inside an <a> tag.
o The href attribute of the <a> tag should point to the full-sized image.
This technique improves performance by initially loading smaller images while allowing
users to view the full-sized version on demand.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
</head>
<body>
<h1>Thumbnail Gallery</h1>
<a href="[Link]"><img src="[Link]" alt="Image 1" width="100"
height="100"></a>
<a href="[Link]"><img src="[Link]" alt="Image 2" width="100"
height="100"></a>
<a href="[Link]"><img src="[Link]" alt="Image 3" width="100"
height="100"></a>
</body>
</html>
Output:
 WEEK 2
a. Write a HTML program, to explain the working of tables. (use tags: <table>, <tr>, <th>,
<td> and attributes: border, rowspan, colspan)
b. Write a HTML program, to explain the working of tables by preparing a
timetable. (Note: Use <caption> tag to set the caption to the table & also use cell spacing,
cell padding, border, rowspan, colspan etc.).
c. Write a HTML program, to explain the working of forms by designing Registration form.
(Note: Include text field, password field, number field, date of birth field, checkboxes,
radio buttons, list boxes using <select>&<option> tags, <text area> and two buttons ie:
submit and reset. Use tables to provide a better view).
d. Write a HTML program, to explain the working of frames, such that page is to be divided
into 3 parts on either direction. (Note: first frame  image, second frame  paragraph,
third frame  hyperlink. And also make sure of using “no frame” attribute such that
frames to be fixed).
2. HTML Tables, Forms, and Frames
a. Write a HTML program, to explain the working of tables. (use tags: <table>, <tr>,
<th>,
<td> and attributes: border, rowspan, colspan)
Theory:
1. <table>: Used to define an HTML table. It organizes data into rows and columns.
2. <tr>: Represents a table row. Contains one or more <th> (table header) or <td> (table
data) elements.
3. <th>: Defines a header cell within a row, typically displayed as bold and centered.
4. <td>: Represents a standard data cell within a row.
Attributes:
1. border: Specifies the width of the border around the table and its cells.
2. rowspan: Merges cells vertically by specifying the number of rows a cell should
span.
3. colspan: Merges cells horizontally by specifying the number of columns a cell should
span.
Program:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
 <td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</table>
</body>
</html>

Output:
b. Write a HTML program, to explain the working of tables by preparing a
timetable. (Note: Use <caption> tag to set the caption to the table & also use cell spacing,
cell padding, border, rowspan, colspan etc.).
Theory:
 Tags:
 <table>: Creates a table for displaying data in rows and columns.
 <caption>: Provides a descriptive title for the table, usually displayed above it.
 <th>: Defines header cells in a table row, typically bold and centered by default.
 <td>: Defines standard data cells in a table row.
 <tr>: Groups a row of table cells (either <th> or <td>).
 Attributes:
 border: Specifies the thickness of the table's borders.
 cellspacing: Sets the space between individual table cells.
 cellpadding: Defines the padding inside each table cell to control spacing between the
content and cell edges.
 rowspan: Merges a cell vertically across multiple rows.
 colspan: Merges a cell horizontally across multiple columns.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Timetable</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="2">
<caption>Weekly Timetable</caption>
<tr>
<th>Day</th>
<th>9-10 AM</th>
<th>10-11 AM</th>
 <th>11-12 PM</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>Physics</td>
<td>Chemistry</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Biology</td>
<td>Math</td>
<td>English</td>
</tr>
</table>
</body>
</html>
Output:
c. Write a HTML program, to explain the working of forms by designing Registration
form.
(Note: Include text field, password field, number field, date of birth field, checkboxes,
radio buttons, list boxes using <select>&<option> tags, <text area> and two buttons ie:
submit and reset. Use tables to provide a better view).
Theory:
HTML Forms allow users to input data, which can be processed by a web server.
• The <form> tag defines a form, and the action attribute specifies where the data is
sent.
• Text fields (<input type="text">) allow users to enter single-line input.
• Password fields (<input type="password">) hide input characters for security.
• Number fields (<input type="number">) accept numeric input.
• Date fields (<input type="date">) allow users to select a date.
• Checkboxes (<input type="checkbox">) enable multiple selections, while radio
buttons (<input type="radio">) allow single-choice selection.
• Dropdown lists use <select> and <option> tags to provide multiple options.
• Text areas (<textarea>) allow multi-line text input.
• Submit and Reset buttons (<input type="submit">, <input type="reset">) send and
clear the form data, respectively.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form>
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
 <td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>Date of Birth:</td>
<td><input type="date" name="dob"></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</td>
</tr>
<tr>
<td>Languages Known:</td>
<td>
<input type="checkbox" name="lang" value="english">English
<input type="checkbox" name="lang" value="hindi">Hindi
</td>
</tr>
<tr>
<td>Country:</td>
<td>
<select name="country">
<option>India</option>
<option>USA</option>
<option>UK</option>
</select>
 </td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea name="comments"></textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Output:
d. Write a HTML program, to explain the working of frames, such that page is to be
divided
into 3 parts on either direction. (Note: first frame  image, second frame  paragraph,
third frame  hyperlink. And also make sure of using “no frame” attribute such that
frames to be fixed).
Theory:
HTML Frames are used to divide a webpage into multiple sections, each displaying a
different document.

1. The <frameset> tag replaces <body> and defines multiple frames.

2. Frames can be arranged vertically (rows="x,y,z") or horizontally (cols="x,y,z").
3. Each frame is created using the <frame> tag with a src attribute to load content.
4. The first frame displays an image, the second frame shows a paragraph, and the
third frame contains a hyperlink.
5. The noframes tag ensures content is accessible in browsers that do not support frames.
6. frameborder="0" removes the border between frames for a seamless look.
7. scrolling="no" can disable scrolling, while scrolling="yes" enables it.
8. name attributes help target links to open in specific frames.
9. Frames are now outdated, and CSS Flexbox/Grid is preferred for layouts.

Program:
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="50%,25%,25%">
<frame src="[Link]" name="image_frame">
<frame src="[Link]" name="text_frame">
<frame src="[Link]" name="link_frame">
<noframes>
Your browser does not support frames.
</noframes>
</frameset>
</html>

Output:
 WEEK 3
a. Write a HTML program, that makes use of <article>, <aside>, <figure>, <figcaption>,
<footer>, <header>, <main>, <nav>, <section>, <div>, <span> tags.
b. Write a HTML program, to embed audio and video into HTML web page.
c. Write a program to apply different types (or levels of styles or style specification formats) -
inline, internal, external styles to HTML elements. (identify selector, property and value).
3. HTML5 and Cascading Style Sheets (CSS)
a. Write a HTML program, that makes use of <article>, <aside>, <figure>,
<figcaption>,<footer>, <header>, <main>, <nav>, <section>, <div>, <span> tags.

Theory:

1. <article>: Represents a self-contained piece of content, such as a blog post or

news article.
2. <aside>: Defines content indirectly related to the main content, like sidebars or
advertisements.
3. <figure>: Groups media content, like images or illustrations, with captions.
4. <figcaption>: Provides a caption or description for the content inside a <figure>.
5. <footer>: Defines footer content, such as copyright information or links, typically at
the bottom of a page.
6. <header>: Represents introductory content, such as a logo, navigation links, or a
heading.
7. <main>: Contains the main content of the document, excluding repeated
elements like headers or footers.
8. <nav>: Defines navigation links to other sections of the site or document.
9. <section>: Groups related content together under a single theme or heading.
10. <div>: Creates a block-level container for grouping elements, often styled with
CSS.
11. <span>: Creates an inline container for applying styles or scripts to part of the
text.
Program:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Semantic Tags</title>
</head>
<body>
<header>
<h1>My Website</h1>
 </header>
<nav>
<a href="#home">Home</a> | <a href="#about">About</a> | <a
href="#contact">Contact</a>
</nav>
<main>
<section>
<article>
<h2>Article Title</h2>
<p>This is the content of the article.</p>
<figure>
<img src="[Link]" alt="Example Image">
<figcaption>Image Description</figcaption>
</figure>
</article>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
</section>
</main>
<footer>
<p>&copy; 2024 My Website</p>
</footer>
</body>
</html>
Output:
b. Write a HTML program, to embed audio and video into HTML web page.
Theory:
 <audio>: Used to embed audio files on a webpage.
 Attributes:
o controls: Adds play, pause, and volume controls.
o autoplay: Starts playback automatically when the page loads.
o loop: Replays the audio when it ends.
o src: Specifies the audio file's path.
o type: Specifies the MIME type of the audio file.
 <video>: Used to embed video files on a webpage.

 Attributes:
o controls: Adds play, pause, and volume controls.
o autoplay: Starts playback automatically.
o loop: Replays the video when it ends.
o poster: Displays an image before the video starts playing.
o width/height: Sets the dimensions of the video.
o src: Specifies the video file's path.
o type: Specifies the MIME type of the video file.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Audio and Video Embedding</title>
</head>
<body>
<h1>Embedding Audio and Video</h1>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
 <br>
<video controls width="400">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Output:
c. Write a program to apply different types (or levels of styles or style specification
formats) - inline, internal, external styles to HTML elements. (identify selector, property
and value).
Theory:
CSS styles can be applied in three ways:
12. Inline Styles:
1. Applied directly to an HTML element using the style attribute.
2. Selector: The specific HTML tag where the style is used.
3. Property: A CSS attribute that defines the style (e.g., color, font-size).
4. Value: The specific value assigned to the property (e.g., red, 16px).
13. Internal Styles:
1. Defined within a <style> tag inside the <head> section of the HTML
document.

2. Selector: Targets elements using tags, classes, or IDs.

3. Property: CSS attribute to style elements.
4. Value: Value assigned to the property.
14. External Styles:
1. Defined in a separate .css file and linked using the <link> tag.
2. Selector: Targets elements globally using tag names, classes, or IDs.
3. Property: CSS attribute.
4. Value: As in inline or internal styles.
Program:
<!DOCTYPE html>
<html>
<head>
<title>CSS Styles</title>
<style>
body { background-color: lightblue; }
.internal { color: red; font-size: 20px; }
</style>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<p style="color: green;">This is inline CSS</p>
<p class="internal">This is internal CSS</p>
<p class="external">This is external CSS</p>
</body>
</html>
External CSS file ([Link]):
.external {
font-weight: bold;
text-decoration: underline;
}
Output:
 WEEK 4
a. Write a program to apply different types of selector forms
i. Simple selector (element, id, class, group, universal)
ii. Combinator selector (descendant, child, adjacent sibling, general sibling)
iii. Pseudo-class selector
iv. Pseudo-element selector
v. Attribute selector
4. Selector Forms
a. Write a program to apply different types of selector forms
i. Simple selector (element, id, class, group, universal)
ii. Combinator selector (descendant, child, adjacent sibling, general sibling)
iii. Pseudo-class selector
iv. Pseudo-element selector
v. Attribute selector
Theory:

◦ Simple Selectors:
▪ Select elements based on their name, ID, class, or grouping.
▪ Element Selector: Targets specific HTML tags (e.g., h1).
▪ ID Selector: Targets an element with a specific id (e.g., #header).
▪ Class Selector: Targets elements with a specific class (e.g., .highlight).
▪ Group Selector: Applies styles to multiple selectors, separated by
commas (e.g., h1, h2, p).

▪ Universal Selector: Targets all elements (*).

◦ Combinator Selectors:
▪ Define relationships between elements:
• Descendant Selector: Selects all descendants of an element (e.g.,
div p).
• Child Selector: Selects immediate children of an element (e.g., div
> p).
• Adjacent Sibling Selector: Selects an element immediately after
another (e.g., h1 + p).

• General Sibling Selector: Selects all siblings of an element (e.g., h1

~ p).
◦ Pseudo-Class Selectors:
▪ Style elements based on their state (e.g., :hover, :nth-child()).
◦ Pseudo-Element Selectors:

▪ Style specific parts of an element (e.g., ::before, ::after, ::first-line).

 ◦ Attribute Selectors:
▪ Style elements based on attributes and their values (e.g., [type="text"],
[href^="https"]).
Program:
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors</title>
<style>
/* Simple Selectors */
p { color: blue; }
#unique { color: red; }
.class-name { font-size: 18px; }

/* Group Selector */
h1, h2, h3 { font-family: Arial; }

/* Combinator Selectors */
div > p { background-color: yellow; } /* Child */
div p { color: green; } /* Descendant */
p + p { font-weight: bold; } /* Adjacent Sibling */
p ~ p { font-style: italic; } /* General Sibling */

/* Pseudo-classes */
a:hover { color: orange; }

/* Pseudo-elements */
p::first-line { text-transform: uppercase; }

/* Attribute Selector */
 input[type="text"] { border: 1px solid black; }
</style>
</head>
<body>
<h1>Selectors Example</h1>
<div>
<p>This is a paragraph inside div.</p>
<p>This is another paragraph inside div.</p>
</div>
<p id="unique">This is a paragraph with ID.</p>
<p class="class-name">This is a paragraph with a class.</p>
<a href="#">Hover over this link</a>
<p>This paragraph will have italic siblings.</p>
<input type="text" placeholder="Type here">
</body>
</html>
Output:
 WEEK 5
a. Write a program to demonstrate the various ways you can reference a color in CSS.
b. Write a CSS rule that places a background image halfway down the page, tilting it
horizontally. The image should remain in place when the user scrolls up or down.
c. Write a program using the following terms related to CSS font and text:
i. font-size
ii. font-weight
iv. text-decoration v. text-transformation
iii. font-style
vi. text-alignment
d. Write a program, to explain the importance of CSS Box model using
i. Content
ii. Border
iii. Margin
iv. padding
5. CSS with Colors, Fonts, Text, and Box Model
a. Write a program to demonstrate the various ways you can reference a color in CSS.
Theory:
Colors in CSS
In CSS, colors can be specified in various ways to style elements, each providing
flexibility for design:

1. Named Colors: Use predefined color names (e.g., red, blue, yellow).
2. Hexadecimal Colors: Specify colors using the #RRGGBB format (e.g., #ff0000
for red).
3. RGB Colors: Define colors using the rgb(red, green, blue) format with values
ranging from 0 to 255 (e.g., rgb(255, 0, 0) for red).
4. RGBA Colors: Similar to RGB but includes an alpha value for transparency (e.g.,
rgba(255, 0, 0, 0.5) for semi-transparent red).
5. HSL Colors: Specify colors using the hsl(hue, saturation, lightness) format (e.g.,
hsl(0, 100%, 50%) for red).
6. HSLA Colors: Similar to HSL but includes an alpha value for transparency (e.g.,
hsla(0, 100%, 50%, 0.5)).
7. Transparent: Use transparent to make an element fully see-through.
8. CurrentColor: Inherits the color from the parent element's color property.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Colors in CSS</title>
<style>
body { color: rgb(255, 0, 0); }
h1 { color: #00FF00; }
p { color: hsl(240, 100%, 50%); }
</style>
</head>
<body>
 <h1>RGB Color</h1>
<p>Hexadecimal and HSL Color</p>
</body>
</html>
Output:
b. Write a CSS rule that places a background image halfway down the page, tilting it
horizontally. The image should remain in place when the user scrolls up or down.
Theory:
• background-image: Specifies the image you want to display as the background.
• background-position: 50% 50%: This centers the background image
horizontally and vertically on the page, positioning it halfway down.
• background-attachment: fixed: Ensures that the background image doesn't
scroll with the page, but remains fixed while the content scrolls.
• transform: rotate(10deg): Rotates the background image by 10 degrees to tilt it
horizontally (you can adjust the degree to achieve the desired tilt effect).
• background-size: cover: Ensures the background image scales to cover the entire
viewport, ensuring it fits well no matter the screen size.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Background Image</title>
<style>
body {
background-image: url('[Link]');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center bottom;
}
</style>
</head>
<body>
<h1>Background Example</h1>
</body>
</html>
Output:
c. Write a program using the following terms related to CSS font and text:
i. font-size
ii. font-weight
iv. text-decoration v. text-transformation
iii. font-style
vi. text-alignment
Theory:

▪ font-size: Defines the size of the text. It can be specified in various units like px, em,
%, rem, etc.
▪ font-weight: Specifies the thickness or boldness of the text. Common values include
normal, bold, lighter, and numerical values (e.g., 100, 400, 700).
▪ font-style: Sets the style of the font. Common values are normal, italic, and oblique.
▪ text-decoration: Applies decorations to text, such as underline, line-through,
overline, and none.
▪ text-transform: Controls the case of the text, such as uppercase, lowercase,
capitalize, or none.
▪ text-align: Specifies the horizontal alignment of the text within its container.
Common values are left, right, center, and justify.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Font and Text Properties</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center; /* text-alignment */
}
 .styled-text {
font-size: 24px; /* font-size */
font-weight: bold; /* font-weight */
font-style: italic; /* font-style */
text-decoration: underline; /* text-decoration */
text-transform: uppercase; /* text-transformation */
margin: 20px;
}
</style>
</head>
<body>
<h1>CSS Font and Text Properties</h1>
<p class="styled-text">This is styled text</p>
</body>
</html>

Output:
d. Write a program, to explain the importance of CSS Box model using
i. Content
ii. Border
iii. Margin
iv. padding
Theory:

The CSS Box Model defines the rectangular boxes generated for elements on a webpage
and is essential for understanding how elements are sized and spaced in relation to each
other. The model consists of four main parts:

▪ Content: This is the actual content of the box, where text, images, or other media
appear. The content area defines the width and height of the element, and it is the
innermost part of the box.

▪ Padding: The space between the content and the border. Padding creates space inside
the box, between the content and the border. It can be set uniformly for all sides or
individually for top, right, bottom, and left.

▪ Border: The border surrounds the padding (if any) and the content. It is placed
between the padding and the margin. You can style borders with width, color, and
style (solid, dashed, etc.).

▪ Margin: The space outside the border. Margins create space between the element
and other elements on the page. Like padding, margins can be set for all sides or
individually for top, right, bottom, and left.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
margin: 15px;
 }
</style>
</head>
<body>
<div class="box">Box Model Example</div>
</body>
</html>
Output:
 WEEK 6
a. Write a program to embed internal and external JavaScript in a web page.
b. Write a program to explain the different ways for displaying output.
c. Write a program to explain the different ways for taking input.
d. Create a webpage which uses prompt dialogue box to ask a voter for his name and age.
Display the information in table format along with either the voter can vote or not
6. Applying JavaScript - Internal and External, I/O, Type Conversion
a. Write a program to embed internal and external JavaScript in a web page.
Theory:
• Internal and External JavaScript in a Web Page
▪ Internal JavaScript:
• Internal JavaScript is written directly within the HTML document,
enclosed in a <script> tag.

• It is typically placed within the <head> or <body> section of the HTML

document.

• This method is convenient for small scripts that are specific to a single
HTML page.
▪ External JavaScript:
• External JavaScript is placed in a separate .js file, which is then linked to
the HTML document using the <script> tag with the src attribute.
• It helps in organizing and reusing JavaScript code across multiple HTML
pages, making the code more maintainable.

• The external JavaScript file is linked just before the closing </body> tag to
ensure the HTML content is loaded first.
Program:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script>
function internalFunction() {
alert("This is internal JavaScript!");
}
</script>
<script src="[Link]"></script>
</head>
<body>
 <button onclick="internalFunction()">Internal Script</button>
<button onclick="externalFunction()">External Script</button>
</body>
</html>
External JavaScript file ([Link]):
function externalFunction() {
alert("This is external JavaScript!");
}
Output:
b. Write a program to explain the different ways for displaying output.
Theory:
Displaying Output in JavaScript
In JavaScript, there are several ways to display output to the user. These methods are used
depending on the context and the desired interaction with the user:

9. alert():
a) Displays a simple popup dialog with a message and an "OK" button.
b) It's often used for debugging or showing quick notifications but is not
ideal for modern web applications due to its intrusive nature.

10. [Link]():
a) Writes a string of text directly into the HTML document at the point where
the script is called.

b) Typically used for quick and simple demonstrations but not

recommended for production websites, as it can overwrite the entire
document if used incorrectly.

11. [Link]():
a) Outputs information to the browser's console, which is especially useful for
debugging.

b) It doesn’t affect the web page's display, and it's used for developers to
view values during development.

12. innerHTML:
a) Allows you to change the content of an HTML element dynamically.
b) It’s commonly used to display results on the webpage itself, by modifying
Program:
<!DOCTYPE html>
<html>
<head>
<title>Display Output</title>
</head>
<body>
<script>
alert("This is an alert box!");
 [Link]("This is written on the webpage.<br>");
[Link]("This is a console message.");
</script>
</body>
</html>
Output:
c. Write a program to explain the different ways for taking input.
Theory:
Taking Input in JavaScript
There are several ways to take input from the user in JavaScript. These methods allow
developers to interact with users and collect data for processing or displaying results.

▪ prompt():
• The prompt() method displays a dialog box with an input field, allowing the user
to type in data.

• It returns the value entered by the user as a string. If the user clicks "Cancel," it
returns null.

• This method is simple but outdated for modern web development due to its
intrusive nature and lack of customization.
▪ HTML Forms and <input> Elements:
• You can create HTML forms with <input> elements, such as text fields,
checkboxes, radio buttons, etc., to gather various types of user input.

• JavaScript can be used to access the values entered in the form fields using
methods like .value.
• Forms provide a more flexible and user-friendly way of taking input compared to
prompt().

▪ addEventListener() for User Input via Buttons:

• You can attach an event listener to a button or other element to take user input
dynamically and trigger a function when an event occurs (e.g., button click).
• This is commonly used in interactive forms or web applications.
▪ File API (for file input):
• The File input element in HTML (<input type="file">) allows users to upload
files.
• JavaScript can then read the contents of the uploaded files using the File API.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Input Methods</title>
</head>
<body>
<script>
let name = prompt("Enter your name:");
alert("Hello, " + name + "!");
let age = confirm("Are you above 18?");
[Link]("User is above 18: " + age);
</script>
</body>
</html>
Output:
d. Create a webpage which uses prompt dialogue box to ask a voter for his name and
age. Display the information in table format along with either the voter can vote or not
Theory:
Using prompt() for Collecting Voter Information
In JavaScript, the prompt() method is used to ask users for input through a dialog box. This
method is often used for quick input collection from users. In the context of a voting
system:

• prompt(): Displays a dialog box asking the user for input. In this case, it will
collect the voter's name and age.
• Conditional Logic: After collecting the input, JavaScript can use conditional
statements to check the age of the user. If the age is 18 or older, the user is
eligible to vote; otherwise, they are not.

• Displaying Information: Once the input is gathered, JavaScript can dynamically

display the user's name, age, and voting eligibility in a table format on the
webpage.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Voting Eligibility</title>
</head>
<body>
<script>
let name = prompt("Enter your name:");
let age = prompt("Enter your age:");
[Link]("<table
border='1'><tr><th>Name</th><th>Age</th><th>Eligibility</th></tr>");
[Link]("<tr><td>" + name + "</td><td>" + age + "</td><td>" + (age >= 18 ?
"Can Vote" : "Cannot Vote") + "</td></tr></table>");
</script>
</body>
</html>
Output:
 WEEK 7
a. Write a program using document object properties and methods.
b. Write a program using window object properties and methods.
c. Write a program using array object properties and methods.
d. Write a program using math object properties and methods.
e. Write a program using string object properties and methods.
f. Write a program using regex object properties and methods.
g. Write a program using date object properties and methods.
h. Write a program to explain user-defined object by using properties, methods, accessors,
constructors and display.
7. JavaScript Pre-defined and User-defined Objects
a. Write a program using document object properties and methods.
Theory:
Document Object Properties and Methods
 The document object represents the entire HTML document loaded in the
browser. It provides properties and methods to interact with and manipulate the
document.
o Properties:
 [Link]: Gets or sets the title of the document.
 [Link]: Represents the <body> of the document.
 [Link](): Finds an element by its ID.
 [Link](): Retrieves all elements
with a specific class name.
o Methods:
 [Link](): Creates a new HTML element.
 [Link](): Returns the first matching element for
a CSS selector.
 [Link](): Writes directly to the document (use
cautiously).
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Object Properties and Methods</title>
<style>
#info {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Document Object Properties and Methods</h1>
<div id="info"></div>
<button onclick="displayDocumentInfo()">Show Document Info</button>
<script>
function displayDocumentInfo() {
const infoDiv = [Link]('info');
const title = [Link];
const url = [Link];
const lastModified = [Link];
const domain = [Link];
[Link] = `
<h2>Document Information</h2>
<p><strong>Title:</strong> ${title}</p>
<p><strong>URL:</strong> ${url}</p>
<p><strong>Last Modified:</strong> ${lastModified}</p>
<p><strong>Domain:</strong> ${domain}</p>
`;
}
</script>
</body>
</html>
Output:
b. Write a program using window object properties and methods.
Theory:
Window Object Properties and Methods
 The window object represents the browser's window or tab. It provides
properties and methods for browser window manipulation.
o Properties:
 [Link] and [Link]: Returns the
dimensions of the window's content area.
 [Link]: Provides information about the current URL and
allows navigation.
 [Link]: Refers to the document object.
o Methods:
 [Link](): Displays a simple alert dialog box.
 [Link](): Opens a new browser window.
 [Link](): Calls a function after a specified delay.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Window Object Properties and Methods</title>
<style>
#info {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Window Object Properties and Methods</h1>
<div id="info"></div>
<button onclick="displayWindowInfo()">Show Window Info</button>
<button onclick="openNewWindow()">Open New Window</button>
<button onclick="closeWindow()">Close Window</button>
<script>
let newWindow;
function displayWindowInfo() {
const infoDiv = [Link]("info");
const width = [Link];
const height = [Link];
const locationHref = [Link];
const screenWidth = [Link];
const screenHeight = [Link];
[Link] = `
<h2>Window Information</h2>
<p><strong>Window Width:</strong> ${width}px</p>
<p><strong>Window Height:</strong> ${height}px</p>
<p><strong>Current URL:</strong> ${locationHref}</p>
<p><strong>Screen Width:</strong> ${screenWidth}px</p>
<p><strong>Screen Height:</strong> ${screenHeight}px</p>
`;
}
function openNewWindow() {
newWindow = [Link](
"[Link]
"ExampleWindow",
"width=600,height=400"
);
}
function closeWindow() {
if (newWindow && ![Link]) {
[Link]();
} else {
alert("No window to close or the window is already closed.");
}
}
</script>
</body>
</html>
Output:
c. Write a program using array object properties and methods.
Theory:
The Array object represents a list of values or elements in a JavaScript array.
 Properties:
o [Link]: Returns the number of elements in the array.
o [Link]: Returns the function that created the array object.
 Methods:
o [Link](): Adds one or more elements to the end of the array.
o [Link](): Removes the last element from the array.
o [Link](): Removes the first element of the array.
o [Link](): Adds one or more elements to the beginning of the array.
o [Link](): Executes a function for each element in the array.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Object Properties and Methods</title>
<style>
#info {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Array Object Properties and Methods</h1>
<div id="info"></div>
<button onclick="displayArrayInfo()">Show Array Info</button>
<script>
function displayArrayInfo() {
const infoDiv = [Link]('info');
const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
const length = [Link];
const firstElement = fruits[0];
const lastElement = fruits[[Link] - 1];
[Link]("Fig");
const afterPush = [Link](", ");
const removedElement = [Link]();
const afterPop = [Link](", ");
[Link] = `
<h2>Array Information</h2>
<p><strong>Original Array:</strong> Apple, Banana, Cherry, Date,
Elderberry</p>
<p><strong>Array Length:</strong> ${length}</p>
<p><strong>First Element:</strong> ${firstElement}</p>
<p><strong>Last Element:</strong> ${lastElement}</p>
<p><strong>After Push:</strong> ${afterPush}</p>
<p><strong>Removed Element (Pop):</strong> ${removedElement}</p>
<p><strong>After Pop:</strong> ${afterPop}</p>
`;
}
</script>
</body>
</html>
Output:
d. Write a program using math object properties and methods.
Theory:
Math Object Properties and Methods
 The Math object provides mathematical constants and methods.
o Properties:
 [Link]: Represents the value of pi (3.14159…).
 Math.E: Represents Euler's number (2.718…).
o Methods:
 [Link](x, y): Returns the value of x raised to the power of y.
 [Link](x): Returns the square root of x.
 [Link](): Returns a random number between 0 and 1.
 [Link](x): Rounds x to the nearest integer.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math Object Properties and Methods</title>
<style>
#info {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Math Object Properties and Methods</h1>
<div id="info"></div>
<button onclick="displayMathInfo()">Show Math Info</button>
<script>
function displayMathInfo() {
const infoDiv = [Link]('info');
const pi = [Link];
const sqrt = [Link](16);
const random = [Link]();
const rounded = [Link](4.6);
const max = [Link](10, 20, 30);
const min = [Link](10, 20, 30);
[Link] = `
<h2>Math Object Information</h2>
<p><strong>Value of PI:</strong> ${pi}</p>
<p><strong>Square Root of 16:</strong> ${sqrt}</p>
<p><strong>Random Number (0-1):</strong> ${random}</p>
<p><strong>Rounded Value of 4.6:</strong> ${rounded}</p>
<p><strong>Maximum of (10, 20, 30):</strong> ${max}</p>
<p><strong>Minimum of (10, 20, 30):</strong> ${min}</p>
`;
}
</script>
</body>
</html>
Output:
e. Write a program using string object properties and methods.
Theory:
String Object Properties and Methods
 The String object represents a sequence of characters (text).
o Properties:
 [Link]: Returns the number of characters in the string.
o Methods:
 [Link](): Returns the character at a specified index.
 [Link](): Finds the first occurrence of a specified value.
 [Link](): Converts the string to uppercase.
 [Link](): Extracts a part of the string.
 [Link](): Replaces a specified substring with another
substring.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String Properties and Methods</title>
</head>
<body>
<h1>String Properties and Methods Demo</h1>
<pre id="output"></pre>
<script>
let text = " Hello, World! Welcome to JavaScript programming. ";
let output = "";
output += "Original String: '" + text + "'\n";
output += "Length of string: " + [Link] + "\n";
let trimmedText = [Link]();
output += "Trimmed String: '" + trimmedText + "'\n";
let upperCaseText = [Link]();
output += "Uppercase String: '" + upperCaseText + "'\n";
let lowerCaseText = [Link]();
output += "Lowercase String: '" + lowerCaseText + "'\n";
let firstOccurrence = [Link]("World");
output += "First occurrence of 'World': " + firstOccurrence + "\n";
let replacedText = [Link]("Hello", "Hi");
output += "Replaced String: '" + replacedText + "'\n";
let subString = [Link](7, 12);
output += "Substring (7, 12): '" + subString + "'\n";
let splitWords = [Link](" ");
output += "Split into words: " + [Link](", ") + "\n";
let includesWord = [Link]("JavaScript");
output += "Does it include 'JavaScript'? " + includesWord + "\n";
output += "Final Modified String: '" + replacedText + "'";
[Link]("output").textContent = output;
</script>
</body>
</html>
Output:
f. Write a program using regex object properties and methods.
Theory:
RegExp (Regular Expression) Object Properties and Methods
 The RegExp object is used for matching text patterns in strings.
o Properties:
 [Link]: Returns or sets the index at which to start the
next match.
 [Link]: Checks if the global flag (g) is set for the regular
expression.
o Methods:
 [Link](): Tests if a pattern matches a string.
 [Link](): Executes a search for a match and returns an array
of results.
 [Link](): Replaces a substring in the string with another.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RegExp Properties and Methods</title>
</head>
<body>
<h1>RegExp Properties and Methods Demo</h1>
<pre id="output"></pre>
<script>
let text = "JavaScript is a versatile programming language. JavaScript is widely
used.";
let regex = /JavaScript/gi;
let output = "";
output += "Source: " + [Link] + "\n";
output += "Global flag: " + [Link] + "\n";
output += "Ignore case flag: " + [Link] + "\n";
output += "Multiline flag: " + [Link] + "\n";
let matchResults = [Link](regex);
output += "Match results: " + matchResults + "\n";
let testResult = [Link](text);
output += "Does the text contain 'JavaScript'? " + testResult + "\n";
let execResult = [Link](text);
output += "First match found using exec(): " + [Link](execResult) + "\n";
[Link]("output").textContent = output;
</script>
</body>
</html>
Output:
g. Write a program using date object properties and methods.
Theory:
Date Object Properties and Methods
 The Date object represents date and time in JavaScript.
o Properties:
 [Link](): Returns the current time in milliseconds since January
1, 1970.
 [Link]: Contains methods for date manipulation.
o Methods:
 [Link](): Gets the four-digit year of a date.
 [Link](): Returns the month (0-11) of a date.
 [Link](): Returns the day of the month (1-31).
 [Link](): Sets the hours of a date.
 [Link](): Converts a date to a string using the
local time zone.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Date Object Demo</title>
</head>
<body>
<h1>Date Object Properties and Methods Demo</h1>
<pre id="output"></pre>
<script>
let output = "";
let currentDate = new Date();
output += "Current Date and Time: " + currentDate + "\n";
output += "Year: " + [Link]() + "\n";
output += "Month (0-based): " + [Link]() + "\n";
output += "Date: " + [Link]() + "\n";
output += "Day (0-based): " + [Link]() + "\n";
output += "Hours: " + [Link]() + "\n";
output += "Minutes: " + [Link]() + "\n";
output += "Seconds: " + [Link]() + "\n";
output += "Milliseconds: " + [Link]() + "\n";
output +=
"Timestamp (ms since Jan 1, 1970): " + [Link]() + "\n";
output += "UTC String: " + [Link]() + "\n";
output += "ISO String: " + [Link]() + "\n";
let specificDate = new Date(2025, 11, 25);
output += "Specific Date: " + specificDate + "\n";
[Link](2023);
output += "Modified Year: " + [Link]() + "\n";
[Link]("output").textContent = output;
</script>
</body>
</html>
Output:
h. Write a program to explain user-defined object by using properties, methods,
accessors, constructors and display.
Theory:
User-Defined Objects (Properties, Methods, Accessors, Constructors, Display)
 User-defined objects allow developers to create custom objects with specific
properties and behaviors.
o Properties: Variables that hold the object's state.
o Methods: Functions that define behaviors for the object.
o Accessors: Getter and setter functions that allow controlled access to
properties.
o Constructors: Special functions used to create and initialize new
instances of an object.
o Display: A method used to display the object's properties or perform
actions when called.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User-Defined Object Demo</title>
</head>
<body>
<h1>User-Defined Object in JavaScript</h1>
<pre id="output"></pre>
<script>
class Person {
constructor(firstName, lastName, age) {
[Link] = firstName;
[Link] = lastName;
[Link] = age;
}
// Method to get full name
getFullName() {
return [Link] + " " + [Link];
}
// Getter for age
get personAge() {
return [Link];
}
// Setter for age
set personAge(newAge) {
if (newAge > 0) {
[Link] = newAge;
} else {
[Link]("Age must be positive.");
}
}
// Display method to show details
display() {
return `Name: ${[Link]()}\nAge: ${[Link]}`;
}
}
// Create an instance of Person
let person1 = new Person("John", "Doe", 30);
// Access properties and methods
let output = "";
output += "Full Name: " + [Link]() + "\n";
output += "Age: " + [Link] + "\n";
// Modify age using setter
[Link] = 35;
// Display updated details
output += "Updated Age: " + [Link] + "\n";
output += "Details:\n" + [Link]();
[Link]("output").textContent = output;
</script>
</body>
</html>
Output:
 WEEK 8
a. Write a program which asks the user to enter three integers, obtains the numbers from the
user and outputs HTML text that displays the larger number followed by the words
“LARGER NUMBER” in an information message dialog. If the numbers are equal, output
HTML text as “EQUAL NUMBERS”.
b. Write a program to display week days using switch case.
c. Write a program to print 1 to 10 numbers using for, while and do-while loops.
d. Write aprogram to print data in object using for-in, for-each and for-of loops
e. Develop a program to determine whether a given number is an ‘ARMSTRONG
NUMBER’ or not. [Eg: 153 is an Armstrong number, since sum of the cube of the digits is
equal to the number i.e.,13 + 53+ 33 = 153]
f. Write a program to display the denomination of the amount deposited in the bank in terms
of 100’s, 50’s, 20’s, 10’s, 5’s, 2’s & 1’s. (Eg: If deposited amount is Rs.163, the output
should be 1-100’s, 1-50’s, 1- 10’s, 1-2’s & 1-1’s)
8. JavaScript Conditional Statements and Loops
a. Write a program which asks the user to enter three integers, obtains the numbers
from the user and outputs HTML text that displays the larger number followed by the
words “LARGER NUMBER” in an information message dialog. If the numbers are
equal, output HTML text as “EQUAL NUMBERS”.
Theory:
Program to Find Larger Number or Check for Equality

a) Goal: This program asks the user to input three integers. It compares the
numbers and displays either the largest number or a message saying "EǪUAL
NUMBERS" if all numbers are the same.

◦ Approach:
i. Use the prompt() method to collect the user input.
[Link] if and else conditions to compare the numbers and display the
result using alert().
If the numbers are equal, output the message "EǪUAL NUMBERS"; otherwise,
display the largest number followed by "LARGER NUMBER".
Program:
<!DOCTYPE html>
<html>
<head>
<title>Larger Number</title>
</head>
<body>
<script>
let a = parseInt(prompt("Enter first number:"));
let b = parseInt(prompt("Enter second number:"));
let c = parseInt(prompt("Enter third number:"));

if (a === b && b === c) {

[Link]("EQUAL NUMBERS");
} else {
let largest = [Link](a, b, c);
 [Link](largest + " LARGER NUMBER");
}
</script>
</body>
</html>

Output:
b. Write a program to display week days using switch case.
Theory:
Program to Display Weekdays Using Switch-Case

a. Goal: This program displays the name of the weekday based on the user's input (a
number from 1 to 7).
◦ Approach:
i.
Use a switch statement where each case corresponds to a day of the
week.
The number entered by the user determines which day to display.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Weekdays</title>
</head>
<body>
<script>
let day = parseInt(prompt("Enter a number (1-7):"));
switch (day) {
case 1: [Link]("Monday"); break;
case 2: [Link]("Tuesday"); break;
case 3: [Link]("Wednesday"); break;
case 4: [Link]("Thursday"); break;
case 5: [Link]("Friday"); break;
case 6: [Link]("Saturday"); break;
case 7: [Link]("Sunday"); break;
default: [Link]("Invalid Day");
}
</script>
</body>
</html>
Output:
c. Write a program to print 1 to 10 numbers using for, while and do-while loops.
Theory:
Program to Print Numbers from 1 to 10 Using Different Loops

Goal: This program demonstrates how to print numbers 1 through 10 using three
different types of loops: for, while, and do-while.
◦ Approach:
i. Use for loop to iterate through numbers.

ii. Use while loop for the same task, with a condition.
Use do-while loop to ensure the code runs at least once before checking the condition.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Loops</title>
</head>
<body>
<script>
[Link]("<strong>Using for loop:</strong><br>");
for (let i = 1; i <= 10; i++) {
[Link](i + " ");
}

[Link]("<br><strong>Using while loop:</strong><br>");

let j = 1;
while (j <= 10) {
[Link](j + " ");
j++;
}

[Link]("<br><strong>Using do-while loop:</strong><br>");

let k = 1;
 do {
[Link](k + " ");
k++;
} while (k <= 10);
</script>
</body>
</html>
Output:
d. Write aprogram to print data in object using for-in, for-each and for-of loops
Theory:
Program to Print Data in Object Using Loop Types

Goal: This program demonstrates different JavaScript loop types (for-in, forEach,
and for-of) to iterate over an object.
◦ Approach:
i. for-in loop iterates over the object's properties.

[Link]() iterates over the array values (if the object contains
arrays).
for-of loop works with iterable objects, like arrays or strings.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Loops in Objects</title>
</head>
<body>
<script>
let student = { name: "John", age: 20, grade: "A" };

[Link]("<strong>Using for-in:</strong><br>");
for (let key in student) {
[Link](key + ": " + student[key] + "<br>");
}

let numbers = [1, 2, 3, 4];

[Link]("<br><strong>Using for-of:</strong><br>");
for (let value of numbers) {
[Link](value + " ");
}
 [Link]("<br><br><strong>Using forEach:</strong><br>");
[Link](num => [Link](num + " "));
</script>
</body>
</html>
Output:
e. Develop a program to determine whether a given number is an ‘ARMSTRONG
NUMBER’ or not. [Eg: 153 is an Armstrong number, since sum of the cube of the digits
is equal to the number i.e.,13 + 53+ 33 = 153]
Theory:
Program to Check for Armstrong Number

Goal: This program checks if a given number is an Armstrong number. An

Armstrong number is a number where the sum of its digits raised to the power of
the number of digits equals the number itself.

◦ Approach:
i. Extract each digit of the number.

ii.
Compute the sum of the digits raised to the power of the number of
digits.
Compare the sum with the original number to determine if it’s an Armstrong number.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Armstrong Number</title>
</head>
<body>
<script>
let num = parseInt(prompt("Enter a number:"));
let sum = 0, temp = num;

while (temp > 0) {

let digit = temp % 10;
sum += digit ** 3;
temp = [Link](temp / 10);
}

[Link](num === sum ? `${num} is an Armstrong number.` : `${num} is not an

Armstrong number.`);
 </script>
</body>
</html>
Output:
f. Write a program to display the denomination of the amount deposited in the bank in
terms of 100’s, 50’s, 20’s, 10’s, 5’s, 2’s & 1’s. (Eg: If deposited amount is Rs.163, the
output
should be 1-100’s, 1-50’s, 1- 10’s, 1-2’s & 1-1’s)
Theory:
Program to Display Denominations of Deposited Amount

 Goal: This program takes an amount (e.g., Rs. 163) and calculates how many
banknotes of different denominations (100’s, 50’s, etc.) are needed to match the
amount.

o Approach:

▪
Use division and modulo operations to calculate how many notes of
each denomination fit into the amount.
Start with the largest denomination and work down to the smallest (1’s).
Program:
<!DOCTYPE html>
<html>
<head>
<title>Denominations</title>
</head>
<body>
<script>
let amount = parseInt(prompt("Enter the amount:"));
let denominations = [100, 50, 20, 10, 5, 2, 1];
[Link]("<strong>Denominations:</strong><br>");

[Link](den => {
let count = [Link](amount / den);
if (count > 0) {
[Link](`${count} x ${den}<br>`);
amount %= den;
}
});
 </script>
</body>
</html>
Output:
 WEEK 9
a. Design a appropriate function should be called to display
i. Factorial of that number
ii. Fibonacci series up to that number
iii. Prime numbers up to that number
iv. Is it palindrome or not
b. Design a HTML having a text box and four buttons named Factorial, Fibonacci, Prime,
and Palindrome. When a button is pressed an appropriate function should be called to
display
i. Factorial of that number
ii. Fibonacci series up to that number
iii. Prime numbers up to that number
iv. Is it palindrome or not
c. Write a program to validate the following fields in a registration page
9. JavaScript Functions and Events
a. Design a appropriate function should be called to display
i. Factorial of that number
ii. Fibonacci series up to that number
iii. Prime numbers up to that number
iv. Is it palindrome or not
Theory:

Design Functions for Various Operations

◦ Factorial of a Number:
▪ Goal: To calculate the factorial of a given number.
▪ Explanation: The factorial of a number n is the product of all positive integers
less than or equal to n. It is calculated as n! = n * (n-1) * (n-2) * ...
• * 1. For example, 5! = 5 * 4 * 3 * 2 * 1 = 120.

▪ Function Design: A recursive or iterative function can be used to calculate

factorial.
◦ Fibonacci Series:
▪ Goal: To display the Fibonacci sequence up to a given number n.
▪ Explanation: The Fibonacci series starts with 0 and 1, and each subsequent
number is the sum of the previous two. The series for n=10 would be 0, 1, 1, 2, 3,
5, 8, 13, 21, 34.

▪ Function Design: A loop or recursion can generate the series up to n.

◦ Prime Numbers:
▪ Goal: To find and display all prime numbers up to a given number n.
▪ Explanation: A prime number is a number greater than 1 that has no divisors
other than 1 and itself. For example, 2, 3, 5, 7 are prime numbers.
▪ Function Design: The function iterates from 2 to n and checks whether a number
is divisible only by 1 and itself.

◦ Palindrome Check:
▪ Goal: To determine if a given number is a palindrome.
▪ Explanation: A palindrome is a number that reads the same forwards and
backwards. For example, 121 is a palindrome, but 123 is not.
 ▪ Function Design: Convert the number to a string and check if it is equal to its
reverse.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Functions</title>
</head>
<body>
<script>
function factorial(n) {
return n === 0 ? 1 : n * factorial(n - 1);
}

function fibonacci(n) {
let series = [0, 1];
for (let i = 2; i < n; i++) {
[Link](series[i - 1] + series[i - 2]);
}
return [Link](0, n);
}

function isPrime(num) {
if (num < 2) return false;
for (let i = 2; i <= [Link](num); i++) {
if (num % i === 0) return false;
}
return true;
}
 function palindromeCheck(str) {
return str === [Link]("").reverse().join("");
}

let num = parseInt(prompt("Enter a number:"));

[Link]("Factorial: " + factorial(num) + "<br>");
[Link]("Fibonacci: " + fibonacci(num) + "<br>");
[Link]("Is Prime: " + isPrime(num) + "<br>");
[Link]("Palindrome: " + palindromeCheck(String(num)));
</script>
</body>
</html>

Output:
b. Design a HTML having a text box and four buttons named Factorial, Fibonacci,
Prime,
and Palindrome. When a button is pressed an appropriate function should be called to
display
i. Factorial of that number
ii. Fibonacci series up to that number
iii. Prime numbers up to that number
iv. Is it palindrome or not
Theory:
Design HTML with Buttons for Various Operations
• Goal: Create an HTML page with a text box to accept the number and four
buttons to trigger the respective functions for factorial, Fibonacci, prime number
check, and palindrome check.

• Explanation:
• Use HTML to design a simple form with a text input to enter a number.

• Create four buttons named "Factorial", "Fibonacci", "Prime", and "Palindrome".

• Each button, when clicked, will call the appropriate JavaScript function based on
the number entered.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Function Buttons</title>
<script>
function factorial(n) {
return n === 0 ? 1 : n * factorial(n - 1);
}

function fibonacci(n) {
let series = [0, 1];
for (let i = 2; i < n; i++) {
 [Link](series[i - 1] + series[i - 2]);
}
return [Link](0, n);
}

function isPrime(num) {
if (num < 2) return false;
for (let i = 2; i <= [Link](num); i++) {
if (num % i === 0) return false;
}
return true;
}

function palindromeCheck(str) {
return str === [Link]("").reverse().join("");
}

function handleClick(action) {
let num = parseInt([Link]("number").value);
if (isNaN(num)) {
alert("Please enter a valid number");
return;
}
let result;
switch (action) {
case "factorial":
result = "Factorial: " + factorial(num);
break;
case "fibonacci":
 result = "Fibonacci: " + fibonacci(num);
break;
case "prime":
result = "Is Prime: " + isPrime(num);
break;
case "palindrome":
result = "Palindrome: " + palindromeCheck(String(num));
break;
}
[Link]("output").innerHTML = result;
}
</script>
</head>
<body>
<input type="text" id="number" placeholder="Enter a number">
<button onclick="handleClick('factorial')">Factorial</button>
<button onclick="handleClick('fibonacci')">Fibonacci</button>
<button onclick="handleClick('prime')">Prime</button>
<button onclick="handleClick('palindrome')">Palindrome</button>
<p id="output"></p>
</body>
</html>
Output:
c. Write a program to validate the following fields in a registration page
Theory:
Program to Validate Registration Fields
 Goal: To validate the fields in a user registration form such as name, email,
password, and confirm password.
o Explanation:
▪ Use JavaScript to ensure that the form fields are filled correctly. For
instance:

▪ Name: Ensure the name is not empty.

▪ Email: Use regular expressions to check if the email format is
valid.

▪ Password: Ensure the password meets specific criteria, such

as a minimum length and contains both letters and numbers.

▪ Confirm Password: Ensure the confirm password field

matches the password.
▪ If any validation fails, display an error message and prevent form
submission.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validateForm() {
const name = [Link]("name").value;
const mobile = [Link]("mobile").value;
const email = [Link]("email").value;

const namePattern = /^[A-Za-z][A-Za-z0-9]{5,}$/;

const mobilePattern = /^[0-9]{10}$/;
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 if () {
alert("Name must start with an alphabet, be alphanumeric, and at least 6 characters
long.");
return false;
}
if () {
alert("Mobile number must be 10 digits.");
return false;
}
if () {
alert("Invalid email format.");
return false;
}
alert("Form submitted successfully!");
return true;
}
</script>
</head>
<body>
<form onsubmit="return validateForm()">
<label>Name: <input type="text" id="name"></label><br>
<label>Mobile: <input type="text" id="mobile"></label><br>
<label>Email: <input type="text" id="email"></label><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output: