Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
33 views50 pages

2024 - Web Lab Record Final

Uploaded by

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

2024 - Web Lab Record Final

Uploaded by

Ram Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

II B.

Sc (Data Science) III Semester

Web Technologies Lab Record

1. Design web pages for your college


2. Create your class timetable using table tag.
3. Create feedback for your curriculum using forms
4. Create a web page using frame
5. Design a web page of your biodata
6. Create an Inline style sheet for your webpage
7. Create an Internal style sheet for your webpage
8. Create an External style sheet for your webpage
9. demonstrate formatting blocks of information using Classes & DIV tag
10. JavaScript program to print Factorial of a given number
11. JavaScript program to create a Simple calculator
12. JavaScript program to find sum of n even numbers and display the result
13. JavaScript program to print n Fibonacci numbers
14. JavaScript program to check whether given number is prime or not
15. Create a login form with email id and password. Perform input validation
16. JavaScript program to Create a form to input college admission details and
display the same data

17. Create a xml document to store book information in a library with internal DTD
Web Technologies Lab Record
Program 1
Design web pages for your college containing a description of the courses, departments,
faculties, library etc, use href, list tags.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sir C R Reddy College for Women, Eluru</title>
</head>
<body>
<header>
<h1 align="center">Sir C R Reddy College for Women, Eluru </h1>
<h3 align="center">Vatluru, Eluru, Eluru Dist.(AP)</h3>
<nav>
<ul>
<li><a href="#courses">Courses</a></li>
<li><a href="#departments">Departments</a></li>
<li><a href="#faculties">Faculties</a></li>
<li><a href="#library">Library</a></li>
</ul>
</nav>
</header>

<main>
<!-- Courses Section -->
<section id="courses">
<h2>Courses</h2>
<p>Our college offers a wide range of courses in various disciplines. Below is a list of
some of the popular courses:</p>
<ul>
<li>B.Sc(Computer Science)</li>
<li>B.Sc(Data Science)</li>
<li>B.Sc(Statistics)</li>
<li>B.Sc(Mathematics)</li>
<li>B.Sc(Electronics)</li>
<li>B.Sc(Physics)</li>
<li>B.Sc(Chemistry)</li>
<li>B.Sc(Botany)</li>
<li>B.Sc(Zoology)</li>
<li>B.Sc(Fisheries)</li>
<li>B.Com(General)</li>
<li>B.Com(Computer Applications)</li>
<li>B.B.A</li>
<li>M.Sc(organic Chemistry)</li>
</ul>
1
</section>

<!-- Departments Section -->

<section id="departments">
<h2>Departments</h2>
<p>Our college has several departments, each specializing in different fields of study.
Explore our departments:</p>
<ul>
<li><a href="#cs-department">Department of Computer Science</a></li>
<li><a href="#english-department">Department of English</a></li>
<li><a href="#business-department">Department of Business Administration</a></li>
<li><a href="#physics-department">Department of Physics</a></li>
<li><a href="#Chemistry-department">Department of Chemistry</a></li>
<li><a href="#Maths-department">Department of Mathematics</a></li>
<li><a href="#statistics-department">Department of Statistics</a></li>
<li><a href="#telugu-department">Department of Telugu</a></li>
<li><a href="#commerce-department">Department of Commerce</a></li>
<li><a href="#botany-department">Department of Botany</a></li>
<li><a href="#zoology-department">Department of Zoology</a></li>
<li><a href="#fisheries-department">Department of Fisheries</a></li>
<li><a href="#electronics-department">Department of Electronics</a></li>
</ul>
</section>

<!-- Faculties Section -->


<section id="faculties">
<h2>Faculties</h2>
<p>Meet our esteemed faculty members who are leaders in their respective fields:</p>

<ol>
<li><b>Department of Computer Science</b></li>
<ul>
<li>Mr. K.V.V.Srinivas - HoD</li>
<li>Ms GSR Kalyani, Lecturer</li>
<li>Ms K. Jhansi Lakshmi, Lecturer</li>
<li>Ms G. Sarala, Lecturer</li>
<li>Ms K.Susheela, Lecturer</li>
<li>Ms M.Divya Sri, Lecturer</li>
<li>Mr V. Rambabu, Lecturer</li>
</ul>
<li><b>Department of Electronics</b></li>
<ul>
<li>Ms. Y. Sridevi - HoD</li>
<li>Ms K. Jyotsna, Lecturer</li>
</ul>
</section>

