Scribd
Upload
90 views

Display Hello As Soon As The Page Is Loaded Using Javascript. / Program-1

The document contains 14 programs that demonstrate various JavaScript functions and concepts like displaying text on page load, displaying text on button click, using confirm and alert boxes, accepting user input and displaying output, changing background color, opening new windows, displaying text in status bar, selecting checkboxes and displaying selection, selecting from dropdown lists, calculating square roots and maximum of two numbers, using loops to display headings, and greeting users based on time of day. The programs cover basic to intermediate JavaScript concepts.

Uploaded by

arun1974
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
90 views

Display Hello As Soon As The Page Is Loaded Using Javascript. / Program-1

The document contains 14 programs that demonstrate various JavaScript functions and concepts like displaying text on page load, displaying text on button click, using confirm and alert boxes, accepting user input and displaying output, changing background color, opening new windows, displaying text in status bar, selecting checkboxes and displaying selection, selecting from dropdown lists, calculating square roots and maximum of two numbers, using loops to display headings, and greeting users based on time of day. The programs cover basic to intermediate JavaScript concepts.

Uploaded by

arun1974
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 25

/*Display hello as soon as the page is loaded using JavaScript.

*/
Program-1
<HTML><title>Prashant</title>
<BODY><SCRIPT language="JavaScript">
document. write ("<h1>JavaScript is loaded.</h1>");
document. write("<h1>Hello JavaScript</h1>");
</SCRIPT></BODY></HTML>

Output-1

/* Display adds the click of button.*/


Program-2
<HTML><HEAD><title>Prashant</title>
<SCRIPT language="JavaScript">
function hello()
{
document. write("<H1>This is developed by Prashant Yadav.</H1>");
}
</SCRIPT><BODY><h1>Click this button. </h1>
<INPUT type=button value="CLICK" onClick="hello ()">
</BODY></HTML>

Output-2

/* Display a confirm dialog box if user press OK, it should display an


alert message Welcome else display bye.*/
Program-3
<HTML><HEAD><title>Prashant</title><SCRIPT language="JavaScript">
function msg () {
choice=confirm ("Click one of the button")
if (choice==1) {alert ("WELCOME PRASHANT YADAV.");}
else {alert ("BYE BYE PRASHANT YADAV.") ;}
} </SCRIPT></HEAD><BODY><h1>Display a confirm dialog box. </h1>
<INPUT type=button value=PRESS onClick=msg ()></BODY></HTML>

Output-3

