JavaScript

1
JavaScript return function, time object and
image rollover
2
Function that provides a return

• We seen function eg. displayText()
• We seen function with parameters function
  f1(varName) eg. markBox(cell)
• Today we tackle function that returns something.
  It could return a number, a string, a boolean or
  even an object
• Might need it for TIC TAC TOE assignment
  especially for checkWin()

3
Example

• function calcArea(l, w) / function calculates
  and returns /
• var area lw
• return area
• function calcPerim(l, w)
• return (2 l w) //a short cut without using
  temp var
• function calc()
• var widparseFloat(document.simpleForm.widthBox.v
  alue)
• var lenparseFloat(document.simpleForm.lengthBox.
  value)
• calcArea(len, wid)
• calcPerim(len, wid)
• document.simpleForm.showArea.value area
• document.simpleForm.showPerim.value perimeter

4
Example of function return

• function calcArea(l, w) / function calculates
  and returns /
• var area lw
• return area
• function calcPerim(l, w)
• return (2 l w) //a short cut without using
  temp var
• function calc()
• var widparseFloat(document.simpleForm.widthBox.v
  alue)
• var lenparseFloat(document.simpleForm.lengthBox.
  value)
• var area calcArea(len, wid) // call a fn
  with parameters
• var perimeter calcPerim(len, wid)
• document.simpleForm.showArea.value area
• document.simpleForm.showPerim.value perimeter

5
Exercise Displaying Time.

• For this exercise, you need to be able to use the
  previous jex12.html to help you. You DO NOT need
  random function.
• The only part is how to create current time.
• There is a Date object. Use the code here below
  to create a timeStamp variable that is of object
  type Date(). See the code below in order to get
  the hrs, mins and seconds.
• var timeStamp new Date()
• hrs timeStamp.getHours()
• mins timeStamp.getMinutes()
• seconds timeStamp.getSeconds()
• Note that hrs, mins and seconds are declared as
  numeric integer. In order to print them in
  HHMMSS, you need to concatenate into string ie.
• displayString hrs "" mins "" seconds

6
Exercise Displaying Time.

• displayString hrs "" mins "" seconds
• Then you write the following code to display the
  time.
• document.simpleForm.displayTime.value
  displayString
• However, if any of hrs, mins or seconds are less
  than 10, then the time might look wierd, eg.
• 945 which actually suppose to mean 090405
• Therefore you need to write some if conditions to
  include a "0" in front.
• displayString can be concatenated to itself. For
  example if displayString shows "bc" and you want
  to make it "abc", you do
• displayString "a" displayString
• displayString shows "bc" and you want to make it
  "bcd", you do
• displayString displayString "d"

7
Exercise jex14.html From trial to reality

• First try and get the seconds out of the time
  stamp and see if you can animate the seconds
  moving and stopping.
• Once this works, then you try and get the whole
  time to display correctly. Do not worry about the
  09 vs. 9 minutes at this point. Once you are able
  to display the time, then you start to write the
  if condition to check.
• Once this works, then you can use style sheet to
  modify your textbox. Look at POP/TART exercise

8
Image Roll Over

• You have seen this applications of image roll
  over in many web pages especially for menu
  choices etc.
• The two event handlers that deals with image roll
  over are
• onmouseover
• This is when the mouse is on top of the image
• onmouseout
• This is for handling the event when the mouse
  leaves the image.
• You need to preload all the images into arrays in
  order to facilitate this feature.

9
Example in body of HTML

• ltBODYgt
• ltA href"links.html" onmouseover "change(0)"
• onmouseout "changeback(0)"gt
• ltimg src"links1.gif" width97 height26
  border0 alignbottomgtlt/Agt
• ltA href"pics.html" onmouseover "change(1)
• onmouseout "changeback(1)"gt
• ltimg src"pics1.gif" width97 height26
  border0 alignbottom gtlt/Agt
• ltA href"demos.html" onmouseover "change(2)"
• onmouseout "changeback(2)"gt
• ltimg src"demos1.gif" width97 height26
  border0 alignbottom gtlt/Agt
• lt/BODYgt

10
Example JavaScript code

• var roll_in new Array()
• var roll_out new Array()
• for(i0 ilt3 i)
• roll_ininew Image()
• roll_outi new Image()
• roll_in0.src"links1.gif"
• roll_in1.src"pics1.gif"
• roll_in2.src"demos1.gif"
• roll_out0.src"links2.gif"
• roll_out1.src"pics2.gif"
• roll_out2.src"demos2.gif"
• function change(whichOne)
• document.imageswhichOne.src
  roll_outwhichOne.src
• function changeback(whichOne)
• document.imageswhichOne.srcroll_in
  whichOne.src

Be careful here. You may have to adjust the
index of the images. Sometimes it will be
whichOne x where x is the number of displayed
images prior to the roll over images
11
Exercise jex15.html Web page with image roll
over.