Scribd
Upload
113 views

Javascript Lab Manual All in One

The document provides examples of JavaScript programs for basic calculations, using while loops, simple interest calculations, digital clocks, and button calculators. It also includes examples of programs to validate form fields and show capital cities based on country selection.

Uploaded by

Firomsa Dine
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
113 views

Javascript Lab Manual All in One

The document provides examples of JavaScript programs for basic calculations, using while loops, simple interest calculations, digital clocks, and button calculators. It also includes examples of programs to validate form fields and show capital cities based on country selection.

Uploaded by

Firomsa Dine
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

JAVASCRIPT LAB MANUAL

1. Write a JS program to perform basic calculations (+, -, *, /)?


<html>
<head>
<title>Basic Calculator</title>
</head>
<body bgcolor="pink">
<h1> Basic Calculator</h1>
<form >
<div>
<label for=op1 > Operand One</label>
<input type=text id=op1 name=op1> </div>
<div>
<label for=op2 > Operand Two</label>
<input type=text id=op2 name=op2>
</div>
<div>
<label for=res > Result</label>
<input type=text id=res name=res value="0" >
</div>
<div>
<label for=op>Operator</label>
<select name="op" id="op">
<option value="+">Plus</option>
<option value="-">Minus</option>
<option value="*">Times</option>
<option value="/">Divide</option>
</select>
</div>
<div><input type=button value=Calculate onClick="process();">
</div>

Prepared by: Mr. Melkamu D. 1


JAVASCRIPT LAB MANUAL

</form>
<script type="text/javascript ">
function process() {
var op1 = parseInt(document.getElementById("op1").value);
op2 = parseInt(document.getElementById("op2").value);
op = document.getElementById("op").value;
console.log(op1, op2, op);
res = document.getElementById("res");
switch(op) {
case "+": rv = op1+op2; break;
case "-": rv = op1-op2; break;
case "*": rv = op1*op2; break;
case "/": rv = op1/op2;
if(op2==0){
rv="undefiend";
}
break;
default: rv = "Error in Operator";
}
console.log(rv);
res.value = rv;
}
</script>
</body>
</html>
2. Write a JS program using while loop?

<html>

<head>
<title>While loop example</title>

Prepared by: Mr. Melkamu D. 2


JAVASCRIPT LAB MANUAL

</head>
<body bgcolor="pink">
<script language="JavaScript">
var counter=100;
var numberlist="";
while(counter>0) {
numberlist+="Number: "+counter+"<br>";
counter-=10;
}
document.write(numberlist);
</script>
</body>
</html>

3. Write a JS program to perform simple interest?

<html>
<head>
<script type="text/javascript">
var p,r,t,si;
function calc(f){
p=parseInt(f.prin.value);
r=parseInt(f.rat.value);
t=parseInt(f.tim.value);
si=(p*r*t)/100;
f.simp.value=si;
}
</script>
</head><body>
<pre><center>
<form style="border: 1px solid black;background-color:
lawngreen;width:400px;height: 300px;">
Principal:<input type="text" name="prin">
Rate:<input type="text" name="rat">
Time:<input type="text" name="tim">
Simpleinterst:<input type="text" name="simp">
<input type="button" name="btn" value="calculate" onclick="calc(this.form)">
</form>
</center></pre>

Prepared by: Mr. Melkamu D. 3


JAVASCRIPT LAB MANUAL

</body></html>
4. Write a JS program to show digital clock?

