Scribd
Upload
44 views

Software Engineer

This lab manual contains 20 programs to be developed using JavaScript for a Web Programming course. It includes programs to: 1. Count the number of elements in a HTML form using JavaScript. 2. Validate that all textboxes in a HTML form are filled and indicate empty textboxes. 3. Evaluate a mathematical expression entered in a HTML form and display the result. 4. Include layers and basic animation on a web page using JavaScript. The lab manual provides the topic, program number, page number and instructions for each program to be developed. It also includes general instructions for students regarding lab protocols.

Uploaded by

៚Rohan paul༆
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
44 views

Software Engineer

This lab manual contains 20 programs to be developed using JavaScript for a Web Programming course. It includes programs to: 1. Count the number of elements in a HTML form using JavaScript. 2. Validate that all textboxes in a HTML form are filled and indicate empty textboxes. 3. Evaluate a mathematical expression entered in a HTML form and display the result. 4. Include layers and basic animation on a web page using JavaScript. The lab manual provides the topic, program number, page number and instructions for each program to be developed. It also includes general instructions for students regarding lab protocols.

Uploaded by

៚Rohan paul༆
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 62

Lab Manual

Bachelor of Computer Applications

Course: BCA
Course Code: BCA604P - Web Programming
Semester: VI
Scheme: CBCS scheme
Year of Implementation: 2014
List of Programs
SL. Page
Title of Programs
No. No.
Create a form having number of elements (Textboxes, Radio
1. buttons, Checkboxes, and so on). Write JavaScript code to count 5
the number of elements in a form.
Create a HTML form that has number of Textboxes. When the
form runs in the Browser fill the textboxes with data. Write
2. JavaScript code that verifies that all textboxes has been filled. If a 7
textboxes has been left empty, popup an alert indicating which
textbox has been left empty.
Develop a HTML Form, which accepts any Mathematical
3. expression. Write JavaScript code to Evaluates the expression and 9
Displays the result.
4. Create a page with dynamic effects. Write the code to include 11
layers and basic animation.
5. Write a JavaScript code to find the sum of N natural Numbers. (Use user- 13
defined function)
6. Write a JavaScript code block using arrays and generate the current date in 16
words, this should include the day, month and year.
7. Create a form for Student information. Write JavaScript code to find Total, 17
Average, Result and Grade.
8. Create a form for Employee information. Write JavaScript code to find DA, 21
HRA, PF, TAX, Gross pay, Deduction and Net pay.
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.
9. The selected items from all the lists should be captured and displayed in a 25
Text Area along with their respective costs. On clicking the ‘Total Cost’ button,
the total cost of all the selected items is calculated and displayed at the end in
the Text Area. A ‘Clear’ button is provided to clear the Text Area.

Create a web page using two image files, which switch between one another as
10. the mouse pointer moves over the images. Use the onMouseOver and 31
onMouseOut event handlers.

2
Part B
11. Java Script To Perform All Arithmatic Operation 33

12. Java Script To Check Whether A Given Number Is Prime Or Not 38

13. Java script to search an element in an array of size “n” 41

14. Java script to compute the GCD of 2 numbers using function. 45

15. Java script to find the second largest number in an array. 46

16. Java Script To Check Whether The Given Integer Is Palindrome Or Not 49

17. Java script to illustrate different in-built string functions. 51

18. Write a java script that illustrates the dynamic stacking of images 52

Write XHTML and JavaScript, script that illustrate the DOM2 event model
19. which allows the user to drag and drop words to complete a paragraph (create 56
atheist 10 words).
Develop and demonstrate the use of javascript, a XHTML document that
illustrates the PAN (the valid format is: A digit from 1 To 4 followed by two
upper-case characters followed by two digits Followed by two upper-case
20. characters followed by three digits; no Embedded spaces allowed) of the user. 59
Event handler must be Included for the form element that collects this
information to validate the input. Messages in the alert windows must be
produced when errors are detected.

3
Instructions to Students

1. Students should carry observation book to the lab.


2. Students should submit the record books on timely basis.
3. Mobile phones are strictly prohibited in lab.
4. Students should carry their own stationaries to lab.
5. Students should take faculty signature for observation copy.
6. Before leaving the lab students should Shut down the Computer
System and arrange the chairs properly.

