HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

This dynamic functionality is illustrated by the simple JavaScript example listed in Figure 7.45. This small script uses a FORM text input element to display the local time and date, updated every second. Figure 7.46 shows the result of this script as rendered by the Netscape Navigator 3 browser, while Figure 7.47 shows the script rendered by Internet Explorer 4.

The script inside the document HEAD defines three methods: start() (lines 26 to 31), called when the page is loaded; stop() (lines 32 to 34), called when the page is unloaded (the user moves to another page); and updater() (lines 10 through 25), which actually runs the timer.

How are these invoked? When the document is loaded, the BODY element ONLOAD attribute (line 43) invokes the start() method, to start the timers. The argument of start() is the object name for the FORM element with which the timer output will be associated. The notation document.forms.clock references the FORM element, lying in the current document, with the attribute NAME=“clock.”

The start() method first assigns a reference variable to this object (the variable form_name) and then calls updater(). Updater() does all the work. The first line (line 21) calls the window method window.setTimeout(), with two arguments, the first being the name of a method to run (updater()), the second being the time delay (delay) before the next call. As a result, the system will awaken after one second and re–invoke updater()—this procedure then continues until this timer, labeled by timer_id, is explicitly deleted.

After setting the wake–up call, the function creates a new instance of the Date() object (line 22) and assigns this to the VALUE attribute of one of the FORM input elements. The particular element attribute is addressed as an object; for example, line 22 references the FORM with NAME given by the form_name variable (“clock”) and references the particular FORM input element with NAME=“result.” This is simply the first of the three text input elements, starting at line 52. Lines 23 and 24 assign this same object to the two other input elements within the FORM.

When the document is generated, the contents of these elements are replaced by the Date() object, giving rise to the dates displayed in Figures 7.46 and 7.47. This field is updated every second for every invocation of the updater() method.

Server–Side Scripting—Netscape LiveWire

Document scripting is a powerful tool for creating dynamic and interactive documents. It is also useful to have similar scripting capabilities at the HTTP server. This would allow servers to process documents and to dynamically include content, client–side scripts, and data generated by a script run on the server. This is similar to the facilities offered by server–side includes and CGI programs, although a well–designed scripting language, designed with the nature of browsers, HTML documents, and the Internet in mind, would provide an easier framework for writing Web–related applications.