1. More JavaScript Examples Please use speaker notes for additional information!

2. Check Pay 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"; } Type of employee: Check the type of employee: Full time - salaried Full time- hourly Part time

3. Check Pay 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"; } Type of employee: Check the type of employee: Full time - salaried Full time- hourly Part time <INPUT TYPE = "button" VALUE = "Select type" onClick = "whichType(fullsal,fullhr,parttime,theType);">

4. Check Pay //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)

5. function whichType(radiobutton) { if (window.document.payInfo.radiobutton[0].checked == true) { window.document.payInfo.theType.value = "Salaried Employee"; } if (window.document.payInfo.radiobutton[1].checked == true) { window.document.payInfo.theType.value = "Full Time Hourly Employee"; } if (window.document.payInfo.radiobutton[2].checked == true) { window.document.payInfo.theType.value = "Part Time Hourly Employee"; } Type of employee: Check the type of employee: Full time - salaried Full time- hourly Part time

6. Check Pay function whichType(radiobuttonx) { if (radiobuttonx[0].checked == true) { window.document.payInfo.theType.value = "Salaried Employee"; } if (radiobuttonx[1].checked == true) { window.document.payInfo.theType.value = "Full Time Hourly Employee"; } if (radiobuttonx[2].checked == true) { window.document.payInfo.theType.value = "Part Time Hourly Employee"; } Type of employee: Check the type of employee: Full time - salaried Full time- hourly Part time

8. Playing with time tests! 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! The CIS Department at BCC runs both day and evening classes. Day classes run from 8:00AM until 4:00PM DCE classes run from 4:00PM until 10:00PM Array Element[index] Content of Array monthArray[1] January monthArray[2] February monthArray[3] March monthArray[4] April monthArray[5] May monthArray[6] June monthArray[7] July monthArray[8] August monthArray[9] September monthArray[10] October monthArray[11] November monthArray[12] December

9. 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 + " "); 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!"); } 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.

11. Playing with time tests! 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"; The CIS Department at BCC runs both day and evening classes. Day classes run from 8:00AM until 4:00PM DCE classes run from 4:00PM until 10:00PM New array for days of the week.

12. 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 + " "); 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!"); } 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.

13. Working with a banner // 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.

14. 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! <IMG SRC="snow.jpg" NAME="rotate" WIDTH=50% HEIGHT=50%> Cycle is a function that calls itself so we have an endless loop.

16. Working with a banner 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; } Pictures of the Snow <IMG SRC="snow.jpg" NAME="rotate" WIDTH=50% HEIGHT=50%>

18. Changed location function newSite() { location="flickcol.html"; } CHANGE OF SITE! 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 in the HEAD section so that it is defined and loaded prior to use. 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 executing the new site user-defined function. 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. Click here "; document.write(" "+line1+line2+" "); setTimeout("newSite()",10000); 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.

20. With popup window.open("msgpopup.html","msgWin","WIDTH=400,HEIGHT=400"); COMPUTER INFORMATION SYSTEMS The Computer Information Systems Department has 5 degree options and 5 certificates. Degree Options Programming Career Networking Career Multimedia and Internet Career Microcomputers for Business Career Information Systems Transfer Comments: The syntax for the open() method is open("URL","name", options); where the URL is the name of the page you want to open in the new window, the name is the name of the new window and the options are things like the width and height of the new window. Note that window.open can also be written as open in most cases.

22. With popup open("msgpopup.html","msgWin","WIDTH=400,HEIGHT=250,SCROLLBARS") COMPUTER INFORMATION SYSTEMS The Computer Information Systems Department has 5 degree options and 5 certificates. Degree Options Programming Career Networking Career Multimedia and Internet Career Microcomputers for Business Career Information Systems Transfer

24. Menu Window <!-- hide from older browsers var menuWindow = window.open("athemenu.html","menuWindow","width=200,height=100,resizable"); menuWindow.moveTo(150,200); // end hide --> This page brings up a window with a series of menu choices. The window is resizable and moved to a specific location In this example I am assigning the results of opening the menu to the variable menuWindow which means that I can then refer to menuWindow as I did when I moved the window to a specific location.

25. The Menu <!-- hides var recentVersion = false; var whichVer = parseInt(navigator.appVersion); if ((navigator.appName == "Netscape") && (whichVer > 2)) { recentVersion = true; } else if ((navigator.appName == "Microsoft Internet Explorer") && (whichVer > 3)) { recentVersion = true; } // shows --> <A HREF="#" onClick="window.opener.location= 'http://www.bristol.mass.edu/'; if (recentVersion) {window.focus();}">Bristol <A HREF="#" onClick="window.opener.location= 'http://www.pgrocer.net/'; if (recentVersion) {window.focus();}">Grocer Home Page <A HREF="#" onClick="window.opener.location= 'http://www.pgrocer.net/Cis44/HTML/javascript/amenuwindow.html'; if (recentVersion) {window.focus();}">Back to original Again, I am wrapping to fit on the slide. The A HREF lines are one line.