Beyond HTML

One of the most desired feature of the Web is that

it should be highly interactive. Unfortunat-ely, the language that the Web is made up of,

the Hyper Text Markup Language (HTML), now in version 4.0, produces an extremely static

output. The client (in this case your Web browser), simply reads the HTML file from the

Web server, and formats the information according to the tags placed in it. However, HTML

is not easy to manipulate due to the large number of tags available. Plus there is no

standard model by which program-mers can access parts of the document. size="2">

This is where the Document Object Model or DOM comes in. DOM lets

Web authors manipulate parts of the HTML document by accessing these parts as objects

within the document. It’s not a new concept, and in fact has been around from the

time of IE 3 and Netscape 3, although in a more primitive state. The standard has been

defined by the World Wide Web Consortium (W3C). To recognize the DOM in IE 3 and NS 3, the

W3C have designated it as DOM Level 0. The next version of the DOM was DOM Level 1, which

was released last year. Currently, a working draft for DOM Level 2 has been released.

To understand the DOM concept, let’s take an example. Take the

code of a simple Web page that just contains a button as follows:

onClick="getTitle();">

This specifies the following for the DOM of the page:

The getTitle() event handler is not part of the DOM. It’s a

custom function (which we will define later) that uses the DOM to manipulate HTML objects.

Each and every object in the HTML specification has a number of

prope-rties and events defined for it. But do you need to explicitly define each of these

for every object that you have on your page? No, of course not. Most of these have some

default behavior associated with them. As an example, you don’t have to define what

happens when you click a tag. The browser automatically transports you

to the specified location. Or when you click the Submit button on a form, it’s

automatically sent to the form processing page. However, if you wish to override these

defaults, you can easily do so. This is by specifying the property within the angle braces

or associating a custom event handler with an event (as in the case of the button above).

By using these custom properties and event handlers, you can achieve Dynamic HTML. Dynamic HTML COLOR="#000000" size="2">

Before I get into how and what DHTML

is, there are a couple of more concepts in the DOM that you should understand. These

concepts involve how the browser processes an event. The first one, called Event

Capturing, is popular in Netscape browsers. In this, the event is captured and passed to

the highest-level block element in the DOM. This is the element that completely encloses

the element, which actually received the event. That is, if you have an image within an

anchor tag (), and if there is an event

like mouse-move detected over both, it’ll be passed to the highest level present,

which is the anchor (A). Now this may seem logical at first, till you realize that the IMG

will never receive any event anytime! So any event handler you write must be processed in

the tag even if it’s meant for the . You can see this in the

classic Image Rollover effect (where moving your mouse over an image quickly changes it to

another one for a nice special effect) that has become so po size="2">pular everywhere.

The other method exists in IE 4 and above and is included in the

working draft of DOM 2. This is called Event Bubbling and means that the event is captured

at the lowest level and bubbles up through its ancestors right up to the top. This means

that you can process events for any element on the page and have common parts spread out

to the higher level elements. Try out this piece in IE 4 and Communicator 4x and see the

difference. Put it in an HTML file and click the button.

In IE 4, you get messages from both the event handlers. This way you

can achieve a lot of code reuse, by putting parts into a common ancestor for multiple

elements. In case you don’t want this to happen, simply add the line

window.event.cancelBubble= true to the end of the script like this:

value="Button" id=button1 name=button1 onclick="alert(‘Button

clicked’); window.event.cancelBubble=true;">.

This will disable the event "bubbling" up the DOM to the

parent element with an event handler (in this case the

).

Now that you know the fundamentals of the DOM, let’s get into

DHTML. As the name suggests, DHTML lets you change the look or the content of the Web page

without requiring a round trip back to the server. What this means is that the whole Web

page doesn’t have to be downloaded again. You can change the properties of an

existing element, add or remove elements or change the content of elements by using script

bound to events on which you wish these changes to occur. The scripts can be in any

scripting language that your browser or OS supports. Netscape uses JavaScript and IE can

use both JavaScript and VBScript. If you install a third party engine, like PerlScript,

you can use that too, but note that the scripts you write may be visible to you only as

the engine will not be installed on other client machines.

Retrieving or changing the property of an element in the document is

very simple. To demonstrate this, here are a few samples, which are in JavaScript but can

be easily converted to VBScript if you wish. Using the sample page, Example 1, given

earlier, let us write a small script that displays the Title of the document and then

changes it. Add the following lines in the section:

Clicking the button now will bring up a box with the current title

(Example 1). Closing this box with execute the next line which modifies the title of the

document and places it in the browser window title bar. So with a script in the page, you

were able to change the property of the document itself. You can even change the

properties of the element that triggered the event. Replace the second line of script with

window.MyButton.value="Clicked!!!"; size="2">

This line specifies that you wish to change the value property of

the element with ID MyButton, which is displayed in the browser window (the BODY of the

HTML document). Clicking the button now will change the text of the button to

"Clicked!!!".

DHTML has a number of events and objects that are either not

explicitly defined on the Web page or get defined at runtime. For example, the screen

object contains information about the screen resolution the client is working at. You can

use it to dynamically resize the content of your page to optimize for that resolution.

Certain properties like innerHTML, outerHTML, innerText and OuterText allow you to

actually change the content of the page. You can use these to actually change the textual

or HTML content of a page already loaded. You can also manipulate cascading style sheet

(CSS) properties like visible or hidden to show and hide elements according to some event,

leading to some nice features on your Website.

Of course, the scripts shown in this article are quite simple.

It’s easy to create things like the image rollover effect, dynamic calculator, and

analog clock, all by using DHTML. One of the most impressive uses of pure DHTML is the

implementation of the classic "Asteroids" game on a Web page. This is playable

at www.microsoft.com/windows/ie/ie40/demos/asteroids.htm. Although it doesn’t seem

possible even now, in future, we might end up playing games like Quake or Unreal through a

Web browser that simply downloads a DHTML Web page.