LAB Java Script

SECTION – 3JavaScript

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> <script language="JavaScript">

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> <script language="JavaScript">

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>

<script language="JavaScript">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>

<form name="form1" method="post" action=""><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><input type="radio" name="RadioGroup1" value="radio"onClick="Calculate(4)">7/5</label>

<br>

<label><input type="radio" name="RadioGroup1" value="radio"onClick="Calculate(5)">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>

<script language="JavaScript"> 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><form name="form1" method="post" action=""><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> <script language="JavaScript">

var car=new Object;car.model="Marcides Benz";car.year=2008;car.make="DX";car.price=4500000;

</script></head>

<script language="JavaScript">

<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>

<script language="JavaScript">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()"><form name="form1" method="post" action="">

<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>

<!--var x,yvar step=20var flag=0

var message=" Irshad Khan"message=message.split("")

var xpos=new Array()for (i=0;i<=message.length-1;i++) {xpos[i]=-50}

var ypos=new Array()for (i=0;i<=message.length-1;i++) {ypos[i]=-50}function handlerMM(e){x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientXy = (document.layers) ? e.pageY : document.body.scrollTop+event.clientYflag=1}function mousetrailer() {if (flag==1 && document.all) {

for (i=message.length-1; i>=1; i--) {

xpos[i]=xpos[i-1]+stepypos[i]=ypos[i-1]

}xpos[0]=x+stepypos[0]=y

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

var thisspan = eval("span"+(i)+".style") thisspan.posLeft=xpos[i]

thisspan.posTop=ypos[i] }

}

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

for (i=message.length-1; i>=1; i--) {

xpos[i]=xpos[i-1]+stepypos[i]=ypos[i-1]

}xpos[0]=x+stepypos[0]=y

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

var thisspan = eval("document.span"+i) thisspan.left=xpos[i]

thisspan.top=ypos[i] }

}var timer=setTimeout("mousetrailer()",30)

}//--></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>

<script language="JavaScript">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>

<script language="JavaScript">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>

<script language="JavaScript">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><form name="form1" method="post" action=""><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>

<script language="JavaScript"> function getTimes(){ var dt=new Date(); form1.t.value= dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds(); window.setTimeout("getTimes()",1000); }

</script><body onLoad="getTimes()"><center><form name="form1" method="post" action=""><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>

<script language="JavaScript">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><form name="form1" method="post" action=""><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="Submit3" value="9" onClick="calc('9')"><input type="button" name="Submit4" value="+" onClick="calc('+')"><br><input type="button" name="Submit5" value="4" onClick="calc('4')"><input type="button" name="Submit6" value="5" onClick="calc('5')"><input type="button" name="Submit7" value="6" onClick="calc('6')"><input type="button" name="Submit8" value="-" onClick="calc('-')"><br><input type="button" name="Submit9" value="1" onClick="calc('1')"><input type="button" name="Submit10" value="2" onClick="calc('2')"><input type="button" name="Submit11" value="3" onClick="calc('3')"><input type="button" name="Submit12" value="*" onClick="calc('*')"><br><input type="button" name="Submit13" value="0" onClick="calc('0')"><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>

<script language="JavaScript">function check() {if(form1.t.value==""){alert("Enter The Text");form1.t.focus();}else{alert("Thank You");} }

</script><body><form name="form1" method="post" action="">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>

<script language="JavaScript">var counter;counter=0;function count(){counter++; alert("Counter : " + counter); }

</script>

<body>

<form name="form1" method="post" action=""><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>

<script language="JavaScript">function check() {if(form1.t.value==""){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>

<form name="form1" method="post" action=""> 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>

<script language="JavaScript">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>

<script language="JavaScript"> 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> <script language="JavaScript">

function check() {if(form1.t.value==""){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><form name="form1" method="post" action=""><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

Documents

Transcript of LAB Java Script