 |
Chapter 10 |  |
|
Chapter 10 | |
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:
This is the most common method.
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.
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.
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.
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, < 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.
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>
The context that matters is the HTML page, not the script block:
<SCRIPT>document.write(x);</SCRIPT>
<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 <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>
<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>
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.
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>
f1.document.write("<\/SCRIPT>");
|
 |
|
| By Value vs. By Reference |  |
Including JavaScript Files |
