Scribd
Upload
112 views85 pages

HTML Experiments for Beginners

The document contains source code from 10 HTML experiments conducted by a student. The experiments cover basic HTML tags like headings, paragraphs, lists, links, images, tables and more. Each experiment has the aim, source code and output displayed. The code demonstrates the student's learning and practice of key HTML elements.

Uploaded by

Laksh Nanda
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
112 views85 pages

HTML Experiments for Beginners

The document contains source code from 10 HTML experiments conducted by a student. The experiments cover basic HTML tags like headings, paragraphs, lists, links, images, tables and more. Each experiment has the aim, source code and output displayed. The code demonstrates the student's learning and practice of key HTML elements.

Uploaded by

Laksh Nanda
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
You are on page 1/ 85

Name-Laksh Nanda

Roll No.-1710991423

Experiment No.-1

Aim- Write HTML Code to display the following and also display the title using heading tag.

Source Code-

<html>
<head>
<title>
CPU
</title>
</head>
<body>
<H1>
<b>
CPU
</b>
</H1>
<pre>
<u><b>CPU</b> stands for Central Processing Unit.</u>
It is the portion of a <u>computer</u> system that carries
out the instructions of a <u>computer</u> program.
It carries out each instruction of the program in sequence,
to perform the basic arithmetic, logical, and input/output operations of the system.
</pre>
</body>
</html>

CSE F2 1
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 2
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-2

Aim- Write HTML code for below diagram by using horizontal line, heading tag, colors to suitably
distinguish headings, font styling like italics and underline.

Source Code-

<html>
<head>
<title>
HEADINGS
</title>
</head>
<body bgcolor="aqua">
<h>
<u>Demostration</u> of <i>Heading</i> tag with <b>diffrent</b> colors:
</h>
<H1 style="color:red">
Bachelor of Engineering
</H1>
<H2 style="color:magenta">
Bachelor of Engineering
</H2>

CSE F2 3
Name-Laksh Nanda
Roll No.-1710991423

<H3 style="color:yellow">
Bachelor of Engineering
</H3>
<H4 style="color:green">
Bachelors in Engineering
</H4>
<H5 style="color:blue">
Bachelor of Engineering
</H5>
<H6 style="color:black">
Bachelor of Engineering
</H6>
<H5 style="color:blue">
Bachelor of Engineering
</H5>
<H4 style="color:green">
Bachelors in Engineering
</H4>
<H3 style="color:yellow">
Bachelor of Engineering
</H3>
<H2 style="color:magenta">
Bachelor of Engineering
</H2>
<H1 style="color:red">
Bachelor of Engineering
</H1>
</body>
</html>

CSE F2 4
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 5
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-3

Aim- Demonstrate the usage of formatting, marquee and blink tag to print below output.
Various formulas (Marquee)
H2O

H2SO4

Text
2
X

X2 + Y2=Z

Y = mx + c

.
Source Code-

<html>
<head>
<title>
tags
</title>
</head>
<body>
<marquee>
<h2>Various formulas<h2>
</marquee>
H<sub>2</sub>O<br>
H<sub>2</sub>SO<sub>2</sub><br>
<del>Text</del><br>
x<sup>2</sup><br>
X<sup>2</sup>+Y<sup>2</sup>=Z<br>
Y=mx+c
</body>
</html>

CSE F2 6
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 7
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-4

Aim- Write HTML code to display following list


1. Linux
2. Unix
3. HTML
4. DHTML
5. JavaScript
6. Perl
7. PHP
8. SQL
9. Oracle
10. CCNA
.
Source Code-

<html>
<head>
<title>
list
</title>
</head>
<body>
<ol style="list-style-
type:decimal">
<li> Linux
<li> Unix
<li> HTML
<li> DHTML
<li> javascript
<li> perl
<li> PHP
<li> SQL
<li> Oracle
<li> CCNA
</ol>

CSE F2 8
Name-Laksh Nanda
Roll No.-1710991423

</body>
</html>

Output-

CSE F2 9
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-5

Aim- Write HTML code to display following List

Bachelor of Engineering

 CSE
o Software Engineering
o Data Structures
o Theory of Computation
 ME
o Strength of Material
o Mobility

 ECE
o VLSI design
o Wireless communication

.
Source Code-

<html>
<head>
<title>
olullist</title></head>
<body bgcolor="lightgreen">
<H1>Bachelor of Engineering</H1>
<ul type="filled-circle">
<li> CSE
<ul type="circle">
<li> Software Engineering
<li> Data Structures
<li> Theory of Computation</ul>
<li> ME
<ul type="circle">
<li> Strength of material
<li> Mobility</ul>
<li> ECE
<ul type="circle">
<li> VLSI design
<li> Wireless communication</ul></ul></body></html>

