Scribd
Upload
3 views32 pages

Fullstack Reference-1

full stack

Uploaded by

sudheertokuri756
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views32 pages

Fullstack Reference-1

full stack

Uploaded by

sudheertokuri756
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

L T P C

III Year I Semester FULL STACK DEVELOPMENT -1


0 1 2 2

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 <a> 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

1a. HTML Program – Lists (Ordered, Unordered, Nested, Definition)


html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists Example</title>
</head>
<body>
<h2>Ordered List</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>

<h2>Unordered List</h2>
<ul>
<li>Notebook</li>
<li>Pen</li>
<li>Pencil</li>
</ul>

<h2>Nested Lists</h2>
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Mango</li>
</ul>
</li>
<li>Vegetables
<ol>
<li>Carrot</li>
<li>Beans</li>
</ol>
</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>

1b. HTML Program – Hyperlinks with <a>, href, and target


html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<h2>Hyperlink Examples</h2>
<p><a href="[Link] target="_blank">Open Google in new
tab</a></p>
<p><a href="[Link] target="_self">Open Wikipedia in
same tab</a></p>
</body>
</html>

1c. HTML Program – Images with Specific Size and Links to Profiles
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Profile Images</title>
</head>
<body>
<h2>Our Profiles</h2>
<a href="[Link] target="_blank">
<img src="[Link]" alt="My Image" height="150" width="150">
</a>
<a href="[Link] target="_blank">
<img src="[Link]" alt="Friend Image" height="150"
width="150">
</a>
</body>
</html>
Replace [Link], [Link], and the profile URLs with actual paths and links.

1d. HTML Program – Image Gallery with Thumbnails Linking to Full-Size


Images
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Thumbnail Image Gallery</title>
</head>
<body>
<h2>Image Gallery</h2>
<a href="[Link]" target="_blank">
<img src="[Link]" alt="Image 1" height="100" width="100">
</a>
<a href="[Link]" target="_blank">
<img src="[Link]" alt="Image 2" height="100" width="100">
</a>
<a href="[Link]" target="_blank">
<img src="[Link]" alt="Image 3" height="100" width="100">
</a>
</body>
</html>

Ensure [Link] are the small (100x100) thumbnail versions, and [Link] are the full-
size images.

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
<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).

2a. HTML Program – Basic Table with rowspan, colspan, and Borders
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<h2>Basic Table Example</h2>
<table border="1">
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th colspan="2">Marks</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>Emma</td>
<td>85</td>
<td>88</td>
</tr>
<tr>
<td>Mike</td>
<td>78</td>
<td>82</td>
</tr>
</table>
</body>
</html>

2b. HTML Program – Timetable with Caption, Cellspacing, Padding, rowspan,


colspan

html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>College Timetable</title>
</head>
<body>
<h2>College Timetable</h2>
<table border="1" cellspacing="5" cellpadding="10">
<caption><strong>[Link] Class Timetable</strong></caption>
<tr>
<th>Day</th>
<th>9-10</th>
<th>10-11</th>
<th>11-12</th>
<th>12-1</th>
<th>1-2</th>
<th>2-3</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>Physics</td>
<td>Chemistry</td>
<td rowspan="5">Lunch</td>
<td colspan="2">Lab</td>
</tr>
<tr>
<td>Tuesday</td>
<td>English</td>
<td colspan="2">Workshop</td>
<td>Sports</td>
<td>Library</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Math</td>
<td>Computer</td>
<td>Electronics</td>
<td>Physics</td>
<td>Chemistry</td>
</tr>
<tr>
<td>Thursday</td>
<td colspan="3">Seminar</td>
<td colspan="2">Project</td>
</tr>
<tr>
<td>Friday</td>
<td>English</td>
<td>Math</td>
<td>Computer</td>
<td>Free</td>
<td>Quiz</td>
</tr>
</table>
</body>
</html>

2c. HTML Program – Registration Form using Tables


