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

With the Navigator 2 browser, Netscape introduced the concept of scripted HTML documents. These are documents that contain, in addition to regular HTML markup, script programs that can process data passed from the HTML document (i.e., from FORM input, hypertext anchor selections, etc.) and that can also produce output for inclusion within the HTML document, as it is rendered for display. To implement this functionality, Netscape developed a new scripting language, called JavaScript. This is an object–derived language, similar in look and feel to Java or C++ but designed expressly for Web and HTML document–related scripting—the object model of JavaScript is based on the component structure of the browser (windows, status bars, document URLs, etc.) and of HTML documents (applets, embedded objects, forms, anchors, document body, images, etc.).

Microsoft quickly followed up Netscape’s launch of scripted HTML, by implementing JavaScript support in their Internet Explorer 3 browser. However, Microsoft did not have access to all the details of the JavaScript language, so that their browser was not entirely compatible with the version of JavaScript supported by Netscape—indeed, Microsoft formally named their language Jscript to denote this difference. Thus, if you are working in a mixed–platform environment, it is important to check your JavaScript programs with all possible browsers.

Microsoft also implemented a second scripting language, known as VBScript (or Visual Basic Script). In terms of functionality, VBScript is similar to JavaScript, although the language is closer in design to Visual Basic, from which it is derived. However, the interaction between a document and a scripting language is largely independent of the language, so that the information presented here is also largely applicable to VBScript programs.

With the release of Netscape Navigator 4 and Internet Explorer 4, script compatibility became both better and worse. It became better in that both browsers support a similar core functionality, which is more or less the functionality of Netscape Navigator 3, plus some extensions. This “compatible” scripting component is the main topic of this section. However, both companies then added significant scripting capabilities that allow for much richer interaction between script programs and the HTML document. Unfortunately, the enhancements are entirely incompatible—the new Microsoft extensions do not work with Netscape’s browser and vice versa. These scripting extensions are commonly called Dynamic–HTML and we briefly review the issues associated with this at the end of the section.

Please note that this is not a guide to JavaScript programming—the language is far too complex for this short section to do it justice. For details about the language, you are referred to the references listed at the end of the chapter.

General Scripting Issues

As mentioned in Chapter 4, document scripts are included within an HTML document via the HTML SCRIPT element. These elements can be in the HEAD or BODY of a document, but it is strongly recommended that the bulk of the code appear in the HEAD. This is because of they way scripts are interpreted and executed. When a browser parses a document for script components, it starts at the beginning of the file and works downwards. As a result, any required functions must be defined before they are used—if this is not done and the function is not defined at the time of its intended invocation, then the script will fail, claiming that the function is undefined. Consequently, function definitions are best placed in the HEAD of a document—that way they are guaranteed to be defined before the browser begins to layout the document BODY.

Script programs can be included directly within an HTML document, or they can be included from external files. Some examples illustrating these two mechanisms are given in the following sections.

Including a Script Within a SCRIPT Element

Figure 7.38 illustrates a simple JavaScript function definition, defined in a SCRIPT element that typically would lie in the document HEAD (since it defines a general–purpose function). This simple example illustrates a few of the important points which are relevant whenever a script is included within an HTML document.

There are three critical things to note in Figure 7.38:

1.  JavaScript comment lines. Comments in JavaScript begin with two successive forward slashes. All text following these slashes and on the same line is a comment and is ignored by the JavaScript parser.

2.  Hiding a script using an HTML comment. A script can be placed inside an HTML comment, safely hiding it from any browsers that do not understand SCRIPT elements. Note that the string ––> ending the comment must be placed at the end of a JavaScript comment line, as otherwise it is interpreted as JavaScript program code.

3.  Use of single quotes For strings. In JavaScript, single quotes can be used to delimit strings (e.g., ‘this is a string’). This allows HTML markup inside a string, as any double quotes in the HTML markup will not prematurely end single quote–delimited JavaScript strings.

With respect to the actual JavaScript language, this example illustrates how variables (var) and functional methods (function() ) are defined and shows how alerts (pop–up alert notifications) are invoked (alert() ). JavaScript variables are untyped—as with several other scripting languages (e.g., Perl), variable type is determined by context.

Figure 7.38 Example SCRIPT element containing a single function definition. Note the use of an HTML comment (the tag is in boldface) to “hide” the element content from old browsers that do not understand the SCRIPT element.

<SCRIPT LANGUAGE=“JavaScript”>
<!––  Use Comments to “hide” script from old browsers
//    that don’t understand scripts
//    The symbol // starts a comment line
function validate(obj, minV, maxV)) {
  var value = parseInt(obj.value);
  if( value < minVal || value > maxVal) {
     alert(obj.name + ’ Not in range (’+minV+’,’+maxV+’)’ );
  }
}
//  End HTML comment that hides the script from old browsers  ––>
</SCRIPT>

Using SCRIPT Within the BODY

Script components in the document BODY can actually print out text for inclusion with the displayed HTML. A simple HTML document example that uses the JavaScript Date() function to print the current time and date is shown in Figure 7.39. Figure 7.40 shows the resulting document displayed by Netscape Navigator, while Figure 7.41 shows the document displayed by a browser that does not understand SCRIPT elements.