4
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.

<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=pink>
<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. Sex:<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>

5
6
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.

<!-- 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=pink>
7
<h1 align=center> 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>

8
3. Develop a HTML Form, which accepts any Mathematical expression.
Write JavaScript code to Evaluates the expression and Displays the
result.

Html Code:
<!-- 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>

9
</head>
<body bgcolor=pink>
<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>

10
4. Create a page with dynamic effects. Write the code to include layers
and basic animation.

Html Code:
<html>
<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=pink>
<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>

11
</body>
</html>

12
5. Write a JavaScript code to find the sum of N natural Numbers. (Use
user-defined function)

Html Code:
<!-- 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);
}

13
</script>
</head>
<body bgcolor=pink>
<h1 align=center> Finding Sum of N Natural Numbers </h1>
<hr>
<form align=center>
<input type="button" value="Click Here " onclick="sum()"/>
</form>
</body>
</html>

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

<!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">
<html>
<head>
<!-- Program:7
Write a javascript code block using arrys and generate the current date in
words, this should include the day,month and year. -->
<title>Current date</title>
</head>
<script type="text/javascript">
var d_names=new
Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday",
"Saturday");
var m_names=new
Array("January","February","March","April","May","June","July","August","
September","October","November","December");
var d=new Date();
var curr_day=d.getDay();
var curr_date=d.getDate();
var curr_month=d.getMonth();
var curr_year=d.getFullYear();
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";
document.write("<h1><center>"+d_names[curr_day]+" " +curr_date
+"<sup>"+sup+"</sup>"+m_names[curr_month]+ "
"+curr_year+"</center></h1>");
</script>
<body bgcolor="cyan">
</body>

16
</html>

7. 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);

17
var marks3=parseInt(document.getElementById("sub3").value);
var total=marks1+marks2+marks3;
var avg=total/3;
var grade,result;
if(marks1 < 35 || marks2 < 35 || marks3 < 35)
{
grade="D";
result="Failed";
}
else 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("<h2>Results</h2>");

18
document.write("<b>Name: "+name+"</b><br/><br/>");
document.write("<b>Class :"+cls+"</b><br/><br/>");
document.write("<b>TotalMarks :"+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=pink>
<form>
<table border="5">
<tr><th><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>

19
<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>

20
8. Create a form for Employee information. Write JavaScript code to find
DA, HRA, PF, TAX, Gross pay, Deduction and Net pay.

<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;
21
// 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>");

22
document.writeln("<tr><td>Net Salary (Gross - Deductions) : </td>
<td>"+netsalary+"</td></tr>");
document.writeln("</table>");
document.write("</body>");

</script>
<body bgcolor="yellow")
<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>

23
</html>

24
9. Create a form consists of a two Multiple choice lists and one single choice list,
 The first multiple choice list, displays the Major dishes available.
 The second multiple choice list, displays the Starters available.
 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 the
selected items is calculated and displayed at the end in the Text Area. A ‘Clear’ button is
provided to clear the Text Area.
<html>
<head>
<title> AIMS BHM 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++)

25
{
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=navyblue text=red>
<h1 align=center> AIMS BHM Restaurant </h1>
<hr>
<form name="Menu Form">
<table border=10 align=center>
<tr> <th colspan=2 align=center>
<h2> Items Menu</h2> </th>

26
</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>

27
<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>

28
29
30
Program 10: Create a web page using two image files, which switch between one another as
the mouse pointer moves over the images. Use the onMouseOver and onMouseOut event
handlers.

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

31
<body bgcolor="orange" text=blue>
<h1 align = center> Mouse Events </h1>
<hr>
<form >

<img src="ball.jpg" id="image1" onMouseOver="changeImage()"


onMouseOut="changeImage()"></img>

<img src="aimsihe.jpeg" id="image2" onMouseOver="changeImage()"


onMouseOut="changeImage()"></img>
</form>
</body>
</html>

32
Program B1: JAVA SCRIPT TO PERFORM ALL ARITHMATIC OPERATION

<html>
<head>
<title> Arithmatic Operation </title>
<script type="text/javascript">
var n1,n2,r;
function add()
{
n1=document.myform.n1.value;
n2=document.myform.n2.value;
n1=parseFloat(n1);
n2=parseFloat(n2);

33
r=n1+n2;
document.myform.result.value=r;
}
function sub()
{
n1=document.myform.n1.value;
n2=document.myform.n2.value;
n1=parseFloat(n1);
n2=parseFloat(n2);
r=n1-n2;
document.myform.result.value=r;
}
function mul()
{
n1=document.myform.n1.value;
n2=document.myform.n2.value;
n1=parseFloat(n1);
n2=parseFloat(n2);
r=n1*n2;
document.myform.result.value=r;
}
function divide()
{
n1=document.myform.n1.value;
n2=document.myform.n2.value;
n1=parseFloat(n1);
n2=parseFloat(n2);
r=n1/n2;
document.myform.result.value=r;
}

34
</script>
</head>
<body bgcolor="magenta")
<form name="myform">
<h1 align="center"> Arithmatic Operations</h1>
<hr color="red">
<center><u>Enter a number in each text box </u><br><br>
Number 1:<input type="text" name="n1" value=""> <br><br>
Number 2:<input type="text" name="n2" value=""> <br><br>
<input type="button" value="Add" onClick="add()">
<input type="button" value="Subtract" onClick="sub()">
<input type="button" value="Multiply" onClick="mul()" >
<input type="button" value="Divide" onClick="divide()"><br><br>
<font color="red">Result is:
<input type="text" name="result" value=""></center></font>
</form>
</body>
</html>

35
36
37
Program B2: JAVA SCRIPT TO CHECK WHETHER A GIVEN NUMBER IS PRIME
OR NOT
<html>
<head>
<title> To check for a prime number </title>
<script type="text/javascript">
function p()
{
var n,i,flag=true;
n=document.myform.n.value;
n=parseInt(n)
for(i=2;i<=n-1;i++)
if(n%i==0)
{
38
flag=false;
break;
}
if(flag==true)
alert(n + " is prime");
else
alert(n + " is not prime");
}
</script>
</head >
<body bgcolor ="violet" >
<center>
<h1> To check whether a given number is prime or not </h1>
<hr color="red">
<form name="myform">
Enter the number: <input type="text" name=n
value=""><br><br>
<input type="button" value="Check" onClick="p()"><br>
</form>
</center>
</body>
</html>

39
40
PROGRAM #3:JAVA SCRIPT TO SEARCH AN ELEMENT IN AN ARRAY OF SIZE “N”
<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var n=document.frm.text1.value;
if( n == "")
{
alert("Please enter the array size");
}
else
{

41
var a=new Array();
var temp;
for(i=0;i<n;i++)
{
var num=prompt("Please enter a number"," ");

document.frm.arrayTxt.value=document.frm.arrayTxt.value+num+"\n";
a[i]=parseInt(num);
}
var flag=0;
var search=prompt("Enter the element to be searched ","");
for(i=0;i<n;i++)
if(a[i]==search)
{
flag=1;
p=i+1;
}
if(flag==1)
alert("Element " + search + " found at position "
+p);
else
alert("Sorry!, Element " + search + " not found ");
document.frm.text1.value="";
document.frm.arrayTxt.value="";
}
}
</script>
</head>
<body>
<form name="frm">