html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Student Registration Form</h2>
<form>
<table border="0" cellpadding="10">
<tr>
<td>Full Name:</td>
<td><input type="text" name="fullname"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="number" name="phone"></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>Hobbies:</td>
<td>
<input type="checkbox" name="hobbies"
value="Reading">Reading
<input type="checkbox" name="hobbies"
value="Sports">Sports
<input type="checkbox" name="hobbies" value="Music">Music
</td>
</tr>
<tr>
<td>Department:</td>
<td>
<select name="department">
<option value="CSE">CSE</option>
<option value="ECE">ECE</option>
<option value="EEE">EEE</option>
<option value="MECH">MECH</option>
</select>
</td>
</tr>
<tr>
<td>Address:</td>
<td><textarea name="address" rows="4"
cols="30"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>

2d. HTML Program – Frameset Dividing Page into 3 Parts

⚠ Note: Modern HTML no longer supports <frameset> in HTML5. But for academic purposes,
here’s a classic example using it:

frameset_example.html:

html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames Example</title>
</head>
<frameset rows="33%,33%,34%">
<frame src="[Link]">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</html>

Create the following 3 HTML files in the same folder:

[Link]:

html
CopyEdit
<!DOCTYPE html>
<html>
<body>
<img src="[Link]" width="100%" height="100%">
</body>
</html>

[Link]:

html
CopyEdit
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph displayed in the second frame. It can contain any
information or description.</p>
</body>
</html>

[Link]:

html
CopyEdit
<!DOCTYPE html>
<html>
<body>
<h3>This is the third frame</h3>
<a href="[Link] target="_blank">Visit Google</a>
</body>
</html>

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).

3a. HTML Program Using HTML5 Semantic Tags


html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Semantic Tags</title>
</head>
<body>

<header>
<h1>Welcome to My Blog</h1>
</header>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<main>
<section>
<article>
<header>
<h2>HTML5 Structure</h2>
</header>
<p>HTML5 introduces new semantic elements to define parts of a web
page clearly.</p>
<figure>
<img src="[Link]" alt="HTML5 Logo" width="200">
<figcaption>Figure: HTML5 Logo</figcaption>
</figure>
</article>
</section>

<aside>
<h3>Quick Links</h3>
<ul>
<li><a href="#">Learn HTML</a></li>
<li><a href="#">Learn CSS</a></li>
</ul>
</aside>
</main>

<footer>
<p>&copy; 2025 My Blog. All rights reserved.</p>
</footer>

</body>
</html>

3b. HTML Program to Embed Audio and Video


html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media Embedding</title>
</head>
<body>

<h2>Embedded Audio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<h2>Embedded Video</h2>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</body>
</html>

Replace audio.mp3 and video.mp4 with your actual media file names.
3c. HTML Program with Inline, Internal, and External CSS
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Types Example</title>

<!-- Internal CSS -->


<style>
body {
background-color: #f0f0f0;
}

.internal-style {
color: green;
font-size: 18px;
}
</style>

<!-- External CSS -->


<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>

<h1 style="color: red;">This is Inline CSS</h1> <!-- Inline CSS -->

<p class="internal-style">This is styled using Internal CSS.</p>

<p class="external-style">This is styled using External CSS.</p>

</body>
</html>

Create an external CSS file named [Link]:

css
CopyEdit
/* [Link] */
.external-style {
color: blue;
font-weight: bold;
font-size: 16px;
}
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

✅ 4a. CSS Selector Forms Example


html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selector Forms</title>
<style>
/* i. SIMPLE SELECTORS */
/* Element selector */
p {
color: navy;
}

/* ID selector */
#main-title {
font-size: 24px;
color: darkgreen;
}

/* Class selector */
.highlight {
background-color: yellow;
font-weight: bold;
}

/* Group selector */
h2, h3 {
font-family: Arial, sans-serif;
}

/* Universal selector */
* {
margin: 5px;
}

/* ii. COMBINATOR SELECTORS */


/* Descendant selector */
div p {
font-style: italic;
}

/* Child selector */
ul > li {
color: darkred;
}

/* Adjacent sibling selector */


h2 + p {
color: orange;
}

/* General sibling selector */


h3 ~ p {
color: purple;
}

