Bca604p Lab Manual

BCA604P - Web Programming Lab
1. Create a form having number of elements (Textboxes, Radio buttons, Checkboxes, and
soon). Write JavaScript code to count the number of elements in a form.
PROGRAM 1:
<!Author : IRFAN AHMED-->
<?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/xhtmllang=en>
<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=emailBodycols=50rows=10></textarea><br/><br/>
Sex:<input type=radioname=gender/>Male
<input type=radioname=gender/>Female<br/><br/>
Newsletter<input type=checkboxchecked=checked/><br/><br/>
<input type=buttonvalue=Send messageonclick=countFormElements()/>
</form>
</body>
</html>
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.
PROGRAM 2:
<html>
<head>
<script type="text/javascript">
function checkifempty(uname,pwd)
{
/*
Here ctl is the name of
the control, whose value you want to check
*/
if (uname.value=="" && pwd.value=="")
{
alert("Field can not be blank");
document.getElementById("uname").focus();
return false;
}
return true;
}
</script>
</head>
<body bgcolor="darkblue" text="white">
<form id="loginfrm">
<legend >LOGIN FORM</legend>
USER NAME : <input type="text" id="uname"><br>
PASSOWRD : <input type="password" id="pwd"><br>
<input type="submit" id="login" value="LOGIN"
onclick="checkifempty(uname,pwd)">
</form>
</body>
</html
3. Develop a HTML Form, which accepts any Mathematical expression. Write JavaScript
code to Evaluates the expression and Displays the result.
PROGRAM 3:
<html>
<head>
<title>Solve Mathematical Expression</title>
function calc()
{
document.Sample.answer.value=eval(document.Sample.calculate.value)
}
</script>
</head>
<body bgcolor=teal>
<form name="Sample">Enter a mathematical expression in the first box, and then use the
calculate button to get the answer.<br/>
<table cellpadding="4" cellspacing="0"height=100width=200bgcolor="blue">
<tr>
<td><input type="text"size="20"name="calculate"></td>
<td><input type="button"name="Btn1"value="Calculate"onclick="calc()"></td>
</tr>
<tr>
<td><b>Answer:</b><input type="text"size="20"name="answer"></td>
<td><input type="reset"name="Btn2"value="Reset"></td>
</tr>
</table>Click on reset button to enter again new expression.
</form>
</body>
4. Create a page with dynamic effects. Write the code to include layers and basic animation.
PROGRAM 4:
<head>
<title>Basic Animation</title>
<style>
#layer1{position:absolute;top:50px,left:50px,}
</style>
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="ball.jpg" onclick="moveImage('layer1')" alt="My
Image."/></div>
Image."/></div>
Image."/></div>
</body>
</html>
5. Write a JavaScript code to find the sum of N natural Numbers. (Use user-defined
function)
PROGRAM 5:
<head>
<title>Sum of Natural Numbers</title>
var number,n,s=0;
number=window.prompt("Enter the range to find the sum","0");
n=parseInt(number);
if(n<=0)
{
alert("Enter a positive Number");
}
document.write("<h1><center>Sum of " + n + "Natural number is");
sum(n);
document.write("<i>" +s+ "</i></center></h1>");
function sum(n)
{
for(var i=0;i<=n;i++)
s=s+i;
}
</script>
</head><body bgcolor="powderblue"></body>
</html>
6. Write a JavaScript code to find factorial of N. (Use recursive function)
PROGRAM 6:
<html>
<head>
<title>
Javascript program for find factorial of given number
</title>
function fact(n)
{
var m=1;
while(n)
{
m=m*n;
n--;
}
alert("Factorial of given number :"+" "+ m);
}
</script>
</head>
<body>
<h1 align="center"><font color="green">Javascript Program for calculate

factorial</font></h1>
<form name="frm1">
Enter any number :<input type="text" name="fact1"><br><br>
<input type="submit" value="calculate factorial" onclick="fact(frm1.fact1.value)">
</form>
</body>
</html>
7. Write a JavaScript code block using arrays and generate the current date in words, this
should include the day, month and year.
PROGRAM 7:
<html>
<head>
<script type="text/javascript" language="JavaScript">

</script>
</head>
<body>
<script type="text/javascript" language="JavaScript"><!-var calendarDate = getCalendarDate();
var clockTime = getClockTime();
document.write('Date is ' + calendarDate);
document.write('<br>');
document.write('Time is ' + clockTime);
//--></script>
</body>
</html>
8. Create a form for Student information. Write JavaScript code to find Total, Average,
Result and Grade.
9. Create a form for Employee information. Write JavaScript code to find DA, HRA, PF,
TAX, Gross pay, Deduction and Net pay.
10. 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.
11. Write a JavaScript code block, which checks the contents entered in a forms Text
element. If the text entered is in the lower case, convert to upper case. Make use of function
to Uppercase ( ).
PROGRAM 11:
<head>
<title> Case Conversion</title>
function toUpper(){
document.getElementById("name").value=document.getElementById("name").value.toUp
perCase();
}
function toLower(){
document.getElementById("name").value=document.getElementById("name").value.toLo
werCase();
}
</script>
</head>
<body>
<form>
Enter Your Name:<input type="text" id="name" size="50"/><br/><br/>
<input type="button" value="Convert to Upper" onclick="toUpper()" />
<input type="button" value="Convert to Lower" onclick="toLower()" />
</form>
</body>
</html>
12. 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.

Bca604p Lab Manual

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bca604p Lab Manual

Uploaded by

Copyright:

Available Formats

BCA604P - Web Programming Lab

<h1 align="center"><font color="green">Javascript Program for calculate

var monthnumber = now.getMonth();

if(year < 2000) { year = year + 1900; }

var second = now.getSeconds();

if (hour > 12) { hour = hour - 12;

if (hour < 10) { hour = "0" + hour; }

You might also like