Scribd
Upload
244 views

Web Lab Programs

The document is a lab manual for web programming that provides solutions to 10 programming problems. The problems involve creating forms with JavaScript validation, evaluating mathematical expressions, animating images, calculating sums of natural numbers, and generating the current date in words. The solutions provide HTML and JavaScript code to implement the described tasks.

Uploaded by

Jagadish Narayan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
244 views

Web Lab Programs

The document is a lab manual for web programming that provides solutions to 10 programming problems. The problems involve creating forms with JavaScript validation, evaluating mathematical expressions, animating images, calculating sums of natural numbers, and generating the current date in words. The solutions provide HTML and JavaScript code to implement the described tasks.

Uploaded by

Jagadish Narayan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 56

WEB PROGRAMMING LAB MANUAL

WEB PROGRAMMING LAB MANUAL

TABLE OF CONTENTS

PGM PROGRAM NAME


NO.

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.

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 text boxes has been left empty, popup an alert indicating which textbox has been left
empty.

3 Develop a HTML Form, which accepts any Mathematical expression. Write


JavaScript code to Evaluates the expression and Displays the result.
4 Create a page with dynamic effects. Write the code to include layers and basic
animation.
5 Write a JavaScript code to find the sum of N natural Numbers. (Use user-defined
function)
6 Write a JavaScript code block using arrays and generate the current date in words,
this should include the day, month and year.
7 Create a form for Student information. Write JavaScript code to find Total, Average,
Result and Grade.
8 Create a form for Employee information. Write JavaScript code to find DA, HRA,
PF, TAX, Gross pay, Deduction and Net pay.
9 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.
10 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.

1
WEB PROGRAMMING LAB MANUAL

SOLUTIONS

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.
SOLUTION:
<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>
<form name="myForm" align=left>
1. Name :&nbsp&nbsp&nbsp&nbsp&nbsp<input type=text/><br><br>
2. Password:<input type="password"/><br><br>
3. Address: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

<br> <textarea id="emailbody" cols=50 rows=5></textarea><br><br>


4.Gender: <input type=radio name=gender/>Male
<input type=radio name=gender/>Female<br><br>
5. I agree all the terms and conditions <input type=checkbox /><br><br>
<input type=button value="Send Message" onclick="countFormElements()" />
</form>

</body>
</html>

2
WEB PROGRAMMING LAB MANUAL

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 text boxes has been left empty, popup an alert
indicating which textbox has been left empty.

SOLUTION:

<html>
<head>
<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)
{
3
WEB PROGRAMMING LAB MANUAL

myArray.push(document.myForm.elements[i].name);
}
}

if(myArray.length!=0)
{
alert("The following text boxes are empty:\n"+myArray);
}
}
</script>
</head>
<body bgcolor=pink >
<h1 align=center> Text Box Validation </h1>

<form name="myForm" onSubmit="validate()">


Name: &nbsp&nbsp<input type=text name="name" /><br><br>
Course: &nbsp<input type=text name="class"/><br><br>
Age: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type=text name="Age"/><br><br>
<input type="submit" value="Send Message"/>
</form>
</body>
</html>

OUTPUT:

4
WEB PROGRAMMING LAB MANUAL

5
WEB PROGRAMMING LAB MANUAL

6
WEB PROGRAMMING LAB MANUAL

3. Develop a HTML Form, which accepts any Mathematical expression. Write


JavaScript code to Evaluates the expression and Displays the result.

SOLUTION:

<html>
<head>
<script type = "text/javascript">
function math_exp()
{
var x = document.form1.exptext.value;
var result = eval(x);
document.form1.resulttext.value = result;
}
</script>
</head>
<body bgcolor=pink >
<h1 align=center> Evaluating Arithmetic Expression</h1>
<form name = "form1">

Expression:<input type = "text" name = "exptext" /><br><br>


&nbsp&nbsp<input type="button" value = "Calculate" onclick="math_exp()"/><br>
&nbspResult: &nbsp&nbsp&nbsp&nbsp<input type = "text" name = "resulttext" />

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

7
WEB PROGRAMMING LAB MANUAL

OUTPUT:

8
WEB PROGRAMMING LAB MANUAL

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

SOLUTION:

<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="rose.jpg" onclick="moveImage('layer1')" alt="MyImage"></div>

<div id="layer2"><img src="lotus.jpg" onclick="moveImage('layer2')" alt="MyImage"></div>

<div id="layer3"><img src="image2.jpg" onclick="moveImage('layer3')"alt="MyImage"></div>


</body>

</html>
9
WEB PROGRAMMING LAB MANUAL

OUTPUT:

10
WEB PROGRAMMING LAB MANUAL

11
WEB PROGRAMMING LAB MANUAL