/* Accept the values from the user i.e. accept name,age,roll no. and
marks and display them along with total marks.*/
Program-4
<HTML><HEAD><title>Prashant</title><SCRIPT>
function result ()
{
a=parseInt (frm.english.value);
b=parseInt (frm.hindi.value);
c=parseInt (frm.math.value);
d=parseInt (frm.science.value);
n=frm.nm.value;
g=frm.ag.value;
r=frm.rl.value;
t= (a+b+c+d);
pr= ((a+b+c+d)/4);
if (pr>80 && pr<=100)
gr='A';
else if (pr>60 && pr<=80)
gr='B';
else if (pr>40 && pr<=60)
gr='C';
else
gr="Fail";
document.write("<H1> align=center>Personal Marksheet</H1>");
document.write("<FORM method=post name=fr>");
document.write("<BR><B>Name :</B><INPUT type=text name=nm>");
document.write("<B>Age :</B><INPUT type=text name=ag>");
document.write("<B>Roll No. :< /B><INPUT type=text name=rl>");
document.write("<BR><BR><H3>Marks Details</H3><BR>");
document.write("<B>English :</B><INPUT type=text name=english><BR>");
document.write("<B>Hindi :</B><INPUT type=text name=hindi><BR>");
document.write("<B>Maths :</B><INPUT type=text name=math><BR>");
document.write("<B>Science :</B><INPUT type=text
name=science><BR><BR><BR>");
document.write("<B>Total :</B><INPUT type=text name=ttl>");
document.write("<B>Percentage :</B><INPUT type=text name=per>");
document.write("<B>Grade :</B><INPUT type=text name=grd><BR><BR>");
fr.english.value=a;
fr.hindi.value=b;
fr.math.value=c;

fr.science.value=d;
fr.ttl.value=t;
fr.per.value=pr;
fr.grd.value=gr;
fr.nm.value=n;
fr.ag.value=g;
fr.rl.value=r;
document.write("</FORM>");
} </SCRIPT></HEAD><BODY><H1><u>Personal Marksheet</u>
<FORM method=post name=frm><B>Name :< /B>
<INPUT type=text name=nm value=""><B>Age :< /B>
<INPUT type=text name=ag value=""><B>Roll No. :< /B>
<INPUT type=text name=rl value=""><BR><BR>
<H1><u>Marks Details</u></H1><BR><B>English :< /B>
<INPUT type=text name=english><BR><B>Hindi :< /B>
<INPUT type=text name=hindi><BR><B>Math :< /B>
<INPUT type=text name=math><BR><B>Science :< /B>
<INPUT type=text name=science><BR><BR><BR></H1>
<INPUT type=button value=RESULT onclick=result ()>
</FORM></BODY> </HTML>

Output-4

/* Try to accept the color from the user and on click of bgcolor button,
it should change the bgcolor.*/
Program-5
<HTML><HEAD><title>Prashant</title><SCRIPT>
function bg()
{
document.bgColor=frm.color.value;
}
</SCRIPT></HEAD><BODY>
<B><h1><font color="white">Developed by Prashant Yadav.</font></h1></B>
<FORM name=frm><B><h1><font color="white">Background Color
:</font></B><INPUT type=text value="" name="color"></h1>
<INPUT type=button value="Change back ground color" onClick=bg()>
</BODY></HTML>

Output-5

/* Make a window with one open button on click of this button

another window with two button open and close should be


displayed .On clicking open button should open another new window
and close button should close the current window.*/
Program-6
<html><head><title>Prashant</title><script type="text/javascript">
function open_win()
{
window.open("prg6b.html")
}
</script></head><body><form><p><h1>CLICK THIS BUTTON</H1></P>
<input type=button value="OPEN WINDOW" onclick="open_win()">
</form></body></html>

Output-6

/* On click of button window should has a text in the status bar.*/


Program-7
<HTML><HEAD><SCRIPT language="javascript">
function statusbar()
{
window.status="This is a WindowXP with SP2.";
}
</SCRIPT></HEAD><BODY>
<h1>Look at the status bar after clicking the Button</h1>
<INPUT type="button" value=STATUS onClick=statusbar()>
</BODY></HTML>

Output-7

/* Try to make checkboxes and then display which checkbox user has
selected.*/
Program-8
<HTML><HEAD><title>Prashant</title><SCRIPT language="javascript">
function box()
{
txt="User's hobbies are :";
for(i=0;i<cb.length;i++)
{if(cb[i].checked==1){
txt+=cb[i].value+" ";
}}choice.value=txt;
}</SCRIPT></HEAD><BODY><H1>Please tick your hobbies<BR>
<INPUT type="checkbox" name="cb" value="Reading"><B>Reading</B>
<INPUT type="checkbox" name="cb" value="Eating"><B>Eating</B>
<INPUT type="checkbox" name="cb" value="Sleeping"><B>Sleeping</B>
<INPUT type="checkbox" name="cb" value="Dancing"><B>Dancing</B>
<INPUT type="checkbox" name="cb" value="Singing"><B>Singing</B>
<INPUT type="checkbox" name="cb" value="Playing"><B>Playing</B></H1>
<BR><BR><INPUT type="button" value="Submit" onclick="box ()"><BR><BR>
<INPUT type="text" name="choice" size="90"></BODY></HTML>

Output-8

/* Try to make a list and try to select one.*/


Program-9
<html><head><script type="text/javascript">
function put()
{
txt=frm.myList.options[frm.myList.selectedIndex].text
document.frm.favorite.value=txt
}</script></head>
<body><form name="frm">
<B><h1>Choose your favourite movie.</h1></B>
<select name="myList" onchange="put()">
<OPTION value="1">Minority Report</OPTION>
<OPTION value="2">War Of the world</OPTION>
<OPTION value="3">Terminator</OPTION>
<OPTION value="4">Titanic</OPTION>
<OPTION value="5">lord of the ring</OPTION><BR><BR>
</select><br /><br /><h1>You have Ordered :</h1>
<input type="text" name="favorite" size="50"></form></body></html>

Output-9

/* Try to accept a number and find its square.*/


Program-10
<HTML><HEAD><title>Prashant</title><SCRIPT language="javascript">
function squareroot()
{
a=parseFloat(num.value);
a1=(num.value=Math.sqrt(a));
alert("The squareroot of " + a + " is:-" +a1);
}
</SCRIPT></HEAD><BODY>
<B><h1>Enter a Number whose square root is</h1></B><BR><BR>
<B><h1>Number :</B><INPUT type=text name=num>
<INPUT type=button value="Ans." onClick=squareroot()>
</BODY></HTML>

Output-10

/* Try to accept two numbers and tell which is maximum out of the
two.*/
Program-11
<HTML><HEAD><TITLE>Prashant</TITLE><SCRIPT language="JavaScript">
function max () {
a=parseFloat (nm1.value);
b=parseFloat (nm2.value);
if (a>b)
{
alert ("Maximum of" + a + "and" + b +" is: + a);
}
else
{
alert ("Maximum of" + a + "and" + b +" is: + b);
}} </SCRIPT></HEAD><BODY>
<B><H1>Enter the two numbers from which maximum is to be told</H1></B>
<BR><BR><B><H1>Number 1 :< /B><INPUT type=text name=nm1 ></H1><BR>
<B><H1>Number 2 :< /B><INPUT type=text name=nm2 ></H1><BR>
<INPUT type=button value="SUBMIT" onclick=max ()>
</BODY></HTML>

Output-11

/* Print a text with all 6 heading using for loop.*/


Program-12
<HTML><HEAD>
<TITLE>Prashant</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT" N>
var i=1;
do{
document.write("<h" + i + ">My name " + "is prashant" + i + " yadav." + " </h" + i +
">");
++i;
}while(i<=6);
</SCRIPT></HEAD></HTML>

Output-12

/* Try to greet the user according to the time.*/


Program-13
<HTML><HEAD><SCRIPT language="JavaScript">
function wish (){
var dt=new Date ()
var h=dt.getHours ()
if (h>=h && h<=11){alert ("Good Morning Prashant yadav");}
else if (h==12){alert ("Good Noon Prashant yadav");}
else if (h>12 && h<=16){alert ("Good Afternoon Prashant yadav");}
else if (h>16 && h<=19){alert ("Good Evening Prashant yadav");}
else{alert ("Good Night Prashant yadav");}
}</SCRIPT></HEAD><BODY onLoad=wish ()><h1>Greet the user according to the
time. </h1></BODY></HTML>

Output-13

/* Try to map an image.*/

Program-14
<HTML><BODY><H3 align=center>Amazing Beauty</H3>
<IMG src="xanimal12_1024.jpg" usemap="#my" height=786 width=1024>
<MAP name="my">
<area shape="rect" coords="25, 71,304,533" href="image1.htm">
<area shape="rect" coords="684,411,848,541" href="image2.htm">
<area shape="rect" coords="550, 247, 1004, 471" href="image3.htm">
</MAP></BODY></HTML>

Image-1.html
<HTML><BODY><H2 align=center>Fisher Men ON DUTY</H2>
<TABLE><TR><TD><IMG src="birds4.jpg"></TD>
<TD valign="top"><B>&nbsp; &nbsp; &nbsp; &nbsp; These are the daring
fishermen who dare to reach<BR>
&nbsp; &nbsp; &nbsp; &nbsp; the lap of the water goddess.</b></TD>
</TR></TABLE></BODY></HTML>

Output-14

/* Make a form, validate it, it should not be blank, it should display an


error message and cursor should go back to the text field.*/
Program-15
<html><head><script type="text/JavaScript">
function validate()
{
if(document.frm.nm.value=="")
{
alert("Field Name cannot be left empty");
document.frm.nm.focus();
submitOK="False";
}
else if(document.frm.nm.value<0 || document.frm.nm.value>=0)
{
alert("You are supposed to enter Name not a number");
document.frm.nm.value="";
document.frm.nm.focus();
submitOK="False";
}
else if(document.frm.nm.value.length>10)
{
alert("the maximum length of Name permitted is 10");
document.frm.nm.value="";
document.frm.nm.focus();
submitOK="False";
}
if(document.frm.ag.value=="")
{
alert("Field Age cannot be left empty");
document.frm.ag.focus ();
submitOK="False";
}
if(document.frm.eid.value=="")
{
alert("Field E-Mail ID cannot be left empty");
document.frm.eid.focus();
submitOK="False";
}
else if(document.frm.eid.value.indexOf("@")==-1)
{
alert("Invalid E-Mail ID Entered");
document.frm.eid.value="";
document.frm.eid.focus ();
submitOK="False";
}
if(submitOK=="False")
{
return false;
}}</script></head>

<body><H1><U>Please Enter your details in the form</U></H1>


<form name="frm" action="prg14.htm" onsubmit="return validate ()">
<B><H1>Enter your e-mail :< /H1></B>
<input type="text" name="eid" size="20"><br />
<B><H1>Name :< /H1></B>
<INPUT type=text name=nm value="" size="30"><B>
(max 10 characters)</B><BR>
<B><H1>Age :< /H1></B><INPUT type=text name=ag value="" size="20">
<B>yrs. </B><BR><input type="submit" value="SUBMIT">
</form></body></html>

Output-15

/* On click tries to change location of the page.*/


Program-16
<html><head><title>Prsahant</title><script type="text/JavaScript">
function loc()
{
alert(location)
}
function change loc()
{
window. location="prg1.html";
}</script></head>
<body><h1>SHOW CURRENT AND CHANGE LOCATION OF PAGE.</H1>
<form><input type="button" onClick="loc()" value="CURRENT URL">
<input type="button" onclick="change loc ()" value="CHANGE URL">
</form></body></html>

Output-16

/* Try to scroll the text on the status bar.*/


Program-17
<HTML><HEAD><TITLE>Prashant</TITLE><SCRIPT>
var msg="THIS IS A SCROLLING MESSAGE.";
var space="... ...";
var p=0;
function scroll()
{
window.status=msg.substring(p,msg.length) +space +msg.substring(0,p);
p++;
if(p>msg.length)
p=0;
window.setTimeout("scroll()",200);
}scroll()
</SCRIPT></HEAD><BODY><H1>SCROLLING STATUS</H1>
</BODY></HTML>

Output-17

/* Try to resize an image.*/


Program-18
<HTML><HEAD><SCRIPT language="JavaScript">
function inc()
{
var x=document. images
x[0].height=x[0].height*1.5;
x[0].width=x[0].width*1.3;
}
function dec()
{
var x=document. images
x[0].height=x[0].height*0.67;
x[0].width=x[0].width*0.77;
}</SCRIPT></HEAD>
<BODY><IMG src="xanimal12_1024.jpg" width="300" height="300"<BR><BR><BR>
<FORM><B><h1>Change the size of the image</h1></B><BR><BR>
<INPUT type="button" onclick="inc ()" value="ZOOM (+)">
<INPUT type="button" onclick="dec ()" value="ZOOM (-)">
</FORM></BODY></HTML>

Output-18

/* Try to use parseInt and parseFloat function.*/


Program-19
<HTML><TITLE>JavaScript & Forms</TITLE><HEAD>
<h1><u>USE OF PARSE FUNCTION</u></h1><SCRIPT
LANGUAGE="JavaScript">
function parse()
{
a = document.Form1.Text1.value;
b = document.Form1.Text2.value;
a1 = parseInt (a);
b1 = parseFloat (b);
c = 0;
c = a1 + b1;
alert ("The parseInt and parseFloat answer is: " + c );
}</SCRIPT></HEAD><BODY><FORM NAME="Form1">
<P> A = <INPUT TYPE="TEXT" NAME="Text1">
<BR> B = <INPUT TYPE="TEXT" NAME="Text2">
<BR> <INPUT TYPE="BUTTON" NAME="Button1" VALUE="A + B ="
ONCLICK="parse ()"></P></FORM></BODY></HTML>

Output-19

/* Try to use substr function, indexof function.*/


Program-20
<HTML><HEAD><SCRIPT language="javascript">
function cal()
{
var str=st.value;
var wrd=inp.value;
a=parseInt(sbs.value);
b=parseInt(sbt.value);
var pos=str.indexOf(wrd);
if(pos>=0)
{
rs.value=pos;
}
else
{
rs.value=str+" not found ";
}
rt.value=str.substr(a,b);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Enter a String</H1><BR>
<INPUT type=text name=st value="" size="60"><BR>
<BR><BR>
<B><H1>Enter the word whose index you want :< /B>
<INPUT type=text name=inp value="" size="30"><BR>
<B><H1>Enter starting index of substring :< /B>
<INPUT type=text name=sbs value="" size="10"><BR>
<B><H1>Enter the size of substring :< /B>
<INPUT type=text name=sbt value="" size="10"><BR>
<INPUT type=button value=SUBMIT Onclick=cal ()><BR><BR>
<B><H1>The Index value :< /B>
<INPUT type=text name=rs value="" size="10"><BR>
<B>The substring :< /B>
<INPUT type=text name=rt value="" size="40"><BR>
</BODY></H1>
</HTML>

Output-20

/* Drop down menu and open different sites.*/


Program-21
<Html><head><title>Prashant</title><script type="text/JavaScript">
function put()
{
txt=forms.myList.options[forms.myList.selectedIndex].text
window. open ("http://"+txt+".com");
}
</script></head>
<body><form name="forms">
<h1>Select your favorite browser :< /h1>
<select name="myList" onchange="put ()">
<Option>Internet Explorer</option>
<Option>Netscape</option>
<Option>Opera</option>
</select></form></body></html>

Output-21

You might also like