<!-- Library Section -->


2
<section id="library">
<h2>Library</h2>
<p>Our college library is a hub of knowledge, providing resources for students and
faculty alike:</p>
<ul>
<li>Over 50,000 books in various disciplines</li>
<li>Access to online journals and databases</li>
<li>Study rooms and research assistance</li>
<li>Digital library with e-books and audiobooks</li>
</ul>
</section>
</main>

<footer>
<p>&copy; 2024 Sir C R Reddy College for Women, Eluru. All rights reserved.</p>
</footer>
</body>
</html>

3
4
Program 2
Create your class timetable using table tag.

<!DOCTYPE html>
<html>
<head>
<title>Class Timetable</title>

</head>
<body>
<h1>Class Time Table</h1>
<table border="1">
<thead>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 - 10:00 AM</td>
<td>Math</td>
<td>Science</td>
<td>English</td>
<td>History</td>
<td>Art</td>
<td>games</td>
</tr>
<tr>
<td>10:00 - 11:00 AM</td>
<td>English</td>
<td>Math</td>
<td>Science</td>
<td>Geography</td>
<td>PE</td>
<td>arts</td>
</tr>
<tr>
<td>11:00 - 12:00 PM</td>
<td>History</td>
<td>Art</td>
<td>Math</td>
<td>English</td>
5
<td>Science</td>
<td>arts</td>
</tr>
<tr>
<td>12:00 - 1:00 PM</td>
<td colspan="6" align="center">Lunch Break</td>

</tr>
<tr>
<td>1:00 - 2:00 PM</td>
<td>Science</td>
<td>History</td>
<td>Art</td>
<td>Math</td>
<td>English</td>
<td>games</td>
</tr>
<tr>
<td>2:00 - 3:00 PM</td>
<td>Geography</td>
<td>PE</td>
<td>Science</td>
<td>Art</td>
<td>History</td>
<td>games</td>
</tr>
</tbody>
</table>
</body>
</html>

6
7
Program 3
Create a feedback form for your curriculum. Use textbox, text area, checkbox, radio Button etc

<!DOCTYPE html>
<html lang="en">
<head>
<title>Curriculum Feedback Form</title>
<style>
label { font-weight: bold; }
input { font-weight: normal; }
</style>
</head>
<body>

<h1>Curriculum Feedback Form</h1>


<form action="/submit-feedback" method="post">
<b>Name:</b>
<input type="text" id="name" name="name" placeholder="Enter your name">

<BR><BR>

<b>Email Address:</b>
<input type="email" id="email" name="email" placeholder="Enter your email">

<BR><BR>

<b>Course Title:</b>
<input type="text" id="course" name="course" placeholder="Enter the course title">

<BR><BR>

<b>How would you rate the overall content of the curriculum?</b><BR>


<input type="radio" name="content_rating" value="excellent"> Excellent
<input type="radio" name="content_rating" value="good"> Good
<input type="radio" name="content_rating" value="average"> Average
<input type="radio" name="content_rating" value="poor"> Poor

<BR><BR>

<b>Which sections of the curriculum did you find most useful? (Select all that
apply)</b><BR>
<input type="checkbox" name="useful_sections" value="introduction"> Introduction
<input type="checkbox" name="useful_sections" value="theory"> Theory
<input type="checkbox" name="useful_sections" value="practical"> Practical
Exercises
<input type="checkbox" name="useful_sections" value="assignments"> Assignments
<input type="checkbox" name="useful_sections" value="conclusion"> Conclusion

8
<BR><BR>

<b>What improvements would you suggest for the curriculum?</b><BR>


<textarea id="improvements" name="improvements" rows="4" placeholder="Enter
your suggestions"></textarea>

<BR><BR>

<b>Additional Comments:</b><BR>
<textarea id="comments" name="comments" rows="4" placeholder="Enter any
additional comments"></textarea>

<BR><BR>

<b>How satisfied are you with the instructor's teaching style?</b><BR>


<input type="radio" name="instructor_rating" value="very_satisfied"> Very Satisfied
<input type="radio" name="instructor_rating" value="satisfied"> Satisfied
<input type="radio" name="instructor_rating" value="neutral"> Neutral
<input type="radio" name="instructor_rating" value="dissatisfied"> Dissatisfied
<input type="radio" name="instructor_rating" value="very_dissatisfied"> Very
Dissatisfied