CSE F2 10
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 11
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-6

Aim- Write the HTML code to add a link on the text “Click here” and image of “Chitkara university logo”,
when you click on these link then open www.chitkara.edu.in.
.
Source Code-

<html>
<head>
<title>
link
</title>
</head>
<body>
<H2>
<a href="http://punjab.chitkara.edu.in//Interface/index.php">
"Click here"
</a>
</H2>
<a href="http://punjab.chitkara.edu.in//Interface/index.php">
<img src="D:\DESKTOP\chitkara.png"
alt="Image not available"
width="500px"
height="450px">
</a>
</body>
</html>

CSE F2 12
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 13
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-7

Aim- Create a document with two links to an external document. The first link should lead
to the beginning of the external document. The second link should lead to a particular
section in the external document.

Source Code-

<html>
<head>
<title>
links
</title>
</head>
<body>
<h1>
<a href="start.html"
target="_blank">
From starting:-
</a><br><br>
<a
href="start.html#healthcare"
target="_blank">
From middle:-
</a>
</h1>
</body>
</html>

CSE F2 14
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 15
Name-Laksh Nanda
Roll No.-1710991423

CSE F2 16
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-8

Aim- Create an image-map, with clickable regions. Use image of India and create link for
any 5 states.

Source Code-

<html>
<head>
<title>
imgmap</title></head>
<body>
<img src="C:\Users\Karans\Desktop\New folder\detailed-map-india-9297115.jpg"
alt image not available
width="700px"
height="700px"
usemap="#map">
<map name="map">
<area shape="circle"
coords="250,190,30"
alt="Chandigarh"
href="https://en.wikipedia.org/wiki/Chandigarh"
target="_blank">
<area shape="circle"
coords="150,330,60"
alt="Gujarat"
href="https://en.wikipedia.org/wiki/Gujarat"
target="_blank">
<area shape="circle"
coords="220,570,60"
alt="Kerala"
href="https://en.wikipedia.org/wiki/Kerala"
target="_blank">
<area shape="circle"
coords="400,390,60"
alt="Orissa"
href="https://en.wikipedia.org/wiki/Orissa"
target="_blank">
<area shape="circle"
coords="560,260,60"
alt="Assam"
href="https://en.wikipedia.org/wiki/Assam"

CSE F2 17
Name-Laksh Nanda
Roll No.-1710991423

target="_blank">
</map></body></html>

CSE F2 18
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-9

CSE F2 19
Name-Laksh Nanda
Roll No.-1710991423

Aim- Write HTML code for the following table :

S.No. Particulars No. of Items Price


1. Hard Disks 2 4000.00
2. Monitors 3 15000.00
3. CD ROM 2 1000.00
4. DVD Writer 4 6000.00

Source Code-

<html>
<head>
<title>
table
</title>
</head>
<body>
<table border="1"
width="1000px"
cellpadding="10px"
cellspacing="0px"
align="center">
<tr>
<th>S.No.</th>
<th>Particulars</th>
<th>No. of items</th>
<th>Price</th>
</tr>
<tr>
<td>1.</td>
<td>Hard Disks</td>
<td>2</td>
<td>4000.00</td>
</tr>
<tr>
<td>2.</td>
<td>Monitors</td>

CSE F2 20
Name-Laksh Nanda
Roll No.-1710991423

<td>3</td>
<td>15000.00</td>
</tr>
<tr>
<td>3.</td>
<td>CD ROM</td>
<td>2</td>
<td>1000.00</td>
</tr>
<tr>
<td>4.</td>
<td>DVD Writer</td>
<td>4</td>
<td>6000.00</td>
</tr>
</table>
</body>
</html>

Output-

CSE F2 21
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-10

Aim- Create a table to show your class time-table.


.
Source Code-

<html>
<head>
<title>
table
</title>
</head>
<body>
<h1 align="center">
CSE-3F
</h1>
<table border="1"
width="1300px"
cellpadding="10 px"
cellspacing="0px"
align="center">
<pre>
Chitkara University, Jhansla, Distt. Patiala-140401, Punjab
TG-203
<pre>
<tr>
<th></th>
<th><H1>1</H1>
<small>
9:00-9:55
</small>
</th>
<th><H1>2</H1>
<small>
9:55-10:50
</small></th>
<th><h1>3</h1>
<small>
10:50-11:45
</small></th>
<th><h1>4</h1>
<small>
11:45-12:40
</small></th>
<th><h1>5</h1>
<small>

CSE F2 22
Name-Laksh Nanda
Roll No.-1710991423

12:40-1:35
</small></th>
<th><h1>6</h1>
<small>
1:35-2:30
</small></th>
<th><h1>7</h1>
<small>
2:30-3:25
</small></th>
<th><h1>8</h1>
<small>
3:25-4:20
</small>
</th>
</tr>

