Scribd
Upload
141 views23 pages

WP Lab Final Programs

The document contains 10 JavaScript coding exercises involving forms and form validation: 1. A form to count the number of elements and validate all fields are filled. 2. A mathematical expression evaluator that takes input, evaluates it, and displays the result. 3. Calculates employee salary details like DA, HRA, PF, taxes, gross pay, deductions, and net pay. 4. Displays current date in words using arrays and includes day, month, and year.

Uploaded by

ABIN GEORGE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
141 views23 pages

WP Lab Final Programs

The document contains 10 JavaScript coding exercises involving forms and form validation: 1. A form to count the number of elements and validate all fields are filled. 2. A mathematical expression evaluator that takes input, evaluates it, and displays the result. 3. Calculates employee salary details like DA, HRA, PF, taxes, gross pay, deductions, and net pay. 4. Displays current date in words using arrays and includes day, month, and year.

Uploaded by

ABIN GEORGE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 23

Part A Programs

1.Create a form having number of elements. Write a java script code to count the number of elements in
a form.
<html>
<head>
<title>COUNT OF NUMBER OF ELEMENTS IN A FORM</title>
<script type="text/javascript">
function countElements()
{
alert("The number of elements in form1 are:"+document.form1.length);
}
</script>
</head>
<body bgcolor="lightgrey">
<form name="form1">
<pre>
Firstname:<input type="text" name="fname" value=""/><br/>
Lastname:<input type="text" name="lname" value=""/><br/><br/>
<b>Gender</b>
Male<input type="radio" name="rad" value="radio_button1"/>
Female<input type="radio" name="rad" value="radio+button2"/><br/>
<b>Education</b>
UnderGraduate<input type="checkbox" name="check1"/>
Graduate<input type="checkbox" name="check2" value="Check2"/>
PostGraduate<input type="checkbox" name="check3" value="Check3"/>
<input type="submit" value="Submit" onclick="countElements()"/>
</form>
</body>
</html>
Output:
2. Create a HTML form that has number of textboxes. When the form runs in the Browser fill in the
textboxes with data. Write a Javascript code that verifies that all textboxes has been filled, if a textbox has
been left empty, popup an alert indicating which textbox has been left empty.
<html>
<head>
<title>Contact 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 EmailID");
document.myForm.Email.focus() ;
return false;
}
if(document.myForm.Phone.value=="")
{
alert("Please provide your Phone Number");
document.myform.Phone.focus() ;
return false;
}
return true;
}
</script>
</head>
<body>
<center><h2>CONTACT FORM</h2>
<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"/></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" name="Phone"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Submit"/>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
Output:

3. Develop a HTML Form, which accepts any Mathematical expression. Write a JavaScript code to
evaluate the expression and display the result.
<html>
<head>
<title>Solution of Mathematical Expression</title>
<script type="text/javascript">
function calc()
{
document.frmExp.result.value=eval(document.frmExp.expr.value)
}
</script>
</head>
<body>
<form name="frmExp">
Enter a mathematical expression in the textbox, Click on Calculate button to display the result<br></br>
<table cell padding="4" cellspacing="0"height=100 width=200 bgcolor="lightgrey">
<tr>
<td><input type="text" size="20"name="expr"></td>
<td><input type="button" name="Button1" value="Calculate" onclick="calc()"></td>
</tr>
<tr>
<td><b>Result:</b><input type="text" size="20" name="result"></td>
<td><input type="reset" name="reset" value="Reset"></td>
</tr>
</table>
<p>Click on Reset button to enter another new expression.</p>
</form>
</body>
</body>
</html>

Output:

4. Dynamic stacking
<html>
<head>
<title>DYNAMIC STACKING OF IMAGES</title>
<style type="text/css">

#first{border-style:solid;position:absolute;top:20px;left:20px;width:100px;height:100px;background-
color:red;z-index:10}

#second{border-style:solid;position:absolute;top:30px;left:60px;width:100px;height:100px;background-
color:orange;z-index:5}

