CONTENTS
CONTENTS
Now that you know how to organize programs using functions and
build your own objects, you are ready to take a look at events.
Events provide the basis of interacting with the Navigator window
and the currently loaded document. Events are triggered in the
browser primarily by user actions, including finishing loading
a page, entering data in a form, and clicking on form buttons.
Using event handlers built into JavaScript, you can write functions
to perform specific actions based on the occurrence of selected
events.
In this chapter, we will cover:
- What events are
- What event handlers are
- How to use event handlers
- How to emulate events
- The load and unload
events and the onLoad and
onUnload event handlers
- The basics of using events to interact with forms
Events are signals generated when specific actions occur. JavaScript
is aware of these signals, and scripts can be built to react to
these events.
Examples of events include when a user clicks on a hypertext link,
changes data in a form entry field, or when a page finishes loading.
A complete list of the events available in JavaScript appears
in Table 5.1.
Table 5.1. Events in JavaScript.
Event | Description
|
abort |
Occurs when the user cancels loading of an image
|
blur |
Occurs when input focus is removed from a form element (when the user clicks outside a field) or focus is removed from a window
|
click |
Occurs when the user clicks on a link or form element
|
change
| Occurs when the value of a form field is changed by the user
|
error |
Occurs when an error happens during loading of a document or image
|
focus |
Occurs when input focus is given to a form element or a window
|
load |
Occurs when a page is loaded into Navigator |
mouseout
| Occurs when the user moves the pointer off of a link or clickable area of an image map
|
mouseover
| Occurs when the user moves the pointer over a hypertext link
|
reset |
Occurs when the user clears a form using the Reset button
|
select
| Occurs when the user selects a form element's field
|
submit
| Occurs when a form is submitted (i.e., when the user clicks on a submit button)
|
unload
| Occurs when the user leaves a page |
|
Input focus refers to the act of clicking on or in a form element or field. This can be done by clicking in a text field or by tabbing between text fields.
|
In order to take advantage of events in JavaScript, it is necessary
to use event handlers. Event handlers are scripts, in the form
of attributes of specific HTML tags, which you as the programmer
can write.
The event handlers you write are executed when the specified events
occur. The basic format of an event handler is:
<HTML_TAG OTHER_ATTRIBUTES eventHandler="JavaScript
Program">
While any JavaScript statements, methods, or functions can appear
inside the quotation marks of an event handler, typically, the
JavaScript script that makes up the event handler is actually
a call to a function defined in the header of the document or
a single JavaScript command. Essentially, though, anything that
appears inside a command block (inside curly braces ({}))
can appear between the quotation marks.
For instance, if you have a form with a text field and want to
call the function checkField()
whenever the value of the text field changes, you could define
your text field as follows:
<INPUT TYPE="text" onChange="checkField(this)">
Note |
The onChange event handler is one of many event handlers available in JavaScript. onChange and other event handlers are discussed in more depth later in this chapter.
|
Nonetheless, the entire code for the function could appear in
quotation marks rather than a function call:
<INPUT TYPE="text" onChange="
if (parseInt(this.value) <= 5) {
alert('Please enter a number greater than
5.');
}
">
To separate multiple commands in an event handler, use semicolons,
as shown in the following lines:
<INPUT TYPE="text" onChange="
alert('Thanks for the entry.');
confirm('Do you want to continue?');
">
The advantage of using functions as event handlers, however, is
that you can use the same event handler code for multiple items
in your document and, (as you saw earlier in ,
"Functions and Objects-The Building Blocks of Programs")
functions make your code easier to read and understand.
For instance, you may have a form with several text entry fields
and in each, the user can only enter numbers. You could use an
event handler to check the value of any field if the content changes.
By having a single function to check the value of a field, you
don't have to write the complete code in the event handler for
each text field.
Notice in the examples in the preceding section that you used
the this keyword which you
first encountered when you learned to build your own objects in
.
The this keyword refers to
the current object. In the case of
<INPUT TYPE="text" onChange="checkField(this)">
this refers to the current field object. In JavaScript, forms
are objects and, as you'll learn in ,
"Creating Interactive Forms," they have objects for
each element as properties. These form elements include text fields,
checkboxes, radio buttons, buttons, and selection lists.
The names of event handlers are directly connected to the events
introduced earlier in the chapter. For instance, the click
event is associated with the onClick
event handler, and the load
event with the onLoad event
handler.
Table 5.2 outlines which window and form elements have event handlers
available to them. All of these elements are dealt with later
in this book when we cover forms, the document
object, and the window object
( "Frames, Documents,
and Windows").
Table 5.2. Event handlers in JavaScript.
Object | Event Handlers Available
|
Selection list | onBlur, onChange, onFocus
|
Text element | onBlur, onChange, onFocus, onSelect
|
Textarea element | onBlur, onChange, onFocus, onSelect
|
Button element | onClick
|
Checkbox | onClick
|
Radio button | onClick
|
Hypertext link | onClick, onMouseOver, onMouseOut
|
Clickable Imagemap area | onMouseOver, onMouseOut
|
Reset button | onClick
|
Submit button | onClick
|
Document | onLoad, onUnload, onError
|
Window | onLoad, onUnload, onBlur, onFocus
|
Framesets | onBlur, onFocus
|
Form | onSubmit, onReset
|
Image | onLoad, onError, onAbort
|
In addition to event handlers, it is possible to emulate events.
This can prove particularly useful to submit a form without requiring
the user to click on a submit button or to force the input focus
into a particular form field based on user actions.
For instance, if a clothing company has on its Web site an on-line
order form for ordering designer clothes and it wants to ensure
that the users provide a name, address, phone number, and fax
number before sending the order to the company's server for processing,
then using event emulation could be useful.
When a user fills in the form and clicks on the Order button,
a JavaScript script could then check if the form is correctly
filled out. If it is, then it could emulate a submit
event to cause the content of the form to be sent to the company's
server.
On the other hand, if there is a missing piece of information,
the script could alert the user and then emulate a focus
event to put input focus into the text field in question.
The following list outlines the event methods available in JavaScript.
- blur()
- click()
- focus()
- reset()
- select()
- submit()
Warning |
The select(), focus(), and blur() methods display inconsistent behavior on different platforms-especially in Navigator 2. For instance, on Windows 95, blur() removes focus from a field but will leave the cursor displayed
in the field even though users won't be able to enter information into the text field.
|
It is important to note that events generated with these methods
do invoke their corresponding event handlers. This can lead to
infinite loops, as illustrated in the following script:
Warning |
Don't try to run this code! It is for illustration purposes only.
|
<HTML>
<HEAD>
<TITLE>Events</TITLE>
<SCRIPT>
<!-- HIDE FROM OTHER BROWSERS
function react(field) {
alert("Please Enter a Value");
field.focus();
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
<INPUT TYPE=text NAME=stuff onFocus="react(this);">
</FORM>
</BODY>
</HTML>
You can see that because field.focus()
invokes the onFocus event
handler, you face a situation of infinite recursion with react()
being continually called until it caused Navigator 2 to crash.
The first events you will learn to work with are load
and unload. The load
event is generated when a page has completed loading. Likewise,
the unload event occurs when
the user exits a page.
The onLoad and onUnload
event handlers enable you to script JavaScript program code to
execute at these times. The onLoad
event handler, for instance, enables you to be sure a page, including
associated graphics, has loaded completely before executing the
event handler.
This ability to control the timing of certain actions is important.
For instance, if you want an alert message to appear after a page
has loaded, it would be simple to place a script at the end of
the HTML file. However, it is still possible for the alert box
to appear before the page, particularly one containing in-line
graphics, has completely loaded and been displayed on the screen.
The onLoad event solves that
problem. Similarly, onUnload
enables a script to be executed before a new page loads.
The onLoad and onUnload
events are used as an attribute of the BODY
HTML tag. For instance, in this line:
<BODY onLoad="hello()" onUnload="goodbye()">
the function hello() is executed
after the page is loaded and goodbye()
is called when the page is exited.
In Listing 5.1, you simply generate a welcome message after a
page has loaded and generate a farewell message when the user
decides to move on to another page.
Listing 5.1. Using the onLoad
and onUnload
event handlers.
<HTML>
<HEAD>
<TITLE>Example 5.1</TITLE>
</HEAD>
<BODY onLoad="alert('Welcome to my page!');"
onUnload="alert('Goodbye! Sorry to see you go!');">
<IMG SRC="title.gif">
</BODY>
</HTML>
This script produces results similar to Figure 5.1.
Figure 5.1 : The onLoad event handler generates this alert box.
|
This script provides a simple example of how event handlers are used.
|
Once the page has completed loading, the onLoad
event handler causes the welcome alert dialog box to be displayed.
Then, when the user leaves the page, such as by opening another
URL, the good-bye dialog box is displayed by the onUnload
event handler.
You could expand and personalize this script as you did in using
the prompt() method in the
"Welcome to Netscape Navigator" examples earlier:
<HTML>
<HEAD>
<TITLE>Example 5.1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
var name = "";
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY onLoad="
name
= prompt('Enter Your Name:','Name');
alert('Greetings
' + name + ', welcome to my page!');"
onUnload=" alert('Goodbye '
+ name + ', sorry to see you go!');">
<IMG SRC="title.gif">
</BODY>
</HTML>
Likewise, you could use functions for this script to make it easier
to read:
<HTML>
<HEAD>
<TITLE>Example 5.1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
// DEFINE GLOBAL VARIABLE
var name = "";
function hello() {
name = prompt('Enter Your Name:','Name');
alert('Greetings ' + name + ', welcome to my page!');
}
function goodbye() {
alert('Goodbye ' + name + ', sorry to see you go!');
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY onLoad="hello();" onUnload="goodbye();">
<IMG SRC="title.gif">
</BODY>
</HTML>
In this example, you take a closer look at using the onLoad
event handler for a more complex task. You are going to produce
a random page. That is, when the user comes to the page, a "Please
Wait_Selecting Destination" message is displayed
and shortly after that, a randomly selected site from the Internet
is loaded in a new window. In Listing 5.2, the program chooses
from a list of five possible sites to jump to.
In order to achieve this, you need to use a new method: window.open().
The window.open() method
takes two required arguments:
window.open("URL","window
name")
The window.open() method
is covered in more detail in
where we also discuss a third argument available for the window.open()
method. For this example, you need to ensure that the window you
open the URL in is the same one your message appeared in. Because
you don't know how many windows are currently open when the user
opens your Web page, you will open both the message and the subsequent
URL in a new window by using window.open("URL","new_window_name").
Listing 5.2. A random page selector.
<HTML>
<HEAD>
<TITLE>Example 5.2</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
function urlList(a,b,c,d,e) {
// DEFINE FIVE-ELEMENT OBJECT
this[0] = a;
this[1] = b;
this[2] = c;
this[3] = d;
this[4] = e;
}
function selectPage(list) {
// SELECT RANDOM PAGE
var today = new Date();
var page = today.getSeconds() % 5;
// OPEN PAGE
window.open(list[page],"Random_Page");
}
// DEFINE SELECTION LIST
choices = new urlList("http://www.yahoo.com",
"http://www.cnn.com",
"http://www.dataphile.com.hk",
"http://home.netscape.com",
"http://www.landegg.org/landegg");
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY onLoad = "selectPage(choices);">
<H1>
<HR>
Please Wait ... Selecting Page.
<HR>
</H1>
</BODY>
</HTML>
|
In this example you learn several useful techniques. The script is built out of two functions and a main body of JavaScript code. The function urlList() is an object constructor used to build an array of five URL strings. It takes five arguments
and builds a five-element array.
|
You will notice that you don't use any property names in defining
the object, but instead use numeric indexes to reference each
of the five properties. This is done because you will only be
using numeric references throughout the script to access the URLs
in the array.
The selectPage() function
is a little more complex. The function generates a pseudo-random
number by calculating the number of seconds modulo five. This
produces an integer in the range of zero to four:
var today = new Date();
var page = today.getSeconds() % 5;
Note |
In Navigator 3.0, JavaScript includes a built-in method to create a random number. Math.random() returns a number between zero and one. In this way, the random number from zero to four could be selected with var page = Math.floor(Math.random()
* 5). The Math.floor() method rounds down to the closest integer. This method is discussed in more detail in Chapter 10.
|
This number is then used in the command window.open(list[page],"Random_Page")
to open the selected page in a new window called Random_Page.
Following the two functions, you define the five sites you have
to choose from and store them in an array called choices.
You use the constructor function urlList()
to create the array.
Finally, the script contains a good example of using the onLoad
event handler. The message Please Wait...
Selecting Page. is displayed in the original browser
window and then selectPage()
is called from the event handler. For users on slower dial-up
connections, the message may display for a few seconds, and users
on fast direct connections may barely have time to see the message.
Starting with Navigator 3.0, it is possible to explicitly reset
event handlers in a script. That is, you can change the expression
to be evaluated when an event occurs.
This is possible when the new expression to be evaluated takes
the form of a function call. For instance, if the onClick
event handler in the <INPUT>
tag of the form thisForm
is defined as
<INPUT TYPE=button NAME="thisButton"
onClick="firstFunction()">
then, a script could subsequently change the event handler to
call secondFunction() by
assigning the function name to document.thisForm.thisButton.onclick:
document.thisForm.thisButton.onclick
= secondFunction;
Subsequent clicks on the button would launch secondFunction()
instead of firstFunction().
Note |
Note that the event handlers are referred to entirely in lower case within a JavaScript script (for example, document.thisForm.thisButton.onclick). They can still be referred to in upper-lowercase combinations inside HTML tags: <INPUT
TYPE=button NAME="this.button" onClick="firstFunction()">.
|
Now that you understand the basics of events, let's take a look
at working with forms.
Today, most JavaScript programmers are using forms and event handlers
to produce complex applications. The events generated by forms
provide a fairly complete set of tools for reacting to user actions
in forms.
The most common events used for processing forms are the focus,
blur, and change
events with their corresponding event handlers onFocus,
onBlur, and onChange.
Using these events, it is possible for a program to keep track
of when a user moves between fields in a form and when he or she
changes the value of an input field.
There are other events available in forms, which we will cover
in when we take a detailed look
at working with forms. These include click
and submit with their corresponding
onClick and onSubmit
event handlers.
Event handlers are included as attributes of form and field tags.
For instance, the following tag defines a text input field with
three event handlers.
<INPUT TYPE=text NAME="test"
VALUE="test"
onBlur="alert('Thank
You!');"
onChange="check(this);">
When the user moves the focus out of the field by clicking anywhere
outside the field (or using the tab button where there are multiple
text fields in a form), an alert dialog box with the message Thank
You! is displayed.
When the value of the field is changed, the function check()
is called. This function would be defined elsewhere in the HTML
page-probably in the header. Note the use of the this
keyword to pass the current field object to the function.
You first saw the this keyword
in , when you learned to build
constructor functions. The this
keyword refers to the current object. In the case of an event
handler, this refers to the
object the event handler applies to. For instance, in a form field
definition, this refers to
the object for the form element (which we discuss in
in detail). You can then refer to properties and methods for the
current object as this.methodName()
or this.propertyName.
In this example, you will use event handlers and text input fields
to produce a simple calculator. You will use a form that consists
of two fields: one for the user to enter a mathematical expression
and another for the results to be displayed.
If the user moves the focus into the results field, a prompt dialog
box is displayed asking the user for a mathematical expression
which is then displayed in the entry field with the evaluated
result in the results field.
You already have learned all the methods, properties, and event
handlers necessary to produce the script in Listing 5.3.
Listing 5.3. Using event handlers to create a JavaScript calculator.
<HTML>
<HEAD>
<TITLE>Example 5.3</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
function calculate(form) {
form.results.value = eval(form.entry.value);
}
function getExpression(form) {
form.entry.blur();
form.entry.value = prompt("Please enter a JavaScript
mathematical
expression","");
calculate(form);
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
Enter a JavaScript mathematical expression:
<INPUT TYPE=text NAME="entry" VALUE=""
onFocus="getExpression(this.form);">
<BR>
The result of this expression is:
<INPUT TYPE=text NAME="results" VALUE=""
onFocus="this.blur();">
</FORM>
</BODY>
</HTML>
This script produces results similar to Figure 5.2.
Figure 5.2 : When a user enters an expression, the result is calculated and displayed.
|
There are several techniques employed in this script that are worth noting. In the HTML form, you have two fields, each with a single event handler. The entry field has an onFocus event handler which calls the function getExpression(),
which handles the input of the expression. Notice that the function is passed this.form as an argument. Where this refers to the object for the current field in the HTML form, this.form refers to the object for the form
containing the current field.
|
The second field's onFocus
event handler calls this.blur()
which immediately removes focus so that the user cannot alter
the contents of the field. Remember that on some platforms, the
cursor will actually appear in the field, but the user will be
unable to enter information.
The getExpression() function
takes a single form object as an argument. The first thing it
does is remove focus from the entry field. You do this so you
don't get into an infinite loop with the prompt dialog box. If
you don't, then focus is removed from the field when the dialog
box appears and returns to the field when the dialog box closes.
This triggers another focus
event and would invoke the event handler again.
After you remove focus from the entry field, you prompt the user
for an expression and store the results in the entry field to
display them. Then you call the function calculate()
and pass it the form object.
The calculate() function
uses the eval() function
to calculate the result of the expression in the entry field and
displays the result in the appropriate field in the form.
Throughout both functions, you will notice that you can refer
to particular fields in a form as properties of the form
object:
formObjectName.fieldname
Likewise, you can directly address and change the value of a field
by using its value property (remember that while fields are properties
of the form object, they
are objects in their own right with properties of their own):
formObjectName.fieldname.value
It is also important to realize that with JavaScript, authors
often want to create forms that actually do not submit any data
back to the server with the ACTION
attribute of the FORM tag.
For instance, a JavaScript application may implement a simple
currency calculator that uses HTML forms for its interface. All
calculations and displaying of the results are done by a JavaScript
script, and the contents of the forms never need to be sent to
the server.
To accommodate this use of forms, it is sufficient to have no
attributes in the FORM tag
or to simply have the METHOD=POST
attribute without an ACTION
attribute in the FORM tag.
In this chapter, you have made a big step toward being able to
write the type of interactive Web pages and scripts that JavaScript
is widely used for today.
You learned about events and event handlers. Event handlers react
to actions by the user or events generated by the browser. Scripts
can also emulate many events such as the click()
method and submit() method.
In particular, you used the onLoad
and onUnload event handlers
to react to the loading of the page and the user's opening another
URL. You also began to look at events in relationship to HTML
forms and learned to use onFocus,
onBlur, and onChange.
In , you look at the form
object in more detail and work more with the events and event
handlers in relationship to forms.
Command/Extension | Type
| Description |
blur()
| JavaScript method | Removes focus from a specified object
|
click()
| JavaScript method | Emulates a mouse click on an object
|
focus()
| JavaScript method | Emulates the user focusing on a particular form field
|
reset()
| JavaScript method | Emulates the user clicking on the Reset button of a form
|
submit()
| JavaScript method | Emulates a click on the Submit button of a form
|
select()
| JavaScript method | Selects the input area of a particular form field
|
onAbort
| Event Handler | Specifies JavaScript code to execute when the user cancels the loading of an image
|
onLoad
| Event handler | Specifies JavaScript code to execute when a page finishes loading
|
onUnload
| Event handler | Specifies JavaScript code to execute when the user opens a new URL
|
Math.random()
| JavaScript method | Generates a random number between 0 and 1
|
Math.sqrt()
| JavaScript method | Calculates the square root of a number
|
window.open()
| JavaScript method | Opens a URL in a named window or frame
|
Math.round()
| JavaScript method | Rounds a floating-point value to the closest integer
|
onFocus
| Event handler | Specifies JavaScript code to execute when the user gives focus to a form field or a window
|
onBlur
| Event handler | Specifies JavaScript code to execute when the user removes focus from a form field or a window
|
onMouseOut
| Event handler | Specifies JavaScript code to execute when the user moves the mouse off a link or clickable area of an imagemap
|
onMouseOver
| Event handler | Specifies JavaScript code to execute when the user moves the mouse over a link or clickable area of an imagemap
|
onError
| Event handler | Specifies JavaScript code to execute when the loading of a document or image generates an error
|
onChange
| Event handler | Specifies JavaScript code to execute when the user changes the value of a form field
|
Q | Can I ensure my page elements, including large graphics and tables, have been displayed before the onLoad script is executed?
|
A | Yes. onLoad is executed when all elements of the page have been loaded and displayed.
|
Q | You used getSeconds() to simulate a random number. I have seen a random number method in other languages such as Perl. Does JavaScript have one?
|
A | Yes. Beginning with Navigator 3.0, JavaScript has the Math.random () method.
|
- Which of the following are legitimate uses of event handlers?
a. <BODY onClick="doSomething();">
b. <INPUT TYPE=text
onFocus="doSomething();">
c. <INPUT TYPE=textarea
onLoad="doSomething();">
d. <BODY onUnload="doSomething();">
e. <FORM onLoad="doSomething();">
f. <FORM onSubmit="doSomething();">
- What happens with the following script?
<HTML>
<HEAD>
<TITLE>Exercise 5.2</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
var name = "";
function welcome() {
name = prompt("Welcome to my page! What's Your
Name?","name");
}
function farewell() {
alert("Goodbye " + name + ". Thanks
for visiting my page.");
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY onLoad="welcome();" onUnload="farewell();";>
<IMG SRC="welcome.gif">
</BODY>
</HTML>
- Create an HTML page and JavaScript script that include a form
with three input fields. The relationship of the value of the
fields is that the second field is twice the value of the first
field, and the third field is the square of the first field.
If a user enters a value in the second or third field, the script
should calculate the appropriate value in the other fields.
Tip |
To make this script easier, you will probably want to use the Math.sqrt() method, which returns the square root of the argument passed to it.
|
- Lines b, d, and f are valid according to Table 5.2. Choices
a, c, and e all use event handlers which are not available for
the particular objects in question.
- The script welcomes the user and asks for a name after the
page (and graphic) have loaded. When the user moves on to another
URL, a good-bye message is displayed in an alert dialog box. Results
would be similar to Figures 5.3 and 5.4.
Figure 5.3 : The prompt dialog box is displayed only after the page has finished loading.
Figure 5.4 : Leading another Web page triggers the farewell() function and this alert box.
- The following script would achieve the desired results:
<HTML>
<HEAD>
<TITLE>Exercise 5.3</TITLE>
<SCRIPT>
<!-- HIDE FROM OTHER BROWSERS
function calculate(form) {
form.twice.value = form.entry.value * 2;
form.square.value = form.entry.value * form.entry.value;
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
Value: <INPUT TYPE=text NAME="entry" VALUE=0
onChange="calculate(this.form);">
<BR>
Double: <INPUT TYPE=text NAME="twice" VALUE=0
onChange="this.form.entry.value
= this.value / 2;
calculate(this.form);">
<BR>
Square: <INPUT TYPE=text NAME="square" VALUE=0
onChange="this.form.entry.value
= Math.sqrt(this.value);
calculate(this.form);">
</FORM>
</BODY>
</HTML>
This script page produces results similar to those
in Figure 5.5.
Figure 5.5 : The onChange event handler calculates and updates fields.
Notice the use of the this.form argument again in the calls to
the calculate() function. In addition, the onChange event handlers
for both the double and square fields have multiline scripts for
their event handlers. The semicolons separate the lines of the
script, even though the script appears on a single physical line.
The onChange event handlers in both the double and square fields
first calculate the value of the entry field and then call calculate()
which calculates the value of both double and square based on
the value of the entry field. While this technique works, it has
a couple of problems.
First, you end up replacing the value the user has entered in
the double or square field with a new value calculated when you
call calculate(). This is an extra, unnecessary step.
Second, due to limitations in floating-point calculations, it
is possible that if a user enters a value in the square field,
for example, the result of calculating the square root and then
recalculating the value of the square field may produce a result
slightly different from the original value the user entered.
This can be remedied with the following script. At first glance,
these changes make the script seem more complex, but they stop
the script from calculating the value the user has just entered,
preventing both these problems.
<HTML>
<HEAD>
<TITLE>Exercise 5.3</TITLE>
<SCRIPT>
<!-- HIDE FROM OTHER BROWSERS
function calculate(form,currentField) {
if (currentField == "square") {
form.entry.value = Math.sqrt(form.square.value);
form.twice.value = form.entry.value *
2;
} else if (currentField == "twice") {
form.entry.value = form.twice.value /
2;
form.square.value = form.entry.value *
form.entry.value;
} else {
form.twice.value = form.entry.value *
2;
form.square.value = form.entry.value *
form.entry.value;
}
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
Value: <INPUT TYPE=text NAME="entry" VALUE=0
onChange="calculate(this.form,'entry');">
Double: <INPUT TYPE=text NAME="twice" VALUE=0
onChange="calculate(this.form,'twice');">
Square: <INPUT TYPE=text NAME="square" VALUE=0
onChange="calculate(this.form,'square');">
</FORM>
</BODY>
</HTML>
Here you see that you have added a second argument passing an
indicator of which field's event handler called the calculate()
function. The function uses this in a complex if ... else construct
to do only the necessary calculations and not rewrite the values
just entered by the users.
The if ... else construct used in the calculate() function shows
how it is possible to have more than one alternative:
if (condition1) {
JavaScript commands
} else if (condition2) {
JavaScript commands
} else if (condition3) {
JavaScript commands
} else {
JavaScript commands
}
This example can be extended to any number of conditions.
The script can be made easier to use and more general purpose
by using the name property of the text field object. For instance,
you can pass this.name to the function in all three event handlers
(because the current object in each case is a text field):
<FORM METHOD=POST>
Value: <INPUT TYPE=text NAME="entry" VALUE=0
onChange="calculate(this.form,this.name);">
Double: <INPUT TYPE=text NAME="twice" VALUE=0
onChange="calculate(this.form,this.name);">
Square: <INPUT TYPE=text NAME="square" VALUE=0
onChange="calculate(this.form,this.name);">
</FORM>