<tr>
<td rowspan="2"
align="center">
<h style="font-size:300%">Mo<h></td>
<td colspan="2"
align="center"
bgcolor="red">
<h style="font-size:200%;
text-align:center">
CST-Lab
</h>
</td>
<td rowspan="2"
align="center"
bgcolor="green1">
<h style="font-size:200%;">
DELD
</h>
</td>
<td rowspan="2"></td>
<td colspan="2"
align="center"
bgcolor="purple">
<h style="font-size:200%;">
PSTC
</h>
</td>
<td rowspan="2"
align="center"
bgcolor="lightblue">
<h style="font-size:200%;">

CSE F2 23
Name-Laksh Nanda
Roll No.-1710991423

CN
</h>
</td>
<td rowspan="2"
align="center"
bgcolor="red">
<h style="font-size:200%;">
CST
</h>
</td>
</tr>
<tr>
<td colspan="2"
align="center"
bgcolor="purple">
<h style="font-size:200%;">
PSTC-Lab
</h>
</td>
<td colspan="2"
align="center"
bgcolor="lightblue">
<h style="font-size:200%;">
CN-Lab
</h>
</td>
</tr>

<tr>
<td rowspan="2"
align="center">
<h style="font-size:300%">Tu<h></td>
<td colspan="2"
align="center"
bgcolor="red">
<h style="font-size:200%;">
CST-Lab
</h>
</td>
<td rowspan="2"
align="center"
bgcolor="green1">
<h style="font-size:200%;">
DELD
</h>
</td>
<td rowspan="2"></td>
<td colspan="2"

CSE F2 24
Name-Laksh Nanda
Roll No.-1710991423

align="center"
bgcolor="purple">
<h style="font-size:200%;">
PSTC
</h>
</td>
<td rowspan="2"
align="center"
bgcolor="red">
<h style="font-size:200%;">
CST
</h>
</td>
<td rowspan="2"
align="center"
bgcolor="lightblue">
<h style="font-size:200%;">
CN
</h>
</td>
</tr>
<tr>
<td colspan="2"
align="center"
bgcolor="purple">
<h style="font-size:200%;">
PSTC-Lab
</h>
</td>
<td colspan="2"
align="center"
bgcolor="lightblue">
<h style="font-size:200%;">
CN-Lab
</h>
</td>
</tr>

<tr>
<td rowspan="2"
align="center">
<h style="font-size:300%">We<h></td>
<td rowspan="2"
align="center"
bgcolor="red">
<h style="font-size:200%;">
CST
</h>

CSE F2 25
Name-Laksh Nanda
Roll No.-1710991423

</td>
<td rowspan="2"
align="center"
bgcolor="green1">
<h style="font-size:200%;">
DELD
</h>
</td>
<td colspan="2"
align="center"
bgcolor="purple">
<h style="font-size:200%;">
PSTC-Lab
</h>
</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="2"
align="center"
bgcolor="lightblue">
<h style="font-size:200%;">
CN-Lab
</h>
</tr>
<tr>
<td colspan="2"
align="center"
bgcolor="red">
<h style="font-size:200%;">
CST-Lab
</h>
</td>
<td colspan="2"
align="center"
bgcolor="purple">
<h style="font-size:200%;">
PSTC-Lab
</h>
</td>
</tr>

<tr>
<td rowspan="2"
align="center">
<h style="font-size:300%">Th<h></td>
<td colspan="2"
align="center"
bgcolor="lightblue">

CSE F2 26
Name-Laksh Nanda
Roll No.-1710991423

<h style="font-size:200%;">
CN-Lab
</h>
</td>
<td colspan="2"
align="center"
bgcolor="red">
<h style="font-size:200%;">
CST-Lab
</h>
</td>
<td rowspan="2"><td>
<td colspan="2"
align="center"
bgcolor="purple">
<h style="font-size:200%;">
PSTC-Lab
</h>
</tr>
<tr>
<td colspan="2"
align="center"
bgcolor="purple">
<h style="font-size:200%;">
PSTC-Lab
</h>
</td>
<td colspan="2"
align="center"
bgcolor="green1">
<h style="font-size:200%;">
DELD-Lab
</h>
</td>
<td align="center"
bgcolor="green1">
<h style="font-size:200%;">
DELD-T
</h>
</td>
<td colspan="2"
align="center"
bgcolor="red">
<h style="font-size:200%;">
CST-Lab
</h>
</td>
</tr>

CSE F2 27
Name-Laksh Nanda
Roll No.-1710991423

