More JavaScript Examples

More JavaScript Examples

Please use speaker notes for additional information!

<HTML><HEAD><TITLE>Check Pay</TITLE><SCRIPT language="JavaScript">

function whichType(payInfo){

if (window.document.payInfo.fullsal.checked == true) {

window.document.payInfo.theType.value = "Salaried Employee";}

if (window.document.payInfo.fullhr.checked == true) {

window.document.payInfo.theType.value = "Full Time Hourly Employee";}

if (window.document.payInfo.parttime.checked == true) {

window.document.payInfo.theType.value = "Part Time Hourly Employee";}

}</SCRIPT></head><body><h1>Type of employee:</h1>Check the type of employee:<FORM NAME = "payInfo"><INPUT TYPE = "checkbox" NAME = "fullsal"> Full time - salaried<BR><INPUT TYPE = "checkbox" NAME = "fullhr"> Full time- hourly<BR><INPUT TYPE = "checkbox" NAME = "parttime"> Part time<BR><INPUT TYPE = "button" VALUE = "Select type" onClick = "whichType(payInfo);"><INPUT TYPE = "text" NAME = "theType" SIZE="30"><BR></FORM></BODY></HTML>

<HTML><HEAD><TITLE>Check Pay</TITLE><SCRIPT language="JavaScript">

function whichType(fullsalRec,fullhrRec,parttimeRec,theTypeRec){

if (fullsalRec.checked == true) {

theTypeRec.value = "Salaried Employee";}

if (fullhrRec.checked == true) {

theTypeRec.value = "Full Time Hourly Employee";}

if (parttimeRec.checked == true) {

theTypeRec.value = "Part Time Hourly Employee";}

}</SCRIPT></head><body><h1>Type of employee:</h1>Check the type of employee:<FORM NAME = "payInfo"><INPUT TYPE = "checkbox" NAME = "fullsal"> Full time - salaried<BR><INPUT TYPE = "checkbox" NAME = "fullhr"> Full time- hourly<BR><INPUT TYPE = "checkbox" NAME = "parttime"> Part time<BR><INPUT TYPE = "button" VALUE = "Select type" onClick = "whichType(fullsal,fullhr,parttime,theType);"><INPUT TYPE = "text" NAME = "theType" SIZE="30"><BR></FORM></BODY></HTML>

<HTML><HEAD><TITLE>Check Pay</TITLE><SCRIPT language="JavaScript">//Note that in the previous example I used check boxes and the way the if statements worked,//the last check box was the one that was used. In this example I am using radio buttons//which are more appropriate.//In this case there are three buttons named radiobutton - to access any one of them I//need to use an index (since there are three buttons with the same name they form an //array)

