You are on page 1of 49

WEB PROGRAMMING

LAB PROGRAMS
PART-B
B-1) Program to demonstrate list tag
<?xml version="1.0" encoding="utf-8"?>
<!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>Lists</title>
</head>
<body>
<h1>To show lists</h1>
</hr>
<h4>Nested</h4>
<ol>
<li>Karnataka</li>
<li>TN</li>
<ol type="a">
<li>Mysore</li>
<li>Chennai</li>
<ol type="i">
<li>Gunjur</li>
<li>Belladur</li>
<ul type="Square">
<li>Electronic city P1</li>
<li>Electronic city P2/li>
</ul>
<li>HSR</li>
</ol>
</ol>
<li>Delhi</li>
</ol>
<h3>Definition</h3>
<dl>
<dt>Bangalore</dt>
<dd>Capital city of karnataka</dd>
<dt>Mumbai</dt>
<dd>Capital city of Maharashtra</dd>
</dl>
</body>
</html>

OUTPUT
B-2) Program to demonstrate table tag
<?xml="1.0" encoding="utf-8"?>
<!DOCTYPE html public "-//w3c//dtd html 1.0 transitional //en"
"http://www.w3.org/tr/xhtml/dtd/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/tr/1999/xhtml/">
<head>
<title>Table Tags</title>
</head>
<body>
<table cellpadding="15" cellspacing="1" border="5" width="600" align="center">
<caption><h1>BCA 6th SEM TIME TABLE</h1></caption>
<tr>
<th>Day</th>
<th>I</th>
<th>II</th>
<th>III</th>
<th>IV</th>
<th>V</th>
<th>VI</th>
<th>VII</th>
</tr>
<tr>
<td>MON</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td rowspan="6">L<br>U<br>N<br>C<br>H</td>
<td>CNS</td>
<td>WEB</td>
<td>TOC</td>
</tr>
<tr>
<td>TUE</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td colspan="3">...WEB LAB...</td>
</tr>
<tr>
<td>WED</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td>TOC</td>
<td>CNS</td>
<td>WEB</td>
</tr>
<tr>
<td>THUR</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td colspan="2">...PROJECT...</td>
<td>TOC</td>
</tr>
<tr>
<td>FRI</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td>CNS</td>
<td colspan="2">...PROJECT...</td>
</tr>
<tr>
<td>SAT</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td>CNS</td>
</tr>
</table>
</body>
</html>

OUTPUT
B-3) Program to demonstrate image tag
<?xml="1.0" encoding="utf-8"?>
<!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>Image tag</title></head>
<body>
<h3 align="center">To illustrateimage tags</h3><hr/>
<p><img src="C:\HTMLPROGRAMS\pics\image1.jpg" align="right" height="100"
width="100"/>This image is right aligned with the test</img></p>
<br/><br/><br/><br/><br/><hr/>
<p><img src="C:\HTMLPROGRAMS\pics\image2.jpg" height="100" width="100"
style="boeder:10px solid yellow;"/>This image is right aligned with the test</img></p>
<br/><br/><br/><br/><br/><hr/>
<p><img src="C:\HTMLPROGRAMS\pics\image3.jpg" height="100" hspace="10"
vspace="10" align="middle"/>This image is right aligned with the test</img></p>
<br/><br/><br/><br/><br/><hr/>
</body>
</html>