<tr>
<td rowspan="2"
align="center">
<h style="font-size:300%;">Fr<h></td>
<td rowspan="2"
align="center"
bgcolor="lightblue">
<h style="font-size:200%;">
CN
</h>
</td>
<td align="center"
bgcolor="green1">
<h style="font-size:200%;">
DELD-T
</h>
</td>
<td colspan="2"
align="center"
bgcolor="green1">
<h style="font-size:200%;">
DELD-Lab
</h>
</td>
<td rowspan="2"></td>
<td rowspan="2"
align="center"
bgcolor="red">
<h style="font-size:200%;">
CST
</h>
</td>
<td colspan="2"
align="center"
bgcolor="purple">
<h style="font-size:200%;">
PSTC-Lab
</h>
</td>
</tr>
<tr>
<td></td>
<td colspan="2"
align="center"
bgcolor="purple">
<h style="font-size:200%;">
PSTC-Lab

CSE F2 28
Name-Laksh Nanda
Roll No.-1710991423

</h>
</td>
<td colspan="2"
align="center"
bgcolor="red">
<h style="font-size:200%;">
CST-Lab
</h>
</td>
</tr>
</table>
</body>
</html>

Output-

CSE F2 29
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-11

Aim- Write HTML code the following form:

.
Source Code-

<html>
<head>
<title>

CSE F2 30
Name-Laksh Nanda
Roll No.-1710991423

form
</title>
</head>
<body>
<form action="cse.html"
method="get">
First name:<input type="text"
name="hello">
<br><br>
Last name:<input type="text"
name="pass">
<br><br>
<input type="radio"
name="Gender"
value="male">
Male<br>
<input type="radio"
name="Gender"
value="female">
Female
<br><br>I have a bike:<input
type="checkbox"
name="bike">
<br>I have a car:<input type="checkbox"
name="car">
<br>I have a airplane:<input
type="checkbox"
name="air">
<br><br>
Username<input type="text"
name="y">
<input type="submit"
value="Submit">
</form>
</body >
</html>

CSE F2 31
Name-Laksh Nanda
Roll No.-1710991423

CSE F2 32
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 33
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-12

Aim- Write HTML code for the following frames:

.
Source Code-
<html>
<frameset rows="50%,50%">
<frame name="HTMLFRAMES1" src="a.html" scrolling="auto">
<frameset cols="20%,20%,80%">
<frame name="HTMLFRAMES2" src="b.html" scrolling="auto">
<frame name="HTMLFRAMES3" src="c.html" scrolling="auto">
<frameset rows="50%,40%">
<frame name="HTMLFRAMES4" src="d.html" scrolling="auto">
<frame name="HTMLFRAMES5" src="e.html" scrolling="auto">
</frameset>
</frameset>
</frameset>
</html>

Output-

CSE F2 34
Name-Laksh Nanda
Roll No.-1710991423

CSE F2 35
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-16

Aim- Write a code to display a message after some delay specified by user using
JavaScript.

.
Source Code-

<html>
<head>
<title>
User Delay
</title>
</head>
<body onload=fun()>
<script>
function fun()

CSE F2 36
Name-Laksh Nanda
Roll No.-1710991423

{
var x=prompt("Enter
the value of delay in
seconds:-");
setTimeout(fun1,x*1000);
}
function fun1()
{
alert("Welcome!!!!");
}
</script>
</body>
</html>

Output-

CSE F2 37
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-17

Aim- (i) WAP to print series from 10 to 1 using JavaScript.

CSE F2 38
Name-Laksh Nanda
Roll No.-1710991423

Source Code-

<html>
<head>
<title>
Series from 10-1
</title>
</head>
<body onload=fun()>
<script>
function fun()
{
var i;
for(i=10;i>0;i--)
{
document.write(i+"<br>");
}
}
</script>
</body>
</html>

Output-

CSE F2 39
Name-Laksh Nanda
Roll No.-1710991423

ii) Write a program to demonstrate the working of alert box, confirm box and prompt
box.

Source Code-

<html>
<head>
<title>
alert
</title>
</head>
<body onload=hi()>
<script lang="javascript">
function hi()
{
alert("Welcome!!!!");
var x=prompt("What's your favorite color:-");
document.body.style.backgroundColor=x;
confirm("You have a really nice choice :)");
}

CSE F2 40
Name-Laksh Nanda
Roll No.-1710991423

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

Output-

CSE F2 41
Name-Laksh Nanda
Roll No.-1710991423

CSE F2 42
Name-Laksh Nanda
Roll No.-1710991423

CSE F2 43
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-18

Aim- i) WAP to input five elements in an array and print using JavaScript.

Source Code-

