Scribd
Upload
8K views

VI BCA-Web Programming - Lab Programs

This document contains a lab manual for a Web Programming course. It provides 7 JavaScript coding exercises for students to complete, including: 1. Counting the number of elements in a form 2. Validating that textboxes are filled out in a form 3. Evaluating mathematical expressions entered in a form 4. Adding basic animation effects like moving layers on a page 5. Calculating the sum of the first N natural numbers using a function 6. Displaying the current date in words using arrays 7. Calculating student marks, grades, averages, and results from a form

Uploaded by

pragyan ncms
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8K views

VI BCA-Web Programming - Lab Programs

This document contains a lab manual for a Web Programming course. It provides 7 JavaScript coding exercises for students to complete, including: 1. Counting the number of elements in a form 2. Validating that textboxes are filled out in a form 3. Evaluating mathematical expressions entered in a form 4. Adding basic animation effects like moving layers on a page 5. Calculating the sum of the first N natural numbers using a function 6. Displaying the current date in words using arrays 7. Calculating student marks, grades, averages, and results from a form

Uploaded by

pragyan ncms
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 28

Web Programming

Lab Manual

VI BCA- Web Programming -Lab Programs

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=cyan>
<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>
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=cyan>
<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>

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

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=cyan>
<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>
</body>
</html>

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);
}
</script>
</head>
<body bgcolor=cyan>
<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>
6. Write a JavaScript code block using arrays and generate the current date in words,
this should include the day, month and year.

Html Code:
<!-- Lab 6 : Java Script code to display date in words -->
<html>
<head>

<title>Display Date </title>

<script type="text/javascript">
function display()
{
var dateObj=new Date();
var currDate=dateObj.getDate();
var month=dateObj.getMonth();
var currYear=dateObj.getFullYear();
var year="Two Thousand and Fourteen";

var
days=["First","Second","Third","Fourth","Fifth","Sixth","Seventh","Eigth","Ninth",
"Tenth","Eleventh","Twelfth","Thirteenth","Fourteenth","fifteenth","Sixteenth",
"Seventeenth","Eighteenth","Nineteenth","Twentyeth","Twenty First","Twenty
Second",
"Twenty Third","Twenty Fourth","Twenty Fifth","Twenty Sixth","Twenty
Seventh",
"Twenty Nine","Thirtyeth", "Thirty First"];
var months=["January","Febraury", "March", "April", “May”, “June”, “july”,
“August”, "September","October","November","December"];

if(currYear==2014)
alert("Today date is :: "+days[currDate-1]+" "+months[month-1]+" "+year);
else
alert("Today date is :: "+days[currDate-1]+" "+months[month-1]+" "+currYear);

}
</script>
</head>
<body bgcolor=cyan>
<form>
<input type=button value="Click Here" onClick="display()"/>
</form>
</body>
</html>

7. Create a form for Student information. Write JavaScript code to find Total,
Average, Result and Grade.

Html Code:
<html>
<head>
<title> Student Marks Report </title>
<script type="text/javascript">

function showResult()
{
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("<body bgcolor=pink>");
document.write("<h2> Student Marks Report </h2>");
document.write("<hr>");
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>");
document.write("</body>");
}
</script>
</head>
<body bgcolor=cyan>
<form>
<table border="5">
<tr> <th> Student Data Form </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> <br>

<input type=button value="ShowResult" onclick="showResult()">


</form>
</body>
</html>
8. Create a form for Employee information. Write JavaScript code to find DA, HRA,
PF, TAX, Gross pay, Deduction and Net pay.

Html Code:
<!-- Lab 8 : Employee Salary Report -->
<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;

// 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>");
document.writeln("<tr><td>Net Salary (Gross - Deductions) : </td>
<td>"+netsalary+"</td></tr>");
document.writeln("</table>");
document.write("</body>");

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

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 Code:
<html>
<head>
<title> MacDonalds 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++)