OUTPUT
B-4) Program to demonstrate anchor tag.
<?xml="1.0" encoding="utf-8"?>
<!DOCTYPE html public "-//w3c//dtd html 1.0 transitional //en"
"http://www.w3.org/tr/xhtml/dtd/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/tr/1999/xhtml/">
<head>
<title>ANCHOR TAG</title>
</head>
<body>
<h3 align="center">TO ILLUSTRATE TAG</h3><hr/>
<h2><a name="top"><b><u>Top of the page</u></b></a></h2><hr/><hr/>
Test as a link to another page:
<a href="C:\HTMLPROGRAMS\1-lists.html">
click me!!!</a>
<hr/>
Image as a link to another page:
<a href="C:\HTMLPROGRAMS\2-Table tag.html">
<img src="C:\HTMLPROGRAMS\pics\image1.jpg" width="100" height="100"/></a>
<hr/>
Link to mail:<a href="mail to kdc@gmail.com">EMAIL ME!!!</a>
<hr/>
Link to download a file:<a href="C:\HTMLPROGRAMS\1-lists.html">
Click here to download a file!!!</a>
<hr/>
<p><a hred="#chapter 8">See also chapter 8 (link within the page)</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains pointers</p>
<h2>Chapter 2</h2>
<p>This chapter explains variables</p>
<h2>Chapter 3</h2>
<p>This chapter explains operators</p>
<h2>Chapter 4</h2>
<p>This chapter explains structures</p>
<h2>Chapter 5</h2>
<p>This chapter explains array</p>
<h2>Chapter 6</h2>
<p>This chapter explains linked list</p>
<h2>Chapter 7</h2>
<p>This chapter explains expression</p>
<h2><a name="Chapter 8"><u>Chapter 8</u></a></h2>
<p>This chapter explains binary tree</p>
<h2>Chapter 9</h2>
<p>This chapter explains unordered list</p>
<h2>Chapter 10</h2>
<p>This chapter explains statements</p>
<h2>Chapter 11</h2>
<p>This chapter explains searching</p>
<a href="#top">Click here to go to top of the page(link with a page)</a>
</body>
</html>
OUTPUT
B-5) Program to demonstrate anchor tag.
Form.html
<?xml="1.0" encoding="utf-8"?>
<!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>FORM</title>
</head>
<body>
<h1 align="center"><u>Student Registration Form</u></h1>
<form action="file:C:\HTMLPROGRAMS\5-Form\sucess.html" name="Student"
method="get">
<label>Name:</label><input type="text" name="textnames" size="30"/>
<br/><br/>
<label>Father Name:</label><input type="text" name="fathername" size="30"/>
<label>Mother Name:</label><input type="text" name="mothername" size="30"/>
<br/><br/>
<label>Personal Address:</label><textarea rows="10" cols="50">Enter adress
here</textarea>
<br/><br/>
<fieldset>
<legend>Gender</legend>
<input type="radio" name="Gender"/>Male
<input type="radio" name="Gender"/>Female
</fieldset>
<br/><br/>
<fieldset>
<legend>Languages</legend>
<input type="checkbox" name="lang"/>Kannada
<input type="checkbox" name="lang"/>English
<input type="checkbox" name="lang"/>Hindi
<input type="checkbox" name="lang"/>Tamil
<input type="checkbox" name="lang"/>Telugu
</fieldset>
<label>Couse:</label>
<select name="Course">
<option selected="selected">Select....</option>
<optgroup label="DEGREE">
<option>BCOM</option>
<option>BCA</option>
<option>BSC</option>
</optgroup>
<optgroup label="PUC">
<option>I PUC</option>
<option>II PUC</option>
</optgroup>
</select>
<br/><br/>
<label>city:</label><select name="city">
<option selected="selected">Select.....</option>
<option>Bangalore</option>
<option>Mysore</option>
<option>Chennai</option>
<option>Mandya</option>
</select>
<br/><br/>
<label>Pincode:</label><input type="text" name="pincode" size="30"/>
<br/><br/>
<input type="reset"/>
<input type="submit" value="click here to proceed"/>
</form>
</body>
</html>

Success.html
<html>
<head>
<title>SUCESS</title>
</head>
<body>
<br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h1 align="center">SUBMITTED</h1>
</body>
</html>
OUTPUT 1

