Click Here!
home account info subscribe login search My ITKnowledge FAQ/help site map contact us


 
Brief Full
 Advanced
      Search
 Search Tips
To access the contents, click the chapter and section titles.

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

Bookmark It

Search this book:
 
Previous Table of Contents Next


Netscape supports this type of scripting in their Netscape LiveWire server packages. In LiveWire, documents delivered by the server can contain scripts that are preprocessed by the server, prior to the delivery of the document. These scripts are placed inside a special Netscape–specific element called SERVER. SERVER acts just like SCRIPT (that is, it is a container for a JavaScript program), except that the content is executed on the server and not on the client. For instance, the following example document contains both client and server scripts:


Figure 7.45 Example HTML JavaScript document illustrating dynamic updating of a text input element. This example creates a single text input element that acts as a real–time clock. The line numbers, in italics, are not part of the document.

1  <HEAD>
2  <TITLE>Clock Test Script</TITLE>
3  <SCRIPT>
4  <!––  hide the script
5
6  var timer_id   = 0;               // reference to timer
7  var form_name  = 0;               // Instance label for form
8  var delay      = 1000;            // Delay between updates (1 sec)
9
10  function updater(){
11                                    // Initialize timer interrupt
12                                    // to re–call clock_updater()
13                                    // after ’delay’ milliseconds
14                                    // Then calculate new time/date,
15                                    // and put results in the VALUE
16                                    // attribute of the FORM
17                                    // field with NAME=“result”.
18                                    // Then copy time/date into the
19                                    // form field with NAME=“result2”
20                                    // and NAME=“result3”
21      timer_id=window.setTimeout(“updater()”, delay);
22      form_name.result.value  = new Date();
23      form_name.result2.value = form_name.result.value;
24      form_name.result3.value = form_name.result.value;
25  }
26  function start(element_id) {
27      form_name = element_id;       // Attach time_field to
28                                    // form element named as argument.
29      updater();                    // Then call clock_updater()
30                                    // to start the clock
31  }
32  function stop() {
33     window.clearTimeout(timer_id); // Remove Timer reference
34  }
35
36  // End script –– end of comment that hides the script ––>
37
38  </SCRIPT></HEAD>
39
40  <!––       ONLOAD   triggers   start(), passing the named form
41             ONUNLOAD triggers   stop (), which deletes the timer
42  ––>
43  <BODY ONLOAD=“start(document.forms.clock)”
44        ONUNLOAD=“stop()”>
45
46  <H2 ALIGN=“center”>Dynamic Clock Script</H2>
47
48  <FORM NAME=“clock”>
49    <CENTER>
50    <B>Clock Output</B> (updates every second)<BR>
51    <BR>
52    <INPUT TYPE=“text” NAME=“result”  SIZE=18>  <BR><BR>
53    <INPUT TYPE=“text” NAME=“result2” SIZE=39>  <BR><BR>
54    <INPUT TYPE=“text” NAME=“result3” SIZE=50>
55    </CENTER>
56  </FORM>
57  </HTML>

<HTML>
<HEAD>
<SERVER>
   .... JavaScript to be executed by the server


Figure 7.46  Rendering of the document listed in Figure 7.45 by the Netscape Navigator 3 browser.


Figure 7.47  Rendering of the document listed in Figure 7.45 by the Internet Explorer 4 browser.

</SERVER>
<SCRIPT>
<!––  Begin hiding
   .... JavaScript to be passed through to, and executed on,
        the client
//  end hiding ––>
</SCRIPT>
<TITLE> Some title –– may be generated by Script </TITLE>
</HEAD>
<BODY>
   .... body HTML content ...
<SERVER>
   .... additional server–executed script ...
</SERVER>
</BODY></HTML>

When this document is requested, the server executes the JavaScript contained within the SERVER elements, which can result in the dynamic generation of document content, the modification of server database entries, and so on. LiveWire includes special methods for database access on the server and for communicating with custom–written server modules authored in Java or other languages.

Microsoft supports similar scripting capabilities with their Web servers, using their Jscript language and special server–side extensions to that language. Once again, of course, these extensions are incompatible with those introduced by Netscape, so that server–side scripts written for LiveWire do not function with Microsoft’s servers and vice versa.

Advanced Scripting and the Document Object Model

The preceding scripting technology is rather limited, as it supports only one mechanism for controlling page layout—namely, the generation of HTML content prior to displaying the page. In addition, there is no connection between scripting and style sheet formatting properties. Netscape and Microsoft software engineers both recognized the need for additional control over the page layout to allow for the following features:

  Script access to style sheet properties, so that scripts not only could generate HTML markup, but also could generate and modify the formatting properties for the markup.
  Ability to dynamically interact with the HTML markup, for example by creating a draggable “layer” or a selectable table cell.
  Ability to dynamically modify the HTML markup or page content, without the need to regenerate the entire document.

Netscape’s Dynamic HTML

As you probably expected, Microsoft and Netscape took entirely different approaches in addressing these needs. Netscape developed several extensions to JavaScript, including a JavaScript mechanism for defining style sheets, known as JavaScript Accessible Style Sheets or JASS, and also introduced several JavaScript enhancements to the LAYER and ILAYER elements, such that layers can be moved, exposed, and revealed under the control of a JavaScript program. Netscape named this technology dynamic–HTML, since it allowed for dynamic access to page properties (via JASS) and since the LAYER and ILAYER elements allowed for dynamic repositioning of page content.

Microsoft’s Dynamic HTML

Microsoft’s approach was similar, but much more extensive. Microsoft decided to reengineer the entire mechanism by which an HTML document is rendered to the display and create an underlying object model for the document and all its parts. They then defined an abstract software interface to these objects and finally created a way for Jscript/VBScript programs to access this interface. Then, using this scripting interface, a script program can dynamically modify the appearance of an element (for example, change some text to boldface when a mouse brushes over it) or even rearrange the content, by reordering table rows or hiding/revealing content.

As a result, Internet Explorer 4 browser supports event handlers for a whole variety of elements, not just those listed in Table 7.5. Indeed, Internet Explorer 4 essentially supports all the “generic” event handlers defined as part of HTML 4, listed in the element descriptions given in Chapters 6 and 7. These attributes, along with brief descriptions of the events that “trigger” these attributes, are shown in Table 7.7. Note that Internet Explorer 4 also supports some proprietary event handlers that allow for dynamic updating and modification of the actual content of HTML elements. Please consult the Internet Explorer scripting references at the end of this chapter for additional details.


Previous Table of Contents Next


Products |  Contact Us |  About Us |  Privacy  |  Ad Info  |  Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.