[Chapter 10] Client-Side Program Structure

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.

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 =index.html 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 =index.html 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>");

10. Client-Side Program Structure

10.1 The <SCRIPT> Tag

Example 10.1: A Simple JavaScript Program in an HTML File

The LANGUAGE Attribute

The </SCRIPT> Tag

Welcome to sxlist.com!

Welcome to sxlist.com!


By Value vs. By Reference		Including JavaScript Files