Web Lab Manual2021

BCA604P : WEB PROGRAMMING LAB
PART -A
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 textboxes 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.
PART – B
1. Create a web page to display different types of lists.

2. Create a web page to demonstrate table tag.
3. Create a web page using different levels of style sheet.
4. Create a web page to demonstrate different types of selectors
5. Program to define style sheet for anchor tag.
6. Write a JavaScript to calculate the factorial of a number
7. Write a program to convert lowercase string to uppercase string.
8. Write a program to validate username and password
9. Create a web page to display mouse position.
10. Write a program to replace string using regular expression.
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
<html>
<head>
<title>Element Count</title>
<script>
function elementcount()
{
window.alert("Total nuumber of elements are "+document.Element.elements.length);
}
</script>
</head>
<body>
<h2>Element Count</h2>
<hr/>
<form name="Element">
<table cellpadding="5" cellspacing="5">
<tr>
<td>Name</td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address"/></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="gender" value="Male"/>Male<br/>
<input type="radio" name="gender" value="Female"/>Female
</td>
</tr>
<tr>
<td>Hobbies</td>
<td><input type="checkbox" name="hobbies" value="Reading"/>Reading<br/>
<input type="checkbox" name="hobbies" value="Playing"/>Playing<br/>
<input type="checkbox" name="hobbies" value="Travelling"/>Travelling<br/>
</td>
</tr>
<tr>
<td align="center">
<input type="button" name="count" value="Element Count" onclick="elementcount()"/>
</td>
</tr>
</table>
</form>
</body>
</html>
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 textboxes has been left empty, popup an alert indicating which textbox has been
left empty.
PROGRAM NAME --- “prg2.html”

<html>
<head>
<title>Fill Textbox</title>
<script type="text/javascript" src="prg2.js"></script>
</head>
<body>
<h2>Textbox fill</h2>
<hr/>
<form name="textboxForm">
<tr>
<td>Name</td>
<td><input type="text" name="Name"/></td>
</tr>
<tr>
<td>Age</td>
<td><input type="text" name="Age"/></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="Address"/></td>
</tr>
<tr>
<td>Phone no</td>
<td><input type="text" name="Phone No"/></td>
</tr>
<tr>
<td>Emailid</td>
<td><input type="text" name="Email id"/></td>
</tr>
<tr>
<td align="center">
<input type="button" name="count" value="Check Textboxes" onclick="check()"/>
</td>
</tr>
</table>
</form>
</body>
</html>
PROGRAM NAME – “prg2.js”

