1 / 25

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

imani-key
Télécharger la présentation

More JavaScript Examples

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

  4. <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)

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

  6. <HTML> <HEAD> <TITLE>Check Pay</TITLE> <SCRIPT language="JavaScript"> 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"; } } </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>

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

  8. <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 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. Here is where I should have concatenated with a space between month and day.

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

  10. <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> 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. Note this line has been wrapped on the slide - in the code it is one line.

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

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

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

  14. <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 in the 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 executing the 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.

  15. <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 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. </BODY> </HTML>

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

  17. <HTML> <HEAD> <TITLE>Menu Window</TITLE> <SCRIPT language = "JavaScript"> <!-- hide from older browsers var menuWindow = window.open("athemenu.html","menuWindow","width=200,height=100,resizable"); menuWindow.moveTo(150,200); // end hide --> </SCRIPT> </HEAD> <BODY> <H2>This page brings up a window with a series of menu choices. The window is resizable and moved to a specific location</H2> 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. </BODY> </HTML>

  18. <HTML> <HEAD> <TITLE>The Menu</TITLE> <SCRIPT language="JavaScript"> <!-- 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 --> </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.

More Related