<BR><BR>

<b>Overall Satisfaction:</b><BR>
<input type="radio" name="overall_satisfaction" value="very_satisfied"> Very
Satisfied
<input type="radio" name="overall_satisfaction" value="satisfied"> Satisfied
<input type="radio" name="overall_satisfaction" value="neutral"> Neutral
<input type="radio" name="overall_satisfaction" value="dissatisfied"> Dissatisfied
<input type="radio" name="overall_satisfaction" value="very_dissatisfied"> Very
Dissatisfied

<BR><BR>

<input type="submit" value="Submit">

</form>

</body>
</html>

9
10
Program 4
Create a web page using frame. Divide the page into two parts with Navigation links on
lefthand side of page (width=20%) and content page on right hand side of page (width = 80%).
On clicking the navigation Links corresponding content must be shown on the right hand side.

File Name : p4.html

<!DOCTYPE html>
<html>

<frameset cols="20%, 80%">


<frame src="p4_nav.html" name="navigation">
<frame src="p4_dhtml.html" name="content">
</frameset>

</html>

File Name : p4_nav.html

<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
</head>
<body>
<h3>Menu</h3>
<ul>
<li><a href="p4_dhtml.html" target="content">Home</a></li> <br>
<li><a href="p4_html.html" target="content">HTML</a></li>
<br>
<li><a href="p4_css.html" target="content">CSS</a></li> <br>
<li><a href="p4_javascript.html" target="content">JavaScript</a></li><br>
<li><a href="p4_dom.html" target="content">DOM</a></li>
<br>
</ul>
</body>
</html>

File Name : p4_dhtml.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>About DHTML</title>
<style>
p{ text-align:justify;
11
font-size: 20px;
}
</style>
</head>
<body>

<h1>DHTML</h1>
<p>Dynamic HTML (DHTML) is an umbrella term used to describe a collection of
technologies
used together to create interactive and animated websites.
DHTML is not a specific technology by itself, but rather a combination of the
following:</p>
<UL>
<li>HTML (Hypertext Markup Language)</li>
<li>CSS (Cascading Style Sheets)</li>
<li>JavaScript</li>
<li>DOM (Document Object Model)</li>
</UL>
<p>DHTML allows you to create interactive elements on a webpage, such as drop-down
menus, form validation, drag-and-drop features, etc.</p>

<p>DHTML can be used to create animations, such as moving images, text that changes color,
or objects that move around the screen.</p>

<p>It enables parts of the webpage to be updated in real-time without requiring a full page
reload (e.g., dynamic forms that update based on user input).</p>

<p>DHTML can respond to user events like clicks, mouse movements, key presses, etc., to
make the webpage more responsive and interactive.</p>
</body>
</html>

File Name : p4_html.html

<!DOCTYPE html>
<html>
<head>
<title>About HTML</title>
<style>
p{ text-align:justify;
font-size: 20px;
}
</style>
</head>
<body>
<h3>About HTML</h3>

12
<p>HTML (HyperText Markup Language) is the standard markup language for creating web
pages. It defines the structure and content of a webpage, using tags to specify elements like
headings, paragraphs, lists, links, images, and more. </p>
<p> It provides the basic framework for web pages by defining elements like headings,
paragraphs, links, images, and forms. HTML uses tags, which are enclosed in angle brackets,
to mark up content. These tags are usually paired (e.g., &lt h1&gt and &lt/h1&lt) to signify the
beginning and end of an element. HTML is the foundation upon which other web technologies,
such as CSS (for styling) and JavaScript (for interactivity), are built.
</p>
</body>
</html>

File Name : p4_css.html

<!DOCTYPE html>
<html>
<head>
<title>About CSS</title>
<style>
p{ text-align:justify;
font-size: 20px;
}
</style>
</head>
<body>
<h3>About CSS</h3>
<p> CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation
and layout of web pages. It allows developers to apply styles to HTML elements, such
as colors, fonts, spacing, and positioning, creating visually appealing and consistent designs
across multiple web pages. CSS separates content (HTML) from design, making it easier to
maintain and update the look and feel of a website. </p>

