Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

This example works as follows. First, a flag is set establishing whether the browser is Netscape Navigator or Microsoft Internet Explorer:

if (navigator.appName == “Netscape”)
   ieflag = false
else
   ieflag = true

This flag is used throughout the rest of the document to determine which actions to perform.

---

NOTE:  If you are trying to design pages that work on more than one browser, you need to be a little more thorough than performing only the check shown. Not only do you need to check for the browser type, you also need to check for version number and platform. If you are designing a personal Web site, it is usually enough to display a “Works best with...” message to indicate your preferred browser. Corporate sites, however, need to be designed for use with different browsers.

---

• See “Browser Detection Scripts,” p. 672.

If this page is loaded into Netscape Navigator (see Figure 24.3), the second <STYLE> tag contains the information that is used to change the formatting information of the first paragraph of text.

<STYLE TYPE=“text/javascript”>
   classes.myClass.P.fontSize = “12pt”
   classes.myClass.P.fontFamily = “Verdana”
</STYLE>

This is what Netscape refers to as a “JavaScript Accessible Style Sheet.” It specifies the format of the paragraph class known as myClass. This style is applied to the first paragraph through its <P CLASS=”myClass”> tag. After the document is loaded and displayed into Netscape Navigator, however, the format cannot be changed.

If this page is loaded into Internet Explorer, the following JavaScript lines change the format of the first paragraph of text after it is loaded and displayed:

if (ieflag) {
   document.all.tags(“P”).item(0).style.fontSize = “12pt”
   document.all.tags(“P”).item(0).style.fontFamily = “Verdana”
}

FIGURE 24.3  Netscape Navigator can use JavaScript to set formats as the document is being loaded, but it cannot change them after that.

Unlike Navigator, Internet Explorer can also change the format of text dynamically. This is done in this document by attaching the changeStyle() function to the onClick event of the button.

function changeStyle() {
   if (ieflag) {
      document.all.tags(“H1”).item(0).className = “clicked”
      document.all.tags(“P”).item(1).style.fontSize = “18pt”
   }
}

The changeStyle() function changes the format of the second paragraph by directly manipulating its style properties, and it changes the format of the heading by attaching a different style sheet class to it (see Figure 24.4).

FIGURE 24.4  Microsoft Dynamic HTML surpasses that of Netscape in at least one area: enabling document formats to be changed and redisplayed on-the-fly.

Web Browser Object Model

The Document Object Model used by Netscape Navigator and Microsoft Internet Explorer lies at the heart of their implementations of Dynamic HTML. Netscape’s implementation, and its extensions to the object model, are not as extensive as Microsoft’s. Still, a number of important extensions enable you to increase capability in your HTML documents.

Microsoft’s new object model, on the other hand, is a much more significant extension of the object models of the past for either browser. In the past, you were limited mainly to accessing and manipulating the Web browser windows and only a few aspects of the current document, such as the hypertext links, HTML Forms, and images. Now, Microsoft’s Dynamic HTML has extended the object model to every HTML tag. It is now possible to examine or set properties for any tag within an HTML document or to set up events that are attached anywhere. Microsoft’s Dynamic HTML documentation Web site includes some good examples of this, enabling you to dynamically change the content included in an outline, expanding or compressing it in response to user input.

The differences and additions to the Web Browser Object Models introduced by Netscape and Microsoft are discussed in greater depth and detail in the following two chapters. The next two sections highlight some of the more important additions—in this case, changes to the Web browser event model and how you use it.

• See “Internet Explorer Document Object Model,” p. 638.

The traditional event model enabled you to respond to a limited number of events that could be triggered by the actions of your users. Table 24.1 summarizes the most important of these events, along with their description and the HTML elements to which they applied.