<html>
<head>
<title>
Friends
</title>
</head>
<body>
<script lang="javascript">
var i;
friends=new Array(5);
for(i=0;i<5;i++)
friends[i]=prompt("Enter any 5 names of your friends:-");
for(i=0;i<5;i++)
document.write(friends[i]+"<br>");
</script>
</body>
</html>

CSE F2 44
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 45
Name-Laksh Nanda
Roll No.-1710991423

ii) Write a JavaScript program to change background color after 5 seconds of page load.

Source Code-

<html>
<head>
<title>
bgcolor
</title>
</head>
<body onload=setTimeout(display,5000)>
<script lang="javascript">
function display()
{
document.body.style.backgroundColor="red";
}
</script>
</body>
</html>

Output-

CSE F2 46
Name-Laksh Nanda
Roll No.-1710991423

CSE F2 47
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-19

Aim- i)WAP to find factorial of a number using JavaScript.

Source Code-

<html>
<head>
<title>
Factorial
</title>
</head>
<body>
<script lang="javascript">
var n=prompt("Enter any number:-"),x=1;
while(n!=0)
{
x=x*n;
n--;
}
alert("Factorial is:- "+x);
</script>
</body>
</html>

CSE F2 48
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 49
Name-Laksh Nanda
Roll No.-1710991423

ii) WAP to display all the prime numbers between 1 to 100.

Source Code-

<html>
<head>
<title>
Prime numbers
</title>
</head>
<body onload=fun()>
<script>
var i,j,count=0;
function fun()
{
document.write("1-100 prime numbers are:-"+'<br>'+'<br>')
for(i=2;i<=100;i++)
{
for(j=2;j<i;j++)
{
if(i%j==0)
{
count++;
}
}
if(count==0)
{
document.write(i+'<br>');
}
count=0;
}
}
</script>
</body>
</html>

CSE F2 50
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 51
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-20

Aim- WAP to implement Java Script – event handling like onblur, onchange, ondbclick,
onclick, onfocus, onkeydown, onkeyup, onkeypress, onload, onunload, onmouseover,
onmouseout, onmousedown, onmouseup, onmousemove, onreset, onselect, onsubmit.

Source Code-

<html>
<head>
<title>
Javascript events
</title>
</head>
<body onload=fun2() onunload=fun1()>
<input type="button" value="yellow" onclick=fun() onmouseover=fun1() onmouseout=fun2()
onblur=fun2() ondblclick=fun3() >
<br><br>
<form onreset=fun6() onsubmit=fun7()>
Select color:<select id="myselect" onchange=fun5() onfocus=fun1()>
<option value="red">Red
<option value="blue">Blue
<option value="green">Green
</select>
<br><br>
<input type="text" onkeydown=fun1() onkeyup=fun() onkeypress=fun3()
onselect=fun4()></input>
<br><br>
<input type="reset" value="Reset"></input>
<input type="submit" value="Submit"></input>
</form>
<img src="C:\Users\Karans\Desktop\abstract-anonymous-question-mark-planet-blue-wings-black-
background.jpg" width="700px" height="400px" onmousedown=fun1()
onmouseup=fun2() onmousemove=fun() onmouseout=fun2() onabort=fun4()>
<script lang="javascript">
function fun()
{
document.body.style.backgroundColor="yellow";
}
function fun1()
{
document.body.style.backgroundColor="red";
}
function fun2()
{

CSE F2 52
Name-Laksh Nanda
Roll No.-1710991423

document.body.style.backgroundColor="white";
}
function fun3()
{
document.body.style.backgroundColor="blue";
}
function fun4()
{
alert("You selected some text");
}
function fun5()
{
var x=document.getElementById('myselect').value;
document.body.style.backgroundColor=x;
}
function fun6()
{
alert("Your data is not saved");
}
function fun7()
{
alert("Your data is saved");
}
</script>
<body>
</html>

CSE F2 53
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 54
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-21

Aim- Implement Javascript Objects: Maths, String ,Date, Array.

Source Code-

