RNS FIRST GRADE COLLEGE
(Affiliated to Bangalore University and NAAC Accredited with ‘A’ Grade)
Dr. Vishnuvardhan Road, Channasandra, R R Nagara, Bengaluru – 560 098.
WEB PROGRAMMING
LAB MANUAL
1
1. Create a form with the elements of Textboxes, Radio buttons,
Checkboxes, and so on. Write JavaScript code to validate the format in
email, and mobile number in 10 characters, If a textbox has been left
empty, popup an alert indicating when email, mobile number and textbox
has been left empty.
<html>
<head>
<title>Form Validation</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 TextBoxes are Empty: \n" +myArray);
return false;
}
return true;
}
function validate_mobile()
{
const myInput = document.myForm.mob.value;
2
if(myInput.length != 10)
{
alert('10 digit mobile number is required !!');
return false;
}
return true;
}
function validateEmail()
{
var data = document.myForm.email.value;
var atSign = data.indexOf("@");
var dotSign = data.indexOf(".");
if (atSign < 1 || dotSign < atSign+2 || dotSign+2 >= data.length)
{
alert("Please add @ and . in your Email id !!");
return false;
}
return true;
}
</script>
<body bgcolor="Pink" align="left">
<form name="myForm" onsubmit="return (validate() &&
validate_mobile() && validateEmail())">
<font size="8"><b>Student Information Form
</font><br/><br/><br/>
<font size="5"> Name: <input type="text" name="Name"
/><br/><br/>
3
Password: <input type="password" name="Password"
maxlength=15 /><br/><br/>
Address: <textarea name="Address" cols="30"
rows="5"></textarea><br/></br>
Sex: <input type="radio" name="Gender" /> Male
<input type="radio" name="Gender" /> Female <br/><br/>
Student <input type="Checkbox" name="checkbox"
checked="checked" /><br/><br/>
Email Id: <input type="text" name="Email"
id="email"/><br/><br/>
Mobile_Num: <input type="number" name="Phno" id="mob"
placeholder="+91##########"/><br/><br/>
<input type="submit" value="Submit" /> </font></b>
</form>
</body>
</html>
OUTPUT:
4
2. Develop an HTML Form, which accepts any Mathematical expression.
Write JavaScript code to Evaluate the expression and Display the result.
<html>
<head>
<title> Expression Evaluation </title>
<script type="text/javascript">
function my_expr()
{
try
{
var enteredExpr=document.getElementById("expr").value;
document.getElementById("result").value = eval(enteredExpr);
}
catch
{
alert("Give a Valid Regular Expression!!");
}
}
</script>
</head>
<body bgcolor="olive">
<h1> Evaluating the Mathematical Expression and Displaying Result </h1>
<form name="myForm">
<br/><br/>
<b><h2>Enter Any Valid Expression : </b><input type="text" id="expr"
/></h2><br/><br/>
<input type="button" value="Evaluate" onclick="my_expr()" />
<br/><br/>
5
<b><h2>Result of the Expression : </b><input type="text" id="result"
/></h2> <br/><br/>
</form>
</body>
</html>
OUTPUT:
6
3. Create a page with dynamic effects. Write the code to include layers and
basic animation.
<html>
<head>
<title> Basic Animation </title>
<style>
#layer1 {position:absolute;top:80px;left:150px;}
#layer2 {position:absolute;top:130px;left:450px;}
#layer3 {position:absolute;top:180px;left:750px;}
</style>
<script type="text/javascript">
function move_image(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="Tan">
<h3> Creating Dynamic Effects with Basic Animation </h3>
<div id="layer1"><img src="images1.jpg"
onclick="move_image('layer1')" alt="My First Image." /></div>
7
<div id="layer2"><img src="images2.jpg"
onclick="move_image('layer2')" alt="My Second Image." /></div>
<div id="layer3"><img src="images3.jpg"
onclick="move_image('layer3')" alt="My Third Image." /></div>
</body>
</html>
OUTPUT:
8
4. Write a JavaScript code to find the sum of N natural Numbers.
(Use user-defined function).
<html>
<head>
<title> Sum of Natural Numbers </title>
<script type="text/javascript">
function sum1()
{
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="LightYellow">
<br/><br/>
<h2> Sum of 'N' Natural Numbers </h2>
<form>
<input type="button" value="Find Sum of Natural Numbers"
onclick="sum1()" />
</form>
</body>
</html>
9
OUTPUT:
10
5.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> Date Display </title>
<script type="text/javascript">
var days = ["zero",
"First","Second","Third","Fourth","Fifth","Sixth","Seventh","Eighth","Ninth","
Tenth","Eleventh","Twelfth",
"Thirteenth","Fourteenth","Fifteenth","Sixteenth","Seventeenth","Eighteenth","
Nineteenth","Twentyeth",
"TwentyFirst","TwentySecond","TwentyThird","TwentyFourth","TwentyFifth",
"TwentySixth","TwentySeventh","TwentyEighth","TwentyNinth","Thirtyeth","
ThirtyFirst"];
var months =
["January","February","March","April","May","June","July","August","Septem
ber","October","November","December"];
var year = "Two Thousand Twenty Three";
var dateObj = new Date();
var currMonth = dateObj.getMonth();
var currDate = dateObj.getDate();
var currYear = dateObj.getFullYear();
if(currYear == 2022)
alert("Today's Date is : "+days[currDate]+"
"+months[currMonth]+""+year);
11
else
alert("Today's Date is : "+days[currDate]+"
"+months[currMonth]+""+currYear);
</script>
</head>
<body bgcolor="teal">
</body>
</html>
OUTPUT:
12
6. Create a form for Student Information. Write Javascript code to find
Total, Average, Result and Grade.
<html>
<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(avg>=60)
{
grade="A";
result="First Class";
}
else if(avg<60 && avg>=50)
{
grade="B";
result="Second Class";
}
13
else if(avg<50 && avg>=40)
{
grade="C";
result="Third Class";
}
else
{
grade="D";
result="Fail";
}
document.writeln("<h2>Results</h2>");
document.writeln("<b>Name :"+name+"</b><br/><br/>");
document.writeln("<b>Class :"+cls+"</b><br/><br/>");
document.writeln("<b>Total Marks :"+total+"</b><br/><br/>");
document.writeln("<b>Average :"+avg+"</b><br/><br/>");
document.writeln("<b>Grade :"+grade+"</b><br/><br/>");
document.writeln("<b>Result :"+result+"</b><br/><br/>");
}
</script>
</head>
<body bgcolor="peachpuff">
<form>
<table border="5">
<tr><th> Student Details </th></tr>
14
<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>
15
OUTPUT:
16
7.Create a form for Employee Information. Write Javascript code to find
DA, HRA, PF, TAX, Gross pay, Deduction and Net_pay.
<html>
<head>
<title> Employees 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;
17
document.writeln("<table border='5'>");
document.writeln(" <tr> <th> Employee Salary Breakup Details </th>
</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 Gross) :
</td><td>"+pf+"</td></tr>");
document.writeln("<tr> <td> Tax(20% of Gross) :
</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>
18
<body bgcolor="coral">
<form>
<table border="5">
<tr><th> Employee Details </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 Details"
onclick="showSalary()" />
</form>
</body>
</html>
19
OUTPUT:
20