OUTPUT 2
B-6) Program to demonstrate frame tag.
Frame.html
<?xml="1.0" encoding="utf-8"?>
<!DOCTYPE html public "-//w3c//dtd html 1.0 transitional //en"
"http://www.w3.org/tr/xhtml/dtd/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/tr/1999/xhtml/">
<head>
<title>FRAME TAG</title>
</head>
<frameset cols="20,60">
<frame src="C:\HTMLPROGRAMS\6-Frame\Leftpane.html">
<frame src="C:\HTMLPROGRAMS\6-Frame\Rightpane.html" name="rightpane"/>
</frameset>
</html>
Bangalore.html
<html>
<head><title>BANGALORE</title>
</head>
<body><bg color="blue">
<h1>WELCOME TO BANGALORE</h1>
</body>
</html>
Leftpane.html
<html>
<head><title>LEFTPANE</title></head>
<body>
<h3>Districts of Karnataka</h3>
<a href="C:\HTMLPROGRAMS\6-Frame\Bangalore.html"
target="rightpane">BANGALORE<br/></a>
<a href="C:\HTMLPROGRAMS\6-Frame\Mysore.html" target="rightpane">Mysore<br/></a>
<marquee>I AM LEFT PANE</marquee>
</body>
</html>
Mysore.html
<html>
<head><title>MYSORE</title>
</head>
<body><bg color="yellow">
<h1>WELCOME TO MYSORE</h1>
</body>
</html>
Rightpane.html
<html>
<head><title>Rightpane</title></head>
<body>
<h1>Click on any state to get a welcome message</h1>
<marquee>I Am RIGHTPANE</marquee>
</body>
</html>

OUTPUT 1:
OUTPUT 2:

OUTPUT 3:
B-7) Program to validate age.
<?xml version="1.0" encoding="utf-8"?>
<!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>VALIDATE AGE</title>
<script type="text/javascript">
function Check()
{
var entervalue=document.getElementById("age").value;
if(entervalue>18 && entervalue<=100)
{
window.alert("You are eligible to vote.");
}
else
{
window.alert("Age cannot be less than 18 or greater than 100.");
}
}
</script>
</head>
<body>
<h1>Program to evaluate age for voting</h1>
<form>
<label>Enter Age:<input type="text" id="age"/>
<input type="button" value="Click Here" onclick="Check()"/>
</form>
</body>
</html>
OUTPUT
B-8) Program to calculate factorial.
<?xml version="1.0" encoding="utf-8"?>
<!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>FACTORIAL</title>
<script type="text/javascript">
var n=parseInt(window.prompt("Enter number"));
var fact=factorial(n);
document.write("<h1>Factorial of "+n+" is "+fact+" </h1>");
function factorial(n)
{
if(n<=1)
return 1;
else
return n*factorial(n-1);
}
</script>
</head>
</html>
OUTPUT
B-9) Program to demonstrate string
<?xml version="1.0" encoding="utf-8"?>
<!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>String Functions</title>
</head>
<body>
<script type="text/javascript">
var str = "WEB PROGRAMMING BOOK BY SEBESTA";
document.writeln("The string is: " + str);
document.writeln("<br/><hr/>The length of the string is: " + str.length);
document.writeln("<br/><hr/>The character at the 4th position is: " + str.charAt(4));
document.writeln("<br/><hr/>The index of 'B' is: " + str.indexOf('B'));
document.writeln("<br/><hr/>The last index of 'B' is: " + str.lastIndexOf('B'));
document.writeln("<br/><hr/>The uppercase of the string is: " + str.toUpperCase());
document.writeln("<br/><hr/>The lowercase of the string is: " + str.toLowerCase());
document.writeln("<br/><hr/>The substring found between two indexes is: " +
str.substring(4, 12));
document.writeln("<br/><hr/>The substring in a string beginning at the specified location to
the number of characters: " + str.substr(8, 12));
</script>
</body>
</html>
OUTPUT
B-10) Program to demonstrate array operations.
<?xml version="1.0" encoding="utf-8"?>
<!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>Array Functions</title>
</head>
<body>
<script type="text/javascript">
var myarr=new Array(5);
myarr[0]="Mango";
myarr[1]="Banana";
myarr[2]="Apple";
myarr[3]="Grapes";
myarr[4]="Chicko";
document.write("The array elements are");
for(var i=0;i<myarr.length;i++)
{
document.write("<br/>" + myarr[i]);
}
myarr=myarr.concat("Melon","Plum");
document.write("<br/><hr/>After concatenation the array is:" + myarr);
document.write("<br/><hr/>Poped element is:" + myarr.pop());
document.write("<br/><hr/>After push operation array elements are:" + myarr);
document.write("<br/><hr/>Shifter element is:" + myarr.shift());
myarr.unshift("Guava");
document.write("<br/><hr/>After unshift operation array elements are:" + myarr);
document.write("<br/><hr/>After slice operation array elements are:" + myarr.slice(2,5));
document.write("<br/><hr/>After join operation array elements are:" + myarr.join(">>"));
document.write("<br/><hr/>After reverse operation array elements are:" +
myarr.reverse());
document.write("<br/><hr/>After sort operation array elements are:" + myarr.sort());
</script>
</body>
</html>

