CS271, Lab 2 (Homework "6")
Exercises with Timers and DOM

This lab has two exercises that ask you to manipulate the DOM and to use timers. Neither of the exercises make much sense on their own, but the techniques that are used will be valuable once you learn how to access information on the server side (which you will do next week).

This assignment will be due next Friday, February 20, at the beginning of the next lab. You will need to have this lab finished so that you can build on it in Lab 3. In the meantime, remember that there is a test on Wednesday, February 18.

Exercise 1: A Long Computation (not)

Here is a little interactive form that will add x and y. The button is programmed to call a JavaScript function named compute. You can find the script for this function in the <head> of the HTML source of this page, and you can also look there for the HTML source of the form itself:

x =

y =

You'll note that forms and form elements usually have name attributes instead of (or in addition to) id attributes. These names are important for communicating with the server, but they can also be used in JavaScript. In fact, they are very easy to use. Here the form is named "math." This means that you can refer to the form in JavaScript as document.math (assuming that the form is the only thing with that name) -- the form element itself becomes a property of the document, and the name of the property is the name of the form. Similarly, the input boxes in the form become properties of the form object; since their names are "x" and "y", they can be referred to in JavaScript as document.form.x and document.form.y.

The only other thing that you need in order to understand the compute function is that the object that represents a text input element has a property named value that corresponds to the text in the box. Thus, the text in the x and y inputs in this form can be referred to as document.math.x.value and document.math.y.value. (It is also possible to assign to these properties, which will change the text in the boxes.)

Your assignment for this exercise is to simulate what would happen if it took a long time -- several seconds -- to get the answer after the button is pressed. First of all, to give some feedback to the user that the work is in progress, you should show a message to that effect, such as "Processing... please wait!". Furthermore, you should disable the button during processing (which you can do by saying "document.math.bttn.disabled = true;"). Later, after the processing is done, you can change the message to indicate the result of the processing, and you can enable the button (with "document.math.bttn.disabled = false;").

For the exercise, you are only simulating the delay. When the button is first clicked, you should disable the button and output the wait message. Then start a timer with setTimeout. (This can be done in the compute function that is called when the button is clicked.) The function that runs when the timer goes off can complete the processing.

Exercise 2: An Internet Poll (not)

You've probably seen web polls where, after you vote, you get to see the poll results. The buttons that you use to cast a vote disappear and are replaced by bars showing the number of people who voted for each option. Sometimes a cute animation is used where the results are represented by bars that start at width zero and grow to the appropriate size to represent the number of votes. For your first exercise, you should implement this idea with bogus, made up poll data. (Later, we'll see how to wire the poll to actual polling data on a server.)

For example, here is a poll that asks the user to specify a favorite color (You might want to copy the source HTML for this example to use as starting point for your work.):

What is your favorite color?
Red:
Green:
Blue:
Yellow:
Black:

In this example, clicking on one of the radio buttons will just show an alert dialog. In your version, instead of doing this, an animation will run that replaces all five radio buttons with bars that grow from nothing until they look something like this:

What is your favorite color?
Red: 35 people
Green: 28 people
Blue: 43 people
Yellow: 18 people
Black: 5 people

The bars here are made using an image that is 1 pixel wide and 30 pixels tall. The image is stretched to an appropriate size using the CSS "width" property. By animating this property, you can make the bars grow. (You can find several similar images in the directory /classes/s09/cs271/1px-imgs.

There are several ways to approach this problem. All of them will involve starting a timer and saving a reference to the timer so that you can stop the timer later. See my dice roller for an example.