<html><head
<title>Digital Clock using</title>
<style>
.tabBlock
{
background-color:black;
border:solid 1px #FFA54F;
border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
max-width:200px;
width:100%;
overflow:hidden;
display:block;
}
.clock
{
vertical-align:middle;
font-family:Orbitron;
font-size:40px;
font-weight:normal;
color:red;
padding:0 10px;
}
.clocklg
{
vertical-align:middle;
font-family:Orbitron;
font-size:20px;
font-weight:normal;
color:yellow;
}
</style>
</head>
<!-- ON LOAD OF THE PAGE, THE CLOCK WILL START TICKING. -->
<body onload="digitized();">
<div style="background-color:blue; max-width:220px;width:100%;margin:0
auto;padding:20px;">
<table class="tabBlock" align="center" cellspacing="0" cellpadding="0" border="0">
<tbody><tr><td class="clock" id="dc">22:47</td> <!-- THE DIGITAL CLOCK. -->
<td>

Prepared by: Mr. Melkamu D. 4


JAVASCRIPT LAB MANUAL

<table cellpadding="0" cellspacing="0" border="0">


<!-- HOUR IN 'AM' AND 'PM'. -->
<tbody><tr><td class="clocklg" id="dc_hour">PM</td></tr>
<!-- SHOWING SECONDS. -->
<tr><td class="clocklg" id="dc_second">55</td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
<script>
// OUR FUNCTION WHICH IS EXECUTED ON LOAD OF THE PAGE.
function digitized() {
var dt = new Date(); // DATE() CONSTRUCTOR FOR CURRENT SYSTEM DATE AND
TIME.
var hrs = dt.getHours();
var min = dt.getMinutes();
var sec = dt.getSeconds();
min = Ticking(min);
sec = Ticking(sec);
document.getElementById('dc').innerHTML = hrs + ":" + min;
document.getElementById('dc_second').innerHTML = sec;
if (hrs > 12) {
document.getElementById('dc_hour').innerHTML = 'PM';
}
else {
document.getElementById('dc_hour').innerHTML = 'AM';
}
// CALL THE FUNCTION EVERY 1 SECOND (RECURSION).
var time;
time = setInterval('digitized()', 1000);
}
function Ticking(ticVal) {
if (ticVal < 10) {
ticVal = "0" + ticVal;
}
return ticVal;
}
</script>
</body></html>
5. Write a HTML, JS and CSS program to show and perform button calculator?

Prepared by: Mr. Melkamu D. 5


JAVASCRIPT LAB MANUAL

<html><head
<style>
body{
background-color: aquamarine;
}
td{
text-align: center;
}
h1{
color:blue;
}
</style>
</head>
<body>
<center>
<form name="calculator">
<table border="1">
<tbody><tr>
<th colspan="4"><h1>Calculator</h1></th>
</tr>
<tr>
<td colspan="4">
<input type="button" id="clear" name="clear" value="c"
onclick="calculator.display.value = &#39;&#39;">
<input type="text" name="display" id="display">
</td>
</tr>
<tr>
<td><input type="button" name="one" value="1" onclick="calculator.display.value +=
&#39;1&#39;"></td>
<td><input type="button" name="two" value="2" onclick="calculator.display.value +=
&#39;2&#39;"></td>
<td><input type="button" name="three" value="3" onclick="calculator.display.value +=
&#39;3&#39;"></td>
<td><input type="button" class="operator" name="plus" value="+"
onclick="calculator.display.value += &#39;+&#39;"></td>
</tr>
<tr>
<td><input type="button" name="four" value="4" onclick="calculator.display.value +=
&#39;4&#39;"></td>

Prepared by: Mr. Melkamu D. 6


JAVASCRIPT LAB MANUAL

<td><input type="button" name="five" value="5" onclick="calculator.display.value +=


