1 / 19

JavaScript Part 8

JavaScript Part 8. George Mason University June 21, 2010. Topics. Popup Windows Jump Menu Dynamically Changing Menus Image Rotation Moving Object on Screen Date Object. Popup Windows.

odele
Download Presentation

JavaScript Part 8

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. JavaScriptPart 8 George Mason University June 21, 2010

  2. Topics Popup Windows Jump Menu Dynamically Changing Menus Image Rotation Moving Object on Screen Date Object

  3. Popup Windows win=window.open("content.html","newWin", "toolbar=yes,location=yes,scrollbars=yes, resizable=yes,width=300,height=300"); -the first argument specified the content to be displayed in the window -the second argument gives the window a name, so it can be referred to through the target attribute in HTML)

  4. Popup Windows The third argument specifies the attributes of the window; if you don't specify anything, all things are included by default, but if you specify some things, the default for the things not mentioned will be no Don't put spaces in the third argument Browsers often block popup windows Assigning the window.open to a variable, in this case win, allows you to refer to this window later in code

  5. Select-and-Go Navigation • <body onload='document.getElementById("newlocation").selectedIndex=0;'> <!– to reset the page when you come back to it --> • <form><select id="newlocation" onchange="jumpPage();"><option value="currentpage.html">Select a topic</option><option value="html.html">HTML</option<option value="css.html">CSS</option><option value="javascript.html">JavaScript</option> • </select></form> The value attribute of the options is set equal to the page you want to jump to

  6. Select-and-Go JavaScript <script> function jumpPage() { newPage = document.getElementById("newLocation").options[document.getElementById("newLocation").selectedIndex].value; window.location = newPage; } </script>

  7. Dynamically Changing Menus <body onload="reset();" <form> <select id="first" onchange="changesecond();"> <option>Choose sport</option> <option>Basketball</option> <option>Soccer</option> </select> <select id="second"> <option>Select Team</option> </select> </form>

  8. Dynamically Changing Menus • <script> function reset() { document.getElementById("first").selectedIndex = 0; document.getElementById("second").selectedIndex = 0; }

  9. Dynamically Changing Menus function changesecond() { b=document.getElementById("second"); b.selectedIndex = 0; switch(document.getElementById("first").selectedIndex) { case 1: b.options.length = 3; b.options[1].text = "Lakers"; b.options[2].text = "Celtics"; break; case 2: b.options.length = 4; b.options[1].text = "US"; b.options[2].text = "England"; b.options[3].text = "Slovenia"; break; } // end switch } // end function </script>

  10. Dynamically Changing Jump Menus • The dynamically changing second menu can also function as a jump menu (e.g. at billpegram.com) • To each option, add a value that specifies the URL where one is supposed to go, e.g. b.options[1].value = "http://www.lakers.com"; • Add an onchange event handler to the second <select> tag using window.location=document.getElementById("second").options[selectedIndex].value;

  11. Executing JavaScript after Specified Delay • setTimeout("JS", milliseconddelay); • setInterval("JS", milliseconddelay); Difference is that setTimeOut executes once, whereas setInterval executes repeatedly Earlier JS versions didn't have setInterval so one could emulate that through recursive design (function calling itself)

  12. Animation Examples of Use of JS Delay Image Rotation Moving Object on Screen Scrolling status line – I don't like these so you'll have to do the code yourself!

  13. Image Rotation <script> i = 1; // initialize i, you start at the second picture since the first one is already displaying to avoid additional lag NUM_IMAGES = 2; // this and following statement are moved out of the function pics = new Array("aol.gif","microsoft.gif"); // no need for them to execute each time function rotate() { if (i>=NUM_IMAGES) i=0; // JavaScipt arrays start at 0 document.getElementById("pic").src = pics[i]; i++;} </script> </head> <body onload="setInterval('rotate()',2000);"> <img src="aol.gif" width="249" height="43" id="pic" />

  14. Image Rotation (cont.) Preceding code works fine in IE8 and Opera, but in Firefox 3 the image change doesn't occur till after the time lag or one moves the cursor, whichever happen later

  15. Moving Object on Screen <script> x = 0; function move() { document.getElementById("pic").style.left = x; x +=1; } </script> <style> #pic {position:relative} </style> </head> <body onload="setInterval('move()',50);">This is some text <img src="aol.gif" width="249" height="43" id="pic" />This is some more text

  16. Moving Object in Screen The preceding code works in IE8 and Opera, but not in Firefox; perhaps the caching behavior of Firefox is the culprit

  17. Date Object • d = new Date(); creates a Date object with the current day and time – i.e. when the code is executed. • One can pass in values to set the Date, e.g. d = new Date("12/25/2010" ); Alternatively, one can create the date with the current date and then change it to the desired date using set methods of the Date object

  18. Date Object setYear(year) setMonth(month) (month is 0-11) setDate(dayofmonth) getYear() getDate() getDay() (0-Sunday, 6-Saturday) getMonth() (month is 0-11)

  19. Date Object These and other methods of the Date object can be used in conjunction with conditional statements (switch, if, if else if) to output dates in standard format

More Related