javascript part 8 george mason university june 21, 2010
TRANSCRIPT
JavaScriptPart 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
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)
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
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
Select-and-Go JavaScript
<script>
function jumpPage() {
newPage = document.getElementById("newLocation").options[document.getElementById("newLocation").selectedIndex].value;
window.location = newPage; }
</script>
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>
Dynamically Changing Menus
• <script>
function reset() {
document.getElementById("first").selectedIndex = 0;
document.getElementById("second").selectedIndex = 0;
}
Dynamically Changing Menusfunction 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>
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;
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)
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!
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" />
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
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
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
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
Date Object
• setYear(year)• setMonth(month) (month is 0-11)• setDate(dayofmonth) • getYear()• getDate()• getDay() (0-Sunday, 6-Saturday)• getMonth() (month is 0-11)
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