2/10/09 Notes

To Lecture Notes

IT 130 -- 2/10/09

Review Questions

Name four types of literals in JavaScript.
Ans: Integer (e.g., 3465), floating point (e.g., 3.14159), string (e.g., Hello) boolean (true or false).
What does variable initialization mean?
Ans: It means declaring and assigning a value to a variable in one statement like this:
var x = 5;.
Which of these are legal JavaScript variable names? A variable name must start with a letter and consist of letters or digits.
Ans: abc (legal) b768 (legal) 4slots (not legal) hook&ladder (not legal) numberOfCustomers (legal) number-of-customers (not legal) anExtremelyLongVariableNameIfYouAskMe (legal, but too long to be easy to read
What does camel casing mean?

Give five JavaScript operators.
Ans: + (addition or concatenation) - * / =
What is wrong with this statement?
Ans: A constant cannot occur on the left side of an assignment statement. The left side of an assignment statement is the target variable that is being changed.
What does concatenation mean?

Ans: To put two character strings together to make one longer string.
Design a form with an input textbox, an output textbox and a submit button. In the onClick attribute for the button, write code that will input the amount in dollars and output the tax which is 8% of the amount. If the variable tax contains the amount of the tax, then use tax.toFixed(2) to round the tax to two decimal points before you show the answer in the output textbox.

The Concatenation Operator

When applied to two numeric values, the operator + means addition.
Example:
When the operator + is applied to at least one character string, + is the concatenation operator.
Concatenation means paste two items together.
Example:

Practice Problems

What is shown in the alert box?

<html>
<body>
<h1>Humphrey Bogart Quote</h1>
<script type=text/javascript>
var name = Sam;
window.alert(Play it again,  + name + .);
</script>
<body>
</html>

What is the output of these JavaScript statements?

window.alert(1 + 2);
window.alert(1 + 2);
window.alert(1 + 2);
window.alert(1 + 2);
window.alert(1 + 2 + 3 + 4 + 5);

Abstraction

Abstraction is the process of ignoring irrelevant details and concentrating on essential items.
A television is a complex appliance.
One does not need to know all the internal details of a television to be able to operate one.
The irrelevant details, in this case, are the television's internal circuitry.
The essential items are the television's controls.
When using a function, one does not need to understand the code defining it. One need only understand what to input into a function and what sort of output to expect from the function.

Built In Functions

A built in function performs a task when the script encounters the name of the function. The task is often nontrivial, so it is easier to call the function then to write lines of script to perform the task.
Example 1: hello1.htm
Display a message box, called an alert box in JavaScript:
window.alert(Hello.);
A function can also return a value.
Example 2: builtin-function1.htm
Compute a square root.
y = Math.sqrt(x);
Example 3: builtin-function2.htm
Display a random number between 0.0 and 1.0.
x = Math.random( );
Use the Math.pow function to raise a number to a power.
Example 4: builtin-function3.htm
To raise x to the y power and display the result:
y = Math.pow(x, n);
Example 5: builtin-function4.htm
Display the floor and ceiling of a number:
y = Math.floor(x);
y = Math.ceil(x);

User Defined Functions

A user defined function also performs a task when the script encounters the name of the function, but the user provides a definition of the function in the head section of the HTML file.
Reasons for using functions:

Abstraction

Code Reusability

Modularity

Avoid Code Duplication

Event Handlers

Example: old-mcdonald1.htm
Uses the user defined function showSong to display the song, given the inputs animals and sound.
Note: the old-mcdonald2.htm example uses two more builtin functions: document.prompt and document.write.

Absolute Positioning Using Div Tags

See these examples that use div tags:

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:

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

Project 5

Work on Project 5.
Use the dice2.htm Example as a model.