function check()
{
var emptytextboxes="The following textboxes are empty\n";
var textboxcount=document.textboxForm.elements.length;
var count=0;
for(var i=0;i<textboxcount;i++)
{
if(document.textboxForm.elements[i].value.length==0)
{
emptytextboxes=emptytextboxes+document.textboxForm.elements[i].name+"\n";
count++;
}
}
if(count==0)
window.alert("All textboxes are filled");
else if(count==textboxcount-1)
window.alert("No textboxes are filled");
else
window.alert(emptytextboxes);
}
3. Develop a HTML Form, which accepts any Mathematical expression. Write JavaScript
code to Evaluates the expression and Displays the result.
prg3.html
<html>
<head>
<title>Mathematical Expression</title>
</head>
<body>
<center>
<h2>Arithmetic Operations</h2>
<hr/>
<br/>
<form name="mathForm">
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Enter the First Operand</th>
<th>Select the Operation</th>
<th>Enter the Second Operand</th>
<th>Result</th>
</tr>
<tr>
<td><input type="text" name="op1"/></td>
<td>
<select name="operator">
<option name="sum" value="+">+</option>
<option name="diff" value="-">-</option>
<option name="prod" value="*">*</option>
<option name="div" value="/">/</option>
<option name="mod" value="%">%</option>
<option name="exp" value="exp">exp</option>
</select>
</td>
<td><input type="text" name="op2" /></td>
<td><input type="text" name="result" readonly="readonly"/></td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="button" name="calresult" value="Calculate" onclick="calculate()">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
prg3.js
function calculate()
{
var validinput=/[0-9,.,-]/
var op1=document.mathForm.op1.value;
var op2=document.mathForm.op2.value;
var operator=document.mathForm.operator.value;
var result=0;
if(op1.length==0)
window.alert("Please enter the first element");
else if(op2.length==0)
window.alert("Please enter the second element");
else if(op1.search(validinput)==-1)
window.alert("Operand1 is not a numeric value");
else if(op2.search(validinput)==-1)
window.alert("Operand2 is not a numeric value");
else
{
var n1=parseFloat(op1);
var n2=parseFloat(op2);
switch(operator)
{
case "+":result=n1+n2;break;
case "-":result=n1-n2;break;
case "*":result=n1*n2;break;
case "/":result=n1/n2;break;
case "%":result=n1%n2;break;
case "exp":result=Math.pow(n1,n2);break;
}
document.mathForm.result.value=result;
}
}
OUTPUT
4. Create a page with dynamic effects. Write the code to include layers and basic animation.
prg4.html
<html>
<head>
<title>Basic Animation</title>
<style type="text/css">
#layer1
{background-color:red;
position:absolute;
height:200px;
width:200px;
left:50px;
top:200px;
}
#layer2
{background-color:yellow;
position:absolute;
height:150px;
width:150px;
left:75px;
top:225px;
}
#layer3
{background-color:blue;
position:absolute;
height:100px;
width:100px;
left:100px;
top:250px;
}
</style>
</head>
<body>
<h2>Basic Animation</h2>
<hr><br/>
<p id="layer1">Layer1 is red color</p>
<p id="layer2">Layer2 is yellow color</p>
<p id="layer3">Layer3 is blue color</p>
<form name="animationForm">
<input type="button" name="ani1" value="Move Red Towards Right"
onclick="moveRed()"/>
<input type="button" name="ani2" value="Move Yellow Towards Right"
onclick="moveYellow()"/>
<input type="button" name="ani3" value="Move Blue Towards Right"
onclick="moveBlue()"/><br/>
<input type="button" name="ani4" value="Show yellow Layer"
onclick="showYellow(true)"/>
<input type="button" name="ani5" value="Hide yellow Layer"
onclick="showYellow(false)"/>
</form>
</body>
</html>
prg4.js
function moveRed()
{
document.getElementById("layer1").style.left="70px";
}
function moveYellow()
{
}
function moveBlue()
{
}
function showYellow(status)
{
if(status)
document.getElementById("layer2").style.visibility="visible";
else
document.getElementById("layer2").style.visibility="hidden";
}
5. Write a JavaScript code to find the sum of N natural Numbers. (Use user-defined function)
prg5.html
<html>
<head>
<title> Sum of n natural numbers</title>
</head>
<body>
<h2>Sum of Natural numbers</h2>
<hr/>
<p>please click the button to calculate sum of n natural numbers</p>
<input type="button" name="calsum" value="Calculate sum of n natural numbers"
onclick="calculate()"/>
</body>
</html>
prg5.js
{
var number=window.prompt("enter the number",0);
var no=parseInt(number);
var sum=(no*(no+1))/2;
window.alert("sum of first"+number+"natural numbers is "+sum);
}
OUTPUT
6. Write a JavaScript code block using arrays and generate the current date in words, this
should include the day, month and year.
prg6.html
<html>
<head>
<title>Date Display</title>

</head>
<body></body>
</html>
prg6.js
var
days=["First","Second","Third","Fourth","Fifth","Sixth","Seventh","Eighth","Ninth","Tenth"
,"Eleventh","Twelfth","Thirteenth","Fourteenth","Fifteenth","Sixteenth","Seventeenth","Eigh
teenth","Nineteenth","Twentyeth","TwentyFirst","TwentySecond","TwentyThird","TwentyF
ourth","TwentyFifth","TwentySixth","TwentySeventh","TwentyEighth","TwentyNinth","Thi
rtyeth","ThirtyFirst"];
var
months=["January","February","March","April","May","June","July","August","September",
"October","November","December"];
var yr="Two Thousand Ninteen";
var dt=new Date();
var date=days[dt.getDate()-1];
var month=months[dt.getMonth()];
var year=dt.getFullYear();
alert("Current Date Number:" + dt.getDate());
alert("Current Month Number:" + (dt.getMonth()+1));
if(year == 2019)
{
alert("Today's date is" + date + " " + month + " " + yr);
}
else
{
alert("Today's date is" + date + " " + month + " " + year);
}
7. Create a form for Student information. Write JavaScript code to find Total, Average,
Result and Grade.
prg7.html
<html>
<head>
<title>Student Details</title>
<script type="text/javascript"src="prg7.js"></script>
</head>
<body>
<center>
<h2>Student details</h2> <hr/> <br/>
<h4>please fill in the following student details</h4>
<br/>
<form name="student">
<tr> <td>Student Name:</td>
<td><input type="text"name="name"/></td> </tr>
<tr> <td>Register No:</td>
<td><input type="text"name="regno"/></td> </tr>
<tr> <td>Theory of computation:</td>
<td><input type="text"name="toc"/></td> </tr>
<tr> <td>System Programming:</td>
<td><input type="text"name="sp"/></td> </tr>
<tr> <td>Cryptography and network security:</td>
<td><input type="text"name="cns"/></td> </tr>
<tr> <td>Web Programming:</td>
<td><input type="text"name="wp"/></td> </tr>
</table> <br/> <br/>
<input type="button"name="result"value="view Result"onclick="calculate()"/>
</form>
</center>
</body>
</html>
prg7.js
{
var name=document.student.name.value;
var regno=document.student.regno.value;
var m1=parseInt(document.student.toc.value);
var m2=parseInt(document.student.cns.value);
var m3=parseInt(document.student.sp.value);
var m4=parseInt(document.student.wp.value);
var total=m1 + m2 + m3 + m4;
var avg=total/4;
var grade,result;
if(m1<40 || m2<40 || m3<40 || m4<40)
{
grade="D";
result="Fail";
}
else
{
if(avg>=60)
{
grade="A";
result="First Class";
}
else if(avg>=50)
{
grade="B";
result="Second Class";
}
else if(avg>=40)
{
grade="C";
result="Pass";
}
else
{
grade="D";
result="Fail";
}
}
document.writeln("<h2>Student Results</h2>");
document.writeln("<pre><b>Name:" + name + "</b></pre>");
document.writeln("<pre><b>Register No:" + regno + "</b></pre>");
document.writeln("<pre><b>Total Marks:" + total + "</b></pre>");
document.writeln("<pre><b>Average:" + avg + "</b></pre>");
document.writeln("<pre><b>Grade:" + grade + "</b></pre>");
document.writeln("<pre><b>Result:" + result + "</b></pre>");
}
8. Create a form for Employee information. Write JavaScript code to find DA, HRA, PF,
TAX, Gross pay, Deduction and Net pay.
Prg8.html
<html>
<head>
<title>Employee Details</title>
</head>
<body>
<center>
<h2>Employee Details</h2>
<hr><br/>
<h4>Please fill in the following EMPLOYEE details</h4><br/>
<form name="employee">
<tr><td>Employee Name:</td>
<td><input type="text" name="name"/></td></tr>
<tr><td>Employee No:</td>
<td><input type="text" name="empno"/></td></tr>
<tr><td>Basic Pay:</td>
<td><input type="text" name="basicpay"/></td></tr>
</table><br/><br/>
<input type="button" name="details" value="View Salary Details" onclick="calculate()"/>
</form>
</center>
</body>
</html>
Prg8.js
{
var name=document.employee.name.value;
var empno=document.employee.empno.value;
var bp=parseInt(document.employee.basicpay.value);
var hra=0.4*bp;
var da=0.6*bp;
var gross=bp + hra + da;
var pf=0.13*gross;
var tax=0.2*gross;
var deductions=pf + tax;
var netsalary=gross - deductions;
document.writeln("<h2>Employee Salary Details</h2>");
document.writeln("<pre><b>Name:" + name + "</b></pre>");
document.writeln("<pre><b>Employee No:" + empno + "</b></pre>");
document.writeln("<pre><b>Basic Salary:Rs." + bp + "</b></pre>");
document.writeln("<pre><b>HRA(40% of Basic):Rs." + hra + "</b></pre>");
document.writeln("<pre><b>DA(60% of Basic):Rs." + da + "</b></pre>");
document.writeln("<pre><b>Gross Salary:Rs." + gross + "</b></pre>");
document.writeln("<pre><b>PF(13% of Gross):Rs." + pf + "</b></pre>");
document.writeln("<pre><b>TAX(20% of Gross):Rs." + tax + "</b></pre>");
document.writeln("<pre><b>Deductions:Rs." + deductions + "</b></pre>");
document.writeln("<pre><b>Net Salary:Rs." + netsalary + "</b></pre>");
}
OUTPUT
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.
Prg9.html
<html>
<head>
<title>Resturant menu details</title>

</head>
<body> <center> <h2>Resturant menu details</h2> <hr/>
<br/><br/> <form name="resturant">
<table border="2" cellpadding="5">
<tr> <td><strong>Major Dishes:</strong></td>
<td> <select name="major" size="3" multiple="multiple" onclick="display()">
<option value="100">vegetable palav</option>
<option value="150">hyderabadi biriyani</option>
<option value="50">roti with curry</option>
</select>
</td> </tr>
<tr> <td><strong>Staters:</strong></td>
<td> <select name="starters" size="3" multiple="multiple" onclick="display()">
<option value="80">gobi manchurian</option>
<option value="40">veg clear soup</option>
<option value="30">masala papad</option>
</select>
</td> </tr>
<tr> <td><strong>Soft Drinks:</strong></td>
<td> <select name="softdrinks" size="3" onclick="display()">
<option value="20">pepsi</option>
<option value="20">coke</option>
<option value="30">lime soda</option>
</select>
</td> </tr>
<tr><td colspan="2"><textarea name="ordereditems" rows="10"
cols="40"></textarea></td>
</tr> </table> <br/>
<table>
<tr><td><input type="button" name="total" value="Total Cost" onclick="calculate()"/></td>
<td><input type="reset" name="clear" value="Clear "/></td>
</table>
</form>
</center>
</body>
</html>
Prg9.js
var totalprice=0;
function display()
{
totalprice=0;
var selectedItems="Items\t\t\tPrice\n---------------------------------------\n";
var index1=document.resturant.major.length;
var index2=document.resturant.starters.length;
var index3=document.resturant.softdrinks.length;
for(var i=0;i<index1;i++)
{
if(document.resturant.major.options[i].selected)
{
var item=document.resturant.major.options[i].text;
var value=document.resturant.major.options[i].value;
totalprice=totalprice+parseInt(value);
selectedItems=selectedItems+item+"\t\t"+value+"\n";
}
}
{
if(document.resturant.starters.options[i].selected)
{
var item=document.resturant.starters.options[i].text;
var value=document.resturant.starters.options[i].value;
}
}
{
if(document.resturant.softdrinks.options[i].selected)
{
var item=document.resturant.softdrinks.options[i].text;
var value=document.resturant.softdrinks.options[i].value;
}
}
document.resturant.ordereditems.value=selectedItems;
}
{
display();
document.resturant.ordereditems.value=document.resturant.ordereditems.value+"\nTotal
Price:Rs."+totalprice;
}
Output
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.
Prg10.html
<html>
<head>
<title>Mouse Over and Mouse Out</title>
#image1
{position:absolute;
visibility:visible;
width:300px;
height:200px;
left:500px;}
#image2
{position:absolute;
visibility:hidden;
width:300px;
height:200px;
left:500px;}
</style></head>
<body><center>
<h2>Mouse Over and Mouse Out</h2><hr/><br/><br/>
<img src="image1.jpg" id="image1" onmouseover="changeImage()"
onmouseout="changeImage()"/>
<img src="image2.jpg" id="image2" onmouseover="changeImage()"
onmouseout="changeImage()"/>
</center>
</body>
</html>
Prg10.js
function changeImage()
{
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";
}
}
PART B
1. Create a web page to display different types of lists
<html>
<head>
<title>subjects</title>
</head>
<body>
<ul >
<h3>FIRST SEMESTER</h3>
<li>C</li>
<li>DS</li>
<li>DM</li>
</ul>
<ul type = “square”>
FIRST SEMESTER
<li>C</li>
<li>DE</li>
<li>DM</li>
</ul>
<ul type = “circle”>
SECOND SEMESTER
<li>DS</li>
<li>DBMS</li>
<li>NM</li>
</ul>
<ul type = “disc”">
THIRD SEMESTER
<li>C++</li>
<li>OS</li>
<li>AFM</li>
</ul>
<ol type="A">
FOURTH SEMESTER
<li>VP</li>
<li>UNIX</li>
<li>OS</li>
</ol>
<ol type="a">
FIFTH SEMESTER
<li>CA</li>
<li>SE</li>
<li>MP</li>
</ol>
<ol type="1">
SIXTH SEMESTER
<li>SP</li>
<li>TOC</li>
<li>WP</li>
<li>CNS</li>
</ol>
<dl>
<dt> HTML
<dd> HTML is the standard markup language for creating Web pages. </dd>
</dt>
</dt>
</body>
</html>
2. Create a web page to demonstrate table tag.
<html>
<table border="5">
<tr>
<th colspan="2">
<h3><br> Marksheet</h3>
</th>
</tr>
<th>SUBJECTS</th>
<th>MARKS</th>
<tr>
<td>Web programming</td>
<td>70</td>
</tr>
<tr>
<td>Theory of computation</td>
<td>100</td>
</tr>
<tr>
<td>System programming</td>
<td>100</td>
</tr>
<tr>
<td>CNS</td>
<td>100</td>
</tr>
</table>
</html>
11. Write a JavaScript to calculate the factorial of a number

<html>
<head>
<title>Factorial of a number</title>
<script type="text/javascript">
function factorial()
{
var n=parseInt(document.factorialofn.inputvalue.value);
var fact=1;
if(n<0)
alert("please enter a positive value");
else if(n==0)
alert("Factorial of 0 is:" +1);
else
{
for(i=n;i>=1;i--)
fact=fact*i;
alert("Factorial of "+n+" is "+fact);
}
}
</script>
</head>
<body>
<center>
<h2>Factorial of a number</h2><hr/><br/><br/>
<form name="factorialofn">
<table border="2" cellpading="5" cellspacing="5">
<tr><td><strong>Enter a number:</strong></td>
<td><input type="text" name="inputvalue" value="0"/></td></tr>
<tr><td colspan="2" align="center">
<input type="button" name="factcal" value="Factorial" onclick="factorial()"></td></tr>
</form>
</center>
</body>
</html>
OUTPUT
12.Write a program to convert lowercase string to uppercase string.

<html>
<head>
<title>Lowercase to Uppercase Conversion</title>
<script type="text/javascript" >
function conversion()
{
var orgtext=document.caseconversion.content.value;
var convtext;
var lc=/[a-z]/;
var uc=/[A-Z]/;
if((orgtext.search(uc)==-1) && (orgtext.search(lc)!=-1))
{
convtext=orgtext.toUpperCase();
alert("Converted text is "+convtext);
}
else if((orgtext.search(uc)!=-1) && (orgtext.search(lc)==-1))
alert("Text already in uppercase");
else
{
alert("Text contains of mixed form of character");
convtext=orgtext.toUpperCase();
alert("Converted text is "+convtext);
}
}
</script>
</head>
<body>
<center>
<h2>Lowercase to Uppercase Conversion</h2>
<hr/>
<br/><br/>
<form name="caseconversion">
<table border="2" cellpadding="5" cellspacing="5">
<tr>
<td><strong>Enter the text :</strong></td>
<td><input type="text" name="content"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" name="convert" value="Click to
convert to uppercase" onclick="conversion()"/></td>
</tr>
</table>
</form>
</center>
</body>
</html>
13. Write a program to validate username and password

