LAB Java Script

SECTION – 3
JavaScript
Session 1
Ex 1: How would you write any statement using only one write() or writeln() command?
Code:
<html>
<head><title> My Details </title>
<script language="JavaScript">
function newpages()
{
document.writeln("Hi ");
document.write("Welcome To My Website");
}
</script>
</head>
<body>
<center>
<form name="form1" method="post" action=""> <p>
<input type="submit" name="Submit" value="Enter" onClick="newpages()">
</p>
</form>
</center>
</body>
</html>
Output:
Ex 2: Embed java script in html document asking user name and then printing Hello <User
Name>
Code:
<html>
<head><title>User Name</title>
function newpages(txt)
{
document.writeln("Hello " + txt);
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<p>Enter User Name <input name="t1" type="text" id="t1"></p>
<p><input type="submit" name="Submit" value="Enter"
onClick="newpages(form1.t1.value)"> </p>
</form>
</body>
</html>
Output:
Ex 3: Create a dialogue box with “Welcome to my website” message.
Code:
<html><head><title>Welcome Page</title>
alert("Welcome to my website");
</script>
</head>
<body>Hi! This is My WelCome Page.</body>
</html>
Output:
Session 2
Ex 1: Evaluate the expression

a. 7+5
b. “7”+”5”
c. 7*5
d. 7/5
e. 7%5
Code:
<html>
<head><title>Mathematic Operation</title></head>
function Calculate(choice)
{var result;
switch(choice)
{
case 1:
result=7+5;
break;
case 2:
result="7" + "5";
break;
case 3:
result=7*5;
break;
case 4:
result=7/5;
break;
case 5:
result=7%5;
break;
}
document.writeln(result);
}
</script>
<body>

<p>Evaluate The Expression</p>
<p><label>
<input type="radio" name="RadioGroup1" value="radio"onClick="Calculate(1)">
7+5</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="radio"onClick="Calculate(2)">
"7" + "5"</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="radio"
onClick="Calculate(3)">
7*5</label>
<br>
<label>
7/5</label>
<br>
<label>
7%5</label>
<br>
</p>
</form>
</body>
</html>
Output:
Ex 2: Write the segment of script that would ask the user if he wants a greeting message
and if he does, display a gif file called Welcome. gif and display “Welcome to Netscape
navigator!” in the document window following the gif.
Code:
<html>
<head><title>-Greeting Message-</title></head>
function messages()
{
input_box=confirm("Do You Want a Greeting");
if(input_box==true)
{
window.open("welcome.gif");
window.document.write("Welcome to Netscape navigator!" );
}
else
{
alert("You Have Selected No");
}
}
</script>
<body>
<input type="submit" name="Submit" value="Submit" onClick="messages()">
</form>
</body>
</html>
Output:
Ex 3: Write the object definition for an object called car with four properties model,
make, year and price.
Code:
<html>
<head> <title>-Car Information-</title>
var car=new Object;
car.model="Marcides Benz";
car.year=2008;
car.make="DX";
car.price=4500000;
</script>
</head>
function printdet()
{
document.write(" Model : " + car.model);
document.write(", Make : " + car.make);
document.write(", Year : " + car.year);
document.write(", Price : " +car.price);
}
</script>
<body>
<input type="submit" name="Submit" value="Print Details" onClick="printdet()">
</form>
</body>
</html>
Output:
Session 3
Ex 1: Write a program to display a multiplication table.
Code:
<html>
<head><title>-Multiplication Table-</title></head>
function multable()
{
var num=prompt("Enter The No To Show Multipication -");
var i;
for(i=0;i<=10;i++)
{
document.write(num + " * " + i + " = " + num*i +"<br>");
}
}
</script>
<body>
<input type="submit" name="Submit" value="- Enter Number -"
onClick="multable()">
</form>
</body>
</html>
Output:
Ex 2: Write a code to create a scrolling text in a text box.

Code:
<html>
<head>
<title>-Scrolling Text-</title>
function movetext()
{
if(txt.style.posLeft<720)
{
txt.style.posLeft=txt.style.posLeft+2;
window.setTimeout("movetext()",5);
}
else
{
txt.style.posLeft=0;
window.setTimeout("movetext()",5);
}
}
</script>
</head>
<body onLoad="movetext()">
<div id="txt" style="position:relative;top:3;left0">
<h2>Scrolling Text</h2></div>
</form><br>
</body>
</html>
Output:
Session 4
Ex 1: Write a program to move a text with mouse pointer.
Code:
<html>
<head><title>-Move Text With Mouse-</title></head>
<style>
.trailerstyle {
position: absolute;
visibility: visible;
top: -50px;
font-size: 12px;
font-family: Arial,Helvetica,Verdana;
font-weight: bold;
color: #000000;
}
</style>
<script>

</script>
<body onLoad="mousetrailer()" style="width:100%; overflow-x:hidden;overflow-y:scroll">

<font face="Tahoma"><a target="_blank" href="#"><span style="font-size: 8pt; text-decoration:
none"><h3>This Is Working only On Internet Explorer</h3></span></a></font>
<script>

</script>
<form name="form1" method="post" action=""> <p>
<input type="submit" name="Submit" value="Enter" onClick="newpages()">
</p>
</form>
</body>
</html>
Output:
Ex 2: Write a program to change color of text randomly.

Code:
<html>
<head><title>-Change Colour of Text-</title>
var colors=new Array(6);
colors[0]="#0000FF"; colors[1]="#FF0000"; colors[2]="#006600";
colors[3]="#FFCC00";colors[4]="#00FFFF"; colors[5]="#000000";
var i=1;
function changecolor()
{
document.fgColor=colors[i];
i++;
if(i>5)
i=0;
setTimeout("changecolor()",100);
}
</script>
</head>
<body onLoad="changecolor()">
<div align="center"><strong><font size="7">Hello Friends! Good Morning</font></strong> </div>
</body>
</html>
Output:
Ex 3: Create a web page using two image files, which switch b/w on another as the mouse
pointer moves over the image. Use the on mouse over and on mouse out event handler.
Code:
<html>
<head><title>-Image Change On Mouse Over-</title>
function MM_swapImgRestore()
{
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
function MM_preloadImages()
{
var d=document; if(d.images)
{
if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0)
{
d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];
}}}
function MM_findObj(n, d)
{
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n);
return x;
}
function MM_swapImage()
{
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null)
{
document.MM_sr[j++]=x;
if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];
}}
</script>
</head>
<body onLoad="MM_preloadImages('welcome.Gif')">
<a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image1','','welcome.Gif',1)">
<img src="Welcome2.gif" name="Image1" width="261" height="195" border="0"></a>
</body>
</html>
Output:
Session 5
Ex 2: Use the date function get Date & set Date to prompt the user for an integer b/w 1-31
& return day of the week it represents.
Code:
<html>
<head><title>User Name</title></head>
function setdate()
{
var dt=new Date();
dt=new Date(form1.y.value,form1.m.value,form1.d.value);
form1.gt.value=dt.getDate() + "/" + dt.getMonth() + "/" + dt.getFullYear();
}
</script>
<body>
<p>Day <input name="d" type="text" id="d" size="3">
Month <input name="m" type="text" id="m" size="3">
Year <input name="y" type="text" id="y" size="4">
<input type="button" name="Button" value="SetDate" onClick="setdate()">
</p>
<p> Date <input name="gt" type="text" id="gt"> </p>
</form>
</body>
</html>
Output:
Ex 3: Display time and print the message accordingly e.g. ‘Good morning’ in morning etc.
Code:
<html>
<head><title>-TIME AND MESSAGE-</title>
<script language="JavaScript" type="text/javascript">
var day = new Date();
var hr = day.getHours();
if (hr <= 11)
{
document.write("Good Morning! The Time Is : " + day.getHours() + ":" + day.getMinutes() +
":" + day.getSeconds());
}
else if (hr > 11 && hr < 17)
{
document.write("Good Afternoon! The Time Is : " + day.getHours() + ":" +
day.getMinutes() + ":" + day.getSeconds());
}
else
{
document.write("Good Evening! The Time Is : " + day.getHours() + ":" + day.getMinutes() +
":" + day.getSeconds());
}
</script>
</head>
<body>
<h3>This is Developed By - Irshad Khan (MCA 1 Ignou)</h3>
</body>
</html>
Output:
Session 6
Ex 1: Using java script create a digital clock.
Code:
<html>
<head><title>-Digital Clock-</title></head>
function getTimes()
{
var dt=new Date();
form1.t.value= dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
window.setTimeout("getTimes()",1000);
}
</script>
<body onLoad="getTimes()">
<center>
<input name="t" type="text" id="t">
</form>
</center>
</body>
</html>
Output:
Session 7
Ex 1: Using java script create a calculator.

