Scribd
Upload
7 views

LAB PROGRAM

The document contains multiple HTML examples demonstrating JavaScript functionalities, including counting form elements, validating text boxes, evaluating arithmetic expressions, basic animation, finding the sum of natural numbers, displaying the current date in words, and generating student and employee reports. Each section includes a form with input fields and JavaScript functions to perform specific tasks, such as calculating totals, averages, and displaying results. The document serves as a comprehensive guide for implementing various JavaScript features in web forms.

Uploaded by

Keerthi N
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
7 views

LAB PROGRAM

The document contains multiple HTML examples demonstrating JavaScript functionalities, including counting form elements, validating text boxes, evaluating arithmetic expressions, basic animation, finding the sum of natural numbers, displaying the current date in words, and generating student and employee reports. Each section includes a form with input fields and JavaScript functions to perform specific tasks, such as calculating totals, averages, and displaying results. The document serves as a comprehensive guide for implementing various JavaScript features in web forms.

Uploaded by

Keerthi N
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/ 15

Program 1.

COUNTING FORM ELEMENTS:

<!DOCTYPE html>

<html>

<head> <title> Count form elements </title>

<script type="text/javascript">

function countFormElements()

alert("the number of elements are :"+document.myForm.length);

</script></head><body bgcolor=cyan>

<h1 align=center>Counting Form Elements </h1>

<hr />

<form name="myForm" align=left>

1. Name : &nbsp;&nbsp;&nbsp;&nbsp;<input type="text"/> <br><br>

2. Password: <input type="password"/><br /><br />

3. Address:&nbsp;&nbsp;<textarea id="emailbody" cols=50 rows=10></textarea> <br /><br />

4. GENDER:<input type="radio" name="gender"/>Male

<input type="radio" name="gender"/>Female<br /><br />

5. Newsletter: <input type="checkbox" checked="checked"/><br /><br />

<input type=button value="Send Message" "onclick=countFormElements()" />

</form>

</body>

</html>
1.OUTPUT:

2.TEXT BOX VALIDATION:


<!-- Lab2 - Validating Text Boxes -->
<html>

<head>
<title> Validate Text Boxes </title>
<script type="text/javascript">
function validate()

{
var myArray=new Array();
for(var i=0;i<document.myForm.length;i++)
{
if(document.myForm.elements[i].value.length==0)

{
myArray.push(document.myForm.elements[i].name);
}
}

if(myArray.length!=0)
{
alert("the following text boxesa are empty:\n"+myArray);
}

}
</script>
</head>
<body bgcolor="yellow">

<h1 align=”left”> Text Box Validation </h1>


<hr />
<form name="myForm" onSubmit="validate()">
Name : <input type="text" name="name" /> <br /> <br />
Class : &nbsp;<input type=text name="class"/> <br /> <br />

Age:&nbsp;&nbsp;&nbsp; <input type=text name="Age"/><br/> <br/>


<input type="submit" value="Send Message"/>
</form>
</body>
</html>
2.OUTPUT:

3.EVALUATING ARITHMETIC EXPRESSION:

<!-- Lab3 - Evaluating Arithmetic Expression -->

<html>

<title> Arithmetic expression Evaluation </title>


<script type="text/javascript">

function evaluate()

var enteredExpr=document.getElementById("expr").value;

document.getElementById("result").value=eval(enteredExpr);

</script>

</head><body bgcolor=cyan>

<h1 align=center> Evaluating Arithmetic Expression</h1><hr>

<form name="myform">

<b>

&nbsp;&nbsp; Enter any valid Expression : <input type=text id=expr><br /><br />

&nbsp; &nbsp; <input type=button value="Evaluate" onclick="evaluate()"/><br /> <br />

&nbsp; &nbsp; Result of the expression : <input type=text id=result>

<br />

</b>

</form>

</body>

</html>

3.OUTPUT:
4. BASIC ANIMATION:

<html>

<head>

<title> Basic Animation </title>

<style>

#layer1 {position:absolute; top:25px;left:50px;}

#layer2 {position:absolute;top:50px; left:150px;}

#layer3 {position:absolute; top:75px;left:250px;}

</style>

<script type="text/javascript">

function moveImage(layer)

var top=window.prompt("Enter Top value");

var left=window.prompt("Enter Left Value");


document.getElementById(layer).style.top=top+'px';

document.getElementById(layer).style.left=left+'px';

</script>

<head>

<body bgcolor=cyan>

<div id="layer1">

<img src="ball.jpg" onclick="moveImage('layer1')" alt="MyImage">

</div>

<div id="layer2"><img src="ball.jpg" onclick="moveImage('layer2')" alt="MyImage">

</div>

<div id="layer3"><img src="ball.jpg" onclick="moveImage('layer3')" alt="MyImage">

</div>

</body>

</html>

OUTPUT:
5.FINDING SUM OF N NUMBERS:

<!-- Lab 5 - Javascript to find the sum of N Natural numbers -->

<html>

<head>

<title> Sum of Natural Numbers </title>

<script type="text/javascript">