&#39;5&#39;"></td>
<td><input type="button" name="six" value="6" onclick="calculator.display.value +=
&#39;6&#39;"></td>
<td><input type="button" class="operator" name="minus" value="-"
onclick="calculator.display.value += &#39;-&#39;"></td>
</tr>
<tr>
<td><input type="button" name="seven" value="7" onclick="calculator.display.value +=
&#39;7&#39;"></td>
<td><input type="button" name="eight" value="8" onclick="calculator.display.value +=
&#39;8&#39;"></td>
<td><input type="button" name="nine" value="9" onclick="calculator.display.value +=
&#39;9&#39;"></td>
<td><input type="button" class="operator" name="times" value="x"
onclick="calculator.display.value += &#39;*&#39;"></td>
</tr>
<tr>
<td> <input type="button" name="dot" value="." onclick="calculator.display.value +=
&#39;.&#39;"></td>
<td><input type="button" name="zero" value="0" onclick="calculator.display.value +=
&#39;0&#39;"></td>
<td><input type="button" name="doit" value="=" onclick="calculator.display.value =
eval(calculator.display.value)"></td>
<td><input type="button" class="operator" name="div" value="/"
onclick="calculator.display.value += &#39;/&#39;"></td>
</tr>
</tbody></table>
</form>
</center>
</body></html>
6. Write a JS program to show the capital city when you enter the country?

<html>
<head>
<title>Countries &amp; Capitals </title>
</head><body>
<h3> Countries and Capitals </h3>
<form name="f1">
Country<select name="country" onchange="call()">
<option> </option>
<option value="India">India</option>
<option value="France" selected="selected">France</option>

Prepared by: Mr. Melkamu D. 7


JAVASCRIPT LAB MANUAL

<option value="Ethiopia">Ethiopia</option>
<option value="Nepal">Nepal</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
</select>
Capital City <input type="text" name="capital" style="font-size:large; font-
weight:bold;color:green;" value="Paries">
</form>
<script>
var result=" ";
function call(){
id=f1.country.selectedIndex;
con=f1.country.options[id].value;
if(con==="India")
result="New Delhi";
else if(con==="Ethiopia")
result="AddisAbaba";
else if(con==="France")
result="Paries";
else if(con==="Nepal")
result="Kathmandu";
else if(con==="Japan")
result="Tokyo";
else if(con==="Germany")
result="Berlin";
f1.capital.value=result; }
</script>

</body></html>

6. Write a JS program to validate (form validation) text fields?


A
<html>
<body>
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;

Prepared by: Mr. Melkamu D. 8


JAVASCRIPT LAB MANUAL

if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post"
action="http://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return
validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>
B
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;
if(firstpassword==secondpassword){
return true;
}

Prepared by: Mr. Melkamu D. 9


JAVASCRIPT LAB MANUAL

else{
alert("password must be same!");
return false;
}
}
</script>
</head>
<body>
<form name="f1" action="http://www.javatpoint.com/javascriptpages/valid.jsp"
onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
</body>
</html>
C

<html>
<head>
<title>validate</title>
</head>
<body bgcolor="pink">
<center>
<form action="marquee.html"method="post">
Name:<input type="text"name="fname" required>
<br><br>
password:<input type="password"name="pwd" required>
<br><br>
<input type="submit" value="login"name="btn1">
<form>
</center>
</body>
</html>

Prepared by: Mr. Melkamu D. 10


JAVASCRIPT LAB MANUAL