<html>
<head>
function isValid()
{
var password=document.getElementById("password").value;
var username=document.getElementById("username").value;
if(password=="123" && username=="bca")
{
alert("correct");
}
else
{
alert("wrong username or password");
}
}
</script>
</head>
<form name="PasswordField" action="">
Username:
<input type="text" id="username" name="username"></br/>
Password:
<input type="password" id="password" name="password"></br>
<tab><input type="button" value="Log In" onclick = "isValid()">
</form>
</html>
15. Program to define style sheet for anchor tag.
<html>
<head>
<title>Style></title>
<style type="text/CSS">
a:hover
{
color : yellow;
font-size : 16px;
}
a:visited
{
color : brown;
}
</style>
<head>
<body bgcolor ="#A4F9C3">
<ul>SUBJECTS
<li><a href="sub1.html">SP</a></li>
<li><a href="sub2.html">TOC</a></li>
<li><a href="sub3.html">CNS</a></li>
<li><a href="sub4.html">WP</a></li>
</ul>
</body>
</html>
16. Create a web page using different levels of style sheet.
<!DOCTYPE html>
<html>
<body>
Inline Example:
<p style="color:blue; padding:10px; text-decoration:underline;"> Applies styles directly to
the elements(tags) by using style attribute</p>
Internal Example:
<style>
p{color:red; padding:10px; text-decoration:underline;}
</style>
<p> Applies styles to HTML by Placing The CSS rules inside the style tag</p>
External Example:
<link rel="stylesheet" type="text/css" href="prg11.css">
<h1>Applies styles as a separate file with a .css extension</h1>
</body>
</html>
17. Create a web page to demonstrate different types of selectors
<html>
<head>
<title> sample CSS</title>
#ID2
{
color:red;
}
p.blue
{
color:blue;
}
.BLUE
{
color:green;
}
</style>
</head>
<body>
<p id="ID2"> The #id selector styles the XHTML element with the specified id </p>
<p class="blue"> the class slector is used to allow different occurrances of same tag</p>
<h2 class="BLUE"> A generic class can be defined if you want to apply a style</h2>
<h4 class="BLUE"> A generic class can be defined if you want to apply a style</h4>
</body>
</html>
18. Create a web page to display mouse position.

