10/28/08 Notes

IT 130 -- 10/28/08

Review Questions

What are the advantages of using the document.getElementById function over using fully qualified control names?
Ans: No form is needed; a variable can be used for the ID.

Convert this tag so it can be used with getElementById:

<input type="text" name="txtInput" size="20" />

Ans:

<input type="text" id="txtInput" size="20" />

Convert this JavaScript function so that is uses getElementById:

function milesToCm( )
{
    var m, c;
    m = parseFloat(document.frmConvert.txtMiles.value);
    c = 5280 * 12 * 2.54 * m;
    document.frmConvert.txtCm.value = c;
}

Ans:

function milesToCm( )
{
    var m, c;
    m = parseFloat(document.getElementById("txtMiles").value);
    c = 5280 * 12 * 2.54 * m;
    document.getElementById("txtCm").value = c;
}

For what are div tags used?
Ans: For our uses, div tags allow absolute positioning of text or images. This is useful if you want to place images or text on top of each other.
What is abstraction and how does it apply to functions?
Ans:Abstraction means ignoring irrelavant details and concentrating on essential ones. To use a builtin function, you don't need to know how the code works, you only need to know what it expects as input and what it does or produces as output.
Why are functions useful?
Ans: (1) Abstraction, (2) Code Reuse or Avoid Code Duplication, (3) Event handlers.

What is the output?

<html>
<head>
<script type="text/javascript">
function f(x)
{
    document.writeln(2 * x + 1);
}
</script>
</head>
<body>
<script type="text/javascript">
f(5);
</script>
</body>
</html>

Ans: 11

Name as many builtin Math functions as you can.
Note: Math.floor together with Math.random will be useful for generating random integers.
Ans: Math.sqrt, Math.random, Math.pow are the ones that we have discussed. Math.round is also available. The trig functions Math.sin, Math.cos, and Math.tan are also available if you remember your trigonometry from highschool.

Find the mistakes in the following event handler that displays random outputs from a six-sided die:

Function display roll[ ]
(
    var roll1 roll2:
    roll1 =  1 + Math.floor(6 * math.random( ):
    frmDisplayDice.txt Roll1 = roll1;
    roll1 =  1 + Math.floor(6 * math.random( ):
    frmDisplayDice.txt Roll2 = roll1;

Ans: Here is the fixed version:

function displayRoll( )
{
    var roll1, roll2;
    roll1 =  1 + Math.floor(6 * Math.random( ));
    document.frmDisplayDice.txtRoll1 = roll1;
    roll2 =  1 + Math.floor(6 * Math.random( ));
    document.frmDisplayDice.txtRoll2 = roll2;
}

Draw the variable trace table and predict the output.
```
var a = "dog", b = "cat", c = "mouse";
d = c;
c = b;
b = a;
a = d;
document.writeln(a + " " + b + " " + c);
```
Ans:

a b c d

"dog" "cat" "mouse"

"mouse" "dog" "cat" "mouse"

Output: mouse dog cat

a	b	c	d
"dog"	"cat"	"mouse"
"mouse"	"dog"	"cat"	"mouse"

A Color Matching Game

Test your skill at matching rgb color components with this color matching game.

Dynamically Displayed Images

To be able to dynamically change an image, define the image tag with a name attribute:
Use this line of JavaScript code to change the image:
An example that displays images:
Practice Problem: Write an HTML page with one image and two buttons. The initially, the image contains blank.gif. 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.

The Builtin Function Math.floor

Math.floor inputs a floating point number and returns the next lower integer.

Look at this example: Builtin Function 6 Example.

Generating Random Integers

The builtin-in random number generator Math.random returns floating point numbers in the interval [0,1). This means that it can return 0 but it cannot return 1.
We want to write a JavaScript expression that returns random integers {1, 2, 3, 4, 5, 6} with equal probability.
We use Math.random and Math.floor together to accomplish this:
1. Math.random( ) returns a floating point in [0, 1).
2. 6 * Math.random( ) returns a floating point in [0, 6).
3. Math.floor(6 * Math.random( )) returns an integer in {0, 1, 2, 3, 4, 5}.
4. 1 + Math.floor(6 * Math.random( )) returns an integer in {1, 2, 3, 4, 5, 6}.
Use the following JavaScript statement to get a simulated roll of a fair die:

The Dice Examples

Look at these dice examples:
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:

Project Proj5

Work on Project Proj5.
Use the Dice2 Example as a model.
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:
Here is an example that shows how to use a dropdown menu in three different ways: