1

DYNAMIC HTML Craig D. Knuckles, Ph.D., Lake Forest College 1 Introduction 2 What is DHTML? 3 The Evolution of DHTML 4 The Standardization of DHTML 5 Modern DHTML 6 The Future of DHTML 7 Conclusion Abstract Dynamic HTML is not a distinct language or technology, but refers to the way HTML, CSS, and JavaScript are used together to endow Web pages with interactivity. DHTML is introduced as an abstract notion. Then, the concrete ways the technologies that collectively enable DHTML work together to create DHTML are illustrated. The Document Object Model, which allows JavaScript to access and manipulate the HTML and CSS properties that define a Web page, is at the foundation of DHTML. The intertwined evolutionary histories of DHTML, Web Browsers, and the Document Object Model are provided. The current capabilities of DHTML are presented in detail, and an indication of the future prospects of DHTML is provided. Glossary Browser Object – A Web Browser's in-memory (RAM) representation of a Web page. Cascading Style Sheets (CSS) – Provides precise formatting and layout instructions to augment HTML. Document Object Model Level 0 (DOM0) - The Browser Objects used by Internet Explorer 3 and Netscape Navigator 3. Dynamic HTML – A collection of technologies and techniques that enable Web pages to become interactive. ECMAScript – The official standard, which is called JavaScript in common parlance. Event – A user moves the mouse or clicks on a region of a Web page. Event Handler – A contingency in place to deal with user events. Event handlers are usually used to call JavaScript functions. HTML DOM – An extension of the Browser Objects used by Internet Explorer 3 and Netscape Navigator 3. Hypertext Markup Language (HTML) – Instructs software how to render a Web page. Hypertext Transport Protocol (HTTP) – Stateless protocol that coordinates transport of HTML documents on the Internet. JavaScript – The scripting language used to provide programming support for Web browsers. Pseudo-class – A CSS style class that has built in behavior. The hover pseudo-class creates DHTML link rollovers. Rendition – Interpretation and display of an HTML document by software. The rendition of an HTML document is called a Web page. Rollover – A DHTML effect triggered when the mouse passes over a region of a Web page. Rollover graphics refers to rollovers causing graphic images to be replaced in Web pages. Scalable Vector Graphics (SVG) – Will play a big part in the next generation of Web page design and DHTML. z-index – The layer-creating CSS property. Usually used to layer HTML div containers. 1 Introduction The HyperText Markup Language (HTML) is used to instruct a given piece of software how to "mark up" information for human viewers – the font sizes and faces, text colors, background colors, page layout, etc. A digital document comprised of HTML is called an HTML document. An HTML document, which contains only plain text, is very different from its rendition, which is a visual display created by software according to the HTML markup instructions in the document. The rendition of an HTML document is called a Web page. Many types of software can render HTML documents and create Web pages, but by far Web browsers are the type of software most commonly used for that purpose. An HTML document stored on a local hard drive can be

2

loaded into a Web browser and rendered as a Web page. Thus, the act of creating a Web page rendition from an HTML document has nothing to do with the Internet whatsoever. The computer need not even be connected to the Internet. This is really no different from loading a word processing document into a piece of word processing software to see a rendition of that type of digital document. The term hypertext refers to text with hyperlinks, or simply links. Text without links is simply text. HTML rendering software, such as Web browsers, have the ability to retrieve and render new hypertext documents at the request of a user clicking a link. The rest of the name HTML designates it as a markup language. Markup instructions tell the rendering software about the document's logical structure and, to some extent, how its rendition should be formatted, HTML does not specify how the Web page should be able to interact with the viewer. Hyperlinks provide for the only interactive capability of Web pages created using only HTML. That linking ability aside, a Web page rendition is inherently static. It can't interact with the user. The reason HTML-created Web pages are inherently static stems both from the fact that HTML is only a markup language, albeit for hypertext, and from the fact that its transport protocol is stateless. The HyperText Transport Protocol (HTTP) is specified at the beginning of a Uniform Resource Locator (URL), like http://www.cubs.com, that requests an HTML document from over the internet. The protocol is designated as stateless since it specifies that an HTML document, and objects such as graphics that are to be embedded in the Web page, be transferred to the Web browser and then the connection to the remote Web server terminated. HTTP does not provide for a continued transaction state between a Web browser and Web server. That means that user interactivity can't be achieved in a rendered HTML-generated Web page through continuous support from the Web server. If fact, the legacy of an HTML document retrieved via HTTP from over the internet is a Web page rendition that is no different than if the HTML document had been loaded into the browser locally from the hard drive using no internet connection whatsoever. Whether loaded locally or over the internet, a Web page rendition is static. A new connection to Web server is only invoked when the browser requests a new HTML document (or other resource) from the server. That just results in another static rendition in the Web browser. Indeed, Tim Berners-Lee invented the World Wide Web around 1990 in an effort to mobilize information about current physics research on the internet. The newly created HTML needed only to be able to specify an electronic document's logical structure so that rendering software could understand how to display it. The newly created HTTP needed only to transport the documents to the rendering software over the internet. Once retrieved, the HTML document provided for a static information display. Hyperlinks provided for a means to retrieve related information for static display. At the onset, Tim Berners-Lee did not foresee that commercialization of the Web would lead to dynamic interactive effects in Web pages. 2 What is DHTML? Dynamic HTML (DHTML) refers to a means for making a rendered Web page capable of customized interaction with the user without further Web server connections. A DHTML enabled Web page has interactive capabilities that are handled entirely by the browser software on the user's computer. This is the abstract notion of DHTML. Typical DHTML interactive effects are triggered when a user passes the mouse over a region of the Web page and then something in the Web page changes. Examples of such changes include one graphic being replaced by another or a hidden layer in the Web page becoming visible. As the Web has evolved, Web page authors have sought to improve the functionality and aesthetics of a user's viewing experience. Indeed, a Web site that piques a user's interest is more likely to receive a return visit from that user. Through DHTML, the Web has achieved a level of interactivity sufficient to satiate Web surfers' desires for instant interactive gratification, yet without taxing the internet's infrastructure with superfluous, time consuming network transactions. Of all the Web-related technologies, DHTML is perhaps the most poorly named. A reference to "the Dynamic HyperText Markup Language" leads one to think of a self-contained language, perhaps a big brother of HTML, used to enable dynamic interactive effects. But DHTML is not a self-contained language. A more accurate appellation for DHTML would be "Dynamic Web Pages using JavaScript." DHTML is actually a marketing term invented by the software vendors Netscape and Microsoft during the browser wars as they expanded upon the dynamic capabilities of their browsers in efforts to gain market share. The world has come to know DHTML as summarized by the following "equation." DHTML = HTML + CSS + DOM + JavaScript