<p>CSS works by applying rules, which consist of selectors (targeting HTML elements) and
declarations (defining the style). Declarations are made up of properties (like color or font-
size) and their associated values (like red or 16px). CSS can be included directly in HTML
files, embedded within the <style> tag, or linked as an external stylesheet. </p>
</body>
</html>

File Name : p4_javascript.html

<!DOCTYPE html>
<html>
<head>
<title>About JavaScript</title>
<style>
p{ text-align:justify;
13
font-size: 20px;
}
</style>
</head>
<body>
<h3>About JavaScript</h3>
<p> JavaScript is a versatile, high-level programming language primarily used for adding
interactivity and dynamic features to web pages. It enables developers to create
responsive user interfaces, handle events, manipulate HTML and CSS, and perform complex
operations on the client side. JavaScript is essential for tasks like form validation, animations,
and asynchronous data fetching via AJAX or Fetch API. </p>

<p>It is an integral part of the web development trio, alongside HTML and CSS, and can be
embedded directly into HTML documents or included via external files. JavaScript supports
a wide range of programming paradigms, including procedural, object-oriented, and functional
programming, making it a powerful tool for building modern web applications. </p>
</body>
</html>

File Name : p4_dom.html

<!DOCTYPE html>
<html>
<head>
<title>About DOM</title>
<style>
p{ text-align:justify;
font-size: 20px;
}
</style>
</head>
<body>
<h3>About DOM</h3>
<p> The DOM (Document Object Model) is a programming interface for web documents.
It represents the structure of a web page as a tree of objects, where each node
corresponds to an HTML element, attribute, or piece of text. This hierarchical
structure allows developers to interact with and manipulate the content and structure
of a web page using languages like JavaScript. </p>

<p>Through the DOM, you can access and modify elements, attributes, and text, and handle
events such as clicks and form submissions. For example, JavaScript can be used to
dynamically update the content of a webpage, change styles, or create new elements based
on user interactions. The DOM serves as a bridge between web pages and scripts, enabling
dynamic and interactive web experiences. </p>
</body>
</html>

14
15
16
17
Program 5
Design a web page of your biodata with an attractive background colour,text colour, images,
font etc.

<html>
<head>
<title>BIO DATA</title>
</head>
<body>
<center>
<table border="1" cellpadding="5" cellspacing="0" >
<caption><font color="green"><h2>BIO-DATA</h2></font></caption>
<br><br><br>
<tr>
<td><font color="darkred"><b>Name</b></font></td>
<td>K. Lakshmi Kalpana</td>
<td rowspan="3"><img src="pp5_pic.jpg" height="130" width="130"></td>
</tr>
<tr>
<td><font color="darkred"><b>Father Name</b></font></td>
<td>K. Ram Kumar Varma</td>
</tr>
<tr>
<td><font color="darkred"><b>Mother Name</b></font></td>
<td>K. Rama Devi</td>
</tr>
<tr>
<td><font color="darkred"><b>Date of Birth</b></font></td>
<td colspan="2">17-02-1985</td>
</tr>
<tr>
<td><font color="darkred"><b>Gender</b></font></td>
<td colspan="2">Female</td>
</tr>
<tr>
<td><font color="darkred"><b>Address</b></font></td>
<td colspan="2">Door no: 2-23A,<br> Near VenkateswaraSwamy Temple<br>
R. R Pet, Eluru, W.G.Dist (AP)</td>
</tr>
<tr>
<td colspan="3"><br><font color="darkred"> <b>Educational Details</b>
</font>
<center>
<table border="1" cellspacing="0">
<tr> <th>Class</th><th>School/College</th><th>%
Marks</th></tr>
<tr><td>10 th Class</td><td>Narayana School </td> <td> 87%
</td> </tr>

18
<tr><td>Inter</td><td>Chaitanya Jr. College</td><td>88%</td></tr>
<tr><td>B.Sc(Data Science)</td><td>Sir C R R College for Women</td>
<td>79%</td></tr>
</table>
</center>
</td>
</tr>
<tr>
<td colspan="3"><font color="darkred"> <b> Technical Skills</b></font><br>
<UL>
<li>Operating System : Windows, Linux</li>
<li>Languages : C, Java, Python </li>
<li>Web Technologies : HTML, CSS, JavaScript </li>
<li>Databases : Oracle, MySQL </li>
<li>Office Tools : MS Office </li>
</UL>
</td>
</tr>
</table>
</body>
</html>