/* iii. PSEUDO-CLASS SELECTORS */


a:hover {
color: red;
}

li:first-child {
font-weight: bold;
}

input:focus {
background-color: lightyellow;
}

/* iv. PSEUDO-ELEMENT SELECTORS */


p::first-line {
font-size: 18px;
}

p::before {
content: "→ ";
color: gray;
}

/* v. ATTRIBUTE SELECTORS */
input[type="text"] {
border: 2px solid blue;
}

a[target="_blank"] {
color: green;
text-decoration: underline;
}
</style>
</head>
<body>

<h1 id="main-title">CSS Selectors Example</h1>


<h2>Simple and Group Selectors</h2>
<p>This is a paragraph styled with a simple element selector.</p>
<p class="highlight">This paragraph uses a class selector.</p>

<h3>Combinator Selectors</h3>
<div>
<p>This paragraph is inside a div (descendant).</p>
</div>
<ul>
<li>First child (child selector)</li>
<li>Second child</li>
</ul>
<p>This is after h3 (general sibling).</p>

<h2>Adjacent Paragraph</h2>
<p>This is an adjacent paragraph (adjacent sibling).</p>

<h2>Pseudo-class Selectors</h2>
<a href="#" target="_blank">Hover over this link</a><br><br>
<input type="text" placeholder="Focus here...">

<h2>Pseudo-element Selectors</h2>
<p>This paragraph uses ::first-line and ::before pseudo-elements.</p>

<h2>Attribute Selector</h2>
<input type="text" placeholder="Enter name">
<input type="password" placeholder="Enter password">
<br>
<a href="[Link] target="_blank">External Link</a>

</body>
</html>

✅ Explanation by Category:

Selector Type Example Used CSS Rule


Element selector p p { color: navy; }
#main-title { font-size:
ID selector #main-title
24px; }
.highlight { background-color:
Class selector .highlight
yellow; }
Group selector h2, h3 h2, h3 { font-family: Arial; }
Universal selector * * { margin: 5px; }
Descendant selector div p Targets <p> inside <div>
Child selector ul > li Targets direct <li> in <ul>
Adjacent sibling h2 + p Targets <p> right after <h2>
selector
General sibling h3 ~ p Targets all <p> siblings after <h3>
selector
Pseudo-class a:hover, input:focus, li:first- Styling on interaction/position
child
Selector Type Example Used CSS Rule
selector
Pseudo-element
p::first-line, p::before Styles part of element
selector
input[type="text"],
Attribute selector a[target="_blank"]
Based on attribute value

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

✅ 5a. Program to Reference Colors in Different Ways


html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Color References</title>
<style>
.name-color {
color: red; /* Named color */
}

.hex-color {
color: #00FF00; /* Hexadecimal */
}

.rgb-color {
color: rgb(0, 0, 255); /* RGB */
}

.rgba-color {
color: rgba(255, 0, 0, 0.5); /* RGBA with transparency */
}

.hsl-color {
color: hsl(120, 100%, 50%); /* HSL */
}