<html>
<head>
<title>
Objects
</title>
</head>
<body onload=date();array()>
<h3>Math</h3>
Enter any number x:- <input type="number" id="num" onkeyup=math()></input><br>
Cos(x)= <output id="cos"></output><br>
sin(x)= <output id="sin"></output><br>
Tan(x)= <output id="tan"></output>
<h3>Date</h3>
Today's date is:- <output id="date"></output>/<output id="m"></output>/<output
id="y"></output><br>
Time:- <output id="hour"></output>:<output id="min"></output>:<output
id="sec"></output>:<output id="mil"></output>
<h3>Array</h3>
Array elements:- apple,litchi,orange<br>
Reverse= <output id="rev"></output><br>
Sorted= <output id="sot"></output><br>
Length= <output id="len"></output><br>
<h3>String</h3>
First name:- <input type="text" id="name1" onkeyup=string()></input> Last name:- <input
type="text" id="name2" onkeyup=string()></input><br>
Concat= <output id="cat"></output><br>
ToLowerCase= <output id="low"></output><br>
ToUpperCase= <output id="up"></output><br>
<script lang="javascript">
var i=0;
a=new Array("apple","litchi","orange");
function math()
{
document.getElementById('cos').value=Math.cos(document.getElementById('num').value);
document.getElementById('sin').value=Math.sin(document.getElementById('num').value);
document.getElementById('tan').value=Math.tan(document.getElementById('num').value);
}
function date()
{

CSE F2 55
Name-Laksh Nanda
Roll No.-1710991423

var d = new Date();


document.getElementById('date').value=d.getDate();
document.getElementById('m').value=d.getMonth();
document.getElementById('y').value=d.getFullYear();
document.getElementById('hour').value=d.getHours();
document.getElementById('min').value=d.getMinutes();
document.getElementById('sec').value=d.getSeconds();
document.getElementById('mil').value=d.getMilliseconds();
setTimeout(date,0);
}
function array()
{
document.getElementById('rev').value=a.reverse();
document.getElementById('sot').value=a.sort();
document.getElementById('len').value=a.length;
}
function string()
{
document.getElementById('cat').value=document.getElementById('name1').value.concat(documen
t.getElementById('name2').value);
var x=document.getElementById('cat').value;
document.getElementById('low').value=x.toLowerCase();
document.getElementById('up').value=x.toUpperCase();
}
</script>
</body>
</html>

CSE F2 56
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 57
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-22

Aim- Use getElementsByTagName, getElementsById, getElementsByClassName method to


find the <p> element, and change its text to "Hello World!". Also change the value of
HTML element.

Source Code-

<html>
<body>

<p id="demo">Hello</p>
<h4>getElementById</h4>
<button onclick="myFunction()">Try it</button>
<H1> Hi </H1>
<h4>getElementByTag</h4>
<button onclick="myFunction1()">Try it</button>
<div class="example">Div element with class:"example"</div>
<h4>getElementByClassName</h4>
<button onclick="myFunction2()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello
World!";
}
function myFunction1()
{
var y = document.getElementsByTagName("H1");
y[0].innerHTML = "Hello World!";
}
function myFunction2() {
var x = document.getElementsByClassName("example");
x[0].innerHTML = "Hello World!";
}
</script>
</body>
</html>

CSE F2 58
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 59
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-23

Aim- Implement DOM Node properties: childnodes, firstnode, lastnode, nodename,


nodetype, nodevalue, parent node.

Source Code-

<!DOCTYPE html>
<html>
<body>
<!--child node-->
<p>Click the button get info about the body element's child nodes.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<!--first and last node-->


<p>List:</p>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p>Click the button to get the HTML content of the list's first child node.</p>

<button onclick="myFunction1()">Try it</button>

<p id="demo1"></p>

<p>Click the button to get the HTML content of the list's last child node.</p>

<button onclick="myFunction3()">Try it</button>


<p id="demo3"></p>

<!--node name-->
<h1 id="myP">Click the button to get the node name of this element.</h1>
<button onclick="myFunction2()">Try it</button>
<p id="demo2"></p>

CSE F2 60
Name-Laksh Nanda
Roll No.-1710991423

<p id="myP1">Click the button to get the node name of this element.</p>
<button onclick="myFunction4()">Try it</button>
<p id="demo4"></p>

<!-- node type-->


<p>Click the button to get the node types of the body element's child nodes.</p>

<button onclick="myFunction5()">Try it</button>

<!-- comment -->

<p id="type"></p>

<!-- node value -->


<p>Click the button get the node value of the first paragraph element in the
document.</p>

<button onclick="myFunction6()">Try it</button>

<p id="value"></p>

<!-- parent node -->


<p>List:</p>

<ul>
<li id="LI">Coffee</li>
<li>Tea</li>
</ul>

<p>Click the button to get the node name of the parent node of the li element in the
list.</p>

<button onclick="myFunction7()">Try it</button>

<p id="parent"></p>

CSE F2 61
Name-Laksh Nanda
Roll No.-1710991423

<!--child node-->
<script>
function myFunction() {
var c = document.body.childNodes;
var txt = "";
var i;
for (i = 0; i < c.length; i++) {
txt = txt + c[i].nodeName + "<br>";
}

document.getElementById("demo").innerHTML = txt;
}
</script>
<!--first node-->
<script>
function myFunction1() {
var list = document.getElementById("myList").firstChild.innerHTML;
document.getElementById("demo1").innerHTML = list;
}
</script>

<!--last node-->
<script>
function myFunction3() {
var list = document.getElementById("myList").lastChild.innerHTML;
document.getElementById("demo3").innerHTML = list;
}
</script>