{
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=cyan text=blue>
<h1 align=center> Mc Donald's Restaurant </h1>
<hr>
<form name="Menu Form">

<table border=10 align=center>


<tr> <th colspan=2 align=center>
<h2> Items Menu</h2> </th>
</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>
<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>
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 Code:
<!-- Lab 10 Image files , Switch between one another as the mouse pointer moves over
the images -->
<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>
<body bgcolor="cyan" text=blue>
<h1 align = center> Mouse Events </h1>
<hr>
<form >
<img src="zoozoo1.jpg" id="image1" onMouseOver="changeImage()"
onMouseOut="changeImage()"></img>
<img src="zoozoo2.jpg" id="image2" onMouseOver="changeImage()"
onMouseOut="changeImage()"></img>
</form>
</body>
</html>

Figure 1--Mouse Out

Figure 2--Mouse In

PART-B
1. Write a HTML program to demonstrate Ordered, Unordered and Definition
List

<html>
<head>
<title> Lists</title></head>
<body>
<p><b> Unordered List </b></p>
<ul type="square">
<li>PMCS</li>
<li>BCAS</li>
<li>MCA</li>
<li>MSC</li>
</ul>
<p><b> Ordered List </b></p>
<ol type="a">
<li>PMCS</li>
<li>BCA</li>
<1i>MCA</li>
<li>MSC</li></ol>
<p><b> Definition List </b></p>
<dl>
<dt><b>PMCS</b></dt>
<dd>This stands for Physics, Mathematics and Computer Science</dd>
<dt><b>BCA</b></dt>
<dd>This stands for Bachelor of Computer Applications </dd>
</dt>
</body>
</html>

2. Create a Study class time table using HTML


<html>
<head>
<title>Class Time Table</title>
</head>
<body>
<center><h2> VI SEM Time Table </h2>
<table border="2" cellpadding="10" cellspacing="10" bgcolor="silver">
<tr>
<th rowspan=2>Days</th>
<th colspan=5>Time</th>
</tr>
<tr>
<th>10:00 - 11:00 </th>
<th>11:00 - 12:00 </th>
<th>12:00 - 1:00 </th>
<th>1:00 - 2:00 </th>
<th>2:00 - 5:00 </th>
</tr>
<tr>
<td>MON</td>
<td>CAIT </td>
<td>MAT-7 </td>
<td> CS-7 </td>
<td>PHIY-7 </td>
<td>PH Y-LAB </td>
</tr>
<td>TUE</td>
<td>CAIT </td>
<td>PHY-7 </td>
<td>MAT-7</td>
<td>CS-7 </td>
<td>PH Y-LAB</td>
</tr>
<td>WED</td>
<td>- </td>
<td>CS-7</td>
<td>PHY-7 </td>
<td>MAT-7</td>
<td>MAT-LAB</td>
</tr>
<td>THS</td>
<td>MAT-8 </td>
<td>CS-8</td>
<td>PH Y-8 </td>
<td>CAIT </td>
<td>MAT-LAB</td>
</tr>
<td>FRI</td>
<td>PH Y-8</td>
<td>CS-8</td>
<td>MAT-8</td>
<td>-</td>
<td>CS-LAB</td>
</tr>
<td>SAT</td>
<td>CS-8 </td>
<td>PH Y-8</td>
<td>MAT-8 </td>
<td>- </td>
<td>CS-LAB</td>
</tr>
</table>
</center>
</body>
</html>

3. Write a Java Script program to perform arithmetic operation using user Input.
<html>
<head>
<title>Arithmetic Operations </title>
<script type="text/javascript">
var a,b,c,ch;
a=parseInt(prompt("Enter First Number"));
b=parseInt(prompt("Enter Second Number"));
ch=parseInt(prompt("Enter your choice...."));
switch(ch)
{
case 1:
c=a+b;
document. write("Addition="+c);
break;
case 2:
c=a-b;
document.write("Subtraction="+c);
break;
case 3:
c=a*b;
document.write("Multiplication="+c);
break;
case 4:
c=a/b;
document.write("Division="+c);
break;
default:
document.write("Invalid choice");
}
</script>
</head>
</html>

4. Write a Java Script program to find factorial of a given number using user
defined function.
<html>
<head>
<title> Factorial </title>
<script type="text/javascript">
function factorial()
{
var n,i,f=1;
n=parseInt(prompt("Enter Number"));
for(i=1;i<=n;i++)
{
f=f*i;
}
document.write("Factorial="+f);
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="factorial()" value="Factorial">
</form>
</body>
</html>

5. Write a Java Script program to draw circle using Canvas Element.


<html>
<head>
<title> Draw Circle </title>
<script type = "text/javascript">
function drawcircle()
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2*Math.PI);
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height=" 100" style="border:2px
solid#000000;">
</canvas>
<p>Click the button to draw Circle: </p>
<input type="button" name="Circle" value="Circle" onclick="drawcircle()">
</body>
</html>

6. Write a Java Script program to demonstrate moving a text element.


<html>
<head>
<title>Moving Text</title>
<script type="text/javascript">
var dom,x, y, finalx=500, finaly=500;
function initText()
{
dom = document.getElementById('theText').style;
var x=dom.left; var y=dom.top;
x=x.match(/\+/);
y=y.match(/\+/);
moveText(x,y);
}
function moveText(x,y) {
if(x!=finalx)
if(x>finalx)
x--;
else if(x<finalx)
x++;
if(y!=finaly)
if(y>finaly)
y--;
else if(y<finaly)
y++;
if((x!=finalx)||(y!=finaly))
{
dom.left=x + "px";
dom.top=y + "px";
setTimeout("moveText("+ x + ","+ y +")",1);
}}
</script>
<body onload= "initText()">
<p><span id = 'theText' style = "position:absolute; left:100px:top:100px;font:bold
20pt courier;color:blue;">WebProgramming</span>
</p>
</body>
</html>

7. Write Java Script to move an image for a specified X and Yposition


partb7.html
<html>
<title>MovingElements</title>
<script type = "text/javascript" src="partb7.js">
</script>
</head>
<body>
<form action=" ">
<p><label>X-coordinate: <input type = "text" id = "leftCoord"
size="3"/></label><br><br>
<label>Y-coordinate: <input type = "text" id = "topCoord"
size="3"/></label><br>
<input type="button" value="Move" onclick="move('rose',
document.getElementById('topCoord').value,
document.getElementById('leftCoord').value)"/></p>
</form>
<div id = "rose" style = "position:absolute;top:115px;left:0;">
<img src = "rose.jpg" alt = "Rose" border=2>
</div>
</body>
</html>