.hsla-color {
color: hsla(240, 100%, 50%, 0.7); /* HSLA */
}
</style>
</head>
<body>
<p class="name-color">This is a named color (red).</p>
<p class="hex-color">This is a hexadecimal color (#00FF00).</p>
<p class="rgb-color">This is an RGB color (rgb(0, 0, 255)).</p>
<p class="rgba-color">This is an RGBA color (rgba(255, 0, 0, 0.5)).</p>
<p class="hsl-color">This is an HSL color (hsl(120, 100%, 50%)).</p>
<p class="hsla-color">This is an HSLA color (hsla(240, 100%, 50%,
0.7)).</p>
</body>
</html>

✅ 5b. CSS Rule for Fixed Background Image Positioned


Halfway Down
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixed Background Image</title>
<style>
body {
height: 2000px;
background-image: url('[Link]');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center 50%;
background-size: cover;
}
</style>
</head>
<body>
<h2>Scroll down and see the background image stay in place.</h2>
</body>
</html>

📝 Replace [Link] with a valid image path.

✅ 5c. Font and Text CSS Properties Example


html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font and Text CSS</title>
<style>
.font-style {
font-size: 20px;
font-weight: bold;
font-style: italic;
}

.text-style {
text-decoration: underline;
text-transform: uppercase;
text-align: center;
}
</style>
</head>
<body>
<p class="font-style">This text uses font-size, weight, and style.</p>
<p class="text-style">This line is underlined, uppercase, and
centered.</p>
</body>
</html>

✅ 5d. CSS Box Model Explanation: Content, Padding,


Border, Margin
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Box Model</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue; /* Content area */
padding: 20px; /* Padding */
border: 5px solid blue; /* Border */
margin: 30px; /* Margin */
}
</style>
</head>
<body>
<h2>CSS Box Model Example</h2>
<div class="box">
This is content inside a styled box.
</div>
</body>
</html>
Summary Table:
Concept CSS Properties Used
Color Referencing color: red, #hex, rgb(), hsl() etc.
Concept CSS Properties Used
Background Image background-image, background-attachment, etc.
Font/Text Styling font-size, font-weight, text-transform, etc.
Box Model padding, border, margin, content area

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

✅ 6a. Embed Internal and External JavaScript


[Link] (Main HTML File)
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal and External JavaScript</title>
<!-- Internal JavaScript -->
<script>
function internalFunction() {
alert("This is internal JavaScript!");
}
</script>
<!-- Linking External JavaScript -->
<script src="[Link]"></script>
</head>
<body>
<h2>JavaScript Integration</h2>
<button onclick="internalFunction()">Run Internal JS</button>
<button onclick="externalFunction()">Run External JS</button>
</body>
</html>

[Link] (External JavaScript File)


javascript
CopyEdit
function externalFunction() {
alert("This is external JavaScript!");
}
✅ 6b. Display Output in Different Ways
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Output Methods</title>
</head>
<body>
<h2>Output Methods</h2>
<p id="demo"></p>
<script>
// 1. alert box
alert("This is an alert box!");

// 2. [Link]
[Link]("This is written using [Link]<br>");

// 3. innerHTML
[Link]("demo").innerHTML = "This is using innerHTML";

// 4. [Link]
[Link]("This is shown in the console");
</script>
</body>
</html>

✅ 6c. Input Methods in JavaScript


html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Input Methods</title>
</head>
<body>
<h2>Input Methods</h2>
<script>
// 1. Using prompt()
let name = prompt("Enter your name:");
[Link]("Your name is: " + name + "<br>");

// 2. Using HTML form elements


</script>

<form onsubmit="displayInput(); return false;">


Enter age: <input type="number" id="age">
<input type="submit" value="Submit">
</form>
<p id="result"></p>

<script>
function displayInput() {
let age = [Link]("age").value;
[Link]("result").innerText = "Your age is: " +
age;
}
</script>
</body>
</html>

✅ 6d. Voter Eligibility Prompt and Table Display


html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Voter Eligibility</title>
<style>
table {
border-collapse: collapse;
width: 50%;
margin-top: 20px;
}

th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}

th {
background-color: lightgray;
}
</style>
</head>
<body>
<h2>Voter Eligibility Check</h2>

<script>
let name = prompt("Enter your name:");
let age = parseInt(prompt("Enter your age:"));

let status = (age >= 18) ? "Eligible to Vote" : "Not Eligible to


Vote";