3

HTML is defined by the international standard [10]. The Cascading Style Sheet (CSS) language and the Document Object Model (DOM) are defined by the international standards [9] and [11], respectively. JavaScript, formally ECMAScript and defined by the international standard [2], is the scripting1 language used to provide programming support for Web browsers. DHTML is a term that encompasses the ways the four distinct technologies on the right side of the above equation interact together to create dynamic effects. There is no well-defined "language" specification for DHTML, nor even a definition of what DHTML should accomplish. Abstractly, DHTML enables interactivity in Web pages without the need for extra transactions with Web servers. Concretely, DHTML refers to what the imaginations of Web programmers have been able to accomplish by integrating HTML, CSS, DOM, and JavaScript. The full strength of those four technologies need not be brought to bear to create DHTML effects. Very basic DHTML effects can be created using HTML, JavaScript, and a "subset" of the DOM called the Browser Object. Such a very basic DHTML effect is illustrated in Figure 2.1. As this article progresses through the evolution of DHTML, it's full strength will become apparent. An HTML document is shown on the left of Figure 2.1. The body of the HTML document contains only one word and a clickable button. When the HTML document is loaded, the Web browser creates a Browser Object, which is the browser's in-memory representation of the Web page it creates from the HTML document and the window that contains it. That object is stored in the computer's RAM memory for quick access, and holds the current state of the browser window and the Web page rendition. Figure 2.1 only shows a partial depiction of the Browser object. The data about the current state of the window and rendition is carried by the object is contained in its properties, a few of which are shown in square brackets in Figure 2.1. The Browser Object is hierarchical, the window being the parent. The hierarchy is natural. The window has a history which has a length. The window contains the document which contains images which have properties that the browser must have in memory. Properties of the Browser Object are accessed by using "dot" notation to progress down into the hierarchy. For example, window.history.length and window.document.bgColor contain the number of different Web pages that have been loaded into the browser window since it was opened and the current background color of the Web page, respectively.

1 Programming languages, like C++ and Java, are used to give instructions to a computer's operating system to create programs and applications, for example. Scripting languages, which have many of the same features as programming languages, are used to give instructions to applications, such as Web browsers.

4

Figure 2.1 A basic DHTML effect The left-most browser window in Figure 2.1 reflects the initial state of the Browser Object as determined by the HTML instructions – black foreground (text) color and white background color. DHTML effects are created by changing the state of the Browser Object upon a user event, in this case the user clicking the button. The onclick event handler defined for the button calls a JavaScript function named change(). That function is defined in a script included in the head section of the HTML document. Upon the button click event, the JavaScript function changes the state of the Browser Object by reversing the foreground and background colors. The effect on the Web page is immediate, and the user sees white text on a black background. The two browser windows in Figure 2.1 show the Web page before and after the button click. They do not represent two different browser windows. Rather, the DHTML effect triggered by the user event changes the state of the Browser Object and, hence, the Web page rendition. Moreover, the DHTML effect is instantaneous, with no internet transaction involved. The details of a specific example sometimes serve to overshadow the underlying concept, which can be quite simple when considered in more generality. Figure 2.2 shows the broader concept of DHTML implementation. This diagram doesn't reflect what CSS or the full DOM bring to DHTML. Those additions add nothing to the general concept, just more flexibility and many more details regarding implementation. 1. The browser parses the HTML document and creates an in-memory (RAM) Browser Object, which stores the

properties of the Web page as specified by the HTML document. 2. The Web page rendition reflects the current state of the Browser object. 3. A user event causes a JavaScript function to be executed by the browser. The JavaScript function is in a script

contained in the HTML document. 4. The JavaScript function changes the state of the Browser Object. This causes an instantaneous change in the

state of the Web page rendition.