<!--node name-->
<script>
function myFunction2() {
var x = document.getElementById("myP").nodeName;
document.getElementById("demo2").innerHTML = x;
}
function myFunction4() {
var y = document.getElementById("myP1").nodeName;
document.getElementById("demo4").innerHTML = y;
}

CSE F2 62
Name-Laksh Nanda
Roll No.-1710991423

</script>

<!-- node type-->


<script>
function myFunction5() {
var c = document.body.childNodes;
var txt = "";
var i;
for (i = 0; i < c.length; i++) {
txt = txt + c[i].nodeType + " , ";
}

document.getElementById("type").innerHTML = txt;
}
</script>

<!-- node value -->


<script>
function myFunction6() {
var c = document.getElementsByTagName("p")[0];
var x = c.childNodes[0].nodeValue;
document.getElementById("value").innerHTML = x;
}
</script>
<script>
function myFunction7() {
var z = document.getElementById("LI").parentNode.nodeName;
document.getElementById("parent").innerHTML = z; }
</script> </body></html>

Output-

CSE F2 63
Name-Laksh Nanda
Roll No.-1710991423

CSE F2 64
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-24

Aim- Implement DOM Node methods by making a list of grocery items purchased from
super market using appendchild() and remove child(), createnode() and text type Node
creation, node removal, Traversing a Document's Nodes.

Source Code-

<!DOCTYPE html>
<html>
<body>
<h3>grocery item list</h3>
<ul id="div1">
<li id="p1">sauces</li>
<li id="p2">vegetables</li>
<li id="p3">cooking oil</li>
</ul>
<script>
var para = document.createElement("li");
var node = document.createTextNode("maggi");
//crete child node.
para.appendChild(node);
var element =
document.getElementById("div1");
element.appendChild(para); //append child
//remove child.
var child= document.getElementById("p3");
element.removeChild(child);
</script>

</body>
</html>

CSE F2 65
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 66
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-25

Aim- Implement DOM Objects: Window, History object with their method and properties.

Source Code-

<html>
<head>
<title>Window object</title>
<script language="javascript">
var x;
function a()
{
x=window.open("","","width=500,height=500")
;
}
function b()
{
a=parseInt(prompt("Enter height"));
b=parseInt(prompt("Enter Width"));
x.resizeBy(b,a);
}
function c()
{
a=parseInt(prompt("Enter height"));
b=parseInt(prompt("Enter Width"));
x.resizeTo(b,a);
}
function d()
{
x.close();
}
function e()
{
if(x)
{
alert("Inner height"+x.innerHeight);

CSE F2 67
Name-Laksh Nanda
Roll No.-1710991423

alert("Inner Width"+x.innerWidth);
alert("Outer height"+x.outerHeight);
alert("Outer Width"+x.outerWidth);
alert("Text in status bar"+x.status);
}
else
alert("WIndow is not opened");
}
function f()
{
if(x)
alert("Window is close "+x.closed);
else
alert("Window is not opened");
}
function g()
{
x.focus();
}
</script>
</head>
<body>
<button onClick=a()>New Window</button>
<button onClick=b()>ResizeBy</button>
<button onClick=c()>ResizeTo</button>
<button onClick=d()>Close Window</button>
<button onClick=e()>details</button>
<button onClick=f()>Closed status</button>
<button onClick=g()>Focus</button>
</body>
</html>

CSE F2 68
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 69
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-26

Aim- Implement DOM Objects: Location, Document, Form object with their method and
properties.

Source Code-

<html>
<head>
<title>
Dom
</title>
</head>
<body>
<p>Display the entire URL of the current page.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML ="Page location is: " +
window.location.href;
</script>
<p>Display the hostname (and the port if not 80) of the current URL.</p>
<p id="demo1"></p>
<script>
document.getElementById("demo1").innerHTML ="Page hostname is: " +
window.location.hostname;
</script>
<p>Display the path name of the current URL.</p>
<p id="demo2"></p>
<script>
document.getElementById("demo2").innerHTML ="Page path is: " +
window.location.pathname;
</script>
<p>Display the protocol portion of the current URL.</p>
<p id="demo3"></p>
<script>
document.getElementById("demo3").innerHTML ="Page protocol is: " +
window.location.protocol;

CSE F2 70
Name-Laksh Nanda
Roll No.-1710991423

</script>
<script>
function newDoc() {
window.location.assign("http://www.google.com")
}
function myFunction() {
document.open();
document.write("<h1>Hello World</h1>");
document.close();
}
function myFunction1() {
var x = document.createElement("FORM");
x.setAttribute("id", "myForm");
document.body.appendChild(x);

var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("value", "Maneel");
document.getElementById("myForm").appendChild(y);
}
</script>
<input type="button" value="Load new document" onclick="newDoc()">
<p>Click the button to open an output stream, add some text, and close the output
stream.</p>