[Link]("<table>");
[Link]("<tr><th>Name</th><th>Age</th><th>Voting
Status</th></tr>");
[Link]("<tr><td>" + name + "</td><td>" + age + "</td><td>" +
status + "</td></tr>");
[Link]("</table>");
</script>
</body>
</html>

✅ Summary of Concepts Used:

Concept Used In
Internal JS 6a (<script> in HTML)
External JS 6a (linked .js file)
Output Methods 6b (alert, [Link], innerHTML)
Input Methods 6c (prompt, form input)
Type Conversion 6d (parseInt)
Conditionals 6d (if / ternary operator)

7. JavaScript 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.

✅ 7a. Document Object Properties & Methods


html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Document Object Example</title>
</head>
<body>
<h2 id="demo">Original Title</h2>
<script>
[Link]("demo").innerHTML = "Modified using
[Link]";
[Link]("Document Title: " + [Link] + "<br>");
[Link]("URL: " + [Link] + "<br>");
[Link]("Last Modified: " + [Link]);
</script>
</body>
</html>

✅ 7b. Window Object Properties & Methods


html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Window Object Example</title>
</head>
<body>
<script>
alert("Window Width: " + [Link]);
[Link]("Window Height: " + [Link]);

function openWindow() {
[Link]("[Link] "_blank");
}

function confirmAction() {
let result = confirm("Do you want to continue?");
alert("You clicked: " + (result ? "OK" : "Cancel"));
}

// Example buttons
[Link]('<button onclick="openWindow()">Open Google</button>');
[Link]('<button onclick="confirmAction()">Confirm</button>');
</script>
</body>
</html>

✅ 7c. Array Object Properties & Methods


html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Array Object Example</title>
</head>
<body>
<script>
let fruits = ["Apple", "Mango", "Banana"];
[Link]("Orange");
[Link]();

[Link]("Fruits Array: " + [Link](", ") + "<br>");


[Link]("First Fruit: " + fruits[0] + "<br>");
[Link]("Array Length: " + [Link]);
</script>
</body>
</html>

✅ 7d. Math Object Properties & Methods


html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Math Object Example</title>
</head>
<body>
<script>
[Link]("PI: " + [Link] + "<br>");
[Link]("Square root of 25: " + [Link](25) + "<br>");
[Link]("Random number (0-1): " + [Link]() + "<br>");
[Link]("Max of 10, 30, 50: " + [Link](10, 30, 50));
</script>
</body>
</html>

✅ 7e. String Object Properties & Methods


html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>String Object Example</title>
</head>
<body>
<script>
let str = "JavaScript is Powerful!";
[Link]("Original: " + str + "<br>");
[Link]("Length: " + [Link] + "<br>");
[Link]("Uppercase: " + [Link]() + "<br>");
[Link]("Substring(0,10): " + [Link](0, 10) + "<br>");
[Link]("Includes 'Powerful': " + [Link]("Powerful"));
</script>
</body>
</html>

✅ 7f. Regex (RegExp) Object Example


html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>RegExp Object Example</title>
</head>
<body>
<script>
let text = "The code is 123ABC and the ID is 456DEF.";
let pattern = /\d{3}[A-Z]{3}/g;
let matches = [Link](pattern);

[Link]("Matches found: " + [Link](", "));


</script>
</body>
</html>

✅ 7g. Date Object Properties & Methods


html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Date Object Example</title>
</head>
<body>
<script>
let now = new Date();
[Link]("Current Date & Time: " + now + "<br>");
[Link]("Year: " + [Link]() + "<br>");
[Link]("Month: " + ([Link]() + 1) + "<br>");
[Link]("Date: " + [Link]());
</script>
</body>
</html>

✅ 7h. User-defined Object with Properties, Methods,


Accessors, Constructor
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>User-defined Object</title>
</head>
<body>
<script>
function Student(name, age, grade) {
[Link] = name;
[Link] = age;
[Link] = grade;

// Method
[Link] = function () {
return [Link] + " is " + [Link] + " years old, in grade "
+ [Link];
};

// Accessor (getter)
[Link] = function () {
return [Link];
};

// Accessor (setter)
[Link] = function (newGrade) {
[Link] = newGrade;
};
}

let s1 = new Student("Ravi", 16, "10th");


[Link]([Link]() + "<br>");

[Link]("11th");
[Link]("Updated Grade: " + [Link]());
</script>
</body>
</html>

✅ Summary

Object Key Methods/Properties Used


document getElementById, title, URL
window open(), confirm(), innerWidth
array push(), sort(), length, join()
math PI, sqrt(), random(), max()
string length, toUpperCase(), includes()
regex match() with RegExp
date getFullYear(), getMonth()
user-defined Custom object with constructor, methods, accessors

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”.
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 a program 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)

✅ 8a. Find Largest of Three Integers or Check if Equal


html
CopyEdit
<!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]("<h3>EQUAL NUMBERS</h3>");
} else {
let largest = [Link](a, b, c);
[Link]("<h3>" + largest + " - LARGER NUMBER</h3>");
}
</script>
</body>
</html>