42
<center>
<h3>To find an element in a given array </h3>
<hr color="red">
Enter the array size : <input type="text"
name="text1"><br><br>
<input type="button" onclick="show_prompt()"
value="Submit"> <br><br>
<textarea name="arrayTxt" rows="10"
cols="4"></textarea><br>
</center>
</form>
</body>
</html>

43
44
PROGRAM #4:JAVA SCRIPT TO COMPUTE THE GCD OF 2 NUMBERS USING
FUNCTION.
<html>
<head>
<script type="text/javascript">
function gcd()
{
var x,y;
x=parseInt(document.myform.n1.value);
y=parseInt(document.myform.n2.value);
while(x!=y)
{
if(x>y)
x=x-y;
else
y=y-x;
}
document.myform.result.value=x;
}
</script>
</head>
<body>
<h1 align="center"> Program to calculate gcd of two numbers </h1>
<hr color="red">
<center>
Enter two numbers :
<form name="myform">

Number 1 : <input type="text" name="n1" value="">


<br> <br>

45
Number 2 : <input type="text" name="n2" value="">
<br> <br>

<input type="button" value="Get GCD" onClick="gcd()">


<br> <br>

GCD is : <input type="text" name="result" value="">


</form>
</center>
</body>
</html>

PROGRAM #5:JAVA SCRIPT TO FIND THE SECOND LARGEST NUMBER IN AN


