A Scripting Refresher

While this chapter doesn't provide a full introduction to scripting, it does review some aspects of Web-page scripting that you'll need in order to successfully work through the samples throughout the rest of this book. This section is included as a refresher; you should be familiar with a scripting language, such as Microsoft JScript or Microsoft VBScript, and you should have worked at least a bit with Dynamic HTML.

NOTE
All the scripting examples in this book will be written in Microsoft JScript.

HTML and Scripts

Just as HTML elements require the use of tags, getting scripts into an HTML file requires that a special set of tags be included, as shown here:

<SCRIPT LANGUAGE="JavaScript">
<!--

-->
</SCRIPT>

The opening <SCRIPT> tag can include a LANGUAGE attribute that allows the author to specify which scripting language is used: JScript, VBScript, or another language.

JScript vs. JavaScript
JScript is similar to Netscape's JavaScript. So which product should you specify in your scripts? If you are using Microsoft Internet Explorer, the JScript engine will be used, no matter whether you specify JScript or JavaScript in the LANGUAGE attribute of the <SCRIPT> tag. On the other hand, other browsers might not recognize a LANGUAGE attribute of JScript, and using that value would result in errors. Since JavaScript is widely recognized by many browsers, you are less likely to receive errors if you specify it in the LANGUAGE attribute of the <SCRIPT> tag.

Although scripts can occur anywhere within an HTML document, their best and widely accepted location is in the document's head section. Since scripts often need to interact with other elements on a page and since HTML documents load and run asynchronously, putting scripts in the head section helps assure that they will get loaded first and will be available when they're needed.

NOTE
If you have used other scripting languages, you might be interested to know that Internet Explorer can act as a scripting host. This means that it can host and work with scripting languages other than those that shipped with it. This allows script authors to use those languages that are perhaps more familiar to them, such as REXX and PERL. For more information on script hosting, visit http://msdn.microsoft.com/scripting/default.htm?/scripting/hosting/hosting.htm.

The Dynamic HTML Object Model

Internet Explorer (versions 4 and later) provides a powerful and flexible object model for HTML elements. This object model provides access to (exposes) every element on the page as an object, complete with properties (information about an object) and methods (ways to take action on an object). Examples of properties that are exposed through the object model are colors, text, element position, and element attributes.

NOTE
This section briefly discusses the Dynamic HTML object model. Later in the chapter, you'll learn about the XML object model. As this is being written, the W3C just issued a language-neutral Document object model (DOM) Level 1 specification that will help provide a mechanism for interoperability between HTML and XML. The XML object model used by Microsoft maps to DOM Level 1, and Microsoft intends to track future W3C activities on DOM.

Code Listing 5-1 shows the Dynamic HTML object model in action.

Code Listing 5-1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>

  <HEAD>
    <SCRIPT LANGUAGE="JavaScript" 
      FOR="window" EVENT="onload">
      alert ("Background color is " +
        document.bgColor + ".")
    </SCRIPT>

    <SCRIPT LANGUAGE="JavaScript">
      function changeColor()
        {
        document.bgColor = "red";
        alert ("Background color is " +
          document.bgColor + ".")
        }
    </SCRIPT>

    <TITLE>Code Listing 5-1</TITLE>
  </HEAD>

  <BODY BGCOLOR="white" ONCLICK="changeColor()">
  </BODY>

</HTML>

The page in the sample (included on the companion CD in the Chap05\Lst5_1.htm file) uses a script that dynamically changes the background color of the page by changing the document.bgColor property when a user clicks on the document page. Similar scripting techniques will be used later in the chapter (and later in this book) when you work with the XML object model.

Event Handlers

Scripts often need to react to some event that occurs on the page. In Code Listing 5-1, the document object generates an event when the user clicks on the page. That onclick event triggers an action on the page; an event handler starts the action by calling a script function. An event handler typically waits for a specific event to happen and then springs into action when it does. A common event handler used in Web-page scripts triggers an action when the document is loaded, as shown below (from Code Listing 5-1):

<SCRIPT LANGUAGE="JavaScript" 
  FOR="window" EVENT="onload">
  alert ("Background color is " +
    document.bgColor + ".")
</SCRIPT>

Another type of event handler is the inline event handler that is also demonstrated in Code Listing 5-1:

<BODY BGCOLOR="white" ONCLICK="changeColor()">

This type of handler is incorporated directly into the tag or object that generates the event.

Working with Object Properties

A property is a characteristic of an object. For example, HTML's img object has the SRC attribute, which is a property that identifies the source filename, and the WIDTH and HEIGHT attributes, which are properties that identify the dimensions of the image. Most object properties can be read and changed while the object (including the document object) is being used, as shown in Code Listing 5-1. Working with object properties is essential to writing effective scripts, and object properties are often needed when writing scripts that use the XML object model.

Object Naming

Object naming follows a dot notation format—a combination of the name of the object and the name of the child object, property, event, or method separated by periods, or dots. Dot notation is a convenient naming convention to use for working with objects in scripts. Within the dot notation, you can read the hierarchy of an object from left to right: for example, window.document.image1.height tells you that height is a property of the image1 object, image1 is a child object of the document object, and the document object is a child object of the window object. In some cases, the naming convention can be shortened. For example, since the image1 object exists in the same window and document in which the script is running, the property name could be shortened to image1.height. In this case, the window and document are assumed to be the same window and document in which the image1 object exists.

Code Listing 5-2 (included on the companion CD in the Chap05\Lst5_2.htm file) shows an example of some of the scripting principles discussed above.

Code Listing 5-2.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>

  <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
      function showStats()
        {
        widthData.innerText =
          "Image width is " + image1.width + ".";
        heightData.innerText =
          "Image height is " + image1.height + "."
        }
      function smaller()
        {
        image1.width = image1.width ? 25;
        image1.height = image1.height ? 25;
        showStats()
        }

      function bigger()
        {
        image1.width = image1.width + 25;
        image1.height = image1.height + 25;
        showStats()
        }
      </SCRIPT>

      <TITLE>Code Listing 5-2</TITLE>
    </HEAD>

  <BODY>
    <INPUT TYPE="Button" NAME="smaller" VALUE="Smaller"
      onclick="smaller()">
    <INPUT TYPE="Button" NAME="bigger" VALUE="Bigger"
      onclick="bigger()">

    <P>
      <IMG ID="image1" SRC="star.gif" WIDTH=172 HEIGHT=152
        onclick="showStats()">

    <P>
      <SPAN ID="widthData"></SPAN>
      <BR>
      <SPAN ID="heightData"></SPAN>

  </BODY>
</HTML>

The script on this page accesses the width and height properties of the image1 object to change the size of the image on the page when the user clicks the appropriate button. Each button's event handler triggers the appropriate script function. Finally, the innerText properties of two Span elements are used to display the image dimensions.

Using Scripts with XML

This ends our whirlwind tour of HTML scripting. Later in this chapter, you'll see that many of the techniques used for HTML scripting are also used in XML scripting. Scripts allow you to create powerful, dynamic, data-aware pages with XML.