Code:
<html>
<head><title>-Calculator-</title></head>
function calc(ch){
if(ch=="=")
form1.t.value= eval(form1.t.value);
else
if(ch=="C")
form1.t.value= "";
else
form1.t.value+=ch;
}
</script>
<body onLoad="getTimes()">
<center><br>
<input name="t" type="text" id="t">
<br><br>
<input type="button" name="Button" value="7" onClick="calc('7')">
<input type="button" name="Submit2" value="8" onClick="calc('8')">
<input type="button" name="Submit4" value="+" onClick="calc('+')">
<br>
<input type="button" name="Submit8" value="-" onClick="calc('-')">
<br>
<input type="button" name="Submit12" value="*" onClick="calc('*')">
<br>
<input type="button" name="Submit14" value="C" onClick="calc('C')">
<input type="button" name="Submit15" value="=" onClick="calc('=')">
<br>
</form>
</center>
</body>
</html>
Output:
Session 8
Ex 1: Create an HTML form that has a number of text boxes. The user fills the textboxes
with data. Write a script that verifies that all textboxes have been filled. If a text box has
been left empty pop up an alert message indicate the box that has been left empty. When
OK button is clicked, set focus to that specific textbox. If all the textbox are filled, display
thank you.
Code:
<html>
<head><title>-Validation Check-</title></head>
function check()
{
if(form1.t.value=="")
{
alert("Enter The Text");
form1.t.focus();
}
else
{
alert("Thank You");
}
}
</script>
<body>
Enter a Text<input name="t" type="text" id="t">
<input type="submit" name="Submit" value="Submit" onClick="check()">
</form>
</body>
</html>
Output:
Session 11
Ex 1: Create a program to generate a hit counter.