D
<!DOCTYPE html>
<html>
<head>
<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
document.getElementById("numloc").innerHTML="Enter Numeric value only";
return false;
}else{
return true;
}
}
</script>
</head
<body>
<form name="myform" action="http://www.javatpoint.com/javascriptpages/valid.jsp"
onsubmit="return validate()" >
Number: <input type="text" name="num"><span id="numloc"></span><br/>
<input type="submit" value="submit">
</form>
</body>
</html>
E
<html>
<body>
<script type="text/javascript">
function validate(){
var name=document.f1.name.value;
var passwordlength=document.f1.password.value.length;

Prepared by: Mr. Melkamu D. 11


JAVASCRIPT LAB MANUAL

var status=false;
if(name==""){
document.getElementById("namelocation").innerHTML=
" <img src='http://www.javatpoint.com/javascriptpages/images/unchecked.gif'/> Please enter
your name";
status=false;
}else{
document.getElementById("namelocation").innerHTML=" <img
src='http://www.javatpoint.com/javascriptpages/images/checked.gif'/>";
status=true;
}
if(passwordlength<6){
document.getElementById("passwordlocation").innerHTML=
" <img src='http://www.javatpoint.com/javascriptpages/images/unchecked.gif'/> Password
must be greater than 6";
status=false;
}else{
document.getElementById("passwordlocation").innerHTML=" <img
src='http://www.javatpoint.com/javascriptpages/images/checked.gif'/>";
}
return status;
}
</script>
<form name="f1" action="http://www.javatpoint.com/javascriptpages/valid.jsp"
onsubmit="return validate()">
<table>
<tr><td>Name:</td><td><input type="text" name="name"/>
<span id="namelocation" style="color:red"></span></td></tr>
<tr><td>Password:</td><td><input type="password" name="password"/>
<span id="passwordlocation" style="color:red"></span></td></tr>
<tr><td colspan="2"><input type="submit" value="register"/> </td></tr>
</table>

Prepared by: Mr. Melkamu D. 12


JAVASCRIPT LAB MANUAL

</form>
</body>
</html>
8. Write HTML, CSS and JS program to generate a report?

<html >
<head>
<title>HTML Report</title>
<link rel="stylesheet" href="report.css"/>
<style>
body{
background: pink;
}
</style>
</head>
<body>
<h1>Students Record</h1>
<script src="repor.js"></script>
</body>
</html>

//report.css
table {
border: 2px solid blue;
margin-left: 100px;
}
td {
border-collapse: collapse;
}
td.bot {
border-bottom: 2px solid red;
}
td.number {
text-align: right;
}

Prepared by: Mr. Melkamu D. 13


JAVASCRIPT LAB MANUAL

h1 {
color:red;
margin-left: 100px;
}
//repor.js
br=[
["name","Id","CGPA","university"],
["alemu","21","3.98","AAU"],
["alimaz","22","3.97","AMU"],
["kebede","23","3.99","MTU"],
["fatuma","24","3.98","BDU"],
["gizachew","25","4.0","WU"],
["melkamu","26","4.0","AMU"],
["demelash","27","3.98","ASTU"],
["wukaw","28","3.9","DMU"]
];
function tb() {
document.write("<table>");
}
function te() {
document.write("</table>");
}
function trb() {
document.write("<tr>");
}
function tre() {
document.write("</tr>");
}
function td(x, y) {
if(y == undefined )

Prepared by: Mr. Melkamu D. 14


JAVASCRIPT LAB MANUAL

document.write("<td>"+x+"</td>");
else
document.write("<td class=\""+y+"\""+">" +x+"</td>");
}
nr = br.length;
nc = br[0].length;
tb();
for(i=0; i<nr; i++) {
trb();
for(j=0; j<nc; j++) {
c=undefined;
if(i<nr-1) {
if(j>1) c="number bot"; else c="bot";
} else {
if(j>1) c="number";
}
td(br[i][j], c);
}
tre();
}
te();
9. Write JS program to generate time table?
<html>
<head>
<script>
function fun(){
var n=parseInt(document.getElementById("v").value);
var r=parseInt(document.getElementById("R").value);
if(n>0){
var tab="";

Prepared by: Mr. Melkamu D. 15


JAVASCRIPT LAB MANUAL

for(var i=1;i<=r;i++) {
tab+=n+"*"+i+"="+n*i;
tab+="<br/>";
}
document.getElementById("res").innerHTML=tab;
}
else{
document.getElementById("res").innerHTML="No table fore the given value";
}}</script>
<title>maths table</title>
</head>
<body>
<form>
<div align="center">
<b>Enter value:</b>
<input type="text" name="txt1" id="v"/>
<br/><br/>
<b>Enter the Range:</b>
<input type="text" name="txt2" id="R"/>
<br/><br/>
<input type="button" name="btn1" value="show" onclick="fun()"/>
<br/><br/>
<p id="res"></p>
</div></form>
</body>
</html>
10. Write JS program to generate slideshow?
//Slide show with button
// Slideshow.html
<html>