function sum()

var num=window.prompt("Enter the value of N");

var n =parseInt(num);

var sum=(n*(n+1))/2;

window.alert("Sum of First" + n + "Natural numbers is:"+sum);


}

</script>

</head> <body bgcolor=cyan>

<h1 align=left> Finding Sum of N Natural Numbers </h1>

<hr />

<form align=left>

<input type="button" value="Click Here " onclick="sum()"/>

</form>

</body>

</html>

OUTPUT:

6. Write a JavaScript code block using arrays and generate the current date in words, this should include
the day, month and year.

Html Code:

<!-- Lab 6 : Java Script code to display date in words -->

<html>

<head>
<title>Display Date </title>

<script type="text/javascript">

function display()

var dateObj=new Date();

var currDate=dateObj.getDate();

var month=dateObj.getMonth();

var currYear=dateObj.getFullYear();

var year="Two Thousand and Fourteen";

var days=["First","Second","Third","Fourth","Fifth","Sixth","Seventh","Eigth","Ninth",
"Tenth","Eleventh","Twelfth","Thirteenth","Fourteenth","fifteenth","Sixteenth",
"Seventeenth","Eighteenth","Nineteenth","Twentyeth","Twenty First","Twenty Second", "Twenty
Third","Twenty Fourth","Twenty Fifth","Twenty Sixth","Twenty Seventh", "Twenty Nine","Thirtyeth",
"Thirty First"];

var months=["January","Febraury", "March", "April", “May”, “June”, “july”,


“August”,"September","October","November","December"];

if(currYear==2014)

alert("Today date is :: "+days[currDate-1]+" "+months[month-1]+" "+year);

else alert("Today date is :: "+days[currDate-1]+" "+months[month-1]+" "+currYear); }


</script> </head> <body bgcolor=cyan> <form> <input type=button value="Click Here"
onClick="display()"/> </form></body> </html>

7. Create a form for Student information. Write JavaScript code to find Total, Average, Result and Grade.
Html Code:

<html>

<head>

<title> Student Marks Report </title>

<script type="text/javascript"> function showResult() { var name =


document.getElementById("name").value; var cls=document.getElementById("class").value;
var marks1=parseInt(document.getElementById("Sub1").value); var
marks2=parseInt(document.getElementById("Sub2").value); var
marks3=parseInt(document.getElementById("Sub3").value); var
total=marks1+marks2+marks3; var avg=total/3; var grade,result; if(avg>=60) {
grade="A"; result="First Class"; } else if(avg<60 && avg>=50) {
grade="B"; result="Second Class"; } else if(avg<50 && avg>=40) { grade="C";
result="Third Class"; } else { grade="D";
result="Fail"; }

document.write("<body bgcolor="red">");

document.write("<h2> Student Marks Report </h2>"); document.write("<hr>");


document.write("<b> Name :"+name+"</b> <br><br>"); document.write("<b> Class
:"+cls+"</b> <br><br>"); document.write("<b> Total Marks :"+total+"</b> <br><br>");
document.write("<b> Average :"+avg+"</b> <br><br>"); document.write("<b> Grade
:"+grade+"</b> <br><br>"); document.write("<b> Result :"+result+"</b> <br><br>");
document.write("</body>"); } </script></head><body bgcolor=cyan><form> <table border="5">
<tr> <th> Student Data Form </th> </tr> <tr> <td> Student Name </td> <td><input
type=text id=name></td> </tr> <tr> <td> Class </td> <td><input type=text
id=class></td> </tr> <tr> <td> Subject1 Marks </td> <td><input type=text
id=sub1></td> </tr> <tr> <td> Subject2 Marks </td> <td><input type=text
id=sub2></td> </tr> <tr> <td> Subject3 Marks </td> <td><input type=text
id=sub3></td> </tr> </table> <br> <br> <input type=button value="ShowResult"
onclick="showResult()"> </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 Code: <!-- Lab 8 : Employee Salary Report -->

<html> <head> <title> Employee Salary Report </title> <script type="text/javascript"> function
showSalary() { var name=document.getElementById("empname").value; var
empno=document.getElementById("empno").value; var basic =
parseInt(document.getElementById("basic").value); // hra is 40% of basic var
hra=basic*0.4; // da is 60% of basic var da=basic*0.6 gross=basic+hra+da; // pf is
13% of gross var pf=gross*0.13; // tax is 20%of gross var tax=0.2*gross;

var deductions=pf+tax; var netsalary=gross-deductions; document.write("<body


bgcolor=pink>"); document.writeln("<table border='5'>"); document.writeln("<tr><th
colspan=2> Employee Salary Report </th> </tr>"); document.writeln("<tr><td> Employee
Name:</td> <td>"+name+"</td></tr>"); document.writeln("<tr><td> Emp No : </td>
<td>"+empno+"</td></tr>"); document.writeln("<tr><td> Basic Salary :</td>
<td>"+basic+"</td></tr>"); document.writeln("<tr><td> HRA (40 % of basic) </td>
<td>"+hra+"</td></tr>"); document.writeln("<tr><td> DA (60 % of basic</td>
<td>"+da+"</td></tr>"); document.writeln("<tr><td> Gross salary : </td>
<td>"+gross+"</td></tr>"); document.writeln("<tr><td> PF ( 13% of the basic )</td>
<td>"+pf+"</td></tr>"); document.writeln("<tr><td> Tax (20% of the gross) : </td>
<td>"+tax+"</td></tr>"); document.writeln("<tr><td>Deductions (PF + Tax) </td>
<td>"+deductions+"</td></tr>"); document.writeln("<tr><td>Net Salary (Gross - Deductions) :
</td> <td>"+netsalary+"</td></tr>"); document.writeln("</table>");
document.write("</body>"); } </script><body bgcolor="cyan") <form> <table border="5">
<tr> <th colspan=2> Employee Salary Form </th></tr> <tr> <td> Employee Name :</td>
<td> <input type="text" id="empname"/></td> </tr> <tr> <td> Employee Number
</td> <td> <Input Type ="text" id="empno"/> </td> </tr> <tr> <td> Basic
Pay </td> <td> <input type=text id=basic /></td> </tr> </table> <br> <input
type=button value="Show Salary" onclick="showSalary()"> </form></html>

9. . Create a form consists of a two Multiple choice lists and one single choice list,

a) The first multiple choice list, displays the Major dishes available.

b)The second multiple choice list, displays the Starters available.

c)The single choice list, displays the Soft drinks available.

