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.