21CS1202 WAD Question BANK For Students 2022

21CS1202– WEB APPLICATION DEVELOPMENT (LAB INTEGRATED)
LIST OF QUESTIONS
1. Create a web page with the following using html

a. To embed a map in a web page
b. To fix the hot spots in that map
c. Show all the related information when the hot spots are clicked.
2. Create your own resume using html 5 tags
3. Create web page to demonstrate embedded style sheet
4. Create web page to demonstrate external style sheet
5. Create web page to demonstrate inline style sheet
6. Write a JavaScript code to find and replace the one word with another in the user given input
using Regular Expression and show the result
7. Create a Registration form and validate the form fields using JavaScript
8. Create a Pan Card Validation form using JavaScript consider the 10th character to be an
alphabet.
 Get the user’s First Name, Last Name and other required fields as input
 Assume the last digit of the Pan Number to be an alphabet
 Validate the PAN Number
9. Demonstrate the feature of IFrame
PROGRAM:
<!DOCTYPE html>
<head>
<style>
h1{
border:1px double #0000FF;
background-color:gold;
}
</style>
</head>
<body>
<h1>Dynamically Writing HTML code on IFrame</h1>
<iframe id="frame1"
title="Inline Frame Example"
1
width="300"
height="150"
srcdoc="<h1>This is <i>iFrame</i> with dynamically generated content</h1>"
frameborder=1>
</iframe>
<h1>Embedding other html page in IFrame</h1>
<iframe id="frame2"
width="600"
height="200"
src="rollover.html"
frameborder=1>
</iframe>
</body>
</html>
OUTPUT:
10. Write a JavaScript program to find the given number is odd or even?
Program:
<!DOCTYPE html>
2
<html>
<head>
<script>
var n = parseInt(prompt( "Enter the number to find even or odd?" ));
if(n%2==0)
document.write(n+" is even");
else
document.write(n+" is Odd");
</script>
</head>
<body>
</body>
</html>
Output:
11. Write a JavaScript program to Print first N natural number

<!DOCTYPE html>
<html>
<head>
<script>
var n = parseInt(prompt( "Enter the value of N?" ));
document.write("The first "+n+" natural numbers are:<br>" );
var i=1;
while(i<=n)
{
3
document.write("<li>"+i);
i++;
}
</script>
</head>
<body>
</body>
</html>
Output:
12. Write a JavaScript program to print Factorial of the given number

PROGRAM:
<!DOCTYPE html>
<html>
<head>
4
<script>
function factorial()
{
var n = parseInt(document.getElementById("n").value);
var f=1;
for(i=2;i<=n;i++)
f=f*i;
alert("factorial is "+f);
}
</script>
</head>
<body>
Enter the number to find factorial:<br/>
<input type=text id="n" autofocus/><br/>
<input type=button value="Find factorial" onClick="factorial()"/>
</body>
</html>
Output:
13. Write a JavaScript program to add two number using user defined function
Program:
<!DOCTYPE html>
<html>
<head>
<script>
function add(a,b)
5
{
var a = parseFloat(a);
var b = parseFloat(b);
var result=a+b;
document.getElementById("result").innerText="Sum of two numbers="+result;
}
</script>
</head>
<body>
First Number:<br/>
<input type=text id="A" autofocus/><br/>
Second Number:<br/>
<input type=text id="B" /><br/>
<input type=button
value="Compute Sum"
onClick="add(document.getElementById('A').value,
document.getElementById('B').value)"/>
<p id="result"></p>
</body>
</html>
OUTPUT:
14. Write a JavaScript program to demonstrate slide show of pictures?
6
PROGRAM:
<html>
<head>
<script>
cnt=0;
ma=new Array("flow20.jpg","flow21.jpg","flow22.jpg");
function slideShow()
{
cnt++;
if(cnt==ma.length)cnt=0;
document.getElementById("myimg").src=ma[cnt];
setTimeout("slideShow()",2000);
}
</script>
</head>
<body onLoad="slideShow()">
<center>
<h1>Slide Show</h1>
<hr/>
<form name=frm>
<img src="flow20.jpg" ID="myimg"
style="border:red double 10px;width:600;height:400"/>
<hr/>
</form>
</body></html>
OUTPUT:
7
15. Write a JavaScript program to display digital clock on web page?
PROGRAM:
<html>
<head>
<script language="JavaScript">
var timer=null;
function start()
{
timer=setInterval("myTimer()",1000);
}
function myTimer()
{
var dt=new Date();
document.getElementById("clock").innerHTML=dt.toLocaleTimeString();
}
8
function stop()
{
clearInterval(timer);
}
</script>
</head>
<body>
<center>
<input type=button value="Start Timer" onClick="start()"/>
<input type=button value="Stop Timer" onClick="stop()"/>
<h1 id="clock" align=center></h1>
</body>
</html>
OUTPUT:
16. Write a JavaScript program to sort and display the content of array?
PROGRAM:
<html>
<head>
var arr=eval(prompt("Enter Array"));
document.write("<h1>Content of array before sort:<hr/>");
document.write(arr);
arr.sort(function(a,b){ return a-b;});
document.write("<hr/>Content of array after sort:<hr/>");
9
document.write(arr);
document.write("<hr/><li>The minimum value: "+arr[0]);
document.write("<li>The maximum value: "+arr[arr.length-1]);
</script>
</head>
<body bgcolor="silver">
</body>
</html>
Output:
17. Write a JavaScript program to create rollover effect on image using onMouseOver,
onMouseOut, onClick events
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<script>
10
function rollOver() {
document.getElementById("img1").src="two.jpg";
}
function rollOut() {
document.getElementById("img1").src="one.jpg";
}
function mouseClick() {
document.getElementById("img1").src="three.jpg";
}
</script>
</head>
<body>
<center>
<hr>
<h2>move the mouse pointer on the image</h2>
<hr/>
<img src="one.jpg" id="img1"
onMouseOver="rollOver()"
onMouseOut="rollOut()"
onClick="mouseClick()" />
<hr/>
</body>
</html>
OUTPUT:
18. Write a JavaScript program to use confirm() method to close current browser window?
PROGRAM:
<html>
<head>
<script>
function ensure()
{
if(confirm("Are you sure to close window?"))
window.close();
}
</script>
</head>
<body>
<center>
11
Click the button to close browser<br/>
<input type=button value="Close" onClick="ensure()"/>

</body>
</html>
OUTPUT:
19. Write a JavaScript program to show the recent character pressed in the text box using
onKeyDown event?
PROGRAM:
<!DOCTYPE html>
<html>
<body>
<center>
<h2>DOM Event listener</h2>
Enter text:
<input type=text id="txt1"
onkeydown="showkey(event)" autofocus/><br/>
<p id="demo"></p>
<script>
function showkey(event)
{
result=document.getElementById("demo");
result.innerHTML ="Last keyis pressed==>"+event.key;
}
12
</script>
</body>
</html>
Output:
20. Write a JavaScript program to put focus on text box when page is loaded. When user click
submit button, if text box is empty then display alert message and put the focus on text box
using focus() method of element?
PROGRAM:
<!DOCTYPE html>
<html>
<body>
<center>
<h2>Click submit Button</h2>
<form onSubmit="return submitform()">
Enter text:<br/>
<input type=text id="txt1" autofocus/><br/>
<input type="submit"></p>
</form>
<script>
function submitform()
{
result=document.getElementById("txt1");
if(result.value=="")
{
alert("text field shoild not be empty");
result.focus();
return false;
}
else
13
{
alert("form submission successful");
return true;
}
}
</script>
</body>
</html>
OUTPUT:
21. Write a JavaScript program to display new window using window.open() and close the new
window after 2000 milliseconds?
PROGRAM:
<html>
<head>
var name=prompt("What is your Name?");
function welcomeWindow()
{
mywin=window.open("","","width=560,height=160,left=100,top=300");
14
mywin.document.write("<body bgcolor=yellow>");
mywin.document.write("<h2>Welcome "+name+ "</h2>");
mywin.document.write("<li>your login time:"+new Date());
setTimeout("mywin.close()",2000);
}
</script>
</head>
<body bgcolor="black" text="yellow" onLoad="welcomeWindow()">
<h1> Example of creating new window</h1>
</div>
</body>
</html>
OUTPUT:
22. Write a JavaScript program to change the border style of paragraph when user click button
PROGRAM:
<html>
15
<head>
<script>
function apply()
{
var h=document.getElementsByTagName("h1");
h[0].style.border="5px solid red";
}
</script>
</head>
<body>
<center>
<input type=button onClick="apply()" value="Add Border to Heading"/>
<br\>
<h1>This is heading</h1>
</body>
<html>
OUTPUT:
After clicking button:
16
17

21CS1202 WAD Question BANK For Students 2022

Uploaded by

Copyright:

Available Formats

You might also like

21CS1202 WAD Question BANK For Students 2022

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

21CS1202 WAD Question BANK For Students 2022

Uploaded by

Copyright:

Available Formats

21CS1202– WEB APPLICATION DEVELOPMENT (LAB INTEGRATED)

1. Create a web page with the following using html

<h1>Embedding other html page in IFrame</h1>

11. Write a JavaScript program to Print first N natural number

12. Write a JavaScript program to print Factorial of the given number

14. Write a JavaScript program to demonstrate slide show of pictures?

<input type=button value="Close" onClick="ensure()"/>

After clicking button:

You might also like