Scribd
Upload
3 views

webLab (1)

The document contains a series of JavaScript and HTML exercises aimed at teaching various programming concepts, including counting elements in forms, validating user input, performing calculations, and creating animations. Each exercise includes the program code, its aim, and a note confirming successful execution. The exercises cover topics such as form handling, mathematical expressions, and event handling.

Uploaded by

ugdino329
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
3 views

webLab (1)

The document contains a series of JavaScript and HTML exercises aimed at teaching various programming concepts, including counting elements in forms, validating user input, performing calculations, and creating animations. Each exercise includes the program code, its aim, and a note confirming successful execution. The exercises cover topics such as form handling, mathematical expressions, and event handling.

Uploaded by

ugdino329
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/ 33

EX NO: 1

COUNT THE NUMBER OF ELEMENTS


DATE: 22/12/23

Aim:
Create a java script code to find count the number of elements
Program:
<html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
function display ()
{
alert(document.getElementById("form1").length);
}
</script>
</head>
<body onload = "display ()">
<form id = "form1">
<table border = "1">
<tr>
<td>Name</td>
<td><input type = "text" value = "firstname" /></td>
</tr>
<tr>
<td>Choose Your Username</td>
<td><input type = "text" value = "Username" /></td>
</tr>
<tr>
<td>Create Password</td>
<td><input type = "password" value = "password" /></td>
</tr>

1
<tr>
<td>Confirm Password</td>
<td><input type = "password" value = "confirmPass"></td>
</tr>

</table>
</form>
</body>
</html>

2
OUTPUT:

RESULT:
Thus the above program has been executed sucessfully

3
EX NO: 2
NUMBER OF TEXT BOXES
DATE: 10/01/24

Aim :
Create a html code to create number of text boxes and the form runs in the browser
textboxes with data
Program:
<html>
<head>
<title>Registration Form</title>
<body >
<form name = "myForm" onsubmit = "return(validate());" >
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td>Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td>Email ID</td>
<td><input type = "text" name = "Email" onchange = "validateEmail();"/></td>
</tr>
<tr>
<td>Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td>Country</td>
<td><select name = "Country" >
<option value = "-1" selected> [Choose Yours]</option>
<option value = "1" >INDIA</option>
<option value = "2" >USA</option>

4
<option value = "3" >Srilanka</option>
</select>
</td>
</tr>
<tr>
<td colspan = "2" align = "center"><input type = "submit" value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>

5
OUTPUT:

RESULT:
Thus the above program has been executed successfully

6
EX NO: 3
ALERT INDICATING
DATE: 29/01/24

Aim :
Create a java script code to make the alert indicating
Program:
<html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
function validate()
{
if(document.myForm.Name.value == "")
{
alert("Please Provide Your Name");
document.myForm.Name.focus();
return false;
}
if(document.myForm.Email.value == "")
{
alert("Please Provide Your Email ID");
document.myForm.Email.focus();
return false;
}
if ((document.myForm.Zip.value == "")||(document.myForm.Zip.value.length != 5))
{
alert("Please Provide a valid zip code format #####");
document.myForm.Zip.focus();
return false;
}
if(document.myForm.Country.value == "-1")

7
{
alert("Please Provide Your Country Name");
return false;
}
return true;
}
function validateEmail()
{
var emailID = document.myForm.Email.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if(atpos < 1 || (dotpos - atpos < 2))
{
alert("Please Enter Correct Email ID");
document.myForm.Email.focus();
return false;
}
return true;
}
</script>
</head>
<body >
<form name = "myForm" onsubmit = "return(validate());" >
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td>Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td>Email ID</td>

8
<td><input type = "text" name = "Email" onchange = "validateEmail();"/></td>
</tr>
<tr>
<td>Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td>Country</td>
<td><select name = "Country" >
<option value = "-1" selected> [Choose Yours]</option>
<option value = "1" >INDIA</option>
<option value = "2" >USA</option>
<option value = "3" >Srilanka</option>
</select>
</td>
</tr>
<tr>
<td colspan = "2" align = "center"><input type = "submit" value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>

9
OUTPUT:

RESULT:
Thus the above program has been executed successfully

10
EX NO: 4
MATHEMATICAL EXPRESSION
DATE: 07/02/24

Aim :
Create a java script code to evaluate the expression
Program:
<html>
<head>
<title>Mathematical Expression</title>
<script type = "text/javascript">
function math_exp()
{
var x = document.form1.exptext.value;
var result = eval(x);
document.form1.resulttext.value = result;
}
</script>
</head>
<body >
<form name = "form1">
<table>
<tr>
<td>Expression</td>
<td><input type = "text" name = "exptext" /></td>
</tr>
<tr>
<td>Result</td>
<td><input type = "text" name = "resulttext" /></td>
</tr>
<tr>
<td><input type = "button" value = "calculate" onclick = "math_exp()" /></td>

