Lab Programs

Ex. No.
Program:
<!DOCTYPE HTML>
<html>
<head>
<title>Alert Message </title>
<script>

</script>
</head>
<body>
<p>click refresh to run this script again</p>
</body>
</html>
Output:
Ex. No. 2
Program:
<!DOCTYPE HTML>
<html>
<head>
<title>Addition on click</title>
</head>
<body>
<script type="text/javascript">

</script>
<b>sum=<input type="textbox"value="0" Id="disp"></b>
<input type="button"value="Add 10" onclick="addten()">
</body>
</html>
Output:
Ex. No. 3
Program:
<!DOCTYPE HTML>
<html>
<head><title>Date and Time</title>
</head>
<body>
<h1 align = "center">Today's Date and Time</h1>
<div id ="disp"></div>
<script type = "text/javascript">
var dt = new Date();
var txt = document.getElementById("disp");
txt.innerHTML = dt;
</script></body></html>
Output:
Ex. No. 4
Program:
<!DOCTYPE HTML><html>
<head><title>weekname</title>
</head>
<body>
<h1>weekname</h1><hr>
<script>
var wno = parseInt(window.prompt("Enter weeknumber"));
switch(wno)
{
case 1 : alert("sunday"); break;
case 2: alert("Monday"); break;
case 3 : alert("Tuesday"); break;
case 4 : alert("wednesday");
break; case 5 : alert("Thursday");
break; case 6 : alert("Friday");
break;
case 7: alert("saturday"); break;
default :alert("Not avalid weeknumber");
}
</script> </body> </html>
Output:
Ex. No. 5
Program:
<!DOCTYPE HTML>
<html>
<head><title>To uppercase</title>
</head>
<body>
<h1 align = "center"> Change to uppercase</h1>
<hr>
Enter a string:
<input type = "text box" id = "input">
<br><br>
<input type = "button" value = "change to uppercase" onclick = upper();>
var st;
function upper()
{
var txt = document.getElementById("input");
st = txt.value;
txt.value = st.toUpperCase();
}
</script>
</body>
</html>
Output:
Ex. No. 6
Program:
<!DOCTYPE HTML>
<html>
<head><title> Generate Random Number </title>
</head>
<body>
<h1 align ="center" > Generate Ten Random Number in Range</h1><hr>
<b> Enter upper Range :<input type ="textbox" id ="max"><br><br>
Enter lower Range :<input type ="textbox" id ="min"><br><br>
<input type = "button" value ="Gernerate Random number" id="btn" onclick = showRand();>
<br><br>
<div id ="random"></div>
function generateRand(max,min)
{
var diff =max-min;
var rand = Math.random();
rand =Math.floor(rand*diff);
rand = rand +min;
return rand;
}
function showRand()
{
var max = parseInt(document.getElementById ("max").value);
var min = parseInt(document.getElementById ("min").value);
var r="";
var disp =document .getElementById("random");
for(var i =1;i<=10;i++)
{
r+= generateRand(max,min)+ " " ;
}
disp.innerHTML = r;
}
Output:
Ex. No. 7
Program:
<!DOCTYPE HTML>
<html>
<head><title>Sum of Natural Number</title>
<body>
<h1 align = "center">Sum of Natural Number</h1>
<hr>
<b> Enter lower range : <input type ="textbox" id ="lower"> <br><br>
Enter upper range : <input type ="textbox" id ="upper"> <br><br>
Sum of Range of number : <span id ="sum"></span></b><br><br>
<input type ="button" value ="Find sum" onclick =sumofRange();>
<script type
="text/javascript">
function sumofRange()
{
var low = document.getElementById("lower");
var high = document.getElementById("upper");
var n1 = parseInt(low.value);
var n2 = parseInt(high.value);
var sum=0;
for(var i=n1; i<=n2; i++)
sum +=i;
document.getElementById("sum").innerHTML =sum;
}
Output:
Ex. No. 8
Program:
<!DOCTYPE HTML>
<HTML>
<head>
<style> <title>Form Validation </title>
div{color:red}
</style>
</head>
<body>
<h1> Registration Form </h1><hr>
<table border="0">
<tr>
<td>Register number:</td>
<td><input type="textbox" id="reg" size="20"></td>
<td><div id="regdiv"></div></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="textbox" id="stname" size="20"></td>
<td><div id="namediv"></div></td>
</tr>
<tr>
<td>Phone number:</td>
<td><input type="textbox" id="phone" size="20"> </td>
<td><div id="phonediv"></div></td>
</tr>
<tr>
<td>Email-id:</td>
<td><input type="textbox" id="mail" size="20"></td>
<td><div id="maildiv"></div></td>
</tr>
</table>
<input type="button" id="btn" value="Submit" onclick=validate();><br><br>
function validate()
{
var regno=document.getElementById("reg");
var stname=document.getElementById("stname");
var phone=document.getElementById("phone");
var mail=document.getElementById("mail");
var rtxt=document.getElementById("regdiv");
var ntxt=document.getElementById("namediv");
var ptxt=document.getElementById("phonediv");
var mtxt=document.getElementById("maildiv");
if (regno.value=="") rtxt.innerHTML="Enter Register Number";
else if (stname.value=="") ntxt.innerHTML="Enter Student
Name"; else if (phone.value=="") ptxt.innerHTML="Enter Phone
Number";
else if (mail.value=="") mtxt.innerHTML="Enter Email-id";
else
window.open(document.write("<h1 style=\'color:orange\'>"+stname.value+
" Thank you for Registering</h1><br>"+
"<h2>Registration Success</h2>"));
}
</script>
</body>
</html>
Output:
Ex. No. 9
Program:
<!DOCTYPE HTML>
<html>
<head><title>Delayed Message</title>
</head>
<body>
<h1 align="center">Delayed Message</h1>
<hr>
Below message will appear after 10 seconds.
<p id="msg"></p>
function showMsg()
{
var msgPara=document.getElementById("msg");
} msgPara.innerHTML ="I AM HERE";
</script> setTimeout(showMsg,1000);
</body>
</html>
Output:
Ex. No. 10
Program:
<!DOCTYPE html>
<html>
<head><title>Increment Array by 5</title></head>
<body>
<h1 align="center">Increment Array by 5</h1>
<hr>
<input type="button" value="createArray" onclick ="createArray()">
<input type="button" value="incr by 5" onclick ="incr()">
<p id="disp"></p>
<script>
var arr = [];
var show = document.getElementById("disp");
var text = " ";
var size;
function createArray()
{
size = parseInt(window.prompt("Enter number of element in array"));
for(var i=0;i<size;i++)
arr[i]=parseInt(window.prompt("Element:" +i));
text ="Original Array:" + "<br>" +arr;
show.innerHTML=text;
}
function incr()
{
arr.forEach((num,index)=>{ arr[in
dex]=num+5;});
text+= "<br>" + "Incremented array" + "<br>" +arr;
show.innerHTML=text;}
</script>
</body>
</html>
Output:
Ex. No. 11
Program:
<!DOCTYPE html>
<html>
<head><title>Exception Handling</title></head>
<body>
<h1 align ="center" >Exception Handling</h1>
<hr>
<b> Positive Number Array</b>
<br>
<script type ="text/javascript">
var arr = [];
var size = parseInt(window.prompt("Enter size of array"));
alert("Enter positive Number");
for(var i=0;i<size;i++)
{
var elt = parseInt(window.prompt("arr[" +i+ "]"));
try
{
if(elt<0)
throw"Negative number Entered";
}
catch(err)
{
alert("Error:"
+err); i=i-1;
continue;
}
arr[i] =elt;
}
document.write(arr);
</script>
</body>
</html>
Output:
Ex. No. 12
Program:
<!DOCTYTPE html>
<html>
<body>
<h1 align = "center">Difference between two dates</h1>
<hr>
var st1 =window.prompt("Enter first date(mm/dd/yyyy)");
var dt1 =new Date(st1);
document.write("First Date ="+dt1);
var st2 =window.prompt("Enter second date(mm/dd/yyyy)");
var dt2 =new Date(st2);
document.write("<br>"+"second Date="+dt2);
var diff =dt2.getTime()-dt1.getTime();
var totalDays=Math.ceil(diff/(1000*3600*24));
document.write("<br>"+"TotalDays="+totalDays);
</script>
</body>
</html>
Output:
Ex. No. 13
Program:
<!DOCTYPE HTML>
<html>
<head><title>Change Text color</title></head>
<body>
<h1 align="center">Change Text Color</h1>
<hr>
Enter a string: <input type="textbox" id="txt">
<br><br>
<input type="button" value="Red" onclick="toRed()">
<input type="button" value="Blue" onclick="toBlue()">
<input type="button" value="Green" onclick="toGreen()">
function toRed()
{
var txt = document.getElementById("txt");
txt.style.color="Red";
}
function toBlue()
{
txt.style.color="Blue";
}
function toGreen()
{
txt.style.color="Green";
}
</script>
</body>
</html>
Output:
Ex. No. 14
Program:
<!DOCTYPE HTML>
<html>
<head><title>clock</title>
<script>
function timer()
{
var today = new Date();
var hr = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
hr = hr<10?"0"+hr:hr;
min = min<10?"0"+min:min;
sec = sec<10?"0"+sec:sec;
var str = hr+":"+min+":"+sec;
document.getElementById("show").innerHTML =str;
setTimeout(timer,1000);
}
</script>
</head>
<body onload = timer();>
<h1>Digital clock</h1>
<hr>
<font size = "20" color = "red"><div id ="show" align ="center"></div></font>
</body>
</html>
Output:
Ex. No. 15
Program:
<!DOCTTYPE HTML>
<html>
<head><title>Visitors count</title>
</head>
<body>
<h1 align ="center">Visitors count</h1><hr>
<font size ="18 px"> Number of visitors to this site is:<span id = "show" style =
"color:red"></span>
</font><br><br>
var cnt = localStorage.getItem("count");
var showMsg = document.getElementById("show");
function resetcount()
{
cnt=1;
localStorage.setItem("count",1);
showMsg.innerHTML = cnt;
}
if(cnt)
{
cnt = Number(cnt)+1;
localStorage.setItem("count",cnt);
showMsg.innerHTML = cnt;
}
else
{
resetcount();}
</script>
<button id = "reset" onclick = resetcount();>Reset</button>
</body>
</html>
Output:

Lab Programs

Uploaded by

Document Information

Original Description:

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

Lab Programs

Uploaded by

Copyright:

Available Formats

Ex. No.

<style> <title>Form Validation </title>

You might also like