[go: up one dir, main page]
Scribd
Upload
63 views9 pages

Web Tech Lab Manual - A

The document describes 5 JavaScript examples: 1. Counting elements in an HTML form and displaying the number. 2. Validating textbox fields in a form. 3. Evaluating a mathematical expression entered in a textbox. 4. Moving an image across the page using timed JavaScript calls. 5. Calculating the sum of the first N natural numbers.

Uploaded by

kalik7912
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
63 views9 pages

Web Tech Lab Manual - A

The document describes 5 JavaScript examples: 1. Counting elements in an HTML form and displaying the number. 2. Validating textbox fields in a form. 3. Evaluating a mathematical expression entered in a textbox. 4. Moving an image across the page using timed JavaScript calls. 5. Calculating the sum of the first N natural numbers.

Uploaded by

kalik7912
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/ 9

1.

COUNT THE NUMBER OF ELEMENTS IN A FORM


AIM:
To create an HTML form with a number of elements and count the elements using Java Script code.
PROCEDURE:
1. Start the program
2. Design the web page with number of form elements using <form> tag.
3. Create a java script function to display the number of elements.
4. Use document.forms.length to get the number of form elements.
5. Display the number of elements in the alert box.
SOURCE CODE:
<html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
function display()
{
alert("Number of Elements in this page "+document.getElementById("form1").length);
}
</script>
</head>
<body>
<h1 align="center"> Students Registration Form </h1>
<form id = "form1">
<table border = "0" align="center">
<tr>
<td>Name</td>
<td><input type = "text" value = "firstname" /></td>
<td><input type = "text" value = "Lastname" /></td>
</tr>
<tr>
<td>Date of Birth</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>Address</td>
<td><textarea name = "address"></textarea></td>
</tr>
<tr>
<td>Language you known</td>
<td><input type = "checkbox" /> Tamil </td>
<td><input type = "checkbox" /> English </td>
<td><input type = "checkbox" /> Others </td>
</tr>
<tr>
<td><input type = "button" value = "Submit" /></td><td></td>
<td><input type = "button" value = "Check no of elements" onclick = "display()" /></td>
</tr>
</table>
</form>
</body>
</html>

OUTPUT:

RESULT:
Thus the above program executed successfully.
2. TEXTBOX VALIDATION
SOURCE CODE:
<html>
<head>
<title>Personal Information</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.Phone.value == "") || (document.myForm.Phone.value.length != 10) )
{
alert("Please Provide a valid Phone Number");
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 >
<h1 align = "center"> Personal Information </h1>
<form name = "myForm" onsubmit = "return(validate());" >
<table cellspacing = "2" cellpadding = "2" border = "1" align = "center">
<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>Phone Number</td>
<td><input type = "text" name = "Phone"/></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" >UK</option>
</select>
</td>
</tr>
<tr>
<td colspan = "2" align = "center"><input type = "submit" value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:

3. EVALUATE MATHEMATICAL EXPRESSION


SOURCE CODE:
<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 >
<h1> Evaluate Mathematical Expression </h1>
<p> Enter mathematical expression in below text box. Ex: 5+4</p>
<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 colspan="2" align = "center" ><input type = "button" value = "calculate" onclick = "math_exp()"
/></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:

4. PAGE WITH DYNAMIC EFFECTS


SOURCE CODE:
<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>
OUTPUT:
5. SUM OF N NATURAL NUMBERS

SOURCE CODE:
<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);
document.write("<br><b>The sum of " + n + " natural number is " + result+"<b>");
function sumnaturalno(n)
{
var i;
var sum = 0;
document.write("Natural numbers are:");
for(i = 1;i <= n; i++)
{
document.write(i+" ");
sum = sum + i;
}
return (sum);
}
</script>
</head>

</html>
OUTPUT:

You might also like