11
</tr>
</table>
</form>
</body>
</html>

12
OUTPUT:

RESULT:
Thus the above program has been executed successfully

13
EX NO: 5
BASIC ANIMATION
DATE: 13/02/24

Aim :
Create a html code to create basic animation
Program:
<html>
<head>
<style>
body{color:blue;}
</style>
<body>
<marquee> FIOWER </marquee>

<marquee behavior="alternate" direction="left" scrollamount="1">


<img src="image.jpg" width="120" height="80" alt="flower" /></marquee>

<marquee behavior="slide" direction="right" scrollamount="12">


<img src="image.jpg" width="120" height="80" alt="Natural" /></marquee>

<marquee behavior="scroll" direction="up" scrollamount="20">


<img src="image.jpg" width="120" height="80" alt="Natural" /></marquee>

<marquee behavior="scroll" direction="down" scrollamount="50">


<img src="image.jpg" width="120" height="80" alt="Natural" /></marquee>

</html>

14
OUTPUT:

RESULT:
Thus the above program has been executed successfully

15
EX NO:6
SUM OF NATURAL NUMBERS
DATE:21/02/24

Aim :
Create a java script code to find the sum of natural numbers
Program:
<html>
<head>
<script type = "text/javascript">

var num = window.prompt("Enter the number:","");


var n = parseInt(num);
result = sumnaturalno(n);
window.alert("The sum of " + n + " natural number is " + result);
function sumnaturalno(n)
{
var i;
var sum = 0;
for(i = 1;i <= n; i++)
{
sum = sum + i;
}
return (sum);
}
</script>
</head>
</html>

16
OUTPUT:

RESULT:
Thus the above program has been executed successfully

17
EX NO:7 GENERATE THE CURRENT DATE
DATE:28/02/24

Aim :
Create a java script code to find the current date
Program:
<html>
<head>
<script type = "text/javascript">
var d = new Date();
var weekday = new
Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthname = new
Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
document.write(weekday[d.getDay()] + " ");
document.write(d.getDate() + ". ");
document.write(monthname[d.getMonth()] + " ");
document.write(d.getFullYear());
</script>
</head>

</html>

18
OUTPUT:

RESULT:
Thus the above program has been executed sucessfully

19
EX NO:8 STUDENT INFORMATION
DATE:12/03/24

Aim :
Create a java script code to find the total, average ,grade and result for student
Program:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
function calc()
{
var m1,m2,m3,avg = 0,total = 0, result = "",grade = "";
m1 = parseInt(document.form1.wp.value);
m2 = parseInt(document.form1.sp.value);
m3 = parseInt(document.form1.cg.value);
total = m1+m2+m3;
avg = total/3;
if( m1 < 35 || m2 < 35 || m3 < 35)
{
result = "fail";
grade = "D";
}
else if(avg >= 75)
{
result = "Distinction";
grade = "A+";
}
else if(avg >= 60 && avg < 75)
{

20
result = "First class";
grade = "A";
}
else if(avg >= 50 && avg < 60)
{
result = "Second class";
grade = "B";
}
else if(avg >=35 && avg < 50)
{
result = "Pass class";
grade = "C";
}
else if (avg < 35)
{
result = "Fail";
Grade = "D";
}
document.form1.result.value = result;
document.form1.grade.value = grade;
document.form1.total.value = total;
document.form1.average.value = avg;

}
</script>
</head>
<body>
<form name = "form1">
<table border = "1">
<tr>

21
<td> Student Name</td>
<td><input type = "text" /></td>
</tr>
<tr>
<td colspan = "2" align = "center">Subject Marks</td>
</tr>
<tr>
<td>Web Programming</td>
<td><input type = "text" name = "wp" /></td>
</tr>
<tr>
<td>Computer Graphics</td>
<td><input type = "text" name = "cg" /></td>
</tr>
<tr>
<td>System Programming</td>
<td><input type = "text" name = "sp" /></td>

</tr>
<tr>
<td colspan = "2" align = "center"><input type = "button" onclick = "calc()" value =
"calculte" /></td>
</tr>
<tr>
<td>Total</td>
<td><input type = "text" name = "total"/></td>

</tr>
<tr>
<td>Average</td>
<td><input type = "text" name = "average" /></td>

