OBJECTIVE

Use the setInterval function, the Image object, and arrays.

DISCUSSION

setInterval() and clearInterval()

setInterval("thing to repeat", milliseconds) - use this function to create repeat actions
clearInterval("name of interval") - use this function to stop a timer

var timerX

timerX = setInterval("alert()", 2000)

//To stop the timer, uncomment the next line

//clearInterval(timerX)

Image Object and Arrays of Images

Use image object to create and store an image
After storing image in object, can assign image to HTML <img> tag.
Example - paste the following in the Body section in CodeTester:

<img id = "myImage">

<script>

//Normally this script section is in the <head> section

var iX = new Image()
iX.src = "ball.gif"
myImage.src = iX.src

</script>

Can create arrays of images:

<img id = myImage1>

<img id = myImage2>

<script>

//Normally this script section goes in the <head> section

var iList = new Array

iList[0] = new Image()

iList[1] = new Image()

iList[0].src = "ball.gif"

iList[1].src = "square.gif"

myImage1.src = iList[0].src

myImage2.src = iList[1].src

</script>

EXERCISES

1. Use the setInterval function to write "hi" to a page every 3 seconds.

2. Create a web page with a simple animation. When the user clicks a start button, an image should move slowly across the screen. When the user clicks a stop button the image should stop.

3. Create a web page with a count-down timer. The page should allow the user to enter the time in seconds and start the timer. The page should display the remaining time as the time counts down. When the time reaches 0, the timer should stop.

4. Create a web page with a simple slide show. The page should have start and stop buttons. When the user clicks the start button, the slide show should begin. The page should display at least three different images one at a time. When the user clicks the stop button, the show should stop.

LINKS AND HELP

http://www.rpi.edu/~zappenj/WWWW/java.html