1. Arrays Create an array of strings var table = ["first", "second", "third"]; Print the third item alert(table[2]); Example IndexContents 0"first" 1"second" 2"third" Definition: A table of variables accessed by its index Note: The initial index is zero; not one

2. Slogan of the Day var sloganList = ["Four score and seven years ago", "Don't worry, be happy", "At the end of the day", "Sooner rather than later", "He gives him some gravitas", "He needs the tools to combat terror"]; var num = Math.floor(Math.random()*sloganList.length); document.write(sloganList[num]); How would you add some more? Array: A table of variables that we access by its index

3. JavaScript Decision Statements if (** condition **) { **** block of instructions if condition is true**** } else { **** block of instructions if condition is false **** } Notes: 1.The braces are not needed if a block has only one instruction 2.The else part is optional, and can be skipped 3.Caution: syntax MUST be exact for it to work 4.The next slide describes what conditions are More commonly called condition statements

4. Conditions Examples of conditions Assume x=3, y=5, z=6, s1="abc", s2 = "def", s3="abcd" Possible Conditions A group of conditions x>y, x =x, x z, !(x>y), s1<s2, s1<s3 Are they true or false? false, true, true, false, true, true, false, false, true, true, true

5. Lets try a Rollover var firstImage = true; function rollOver(idName) { var tag = document.getElementById(idName); if (firstImage==true) { tag.src = "rabbit2.gif"; firstImage = false; } else { tag.src = "rabbit.gif"; firstImage = true; } } When the mouse goes over the image it switches The else part is optional and many if statements don't need it Note: == means equal http://cs.sou.edu/~harveyd/classes/cs210/examples/week8/rollover1.htm

6. Lots of Rollovers var imageNo = 0; function rollOver(idName) { var tag = document.getElementById(idName); if (imageNo==0) tag.src = "rabbit1.gif"; else if (imageNo==1) tag.src = "rabbit2.gif"; else if (imageNo==2) tag.src = "rabbit3.gif"; else if (imageNo==3) tag.src = "rabbit4.gif"; else if (imageNo==4) tag.src = "rabbit5.gif"; else tag.src = "rabbit.gif"; imageNo = (imageNo + 1) % 6; } It switches between six rabbit pictures on clicks Substitute Math.floor((Math.random()) * 6) Instead of: (imageNo+1)%6 to make the pictures switch randomly The % means remainder 10 % 3 = 1 http://cs.sou.edu/~harveyd/classes/cs210/examples/week8/rollover2.htm

7. Rollovers Using an Array var num = 0; var gifNames = ["rabbit.gif", "rabbit1.gif", "rabbit2.gif", "rabbit3.gif ", "rabbit4.gif", "rabbit5.gif"]; function rollOver(idName) { var tag = document.getElementById(idName); tag.src = imageList[num].src; num = (num+1)%imageList.length; } JavaScript calls these tables arrays Definition: An array is an indexed table of variables http://cs.sou.edu/~harveyd/classes/cs210/examples/week8/rollover3.htm

8. Guess the Number Game var theNumber = Math.floor(Math.random()*1000); function guessIt() { var textBox = document.getElementById("guess"); var answer = parseInt(textBox.value); if (isNaN(answer)) alert("Illegal Input"); else if (answer < theNumber) alert("Too Low"); else if (answer > theNumber) alert("Too High"); else if (answer == theNumber) { alert("You got it"); theNumber = Math.floor(Math.random()*1000); } return; } http://cs.sou.edu/~harveyd/classes/cs210/examples/week8/guessNumber.htm

9. An On-line Quiz http://cs.sou.edu/~harveyd/classes/cs210/examples/week8/quiz.htm

10. JavaScript Slide Show Create your slides. You can do this with PowerPoint and use the "save as jpg" or "save as png" options. Create a web-page to roll over on a mouse click. –Simply create a form with a submit button –When the button clicks, then switch to the next picture Additional Comments –When you do this, you are using the techniques we described on the previous slides. –An entire slide show is possible with a single html page –Once done once, you can create other slide shows by just linking to other images –Visitors to your pages don't need to have PowerPoint installed.

11. Detect Browser type and version document.write('Enjoy your web experience with '); document.write(navigator.appName + ' ' +navigator.appVersion); // A warning message for viewers with old web browsers if ( parseInt( navigator.appVersion) ' + ' Your browser is out of date '); }

12. Create a Pop Up Window function showPopup() { // Create a new popup window var popup = window.open( "", "popup", "width=600,height=450," + "status,scrollbars,resizable, screenX=20,screenY=40, left=20, top=40"); // Write HTML into popup window page using document.writeln statements popup.document.writeln(' Nice Page '); popup.document.writeln(' '); popup.document.writeln(' Big Header '); popup.document.writeln(' '); // Tell browser that we are done and make the popup visible popup.document.close(); popup.focus() } Note: Use the first argument of window.open for displaying web pages that already exist; in this case, popup.doument.writeln statements aren’t needed. Note: The third argument configures how the popup will look; some of its values are duplicates so the popup will work with all browsers

13. Display the Time of the Day var today = new Date(); var hours = today.getHours(); var pm = "p.m.“; if (hours < 12) pm = "a.m.“; hours = hours % 12; if (hours==0) hours=12; document.write (hours + ":" + today.getMinutes() + ":" + today.getSeconds() + " " + pm + " "); We are creating a new date object

14. Review Questions When is a '{' needed in an IF statement? What is an array? What is a condition? How do you represent 'not equal' in JavaScript? What is the difference between '==' and not '=‘? How can JavaScript create a popup window? What does NaN mean? What statement randomly picks an integer 5 and 10? How do we write tags into a browser window? What does the Math.floor() function do?