#third{border-style:solid;position:absolute;top:40px;left:100px;width:100px;height:100px;background-
color:yellow;z-index:0}
</style>
</head>
<body>
<p id="first"> First</p>
<p id="second"> Second</p>
<p id="third"> Third</p>
</body>
</html>

Output with z-index: Output without z-index:

5. Write a javascript code to find the sum of N natural numbers. (Use user-defined function).
<html>
<head>
<title>SUM OF N NATURAL NUMBERS</title>
<script type="text/javascript">
var num,n,s=0;
num=window.prompt("Enter a number","0");
n=parseInt(num);
if(n<=0)
{
alert("Enter a positive number");
}
document.write("<h1><center>Sum of "+n+"natural numbers is: ");
findsum(n);
document.write(s+"</center></h1>");
function findsum(n)
{
for(var i=0;i<=n;i++)
s=s+i;
}
</script>
</head>
<body bgcolor="powder blue">
</body>
</html>
Output:
6. Write a javascript code to find factorial of a number.

<html>
<head>
<title>Recursive factorial function</title>
<script type="text/javascript">
var num,n,f;
num=window.prompt("Enter the number to find factorial","0");
n=parseInt(num) ;
document.write("<h1><center>Factorial of "+n+" is ");
for(var i=0;i<=n;i++)
f=fact(n);
document.write("<i>"+f+"</i></center></h1>");
function fact(n)
{
if(n==1)
return 1;
else
return n*fact(n-1);
}
</script>
</head>
<body bgcolor="red"></body>
</html>

Output:

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

