Arrays

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(table2)

Index Contents
0 "first"
1 "second"
2 "third"
Note The initial index is zero not one
2
Slogan of the Day
Array A table of variables that we access by its
index

• lthtmlgtltbodygtlth1gt
• ltscript type"text/javascript"gt
• 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.l
  ength)
• document.write(sloganListnum)
• lt/scriptgtlt/h1gtlt/bodygtlt/htmlgt

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
• Assumex3, y5, z6, s1"abc", s2 "def",
  s3"abcd"
• Possible Conditions
• A group of conditionsxgty, xlty, x!y, xy, xlty,
  xgtx, xlty-2 xltz, ylty ygtz, !(xgty), s1lts2,
  s1lts3
• Are they true or false?false, true, true,
  false, true, true, false, false, true, true, true

5
Lets try a Rollover
When the mouse goes over the image it switches
http//cs.sou.edu/harveyd/classes/cs210/examples/
week8/rollover1.htm

• lthtmlgtltheadgt
• ltscript type"text/javascript"gt
• var firstImage true
• function rollOver(idName)
• var tag document.getElementById(idName)if
  (firstImagetrue)
• tag.src "rabbit2.gif" firstImage
  false
• else
• tag.src "rabbit.gif" firstImage
  true
• lt/scriptgtlt/headgtltbodygt
• ltimg id"myImage" src"rabbit.gif" alt
  "myImage" onMouseOver"rollOver('myImage')" /gt
• lt/bodygtlt/htmlgt

The else part is optional and many if statements
don't need it
Note means equal
6
Lots of Rollovers
http//cs.sou.edu/harveyd/classes/cs210/examples/
week8/rollover2.htm

• ltscript type"text/javascript"gt
• var imageNo 0
• function rollOver(idName)
• var tag document.getElementById(idName)if
  (imageNo0) tag.src "rabbit1.gif"
• else if (imageNo1) tag.src
  "rabbit2.gif"
• else if (imageNo2) tag.src
  "rabbit3.gif"
• else if (imageNo3) tag.src
  "rabbit4.gif"
• else if (imageNo4) tag.src
  "rabbit5.gif"
• else tag.src "rabbit.gif"
• imageNo (imageNo 1) 6

The means remainder 10 3 1
It switches between six rabbit pictures on clicks
Substitute Math.floor((Math.random())
6) Instead of (imageNo1)6 to make the
pictures switch randomly
7
Rollovers Using an Array
http//cs.sou.edu/harveyd/classes/cs210/examples/
week8/rollover3.htm

• lthtmlgtltheadgt
• ltscript type"text/javascript"gt
• 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 imageListnum.src num
  (num1)imageList.length
• lt/headgtltbodygt
• ltimg id"image" src"rabbit.gif" alt"image"
  onClick"rollOver('image')" /gt
• lt/bodygtlt/htmlgt

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

• ltscript type"text/javascript"gt
• 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 lt theNumber) alert("Too
  Low")
• else if (answer gt theNumber) alert("Too
  High")
• else if (answer theNumber)
• alert("You got it")
• theNumber Math.floor(Math.random()1000)
  
• return
• lt/scriptgt

ltformgt ltinput type"text" size"6" id"guess"
/gt ltinput type"button" value"Guess Here"
onClick"guessIt()" /gt lt/formgt
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

• ltscript type"text/JavaScript"gtdocument.write('E
  njoy your web experience with ')
  document.write(navigator.appName ' '
  navigator.appVersion) // A warning message
  for viewers with old web browsersif ( parseInt(
  navigator.appVersion) lt 3 ) document.write
  ('ltbr /gt' ' Your browser is out of
  dateltbr /gt')lt/scriptgt

12
Create a Pop Up Window

• function showPopup()
• // Create a new popup window
• var popup window.open( "", "popup",
  "width600,height450,"
  "status,scrollbars,resizable, screenX20,screenY4
  0, left20, top40")
• // Write HTML into popup window page using
  document.writeln statements
• popup.document.writeln('lthtmlgtltheadgtlttitlegtNice
  Pagelt/titlegt')
• popup.document.writeln('ltlink rel"stylesheet"
  type"text/css" href"style.css" /gt')
• popup.document.writeln('lt/headgtltbodygtlth1
  align"center"gtBig Headerlt/h1gt')
• popup.document.writeln('lt/bodygtlt/htmlgt')
• // 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 arent
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

• ltscript type"text/JavaScript"gt var today
  new Date() var hours today.getHours()
  var pm "p.m. if (hours lt 12) pm
  "a.m. hours hours 12 if
  (hours0) hours12 document.write
• (hours "" today.getMinutes()
  ""
• today.getSeconds() " " pm
  " ")
• lt/scriptgt

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?