10/16/08 Notes

To Notes

IT 130 -- 10/16/08

Review Questions

How do you display an alert box that displays "Waz up?"
Ans: Put the JavaScript code alert('Waz up?'); in an onclick attribute.
Where do you put JavaScript statements in an HTML file?
Ans: In the onclick attribute. In this lecture we will see that JavaScript can also go within script tags in the head or in the body.
Give four places where JavaScript can display output.
Ans: (1) In an alert box, (2) in the status bar, (3) in a text box or (4) in a button caption.
Name six attributes that can be used on an input tag.
Ans: type, name, size, value, onclick, style.
Write an HTML input tag for a textbox with name txtA, size 10 and initial text "0".
Ans: <input type="text" name="txtA" size="10" value="0" />
Write an HTML input tag for a button with name btnB and caption "Push Me".
Ans: <input type="button" name="btnB" value="Push Me" />
Create a button that is 6 inches by 2 inches with caption "Push Me".
Ans: Here is a webpage that does this.
Look at this Temperature1 Example, right click on the document and select View Source. Then answer these questions:
1. How do you create a source code comment in HTML?
  Ans: Place it between .
2. What is the name of the form containing the textboxes and button?
  Ans: frmTemperature
3. What does this statement mean?
  Ans: It declares the variables x, y and t.
4. Which JavaScript function converts a character string into a number?
  Ans: parseFloat
5. What does this JavaScript statement do?
  Ans: It computes the Fahrenheit value that corresponds to the Celsius value c and assigns it to f.

Using JavaScript for Output

A fifth place that JavaScript can produce output is directly on the document.
Use the JavaScript function document.write to write directly to the document.
A second place to put JavaScript code is within script tags.
JavaScript code that is used in the body of an HTML page, not inside an onclick attribute, must be enclosed between script tags:
Here is an example: hello4.htm.
The prompt function displays a prompt box for user input.

Literals, Variables, and Operators

See the document Javascript Literals, Variables, and Operators.
Literals in Javascript are of type integer, floating point, string, and boolean.
Variables have these aspects: name, address, value.
Use a JavaScript var statement to declare variables:
var x, y, z;.
Special numeric values are Infinity and NaN (not a number).
Use parseFloat to convert a string representing a number to an actual number. Example:
x = parseFloat(s);
Here are some basic Javascript operators:
+ - * / + =

Variable Trace Problems

For each of these examples, keep track of the latest value of each variable and predict the output to the document:
Here are the variable trace and predicted output for the operators1 and operators2 examples:

operators1 Example

x y

3 7

13 6

15 17

Output:
15 6 90
15 17 255 operators2 Example

a b c

2 3 5

5 23 28

7 46 46

Output:
82 46 7

Event Handlers

An event handler is a function that is called when an event occurs, such as a button is clicked, a page is loaded or the value of a textbox is changed.

The state of the art is to place JavaScript code in an event handler in the head section like this:

<head>
<title>Title goes here</title>
<style type="text/css">
... Document-level style goes here.
</style>
<script type="text/javascript">
function Convert( )
{
    var c, f;
    c = parseFloat(document.frmA.txtC.value);
    f = 9 * c / 5 + 32;
    document.frmA.txtF.value = f;
}
</script>
</head>

To call this function when the Convert button is clicked, use this HTML input tag:
```
<input type="button" name="btnConvert" value="Convert"
    onclick="Convert( );" />
```
Example: Temperature 2 Use event handler functions for JavaScript code.

Practice Problems

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
1. Input x and y distance in blocks from city center. Output distance to city center "as the crow flies."
  Hint: Use the Pythagorean Theorem and Math.sqrt.
  Ans: See Example 26: distance2.htm.