Learn Advanced JavaScript Programming

Calling Deferred Script from Links and Image Maps

The rest of this chapter is based on three concepts we have not defined yet: WWW, hypertext, and URL. WWW is a hypertext document system, linking related data from different documents. Hypertext is a technology used to thread information. The Universal Resource Locator, or URL, is the standard naming convention of documents on the Web.

The basic structure of a reference anchor (link) is:

<A HREF="documentURL">any text or images</A>

Instead of the documentURL in this example, JavaScript uses the <A> tag’s HREF attribute to create a “link” to a script (function) that has already been evaluated. The placement of this tag is governed by the same rules affecting that of event handlers. For example, you can call a function from this tag only if the function was previously defined. Although the <A> tag’s HREF attribute is not an event handler, it behaves in a similar fashion.

In the next chapter you will see how to evaluate expressions in JavaScript. You will find out that the “location” of the evaluation tool is “javascript:”. The URL of all JavaScript deferred scripts (functions) starts with javascript:, followed by the full name of the function they call. The general syntax of such a link is:

<A HREF="javascript:functionName()">any text or images</A>

Take a look at Example 4-7 which demonstrates the use of such links.

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

function alertText() {
  alert("This is text!")
}

function alertImage() {
  alert("This is an image!")
}

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

Click <A HREF="javascript:alertText()">here</A>
   to see a message.<BR>
Click <A HREF="javascript:alertImage()"><IMG
 SRC="img4-7.gif" ALT="here"
 BORDER=0 HEIGHT=43 WIDTH=93></A> to see another
message.

</BODY>
</HTML>

Example 4-7 (ex4-7.htm). Calling JavaScript functions from links.

Since “javascript:functionName()” is an official URL, you can also use it in image maps. The following example shows how to do this:

<HTML>
<HEAD>
<TITLE>Calling deferred code from an imagemap</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function alertHome() {
  alert("Home")
}

function alertHelp() {
  alert("Help")
}

function alertAbout() {
  alert("About")
}

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

<IMG SRC="img4-8.gif" USEMAP="#bar_map" BORDER=0 ALT="imagemap">
<MAP NAME="bar_map">
<AREA SHAPE="RECT" COORDS= "0,0,142,68"
  HREF="javascript:alertHome()">
<AREA SHAPE="RECT" COORDS= "143,0,254,68"
 HREF="javascript:alertHelp()">
<AREA SHAPE="RECT" COORDS= "255,0,398,68"
 HREF="javascript:alertAbout()">
</MAP>

</BODY>
</HTML>

Example 4-8 (ex4-8.htm). Functions invoked by an image map’s zones.

There are no special restrictions for JavaScript-based URLs. They behave exactly like standard “http:”-schemed URLs. Therefore, placing the mouse pointer over such a link reveals the URL in the browser’s status bar, as shown in Figure 4-6.

JavaScript Entities

Netscape Navigator 3.0 introduced a powerful tool that enables a flexible HTML tag creation. You can use any JavaScript value stored in a data structure (such as a variable or a property of an existing object) for an HTML tag attribute. See the following chapter, Basic Declarations and Expressions, for more details.

Summary

In this chapter we discussed basic page layouts and ways to embed JavaScript scripts in HTML. We also learned the basics of functions, function calls, and function definitions. These topics are discussed in detail in following chapters. Finally, we played around with event handlers, which are key elements for enabling user interaction. This introduction will help you understand general browser-related concepts and their effect on JavaScript programmers.

Table of Contents