Scripting a Web Page | Dynamic HTML in Action

As you learned in Chapter 5, almost every element in Internet Explorer and many in Netscape Navigator—from an image to the background color of the page itself—is available (exposed) as an object. This availability means that all the objects can be accessed through scripts. We will use this capability to demonstrate some basic scripting techniques. This concept will be covered in detail in Chapter 7.

Code Listing 6-2 shows an HTML page with an image tag. We will use this as a base to which we will add script.

Code Listing 6-2.

 <HTML> <HEAD> <TITLE>Listing 6-2</TITLE> </HEAD> <BODY> <IMG ID="MyImage" SRC="oldpic.gif"> </BODY> </HTML>

The code in Code Listing 6-2 is standard HTML. The <IMG> tag specifies an image. The ID attribute used with this tag gives the image a name—in this case, MyImage—so that we can easily reference it later through the Dynamic Object Model. The last part of the image tag uses the SRC attribute to specify the source for that image: Internet Explorer will display the image named oldpic.gif.

Now we create some script that has an effect on the image we set up:

 <SCRIPT LANGUAGE="JavaScript"> <!-- MyImage.src="newpic.gif"; //--> </SCRIPT>

The core of this script is the line MyImage.src-"newpic.gif". In the original HTML (Code Listing 6-2), we specified the SRC attribute for the MyImage image tag. In the Dynamic Object Model, this sets the src property of the MyImage object. To refer to an object's property, you specify the object's name and use a period to separate it from the property name: MyImage.src, for example. (To find out more about naming conventions, see the sidebar "Notation and Naming" in Chapter 7). When it is run, the script will access the MyImage object in the Dynamic Object Model and change the value of its src property from oldpic.gif to newpic.gif. Internet Explorer then changes the displayed image to newpic.gif.

Basic Event Handlers

The preceding code looks pretty good. We have an HTML page containing an image. We have a script that changes the displayed image to another image. We now need to combine them and let Internet Explorer know when to call the script that changes the image.

Most scripts are activated when some sort of event happens. For example, loading the HTML page is an event. Moving the mouse is another event. Whenever an event happens on a page, Internet Explorer knows about it. Scripts that handle events are referred to, appropriately, as event handlers. Code Listing 63 adds an event handler that runs the script when the MyImage object is clicked. This type of event handler is supported only in Internet Explorer. Embedded event handlers, discussed next, are more widely supported.

Code Listing 6-3.

 <HTML> <HEAD> <TITLE>Listing 6-3</TITLE> <SCRIPT LANGUAGE="JavaScript" FOR="MyImage" EVENT="onclick"> <!-- MyImage.src="newpic.gif" //--> </SCRIPT> </HEAD> <BODY> <IMG ID="MyImage" SRC="oldpic.gif"> </BODY> </HTML>

The event handler appears inside the <SCRIPT> tag in Code Listing 6-3. It consists of two parts: the FOR attribute lets the script know that we are concerned with the object named MyImage; the EVENT attribute determines which event will be handled—in this case, the event is onclick (a mouse click). Thus, this script block is activated only when the user clicks the image referred to by the MyImage object. To see this script in action, open lst6-3.htm in the chap06 folder on the companion CD. When Internet Explorer displays the page, click the image in the upper left and watch it change. To refresh the page and return the image to its original state for further testing, click the Refresh button on the Internet Explorer toolbar or press its keyboard equivalent, the F5 key.

NOTE
Notice that we inserted the script in the header region of the HTML in Code Listing 6-3. Scripts can be inserted anywhere on a page, depending on the script writer's preference and the needs of the page. When possible, it is a good idea to keep all scripts in the same place on an HTML page to make them easier to find and to aid in the debugging process. Keeping a script in the header region also ensures that the script is loaded before the rest of the page, which can be helpful when you are debugging.

Embedded Event Handlers

Embedded event handlers are often easier to create than the one shown in Code Listing 6-3. To embed an event handler, we can insert the code to handle the event inside the target tag itself, as shown in Code Listing 6-4.

Code Listing 6-4.

 <HTML> <HEAD> <TITLE>Listing 6-4</TITLE> </HEAD> <BODY> <IMG ID="MyImage" SRC="oldpic.gif" onclick="MyImage.src=`newpic.gif'"> </BODY> </HTML>

