Scribd
Upload
49 views

Lab Programs

The document contains 14 code examples demonstrating the use of JavaScript in web pages. The examples cover concepts like prompting for user input, displaying alerts and messages, performing calculations, manipulating dates and times, validating form input, and changing style properties. Each example is accompanied by the expected output.

Uploaded by

jecslinjeo
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
49 views

Lab Programs

The document contains 14 code examples demonstrating the use of JavaScript in web pages. The examples cover concepts like prompting for user input, displaying alerts and messages, performing calculations, manipulating dates and times, validating form input, and changing style properties. Each example is accompanied by the expected output.

Uploaded by

jecslinjeo
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Ex. No.

Program:
<!DOCTYPE HTML>
<html>
<head>
<title>Alert Message </title>
<script>
<!--
var name;
name=window.prompt("Enter your name");
window.alert("welcome"+name);
//-->
</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">
<!--
var sum=0;
function addten()
{
sum+=10;
var txtbox=document.getElementById("disp");
txtbox.value=sum;
}
//-->
</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();>
<script type = "text/javascript">
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>
<script type = "text/javascript">
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;
}
</script></body></html>
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;
}
</script></body></html>

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>
<script type="text/javascript">
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>
<script type="text/javascript">

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>
<script type = "text/javascript">
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()">

<script type="text/javascript">
function toRed()
{
var txt = document.getElementById("txt");
txt.style.color="Red";
}
function toBlue()
{
var txt = document.getElementById("txt");
txt.style.color="Blue";
}
function toGreen()
{
var txt = document.getElementById("txt");
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>
<script type = "text/javascript">
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:

You might also like