OUTPUT
PART A PROGRAMS
A-1) Program to find sum of n natural numbers.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml//DTD/xhtml1.Transitional//EN">
<html xmlns="http://w3.org/1999/xhtml">
<head>
<title>Sum of Natural Number</title>
<script type="text/javascript">
function natural()
{
var n=parseInt(window.prompt("Enter n value"));
var sum=(n*(n+1))/2;
window.alert("Sum of first "+n+" natural number is:"+sum);
}
</script>
</head>
<body>
<h1>Sum of N natural numbers</h1>
<form>
<input type="button" value="FIND SUM" onClick="natural()"/>
</form>
</body>
</html>
OUTPUT
A-2) Javascript to count number of elements.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml//DTD/xhtml1.Transitional//EN">
<html xmlns="http://w3.org/1999/xhtml">
<head>
<title>Number of Elements</title>
<script type="text/javascript">
function count()
{
window.alert("The number of 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 cols="J" rows="10"></textarea><br/><br/>
Gender:<input type="radio"/>Male
<input type="radio"/>Female<br/><br/>
Newsletters:<input type="checkbox"/><br/><br/>
<input type="button" value="Send Data" onClick="count()"/>
<br/>
</form>
</body>
</html>
OUTPUT
A-3) Javascript code to count number of empty elements
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml//DTD/xhtml1.Transitional//EN">
<html xmlns="http://w3.org/1999/xhtml">
<head>
<title>Number of Elements</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)
window.alert("The following text boxes are empty:\n"+myarray);
}
</script>
</head>
<body>
<form name="myform">
<pre>
Name:<input type="text" name="Name"/><br/>
Class:<input type="text" name="Class"/><br/>
Age:<input type="text" name="Age"/><br/>
<input type="submit" value="Send Message" onClick="validate()"/><br/>
</pre>
</form>
</body>
</html>

OUTPUT
A-4) Javascript code to evaluate the expression and display.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://w3.org/1999/xhtml">
<head>
<title>Evaluate</title>
<script type="text/javascript">
function math_evaluate()
{
var exp=document.getElementById("expr").value;
document.getElementById("result").value=eval(exp);
}
</script>
</head>
<body>
<form>
<pre>
<label>Enter any valid Expression:</label><input type="text" id="expr"/><br/>
<input type="button" value="Evaluate" onClick="math_evaluate()"/>
<br/>
<label>Result of expression:</label><input type="text" id="result"/>
<br/>
</pre>
</form>
</body>
</html>
OUTPUT
A-5) Javascript code to display current month, date and year.
<?xml version="1.0" encoding="utf-8"?>
<!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>
<script type="text/javascript">
var days = ["", "First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh", "Eight",
"Nineth", "Tenth", "Eleven", "Twelth", "Thirteenth", "Fourteenth", "Fifteenth", "Sixteenth",
"Seventeenth", "Eighteenth", "Nineteenth", "Twentyeth", "Twentyone", "Twentysecond",
"Twentythird", "Twentyfourth", "Twentyfifth", "Twentysixth", "Twentyseveth",
"Twentyeight", "Twentynineth", "Thirtyeth", "Thirtyfirst"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August",
"September", "October", "November", "December"];
var year = "Two Thousand Twenty";
var dateObj = new Date();
var currMonth = dateObj.getMonth();
var currDate = dateObj.getDate();
var currYear = dateObj.getFullYear();