5. WRITE A JAVASCRIPT CODE TO FIND THE SUM OF N NATURAL


NUMBERS. (USE USER-DEFINED FUNCTION)
SOLUTION:

<html>

<head>

<title>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 are:"+sum);

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

12
WEB PROGRAMMING LAB MANUAL

OUTPUT:

13
WEB PROGRAMMING LAB MANUAL

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

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

14
WEB PROGRAMMING LAB MANUAL

var year= "Two Thousand and Twenty";

var days=["First","Second","Third","Fourth","Fifth","Sixth","Seventh","Eigth","Ninth",

"Tenth","Eleventh","Twelfth","Thirteenth","Fourteenth","fifteenth","Sixteenth",
"Seventeenth", "Eighteenth", "Nineteenth", "Twenty", "Twenty First", "Twenty Second",
"TwentyThird","TwentyFourth","TwentyFifth","TwentySixth","TwentySeventh","Twenty
Eight", "Twenty Nine", "Thirty", "Thirty First"];

var months=["January","Febraury","March", "April","May", "June", "july", "August",


"September", "October", "November", "December"];

if(currYear==2020)

alert("Today date is :: "+days[currDate-1]+" "+months[month]+" "+year);

else

alert("Today date is :: "+days[currDate-1]+" "+months[month]+" "+currYear);

</script>

</head>

<body bgcolor=pink>

<form>

<input type=button value="Click Here" onClick="display()"/>

</form>

</body>

</html>

15
WEB PROGRAMMING LAB MANUAL

OUTPUT:

16
WEB PROGRAMMING LAB MANUAL

7. Create a form for Student information. Write JavaScript code to find


Total, Average, Result and Grade.
SOLUTION:

<html>

<head>

<title>Registration Form</title>

<script type = "text/javascript">

function calc()

var m1,m2,m3,avg = 0,total = 0, result = "",grade = "";

m1 = parseInt(document.form1.wp.value);

m2 = parseInt(document.form1.sp.value);

m3 = parseInt(document.form1.cg.value);

total = m1+m2+m3;

avg = total/3;

if( m1 < 35 || m2 < 35 || m3 < 35)

result = "fail";

grade = "D";

else if(avg >= 75)

result = "Distinction";

grade = "A+";

17
WEB PROGRAMMING LAB MANUAL

else if(avg >= 60 && avg < 75)

result = "First class";

grade = "A";

else if(avg >= 50 && avg < 60)

result = "Second class";

grade = "B";

else if(avg >=35 && avg < 50)

result = "Pass class";

grade = "C";

else if (avg < 35)

result = "Fail";

Grade = "D";

document.form1.result.value = result;

document.form1.grade.value = grade;

document.form1.total.value = total;

document.form1.average.value = avg;

18
WEB PROGRAMMING LAB MANUAL

</script>

</head>

<body bgcolor=pink>

<h1 align=center> STUDENT FORM </h1>

<body>

<form name = "form1" >

<table border = "5" align=center>

<tr>

<td> Student Name</td>

<td><input type = "text" /></td>

</tr>

<tr>

<td> Semester</td>

<td><input type = "text" /></td>

</tr>

<tr>

<td colspan = "2" align = "center">SUBJECT MARKS</td>

</tr>

<tr>

<td>Web Programming</td>

<td><input type = "text" name = "wp" /></td>

</tr>

<tr>

<td>Computer Graphics</td>

19
WEB PROGRAMMING LAB MANUAL

<td><input type = "text" name = "cg" /></td>

</tr>

<tr>

<td>System Programming</td>

<td><input type = "text" name = "sp" /></td>

</tr>

<tr>

<td colspan = "2" align = "center"><input type = "button" onclick = "calc()" value =
"CALCULATE" /></td>

</tr>

<tr>

<td>Total</td>

<td><input type = "text" name = "total"/></td>

</tr>

<tr>

<td>Average</td>

<td><input type = "text" name = "average" /></td>

</tr>

<tr>

<td>Result</td>

<td><input type = "text" name = "result" /></td>

</tr>

<tr>

20
WEB PROGRAMMING LAB MANUAL

<td>Grade</td>

<td><input type = "text" name = "grade"/></td>

</tr>

</table>

</form>

</body>

</html>

OUTPUT:

21
WEB PROGRAMMING LAB MANUAL

22
WEB PROGRAMMING LAB MANUAL

8. Create a form for Employee information. Write JavaScript code to find


DA, HRA, PF, TAX, Gross pay, Deduction and Net pay.
SOLUTION:

<html>

<head>

<body bgcolor=pink>

<body>

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

23
WEB PROGRAMMING LAB MANUAL

// tax is 20%of gross

var tax=0.2*gross;

var deductions=pf+tax;

var netsalary=gross-deductions;

document.write("<body bgcolor=skyblue>");

document.writeln("<table border='5' align=center>");

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

24
WEB PROGRAMMING LAB MANUAL

</script>

<body bgcolor="pink" align="center")

<form>

<table border="5" align=center>

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

25
WEB PROGRAMMING LAB MANUAL

OUTPUT:

26
WEB PROGRAMMING LAB MANUAL

27
WEB PROGRAMMING LAB MANUAL

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.

SOLUTION:

<html>

<head>

<title> PIZZA HURT </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++)

28
WEB PROGRAMMING LAB MANUAL

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)

29
WEB PROGRAMMING LAB MANUAL

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=skyblue text=blue>

<h1 align=center> PIZZA HURT </h1>

<hr>

<form name="Menu Form">

<table bgcolor=pink border=10 align=center>

<tr> <th colspan=2 align=center>

<h2> Menu</h2> </th>

</tr>

<tr>

<td> Major Dishes : </td>

<td> <select id=major size=3 multiple="multiple">

30
WEB PROGRAMMING LAB MANUAL

<option value=100> Veggie Supreme </option>

<option value=150> Double Cheese </option>

<option value=50> Classic Tomato </option>

<option value=50> Classic Corn </option>

</td>

</tr>

<tr>

<td> Starters </td>

<td> <select id="starters" size=3 multiple="multiple">

<option value=80> French Fries </option>

<option value=90> Cheesy Bread Sticks</option>

<option value=60> Garlic Bread </option>

<option value=90> Cheese Fingers</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>

31
WEB PROGRAMMING LAB MANUAL

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

OUTPUT:

32
WEB PROGRAMMING LAB MANUAL

33
WEB PROGRAMMING LAB MANUAL

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.
SOLUTION:

<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";

34
WEB PROGRAMMING LAB MANUAL

</script>

</head>

<body bgcolor="pink" text=Black>

<h1 align = center> Mouse Events </h1>

<hr>

<form >

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


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

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


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

</form>

</body>

</html>

OUTPUT:

35
WEB PROGRAMMING LAB MANUAL

36
TABLE OF CONTENTS

PGM NO. PGM NAME


1 Write HTML Code to Illustrate formatting tags

2 Write HTML Code to Illustrate list tags.

3 Write HTML Code to Illustrate list tags


4 Write an HTML code to design college admission Form

5 Write a program to illustrate Prompt window

6 Write a Javascript to reverse a given number.

7 Write a javascript to find factorial of a given number.

8 Design an XML document to store information about a student. The


information must include USN, Name, and Name of the College, Brach,
Year of Joining, and e-mail id. Make up sample data for 2 students. Create
a CSS style sheet and use it to display the document.

9 Create an XSLT style sheet print college details

10 Develop and demonstrate, using JavaScript script, a HTML document that


collects the USN 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.

1
1. Write HTML Code to Illustrate formatting tags

SOLUTION

<html>
<head>
<title>TAGS</title>
</head>
<body bgcolor=pink>
<h1 align=center>FORMATTING TAGS</h1>
<p>This text is normal.</p><br>
<b>This text is bold.</b><br>
<strong>This text is strong</strong><br>
<i>This text is italic</i><br>
<em>This text is emphasized</em><br>
<h2>HTML <small>Small</small> Formatting</h2><br>
<h2>HTML <mark>Marked</mark> Formatting</h2><br>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite <ins>color</ins> is red.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body >
</html>

2
OUTPUT:

3
2. Write HTML Code to Illustrate list tags.

SOLUTION:

<html>
<body>

<h2> UNORDERED LIST </h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<h2> ORDERED LIST</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<h2>DESCRIPTION LIST </h2>

<dl>

<dt>Coffee</dt>

<dd>-Black Hot Drink</dd>

<dt>Milk</dt>

<dd>-White Cold Drink</dd>

</dl>

</body>

</html>
4
OUTPUT:

5
3. Write HTML code to illustrate table tags
SOLUTION:

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h2>Table tags</h2>
<p>Use the CSS border property to add a border to the table.</p>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
6
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

OUTPUT:

7
4. Write an HTML code to design college admission Form

SOLUTION

<html>
<head>
<title>College admission Form</title>
</head>
<body>

<h2>College Admission Form</h2>

<form>
First name:<br>
<input type="text" name="firstname">
<br>

Last name:<br>
<input type="text" name="lastname">
<br><br>

Gender:<br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br><br>

Stream: <br>
<input type="checkbox" name="stream1" value="arts"
checked="checked">Arts
<br>
<input type="checkbox" name="stream2" value="science">Science
<br>
<input type="checkbox" name="stream3"
value="commerce">Commerce
<br><br>

