DHTML stands for Dynamic HyperText Markup Language, a term describing the combined use of HTML, style sheets and scripts to change documents while they're being displayed. In this document
none of these components will be covered in any depth, though some annotated examples will be provided. First, a few reminders about some key concepts.
HTML - HyperText Markup Language. The formatting language used on web pages. Recent versions offer more support for DHTML.
DOM - Document Object Model. The way that objects on a web page are grouped and given names so that programs can manipulate them using a set of routines. The internal representation is hierarchical - the document contains objects (e.g. forms) which in turn can contain objects (e.g. buttons)
Client-side scripting - code (e.g. javascript) supplied on a web page and given to the browser to run. The alternative is server-side scripting (e.g. PHP), where the code is run on the web server before the resulting HTML is sent to the browser. The advantage of client-side scripting is that you don't need any special facilities on the web server. The disadvantage is that users can deliberately disable their browser's javascript, and browsers may be buggy or old.
Javascript - a language mostly used to make web pages
interactive, though it can used elsewhere than on HTML pages, and HTML pages can use
other languages than Javascript. It's a scripting language - it doesn't need to be compiled.
More about HTML
Before using javascript you need to be conversant with HTML.
If you're going to change something, you need to be able to specify what to change and when it will change. Objects created by HTML can be given names, and can be of various types. Objects also have properties (like color, etc). These properties can be used on static web pages and stylesheets to control appearance. Each type of object has a set of valid properties. See our HTML4 page for more details. 2 properties not often used in static HTML files are id and display, both of which we'll use later
id -
<p id=example1 style="color:red;">Hello</p> produces
Hello
a paragraph whose default color is red and whose identification string is "example1". The identification string should be unique in a document. If you want
many objects to belong to the same category, you can use "class" instead of "id".
display - describes the structural and visual nature of the object. It can
take several values, including
block - Example: paragraphs.
inline - Example: a word in italics. inline elements can go inside blocks, but blocks can't go into inline elements.
none - Invisible
"" - default
There are ways to group objects together so that they can in some way be treated as a single entity
SPAN is an inline element, so it may be used just as elements such as STRONG in HTML. There are some examples later
DIV is similar to SPAN except that DIV (short for "division") is a block-level element. DIV may contain paragraphs, headings, tables, and even other divisions.
Objects also have properties to control position. For example,
which should be 100 pixels further right and 30 pixels further up than usual.
There's another type of property that's more to do with interaction. Buttons, for
example, have an onclickevent handler property so that you can call a particular function when the button is pressed.
Combining Javascript and HTML
No attempt will be made here to describe Javascript. If you know C++ or
Java you know enough about programming to understand the fragments here.
The javascript code goes inside a SCRIPT
tag. If you look at the source of this page using the browser menu's "Page Source" or "Show code" option you'll see the code for this page.
Javascript offers a way to access the components of the page and change their properties
(their color, position, etc).
You can ask for a list of all the components, or pick them out by type or by name. Note however, that the HTML names for the
properties aren't quite the same as those used by Javascript. For example,
HTML's margin-left would cause Javascript trouble because the '-'
would be treated as a minus sign. The Javascript equivalent is marginLeft
The following <h3> header has onmousemove and onmouseout properties set.
<h3 id="header2" onmousemove="changecolor()" ..
The changecolor() routine first finds the object with the identifier "header2",
then changes some of its properties
Move the pointer over this h3 header to change color
The onclick property of the next header calls a function that sets the
header's display property to none using a similar idea to that of the previous example.
Click on this text to remove it
The next button's routines change the text.
. Look at the touchytext routine in the head of this page for details.
Counting objects and writing HTML code
The document has a structure that javascript routines can discover. It's easy to
list elements of a particular type. The line
var nodes = document.getElementsByTagName('h2')
finds out all the h2 objects and puts them into an array called nodes.
You can loop through these nodes to find out more about each of them. The number of
nodes is provided by nodes.length.
A routine called document.write writes a string to the current page. If you call it while a page is being created, it generates text "on-the-fly". For example,
the following code (which is in the head of this page)
function headcount() {
var nodes = document.getElementsByTagName('h2')
document.write('There are ' + nodes.length + ' h2 headers in this document so far');
}
is called at this point of the document by using this code
<script>
headcount()
</script>
The output is -
Controlling the appearance and visibility of objects
Try clicking on these buttons
to change
some C++ text and some Java text followed by even more C++ text
The code for the start of the affected text has "<span class=Cplusplus> some C++ text</span>" which makes the spanned text belong to the Cplusplus class. The Emphasise C++ button calls a Javascript routine that makes all Cplusplus objects bold, and all Java objects grey.
The code to create the button is
The changeClassStyle code that's called is rather long, but it can be adapted without having
to be fully understood.
function changeClassStyle(el,fw,fs,clr,dis){
if(document.getElementsByTagName)//check for obj
{
var nodes = document.getElementsByTagName('span')
var max = nodes.length
for(var i = 0;i < max;i++)
{
var nodeObj = nodes.item(i);
if(nodeObj.className== el) {
nodeObj.style.fontWeight = fw;
nodeObj.style.fontStyle = fs;
nodeObj.style.color = clr;
nodeObj.style.display =dis;
}
}
}
}
For those familiar with computing languages, this shouldn't be too
bewildering.
The first line names the function, which has 5 arguments.
Whereas in the previous example we used getElementById
to find the element that had a particular name, here we use getElementsByTagName to get all the document's span objects (you can use the same idea to pick out all the img objects etc). For each span object it then checks the className. If that matches the requested class, then the properties are changed to what the user requested.
Text-wrapping
floating right floating left
An object's float property determines how it fits into the layout. By default it's set to none. Alternatives are right or left (used for the panels in this paragraph). Text by a float element will start beside the element then continue underneath. Note that the panels here have been given margins and some visible borders.
Animation
The position and background image of objects can be changed. Objects also
have a clipping property which controls how much of the image is visible.
You can control the animation with a for loop or set it running
using javascript's setInterval routine, which repeatedly runs a
routine of your choice at an interval you choose. Over-use of this facility
may irritate users, but since no javascript introduction would be complete
without some animation, here's a button that moves when clicked on -
It uses a routine called moveme in the
HEAD section of this page to change the button's x coordinate. The
button's position property has been set to relative. If it's
left as the default static then the object won't move.
You can also obscure one object with another, then reveal the underlying
object. Try clicking on the temple below
Non-document Properties available using Javascript
The javascript language offers access to other information that might be of use.
The following button when clicked on will show the page with the link that led to this page
And here some information about your browser is printed using document.write to print the values of navigator.appName and navigator.appVersion
Debugging
If you write pages with javascript, mistakes aren't always easy to find because
error messages aren't displayed. Some browsers offer help. Firefox for example
has a Toolsmenu with helpful options including a DOM Inspector
If you have Firefox 3 you can add Firebug to help you diagnose CSS and JavaScript problems.
Don't forget that the internal representation of the document won't be complete until the page is fully processed. We'll call headcount again, to see how page production has progressed since
we last called it. The output is now -
