Scribd
Upload
77 views

LAB

1. The document contains code snippets to: - Count the number of elements in a HTML form using JavaScript - Validate that textboxes in a form have been filled out - Evaluate a mathematical expression entered in a form and display the result 2. More code snippets are provided to: - Create dynamic effects using layers and basic animation - Calculate the sum of N natural numbers using a user-defined function - Generate the current date as words using arrays - Calculate student marks, average, grade using a form 3. The last code snippet shows a form to calculate employee details like DA, HRA, PF, tax, gross pay, deduction, net pay using JavaScript functions.

Uploaded by

SAM CYRIL
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
77 views

LAB

1. The document contains code snippets to: - Count the number of elements in a HTML form using JavaScript - Validate that textboxes in a form have been filled out - Evaluate a mathematical expression entered in a form and display the result 2. More code snippets are provided to: - Create dynamic effects using layers and basic animation - Calculate the sum of N natural numbers using a user-defined function - Generate the current date as words using arrays - Calculate student marks, average, grade using a form 3. The last code snippet shows a form to calculate employee details like DA, HRA, PF, tax, gross pay, deduction, net pay using JavaScript functions.

Uploaded by

SAM CYRIL
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

1.

Create a form having number of elements (Textboxes, Radio buttons, Checkboxes, and so
on). Write JavaScript code to count the number of elements in a form.

<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>
<tr>
<td>Confirm Password</td>
<td><input type = "password" value = "confirmPass"></td>
</tr>
<tr>
<td>Birthday</td>
<td><select name = "date"><option value = "7" >11</td>
<td><select name = "month"><option value = "November">November</td>
<td><select name = "year"><option value = "1991">1991</td>
</tr>
<tr>
<td>Gender</td>
<td><input type = "radio" name = "gender"/>Male</td>
<td><input type = "radio" name = "gender"/>Female</td>
</tr>
<tr>
<td>Mobile</td>
<td><input type = "text" ></td>
</tr>
<tr>
<td>Location</td>
<td><input type = "text"></td>
</tr>
<tr>
<td><input type = "checkbox" /> I agree the terms and policy</td>
</tr>
<tr>
<td><input type = "button" value = "create" /></td>
</tr>
</table>
</form>
</body>
</html>
2. Create a HTML form that has number of Textboxes. When the form runs in the Browser fill
the textboxes with data. Write JavaScript code that verifies that all textboxes has been filled. If a
textboxes has been left empty, popup an alert indicating which textbox has been left empty.
<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")
{
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>
<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>
3. Develop a HTML Form, which accepts any Mathematical expression. Write JavaScript code
to Evaluates the expression and Displays the result.

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

</tr>
</table>
</form>
</body>
</html>
4.Create a page with dynamic effects. Write the code to include layers and basic animation.
<html>
<head>
<style>
.moveable{

position: absolute;
}
</style>
<script type = "text/javascript">
var x = 5;

var y = 5;
var dest_x = 300;
var dest_y = 300;
var interval = 10;
function moveImage()
{

if(x < dest_x)


x = x + interval;
if(y < dest_y)
y = y + interval;

document.getElementById("ufo").style.top = y + "px";

document.getElementById("ufo").style.left = x + "px";
if((x + interval < dest_x) && (y + interval < dest_y))
{
window.setTimeout("moveImage()", 100);
}
}
</script>
</head>
<body onload = "moveImage()">
<div id = "ufo" class = "moveable">

<img src = "image.jpg" alt = "please link to a valid image" />


</div>
</body>
</html>
5.Write a JavaScript code to find the sum of N natural Numbers. (Use user-defined function)

<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>
6.Write a JavaScript code block using arrays and generate the current date in words, this should
include the day, month and year.
<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>
<body>

</body>
</html>
7.Create a form for Student information. Write JavaScript code to find Total, Average, Result
and Grade.

<!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)
{
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>

<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>
</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>
8.Create a form for Employee information. Write JavaScript code to find DA, HRA, PF, TAX,
Gross pay, Deduction and Net pay.
<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;
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>

<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>
9.Create a web page using two image files, which switch between one another as the mouse
pointer moves over the images. Use the on Mouse Over and on Mouse Out
<html>
<head>
<script type = "text/javascript">

function mouseover()
{
document.getElementById("img").src = "image.jpg";
}
function mouseout()
{
document.getElementById("img").src = image1.jpg;
}
</script>
</head>

<body>
<img src = "image1.jpg" id = "img" onmouseover="mouseover()" onmouseout="mouseout()"/>
</body>
</html>

You might also like