partb7.js
var dom;
function move(movee, newTop, newLeft)
{
dom = document.getElementById(movee).style;
dom.top=newTop + "px";
dom.left=newLeft + "px";
}

8. Write a program using CSS to display image on your choice and write few line
about it.
<html>
<head>
<style type="text/css">
p.indent {text-indent:0.5in}
img {float:right}
</style>
<body>
<img src="pp.jpg" width=600 height=600 alt="AboutVidhanaSoudha"/>
<p class="indent">One of the most famous landmarks of Bangalore,the Vidhana
Soudha houses the State Legislature and the Secretariatof Karnataka.The origin
of the building dates back to the times of Sri KengalHanumanthaiah, the Chief
Ministerof Mysorefrom1951to 1956.</p>
<p class="indent">Thefoundation of the building was laid by the PM, Sri Pandit
Jawaharlal Nehru on 13th July, 1951.It was completed in the year 1956andthe
total cost came around Rs. 1.75 crore.</p>
</body>
</html>

9. Write a Java Script program to display browser name and version using
navigator object.
partb9.html
<html>
<head>
<title>Navigator</title>
<script type="text/javascript" src="partb9.js">
</script>
</head>
<body onload="navproperties();">
</body>
</html>

partb9.js
function navproperties()
{
alert("Browser is :" + navigator.appName + "\n" + "The version number is :" +
navigator.appVersion + "\n");
}

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