22
</tr>
<tr>
<td>Result</td>
<td><input type = "text" name = "result" /></td>
</tr>
<tr>
<td>Grade</td>
<td><input type = "text" name = "grade"/></td>
</tr>

</table>
</form>
</body>
</html>

23
OUTPUT:

RESULT:
Thus the above program has been executed sucessfully

24
EX NO:9 EMPLOYEE INFORMATION
DATE:19/03/24

Aim :
Create a java script code to find the employee information
Program:
<
html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
function calc()
{
var bp,DA,HRA,GP,PF,Tax,Deduction,NetPay,name,id,desg;
name = document.form1.firstname.value;
id = document.form1.userid.value;
desg = document.form1.designation.value;
bp = parseInt(document.form1.bp.value);

DA = bp * 0.5;
HRA = bp * 0.5;
GP = bp + DA + HRA;
PF = GP * 0.02;
Tax = GP * 0.01;
Deduction = Tax + PF;
NetPay = GP - Deduction;

document.form1.da.value = DA;
document.form1.hra.value = HRA;
document.form1.gp.value = GP;
document.form1.pf.value = PF;
document.form1.tax.value = Tax;
document.form1.deduction.value = Deduction;

25
document.form1.netpay.value = NetPay
}
</script>
</head>
<body >
<form name = "form1">
<table border = "1">
<tr>
<td>Name</td>
<td><input type = "text" name = "firstname" /></td>
</tr>
<tr>
<td>User ID</td>
<td><input type = "text" name = "userid" /></td>
</tr>
<tr>
<td>Designation</td>
<td><input type = "text" name = "designation" /></td>
</tr>
<tr>
<td>Basic Pay</td>
<td><input type = "text" name = "bp"></td>
</tr>
<tr>
<td colspan = "2" align = "center">
<input type = "button" name = "calculate" value = "Click Here To Calculate"onclick
="calc()"></td>

</tr>
<tr>
<td>Dearness Allowance </td>

26
<td><input type = "text" name = "da"/></td>
</tr>
<tr>
<td>House Rent Allowance </td>
<td><input type = "text" name = "hra"></td>
</tr>
<tr>
<td>GP</td>
<td><input type = "text" name = "gp"></td>
</tr>
<tr>
<td>Provident Fund</td>
<td><input type = "text" name = "pf" /></td>
</tr>
<tr>
<td>Tax</td>
<td><input type = "text" name = "tax" /></td>
</tr>
<tr>
<td>Deduction</td>
<td><input type = "text" name = "deduction" /></td>
</tr>
<tr>
<td>NetPay</td>
<td><input type = "text" name = "netpay" /></td>
</tr>
</table>
</form>
</body>
</html>

27
OUTPUT:

RESULT:
Thus the above program has been executed successfully

28
EX NO:10
MULTIPLE CHOICE LIST
DATE:21/03/24

Aim :
Create a html code to create two multiple choice
Program:
<html>
<body>
<head>
<h1> MENU </h1>
<style>
h1 {
text-align: center;
}
</style>
<table border = "1" align="center" >
<tr>
<td > Major Dishes:</td>
<td>
<select id = "major" size = "3" multiple = "multiple">
<option > Vegetable Pulav</option>
<option > Hyderabadi Biriyani</option>
<option > Roti with Curry </option>
</select>
</td>
</tr>
<tr>
<td> Starters </td>
<td> <select id = "starters" size = "3" multiple = "multiple">
<option > Gobi Manchurian </option>
<option > Veg Clear Soup </option>

29
<option > Masala Papad </option>
</td>
</tr>
<tr>
<td>Soft Drinks</td>
<td>
<select id = "soft" size = "3" multiple = "multiple">
<option > Pepsi</option>
<option > Coke </option>
<option> Lime Soda </option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

30
OUTPUT:

RESULT:
Thus the above program has been executed successfully

31
EX NO: 11
ON MOUSE OVER AND ON MOUSE OUT EVENT HANDLERS
DATE:28/03/24

Aim :
Create a java script code to create on mouse over and on mouse out event
Program:
<html>
<head>
<script type = "text/javascript">
function mouseover()
{
document.getElementById("img").src = "image.jpg";
}
function mouseout()
{
document.getElementById("img")

.src = image1.png;
}
</script>
</head>
<body>
<img src = "image1.png" id = "img" onmouseover="mouseover()"
img src = "image.jpg" id = "img" onmouseout="mouseout()" />
</body>
</html>

32
OUTPUT:

RESULT:
Thus the above program has been executed sucessfully

33

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy