home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

JavaScript: The Definitive Guide

Previous Chapter 10 Next
 

10. Client-Side Program Structure

Contents:
The <SCRIPT> Tag
Including JavaScript Files
JavaScript and Events
JavaScript in URLs
JavaScript Entities
Execution of JavaScript Programs
JavaScript and Threads

The first part of this book described the core JavaScript language, used in both client- and server-side scripts. Many of the examples we've seen, while legal JavaScript code, had no particular context--they were JavaScript fragments, rather than legal client-side scripts or legal server-side scripts. This chapter provides that context: it explains how JavaScript code can be integrated into HTML files so that it is run by the client web browser.

There are five techniques for including JavaScript code in HTML:

Embedding a JavaScript script between <SCRIPT> and </SCRIPT> tags.

This is the most common method.

Using the <SCRIPT> tag to refer to a file of JavaScript code.

This is done by specifying a URL as the value of the SRC attribute, instead of including the JavaScript statements literally between the <SCRIPT> and </SCRIPT> tags. (This is much like including an image on a web page with the <IMG SRC=> tag.) This technique for including external files of JavaScript code into a web page is not available in Navigator 2.0.

Defining event handlers.

These are function definitions that are invoked by the browser when certain events occur. These event handler functions are defined by specifying JavaScript statements as the value of appropriate attributes within HTML tags. For example, in the <BODY> HTML tag, you can specify arbitrary JavaScript code as the value of the onLoad attribute. This code will be executed when the web page is fully loaded.

Using the special javascript: URL pseudo-protocol.

You can type these URLs directly into your browser (this doesn't work in Internet Explorer 3.0), or use them as the target of hypertext links in your web documents. When such a link is invoked, the JavaScript code following the javascript: protocol identifier will be executed, and the resulting value will be used as the text of the new document.

Embedding code with the JavaScript HTML entity.

This is available in Navigator 3.0 only. Recall that an HTML entity is a code usually representing a special character--either one reserved by HTML or one that does not appear on most keyboards. For example, &lt; is an HTML entity that represents the < character. All HTML entities begin with an ampersand and end with a semicolon. The JavaScript entity may contain arbitrary JavaScript statements in curly braces between this ampersand and semicolon. The value of the JavaScript statements becomes the value of the entity. This special JavaScript entity may not be used arbitrarily in HTML; it may only appear within the attribute value of an HTML tag.

The following sections document each of these five JavaScript embedding techniques in more detail. Together, they explain all the ways that JavaScript can be included in web pages--that is, they explain the allowed structure of JavaScript programs on the client side.

10.1 The <SCRIPT> Tag

Client-side JavaScript scripts are part of an HTML file, and are usually coded within the <SCRIPT> and </SCRIPT> tags. Between these tags you may place any number of JavaScript statements, which will be executed in the order they appear as part of the document loading process. (Definitions of JavaScript functions are stored, but they are not executed until they are called.) <SCRIPT> tags may appear in either the <HEAD> or <BODY> of an HTML document.

A single HTML document may contain more than one pair of (non-overlapping) <SCRIPT> and </SCRIPT> tags. These multiple separate scripts will have their statements executed in the order they appear within the document. While separate scripts within a single file are executed at different times during the loading and parsing of the HTML file, they constitute part of the same JavaScript program--functions and variables defined in one script will be available to all scripts that follow in the same file. For example, if you have the following script somewhere in an HTML page: 

<SCRIPT>var x = 1;</SCRIPT>
later on in the same HTML page, you can refer to x, even though it's in a different script block.

The context that matters is the HTML page, not the script block: 

<SCRIPT>document.write(x);</SCRIPT>
Example 10.1 shows a sample HTML file that includes a simple JavaScript program. Note the difference between this example and many of the code fragments shown earlier in the book--this one is integrated with an HTML file and has a clear context in which it runs. Note the use of a LANGUAGE attribute in the <SCRIPT> tag--it will be explained in the following subsection.

Example 10.1: A Simple JavaScript Program in an HTML File

<HTML>
<HEAD>
<TITLE>Today's Date</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    // Define a function for use later on.
    function print_todays_date()
    {
        var d = new Date();  // today's date and time.
        document.write(d.toLocaleString());
    }
    </SCRIPT>
</HEAD>
<BODY>
<HR>The date and time are:<BR><B>
    <SCRIPT LANGUAGE="JavaScript">
    // Now call the function we defined above.
    print_todays_date();
    </SCRIPT>
</B><HR>
</BODY>
</HTML>

The LANGUAGE Attribute

The <SCRIPT> tag has an optional LANGUAGE attribute that specifies the scripting language used for the script. This attribute is necessary because there is more than one version of JavaScript, and because there is more than one scripting language that can be embedded between <SCRIPT> and </SCRIPT> tags. By specifying what language a script is written in, you tell a browser whether it should attempt to interpret the script, or whether it is written in a language that the browser doesn't understand, and therefore should be ignored.

If you are writing JavaScript code, you use the LANGUAGE attribute as follows: 

<SCRIPT LANGUAGE="JavaScript">
    // JavaScript code goes here
</SCRIPT>
On the other hand, if you were writing a script in Microsoft's "VBScript" scripting language[1] you would use the attribute like this: 

<SCRIPT LANGUAGE="VBScript">
    ' VBScript code goes here (' is a comment character like // in JavaScript)
</SCRIPT>

[1] The language is actually called "Visual Basic Scripting Edition." Obviously, it is a version of Microsoft's Visual Basic language. The only browser that supports it is Internet Explorer 3.0. VBScript interfaces with HTML objects in the same way that JavaScript does, but the core language itself has a different syntax than JavaScript.

When you specify the LANGUAGE="JavaScript" attribute for a script, both Navigator 2.0 and Navigator 3.0 will run the script. There have been quite a few new features added to JavaScript between Navigator 2.0 and 3.0, however, and you may often find yourself writing scripts that simply won't work in Navigator 2.0. In this case, you should specify that the script should only be run by Navigator 3.0 (and browsers that support a compatible version of JavaScript) like this: 

<SCRIPT LANGUAGE="JavaScript1.1">
    // JavaScript code goes here for Navigator 3.0
    // All this code will be ignored by Navigator 2.0
</SCRIPT>
When you set the LANGUAGE attribute to "JavaScript1.1", you inform Navigator 2.0 and Internet Explorer 3.0 that you are using a version of the language that they do not understand. By doing this, you tell these browsers to ignore the <SCRIPT> tags and all the code between them.

JavaScript is, and is likely to remain, the default scripting language for the Web. If you omit the LANGUAGE attribute, both Navigator and Internet Explorer default to the value "JavaScript". Nonetheless, because there are now multiple scripting languages available it is a good habit to always use the LANGUAGE attribute to specify exactly what language (or what version) your scripts are written in.

The </SCRIPT> Tag

You may at some point find yourself writing a script that writes a script into some other browser window or frame.[2] If you do this, you'll need to write out a </SCRIPT> tag to terminate the script you are writing. You must be careful, though--the HTML parser doesn't know about quoted strings, so if you write out a string that contains the characters "</SCRIPT>" in it, the HTML parser will terminate the currently running script.

[2] This happens more commonly than you might think; one commonly used feature of JavaScript is the ability to dynamically generate HTML and JavaScript content for display in other browser windows and frames.

To avoid this problem simply break this tag up into pieces, and write it out using an expression like "</" + "SCRIPT>": 

<SCRIPT>
f1.document.write("<SCRIPT>");
f1.document.write("document.write('<H2>This is the quoted script</H2>')");
f1.document.write("</" + "SCRIPT>");
</SCRIPT>
Alternatively, you can escape the / in </SCRIPT> with a backslash: 

f1.document.write("<\/SCRIPT>");

Previous Home Next
By Value vs. By Reference Book Index Including JavaScript Files
HTML: The Definitive Guide CGI Programming JavaScript: The Definitive Guide Programming Perl WebMaster in a Nutshell