Last Modified: 12/9/98
 [Previous] [Home] [Next]

JavaScript and DHTML


Credit: J. Trauger (JPL/NASA)

What is DHTML?

DHTML stands for "Dynamic HTML". It is currently a leading edge development and, as such, suffers from a lack of standards and very different implementations. Its goal is to allow you to manipulate every element of an HTML page though script languages, such as JavaScript.

The coming standard HTML 4.0 should solidify the standards so that the differences between browsers are not so large and the elements are stable. HTML used to be a very simple language, but no longer: the reference guide for HTML in one publication is now 670 pages long.

Browser Differences

The differences between Netscape 4 and IE 4 are relatively modest until you use DHTML, in which case the differences are profound. IE 4 is far more DHTML capable than Netscape 4 and IE 4 is much closer to the emerging standards of HTML 4.0. If you write DHTML for Netscape you can usually (with some difficulty) convert it to IE 4, but going the other way around is almost hopeless as there are so many elements in IE 4 that have no counterpart in Netscape.

There are several ways to write DHTML that is compatible with both browsers:

  • You can use the "Navigator" object to detect the type of browser and then branch to different pages depending on which browser and version it is
  • You can switch to different sections within a page depending on which browser it is
  • You can develop an applications interface (API) which fields generic calls and then selects the implemntation based on which browser has been selected. Here is a snippet of code taken "Dynamic HTML" by Danny Goodman which does this.
Because IE 4 is much more developed in this area and is much closer to the emerging standard, we will only show DHTML for IE 4.

DHTML Concepts

The main concepts you need to learn for DHTML are Style Sheets, named grouping elements, and DHTML references

Style Sheets

Style sheets let you define a set of characteristics for a group of HTML elements, such as color, font, position, and visibility. There are a large number of style sheet elements, a number of ways of incorporating Style Sheets, and a huge number of ways of applying them. For our purposes we will confine Style Sheets to the format and content as shown in the following example: 

<HTML>
<HEAD>
  <STYLE TYPE="text/css">
    #imageA {position:absolute; left:50;  
       top:150; width:120; z-index:100}
    #mytext {border:solid blue 5 px; 
       color:green; background-color:coral}
    #otherImage {position:absolute; 
       visibility:hidden}
  </STYLE>
</HEAD>
. . .
</HTML>

Grouping Elements

Like Style Sheets, there are inumerable ways to define and manipulate groups of elements, but for our purpose we will confine our choice to two: the DIV and the SPAN elements. DIV surrounds a complete set of elements (images, text, bullet lists, etc. and any combination of such) and gives it a name so the set can be manipulated as a whole. SPAN lets us delineate any section of the page, even inside a single element. Examples include: 

. . .
<DIV NAME=my_text >
   Now is the time for all good men to come
   to the aid of their party.
   <IMG SRC="my.gif" >
</DIV >

Here is <SPAN ID=brash>very bold</SPAN> text
DHTML References

The last crucial step in using DHTML through JavaScript is knowing how to reference objects and events. The following table contains the few that we need to know for the examples that follow (in the table the term "obj" or "object" means the name of a specific object and not the literal word "object"): 

window.event.srcElement  =obj activated by event
obj.parentElement.style  =container of object
window.event.clientX [Y] =coord of event wrt window
window.event.offsetX [Y] =coord wrt container
obj.pixelLeft            =left pixel coord of obj
obj.pixelTop             =top pixel coord of object
document.all.obj.style   =the css part of object
document.onmousedown     =fcn when mouse is down
document.onmousemove     =fcn when mouse moves
document.onmouseup       =fcn when mouse is up
For example,
  • var my_image = window.event.srcElement
    If an event occurs, such as a mouse passing over an image or a piece of text, this returns the object activated by the event, for a GIF image.
  • obj = my_image.parentElement.style
    This returns the container of the object activated by the event. For example, if a GIF image named "my_image" is contained in a DIV element with an ID = XYZ, then a pointer to XYZ is returned by this command.
  • if (obj == document.all.imageA.style)
    dbg.document.write(" Selected Container for imageA)
    This tests to see if "obj" is "document.all.imageA".
Examples of DHTML


Class Topics

Client-Side JavaScript

JavaScript as a Programming Language

Execution of JavaScript

"JavaScript" Document Object Model

Programming with JavaScript

Using Cookies in JavaScript

Using JavaScript to Write HTML

JavaScript and DHTML

JavaScript and CGI

Homework Assignments

References:   Dynamic HTML by Danny Goodman

©1998 UW Computing & Communications

[Previous] [Home] [Next]