Prepared by: Mr. Melkamu D. 16


JAVASCRIPT LAB MANUAL

<head>
<title>Slide Show</title>
<style>
img, div {
margin-left : 50px;
}
</style>
</head>
<body onload="start();">
<h1>Slide Show</h1>
<h3>Image - </h3>
<img width=80% id="fl" src="images\Chrysanthemum.jpg" alt="Flowers Images">
</body>
<script language="javascript" src="slideshow.js">
</script>
</html>
//slideshow.js
imgd = "images\\";
imgf = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg",
"image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg"];
l = imgf.length;
ci = 0;
function start() {
setInterval(next, 2000);
}
imgt = document.getElementById("fl");
function prev() {
if(ci!=0) {
ci--;
} else {

Prepared by: Mr. Melkamu D. 17


JAVASCRIPT LAB MANUAL

ci=l-1;
}
imgs = imgd + imgf[ci];
imgt.src = imgs;
}
function next() {
if(ci!=l-1) {
ci++;
} else {
ci=0;
}
imgs = imgd + imgf[ci];
imgt.src = imgs;
}
//slide show with button
// Slideshow2.html

<html>
<head>
<title>Slide Show</title>
<style>
img, div {
margin-left : 50px;
}
</style>
</head>
<body>
<h1>Slide Show</h1>
<h3>Image </h3>
<img
width=80%
id="fl"
src="images\images.jpg" alt="final images">
<div>
<button id=pr value="Prev" onClick="prev(); ">Prev</button>

Prepared by: Mr. Melkamu D. 18


JAVASCRIPT LAB MANUAL

<button id=nx value="Next" onClick="next();


">Next</button>
</div>
<script language="javascript" src="slideshow.js">
</script>
</body>
</html>
11. Write JS program to change the background colour when you mouse Over?

<html>
<head>
<script>
function changeColor(bg)
{
document.body.style.background = bg;
}
</script>
</head>
<body>
<h2>Mouse Over a color will change background color</h2>
<table border=1 width="50%">
<tr>
<td bgcolor="yellow" onmouseover="changeColor('yellow')"
onmouseout="changeColor('white')"> yellow </td>
<td bgcolor="gray" onmouseover="changeColor('gray')"
onmouseout="changeColor('white')"> gray </td>
</tr>
</table>
</body>
</html>
12. Write JS program to generate standard date and time?

<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML =
Date()">
Click me to display Date and Time. </button>
<p id="demo">
</p>
</body>

Prepared by: Mr. Melkamu D. 19


JAVASCRIPT LAB MANUAL

</html>
13. Write HTML, CSS and JS program to change maths table?

//Mathstable.html
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<h1> Welcome to MTU Tepi Campus</h1>
<script language="javascript" src="main.js"> </script>
</body>
</html>
//main.css
body{background:blue;}
h1 {
color: red;
font-family: cursive;
font-size: 30pt;
}
h2 {
line-height: 0.6;
}
table {
border: 4px solid red;
border-collapse: collapse;
alignment-adjust:center;
}
td, tr {
border: 2px solid red;
text-align: center;
}
//main.js

Prepared by: Mr. Melkamu D. 20


JAVASCRIPT LAB MANUAL

n=prompt("Enter a number: ");


document.write("<h2> Maths Table for " + n + " is </h2>");
document.write("<table >");
for(i=1; i<=12; i++) {
document.write("<tr>");
document.write("<td> "+n + "</td>");
document.write("<td> * </td>");
document.write("<td> "+i + "</td>");
document.write("<td> =</td>");
document.write("<td> "+n*i + "</td>");
document.write("</tr>");
}
document.write("</table>");

Prepared by: Mr. Melkamu D. 21

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy