Learn Advanced JavaScript Programming

Calling Deferred Code from a Script

A function is a deferred script because it does not do anything until an event, a function, a JavaScript link, or an immediate script calls it. You’ve probably noticed that you can call a function from within a script. Sometimes you are interested in calling a function from the same script, and in other cases you might want to call it from another script. Both methods are possible.

Calling a function from the same script is very simple. You just need to specify the name of the function, as demonstrated in Example 4-4.

<HTML>
<HEAD>
<TITLE>Calling deferred code from its own script</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

makeLine(30)
function makeLine(lineWidth) {
  document.write("<HR SIZE=" + lineWidth + ">")
}
makeLine(10)

// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Example 4-4 (ex4-4.htm). Function definitions and calls in the same script.

Example 4-4 shows that a function can accept an argument. Also notice the “+” operator that combines strings. These topics will be discussed in later chapters. Let’s follow the entire process for the makeLine(10) command. This command invokes the makeLine function and assigns the value 10 to a parameter named lineWidth. Then, the browser prints the string <HR SIZE=10> in the client window.

Since both the calling statement and the function definition are located in the same script, you can call the function before the function definition as well as after it.

The <HEAD>…</HEAD> portion in HTML is interpreted immediately when the page loads. Therefore, the script in Example 4-4 outputs two horizontal lines at the top of the page, as illustrated in Example 4-3.

Example 4-3. Two horizontal rules of different sizes.

But, what if you want more horizontal lines in the middle of the page? Example 4-5 does just that via function calls.

<HTML>
<HEAD>
<TITLE>Calling deferred code from another script</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function makeLine(lineWidth) {
  document.write("<HR SIZE=" + lineWidth + ">")
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<H1>JavaScript coming in handy.</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--

makeLine(10)

// -->
</SCRIPT>
<BR>
This is a good example of how you can use JavaScript to
repeat certain procedures many times, without having to
write the same line over and over again. Whenever you
need a horizontal rule of any size, you call the function
makeLine() with the appropriate argument instead of writing
it again.
<SCRIPT LANGUAGE="JavaScript">
<!--

makeLine(4)

// -->
</SCRIPT>
</BODY>
</HTML>

Example 4-5 (ex4-5.htm). An HTML document with several scripts, each consisting of a function call.

Example 4-4. Two horizontal rules created by the same function.

The output of this document can be seen in Example 4-4.

Generally speaking, you can call a function from anywhere in the script, or, if the function is already evaluated, from any external script that the browser interprets. An error message will pop up if you don’t obey this rule. For example, if an external script calls the function makeLine() before its definition, you will get an error message: “makeLine is not defined.” You will probably see this message often while working on your first scripts.

Calling Deferred Code from Event Handlers

JavaScript applications are mostly driven by events that occur in the page. You may not have noticed, but when you load a page in the client window, many different events take place. Some of the events occur automatically when you load a page, while others, such as button clicks, form selections, and link navigation, are user triggered. As opposed to scripts that you embed in a document with a <SCRIPT> tag, you can add JavaScript statements to some known HTML tags. Event handlers, for example, are embedded in documents as attributes of HTML tags to which you assign JavaScript code. The general syntax is as follows:

<TAG eventHandler="JavaScript code">

Browsers that do not support JavaScript will pay no attention to the event handler attribute, but they will still evaluate the tag. One of the most simple event handlers is onMouseOver. This event handler is associated with the link or anchor tag. Its syntax is:

<A HREF="…" onMouseOver="JavaScript code">

This event handler is triggered when the user moves the mouse pointer over a link or an anchor. Take a look at the following example.

<HTML>
<HEAD>
<TITLE>Calling deferred code from event handlers</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function thankYou() {
  alert("Thank you for pointing at me!")
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="http://www.netscape.com/" onMouseOver="thankYou()">Point at
   me.</A>
<BR>
<A HREF="http://www.intel.com/"
onMouseOver="alert('Thank you for pointing
   at me!')">Point at me.</A>
</BODY>
</HTML>

Example 4-6 (ex4-6.htm). Two links with event handlers, each invoking a different function.

The new term in this script is the alert('expression') method. This is a built-in method of the window object. It shows the given expression (usually a message) in a pop-up dialog box. The syntax of this method is similar to that of document.write(). Objects and methods are introduced in Chapter 6, Object-Based Programming.

Example 4-6 demonstrates how to use event handlers. The page contains two links. The first link (to Netscape’s site) uses the onMouseOver event handler. When you put the mouse pointer over the link, the function thankYou() is invoked and executed. This function, like any other function, is a deferred code. An event handler is similar to a <SCRIPT> tag in that both formats allow you to freely include JavaScript code. The second link in Example 4-6 uses the same event handler, but it does not call the thankYou() function.

Normally, you should avoid adding a lot of JavaScript code to an event handler script. Instead, you should use functions, as shown in the first link of Example 4-6. When your document becomes long and complicated and consists of many functions (ten functions in the same page, for example) it is better to place all functions in the <HEAD>…</HEAD> portion of the page, and invoke them from elsewhere in the document.

Event handler definition usually calls for alternating quotes. You often need one pair of quotes for the argument of a function and a second pair for the event handler attribute.

Table of Contents