I’m going to start with some heresy: There is no Dynamic HyperText Markup Language (DHTML) recommendation published by the World Wide Web Consortium, nor is one likely to be published in the foreseeable future. Because of the lack of documentation and standardization, DHTML is basically a buzzword covering a variety of technologies, including Cascading Style Sheets (CSS), JavaScript, and the Document Object Model (DOM).

DHTML uses those technologies to dynamically modify the rendering and content without either reloading the current page or loading a different page. The specifics of which technologies can be implemented depend on the requirements of your audience and cross-browser support. For example, if the client’s browser is Microsoft Internet Explorer, then VBScript, ActiveX, and data source objects can be included in the mix, but doing so means the loss of cross-browser support.

In this article, I will examine the main technologies behind DHTML and explain how they work together.

HTML events
Event handlers provide a mechanism to drive page behavior after the browser completes a particular action. For example, when the page loads, a JavaScript is invoked and a particular behavior is enacted. Event handlers provide a way to kick off JavaScript code when an event occurs by associating JavaScript, either a function or a line of code, with an event handler for an element in the HTML document. For example, coding <body onload=”JavaScript:xyzzy()”> causes the JavaScript function xyzzy() to be invoked when the document has finished loading. Table A shows some of the common browser-handled events.
Table A


Event
Fired
onAbort When image load is interrupted
onBeforeUpload Before the onUnload event (IE only)
onBlur When object loses focus
onChange When object’s value is changed and object loses focus
onClick When object is clicked once
onDblClick When object is clicked twice
onError When error occurs on image load
onFocus When object receives focus
onKeyDown When a keyboard key is pressed
onKeyPress When a keyboard key is pressed and released (combination of onKeyDown and onKeyUp events); useful in handling multiple key combinations
onKeyUp When a keyboard key is released
onLoad When an image or document has completed loading
onMouseDown When a mouse button has been pressed
onMouseOut When the mouse pointer moves off of the object
onMouseOver When the mouse pointer moves over the object
onMouseUp When a mouse button has been released
onReset When a form reset is requested
onResize When the browser window is resized
onSubmit When a form submit is requested
onUpload When a document is unloaded

Event handlers

JavaScript
Whether it is called JavaScript, Jscript, or ECMAScript, it is the most common language used today for client-side scripting. The reasons for this are numerous, but the main reason is that JavaScript comes with virtually every browser. JavaScript provides a way to handle the events produced by HTML. For example, an onload event could execute a JavaScript function to query the browser’s cookies collection to determine whether the user is a first-time visitor to the page. Of course, this works only if the client hasn’t cleaned out the cookies since the last visit.

CSS
CSS is a way to associate style (display) rules with the various elements that make up an HTML document. Because CSS rules can be modified at both the document and the element level using JavaScript with event handlers, they can add a significant amount of dynamism with very little code.

An input button is a good example of how CSS can be coupled with JavaScript. Consider the following HTML:
<input name=”btnGet” type=”button” value=”Submit” />

By itself, it produces an HTML button. But add onmouseover and onmouseout event handlers, as show below, and the input button has gone from HTML to DHTML through the use of a simple mouse event:
<input name=”btnGet” type=”button” onmouseover=”JavaScript:this.style.color = ‘#FF0000′” onmouseout=”JavaScript:this.style.color = ‘#000000′” value=”Submit” />

The DOM
Because of the ways that the various browsers implemented the World Wide Web Consortium’s Document Object Model Level 1 specification, the DOM is the weakest link in DHTML. Nevertheless, it represents a vast improvement over the past, when each browser did not consistently support DOM functionality. With care, you can now create pages without having to determine which browser the client is running—although for certain cross-browser applications, you still must check browsers. Listing A shows a DHTML page that works on Microsoft Internet Explorer 6.0, Mozilla, and Opera.

More DHTML
DHTML can add some powerful dynamic features to your pages, but it can be a pain to implement—especially if you have to support multiple browsers and their respective versions. But by effectively implementing JavaScript, DOM, and CSS, you can make your pages come alive for visitors.