Support for JavaScript
Support for JavaScript
Netscape versions 2.0 and higher incorporate an
interpreted language called JavaScript. Internet Explorer, 3.0 and higher,
supports a closely-related dialect called JScript. JavaScript isn't the same as
Java, and certainly isn't at all the same as Perl, which is a great pity.
JavaScript allows you to programatically change the contents of fill-out forms,
create new windows, and pop up dialog box from within Netscape itself. From the
point of view of CGI scripting, JavaScript is quite useful for validating
fill-out forms prior to submitting them.
You'll need to know JavaScript in order to use it. The
Netscape JavaScript manual
contains a good tutorial and reference guide to the JavaScript programming
language.
The usual way to use JavaScript is to define a set of
functions in a <SCRIPT> block inside the HTML header and then to register
event handlers in the various elements of the page. Events include such things
as the mouse passing over a form element, a button being clicked, the contents
of a text field changing, or a form being submitted. When an event occurs that
involves an element that has registered an event handler, its associated
JavaScript code gets called.
The elements that can register event handlers include
the <BODY> of an HTML document, hypertext links, all the various elements
of a fill-out form, and the form itself. There are a large number of events, and
each applies only to the elements for which it is relevant. Here is a partial
list:
onLoad
The
browser is loading the current document. Valid in:
- The HTML <BODY> section only.
onUnload
The
browser is closing the current page or frame. Valid for:
- The HTML <BODY> section only.
onSubmit
The
user has pressed the submit button of a form. This event happens just before the
form is submitted, and your function can return a value of false in order
to abort the submission. Valid for:
onClick
The
mouse has clicked on an item in a fill-out form. Valid for:
- Buttons (including submit, reset, and image buttons)
- Checkboxes
- Radio buttons
onChange
The
user has changed the contents of a field. Valid for:
- Text fields
- Text areas
- Password fields
- File fields
- Popup Menus
- Scrolling lists
onFocus
The
user has selected a field to work with. Valid for:
- Text fields
- Text areas
- Password fields
- File fields
- Popup Menus
- Scrolling lists
onBlur
The
user has deselected a field (gone to work somewhere else). Valid for:
- Text fields
- Text areas
- Password fields
- File fields
- Popup Menus
- Scrolling lists
onSelect
The
user has changed the part of a text field that is selected. Valid for:
- Text fields
- Text areas
- Password fields
- File fields
onMouseOver
The
mouse has moved over an element.
- Text fields
- Text areas
- Password fields
- File fields
- Popup Menus
- Scrolling lists
onMouseOut
The
mouse has moved off an element.
- Text fields
- Text areas
- Password fields
- File fields
- Popup Menus
- Scrolling lists
In order to register a JavaScript event
handler with an HTML element, just use the event name as a parameter when you
call the corresponding CGI method. For example, to have your validateAge()
JavaScript code executed every time the textfield named "age" changes, generate
the field like this:
print
$q->textfield(-name=>'age',-onChange=>"validateAge(this)");
This example assumes that you've already declared the
validateAge() function by incorporating it into a <SCRIPT> block. The
CGI.pm
start_html()
method provides a convenient way to create this section.
Similarly, you can create a form that checks itself over
for consistency and alerts the user if some essential value is missing by
creating it this way:
print
$q->startform(-onSubmit=>"validateMe(this)");
See the
javascript.cgi
script for a demonstration of how this all works.
The JavaScript "standard" is still evolving, which means
that new handlers may be added in the future, or may be present in some browsers
and not in others. You do not need to wait for a new version of CGI.pm to use
new event handlers. Just like any other tag attribute they will produce
syntactically correct HTML. For instance, if Microsoft invents a new event
handler called onInterplanetaryDisaster, you can install a handler for it
with:
print
button(-name=>'bail out',-onInterPlaneteryDisaster=>"alert('uh
oh')");
|