if (currYear == 2020) {
year = "2020"; // Changed the year to display properly in the alert message.
window.alert("Today's Date is " + days[currDate] + " " + months[currMonth] + " " +
year);
} else {
window.alert("Today's Date is " + days[currDate] + " " + months[currMonth] + " " +
currYear);
}
</script>
</head>
</html>
OUTPUT
A-6) Create a form for student information.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function showresult()
{
var n = document.getElementById("name").value;
var cls = document.getElementById("class").value;
var mark1 = parseInt(document.getElementById("sub1").value);
var mark2 = parseInt(document.getElementById("sub2").value);
var mark3 = parseInt(document.getElementById("sub3").value);
var total = mark1 + mark2 + mark3;
var avg = total / 3;
var grade, result;

if (avg >= 60)


{
grade = "A";
result = "First class";
}
else if (avg >= 50)
{
grade = "B";
result = "Second Class";
}
else if (avg >= 40)
{
grade = "C";
result = "Third class";
}
else
{
grade = "D";
result = "Fail";
}

document.write("<pre><b><h2> Results </h2>");


document.write("Name: " + n + "<br/><br/>");
document.write("Class: " + cls + "<br/><br/>");
document.write("Total Marks: " + total + "<br/><br/>");
document.write("Average: " + avg + "<br/><br/>");
document.write("Grade: " + grade + "<br/><br/>");
document.write("Result: " + result + "<br/><br/> </b></pre>");
}
</script>
</head>
<body>
<form id="myForm">
<table border="1" cellspacing="0">
<tr><td> Name:</td><td><input type="text" id="name" /></td></tr>
<tr><td>Class:</td><td><input type="text" id="class"/></td></tr>
<tr><td>Subject mark1:</td><td><input type="text" id="sub1"/></td></tr>
<tr><td>Subject mark2:</td><td><input type="text" id="sub2"/></td></tr>
<tr><td>Subject mark3:</td><td><input type="text" id="sub3"/></td></tr>
<tr><td><input type="button" value="View Result" onclick="showresult()"/> </td></tr>
</table>
</form>
</body>
</html>