<html>
<head>
<title>CurrentDate</title>
<script type="text/javascript">
var dnames=new
Array("Sunday","Monday","Tuesday",Wednesday","Thursday","Friday","Saturday");
var mnames=new
Array("January","February","March","April","May","June","July","August","Septemeber",
"October","Novemeber","Decemeber");
var d=new Date();
var curr_day=d.getDay();
var curr_date=d.getDate();
var sup="";
if(curr_date==1||curr_date==21||curr_date==31)
{
sup="st";
}
else if(curr_date==2||curr_date==22)
{
sup="nd";
}
else if(curr_date==3||curr_date==23)
{
sup="rd";
}
else
{
sup="th";
}
var curr_month=d.getMonth();
var curr_year=d.getFullYear();
document.write("<h1><center>"+dnames[curr_day]+""+ curr_date+"<SUP>"+sup+"</SUP>"
+mnames[curr_month]+""+curr_year+"</center></h1>");
</script>
</head>
<body bgcolor="cyan">
</body>
</html>
Output:
8.Create a form for Student information. Write Javascript code to
Find Total, Average, Result and Grade.
<html>
<head>
<titele>Declaration of results of students</title>
<script>
function findResult()
{
var result="";
var grade="";
var studname=document.frmStudent.sname.value;
var m1=parseInt(document.frmStudent.mark1.value);
var m2=parseInt(document.frmStudent.mark2.value);
var m3=parseInt(document.frmStudent.mark3.value);
var m4=parseInt(document.frmStudent.mark4.value);
var m5=parseInt(document.frmStudent.mark5.value);
var m6=parseInt(document.frmStudent.mark6.value);
var total=(m1+m2+m3+m4+m5+m6);
var avg=Math.round(total/6);
if(m1<40||m2<40||m3<40||m4<40||m5<40||m6<40)
result="Fail";
else
{
var mm=avg;
if(mm>=80)
{
grade="A";
result="Distinction";
}
else if(mm>=60)
{
grade="B"
result="Firstclass";
}
else if(mm>=50)
{
grade="C";
result="Secondclass";
}
else if(mm>=40)
{
grade="D";
result="Pass";
}
else if(mm<50)
{
grade="F";
result="Fail";
}
}
document.write("<br/><pre>--------------------------------------------------------------------------
------------------<br/>");
document.write("<br/><h1>B.Sc.VSemester-RESULTSHEET </h1>");
document.write("<br/>-----------------------------------------------------------------------------------
---------<br/>");
document.write("<br/>StudentName :: <b>"+studname+"</b>");
document.write("<br/>TotalMarks :: <b>"+total+"/600"+"</b>");
document.write("<br/>AverageMarks :: <b>"+avg+"</b>");
document.write("<br/>Result :: <b>"+result+"</b>");
document.write("<br/>Grade :: <b>"+grade+"</b>");
document.write("<br/>-----------------------------------------------------------------------------------
---------</pre><br/>");
}
</script>
</head>
<body bgcolor="lightgray">
<form name="frmStudent">
<center><b><h1>STUDENT INFORMATION</h1></b></center><br/><br/>
<h2>Please fill in details:</h2>
<pre>
STUDENT NAME : <inputtype="text"name="sname"><br>
PHYSICS V : <inputtype="text"name="mark1"><br/>
PHYSICS VI : <inputtype="text"name="mark2"><br/>
MATHEMATICS V: <inputtype="text"name="mark3"><br/>
MATHEMATICS VI: <inputtype="text"name="mark4"><br/>
COMPUTER SCIENCE V: <inputtype="text"name="mark5"><br/>
COMPUTER SCIENCE: <inputtype="text"name="mark6"><br/>
</pre>
<input type="button" value="Submit" onclick="findResult();">
</form>
</body>
</html>
Output:
9. Create a form for Employee information. Write javascript code to find DA, HRA, PF, TAX, GrossPay,
Deduction and Net pay.
<html>
<head>
<title>EMPLOYEE INFORMATION</title>
<script>
function findSalary()
{
var empname=document.frmEmp.ename.value;
var edept=document.frmEmp.dept.value;
var basicpay=parseInt(document.frmEmp.basic.value);
var da,hra,tax,pf,grosspay,deductions,netpay;
da=basicpay*0.5;
hra=basicpay*0.15;
grosspay=basicpay+da+hra;
pf=grosspay*0.12;
tax=grosspay*0.1;
deductions=pf+tax;
netpay=grosspay-deductions;
document.write("<h1>EMPLOYEESALARYDETAILS</h1><br/></br>");
document.writeln("EmployeeName :<b>"+empname+"</b>></br>");
document.writeln("Basicpay :<b>"+basicpay+"</b></br>");
document.writeln("DearnessAllowance :<b>"+da+"</b></br>");
document.writeln("HouseRentAllowances:<b>"+hra+"</b></br>");
document.writeln("GrossSalary :<b>"+grosspay+"</b></br>");
document.writeln("Deductions :<b>"+deductions+"</b></br>");
document.writeln("NetSalary :<b>"+netpay+"</b>");
}
</script>
</head>
<body bgcolor="lightgrey">
<form name="frmEmp">
<center><b><h1>EMPLOYEE SALARY DETAILS</h1></b></center><br/><br/>
<h2>Enter Employee Name, Department and Basic Pay</h2>
<pre>
<font size="4">
<center><h1>EMPLOYEE SALARY DETAILS</h1></center>
EMPLOYEE NAME <input type="text" name="ename"><br/>
DEPARTMENT <input type="text" name="dept"><br/>
BASICPAY <input type="text" name="basic"><br/><br/>
</font>
</pre>
<input type="button" value="CalculateNetSalary" onclick="findSalary();">
</body>
</html>
Output:

10. Create a form consists of a two multiple choice lists and one single choice list.
1)Thefirstmultiplechoicelist,displaysthemajordishesavailable.
2)Thesecondmultiplechoicelist,displaysthestartersavailable.
3)The single choice list, displays the soft drinks available.
<html>
<head>
<title>Menu Driven Program</title>
<script>
function findCost()
{
var starter=document.getElementById("starter");
var main=document.getElementById("main");
var soft=document.getElementById("soft");
var selecteditem="Item\t\t\t\tPrice\n----------------------------------------------\n";
var total=0;
for(var i=0;i<starter.options.length;i++)
{
var choice=starter.options[i];
if(choice.selected==true)
{
var price=parseInt(choice.value);
total=total+price;
selecteditem=selecteditem+choice.text+"\t\t\t"+price+"\n";
}
}
for(var i=0;i<main.options.length;i++)
{
var choice=main.options[i];
if(choice.selected==true)
{
var price=parseInt(choice.value);
total=total+price;
selecteditem=selecteditem+choice.text+"\t\t\t"+price+"\n";
}
}
for(var i=0;i<soft.options.length;i++)
{
var choice=soft.options[i];
if(choice.selected==true)
{
var price=parseInt(choice.value);
total=total+price;
selecteditem=selecteditem+choice.text+"\t\t\t\t"+price+"\n";
}
}
selecteditem=selecteditem+"\n\n\nTotalCost\t\t\t"+total;
document.getElementById("display").value=selecteditem;
}
</script>
</head>
<body bgcolor="grey">
<br/><br/><br/><br/>
<form name="menuform">
<table border="10" width="550" align="center" bgcolor="orange">
<tr>
<th colspan="3" align="center">
<h2>Restaurant Menu Details</h2>
</th>
</tr>
<tr>
<td>Starters</td>
<td>Main Course</td>
<td>Soft Drinks</td>
</tr>
<tr>
<td>
<select id="starter" size="4" multiple="multiple">
<option value="85">Gobi Manchurian</option>
<option value="100">Corn Manchurian</option>
<option value="50">Masala Papad</option>
<option value="65">Tomato Soup</option>
</select>
</td>
<td>
<select id="main" size="4" multiple="multiple">
<option value="100">Veg.Pulao</option>
<option value="150">Jeera Rice</option>
<option value="120">Curry & Roti</option>
<option value="160">Veg.Biriyani</option>
</select>
</td>
<td>
<select id="soft" size="4" multiple="multiple">
<option value="35">Maaza</option>
<option value="25">Pepsi</option>
<option value="30">Fanta</option>
<option value="25">Soda</option>
</select>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<textarea id="display" rows="10" cols="70">
</textarea>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value="FindTotalCost" onclick="findCost();"/>
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="Clearall"/>
</td></tr>
</table>
</form>
</body>
</html>
Output:
Part B Programs
1.Write a HTML Program to display list of fruits, vegetables and cereals usingordered list.
<html>
<head>
<title>Ordered list</title>
</head>
<body bgcolor="red">
<h4>list of fruits</h4>
<ol type="A" start="A">
<li>Strawberry</li>
<li>Fig</li>
<li>Mango></li>
<li>Pineapple></li>
</ol>
<h4>list of vegetables</h4>
<ol type ="i" start="i">
<li>tomato</li>
<li>cauliflower</li>
<li>carrot</li>
<li>beans<li>
</ol>
<h4>list of cereals</h4>
<ol type="1" start="1">
<li>rice</li>
<li>jowar</li>
<li>groundnuts</li>
<ol>
</body>
</html>
Output:
2. Write a HTML Program to display list of fruits, vegetables and cereals using Unordered list.
<html>
<head>
<title>unOrdered list</title>
</head>
<body bgcolor="pink">
<h4>list of fruits</h4>
<ul type="disc">
<li>Strawberry</li>
<li>Fig</li>
<li>Mango</li>
<li>Pineapple</li>
</ul>
<h4>list of vegetables</h4>
<ul type ="square">
<li>tomato</li>
<li>cauliflower</li>
<li>carrot</li>
<li>beans<li>
</ul>
<h4>list of cereals</h4>
<ul type="circle">
<li>rice</li>
<li>jowar</li>
<li>groundnuts</li>
<ul>
</body>
</html>
Output:

3. Write a HTML Program to demonstrate Confirm Box.


<html>
<head>
<script type ="text/javascript">
function show_confirm()
{
var r =confirm ("Press a button");
if(r==true)
{
alert("We pressed OK!");
}

Else
{
alert("We Pressed Cancel!")
}
}
</script>
</head>
</body>
<input type="button"onclick="show_confirm()"value="Show confirm box"/>
</body>
</html>

Output:
4. Write a HTML Program to demonstrate Prompt Box.
<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Please enter your name","");
if(name!=null&&name!="")
{
document.write("Hello "+name+"! How are we today?");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_prompt()" value="Show prompt box"/>
</body>
</html>
Output:

5. Write a JavaScript program to execute Mouse Events.


<html>
<head><script>
function myFunction(element, clr)
{
element.style.color = clr;
}
</script>
</head>
<body>
<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Get the Mouse over this text</h1>
<h1 onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">
Click the text to change the color.<br/>A function, with parameters, is triggered when the mouse button is
pressed down, and again,<br/> with other parameters, when the mouse button is released.
</h1>
</body>
</html>
Output:

6. Write a JavaScript program to convert Lower Case to Upper Case.


<html>
<head>
<title>To convert the text to Uppercase</title>
<script type="text/javascript"> function change_case()
{
document.form1.type.value=document.form1.type.value.toUpperCase();
}
</script>
</head>
<body onLoad="form1.type.focus();">
<center><h1>To convert the character to Uppercase</h1></center>
<form name="form1" method="post">
Enter User ID<input type="text" name="type"value="">
<input type="button" value="Change to Upper" onclick="change_case();"></form>
</body>
</html>
Output:
7. Write a JavaScript program to generate Fibonacci series.
<html>
<head><title>Fibonacci Series</title></head>
<body>
<script type="text/javascript">
var var1 = 0;
var var2 = 1;
var var3;
var num = prompt("Enter the limit to generate fibonacci no",0); document.write(var1+"<br />");
document.write(var2+"<br />");
for(var i=3; i <= num;i++)
{
var3 = var1 + var2;
var1 = var2;
var2 = var3;
document.write(var3+"<br />");
}
</script>
</body>
</html>
Output:

8. Write a JavaScript program to find the reverse of a given number and check whether the given
number is Palindrome or not.
<html>
<head>
<script type="text/javascript">
function palin()
{
var rem,num,temp,rev=0;
num=document.getElementById("no_input").value;
temp=num;
while(num>0)
{
rem=num%10;
num=parseInt(num/10);
rev=rev*10+rem;
}
alert(rev);
if(temp==rev)
document.write("The Number is Palindraome");
else
document.write("The Number is not a Palindrome");
}
</script>
</head>
<body>
Enter any Number:
<input id="no_input">
<button onclick="palin()">Check</button></br></br>
</body>
</html>
Output:

9. Write a javascript code to demonstrate the use of addEventListener.


<html>
<head>
<style>
.divstyle{
display:table-cell;
border: 2px solid black;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id = "div1" class="divstyle">
div1
<div id = "div2" class="divstyle">
div2
<div id = "div3" class="divstyle">
div3
<script>
var divs = document.getElementsByTagName("div");
for(var i = 0; i<divs.length; i++){
divs[i].addEventListener("click",clickhandler,true );
}
function clickhandler() {
alert(this.getAttribute("id") + "event got handled");
}
</script>
</body>
</html>
Output:

10. Create a page with dynamic effects. Write a code to include layers and Basic animation.
<html>
<head>
<title> Basic Animation </title>
<style>
#layer1{position:absolute;top:50px;left:50px;}
#layer2{position:absolute;top:50px;left:250px;}
#layer3{position:absolute;top:50px;left:450px;}
</style>
<script type="text/javascript">
function moveImage(layer)
{
var top=window.prompt("Enter the top value");
var left=window.prompt("Enter the left value");
document.getElementById(layer).style.top=top+'px';
document.getElementById(layer).style.left=left+'px';
}
</script>
</head>
<body>
<div id="layer1"> <img src="car.jfif" onclick="moveImage('layer1')" alt="My Image"/></div>
<div id="layer2"> <img src="car.jfif" onclick="moveImage('layer2')" alt="My Image"/></div>
<div id="layer3"> <img src="car.jfif" onclick="moveImage('layer3')" alt="My Image"/></div>
</body>
</html>
Output:

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