ARRAY.
<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var n=document.frm.text1.value;
if( n == "")
{

46
alert("Please enter the array size");
}
else
{
var a=new Array();
var temp;
for(i=0;i<n;i++)
{
var num=prompt("Please enter a number"," ");

document.frm.arrayTxt.value=document.frm.arra
yTxt.value+num+"\n";
a[i]=parseInt(num);
}
var large=a[0];
for(i=1;i<n;i++) if(a[i]>large) large=a[i];
var slarge=a[0]; for(i=1;i<n;i++) if(a[i]>slarge &&
a[i]!=large)
slarge=a[i];

alert("The second largest element in the given


array is "+slarge);

document.frm.text1.value="";
document.frm.arrayTxt.value="";
}
}
</script>
</head>
<body>
<form name="frm">

47
<center>
<h1>To find second largest element in a given array </h1>

<hr color=”red”>
Enter the array size : <input type="text"
name="text1"><br><br>

<input type="button" onClick="show_prompt()"


value="Submit"> <br><br>

<textarea name="arrayTxt" rows="10"


cols="4"></textarea><br>
</center>
</form>
</body>
</html>

48
PROGRAM #6: JAVA SCRIPT TO CHECK WHETHER THE GIVEN INTEGER IS
PALINDROME OR NOT
<html>
<head>
<script type="text/javascript">
function isPalindrome()
{
var num=document.frm.text1.value;
if(num == "")
{
alert("Please enter the number");
}
else
{
var digit;
var rev = 0;
var n = num;
while (num!=0)
{
digit = num % 10;
rev = (rev * 10) + digit;
num = num / 10;
num = parseInt(num);
}
if( n == rev)
alert(" Integer is palindrome ");
else
alert(" Integer is not palindrome ");
document.frm.text1.value="";
}

49
}
</script>
</head>
<body>
<form name="frm">
<h1 align="center">To check whether a number is palindrome or
not</h1>

<hr color="red">
<center>
Enter a number:
<input type="text" name="text1"> <br><br>

<input type="button" value="Check Palindrome"


onclick="isPalindrome()">
</center>
</form>
</body>
</html>

50
PROGRAM #7: JAVA SCRIPT TO ILLUSTRATE DIFFERENT IN-BUILT STRING
FUNCTIONS.
<html>
<body>
<script type="text/javascript">
var str="Hello World";
document.write("<center>");
document.write("<h1> Example for String Functions </h1> ");
document.write("<hr color=red>");
document.write(str.big()+"<br>");
document.write(str.small()+"<br>");
document.write(str.bold()+"<br>");
document.write(str.italics()+"<br>");
document.write(str.fixed()+"<br>");
document.write(str.strike()+"<br>");
document.write(str.sup()+"<br>");
document.write(str.sub()+"<br>");
document.write(str.blink()+"<br>");

51
document.write(str.link("p1.html")+"<br>");
document.write(str.fontcolor("green")+"<br>");
document.write(str.fontsize(6)+"<br>");
document.write("</center>");
</script>
</body>
</html>

Program# 08: Write a java script that illustrates the dynamic stacking of images
Stack.html
<html >
<head>
<title>Stacking Paragraphs</title>
<style type="text/css">
.para1
{
border: solid thick #C0C0C0;

52
padding: 1in;
width:180px;
background-color:#0000D0;
color:white;
position:absolute;
top:70px;
left:4in;
z-index:1;
}
.para2
{
border: solid thick #808000;
padding: 1in;
width:180px;
background-color:red;
color:white;
position:absolute;
top:105px;
left:5in;
z-index:2;
}
.para3
{
border: solid thick #00ffff;
padding: 1in;
width:180px;
background-color:green;
color:white;
position:absolute;
top:140px;

53
left:6in;
z-index:3;
}
.display
{
font-size:25pt;
color:blue;
text-align:center;
}
p:hover{background-color:rgb(250,200,150);font-
size:25px;color:white;};
</style>
<script type="text/javascript">
var stack1="stack1";
function move(curStack)
{
Var oldStack=document.getElementById(stack1).style;
oldStack.zIndex="0";
var newStack=document.getElementById(curStack).style;
newStack.zIndex="10";
stack1=document.getElementById(curStack).id;
}
</script>
</head>
<body>
<h2 class="display">Stacking of Paragraphs on top of each
other</h2>
<p class="para1" id="stack1" onmouseover="move('stack1')">
Coconut City - Tumkur
</p>