<button onclick="myFunction()">Document</button>
<p>Click the button to create a FORM and an INPUT element.</p>

<button onclick="myFunction1()">Form</button>
</body>
</html>

CSE F2 71
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 72
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-27

Aim- WAP to implement validation on form in Javascript.

Source Code-

<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>

<form name="myForm" action="26.html"


onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>

CSE F2 73
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 74
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-28

Aim- Use the on() method to attach a click event handler to all <p> elements. Similarly,
implement jQuery event elements and methods for the same.

Source Code-

<html>
<head>
<title>
Events
</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p style="font-size:150px;font-family:LCD;color:red;text-align:center"
id="display">0</p>
<div align="center">
<input type="button" value="Up" style="border-radius:100%;font-size:70px;border-
color:black;color:blue;height:190;width:190;background-color:white" id="b1">
<input type="button" value="Down" style="border-radius:100%;font-size:70px;border-
color:black;color:blue;height:190;width:190;background-color:white" id="b2">
</div>
<script>
$(document).ready(function(){
var x=0;
$("#display").click(function()
{
$("#display").fadeOut(500);
$("#display").html(0);
x=0;
$("#display").fadeIn(500);
}
);
$("#b1").click
(function()
{x++;
$("#display").html(x);
});
$("#b1").mouseenter
(function()

CSE F2 75
Name-Laksh Nanda
Roll No.-1710991423

{
$("#b1").css("background-color","black");
});
$("#b2").click(function(){x--;
$("#display").html(x);
});
$("#b2").mouseenter(function(){
$("#b2").css("background-color","black");
});
$("#b1").mouseleave(function(){
$("#b1").css("background-color","white");
});
$("#b2").mouseleave(function(){
$("#b2").css("background-color","white");
});
});
</script>
</body>
</html>

CSE F2 76
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 77
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-29

Aim- Using jQuery animate () method create custom animations. Also implement chaining
effect by writing a paragraph and insert a button, on clicking button chaining effect of
paragraph and buttonoccurs.

Source Code-

<html>
<head>
<title>
Animation
</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body><div align="center">
<input type="button" value="Click me!!" id="s1" style="color:blue;background-
color:black;height:50;width:90"></div>
<div id="d1" style="height:200;width:1350;position:absolute;" align="center">
<p id="p1" style="font-size:100px;font-family:samarkan;color:red" align="center">Hello
world!!!!</p></div>
<script>
$(document).ready(function()
{
var i;
$("#s1").click(function(){
for(i=0;i<10;i++)
{
$("#p1").fadeOut(500);
$("#p1").fadeIn(500);
$("#d1").animate({right:'200'},1000);
$("#d1").animate({bottom:'200'},1000);
$("#d1").animate({left:'200'},1000);
$("#d1").animate({top:'50'},1000);
}
})
}
)
</script>
</body>
</html>

CSE F2 78
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 79
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-30

Aim- Insert three paragraphs and using the children() method add a red color to the first
child element of <div>.

Source Code-

<html>
<head>
<title>
redchild
</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="d1">
<p id="p1">1st Child</p>
<p>2nd Child</p>
<p>last Child</p>
</div>
<script>
$(document).ready(function(){
$("#p1").click(function(){
$("div p:first-child").css("color","red");
});
});
</script>
</body>
</html>

CSE F2 80
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 81
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-31

Aim- Use a jQuery method to slide down the <div> element. The duration of the effect
should be 5000 milliseconds.

Source Code-

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#d1").click(function(){
$("div").slideUp();
});
});
</script>
</head>
<body>
<div id="d1">Click me!!!!</div>
</body>
</html>

CSE F2 82
Name-Laksh Nanda
Roll No.-1710991423

Output-

CSE F2 83
Name-Laksh Nanda
Roll No.-1710991423

Experiment No.-32

Aim-Implement all jQuery Selectors.

Source Code-

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#intro").css("background-color", "yellow");
});
$(document).ready(function(){
$(".intro").css("background-color","red");
});
$(document).ready(function(){
$("button").click(function(){
$("ul li:first").hide();
});
});
$(document).ready(function(){
$("button").click(function(){
$("[href]").hide();
});
});
</script>
</head>
<body>
<p id="intro">HTML</p>
<p class="intro">Jquery</p>
<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>

CSE F2 84
Name-Laksh Nanda
Roll No.-1710991423

<li>Tea</li></ul>
<button>Click me</button>
<p><a href="cse.html">HTML Tutorial</a></p>
</body></html>

Output-

CSE F2 85

You might also like