The Web page in Code Listing 6-4 works just like the previously created page; when the user clicks the image, the image changes. But the image tag now contains an event handler that specifies what should be done when the image is clicked and the onclick event occurs. In this case, onclick is set to MyImage.src-'newpic.gif'. Notice that this setting is the same as the contents of the <SCRIPT> block in Code Listing 6-3, except for the quotation marks. In Code Listing 6-4, double quotation marks enclose the entire onclick expression, which describes what should happen when the image is clicked. Within that expression, single quotation marks enclose the filename newpic.gif. The double quotation marks tell Internet Explorer where the event handler begins and ends; if we had used a double quote instead of the first single quote, for instance, we would have ended the onclick expression prematurely. We could also have reversed the usage of the two types of quotation marks and used single quotes to surround the event handling code and double quotes to surround the file name. The important thing is to use the same type of quotation mark to begin and end each part of the code.

Embedded event handlers have a few limitations. Only JavaScript and JScript support them; VBScript does not. They also can make the HTML somewhat hard to read, especially if you use a long string of multiple commands. You can learn more about event handlers in Chapter 7.

Functions

The scripts you've seen so far in this chapter have been tied to a specific event for a specific object on the page (a click on MyImage, for example). To make the script accessible from multiple events occurring on multiple objects, we might create individual copies of the script, one for each image, each with its own event handler. But this technique involves many scripts and a lot of maintenance. Fortunately, there is a better way.

A function is a named block of program code that can be called by its name. Separating a script from a specific event handler and making it a function allows us to access it from multiple events, as shown on the following page.

 <SCRIPT LANGUAGE="JavaScript"> <!-- function changeImage(){   MyImage.src="newpic.gif" } //--> </SCRIPT>

NOTE
Because this book targets modern browsers that understand the <SCRIPT> tag, we will leave out the  commenting tags for most of the remainder of the book. If your site is intended also for browsers that do not understand script (for example, Netscape Navigator version 1 or some text-only browsers), use commenting tags as appropriate.

Notice that we removed the event handler part of the <SCRIPT> tag (the FOR and EVENT attributes) and changed the internal parts of the script to a function. In this case, the name of the function is changeImage. We can use this name to run the code within the function from elsewhere on the HTML page.

Because functions usually perform an action, it's a good idea to use verbs in their names. Parentheses, which are required, follow the function name. In more advanced functions, you'll see argument names within these parentheses. An argument is simply information that is being passed to the function. The empty parentheses in our sample function indicate that we are not passing any arguments to the function. (For now, don't worry if you are a little unclear on passing arguments; we will cover function arguments in detail in Chapter 9.)

Also notice the curly braces—{ and }—after the function name and at the end of the script. These braces, which are often used in JScript to describe conceptually distinct blocks of code, define the beginning and end of the block of code that comprises the function.

We now need an event to activate this function. The following HTML contains an embedded event handler:

The onclick handler we added to the <IMG> tag has been set to changeImage( ). This tells Internet Explorer to run the function changeImage when the user clicks this graphic. In other words, the onclick event handler calls the changeImage function. Now let's see what all this looks like. Code Listing 6-5 puts the HTML back together with the script code. When you run this script (chap06\lst6-5.htm on the companion CD), it will act like the script in Code Listing 6-3 and Code Listing 6-4. Now, however, the script is a function and can be used by anything that calls that function. This is demonstrated by the heading tag.

This code shows multiple elements calling one function. The changeImage function is called by both MyImage and the heading. With this script, clicking either the image or the text causes the image to change. (Don't forget that you can refresh the page by pressing F5 or by clicking the Refresh button.)

At this point, you should have a basic understanding of how scripts can add power and flexibility to your Web pages. Now that we have covered the basics, we will examine some of these topics in more depth. In the next chapter, we will investigate how scripting can interact with the Dynamic Object Model. After that, we will explore the types of data supported by JScript and JavaScript and how they can be manipulated. We will then cover how to control scripts using functions, conditional expressions, and loops. The last scripting chapter will cover some advanced scripting capabilities, like error handling.