19
20
PROGRAM 6
<!- - HTML Program to Create an Inline style sheet for your webpage - ->
<html>
<head>
<title>Inline Stylesheet Example</title>
</head>
<body>
<h1 style="color:red; text-align:center;font-weight : bold ; text-decoration:underline">
Inline Stylesheet Example
</h1>
<h2 style="font-family:Times New Roman; font-size:30; color:white; background-color: green; ">
HTML
</h2>
<p style="font-size:20;color:blue;;margin-left:40px">
HTML (Hyper Text Markup Language)is used to design web pages<br>
HTML elements (Tags) are the building blocks of HTML pages<br>
It displays text and/or multimedia containing sound, images, java Applets etc.<br>
Web browsers (Chrome, IE, Firefox and Safari) read HTML documents and display them. <br>
</p>

<h2 style="font-family:Times New Roman; font-size:30; color:white; background-color: green; ">


CSS
</h2>
<p style="font-size:20;color:blue;;margin-left:40px">
CSS stands for Cascading Style Sheets<br>
CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.
</p>
</body>
</html>
PROGRAM 7

<<!- -HTML Program to Create an Internal style sheet for your webpage-->
<html>
<head>
<title>Internal Stylesheet Example</title>
<style type="text/css">
h1{
color:red;
text-align:center;
font-weight : bold ;
text-decoration:underline;
}
h2{
font-family:Times New Roman;
font-size:30;
color:white;
background-color:green;
}
p{
font-size:20;
color:blue;
margin-left:40px;
}
</style>
</head>
<body>
<h1>Internal Stylesheet Example </h1>
<h2>HTML</h2>
<p>
HTML (Hyper Text Markup Language)is used to design web pages<br>
HTML elements (Tags) are the building blocks of HTML pages<br>
It displays text and/or multimedia containing sound, images, java Applets etc.<br>
Web browsers (Chrome, IE, Firefox and Safari) read HTML documents and display them. <br>
</p>

<h2>CSS</h2>
<p>
CSS stands for Cascading Style Sheets<br>
CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.
</p>
</body>
</html>
PROGRAM 8

<!- - HTML Program to Create an External style sheet for your webpage - ->

File Name : mystyle.css

<!—mystyle.css - ->
h1{
color:red;
text-align:center;
font-weight : bold ;
text-decoration:underline;
}
h2{
font-family:Times New Roman;
font-size:30;
color:white;
background-color:green;
}
p{
font-size:20;
color:blue;
margin-left:40px;
}
File Name : external.html

<html>
<head>
<title> External Stylesheet Example</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1 style="color:red; text-align:center;font-weight : bold ; text-decoration:underline">
External Stylesheet Example
</h1>
<h2>
HTML
</h2>
<p>
HTML (Hyper Text Markup Language)is used to design web pages<br>
HTML elements (Tags) are the building blocks of HTML pages<br>
It displays text and/or multimedia containing sound, images, java Applets etc.<br>
Web browsers (Chrome, IE, Firefox and Safari) read HTML documents and display them. <br>
</p>

<h2>
CSS
</h2>
<p>
CSS stands for Cascading Style Sheets<br>
CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.
</p>
</body>
</html>
PROGRAM 9

<!-- HTML Program to demonstrate formating blocks of information using Classes & DIV tag -->
<html>
<head>
<title>Formating blocks of information</title>
<style type="text/css">
.style1 {
font-family:"Times New Roman";
font-size:20px;
background:lightyellow;
color:red;
}

h3.style3 {
text-decoration:underline;
text-align:center;
}
.style4{
font-family:"arial,verdana,sans-serif";
font-size:14px;
color:blue;
}
</style>
</head>
<body>
<h3 class="style3"> An example of formating blocks of information using Classes & DIV tag </h3>
<h1>Web Programming</h1>
<h2 class="style1">HTML</h1>
<h4 class="style4">HTML is a markup language for describing web documents (web pages).</h4>
<p class="style4">HTML stands for Hyper Text Markup Language.HTML documents are described by
HTML tags</p>
<h2 class="style1">CSS</h2>
<div class="style4">
<p>CSS stands for Cascading Style Sheets</p>
<p>CSS is used to define styles for your web pages, including the design, layout and variations
in display for different devices and screen sizes.
</p>
</div>
</body>
</html>
Program 10
<!-- JavaScript program to print Factorial of a given number -->
<html>
<body>
<script language="JavaScript">
function factorial(num)
{
if (num< 0)
{
return -1;
}
else if (num == 0)
{
return 1;
}
else
{
return (num * factorial(num - 1));
}
}
var n=parseInt(prompt("Enter N value",""));
var result = factorial(6);
document.writeln("<b>Factorial of a Number</b><br><br>");
document.write(" Factorial of " + n + " = " + result);
</script>
</body>
</html>
OUTPUT
Program 11
<!-- JavaScript program to create a Simple calculator -->

<!DOCTYPE html>
<head>

<title>Simple Calculator</title>
<style>

body {
text-align: center;
margin-top: 50px;
}
input {
padding: 10px;
margin: 10px;
}
button {
padding: 10px 20px;
margin: 10px;
}
</style>
</head>
<body>

<h1>Simple Calculator</h1>

<input type="text" id="num1" placeholder="Enter first number">


<input type="text" id="num2" placeholder="Enter second number"><br>

<button onclick="add()">Add</button>
<button onclick="subtract()">Subtract</button>
<button onclick="multiply()">Multiply</button>
<button onclick="divide()">Divide</button>

<h2>Result: <span id="result"></span></h2>

<script>
var num1,num2;
function get_values()
{
num1 = parseFloat(document.getElementById("num1").value);
num2 = parseFloat(document.getElementById("num2").value);
}
function add()
{
get_values();
var result = num1 + num2;
document.getElementById("result").textContent = result;
}

function subtract()
{
get_values()
var result = num1 - num2;
document.getElementById("result").textContent = result;
}

function multiply()
{
get_values();
var result = num1 * num2;
document.getElementById("result").textContent = result;
}

function divide()
{
get_values();
if (num2 !== 0)
{
var result = num1 / num2;
document.getElementById("result").textContent = result;
}
else
{
document.getElementById("result").textContent = "Cannot divide by zero!";
}
}
</script>
</body>
</html>
OUTPUT
Program 12
<! -- JavaScript Program to find sum of n even numbers and display the result -->
<html>
<head>
<title>sum of n even numbers</title>
</head>
<body>
<script language="JavaScript">

function sum(num)
{
if (num <= 0)
{
return 0;
}
else
{
var i=1,s=0;
document.write("First " + num + " Even numbers<br>")
while(i<=num)
{
s=s+(2*i);
document.write((2*i) + "<br>"); i=i+1;
}
return s;
}
}
var n=parseInt(prompt("Enter N value",""));
var result = sum(n);
document.write(" Sum of " + n + " even numbers = " + result);
</script>
</body>
</html>
OUTPUT
Program 13
<!-- JavaScript program to print n Fibonacci numbers -->
<html>
<head>
<title>Fibonacci Series </title>
</head>
<body>
<script language="JavaScript">

function Fibonacci(n)
{
if ( n == 0 )
return 0;
else if ( n == 1 )
return 1;
else
return ( Fibonacci(n-1) + Fibonacci(n-2) );
}

var n=parseInt(prompt("Enter N value",""));


document.writeln("<b>Fibonacci Numbers</b><br>");
for ( c = 1 ; c <= n ; c++ )
{
document.writeln(Fibonacci(c) + "<br>");
}
</script>
</body>
</html>
OUTPUT
Program 14
<!-- JavaScript program to s check whether given number is prime or not -->
<html>
<head>
<title>Prime number or not </title>
</head>
<body>
<script language="JavaScript">
function isPrime(number)
{
if (number <= 1)
{
return false;
}
for (let i = 2; i <= Math.sqrt(number); i++)
{
if (number % i === 0)
{
return false;
}
}
return true;
}
var num=parseInt(prompt("Enter N value",""));
if (isPrime(num))
document.writeln("<br><b>" + num + " is a Prime Number </b>" );
else
document.writeln("<br><b>" + num + " is not a Prime Number </b>" );
</script>
</body>
</html>
OUTPUT
Program 15
<!-- Create a login form with email id and password. Perform input validation using
JavaScript -->

<!DOCTYPE html>
<html>
<head>
<title>Login Form with Validation</title>
</head>
<body>

<h2>Login Form</h2>

<form id="loginForm">
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>

<button type="button" onclick="validateForm()">Login</button>


</form>

<div id="error" style="color:red;"></div>

<script>
function validateForm()
{
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const errorDiv = document.getElementById("error");

errorDiv.innerHTML = "";

if (email === "")


{
errorDiv.innerHTML = "Email cannot be empty!";
return;
}

if (email.indexOf('@') === -1 || email.indexOf('.') === -1 )


{
errorDiv.innerHTML = "Please enter a valid email!";
return;
}
if (password === "")
{
errorDiv.innerHTML = "Password cannot be empty!";
return;
}

if (password.length < 8)
{
errorDiv.innerHTML = "Password must be at least 8 characters long!";
return;
}

alert("Login successful!");
}
</script>
</body>
</html>
OUTPUT
Program 16
<!—Create a form to input college admission details and display the same data using
Javascript -->

<!DOCTYPE html>
<html>
<head>
<title>College Admission Form</title>
</head>
<body>

<h2>College Admission Form</h2>


<form id="admissionForm">
<label for="name">Name:</label><BR>
<input type="text" id="name" required><BR><BR>

<label for="age">Age:</label><BR>
<input type="number" id="age" required><BR><BR>

<label for="course">Course:</label><BR>
<select id="course" required>
<option value="B.Sc (Computer Science)">B.Sc (Computer Science)</option>
<option value="B.Sc (Data Science)">B.Sc (Data Science)</option>
<option value="B.Com (Computer Applications)">B.Com (Computer
Applications)</option>
</select><BR><BR>

<label for="email">Email:</label><BR>
<input type="email" id="email" required> <BR><BR>
<button type="button" onclick="displayDetails()">Submit</button>
<button type="reset" >Clear</button>
</form>

<div class="output" id="output"></div>

<script>
function displayDetails()
{
var name = document.getElementById('name').value;
var age = document.getElementById('age').value;
var course = document.getElementById('course').value;
var email = document.getElementById('email').value;
var output = "<h3>Admission Details</h3>" +
"<p><strong>Name:</strong>"+ name + "</p>" +
"<p><strong>Age:</strong>" + age + "</p>" +
"<p><strong>Course:</strong>" + course +" </p>"+
"<p><strong>Email:</strong> " + email + "</p>";
document.getElementById('output').innerHTML = output;
}
</script>
</body>
</html>
OUTPUT
Program 17
<! - - Create a xml document to store book information in a library with internal DTD - ->

<?xml version="1.0" encoding="UTF-8"?>


<!DOCTYPE library [
<!ELEMENT library (book+)>
<!ELEMENT book (bname, publisher, author, year, cost)>
<!ATTLIST book book_id ID #REQUIRED>
<!ATTLIST book category CDATA #REQUIRED>
<!ELEMENT bname (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT cost (#PCDATA)>
]>

<library>
<book book_id="C001" category="Computer">
<bname>Introduction to Algorithms</bname>
<publisher>MIT Press</publisher>
<author>Thomas H. Cormen</author>
<year>2009</year>
<cost>450.00</cost>
</book>
<book book_id="C002" category="Computer">
<bname>Clean Code</bname>
<publisher>Prentice Hall</publisher>
<author>Robert C. Martin</author>
<year>2008</year>
<cost>355.00</cost>
</book>
<book book_id="E001" category="English">
<bname>Pride and Prejudice</bname>
<publisher>T. Egerton</publisher>
<author>Jane Austen</author>
<year>1813</year>
<cost>150.00</cost>
</book>
<book book_id="E002" category="English">
<bname>Hamlet</bname>
<publisher>Simon & Schuster</publisher>
<author>William Shakespeare</author>
<year>1603</year>
<cost>12.99</cost>
</book>
<book book_id="P001" category="Physics">
<bname>The Feynman Lectures on Physics</bname>
<publisher>Addison-Wesley</publisher>
<author>Richard P. Feynman</author>
<year>1964</year>
<cost>600.00</cost>
</book>
<book book_id="P002" category="Physics">
<bname>Concepts of Physics</bname>
<publisher>Bharti Bhawan</publisher>
<author>H. C. Verma</author>
<year>1992</year>
<cost>250.00</cost>
</book>
</library>
OUTPUT

You might also like