Code:
<html>
<head>
<title>-Hit Counter-</title>
</head>
var counter;
counter=0;
function count()
{
counter++;
alert("Counter : " + counter);
}
</script>
<body>

<div align="center">
<input type="button" name="Button" value="Hit Me" onClick="count()">
</div>
</form>
</body>
</html>
Output:
Ex 2: Create a program to verify whether email address provided by the user is valid or
invalid.
Code:
<html>
<head><title>-E Mail Verification-</title></head>
function check()
{
{
alert("Enter The Text");
form1.t.focus();
}
else
{
var email,a,d,diff,k,c;
email=form1.t.value;
a=email.indexOf('@');
d=email.indexOf('.');
diff=parseInt(d)-parseInt(a);
k=parseInt(d)+1;
c=email.charAt(k);
if(a<1||diff<=1||c=="")
{
alert("Invalid Email ID");
form1.t.focus();
}
}
}
</script>
<body>
Enter Email ID <input name="t" type="text" id="t">
<input type="submit" name="Submit" value="Submit" onClick="check()">
</form>
</body>
</html>
Output:
Session 12
Ex 1: Write a program to scroll the text on status bar.

Code:
<html>
<head>
<title>-Scroll Text On Status Bar-</title>
</head>
var ar="Scrolling Text On Status Bar";
var space="";
var i;
i=1;
function count()
{
var cont,k=0;
cont="";
while(k<=i)
{
cont=cont + " ";
k++;
}
status=cont +ar;
i++;
if(i>100)
i=0;
window.setTimeout("count()",5);
}
</script>
<body onLoad="count()">
<h3>This is Working on Internet Explorer</h3>
</body>
</html>
Output:
Ex 2: Write a program to create a small window in a main window.
Code:
<html>
<head><title>-Make Small Window-</title>
window.open("newwindow.html");
</script>
</head>
<body>
<h3>This is Working on Internet Explorer</h3>
</body>
</html>
Output:
Session 15
Ex 1: Use java script for authentication and verification of the text boxes in the static site
developed by the student in the html exercise.
Code:
<html>
<head><title>-Authentication and Verification-</title>
function check()
{
{
alert("Enter The Username");
form1.t.focus();
}
else if(form1.t2.value=="")
{
alert("Enter The Password");
form1.t2.focus();
}
else
{
if((form1.t.value!="")||(form1.t2.value!=""))
{
alert("Invalid Username or Password");
}}}
</script>
</head>
<body>
<p>User Name <input name="t" type="text" id="t"> </p>
<p>Password <input name="t2" type="password" id="t2"> </p>
<p> <input type="submit" name="submit" value="-Submit-" onClick="check()"></p>
</form>
</body>
</html>
Output:

LAB Java Script

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

LAB Java Script

Caricato da

Copyright:

Formati disponibili

SECTION – 3

Ex 1: Evaluate the expression

<form name="form1" method="post" action="">

Ex 2: Write a code to create a scrolling text in a text box.

for (i=0; i<message.length-1; i++)

else if (flag==1 && document.layers)

for (i=0; i<message.length-1; i++)

Ex 2: Write a program to change color of text randomly.

Ex 1: Using java script create a calculator.

Ex 1: Create a program to generate a hit counter.

<form name="form1" method="post" action="">

Ex 1: Write a program to scroll the text on status bar.

Potrebbero piacerti anche