8
Mobile:<br>
<input type="text" name="mobile">
<br><br>

Address:<br>
<textarea name="address" rows="4" cols="50"> </textarea>
<br> <br>

Course:<br>
<select name = "course" size=2>
<option> BBA </option>
<option> BCA </option>
<option> BSc </option>
<option> Bcom</option>
<option> BA</option>
</select>
<br>

<input type="submit" value="Submit form">


<input type="reset" value="Reset form">
</form>
</body>
</html>

OUTPUT:

9
5. Write a program to illustrate Prompt window
<html>
<body>
<p>Click the button to demonstrate the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var person = prompt("Please enter your name", "");
if (person != null) {
document.getElementById("demo").innerHTML =
"Hello " + person + "! How are you today?";
}
}
</script>
</body>
</html>
10
6. Write a Javascript to reverse a given number.
<html>
<head>
<title>Reverse a Number</title>
<script type="text/javascript">
var a,b=0;
a=parseInt(prompt("Enter number to reverse:"));
while(a>0)
{
b=b*10;
b=b+parseInt(a%10);
a=parseInt(a/10);
}
document.write("Reversed number:",b);
</script>
</head>
<body bgcolor=pink >
</body>
</html>

7. Write a javascript to find factorial of a given number.


<html>
<head>
<title>Factorial</title>
<script type="text/javascript">
function factorial(n)
{

11
if(n==0)
return 1;
else
return n*factorial(n-1);
}
var num;
num=parseInt(window.prompt("Enter a number:"));
window.alert("Factorial of a number " + num +" is: " +factorial(num));

</script>
</head>
<body bgcolor=pink >
<h1 align=center>FACTORIAL OF NUMBER</H1>
</body>
</html>

8. Design an XML document to store information about a student .The


information must include USN, Name, and Name of the College,
Brach, Year of Joining, and e-mail id. Make up sample data for 2
students. Create a CSS style sheet and use it to display the document.

Lab9.xml
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="lab9.css"?>
<KLE>
<STUDENT>
<USN>BCA160001</USN>
<NAME>Arun Kumar</NAME>
12
<COLLEGE> RLS </COLLEGE>
<BRANCH>BCA</BRANCH>
<YEAR>2016</YEAR>
<EMAILID>[email protected]</EMAILID>
</STUDENT>
<STUDENT>
<USN>BBA160002</USN>
<NAME>Swaroop J</NAME>
<COLLEGE> Lingaraj</COLLEGE>
<BRANCH>BBA</BRANCH>
<YEAR>2016</YEAR>
<EMAILID>[email protected]</EMAILID>
</STUDENT>
</KLE>

lab9.css
KLE
{
background-color:white;
width: 100%;
}
STUDENT
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}

13
USN,NAME
{
color: red;
font-size: 14pt;
}
COLLEGE,BRANCH,YEAR
{
display: block;
color: blue;
margin-left: 20pt;
}
EMAILID
{
display: block;
color: maroon;
margin-left: 20pt;
font-style: italic;
}

9. Create an XSLT style sheet print college details


lab10.xml

<?xml version="1.0" encoding="utf-8"?>


<?xml-stylesheet type="text/xsl" href="lab10.xsl"?>
<KLE>
<COLLEGE>
<INFO>
14
Bachelor of Computer Application
with a mission to provide high quality Computer education to the
students.
The program aims to bridge the gap between the IT industries and the
institutes
by imparting in depth knowledge of cutting edge technologies and thus
producing
the most diverse talents to the students opting BCA.
</INFO>
</COLLEGE>
</KLE>

Lab10.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<style>
body {background-color: lightblue ;}
</style>
</head>
<body>
<h2> ABOUT COLLEGE</h2>
<xsl:apply-templates select="/KLE/COLLEGE/INFO"/>

15
</body>
</html>
</xsl:template>
</xsl:stylesheet>

OUTPUT:

10. Develop and demonstrate, using JavaScript script, a HTML document


that collects the USN 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.
<html>

<head>

<title> USN validator </title>

<script type="text/javascript">

function formValidator()

var usn = document.getElementById('usnFrm');

usnExp=/[a-zA-Z]{2}\d{6}/

if(usn.value.length==0)

alert("USN is empty.");

16
usn.focus();

return false;

else if(!usn.value.match(usnExp))

alert("USN IS NOT IN A CORRECT FORM");

usn.focus();

return false;

alert("USN: "+usn.value+" is in correct format");

return true;

</script>

</head>

<body>

<form onSubmit = "formValidator()">

Enter your USN : <input type="text" id="usnFrm"/>

<br />

<input type ="submit" value="SUBMIT"/>

17
</form>

</body>

</html>

OUTPUT:

18
19

You might also like