✅ 8b. Display Weekdays Using switch Case


html
CopyEdit
<!DOCTYPE html>
<html>
<head><title>Week Days</title></head>
<body>
<script>
let day = parseInt(prompt("Enter day number (1 to 7):"));

switch (day) {
case 1: [Link]("Sunday"); break;
case 2: [Link]("Monday"); break;
case 3: [Link]("Tuesday"); break;
case 4: [Link]("Wednesday"); break;
case 5: [Link]("Thursday"); break;
case 6: [Link]("Friday"); break;
case 7: [Link]("Saturday"); break;
default: [Link]("Invalid input!");
}
</script>
</body>
</html>

✅ 8c. Print Numbers 1 to 10 using for, while, and do-while


html
CopyEdit
<!DOCTYPE html>
<html>
<head><title>Loops</title></head>
<body>
<h3>Using for loop:</h3>
<script>
for (let i = 1; i <= 10; i++) {
[Link](i + " ");
}
</script>

<h3>Using while loop:</h3>


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

<h3>Using do-while loop:</h3>


<script>
let k = 1;
do {
[Link](k + " ");
k++;
} while (k <= 10);
</script>
</body>
</html>

✅ 8d. Print Object Data using for-in, forEach, and for-of


html
CopyEdit
<!DOCTYPE html>
<html>
<head><title>Object Iteration</title></head>
<body>
<script>
let person = {
name: "Ravi",
age: 22,
city: "Hyderabad"
};

[Link]("<h3>Using for-in loop:</h3>");


for (let key in person) {
[Link](key + ": " + person[key] + "<br>");
}

let colors = ["Red", "Green", "Blue"];

[Link]("<h3>Using forEach loop:</h3>");


[Link](function(color) {
[Link](color + "<br>");
});

[Link]("<h3>Using for-of loop:</h3>");


for (let color of colors) {
[Link](color + "<br>");
}
</script>
</body>
</html>

✅ 8e. Armstrong Number Check


html
CopyEdit
<!DOCTYPE html>
<html>
<head><title>Armstrong Number</title></head>
<body>
<script>
let num = parseInt(prompt("Enter a number:"));
let temp = num;
let sum = 0;

while (temp > 0) {


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

if (sum === num) {


[Link](num + " is an ARMSTRONG NUMBER.");
} else {
[Link](num + " is NOT an Armstrong number.");
}
</script>
</body>
</html>

✅ 8f. Currency Denomination Breakdown


html
CopyEdit
<!DOCTYPE html>
<html>
<head><title>Denomination</title></head>
<body>
<script>
let amount = parseInt(prompt("Enter amount to be deposited:"));
let denominations = [100, 50, 20, 10, 5, 2, 1];

[Link]("<h3>Denomination Breakdown</h3>");
for (let i = 0; i < [Link]; i++) {
let note = [Link](amount / denominations[i]);
if (note > 0) {
[Link](note + " - " + denominations[i] + "'s<br>");
amount %= denominations[i];
}
}
</script>
</body>
</html>

✅ Summary Table

Topic Concepts Used


Largest Number if-else, [Link]()
Weekdays switch-case
Number Series for, while, do-while
Object Iteration for-in, forEach(), for-of
Armstrong Number Loops, digit manipulation, [Link]()
Currency Denomination Greedy algorithm, division, modulus

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])
✅ 9a. JavaScript Functions for:
i. Factorial, ii. Fibonacci, iii. Prime, iv. Palindrome
html
CopyEdit
<!DOCTYPE html>
<html>
<head><title>JavaScript Functions</title></head>
<body>
<script>
function factorial(n) {
let result = 1;
for (let i = 2; i <= n; i++) {
result *= i;
}
return result;
}