54
<p class="para2" id="stack2" onmouseover="move('stack2')">
Garden City - Bangalore
</p>
<p class="para3" id="stack3" onmouseover="move('stack3')">
Palace City - Mysore
</p>
</body>
</html>

55
Program # 9: Write XHTML and JavaScript, script that illustrate the DOM2 event
model which allows the user to drag and drop words to complete a paragraph
(create atheist 10 words).

dragNDrop.html
<html>
<head>
<title>Drag and Drop</title>
<script type = "text/javascript" src="dragNDrop.js">

56
</script>
</head>
<body>
<h3>Arrange the following subjects of VI Semester according to subject
codes</h3>

<h3>BCA601.<br>BCA602.<br>BCA603.<br>BCA604.<br>BCA604P.<br>BCA60
5.<br></h3>
<p>
<span style = "position: absolute; top:200px; left:100px;
background-color:yellow;" onmousedown="grabber(event);">
TOC
</span>
<span style = "position: absolute; top:200px; left:200px;
background-color:yellow;" onmousedown="grabber(event);">
SP
</span> <span style = "position: absolute; top:200px; left:300px;
background-color:yellow;" onmousedown="grabber(event);">
CNS
</span>
<span style = "position: absolute; top:200px; left:400px;
background-color:yellow;" onmousedown="grabber(event);">
WP
</span>
<span style = "position: absolute; top:200px; left:500px;
background-color:yellow;" onmousedown="grabber(event);">
WP LAB
</span>
<span style = "position: absolute; top:200px; left:600px;
background-color:yellow;" onmousedown="grabber(event);">
Project Lab
</span>
</p>

57
</body>
</html>

//dragNDrop.js
var diffx, diffy, theElement;
function grabber(event)
{
theElement=event.currentTarget;
var posX=parseInt(theElement.style.left);
var posY=parseInt(theElement.style.top);
diffx=event.clientX - posX;
diffy=event.clientY - posY;
document.addEventListener("mousemove",mover,true);
document.addEventListener("mouseup",dropper,true);
event.stopPropagation();
event.preventDefault();
}
function mover(event)
{
theElement.style.left=(event.clientX - diffx) + "px";
theElement.style.top=(event.clientY - diffy) + "px";
event.stopPropagation();
}
function dropper(event)
{
document.removeEventListener("mouseup", dropper, true);
document.removeEventListener("mousemove", mover, true);
event.stopPropagation();
}

58
Program # 10: Develop and demonstrate the use of javascript, a XHTML
document that illustrates the PAN (the valid format is: A digit from 1 To 4
followed by two upper-case characters followed by two digits Followed by two
upper-case characters followed by three digits; no Embedded spaces allowed) of
the user. Event handler must be Included for the form element that collects this
information to validate the input. Messages in the alert windows must be
produced when errors are detected.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

59
<head>
<title>Lab Program 4a</title>
<script type='text/javascript'>
function isNumeric(elem)
{
var numericExpression =/[0-9][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]/;
var str = elem.value
if(str.length > 10)
{ alert('please enter a valid PAN number');
elem.focus();
return false;
}
if(elem.value.match(numericExpression))
{
document.write("It is valid PAN number");
return true;
}
else
{
alert('please enter valid PAN number');
elem.focus();
return false;
}
}
</script>
</head>
<body>
<form> PLEASE ENTER THE PAN NUMBER:
<input type='text' id='numbers'/>
<input type='button' onclick=

60
"isNumeric(document.getElementById('numbers'))"
value='Check Field' />
</form>
</body>
</html>

61
62

You might also like