Scribd
Upload
52 views

ABE Web Lab 21 Scheme

1. The document discusses developing XHTML files with JavaScript scripts to: - Display the first n Fibonacci numbers given a number n - Display a table of numbers from 1 to n and their squares 2. It also discusses validating a USN input using regular expressions and displaying errors. 3. Another task is to create stacking paragraphs where hovering over a paragraph brings it to the top.

Uploaded by

Sneha Gouda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
52 views

ABE Web Lab 21 Scheme

1. The document discusses developing XHTML files with JavaScript scripts to: - Display the first n Fibonacci numbers given a number n - Display a table of numbers from 1 to n and their squares 2. It also discusses validating a USN input using regular expressions and displaying errors. 3. Another task is to create stacking paragraphs where hovering over a paragraph brings it to the top.

Uploaded by

Sneha Gouda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 28

WEB Programming 21CSL 481

1. Develop and demonstrate a XHTML file that includes Javascript script for the following
problems:
a) Input: A number n obtained using prompt Output: The first n Fibonacci numbers
2. Develop and demonstrate a XHTML file that includes Javascript script for the following
problems:
Input: A number n obtained using prompt
output: A table of numbers from 1 to n and their squares using alert

3. Develop and demonstrate, using Javascript script, a XHTML document that collects the USN ( 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. Modify the
above program to get the current semester also (restricted to be a number from 1 to 8).
4. Develop and demonstrate, using Javascript script, a XHTML document that contains three short
paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse
cursor can be placed over some part of them. When the cursor is placed over the exposed part of any
paragraph, it should rise to the top to become completely visible.

5. Modify the above document so that when a paragraph is moved from the top stacking position, it
returns to its original position rather than to the bottom.

6. Design an XHTML document to store information about a student in an engineering college affiliated
to VTU. The information must include USN, Name, and Name of the College, Brach, Year of
Joining, and e-mail id. Make up sample data for 3 students. Create a CSS style sheet and use it to
display the document.

7. Write a JavaScript to design a simple calculator to perform the following operations: sum, product,
difference and quotient
8. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10 and outputs
HTML text that displays the resulting values in an HTML table format
9. Write a JavaScript code that displays text “TEXT-GROWING” with increasing font size in the
interval of 100ms in RED COLOR, when the font size reaches 50pt it displays “TEXT-
SHRINKING” in BLUE color. Then the font size decreases to 5pt.
10. Develop and demonstrate a HTML5 file that includes JavaScript script that uses functions for the
following problems:
a. Parameter: A string
Output: The position in the string of the left-most vowel
b. Parameter: A number
Output: The number with its digits in the reverse order
EXPERIMENT NO. 1

AIM: To display Fibonacci series using Javascript

PROGRAM:

<!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>Fibonacci Series</title>

</head>

<body>

<script type="text/javascript">

var fib1=0,fib2=1,fib=0;

var num=prompt("Enter a number : \n", "");


if(num != null && num > 0 )
{
document.write("<h1>The first "+num+" numbers in the fibonacci series
</h1>");

if(num==1)

document.write("<h2> "+ fib1 + "</h2>");


else

{
document.write("<h2>" + fib1 + "</h2>");
document.write("<h2>" + fib2 + "</h2>");

}
for(i=3;i<=num; i++)
{

fib= fib1 + fib2;

document.write("<h2> " + fib + "</h2>");


fib1=fib2;
fib2=fib;

else
alert("Invalid Input");
</script>

</body>

</html>

SAMPLE OUTPUT
EXPERIMENT NO. 2
PROGRAM:
AIM: To display the square of a given numbers using Javascript

<!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>Number and its squares</title>

</head>

<body>

<script type="text/javascript">

var num = prompt("Enter a number : \n", "");


var msgstr;

if(num > 0 && num !=null){

msgstr="Number and its Squares are \n";


for(i=1;i <= num; i++)
{

msgstr = msgstr + i + " ^ 2 = " + i*i + "\n";

alert(msgstr);
}

else
alert("Invalid Input");
</script>

</body>

</html>

Note:
The \u00B2 character displays superscript 2 in the javascript boxes.

Code:
msgstr = msgstr + i + "\u00B2 = " + i*i + "\n";
SAMPLE OUTPUT
EXPERIMENT NO. 3

AIM: To validate the USN of the student and to print them

PROGRAM:

<!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> USN validator </title>


<script type="text/javascript"> function

formValidator()

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


usnExp=/[1-4][A-Z][A-Z]\d{2}[A-Z][A-Z]\d{3}$/
if(usn.value.length==0)

alert("USN is empty."); usn.focus();

return false;

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

alert("USN should bein VTU USN format, eg., 4GK10CS001");

usn.focus();

return false;

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

}
</script>
</head>
<body>

<form onSubmit = "formValidator()">

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

<br />

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

</form>
</body>

</html>

SAMPLE OUTPUT
EXPERIMENT No.3

PROGRAM: To display the current semester

<!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> USN validator </title>

<script type="text/javascript">
function formValidator()
{
var usn = document.getElementById('usnFrm');
var sem = document.getElementById('semFrm');

usnExp=/[1-4][A-Z][A-Z]\d{2}[A-Z][A-Z]\d{3}$/
semExp=/^([1-8])$/

if(usn.value.length==0)
{
alert("USN is empty.");
usn.focus();
return false;
}
else if(!usn.value.match(usnExp))
{
alert("USN should bein VTU USN format, eg., 4GK10CS001");
usn.focus();
return false;
}
else if(sem.value.length==0)
{
alert("Semester field is empty.");
sem.focus();
return false;
}
else if(!sem.value.match(semExp))
{
alert("Semester number should be from 1 to 8");
sem.focus();
return false;
}
alert("USN: "+usn.value+"\n Semester: "+sem.value);
return true;
}
</script>
</head>
<body>
<h1>Form validation using javascript</h1>
<form onSubmit = "formValidator()">
<p>Enter your VTU USN : <input type="text" id="usnFrm"/>
</p>
<p>Enter your current semester : <input type="text" id="semFrm"/>
</p>
<input type ="submit" value="SUBMIT"/>
</form>
</body>
</html>

SAMPLE OUTPUT
EXPERIMENT No.4
AIM: To display the stacking of elements
<!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>Paragraph Stacking </title>

<style type="text/css">
.para
{
border: solid thin black;
padding:1cm;
position:absolute;
width:300px;
}
#layer1
{
background-color:yellow;
top:200px; left:400px;
z-index:1;
}
#layer2
{
background-color:red;
position:absolute;
top:220px; left:420px;
z-index:2;
}
#layer3
{
background-color:blue;
top:240px; left:440px;
z-index:3;
}
</style>
<script type="text/javascript">
var topLayer = "layer3";
function mover(toTop) {
var oldTop = document.getElementById(topLayer).style;
var newTop = document.getElementById(toTop).style;
oldTop.zIndex = 0;
newTop.zIndex = 5;
topLayer = document.getElementById(toTop).id;
}
</script>
</head>
<body>

<h3>Visibility of stacked paragraphs using Javascript</h3>


<div id="layer1" class="para" onMouseOver="mover('layer1')">
10CSL78 </div>
<div id="layer2" class="para" onMouseOver="mover('layer2')">
------------Web Programming Laboratory----------</div>
<div id="layer3" class="para" onMouseOver="mover('layer3')">
------------Experiment 4 - Stacking of paragraphs----</div>
</body>
</html>

SAMPLE OUTPUT
EXPERIMENT No.5
AIM: To display the stacking of elements

<!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>Paragraph Stacking </title>
<style type="text/css">
.para
{
border: solid thin black;
padding:1cm;
position:absolute;
width:300px;
}
#layer1
{
background-color:yellow;
top:200px; left:400px;
z- index:1;
}
#layer2
{
background-color:red;
position:absolute;
top:220px; left:420px;
z-index:2;
}
#layer3
{
background-color:blue;
top:240px; left:440px;
z-index:3;
}
</style>
<script type="text/javascript">
var topLayer = "layer3";
var origPos;
function mover(toTop, pos) {
var newTop = document.getElementById(toTop).style;

newTop.zIndex = 5;
topLayer = document.getElementById(toTop).id;
origPos=pos;
}

function moveBack()
{
var layer = document.getElementById(topLayer).style;
layer.zIndex=origPos;
}
</script>
</head>
<body>
<h3>Visibility of stacked paragraphs using Javascript</h3>
<div id="layer1" class="para" onMouseOver="mover('layer1','1')" onMouseOut="moveBack()">
10CSL78 </div>
<div id="layer2" class="para" onMouseOver="mover('layer2','2')" onMouseOut="moveBack()">
------------Web Programming Laboratory----------</div>
<div id="layer3" class="para" onMouseOver="mover('layer3','3')" onMouseOut="moveBack()">
------------Experiment 5 - Stacking of paragraphs----</div>
</body>
</html>

SAMPLE OUTPUT:
EXPERIMENT No.6

AIM: To read student details using XHTML

1. studentDetails.xml
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="student.css"?>
<VTU>
<STUDENT>
<USN>1GD11CS001</USN>
<NAME>Arun Kumar</NAME>
<COLLEGE> GOPALAN College of Engineering</COLLEGE>
<BRANCH>Computer Science and Engineering</BRANCH>
<YEAR>2011</YEAR>
<EMAILID>[email protected]</EMAILID>
</STUDENT>

<STUDENT>
<USN>1GD10ME012</USN>
<NAME>Swaroop J</NAME>
<COLLEGE> GOPALAN College of Engineering</COLLEGE>
<BRANCH>Mechanical Engineering</BRANCH>
<YEAR>2010</YEAR>
<EMAILID>[email protected]</EMAILID>
</STUDENT>

<STUDENT>
<USN>1GD12CS030</USN>
<NAME>Pradeep L</NAME>
<COLLEGE> GOPALAN College of Engineering</COLLEGE>
<BRANCH> Computer Science and Engineering </BRANCH>
<YEAR>2012</YEAR>
<EMAILID>[email protected]</EMAILID>
</STUDENT>
</VTU>

2. student.css
VTU
{
background-color: #ffFFff;
width: 100%;
}
STUDENT
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}

USN,NAME
{
color: #FF9900;
font-size: 14pt;
}
COLLEGE,BRANCH,YEAR
{
display: block;
color: #000000;
margin-left: 20pt;
}
EMAILID
{
display: block;
color: #0000FF;
margin-left: 20pt;
font-style: italic;
}

SAMPLE OUTPUT:
7. Write a JavaScript to design a simple calculator to perform the following
operations: sum, product, difference and quotient

Explanation:

This program demonstrates the use of embedding Javascript inside a webpage


designed using HTML. The usefulness of Java script in client-side computations for
small tasks, displaying results in its own graphical window, rendering the output to the
web pages dynamically and requesting for input from the user are illustrated through
this program.
Program :
HTML File (1.html)
<html>
<script type=text/javascript src=1.js>
</script>
<body>
<table border>
<tr >
<td colspan=4><input type=text id=res size=16 onfocus="this.blur();"></td>
</tr>
<tr>
<td><input type=button id=b1 value=0 size=2 onclick=f('0')></td>
<td><input type=button id=b2 value=1 size=2 onclick=f('1')></td>
<td><input type=button id=b3 value=2 size=2 onclick=f('2')></td>
<td><input type=button id=b4 value=+ size=2 onclick=f('+')></td>
</tr>
<tr>
<td><input type=button id=b5 value=3 size=2 onclick=f('3')></td>
<td><input type=button id=b6 value=4 size=2 onclick=f('4')></td>
<td><input type=button id=b7 value=5 size=2 onclick=f('5')></td>
<td><input type=button id=b8 value=- size=2 onclick=f('-')></td>
</tr>
<tr>
<td><input type=button id=b9 value=6 size=2 onclick=f('6')></td>
<td><input type=button id=b10 value=7 size=2 onclick=f('7')></td>
<td><input type=button id=b11 value=8 size=2 onclick=f('8')></td>
<td><input type=button id=b12 value=* size=2 onclick=f('*')></td>
</tr>
<tr>
<td><input type=button id=b13 value=9 size=2 onclick=f('9')></td>
<td><input type=button id=b14 value=+/- size=2 onclick=f('--')></td>
<td><input type=button id=b15 value='=' size=2 onclick=f('=')></td>
<td><input type=button id=b16 value='/' size=2 onclick=f('/')></td>
</tr>
<tr>
<td colspan=4 ><input type=button value=Clear size=16 onclick=f('c')></td>
</tr>
</table>
</body>
</html>

Java script Code: (1.js)


function f(d)
{
if(d=='c')
{
document.getElementById('res').value="";
return;
}
res=document.getElementById('res').value;
if(res==0 && d==0)
return;
if(d=='+' || d=='-' || d=='*' || d=='/')
{
opr=d;
num=parseFloat(res);
document.getElementById('res').value=d;
return;
}
if(d=='=')
{
num1=parseFloat(res);
switch(opr)
{
case '+': ans=num+num1; break;
case '-': ans=num-num1; break;
case '*': ans=num*num1; break;
case '/': ans=parseInt(num/num1); break;
}

document.getElementById('res').value=ans;
return;

}
if(d=='--')
{
document.getElementById('res').value*=-1;
return;
}
if(!isNaN(document.getElementById('res').value))
document.getElementById('res').value+=d;
else
document.getElementById('res').value=d;
}
Output:

Initial

view:
8. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to
10 and outputs HTML text that displays the resulting values in an HTML table
format.

Explanation:
This program aims at demonstrating the usefulness of Java script in generating dynamic
web pages using Java script. Accepting user input as web page loads is also demonstrate
in this program. This script also illustrates validation using Java script.

Program
HTML File: (2.html)
<html>
<script type=text/javascript src=2.js>
</script>
<body onload=sc()>
</body>
</html>

Java script Code: (2.js)

function sc()
{
rng=prompt('Enter the range'); res=rng.split("-");
if(res.length!=2)
{
alert("invalid range "); return;
}
first=parseInt(res[0]); second=parseInt(res[1]);
if(first>second)
{
alert("invalid range ");
return;

}
str="<table border=2><tr><th>Number</th><th>Square</th><th>Cube</th></tr>";

for(i=first;i<=second;i++)
{
str=str+"<tr><td>"+i+"<td>"+(i*i)+"<td>"+(i*i*i);
}
document.write(str);

}
9. Write a JavaScript code that displays text “TEXT-GROWING” with increasing font
size in the interval of 100ms in RED COLOR, when the font size reaches 50pt
it displays “TEXT-SHRINKING” in BLUE color. Then the font size decreases to
5pt.

Explanation:
This program brings out the event handling capabilities of Java script. Timer event
handling using Java script is explained in this program. Further, the use of style
attributes in HTML and Java script is demonstrated. This program also brings out
usefulness of Java script in handling dynamic positioning of elements in HTML page.
These give the life to a web page and make it engaging.

Program:

HTML (9.html)
<html>
<script type=text/javascript src=9.js>
</script>
<body onload=fnts()>
<p id="p1" style="font-size:12pt;color=black"> TEXT-GROWING </p>
</body>
</html>

Java script code


(9.js) var grow=true;
function fnts()
{
fntsize=document.getElementById("p1").style.fontSize;
document.getElementById("p1").style.color="red";

ifntsize=parseInt(fntsize);
window.setTimeout(fntGS,100,ifntsize);

function fntGS(ifs)
{
if(grow)
{
ifs=ifs+1;
if(ifs<=50
)
{
document.getElementById("p1").style.fontSize=ifs+"pt";

}
else
{
grow=false;
document.getElementById("p1").style.color="blue";
document.getElementById("p1").innerHTML="TEXT-SHRINKING";

}
else
{
ifs=ifs-1;
if(ifs<5)
return;
document.getElementById("p1").style.fontSize=ifs+"pt
";

}
window.setTimeout(fntGS,100,ifs);
}
OUPUT:
9.Write a JavaScript code that displays text “TEXT-GROWING” with increasing
font size in the interval of 100ms in RED COLOR, when the font size reaches
50pt it displays “TEXT-SHRINKING” in BLUE color. Then the font size
decreases to 5pt.

Explanation:
This program brings out the event handling capabilities of Java script. Timer event
handling using Java script is explained in this program. Further, the use of style
attributes in HTML and Java script is demonstrated. This program also brings out
usefulness of Java script in handling dynamic positioning of elements in HTML page.
These give the life to a web page and make it engaging.

Program:

HTML (9.html)
<html>
<script type=text/javascript src=3.js>
</script>
<body onload=fnts()>
<p id="p1" style="font-size:12pt;color=black"> TEXT-GROWING </p>
</body>
</html>

Java script code


(9.js) var grow=true;
function fnts()
{
fntsize=document.getElementById("p1").style.fontSize;
document.getElementById("p1").style.color="red";

ifntsize=parseInt(fntsize);
window.setTimeout(fntGS,100,ifntsize);

function fntGS(ifs)
{
if(grow)
{
ifs=ifs+1;
if(ifs<=50
)
{
document.getElementById("p1").style.fontSize=ifs+"pt";

}
else
{
grow=false;
document.getElementById("p1").style.color="blue";
document.getElementById("p1").innerHTML="TEXT-SHRINKING";

}
10.Develop and demonstrate a HTML5 file that includes JavaScript script that
uses functions for the following problems:
a. Parameter: A string
Output: The position in the string of the left-most vowel
b. Parameter: A number
Output: The number with its digits in the reverse order

Explanation:
This program demonstrates the structure of HTML5 files and
semantic structure followed. Writing of functions in Java script and form
based event handling in Java script is also illustrated. The dynamic
processing of Java script without reloading HTML5 pages is also
shown.

HTML5 file: (10.html)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demonstrating Java
script functions</title>
</head>
<script type=text/javascript src=4.js>
</script>
<body>
<section>
<h1>Finding left most vowel</h1>
<p>Enter a string: <input type=text id=t1></p>
<input type=button value=Find onclick = alert( findLMV(
document.getElementById('t1').value ))>

</section>
<hr>
<section>
<h1>Reverse of a number</h1>
<p>Enter a number: <input type=text id=t2></p>
<input type=button value=Reverse
onclick=alert(reverse(document.getElementById('t2').value))>

</section>
/body>
</html>
Java script (10.js)

function findLMV(str)
{
for(i=0;i<str.length;i++)
{
if(str.charAt(i)=='a' || str.charAt(i)=='e' || str.charAt(i)=='i' ||
str.charAt(i)=='o' || str.charAt(i)=='u' )
return ("Left most vowel of " + str + " is at location " + (i+1) );
}
return ("No vowels found for string "+ str);

function reverse(num)
{
rnum=0; temp=num; if(isNaN(num))
{
return "invalid number";
}
while(num!=0)
{
rnum *= 10; rnum+= num % 10; num -=
num % 10;
num = Math.floor(num/10);
}
return "Reverse of num "+ temp + " is " + rnum;
}

You might also like