<html>
<head>
<title> mouse positions</title>
function findMousePositions(evt)
{
document.getElementById("showXY").value=
"Client X=" +evt.clientX+
"Client Y=" +evt.clientY+
"Screen X=" +evt.screenX+
"Screen Y=" +evt.screenY;
}
</script>
</head>
<body onmousemove="findMousePositions(event)">
<form>
Mouse Positions are:<input type="text" id="showXY" size="50"/>
</form>
</body>
</html>
20. Write a program to replace string using regular expression.

<html>
<body>
<p> Replace "Microsoft" with "presidency" in the phrase below:</p>
<button onclick="myFunction()">Replace</button>
<p id="demo">Please visit microsoft</p>
<script>
function myFunction()
{
var str=document.getElementById("demo").innerHTML;
var txt=str.replace(/microsoft/i,"presidency");
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>

Web Lab Manual2021

Uploaded by

Copyright:

Available Formats

Web Lab Manual2021

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

Web Lab Manual2021

Uploaded by

Copyright:

Available Formats

BCA604P : WEB PROGRAMMING LAB

1. Create a web page to display different types of lists.

PROGRAM NAME --- “prg2.html”

PROGRAM NAME – “prg2.js”

<script type="text/javascript" src="prg6.js"></script>

<script type="text/javascript" src="prg9.js"></script>

11. Write a JavaScript to calculate the factorial of a number

12.Write a program to convert lowercase string to uppercase string.

13. Write a program to validate username and password

15. Program to define style sheet for anchor tag.

18. Create a web page to display mouse position.

20. Write a program to replace string using regular expression.

You might also like