OUTPUT
A-7) Create a form for employee information.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function calculate() {
var empname = document.getElementById("en").value;
var empid = document.getElementById("eid").value;
var basic = parseInt(document.getElementById("eb").value);
var hra = basic * 0.4;
var da = basic * 0.6;
var gross = hra + da + basic;
var pf = gross * 0.13;
var tax = gross * 0.20;
var deduction = pf + tax;
var netsalary = gross - deduction;

document.write("<pre> <b><h1>Employee Details</h1>");


document.write("Employee name: " + empname + "<br/><br/><br/>");
document.write("Employee id: " + empid + "<br/><br/><br/>");
document.write("Basic salary: " + basic + "<br/><br/><br/>");
document.write("HRA (40% of basic): " + hra + "<br/><br/><br/>");
document.write("DA (60% of basic): " + da + "<br/><br/><br/>");
document.write("Gross Salary: " + gross + "<br/><br/><br/>");
document.write("PF (13% of gross): " + pf + "<br/><br/><br/>");
document.write("Tax (20% of gross): " + tax + "<br/><br/><br/>");
document.write("Deduction: " + deduction + "<br/><br/><br/>");
document.write("Net salary: " + netsalary + "<br/><br/><br/></b></pre>");
}
</script>
</head>
<body>
<form>
<table border="1">
<tr>
<td>Employee name:</td>
<td><input type="text" id="en" /></td>
</tr>
<tr>
<td>Employee Id:</td>
<td><input type="text" id="eid" /></td>
</tr>
<tr>
<td>Basic Pay:</td>
<td><input type="text" id="eb" /></td>
</tr>
<tr>
<td><input type="button" value="SHOW SALARY" onclick="calculate()" /></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT
A-8) Create a page with dynamic effect.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic Animated</title>
<style type="text/css">
#layer1 {position:absolute; top: 50px; left:50px; }
#layer2 {position:absolute; top:150px; left:150px;}
#layer3 {position:absolute; top: 250px; 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:\HTMLPROGRAMS\pics\image1.jpg" width="100"
height="100" onclick="moveImage('layer1')" alt="My Image" /></div>
<div id="layer2"><img src="C:\HTMLPROGRAMS\pics\image2.jpg" width="100"
height="100" onclick="moveImage('layer2')" alt="My Image" /></div>
<div id="layer3"><img src="C:\HTMLPROGRAMS\pics\image3.jpg" width="100"
height="100" onclick="moveImage('layer3')" alt="My Image"/></div>
</body>
</html>
OUTPUT
A-9) Create a webpage using two image files switches between one another.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Count</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 change() {
var img1 = document.getElementById("image1").style;
var img2 = document.getElementById("image2").style;

if (img1.visibility == "visible") {
img1.visibility = "hidden";
img2.visibility = "visible";
}
else {
img1.visibility = "visible";
img2.visibility = "hidden";
}
}
</script>
</head>
<body>
<form>
<img src="C:\HTMLPROGRAMS\pics\image1.jpg" width="300" height="300" id="image1"
onmouseover="change()" onmouseout="change()" />
</form>
<img src="C:\HTMLPROGRAMS\pics\image2.jpg" width="300" height="300" id="image2"
onmouseover="change()" onmouseout="change()" />
</body>
</html>

OUTPUT
A-10) Create a form to display menu.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Restaurant Details</title>
<script type="text/javascript">
function Findcost() {
var major = document.getElementById("major1");
var starters = document.getElementById("starters1");
var soft = document.getElementById("softl");
var selectedItem = "Items\t\t\tprice\n-------\n";
var totalcost = 0;

for (var i = 0; i < major.options.length; i++) {


var option = major.options[i];
if (option.selected == true) {
var price = parseInt(option.value);
totalcost += price;
selectedItem += 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);
totalcost += price;
selectedItem += option.text + "\t\t" + price + "\n";
}
}

var softdrinkIndex = soft.selectedIndex;


if (softdrinkIndex !== -1) {
var selectedsoftdrink = soft.options[softdrinkIndex].text;
var price = parseInt(soft.options[softdrinkIndex].value);
totalcost += price;
selectedItem += selectedsoftdrink + "\t\t\t" + price + "\n";
}

selectedItem += "\n\nTotal cost \t\t" + totalcost;


document.getElementById("Ordereditems").value = selectedItem;
}
</script>
</head>
<body>
<form name="menuform">
<table border="10">
<tr>
<th colspan="2" align="center">
<h2>Restaurant Menu Details</h2>
</th>
</tr>
<tr>
<td>Major Dishes:</td>
<td>
<select id="major1" size="3" multiple="multiple">
<option value="100">Vegetable Pulav</option>
<option value="150">Hyderabad Biryani</option>
<option value="50">Roti With Curry</option>
</select>
</td>
</tr>
<tr>
<td>Starters:</td>
<td>
<select id="starters1" size="3" multiple="multiple">
<option value="80">Gobi Manchurian</option>
<option value="40">Veg Clear Soup</option>
<option value="30">Masala Papad</option>
</select>
</td>
</tr>
<tr>
<td>Soft Drink:</td>
<td>
<select id="softl" size="3">
<option value="20">Pepsi</option>
<option value="20">Coke</option>
<option value="30">Lime Soda</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<textarea id="Ordereditems" rows="10" cols="50"></textarea>
</td>
</tr>
<tr>
<td>
<input type="button" value="FindTotalCost" onclick="Findcost()" />
</td>
<td>
<input type="reset" value="Clear" />
</td>
</tr>
</table>
</form>
</body>
</html>

OUTPUT

You might also like