1 / 14

Arrays

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

knox-craig
Download Presentation

Arrays

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. Arrays Definition: A table of variables accessed by its index Example • Create an array of stringsvar table = ["first", "second", "third"]; • Print the third itemalert(table[2]); Note: The initial index is zero; not one

  2. Slogan of the Day Array: A table of variables that we access by its index <html><body><h1> <script type="text/javascript"> 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]); </script></h1></body></html> How would you add some more?

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

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

  5. When the mouse goes over the image it switches Lets try a Rollover http://cs.sou.edu/~harveyd/classes/cs210/examples/week8/rollover1.htm The else part is optional and many if statements don't need it <html><head> <script type="text/javascript"> 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; } } </script></head><body> <img id="myImage" src="rabbit.gif" alt= "myImage" onMouseOver="rollOver('myImage');" /> </body></html> Note: == means equal

  6. Lots of Rollovers http://cs.sou.edu/~harveyd/classes/cs210/examples/week8/rollover2.htm The % means remainder 10 % 3 = 1 <script type="text/javascript"> 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

  7. <html><head> <script type="text/javascript"> 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; } </head><body> <img id="image" src="rabbit.gif" alt="image" onClick="rollOver('image');" /> </body></html> Rollovers Using an Array http://cs.sou.edu/~harveyd/classes/cs210/examples/week8/rollover3.htm JavaScript calls these tables arrays Definition: An array is an indexed table of variables

  8. Guess the Number Game http://cs.sou.edu/~harveyd/classes/cs210/examples/week8/guessNumber.htm <script type="text/javascript"> 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; } </script> <form> <input type="text" size="6" id="guess" /> <input type="button" value="Guess Here" onClick="guessIt()" /> </form>

  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 <script type="text/JavaScript">document.write('Enjoy your web experience with '); document.write(navigator.appName + ' ' +navigator.appVersion);// A warning message for viewers with old web browsersif ( parseInt( navigator.appVersion) < 3 ) { document.write ('<br />' + ' Your browser is out of date<br />');}</script>

  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('<html><head><title>Nice Page</title>'); popup.document.writeln('<link rel="stylesheet" type="text/css" href="style.css" />'); popup.document.writeln('</head><body><h1 align="center">Big Header</h1>'); popup.document.writeln('</body></html>'); // 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 <script type="text/JavaScript"> 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 + " "); </script> 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?

More Related