Part –A
1. write a js code to count the number of elements in a form
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Count From Elements</title>
<script type="text/javascript">
function countFormElements(){
alert("The number of form elements are:"+document.myForm.length);
}
</script>
</head>
<body bgcolor="darkblue" text="white">
<h1 align=center>Counting Form Elements </h1>
<hr>
<form name="myForm" align="left">
<b>Name:</b>     <input type="text"/><br/><br/>
<b>Password:</b><input type="password"/><br/><br/>
<b>Address:</b>
<textarea id="emailBody" cols="50" rows="10"></textarea><br/><br/>
<b>sex: </b>   <input type="radio" name="gender"/>Male
<input type="radio" name="gender"/>Female<br/><br/>
<b>Newsletter:</b><input type="checkbox" checked="checked"/><br/><br/>
<input type="button" value="Send message" onclick="countFormElements()"/>
</form>
</body>
</html>
2. Student Validation
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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);
1
srizanaryal.blogspot.com
}
}
if(myArray.length!=0)
{
alert("The following Text Boxes are Empty:\n"+myArray);
}
}
</script>
</head>
<body bgcolor="darkblue" text="white">
<h1 align=center> Text Box Validation </h1>
<hr color="white" height="50">
<form name="myForm" onSubmit="validate()">
<b>Name:</b> <input type="text" name="Name"/><br/><br/>
<b>Class:</b>   <input type="text" name="Class"/><br/><br/>
<b>Age:</b>    <input type="text" name="Age"/><br/><br/>
<input type="submit" value="Send Message"/>
</form>
</body>
</html>
3.Evaluation
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>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="darkblue" text="white">
<h1 align="center"> Evaluating Mathematical Expression</h1>
<hr>
<form name="myForm">
<b>Enter Any Valid Expression:</b><input type="text" id="expr"/><br/><br/>
<input type="button" value="Evaluate" onclick="evaluate()"/><br/><br/>
<b>Result of the Expression:</b> <input type="text" id="result"/><br/><br/>
</form>
</body>
</html>
2
srizanaryal.blogspot.com
4. Create a page with dynamic effects.
<!-4. Create a page with dynamic effects. Write the code to include layers and basic
animation.->
<?xml version=*1.0* encoding=*ISO-8859.1*?>
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml.transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Basic Animation </title>
<style>
#layer1 {position:absolute; top:50px;left:50px;}
#layer2 {position:absolute;top:50px; left:150px;}
#layer3 {position:absolute; top:50px;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="darkblue" text="white">
<div id="layer1"><img src="Sujata Koirala (31).jpg" onclick="moveImage('layer1')"
alt="MyImage"></div>
<div id="layer2"><img src="Sujata Koirala (31).jpg" onclick="moveImage('layer2')"
alt="MyImage"></div>
<div id="layer3"><img src="Sujata Koirala (31).jpg" onclick="moveImage('layer3')"
alt="MyImage"></div>
</body>
</html>
5 .Write a JavaScript code to find the sum of N natural Numbers.(Use user-defined function)
<?xml version=*1.0* encoding=*ISO-8859.1*?>
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml.transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sum of Natural Numbers</title>
<script type="text/javascript">
3
srizanaryal.blogspot.com
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="darkblue" text="white">
<h1 align="center"> Sum of Natural Numbers </h1>
<hr>
<center><form>
<input type="button" value="Find Sum of Natural Numbers" onclick="sum()"/>
</form>
</center>
</body>
</html>
6.Write a javascript code block using arrays and generate the current date in words, this should
include the day, month and year.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Date Display</title>
<script type="text/javascript">
var
days=["First","second","third","fourth","fifth","sixth","seventh","Eighth","Ninth","Tenth","Eleventh",
"Twelfth","Thirteenth","Fourteenth","Fifteenth","Sixteenth","Seventeenth","Eighteenth","Ninet
eenth",
"Twentyeth","TwentyFirst","TwentySecond","TwentyThird","TwentyFourth","TwentyFifth",
"TwentySixth","TwentySeventh","TwentyEighth","TwentyNinth","Thirtyeth","ThirtyFirst"];
var months=["January","February","March","April","May","June","july","August","September",
"October","November","December"];
var year="Two Thousand Sixteen";
var dateObj=new Date();
var currMonth=dateObj.getMonth();
var currDate=dateObj.getDate();
var currYear=dateObj.getFullYear();
if(currYear=2016)
4
srizanaryal.blogspot.com
alert("Today's Date is:"+days[currDate-1]+""+months[currMonth]+""+year);
else
alert("Today's Date is:"+days[currDate-1]+""+months[currMonth]+""+currYear);
</script>
</head>
</html>
OR
To display the date.
<html>
<head>
<title> Display Date </title>
<script type="text/javascript">
var day_names=new
Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var month_names=new
Array("January","February","March","April","May","June","July","August","September","October","Nov
ember","December");
var d= new Date();
var curr_day=d.getDay();
var curr_month=d.getMonth();
var curr_year=d.getYear();
var curr_date=d.getDate();
var sp="";
if(curr_date==1 || curr_date==21 || curr_date==31)
{
sp="st";
}
else if(curr_date==2 || curr_date==22)
{
sp="nd";
}
else if(curr_date==3 || curr_date==23)
{
sp="rd";
}
else
{
sp="th";
}
document.write("<h1> <center>
<b>"+day_names[curr_day]+","+curr_date+"<sup>"+sp+"</sup>"+month_names[curr_month]+","+
curr_year+"</b></center></h1>");
</script>
</head>
<body>
</body>
5
srizanaryal.blogspot.com
</html>
7. Create a form for Student information. Write javascript code to find TOtal, Average,Result and
Grade.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Student Data Example</title>
<script type="text/javascript">
function showResults()
{
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(marks1>=40 && marks2>=40 &&marks3>=40)
{
if( avg>=75){
grade="A+";
result="Distinction"
}
else if(avg<75 && avg>=60){
grade="A";
result="First Class"
}
else if(avg<60 && avg>=50){
grade="B";
result="Second Class"
}
else{
grade="C";
result="Third class";
}
}
else
{
grade="D";
result="Fail";
}
6
srizanaryal.blogspot.com
document.write("<h2>Results</h2>");
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/>");
}
</script>
</head>
<body bgcolor="darkblue" text="white">
<form>
<table border="5">
<tr>
<td colspan="2" align="center">Student Details</td>
</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/><input type="button" value="View Results" onclick="showResults()"/>
</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.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
7
srizanaryal.blogspot.com
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>EMPLOYEE SALARY DETAILS</title>
<script type="text/javascript">
function showSalary(){
var empname=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;
var gross=basic+hra+da;
//pf is 13% of gross
var pf=gross*0.13;
//tax is 20% of gross
var tax=gross*0.2;
var deductions=pf+tax;
var netsalary=gross-deductions;
document.writeln("<table border='5' bgcolor='lightgreen' >");
document.writeln("<tr><td colspan='2' align='center'>Employee Salary Breakup
Details</td></tr>");
document.writeln("<tr><td>Emp Name:</td><td>"+empname+"</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 Basic):</td><td>"+pf+"</td></tr>");
document.writeln("<tr><td>Tax (20% of Basic):</td><td>"+tax+"</td></tr>");
document.writeln("<tr><td>Deductions (PF+TAX):</td><td>"+deductions+"</td></tr>");
document.writeln("<tr><td><b>Net Salary(Gross-Deductions):</b></td>");
document.writeln("<td><b>"+netsalary+"</b></td></tr>");
document.writeln("</table>");
}
</script>
</head>
<body bgcolor="darkblue" text="white">
<form>
<table border="5">
<tr><td colspan="2" align="center">EMPLOYEE DETAILS</td></tr>
<tr>
<td>Employee Name:</td>
<td><input type="text" id="empname"/></td>
</tr>
<tr>
8
srizanaryal.blogspot.com
<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 Details" onClick="showSalary()"/>
</form>
</body>
</html>
9.Create a form consists of a two Multiple choice lists and one single choice list.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> RESTAURANT DETAILS</title>
<script type="text/javascript">
function findCost(){
var major=document.getElementById("major");
var starters=document.getElementById("starters");
var soft=document.getElementById("soft");
var selectedItems="Item\t\t\tPrice\n.................\n";
var totalcost=0;
for(var i=0;i<major.options.length;i++){
var option=major.options[i];
if(option.selected==true){
var price=parseInt(option.value);
totalcost=totalcost+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);
totalcost=totalcost+price;
selectedItems=selectedItems+option.text+"\t\t"+price+"\n";
}
}
var softdrinkIndex=soft.selectedIndex;
if(softdrinkIndex!=-1){
9
srizanaryal.blogspot.com
var selectedSoftdrink=soft.options[soft.selectedIndex].text;
var price=parseInt(soft.options[soft.selectedIndex].value);
totalcost=totalcost+price;
selectedItems=selectedItems+selectedSoftdrink+"\t\t"+price+"\n";
}
selectedItems=selectedItems+"\n\nTotal Cost\t\t"+totalcost;
document.getElementById("ordereditems").value=selectedItems;
}
</script>
</head>
<body bgcolor="darkblue" text="white">
<form name="Menu Form">
<table border="10">
<tr><th colspan="2" align="center">
<h2>Restaurant Menu Details</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">Hyderabad Biriyani</option>
<option value="50">Roti with Curry</option>
</select>
</td>
</tr>
<tr>
<td>Starters</td>
<td><select id="starters" size="3" multiple="multiple">
<option value="80">Gobi Manchurian</option>
<option value="40">Veg Clear Soup</option>
<option value="30">Masala Papad</option>
</select>
</td>
</tr>
<tr>
<td>Soft Drinks</td>
<td><select id="soft" size="3">
<option value="20">Pepsi</option>
<option value="20">Coke</option>
<option value="30">Lime Soda</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<textarea id="ordereditems" rows="10" cols="40">
</textarea>
</td>
10
srizanaryal.blogspot.com
</tr>
<tr>
<td><input type="button" value="Find Total Cost" onclick="findCost()"/></td>
<td><input type="reset" value="Clear"/></td>
</tr>
</table>
</form>
</body>
</html>
10.Program to evaluate the mouse over.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mouse Over and Mouse Out</title>
<style type="text/css">
#image1{position:absolute; top:50px; left:50px; border:thin; visibility:visible;}
#image2{position:absolute; top:50px; left:50px; border:thin; visibility:hidden;}
</style>
<script type="text/javascript">
function changeImage()
{
var imageOne=document.getElementById("image1").style;
var imageTwo=document.getElementById("image2").style;
if (imageOne.visibility=="visible")
{
imageOne.visibility="hidden";
imageTwo.visibility="visible";
}
else
{
imageOne.visibility="visible";
imageTwo.visibility="hidden";
}
}
</script>
</head>
<body>
<form>
<img src="awe.jpg" alt="Image" id="image1" onmouseover="changeImage()"
onmouseout="changeImage()">
<img src="awe.jpg" alt="Image" id="image1" onmouseover="changeImage()"
onmouseout="changeImage()" >
</form>
</body>
11
srizanaryal.blogspot.com
</html>
12
srizanaryal.blogspot.com
