2/15/10 Notes

IT 130 -- 2/15/10

Review Questions

What is abstraction? How does it apply to JavaScript functions?
List some reasons for using functions in JavaScript

What is displayed? Watch out for trick problems. The * and / operators are always evaluated before + and -.

// Prob 3a.
var x = 1 + 2 * 12;
document.frmA.txt1.value = Math.sqrt(x); 


// Proj 3b.
var x = 3.95 + 0.21;
document.frmA.txt1.value = Math.floor(x);


// Proj3c.
var x = Math.random( );
var y = 3 * Math.floor(x);
var z = y + 2;
document.frmA.txt1.value = z;


// Prob 3d.
var x = 1 - 2 * 12;
var y = Math.ceil(x);
y = document.frmA.txt1.value;

Write JavaScript statements that place a random variable from the set {100, 101, 102, 103, 104, 105} in the textbox txtRandom. Use getElementById to access the textbox.

Dynamically Changing an Image

To replace the contents of the image imgCoin by the image silvereagle.jpg:
```
document.images.imgCoin.src = silvereagle.jpg;
```

Practice Problems

Write an HTML page with one image and two buttons. The buttons have the captions Head and Tail. When the head button is clicked, display the image silvereagle.jpg. When the tail button is clicked, display the image silvereagleback.jpg. Use two event handler functions showHead and showTail.
Write an HTML web page with a textbox, a button and an image that initially displays blank.jpg. When a number from 1 to 6 is entered into the textbox and the button is clicked, the page should display the corresponding image of a dog with its owner:

Referencing a Control by ID

Traditional method for referencing a control:

Control Definition:
Accessing Control Value:
Referencing a control by ID:

Control Definition:
Accessing Control Value:
One advantage of referencing a control by ID is that no form is needed.
Another advantage is that the constant string txtCelsius in
can be replaced by a variable id like this:

Practice Problems

Convert Temperature 1 Example to access the textboxes by id.
Rewrite the DogOwner Example in the Practice Problem 2 above so that is uses control ids instead of names.

The Dice Examples

Look at these dice examples:

Dice1 Example

Dice2 Example

Here are the six dice images:
Normally you should not access images on someone elses website; multiple hits on their site will tie up their server. Place images on your site instead.
For Project Proj5, you have permission to access the lotto balls on Jost's website. Here is a link to the lotto balls folder:

http://facweb.cs.depaul.edu/sjost/lottoballs/lottoballs.htm

For example, the link to Lotto Ball 43 is

Dropdown Menus

Show how to display a random integer from the maximum value set in a dropdown menu:

Project Proj5

Finish Project Proj5.
Use the Dice2 and PickRandom Examples as models.
Normally you should not access images on someone elses website; multiple hits on their site will tie up their server. Place images on your site instead.
However, for Project Proj5, you have permission to access the lotto balls on Jost's website. Here is a link to the lotto balls folder: