Learn Advanced JavaScript Programming

Placing Scripts in Documents

You already know that not all JavaScript statements are executed immediately. Some need to be called in order to do something. In order to understand where to place a script in a document, you must know the difference between an immediate script and a deferred script.

Immediate scripts are ones that influence the layout of the page. For instance, a script that prints something to the Web page is usually an immediate script. Therefore, you must place immediate scripts exactly where you want their output to appear. The following example demonstrates how to place immediate scripts.

<HTML>
<HEAD>
<TITLE>Immediate script</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=25>
<TR>
<TD>
<SCRIPT LANGUAGE="JavaScript">
<!--

document.write("<IMG SRC='img4-2.gif' ALT='pencil icon'
HEIGHT=71 WIDTH=53>")

// -->
</SCRIPT>
</TD></TR>
</TABLE>
</BODY>
</HTML>

Example 4-2 (ex4-2.htm). A script in an HTML table cell, in the <BODY>…</BODY> portion.

In Example 4-2, we included the script block in the <BODY>…</BODY> portion of the page. The only JavaScript statement included is the one that prints the image. In order to produce a frame around the image, we used an HTML table. Notice how we used plain HTML to create the <TABLE> tag and other table-related definitions and JavaScript-generated HTML to create images. Therefore, we had to position the script exactly where we wanted it to be—inside the table. Whenever possible, it is better to make the table a JavaScript output as well, because placing JavaScript scripts inside plain-HTML tables may expose a known bug in Navigator. The output of Example 4-2 is shown.

Example 4-2. JavaScipt-generated output in an HTML table.

Tip: An important rule in HTML programming is to always specify the height and width of an image. You can specify them by adding HEIGHT and WIDTH attributes to the <IMG> tag. Both sizes are measured in pixels. For example, img4-2.gif in Example 4-2 has a height of 71 pixels and a width of 53 pixels. Do not forget to attach these attributes to all images in the following fashion:
<IMG SRC="imageURL" ALT="briefDescriptionOfImage"
HEIGHT=imageHeightInPixels WIDTH=imageWidthInPixels>
Many bugs in JavaScript can be avoided by specifying the height and width attributes of an image.

An immediate script does not necessarily generate any output. It can consist of virtually any valid JavaScript statement (such as variable declarations and loops). Statements in an immediate script are executed as they are being interpreted.

Deferred scripts are different from immediate scripts. They do not directly influence the final layout of the page. Deferred scripts just pass a set of instructions to the browser, which keeps them in its memory. These scripts usually include function definitions. A deferred script tells the browser what to do when another script tells it to do that. You should place deferred scripts in the <HEAD>…</HEAD> portion of the document because the browser loads this portion first, and therefore all definitions are available throughout the entire program. That is, the browser already has the instructions when another script tells it to execute them. Example 4-3 uses a deferred script.

<HTML>
<HEAD>
<TITLE>Deferred script</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function makeDialogBox() {
 alert("Wonderful!")
}
// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Example 4-3 (ex4-3.htm). A deferred script that displays a dialog box when invoked.

This script does not influence the graphical layout of the page. The browser evaluates the script but does nothing except for storing the script in memory. This characteristic applies to all deferred scripts. Deferred scripts usually react to events that the user triggers after the page has been loaded.

Another advantage in putting deferred scripts in the <HEAD>…</HEAD> portion has to do with programming style and convenience. Placing all scripts in the <HEAD>…</HEAD> section enable easy maintenance and modification because you naturally know where to look for errors.

So far you know two types of scripts: immediate scripts and deferred scripts. Both types often need to be used in the same document. This is very simple—you just need to write the scripts and put each one of them in its appropriate place, as if it is alone.

Tip: Most of your scripts will be in the <HEAD>…</HEAD> portion of the HTML document. Always place the <TITLE>title of the page</TITLE> definition before the script, so the title appears in the title bar during the script’s execution. If the script is deferred, you do not have to worry about this because evaluating a script does not take much time, and people will not notice the difference. It is generally a good idea to place immediate scripts in the <BODY>…</BODY> portion so that the viewable attributes of the page, such as the background, are evaluated before the script is executed. On the other hand, it is a good practice to place deferred scripts in the <HEAD>…</HEAD> portion.

Executing Deferred Scripts

Deferred scripts do not do anything immediately, but they are certainly not a decoration. In order to use deferred commands, you must call them from outside the deferred script. There are three ways to call deferred scripts:

From immediate scripts, using the function mechanism
By user-initiated events, using event handlers
By clicking on links or image-map zones that are associated with the script

Table of Contents