Scribd
Upload
46 views

B.SC (PMCss List

The document contains 8 sections that provide code examples for various JavaScript functions and concepts: 1. Counts the number of elements in a HTML form 2. Validates that textboxes in a form are filled out and alerts which are empty 3. Evaluates a mathematical expression entered in a form and displays the result 4. Includes layers and basic animation effects on a page 5. Finds the sum of the first N natural numbers using a user-defined function 6. Generates the current date in words using arrays 7. Calculates student's total, average, grade and result from marks entered in a form 8. Calculates employee's salary details like DA, HRA, PF, tax, gross

Uploaded by

Roja 197
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
46 views

B.SC (PMCss List

The document contains 8 sections that provide code examples for various JavaScript functions and concepts: 1. Counts the number of elements in a HTML form 2. Validates that textboxes in a form are filled out and alerts which are empty 3. Evaluates a mathematical expression entered in a form and displays the result 4. Includes layers and basic animation effects on a page 5. Finds the sum of the first N natural numbers using a user-defined function 6. Generates the current date in words using arrays 7. Calculates student's total, average, grade and result from marks entered in a form 8. Calculates employee's salary details like DA, HRA, PF, tax, gross

Uploaded by

Roja 197
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Part – A

1. Create a form having number of elements (Textboxes, Radio buttons,


Checkboxes, and so on). Write JavaScript 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 Form Elements</title>
<script type="text/javascript">

function countFormElements()
{
alert("The number of form elements are :" +document.myForm.length);
}

</script>
</head>

<body>
<form name="myForm">
Name: <input type="text"/> <br><br>
Password: <input type="password"/> <br><br>
Address: <textarea id="emailBody" cols="50" rows="10"></textarea> <br><br>
Sex: <input type="radio" name="gender"/> Male
<input type="radio" name="gender"/> Female <br><br>
Newsletter <input type="chechbox" checked="checked"/> <br><br>
<input type="button" value="Send message" onclick="countFormElements()"/>
</form>
</body>
</html>
Output:

2. Create a HTML form that has number of Textboxes. When the form runs in
the Browser fill the textboxes with data. Write JavaScript code that verifies
that all textboxes has been filled. If a textboxes has been left empty, popup an
alert indicating which textbox has been left empty.

<html>
<?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">

<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 Boxes are Empty: \n"+myArray);
}
}
</script>
</head>

<body>
<form name="myForm" onsubmit="validate()">
Name: <input type="text" name="Name"/> <br><br>
Class: <input type="text" name="Class"/> <br><br>
Age: <input type="text" name="Age"/> <br><br>
<input type="submit" value="Send message"/>
</form>
</body>
</html>
Output:
3. Develop a HTML Form, which accepts any Mathematical expression. Write
JavaScript code to Evaluates the expression and Displays the result.

<?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 valuate()
{
var enteredExpr = document.getElementById("expr").value;
document.getElementById("result").value=eval(enteredExpr);
}
</script>

</head>
<body>

<form name="myForm">

Enter Any Valid Expression: <input type="text" id="expr"/> <br><br>


<input type="button" value="Evaluate" onclick="valuate()"/> <br><br>
Result of the Expression: <input type="text" id="result"/> <br><br>
</form>
</body>
</html>
Output:
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/xhtml1/DTD/xhtml1-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>
<div id="layer1"><img src="C:\Users\Public\Pictures\Sample
Pictures\Penguins.jpg" onclick="moveImage('layer1')" alt="My Image"/></div>
<div id="layer2"><img src="D:\bird.jpg" onclick="moveImage('layer2')"
alt="My Image"/></div>
<div id="layer3"><img src="D:\bird.jpg" onclick="moveImage('layer3')"
alt="My Image"/></div>
</body>
</html>
Output:
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/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<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>
<form>
<input type="button" value="Find sum of Natural Numbers"
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.

<?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","


Fiveth","Sixth","Seventh","Eighth","Ninth","Tenth","Eleventh","Twelveth","Thirte
enth","Fourteenth","Fifteenth","Sixteenth","Seventeenth","Eighteenth","Nineteenth"
,"Twentyeth","TwentyFirst","TwentySecond","TwentyThird","Twentyfourth","Twe
ntyFifth","TwentySixth","TwentySeventh","TwentyEighth","TwentyNinth","Thirty
eth","ThirtyFirst"];
var months =
["January","February","March","April","May","June","July","August","September",
"October","November","December"];
var year = "TwoThousandTwentytwo";
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-1] +" - "+months[currMonth]+" -
"+year);
else
alert("Today's date is : "+days[currDate-1] +" - "+months[currMonth]+" -
"+currYear);

</script>
</head>
</html>
Output:

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(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("<h4>Results</h4>");
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>
<form>
<table border="5">
<tr><th colspan="2">Student Details</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 />
<input type="button" value="View Result" onclick="showResults()"/>
</form>
</body>
</html>

Output:

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"
"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);
var hra = basic*0.4;
var da = basic*0.6;
var gross = basic+hra+da;
var pf = gross*0.13;
var tax = gross*0.2;
var deductions = pf+tax;
var netsalary = gross-deductions;

document.write("<table border='5'>");
document.write("<tr><th colspan='2'> Employee Salary Breakup
Details</th></tr>");
document.write("<tr><td> Emp Name </td><td>"+empname+"</td></tr>");
document.write("<tr><td> Emp No. </td><td>"+empno+"</td></tr>");
document.write("<tr><td> Basic Salary </td><td>"+basic+"</td></tr>");
document.write("<tr><td> HRA </td><td>"+hra+"</td></tr>");
document.write("<tr><td> DA </td><td>"+da+"</td></tr>");
document.write("<tr><td> Gross Salary </td><td>"+gross+"</td></tr>");
document.write("<tr><td> PF </td><td>"+pf+"</td></tr>");
document.write("<tr><td> Tax </td><td>"+tax+"</td></tr>");
document.write("<tr><td> Deductions </td><td>"+deductions+"</td></tr>");
document.write("<tr><td><b> Net Salary(Gross-Deductions)</b></td>");
document.write("<td><b>"+netsalary+"</b></td></tr>");
document.write("</table>");

}
</script>
</head>

<body>
<form>
<table border="5">
<tr><th colspan="2">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>

Output:

9. Create a web page using two image files, which switch between one another as
the mouse pointer moves over the image. Use the on Mouse Over and on Mouse
Out event handlers

<?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 mouseOver()
{
document.getElementById("b1").src="rose123.png";
}
function mouseOut()
{
document.getElementById("b1").src="rose1.png";
}
</script>
</head>

<body align="middle">
<b><h1><center>Mouse Events</center></h1></b>
<center><a><img border=3 height="400" width="400" alt="image switching"
align="middle"
src="rose123.png" id="b1"
onmouseover="mouseOver()" onmouseout="mouseOut()"/></a></center>
</body>
</html>

Output:

You might also like