Figure 2.2 The general concept of DHTML Steps 2 through 4 as shown in Figure 2.2 need not be a one-time sequence of events. In fact, a sequence of user events can trigger a sequence of DHTML effects: event calls function -> function updates state of Browser Object -> rendition state changed -> event calls function -> repeat process. As the result of repetitive user events, DHTML can actually create animations in a Web page. The types of user events that trigger DHTML effects are varied. For example, the act of the user loading a Web page into a browser (the onload event) can trigger DHTML effects from the onset. But most often, DHTML effects are triggered by the user sometime after the page is fully rendered. Some common events, which are user actions for which the browser is basically sitting there "listening", are listed below. • onclick – The user clicks the mouse on a certain region of the Web page. • onmouseover – The user moves the mouse over a certain region of the Web page. • onmouseout -- The user moves the mouse back out of a certain region of the Web page. • onmousemove -- The user merely moves the mouse.

The DHTML effects initiated by such events vary widely. When defining a technology, it is often instructive also to define what it is not. Java applets and Flash animations are the most common technologies that can be misconstrued as being DHTML. Java applets and Flash animations are basically small applications (hence the term applet) that can be embedded in a Web page. In both

5

cases, the Web browser requires a helper application to execute the embedded technology. Java Applets require a Java Virtual Machine (JVM), and Flash animations require a Flash plugin for the browser. Both of these technologies increase the runtime overhead of the browser and are not favored for simple visual DHTML-style effects. The increased overhead for the browser, and the fact that a given user might have to install the helper application just to see the effect, are the main reasons why DHTML is favored for relatively simple interactive enhancements. But when interactive needs become elaborate, like for small video games embedded in Web pages, Flash and Java are certainly worth the extra overhead they incur. Many books have been written on how HTML, CSS, DOM, and JavaScript work together to create DHTML. The book [6] provides such coverage from the ground up, and assumes no prior programming experience. The book [8] provides more elaborate coverage of specific effects that can be created using DHTML. 3 The Evolution of DHTML At the dawn of Web time (circa 1990), Web pages contained only text and hyperlinks. The initial goal of HTML, and its transport protocol HTTP, was to mobilize information on the internet. There was no initial intent for fancy visual effects. The goal was a Web of information, interconnected via hyperlinks. That goal has been realized far beyond the original expectations. The Web now mobilizes billions of HTML documents. Nonetheless, the first 5 or so years of the Web's existence featured only Web pages with hyperlinks. The web did not explode until Marc Andreessen developed an application, called Mosaic, that enabled Web pages to contain graphic images, hence it's name. This was the first piece of software that had functionality resemblant to what we know of as Web browsers today. Andreessen went on to form Netscape communications. The release of Netscape Navigator version 2 for all major computing platforms (Microsoft's Windows, Macintosh, and Unix) caused the Web to ignite. The evolution of DHTML begins there. Netscape 2 (March 1996) Netscape Navigator 2 (NN2) introduced JavaScript 1.0, which provided the first scripting support behind Web pages. Prior to this, the only interactivity provided by Web pages was clicking hyperlinks. Now, programmers could write scripts to respond to user events and provide simple interactivity. Client-side processing of user data was one important feature enabled by JavaScript 1.0. The Browser Object supplied by NN2 was sufficient to allow JavaScript 1.0 to manipulate data entered into HTML forms. The simple calculator utility rendered in NN2 shown in Figure 3.1 demonstrates that. Only the relevant parts of the HTML document and Browser Object are shown.

Figure 3.1 A calculator in a Web page in Netscape Navigator 2

6

When the HTML document is loaded into the browser, the Browser Object is initialized to reflect the current state of the document. The Browser Object hierarchy reflects the containment relationships. The window contains the document. The document contains the form, whose name is calcForm. The form contains the text fields, whose names are num1, num2, and result. The value properties of the text fields contain the data entered into the fields. In this case, all three text fields in the Web page are initially empty when the page first loads. In Figure 3.1, the user has entered two numbers and clicked the multiplication button. The JavaScript function, which would be included in a script in the HTML document, first retrieves the two numbers from the Browser object. It then calculates the result, and assigns that result to the third text field. When the user clicks the button, the update to the browser object is instantaneous, and the answer immediately appears in the third text field. Again, no extra transactions with the server are involved. Data processing on the client has become a staple of Web programming. Real Web applications use a mixture of client-side processing and server-side processing to process user information such as personal information, credit card numbers, and airline flight choices just to name a few. Interestingly, this is not considered DHTML, although it meets the abstract definition of DHTML given in Section 2. The term DHTML is generally reserved for visual effects rather than data processing. Nonetheless, the addition of HTML forms and JavaScript in NN2 introduced the world to the Web as a computing platform rather than just a means to display information. The Browser Object of NN2 did allow for some effects that are sometimes placed under the umbrella of DHTML, although the term was yet to be coined. Those effects were mostly limited to changing the state of the browser window. Examples include changing the tool bar, status bar, or size of the browser window. Figure 3.2 shows a simple "DHTML" effect in NN2 that places a description about the nature of a hyperlink in the status bar when the user passes the mouse over the link. Only the relevant parts of the HTML document are shown.

Figure 3.2 A simple interactive effect in Netscape Navigator 2 The browser window in the upper left of the diagram shows the link, which gives no indication to what Web page it points. The second browser window shows the result of the onmouseover event. The status bar is at the very bottom of the browser window. The JavaScript function called by the onmouseover event simply changes the status property of the window in the Browser Object to create this effect. Although this effect is more like "dynamic browser window" than DHTML, these types of interactive visual effects are what DHTML is inherently about. It was not until around two years after NN2 was released that the term DHTML was coined in earnest. But simple browser window effects would come to be part of what DHTML encompasses. In the mean time, Netscape Navigator 3 and Internet Explorer 3 would add yet more to the foundation that would become DHTML. Netscape 3 and Explorer 3 (Late 1996) The Web was moving very quickly. Later in the same year that they had released NN2, Netscape released version 3 of their browser (NN3). Also, Microsoft entered the browser market with their release of the Internet Explorer 3 (IE3) software. For all practical purposes, this was the first commercial version of their browser, the 3rd version designation being intended to indicate their software was on equal footing with NN3. With NN3, Netscape released JavaScript 1.1 and, with IE3, Microsoft released JScript. JScript is a scripting language reasonably similar to JavaScript. Web developers tended to stick to the common subset of JavaScript and

7

JScript, which was adequate for most scripting purposes. NN3 dominated the browser market at this time, and JScript would never really gain it's own identity. The biggest difference between the two Web browsers was that they featured substantially different Browser Objects. Again, Web programmers tended to stick to a common subset of the two Browser Objects to achieve cross-browser compatibility. The commonality between the Browser Object of NN3 and that of NN4 became what the world would come to know as the Browser Object. Figure 2.1 of Section 2 depicts part of the Browser Object. The representation of HTML forms in the Browser Object, as shown in Figure 3.1, became the mainstay for data collection and manipulation in Web browsers. While that capability was present in NN2, NN3 and IE3 featured the robust form manipulation capabilities that are still an integral part of E-commerce data-collection activities today. The Browser Object did, and still does, provide for full manipulation of text fields, checkboxes, radio buttons, pop-up menus, and all the other form elements to which we have grown accustomed. But the Browser Object only allows for a few DHTML effects. The "windowing" effects, most notably the pop-up windows that typically contain advertisements, were inherited by both browsers from NN2. The most notable new addition that NN3 and IE3 added to the visual effects arsenal was rollover graphics. The rollover graphic effect is created when the mouse rolls over (onmouseover) a graphic embedded in a Web page, causing that graphic to be replaced with a different one. When the mouse rolls back off the graphic (onmouseout), the original graphic is substituted back into place. This effect is most commonly used for graphics that are active as hyperlinks in Web pages. The fact that the mouse causes the image to change indicates to the user that the image is, in fact, active as a link. Figure 3.3 shows how a rollover graphic is accomplished. As shown at the top of the figure, two distinct graphic image files are used, smile.gif and frown.gif. When the HTML file is first loaded into the browser, the original image on display is the smiley face. When the user passes the mouse onto the image the onmouseover event handler calls the swap() JavaScript function to "turn on" the rollover. When the mouse passes back off of the graphic, the onmouseout event handler turns the rollover back off by substituting the original smiling image back into place in the browser object. Figure 3.3 depicts three distinct images in the browser window, but the actual DHTML effect swaps the images in and out of the same location. To the user, it simply appears that the image changes.

Figure 3.3 An image rollover in Netscape Navigator 3 Both swaps are accomplished by changing the source of the image in the Browser Object. Figure 3.3 only shows the relevant part of the Browser Object. As specified by the HTML code, the name of the image in the Browser Object is face. When the JavaScript function changes the source of the image, the change is instantaneous from the user's perspective. But for the change to be instantaneous, the graphic that is to replace the one originally on display needs to be downloaded from the Web server at the time the Web page is retrieved. If the replacement graphic is not "pre-loaded" into the browser's memory, then an extra transaction with the Web server at the time the rollover is triggered is necessary to retrieve it. That defeats the purpose of browser-handled interactive effects. The JavaScript code necessary to preload the replacement image is not shown in Figure 3.3.

8

The most prevalent use of rollovers on the Web has been, and continues to be, for navigation tabs and bars. In these situations, there are typically several images that are swapped in and out. It is not uncommon for rollover displays to use 10 or 20 different graphics. Figure 3.4 shows two typical rollover displays. The horizontal navigation bar (nav bar) on the left features several menu tabs. The upper picture shows the menu bar in its initial state, indicating that the user is viewing the home page. The lower picture shows the menu bar when the mouse passes onto the preface tab. When the mouse is moved back off the preface tab to a location not on the nav bar, the display reverts to its initial state. Or, if the mouse is passed onto a different tab, that tab becomes highlighted. When the user actually clicks on a tab, a new page is loaded containing the same nav bar, but the default highlighted tab then corresponds to that page.

Figure 3.4 Typical uses of rollover graphics Such nav bars are often comprised of several images, one for each tab, which fit together seamlessly. The rollover display then requires an active, and a non-active version of each image. Thus, the nav bar on the left of Figure 3.4 would require 12 different graphics, and each rollover action would replace two tabs – make one inactive and one active. Alternately, the whole nav bar could be one graphic. That requires one version of the nav bar for each active tab. That would require only 6 different graphics in Figure 3.4. A rollover action would swap the entire graphic in and out depending upon which tab the mouse passes over. The user would not notice the difference in the display that uses 6 graphics versus the one using 12. The vertical nav bar shown on the right on the right of Figure 3.4 could come from an online tutorial, for example. Such nav bars often just highlight the particular link over which the mouse passes, but this one swaps in arrow graphics pointing to the mouseover link. The central graphic is divided into an image map of different regions, one region for each lesson link. There is a stack of a blank white graphic on either side of the central graphic. This rollover effect does not replace the central graphic when the mouse passes over it, but replaces the white graphic on either side of the mouseover region with an arrow graphic. There are only 4 graphics used to create this rollover display: the central graphic containing the lessons, the blank white image which is replicated in stacks on either side of the central image, and the two arrow graphics which are swapped in for the appropriate white "dummy" images. When the mouse is moved up and down over the different lessons in the central graphic, the arrows move with the mouse creating a simple animation type effect. It is up to the imaginations of Web designers how rollovers can be employed to create novel DHTML effects. At the time of NN3 and IE3, effects such as shown in Figure 3.4 were considered very fancy and sophisticated in Web pages. Multiple rollovers were at the pinnacle of Web page design. This was also the era in which "browser sniffing" was born. Web programmers began to insert JavaScript code into Web pages that would "sniff out" the type of browser that was viewing the page. The properties of the navigator object in the Browser Object, shown in Figure 2.1, contain information about the browser's vendor, its version, and even the platform (Mac, Windows, Unix/Linux) on which it is running. (Ironically, that object is still named navigator, even in current Explorer browsers.) Once the JavaScript code determines the particular browser with which it was dealing, it can get the most out of the particular Browser Object. At this time in Web history, the cross-browser multiple rollover was the effect of choice and was, in fact, the seed that sprouted into DHTML. It is not entirely clear exactly when the term materialized, but it was right around the time that rollover graphics became widely popular. But it is clear that the term proliferated as marketing jargon used by the browser vendors Netscape and Microsoft to tout the dynamic interactive capabilities of their newly released version 4 browsers. Netscape 4 and Explorer 4 (1997) Microsoft and Netscape were desperately locked into the "browser wars" at this time. Netscape was the spark that had ignited the Web, but Microsoft ruled the majority of desktop computing with it's Windows operating system. It was that edge that eventually won that war for Explorer. But at this point in time, the battles still raged on.

9

In efforts to capitalize on the new idea of DHTML, Netscape Navigator 4 (NN4) introduced a new HTML layer element, with which multiple layers of content could be super-imposed in one browser window. In contrast, Internet Explorer 4 (IE4) pushed the use of CSS and the z-index to create multiple layers. Regarding a flat browser window as a two-dimensional x-y coordinate plane, the z-index adds a third dimension. Netscape's HTML layer element also adds a third dimension, but not using CSS. Both layering techniques turned the once "flat" Web page into three-dimensional x-y-z coordinate space. It's not that layers could appear to "pop out" at the user, but one layer could be moved independently of other layers by a JavaScript function as the result of a user event. Such effects are the cornerstone of "modern" DHTML. Prior to layers, a Web page layout was like a picture frame with multiple holes into which pictures could be inserted. The holes were in fixed locations in the page, and one could only swap images of the proper size in and out of a hole. This analogy explains rollover graphics rather well. A layered Web page is more like a stack of loose pictures on table. One can shuffle the pictures around, leaving some partially covered, completely hiding some, and revealing others that were not previously visible. A picture can move in its own layer, independently of pictures in other layers. Hiding, revealing, and moving layers is the basis for much of "modern" DHTML. But due to the radically different DHTML implementations by the two browsers, "modern" DHTML was largely a lost cause in this era. Industrious Web designers constructed rather elaborate JavaScripts to sniff out browsers in order to move layers in both implementations. But the majority of Web sites stuck to rollover graphics. Indeed, the Web had moved quickly in terms of browser versions, and a significant portion of the Web still used version 3 browsers. Most any Web site wanted their pages to work properly in everyone's browser. Many sites even avoided rollover graphics in this era because they wanted to sell products to those still using NN2. It turns out that CSS and the z-index used for layers would be the future of DHTML, even though it was largely a lost cause during this stage of the evolution of the Web. Cascading Style Sheets, which add to HTML the ability to exactly control the markup of Web pages, enables advanced page layout and many new and exciting DHTML effects. CSS is fully supported (for the most part) by Modern Web browsers. That includes IE5+, NN6+ (a NN5 version was never released), and Opera 4+, which is a Browser gaining popularity in Europe. These browsers are compatible (again, for the most part) due to the emergence of accepted international standards for Web technologies. 4 The Standardization of DHTML While it's not well-defined as a distinct technology, DHTML has become predictable because the technologies of which it is comprised have been internationally standardized. DHTML's aggregate technologies became uniform international standards beginning around 1998. The standards continue to evolve, but the following core standards on which DHTML is currently based are stable and widely supported by modern Web browsers (NN6+, IE5+, and Opera 4+). HTML 4.01 – This World Wide Web Consortium (W3C) standard has been stable since 1999. One goal of HTML 4.01 was to keep the language small, relegating many Web page formatting tasks to CSS. (See [10], [4], [5], [6]) CSS Level 1 -- This World Wide Web Consortium (W3C) standard has been stable since its revision in 1999. The main goals of CSS are to provide for elaborate formatting potential for Web pages, and to keep rules for how a Web page should look separate from the data that comprises the Web page. Most "modern" DHTML effects are created by changing style properties after the Web page is fully loaded. (See [9], [7]) ECMA Script – This standard, approved by ISO/IEC (International Organization for Standardization/International Electrotechnical Commission), has been stable since 1999. It is usually called JavaScript, and is based mostly upon JavaScript 1.1. It does contain some features from JScript. (See [2], [3], [6]) DOM -- The Document Object Model (DOM) is a standardized API (Application Programming Interface) that exposes an electronic document's logical structure to programming languages. This is a World Wide Web Consortium (W3C) standard, most of it being stable since1998, the rest since 2001. Different levels of the DOM specification are relevant to DHTML. (See [11], [12], [6])

10

DOM Level 0 (DOM0) – DOM0 is implicitly defined as the common subset of the Browser Objects of NN3 and IE3. DOM0 is the Browser Object that has been used for all DHTML examples so far in this article. This is the API used ubiquitously for manipulating HTML forms and creating older DHTML effects such as window manipulation and rollover graphics. DOM Levels 1 and 2 (just DOM) – Exposes the complete logical structure of a document to a programming language. DOM is quite general and is used to expose XML (eXtensible Markup Language) documents to various programming languages (JavaScript, Java, Perl, C++, etc.). The DOM is used for an API in many applications, not just Web browsers. A specialized subset, called HTML DOM, is geared for HTML, JavaScript, and Web browsers. HTML DOM is backwards compatible with DOM0, meaning that the Browser Object is a "subset" of the HTML DOM. HTML DOM adds the ability to manipulate CSS properties in a Web page using JavaScript.

5 Modern DHTML DOM0, the Browser Object, is sufficient for things like manipulating windows, HTML forms, and creating rollover images. Expanding upon DOM0, HTML DOM exposes CSS style properties to JavaScript, and features "tree traversal" methods used to access HTML elements. Traversing an object tree2 can be done using full reference through the hierarchy. For example, the long DOM0 references used in Figures 3.1 and 3.3 are shown below. window.document.images['imageName'].src window.document.calcForm.result.value In DOMO, objects like forms and images are found at predictable locations in the object tree, so accessing them using full object reference is not a problem. However, the HTML span and div elements, which are generic containers that allow CSS styles to be applied to specific parts of Web pages, can be nested unpredictably in HTML documents. That means that it is more difficult to find such objects in the DOM tree using full reference from the tree's root. The HTML DOM allows an HTML element, such as span or div, to be assigned unique ID (identification). Then an element can be directly "plucked out" of the DOM object tree, regardless of its location within the hierarchy, using it's unique ID. For example, suppose an HTML document contains a block division that is used to apply a CSS style class named myStyles. <div class="myStyles" id="block1">content of block </div> Regardless of where the div element appears in the HTML document, hence regardless of how "deep" it may be in the DOM hierarchy, HTML DOM allows it to be accessed directly. document.getElementById("block1") Once accessed in a script, the CSS style properties of the block can be changed to create DHTML effects. But note that using the HTML DOM to access styles in this way is only viable in the most current browsers (i.e. version 6+ of NN and IE). Three simple DHTML effects can be used to explain many of the most useful effects. Those simple effects are changing the appearance of an object, moving an object on the screen, and changing its visibility status. A simple appearance change is demonstrated in Figure 5.1. The menu is created from three div blocks, each assigned the yellow style class. That class features black text on a yellow background. When the mouse passes onto one of the blocks, onmousover calls a JavaScript function which changes the style class of that particular block to the blue class. The blue class features white text on a blue background. When the mouse passes back off of the block, onmouseout again calls the function, which changes the block's style class back to its original yellow class. Figure 5.1 shows both the onmouseover and onmouseout states of the menu. In appearance, this effect is quite similar to that created by rollover graphics.

2 Hierarchical structures such as the Browser Object and the DOM are often called trees. In the Browser Object, window is

the root of the tree, and the branches extend from there.

11

Figure 5.1 Changing CSS classes Figure 5.2 demonstrates the dynamic effect of changing the visibility status of each of two div blocks. The example also demonstrates layering with the CSS z-index. When this page first loads, only the main menu appears in the browser window. The styles for the other two blocks, block1 and block2, are set so that those blocks are not visible when the page first loads. When the mouse passes over the "show 1" span of the main menu, onmouseover calls a JavaScript function which causes block1 to become visible. Since block1 has a z-index of 0, it is partially obscured by the menu block, whose z-index is 1. The blocks are positioned absolutely on the page in such a way that the layering is evident due to the overlap of the blocks.

Figure 5.2 Changing CSS visibility properties When the mouse passes back off of "show 1," onmouseout calls a function causing block1 to become hidden again. Similarly, passing the mouse onto "show 2" causes block2 to become visible. But block2 partially obscures the menu block since its z-index is 2.

12

One common DHTML effect enabled by layering and visibility control is pop-up text. Figure 5.3 shows a hyperlink with extra text support that pops up when the mouse passes over the link. When the mouse passes back off the link, the pop-up text disappears. Moreover, as shown by the two right-most pictures of the link, the location of the popup text block depends upon the location at which the mouse passes onto the link. That technique involves "capturing" the exact position of the mouse on the screen at the time of the onmouseover event. The JavaScript code for that is much too involved to show here.

Figure 5.3 A Hyperlink with pop-up text There are at least two ways the pop-up box shown in Figure 5.3 can be accomplished. First, the block can be toggled back and forth between a z-index which is below the main content layer of the Web page and one that places it above the main content layer. Second, the most common method, is simply to change the visibility status of the popup block depending upon whether the mouse is over the link or not. A given Web page may have many blocks which are not initially visible, either because of layering or visibility status, that pop up upon user events. Going beyond text which merely supports navigation, entire navigation menus can be caused to pop up upon user events. Those menus can themselves contain navigation links. Figure 5.4 demonstrates that effect. When the user passes the mouse over (or clicks on) one of the menu tabs at the top of the Web page, a menu appears. The user can then select a link from the menu to follow. If they chose not to follow a link in the menu, passing the mouse off of the pop-up menu causes it to disappear. In functionality, this DHTML effect is similar to the drop-down menu's provided by most software in a windows environment.

Figure 5.4 Pop-up Navigation Menus Figure 5.5 demonstrates the movement of blocks using DHTML. When the page first loads, there is one yellow div block absolutely positioned on the page in the upper left corner of the browser window. Clicking on the block invokes a JavaScript function that adds 10 onto the y-coordinate of the block and 50 onto the x-coordinate. When those new coordinates are assigned to the appropriate style properties of the block, its position on the screen moves instantaneously. Figure 5.5 shows the original block position and then its position after two movements caused by mouse clicks.

13

Figure 5.5 Moving Objects using DHTML All the code aside, the concept demonstrated in Figure 5.5 is quite simple. A user event calls a JavaScript function which moves a block by a certain increment. A sequence of events, in this case mouse clicks, causes a sequence of movements. It is possible that one user event triggers an entire animation. This is accomplished when the function that causes the incremental movement is called repetitively in an automated fashion. The function below, given in pseudo code3, demonstrates how that works. function moveBlock() { move the block by some increment if (the block should move again ) { setTimeout("moveBlock()", 100) } } Again, the concept is fairly straight-forward. Some event calls the moveBlock() function, which moves an object by some small increment. If the block is still supposed to be moving (i.e. the condition that stops the movement has not been met), then the same function is automatically called after a timeout. Here the timeout is 100 milliseconds (one tenth of a second). The "speed" of the animation is determined by the timeout delay. When the movement increment is small and the timeout is relatively short, the repetitive function calls cause repetitive incremental movements of the object, thereby creating an animation which appears continuous on the screen. Figure 5.6 shows a practical application of DHTML animation. When the page first loads, all that the user sees is a Web page with a menu tab protruding from the upper-left corner. A mouse click on the menu tab triggers a JavaScript function which repeatedly calls itself using a timeout. The menu then moves relatively quickly onto the screen until the condition of the left-most portion of the menu reaching the edge of the window stops the animation. Re-clicking on the menu tab causes the menu to recede off of the screen in a similar fashion. In a regular sized Web page, that tab might be only be an inch or two (3 to 5 cm.) tall, and would not dominate the Web page as it does in this illustration.

3 Pseudo Code is programming code meant to illustrate the logic of a programming construct, rather than being real, executable

code.

14

Figure 5.6 A sliding menu Many DHTML effects are not so practical, and are intended for show. One such example utilizes layers to create a rather novel effect. The page shown in Figure 5.7 features black text on a black background. Hence, no text is visible without help. The page background has a z-index of 0, and the text in the page has a z-index of 2. The help comes from a white graphic, whose z-index is 1, and which follows the mouse. As the mouse moves closer to the text in the page, the white graphic moves under the black text (z-index 2), but over the black background (z-index 0). Thus, the text becomes visible to the extent that the white graphic has passed under it.

Figure 5.7 Following the mouse Many DHTML effects that feature things following the mouse around the screen are much more elaborate than shown in Figure 5.7. However, the basic principle is the same. Upon each onmousemove event, the on-screen coordinates of that move are captured from the DOM using a JavaScript function. Then, the function updates the coordinates of the object(s) following the mouse to reflect that movement. Mouse-following effects are not often used in practice since such movements often distract and annoy the user, more so than amusing them or providing added functionality to the Web site. Many DHTML scripts can be downloaded for free on sites like [1] and [14]. Some are relatively simple and, upon carefully reading the instructions provided, can easily be adapted to fit specialized needs. Others are extremely elaborate. Those can be used as is, but would require a knowledgeable programmer to modify. Some are very practical like navigation menu's, but many are just novelties as shown in Figure 5.7. In the end, the possible DHTML effects in Web pages are only limited by the imaginations of Web programmers. 6 The Future of DHTML As of 2002, when this article was written, the "modern" DHTML effects described in Section 5 were just starting to see widespread use on major commercial sites. Major sites can't afford to lose business when their pages don't work properly in everyone's browser. Thus, content development usually lags at least one browser version behind the most current ones. The technologies might evolve fairly quickly, but widespread implementation is contingent upon the diminishing market share of older Web browsers. One CSS feature that bodes well for the future prospects of DHTML is the pseudo style class, the most notable being the hover pseudo-class for hyperlinks. The hover pseudo-class features a built-in onmouseover event handler that changes the style properties of the hyperlink to those specified by the hover pseudo-class when the mouse passes over the link. This DHTML effect uses no JavaScript whatsoever. Figure 6.1 demonstrates two hover links. This effect is viable in version 5+ browsers.

15

Figure 6.1 CSS hover links The hyperlink on the left is initially not underlined. When the mouse passes over the link, its CSS properties are automatically changed to a hover pseudo-class, which specifies underlined text. In contrast, the hyperlink on the right is initially underlined. When the mouse passes over that link, it's hover pseudo-class causes it to become rendered as white text on a black background. It is possible that future revisions of the CSS standard will include more pseudo-classes that feature built-in event handling and interactivity. It is also possible the Web browser vendors will extend the hover pseudo-class to other HTML elements besides the anchor element, which creates hyperlinks. For example, if an automated hover pseudo-class could be assigned to a generic div container, the DHTML effect shown in Figure 5.1 could be accomplished without using JavaScript. When software vendors implement practical innovations, the World Wide Web Consortium (W3C) is often not far behind in creating an international standard, provided that standardization is warranted. The Scalable Vector Graphics (SVG) W3C recommendation [13] of 2001 also bodes well for the future of dynamic effects in Web browsers. Scalable vector graphics are like those that can be created using the "draw" utility of word processing software. Also, they have become a staple layout feature for software like Microsoft's PowerPoint. These easily created and manipulated graphics soon will be viable in Web pages. The SGV recommendation features DOM access and a JavaScript binding that will allow DHTML style effects using vector graphics. Of course, it will take several years before major Web sites employ such technology. DHTML will likely take on a whole new look by the time version 6 browsers are considered outdated. 7 Conclusion Some definitions of DHTML regard it as including only the modern, CSS-enabled effects as demonstrated in Section 5. Indeed, the term DHTML was invented around the time that HTML DOM first enabled those more elaborate effects. However, when defining DHTML in terms of what it accomplishes and how it is implemented, rather than just as a marketing term used to tout new features added by browser vendors, the term inherits more breadth and scope. DHTML effects are implemented when JavaScript code, usually called in a function as the result of a user event, changes the state of the Web browser's in-memory object representation of the Web page. Changing the state of the browser's object, whether DOM0 or HTML DOM, changes the Web page rendition. Under this general definition, common effects enabled by DHTML include browser window manipulation, image rollovers, hidden layers that pup up, and objects that move in Web pages. Technically, the manipulation of data in HTML forms fulfills the general definition of DHTML, but that capability is usually classified as client-side data processing in Web browsers. DHTML should not be confused with embedded technologies such as Java Applets and Flash. Those technologies require helper applications, usually called browser plugins, in order to execute in Web browsers. These technologies are much more powerful than DHTML, but they use more resources on the client computer, and may even require intermittent or continuous interaction with the Web server. DHTML is, and will continue to be, favored for adding fast and efficient interactive capabilities to Web pages. For Web developers who do not wish to write customized JavaScript code or develop highly customized DHTML effects, numerous Web sites offer free DHTML scripts and tutorials on how to use them. Moreover, many software packages automatically create DHTML effects in a visual environment. Macromedia's Dreamweaver and Fireworks are the two most notable applications with that capability. Adobe's GoLive is also worth mentioning. But such software often generates cumbersome and inefficient JavaScript code. Worse yet, proprietary software often generates code that is not browser neutral. Nonetheless, DHTML-creating software allows inexperienced Web developers to quickly create interactive DHTML-enabled Web pages. Bibliography [1] Dynamic Drive. http://www.dynamicdrive.com [2] ECMAScript 262 Standard. http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM [3] Gosselin D. (2000). Comprehensive JavaScript. Course Technology, Boston, MA.

16

[4] Graham, I.S. (1998). HTML 4.0 Sourcebook. John Wiley & Sons, New York, NY. [5] Graham, I.S. (2000). XHTML 1.0 Language and Design Sourcebook. John Wiley & Sons, New York, NY. [6] Knuckles, C. (2001). Introduction to Interactive Programming on the Internet. John Wiley & Sons, New York, NY. [7] Sklar J. (2001). Designing Web Pages with Cascading Style Sheets. Course Technology, Boston, MA. [8] Teague, J.C. (2001). DHTML and CSS For the World Wide Web. Peachpit Press, Berkely, CA. [9] W3C CSS Level 1 Recommendation. http://www.w3.org/TR/REC-CSS1 [10] W3C HTML 4.01 Recommendation. http://www.w3.org/TR/html4 [11] W3C HTML DOM Recommendation. http://www.w3.org/TR/DOM-Level-2-HTML [12] W3C HTML DOM CORE Recommendation. http://www.w3.org/TR/DOM-Level-2-Core [13] W3C Scalable Vector Graphics Recommendation. http://www.w3.org/TR/SVG [14] Web site for [8]. http://www.webbedenvironments.com/dhtml