Markup languages, such as HTML, DHTML, HTML4.0, XML, XSL, and CSS
(Cascading Style Sheets)
have a major effect on the role of web
languages (see this for details).
As these markup languages develop they give more and more power
to the client side web languages, such as JavaScript and Java. We can
roughly characterize each markup language as follows:
DHTML
Here is a more complete description of 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/5/6 are relatively modest
until you use DHTML, in which case the differences are profound. IE 4/5/6 are
far more DHTML capable than Netscape 4 and IE 4/5/6 are 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/5/6, but going the other way
around is almost hopeless as there are so many elements in IE 4/5/6 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 implementation based on
which browser has been selected. Here is a
snippet
of code taken
"Dynamic HTML" by Danny Goodman that does this.
Because Internet Explorer (IE) is much more developed in this area and is
much closer to the emerging standard, we will only show DHTML for IE.
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 innumerable 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
|
|
 |
|
|