function whichType(radiobutton){

if (window.document.payInfo.radiobutton[0].checked == true) {






}</SCRIPT></head><body><h1>Type of employee:</h1>Check the type of employee:<FORM NAME = "payInfo"><INPUT TYPE = "radio" NAME = "radiobutton" VALUE="fullsal"> Full time - salaried<BR><INPUT TYPE = "radio" NAME = "radiobutton" VALUE="fullhr"> Full time- hourly<BR><INPUT TYPE = "radio" NAME = "radiobutton" VALUE="parttime"> Part time<BR><INPUT TYPE = "button" VALUE = "Select type" onClick = "whichType(radiobutton);"><INPUT TYPE = "text" NAME = "theType" SIZE="30"><BR></FORM></BODY></HTML>

<HTML><HEAD><TITLE>Check Pay</TITLE><SCRIPT language="JavaScript">function whichType(radiobuttonx){

if (radiobuttonx[0].checked == true) {






}</SCRIPT></head><body><h1>Type of employee:</h1>Check the type of employee:<FORM NAME = "payInfo"><INPUT TYPE = "radio" NAME = "radiobutton" VALUE="fullsal"> Full time - salaried<BR><INPUT TYPE = "radio" NAME = "radiobutton" VALUE="fullhr"> Full time- hourly<BR><INPUT TYPE = "radio" NAME = "radiobutton" VALUE="parttime"> Part time<BR><INPUT TYPE = "button" VALUE = "Select type" onClick = "whichType(radiobutton);"><INPUT TYPE = "text" NAME = "theType" SIZE="30"><BR></FORM></BODY></HTML>

<HTML><HEAD><TITLE>Playing with time tests!</TITLE><SCRIPT LANGUAGE="JavaScript">monthArray = new Array(12);monthArray[1]="January";monthArray[2]="February";monthArray[3]="March";monthArray[4]="April";monthArray[5]="May";monthArray[6]="June";monthArray[7]="July";monthArray[8]="Auguest";monthArray[9]="September";monthArray[10]="October";monthArray[11]="November";monthArray[12]="December";// This script sets up a 12 element array that contains the names of the months. Notice// that each element of the array is given the same name - in this case monthArray. The// number in [] after the name is an index. The first element in my array is going to// have an index of 1 and it is going to contain January. When I want to get the month// to display on my screen. I can simply use the month from the system as the index on// monthArray to get the correct written month. This is a far too brief explanation. Be// sure to look up arrays in a book or a tutorial. They can be tricky and you should spend// some time looking at examples and explanations!</SCRIPT></HEAD><BODY BGCOLOR=beige><DIV ALIGN=CENTER><IMG SRC=CISa.gif><BR>The CIS Department at BCC runs both day and evening classes.<UL><LI>Day classes run from 8:00AM until 4:00PM<LI>DCE classes run from 4:00PM until 10:00PM</UL><BR>

Array Element[index] Content of ArraymonthArray[1] JanuarymonthArray[2] FebruarymonthArray[3] MarchmonthArray[4] AprilmonthArray[5] MaymonthArray[6] JunemonthArray[7] JulymonthArray[8] AugustmonthArray[9] SeptembermonthArray[10] OctobermonthArray[11] NovembermonthArray[12] December

<SCRIPT LANGUAGE="JAVASCRIPT"> todaydate=new Date() tday = todaydate.getDate(); tmo = todaydate.getMonth() + 1; if (navigator.appName == "Netscape") { var tyr = todaydate.getYear() + 1900; } else { var tyr = todaydate.getYear(); } var thr = todaydate.getHours();

document.write("After checking our clock for the date " + monthArray[tmo] + tday + ", " + tyr + "<BR>"); if (thr >=8 && thr <16) { document.write("Day school schedule is in effect!"); } else if (thr >=16 && thr < 22) { document.write("DCE schedule is in effect!"); } else { document.write("The campus is closed!"); }

</SCRIPT></DIV></BODY></HTML>

Here is where I should have concatenated with a space between month and day.

Here I am taking the month from the date and adding 1 to it to put it in the range 1 to 12.

Here I am using tmo as the index for monthArray to extract the correct month.

<HTML><HEAD><TITLE>Playing with time tests!</TITLE><SCRIPT LANGUAGE="JavaScript">monthArray = new Array(12);monthArray[1]="January";monthArray[2]="February";monthArray[3]="March";monthArray[4]="April";monthArray[5]="May";monthArray[6]="June";monthArray[7]="July";monthArray[8]="Auguest";monthArray[9]="September";monthArray[10]="October";monthArray[11]="November";monthArray[12]="December";

dayArray = new Array(7);dayArray[0] = "Sunday";dayArray[1] = "Monday";dayArray[2] = "Tuesday";dayArray[3] = "Wednesday";dayArray[4] = "Thursday";dayArray[5] = "Friday";dayArray[6] = "Satuday";</SCRIPT></HEAD><BODY BGCOLOR=beige><DIV ALIGN=CENTER><IMG SRC=CISa.gif><BR>The CIS Department at BCC runs both day and evening classes.<UL><LI>Day classes run from 8:00AM until 4:00PM<LI>DCE classes run from 4:00PM until 10:00PM</UL>

New array for days of the week.

<BR><SCRIPT LANGUAGE="JAVASCRIPT"> todaydate=new Date() tday = todaydate.getDate(); tdayword = todaydate.getDay(); tmo = todaydate.getMonth() + 1; if (navigator.appName == "Netscape") { var tyr = todaydate.getYear() + 1900; } else { var tyr = todaydate.getYear(); } var thr = todaydate.getHours(); document.write("After checking our clock for the date " + dayArray[tdayword] + ", ” + monthArray[tmo] + tday + ", " + tyr + "<BR>"); if (thr >=8 && thr <16) { document.write("Day school schedule is in effect!"); } else if (thr >=16 && thr < 22) { document.write("DCE schedule is in effect!"); } else { document.write("The campus is closed!"); }

</SCRIPT></DIV></BODY></HTML>

Note this line has been wrapped on the slide - in the code it is one line.

Extracting numbers that will be used as indexes or subscripts or pointers depending on your vocabulary choice.

Using tdayword as the index to take the correct element from the dayArray.

<HTML><HEAD><TITLE>Working with a banner</TITLE></HEAD><SCRIPT>// I am establishing an array of 6 elements called fstArray. The array will have an// index that can contain values 0, 1, 2, 3, 4, 5 (therefore the 6 elements).// The source for each element in the array is a different picture.// Note that the value of the array is that each element in the array has the same name// and by varying the subscript I can point to different elements. This makes it easy// to loop through the elements in the array by changing the index that points to the// different elements. fstArray[0] gets me the first image, fstArray[2] gets me the// second image etc. Be sure to read about arrays in a text or tutorial! fstArray = new Array(6); fstArray[0]=new Image; fstArray[0].src="house.jpg"; fstArray[1]=new Image; fstArray[1].src="street.jpg"; fstArray[2]=new Image; fstArray[2].src="path.jpg"; fstArray[3]=new Image; fstArray[3].src="snow.jpg"; fstArray[4]=new Image; fstArray[4].src="tree.jpg"; fstArray[5]=new Image; fstArray[5].src="houseusd.jpg"; index=0;

I used a two step process to set up a new Image and then fill it with a specific image.

I established an index and set it to 0.

function cycle() { document.rotate.src=fstArray[index].src; index=index+1; if (index==6) { index = 0; } setTimeout("cycle()",1000); }// setTimeout deals with the amount of time in milliseconds before the expression// refered to evaluates - in this example before cycle. This means that I have set// up an endless loop here because onLoad says to do cycle and within cycle I say to do// cycle - therfore the endless loop - a programming technique to use carefully!</SCRIPT></HEAD><BODY onLoad="cycle();"><IMG SRC="snow.jpg" NAME="rotate" WIDTH=50% HEIGHT=50%>

</BODY></HTML>

Cycle is a function that calls itself so we have an endless loop.

<HTML><HEAD><TITLE>Working with a banner</TITLE></HEAD><SCRIPT> fstArray = new Array(6); fstArray[0]=new Image; fstArray[0].src="house.jpg"; fstArray[1]=new Image; fstArray[1].src="street.jpg"; fstArray[2]=new Image; fstArray[2].src="path.jpg"; fstArray[3]=new Image; fstArray[3].src="snow.jpg"; fstArray[4]=new Image; fstArray[4].src="tree.jpg"; fstArray[5]=new Image; fstArray[5].src="houseusd.jpg"; index=0; function cycle() { document.rotate.src=fstArray[index].src; index=index+1; if (index==6) { index = 0; } } </SCRIPT></HEAD><BODY><DIV ALIGN=CENTER><H1>Pictures of the Snow</H1>

<FORM><INPUT TYPE=BUTTON VALUE="rotate” onClick="cycle();"></FORM><IMG SRC="snow.jpg" NAME="rotate" WIDTH=50% HEIGHT=50%></DIV></BODY></HTML>

<HTML><HEAD><TITLE>Changed location</TITLE><SCRIPT LANGUAGE="JAVASCRIPT"> function newSite() { location="flickcol.html"; }</SCRIPT></HEAD><BODY><H1 ALIGN=CENTER>CHANGE OF SITE!</H1>The function that takes you to a different location is a user-defined function. Most of the literature that I have read says that the best place to put a user-defined function is inthe HEAD section so that it is defined and loaded prior to use.<BR><BR> JavaScript functions can be called by using the function name as I did below when I set up the time out. In this case then, I have the time out method calling and thereby executingthe new site user-defined function.<SCRIPT LANGUAGE="JAVASCRIPT"> var line1 = "This site has moved - please click on this URL if you do not automatically "; var line2 = "go to the new site in 10 seconds. <A HREF='flickcol.html'>Click here</A>"; document.write("<H2>"+line1+line2+"</H2>"); setTimeout("newSite()",10000);</SCRIPT></BODY></HTML>

This function gives the location of the new site.

The user can stop the automatic move by clicking on Click here which will send them to the same location shown in the function.

setTimeout gives the time before executing the function called newSite which contains the new location.

<HTML><HEAD><TITLE>With popup</TITLE><SCRIPT LANGUAGE=JAVASCRIPT> window.open("msgpopup.html","msgWin","WIDTH=400,HEIGHT=400");</SCRIPT></HEAD><BODY><H1>COMPUTER INFORMATION SYSTEMS</H1>The Computer Information Systems Department has 5 degree options and 5 certificates.<BR><BR><H2>Degree Options</H2><UL><LI>Programming Career<LI>Networking Career<LI>Multimedia and Internet Career<LI>Microcomputers for Business Career<LI>Information Systems Transfer</UL>Comments:<BR>The syntax for the open() method is open("URL","name", options); where the URLis the name of the page you want to open in the new window, the name is the nameof the new window and the options are things like the width and height of the newwindow. Note that window.open can also be written as open in most cases.</BODY></HTML>

<HTML><HEAD><TITLE>With popup</TITLE><SCRIPT LANGUAGE=JAVASCRIPT> open("msgpopup.html","msgWin","WIDTH=400,HEIGHT=250,SCROLLBARS")</SCRIPT></HEAD><BODY><H1>COMPUTER INFORMATION SYSTEMS</H1>The Computer Information Systems Department has 5 degree options and 5 certificates.<BR><BR><H2>Degree Options</H2><UL><LI>Programming Career<LI>Networking Career<LI>Multimedia and Internet Career<LI>Microcomputers for Business Career<LI>Information Systems Transfer</UL></BODY></HTML>

<HTML><HEAD><TITLE>Menu Window</TITLE><SCRIPT language = "JavaScript"></SCRIPT></HEAD><BODY><H2>This page brings up a window with a series of menu choices. The window isresizable and moved to a specific location</H2>In this example I am assigning the results of opening the menu to the variable menuWindowwhich means that I can then refer to menuWindow as I did when I moved the window to aspecific location.</BODY></HTML>

<HTML><HEAD><TITLE>The Menu</TITLE><SCRIPT language="JavaScript"></SCRIPT></HEAD><BODY><A HREF="#" onClick="window.opener.location= 'http://www.bristol.mass.edu/'; if (recentVersion) {window.focus();}">Bristol</A><BR><A HREF="#" onClick="window.opener.location= 'http://www.pgrocer.net/'; if (recentVersion) {window.focus();}">Grocer Home Page</A><BR><A HREF="#" onClick="window.opener.location= 'http://www.pgrocer.net/Cis44/HTML/javascript/amenuwindow.html'; if (recentVersion) {window.focus();}">Back to original</A><BR></BODY></HTML>

Again, I am wrapping to fit on the slide. The A HREF lines are one line.

Documents

More JavaScript Examples