function fibonacci(n) {
let fib = [0, 1];
for (let i = 2; i < n; i++) {
fib[i] = fib[i - 1] + fib[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 primeUpto(n) {
let primes = [];
for (let i = 2; i <= n; i++) {
if (isPrime(i)) [Link](i);
}
return primes;
}

function isPalindrome(num) {
let str = [Link]();
let reversed = [Link]("").reverse().join("");
return str === reversed;
}

// Example Calls:
let number = 7;
[Link]("Factorial of " + number + " is " + factorial(number) +
"<br>");
[Link]("Fibonacci series up to " + number + ": " +
fibonacci(number).join(", ") + "<br>");
[Link]("Prime numbers up to " + number + ": " +
primeUpto(number).join(", ") + "<br>");
[Link](number + (isPalindrome(number) ? " is a Palindrome" : "
is NOT a Palindrome"));
</script>
</body>
</html>

✅ 9b. HTML Page with Buttons Triggering Functions


html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Functions with Events</title>
<style>
input, button { margin: 10px; padding: 5px; }
</style>
</head>
<body>
<h2>Enter a Number</h2>
<input type="number" id="numBox" placeholder="Enter number">
<br>
<button onclick="displayFactorial()">Factorial</button>
<button onclick="displayFibonacci()">Fibonacci</button>
<button onclick="displayPrimes()">Prime</button>
<button onclick="checkPalindrome()">Palindrome</button>
<p id="result"></p>

<script>
function getNumber() {
return parseInt([Link]("numBox").value);
}

function displayFactorial() {
let n = getNumber();
let result = 1;
for (let i = 2; i <= n; i++) result *= i;
[Link]("result").innerText = "Factorial: " +
result;
}

function displayFibonacci() {
let n = getNumber();
let fib = [0, 1];
for (let i = 2; i < n; i++) fib[i] = fib[i - 1] + fib[i - 2];
[Link]("result").innerText = "Fibonacci: " +
[Link](0, n).join(", ");
}

function displayPrimes() {
let n = getNumber();
let primes = [];
for (let i = 2; i <= n; i++) {
let isPrime = true;
for (let j = 2; j <= [Link](i); j++) {
if (i % j === 0) {
isPrime = false;
break;
}
}
if (isPrime) [Link](i);
}
[Link]("result").innerText = "Primes: " +
[Link](", ");
}

function checkPalindrome() {
let n = getNumber();
let str = [Link]();
let rev = [Link]("").reverse().join("");
let message = (str === rev) ? "It is a Palindrome" : "It is NOT a
Palindrome";
[Link]("result").innerText = message;
}
</script>
</body>
</html>

✅ 9c. Registration Form Field Validation


html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Registration Form Validation</title>
<style>
input { margin: 10px; padding: 5px; }
.error { color: red; }
</style>
</head>
<body>
<h2>Registration Form</h2>
<form onsubmit="return validateForm()">
Name: <input type="text" id="name"><br>
Mobile: <input type="text" id="mobile"><br>
Email: <input type="text" id="email"><br>
<input type="submit" value="Submit">
</form>
<p id="errorMsg" class="error"></p>

<script>
function validateForm() {
let name = [Link]("name").[Link]();
let mobile = [Link]("mobile").[Link]();
let email = [Link]("email").[Link]();
let error = "";

// i. Name Validation
if (!/^[A-Za-z][A-Za-z0-9]{5,}$/.test(name)) {
error += "Invalid name. Minimum 6 characters, starts with
letter.<br>";
}

// ii. Mobile Validation


if (!/^\d{10}$/.test(mobile)) {
error += "Mobile number must be 10 digits only.<br>";
}

// iii. Email Validation


if (!/^[\w.-]+@[a-zA-Z]+\.[a-z]{2,6}$/.test(email)) {
error += "Invalid email format.<br>";
}

[Link]("errorMsg").innerHTML = error;

return error === "";


}
</script>
</body>
</html>

✅ Summary Table:

Part Functionality Concepts Used


9a Custom Functions loops, conditions
9b HTML Events onclick, DOM I/O
9c Validation RegExp, form events

You might also like