10/23/08 Notes

To Notes

IT 130 -- 10/23/08

Review Questions

Design HTML/JavaScript applications that will
1. Convert a given number of miles to centimeters. Input the miles from one textbox and output the centimeters to another textbox. There are 2.54cm per inch.
  Ans: See the MilesToCm Example.
2. Read a name (e.g. Larry) from one textbox and output a greeting in another textbox (e.g., "Waz up, Larry.").
  Ans: See the WazUp Example.

Referencing a Control by ID

Traditional method for referencing a control:
Control Definition:
Referencing a control by ID:
Control Definition:
One advantage of referencing a control by ID is that no form is needed.
See the Temperature4 Example.

Absolute Positioning Using Div Tags

See these examples that use div tags:

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 televisions 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.
BuiltinFunction1 Example
Write output to the HTML page:
document.write("The sum of " + x + "+" + y + " is " + z + ".");
BuiltinFunction2 Example
Display a message box:
window.alert("The sum of " + x + "+" + y + " is " + z + ".");
Functions can also return a value.
BuiltinFunction3 Example
Compute a square root.
y = Math.sqrt(x);
BuiltinFunction4 Example
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.
BuiltinFunction5 Example
To raise x to the y power and display the result:
y = Math.pow(x, n);

Reasons for using functions

Abstraction To use a function, all you need to know is the inputs to the function and what it does or returns.
Code Reusability Once a function is defined, it can be used anywhere. The function need not be rewritten everytime it is used.
Avoid Code Duplication If code is needed in more than one place, it is easier to define the function once, and call it every time the code is needed.
Modularity Functions divide software into units that are more easily used and maintained.
Event Handlers It is to easier to define an event handler function in the head section of a page and to call the function in the onclick statement.

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.
The OldMcDonald1 Example uses the user defined function showSong to display the words for "Old McDonald had a Farm," given the inputs animals and sound.
Practice Problem: Write a function named showGreeting( ) that displays an alert box with the message Hello, everyone". Also write an HTML button with an onclick attribute that invokes your function.
The OldMcDonald2 Example uses two functions in addition to showSong to avoid code duplication: showRefrain and show Exclamation.

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: DollarToEuro Example
Convert between Dollars and Euro. Use event handler functions dollarToEuro and euroToDollar instead of putting multiple lines of JavaScript code in the onclick attributes of the buttons.

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 Proj4

Finish Project Proj4.