12.3.1. The <script> Tag

Everything between <script> and </script> is processed by the browser as executable JavaScript statements and data. You cannot place HTML or XHTML within this tag; it will be flagged as an error by the browser.

Browsers that do not support <script> will process contents of the tag as regular HTML, to the confusion of the user. For this reason, we recommend that you include the contents of the <script> tag inside HTML comments:

<script language="JavaScript">
<!--
   JavaScript statements go here
// -->
</script>

For browsers that ignore the <script> tag, the contents are masked by the comment delimiters <!-- and -->. JavaScript-enabled browsers, on the other hand, automatically recognize and interpret the JavaScript statements delimited by the comment tags. By using this skeleton for all your <script> tags, you can be sure that all browsers will handle your document gracefully, if not completely.

<script> Function: Define an executable script within a document Attributes: CHARSET DEFER LANGUAGE SRC TYPE End tag: </script>; never omitted Contains: scripts Used in: head_content, body_content

12.3.2. The <noscript> Tag

<noscript> Function: Supply content to <script>-challenged browsers Attributes: None Contains: body_content Used in: text

Unfortunately, only Netscape 3.0 and Internet Explorer 4.0 and later versions ignore the contents of the <noscript> tag. So even <script>-able browsers like Netscape 2 and Internet Explorer 3 will display the contents of the <noscript> tag, to the confusion of their users. There are other ways to detect and handle <script>-challenged browsers, detailed in any good JavaScript book.

The <noscript> tag supports the sixteen standard HTML 4/XHTML attributes: class and style for style management, lang and dir for language type and display direction, title and id for titling and naming the enclosed content, and the event attributes for user-initiated processing.

12.3.3. JavaScript Event Handlers

<a href="doc.html" onMouseOver="status='Click me!'; 
return true">

When the mouse passes over this example link, the browser executes the JavaScript statements. (Notice that the two JavaScript statements are enclosed in quotes and separated by a semicolon, and that single quotes surround the text-message portion of the first statement.)

While a complete explanation of this code is beyond our scope, the net result is that the browser places the message "Click me!" in the status bar of the browser window. Commonly, authors use this simple JavaScript function to display a more descriptive explanation of a hyperlink, in place of the often cryptic URL that the browser traditionally displays in the status window.

HTML and XHTML both support a rich set of event handlers through related "on" event tag attributes. The value of any of the JavaScript event handler attributes is a quoted string containing one or more JavaScript statements separated by semicolons. Extremely long statements can be broken across several lines, if needed. Care should also be taken in using entities for embedded double quotes in the statements to avoid a syntax error when processing the attribute value.

12.3.4. JavaScript URLs

To create a JavaScript URL, use javascript as the URL's protocol:

<a href="javascript:generate_document(  )">

In the example, the JavaScript function generate_document( ) gets executed whenever the hyperlink gets selected by the user. The value returned by the function, presumably a valid HTML or XHTML document, is rendered and displayed by the browser.

It may be that the executed statement returns no value. In these cases, the current document is left unchanged. For example, this JavaScript URL:

<a href="javascript:alert('Error!')">

pops up an alert dialog box and does nothing else. The document containing the hyperlink would still be visible after the dialog box was displayed and dismissed by the user.

12.3.5. JavaScript Entities

&{document.fgColor};

More than one statement must be separated by semicolons within the curly braces. The value of the last (or only) statement is converted to a string and replaces the entity in the document.

Normally, entities can appear anywhere in an document. JavaScript entities are restricted to values of tag attributes. This lets you write "dynamic tags" whose attributes are not known until the document is loaded and the JavaScript executed. For example:

<body text=&{favorite_color(  )};>

will set the text color of the document to the color value returned by the individual's favorite_color( ) function.

12.3.6. The <server> Tag

Netscape's server (not to be confused with the Netscape Navigator browser) uses the <server> tag to let you to place JavaScript statements within a document that get processed by the server. The results of the executed JavaScript then gets inserted into the document, replacing the <server> tag. A complete discussion of this so-called "server-side" JavaScript is completely beyond this book; we include this brief reference only to document the <server> tag.

<server> Function: Define server-side JavaScript Attributes: None End tag: </server>; never omitted Contains: JavaScript Used in: head_content

Like the <script> tag, the <server> tag contains JavaScript code. However, the latter tag and content code must appear inside the document <head>. It is extracted from the document and executed by the server when the document is requested for download.