BIT 116 – Scripting
Exercise 13

Timers & Images

Function/object review

Part 1: Using a Timeout Timer

Timeout timers are used to generate a single event after a specified amount of time has elapsed. The setTimeout() method of the window object is used to register a timeout event.

setTimeout() takes 2 parameters:

Place the following statement inside a script: 

        setTimeout("alert('Timeout!');", 5000);

An alert box appears 5 seconds after the page is loaded (5000 milliseconds = 5 seconds). Change the value of the second parameter to change the amount of delay before the alert appears.

Part 2: Using an Interval Timer

Interval timers are used to generate a stream of events that occur at a periodic rate. The setInterval() method of the window object is used to register an interval event. It accepts the same parameters as setTimeout(). The difference between the two is that a timeout event will only occur once, while an interval event will occur repeatedly.

Place the following statement inside a script: 

        setInterval("alert('Interval!');", 2000);

The alert box will appear after 2 seconds have elapsed. 2 seconds after you close it, another will appear, and so on, and so on ...

 

Part 3: Replacing an Image Dynamically

For this part, you'll need to create two images that are the same dimensions in pixels. Microsoft's Paint program can do this.

Follow these steps:

  1. Open Paint.
  2. Select the menu item Image>Attributes.... A dialog opens that allows you to set the width and height of the image in pixels. Set both attributes to 128, and then click OK. The drawing area will be resized, and you can begin to create an image.
  3. Draw something and save the image as image1.gif in the directory where you will create the html document for this exercise.
  4. Select the menu item File>New to clear the image.
  5. Draw a second image of the same size and save it as image2.gif in the same directory.
Once you have the two images, create an html document for this exercise that contains an image using the <img> tag. Provide a name attribute for the image and give it the name myImage. Set its src attribute to be the first image that you created, image1.gif.

Place a button onto the document. In its onClick event handler, set the source of the image to be the second image that you created, image2.gif. You can access the src attribute of the image by using the following path: document.imageName.src. Each image is a property of the document object, just like a form.

Run the script. Clicking the button should change the image that is displayed.

Part 4: 'Flip-Book' Animation with Images

Interval timers can be used to swap images, creating animation.

Modify your solution to the previous as follows:

  1. Remove the button.

  2. Inside the <body> tag, add an onLoad event handler that starts an interval timer that calls the function animate() every half second (500 milliseconds).

  3. Define the animate() function. It should implement the following algorithm: 
            If image1.gif is currently displayed
           Display image2.gif
        Else
           Display image1.gif
    Define a global variable that stores a flag indicating which image is currently displayed, or check the src field of the image.
This page should repeatedly swap the two images at half second intervals.

Part 5: Image Caching

When you change an image dynamically by setting its src field in JavaScript to the URL of a different image, the browser loads the new image over the web, even if it has already loaded the image before. This is inefficient, consuming network resources and slowing down your page. The way to avoid this is to use Image objects in JavaScript to preload the images, and then use the Image objects to change the images being displayed. Using Image objects doesn't cause a download to occur.

Modify your code from the previous part so that two Image objects are used to store image1.gif and image2.gif. Use the objects when you are swapping images instead of the URLs of the images.

In addition, instead of starting the animation from the onLoad event handler of the <body> tag, start it from the onLoad event handler of the Image objects. You will need to define a second function, beginAnimation(), whose purpose is to count the number of times it is called (it is called once for each image), and when both images have been loaded, it should begin the animation by starting the interval timer.

 

Part 6: Review: Basic Function With Parameter(s) And A Return Value

Create a function, named makeBold, which will accept a string as a parameter, and return that string, with the "<B>" before, and the "</B>" after, the parameter. 

Part 7: Review: The Movie Class

Create a class to model a movie.  The Movie class should include a constructor function with a parameter for a title, and a second parameter for the year the movie was released (you can name this field yearReleased).

Create a stand-alone function, named MovieAlertUser, and then use that function to give the Movie class an 'alertUser' method.  The method should lists the movie's info (it's title, and the year it was released).

Finally, create three Movie objects, and call alertUser on each one. 

Remember that in most programming languages, there is a clear distinction between the class (which consists of all the declarations/definitions - things like the constructor function, and all the methods)(in this case, the overall, generic Movie definitions), and objects (also known as instances of a class)(objects are the individual copies - in this case, the particular movies that you've created).  Make sure that you are able to identify the JavaScript code that defines the class, and the JavaScript code that creates the particular objects.

Part 8: Review: Basic Object in an external file

Building on the prior exercise, move all the code for the Movie class into a separate .JS file.  Keep the code that creates the Movies (and calls alertUser) in the .HTML page that you've been working in.

Part 9: Review: Objects, Arrays

Create a new HTML page, and have it include the external .JS file that defines your Movie class.  Within your .HTML page, create three student objects, and put them in an array.  Put a form on the HTML page, and when the user clicks on a button, have the event handler call a function, which uses a loop to iterate through the array, and call alertUser on the movie objects.

Part 10: Review: Window, Forms & Event Handlers, Functions, Objects, and Arrays, Oh My!

Create a new web (HTML) page, that has a form on it, and that includes the external .JS file.  Within your HTML page, put on clearly labeled text fields so that the user can fill in a movie's name, and the year that it was released.  Put a button on the form, and have that button's event handler call a function.  The function should take the information that's on the form, and use that information to create a new Movie object.  This new object should then be stored at the end of an array of Movie objects.  The function should then close down the extra window (if it's open), and then open the window up again (so it gets a new, blank window), and it should then write out everything that's in the Movie object array.  It should do this by iterating (using a loop) through the array of Movie objects, and at each stage, getting the title of the movie, calling the makeBold function on that string, and using the new window's document.write command to print out (into an unordered list) that title, plus the year the movie was released.