Download presentation
Presentation is loading. Please wait.
1
JavaScript Part 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 Select a topic HTML CSS JavaScript The value attribute of the options is set equal to the page you want to jump to
6
Select-and-Go JavaScript function jumpPage() { newPage = document.getElementById("newLocation").op tions[document.getElementById("newLocatio n").selectedIndex].value; window.location = newPage; }
![Select-and-Go JavaScript function jumpPage() { newPage = document.getElementById( newLocation ).op tions[document.getElementById( newLocatio n ).selectedIndex].value; window.location = newPage; }](http://images.slideplayer.com./25/7827061/slides/slide_6.jpg "Select-and-Go JavaScript function jumpPage() { newPage = document.getElementById( newLocation ).op tions[document.getElementById( newLocatio n ).selectedIndex].value; window.location = newPage; }")
7
Dynamically Changing Menus <body onload="reset();" Choose sport Basketball Soccer Select Team
8
Dynamically Changing Menus 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
![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](http://images.slideplayer.com./25/7827061/slides/slide_9.jpg "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")
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 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 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++;}
![Image Rotation 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++;}](http://images.slideplayer.com./25/7827061/slides/slide_13.jpg "Image Rotation 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++;}")
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 x = 0; function move() { document.getElementById("pic").style.left = x; x +=1; } #pic {position:relative} This is some text 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
Similar presentations