The selected items from all the lists should be captured and displayed in a Text Area along with their
respective costs. On clicking the ‘Total Cost’ button, the total cost of all theselected items is calculated
and displayed at the end in the Text Area. A ‘Clear’ button is provided to clear the Text Area.

Html Code:

<html> <head> <title> MacDonalds Restaurant </title> <script text="text/javascript"> function


findCost() { var major=document.getElementById("major"); var starters =
document.getElementById("starters"); var soft = document.getElementById("soft"); var
selectedItems="Item\t\t\t Price \n..................\n"; var totcost=0; for(var
i=0;i<major.options.length; i++)

{ var option = major.options[i]; if(option.selected==true) { var


price = parseInt(option.value); totcost=totcost + price;
selectedItems=selectedItems+option.text+"\t\t"+price+"\n"; } } for(var i=0;
i<starters.options.length;i++) { var option = starters.options[i];
if(option.selected==true) { var price = parseInt(option.value);
totcost=totcost + price; selectedItems=selectedItems+option.text+"\t\t"+price+"\n";
} } var softdrinkIndex=soft.selectedIndex; if(softdrinkIndex!=-1) { var
selectedSoftdrink=soft.options[soft.selectedIndex].text; var price =
parseInt(soft.options[soft.selectedIndex].value); totcost=totcost+price;
selectedItems=selectedItems+selectedSoftdrink+"\t\t\t"+price+"\n.....................\n"; }
selectedItems=selectedItems+"Total cost \t\t" + totcost+"\n...................\n";
document.getElementById("ordereditems").value=selectedItems; } </script> </head><body
bgcolor=cyan text=blue> <h1 align=center> Mc Donald's Restaurant </h1> <hr> <form
name="Menu Form"> <table border=10 align=center>

<tr> <th colspan=2 align=center> <h2> Items Menu</h2> </th> </tr> <tr>
<td> Major Dishes : </td> <td> <select id=major size=3 multiple="multiple">
<option value=100> Vegetable Pulav </option> <option value=150> Hyderabadi Biriyani
</option> <option value=50> Roti with Curry </option> </td> </tr>
<tr> <td> Starters </td> <td> <select id="starters" size=3 multiple="multiple">
<option value=80> Gobi Manchurian </option> <option value=40> Veg Soup </option>
<option value=30> Masala Papad </option> </td> </tr> <tr> <td>
Soft Drinks </td> <td> <select id="soft" size=1> <option value=20> Pepsi
</option> <option value=30> Coke </option> <option
value=10>LimeSoda</option> </select> </td> </tr>
<tr> <td colspan=2 align=center> <textarea id="ordereditems" rows=10 cols=40>
</textarea> </td> </tr> <tr><td> <input type=button value="Find Total Cost"
onClick="findCost()"/></td> <td> <input type=reset value=clear /></td> </tr>
</table> </form></html>

Example:

Write a JavaScript code to find factorial of N. (Use recursive function).

Html Code:
<!-- Lab 6 : Finding factorial of a given number N --><html> <head> <title> Factorail of a Number
</title> <script type="text/javascript"> function findFactorial() { var
num=window.prompt("Enter the value of N : "); var n=parseInt(num);
window.alert("Factorial of "+n+" is "+fact(n)); } function fact(n) { if(n==0)
return 1; else return (n*fact(n-1)); }

</script> </head> <body bgcolor=cyan> <h1 align=center> Factorial of a Number </h1> <hr>
<center> <form> <input type=button value=ClickHere onclick="findFactorial()"/> </form>
</center> </body></html>

You might also like