DHTML and Javascript
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, 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 or HTML5 pages 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,
produces
HELLO
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 onclick event 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.
Move the pointer over this h3 header to change color
The code for it is
<h3 id="header2" onmousemove="changecolor()" onmouseout="unchangecolor()"> ....The changecolor() routine first finds the object with the identifier "header2", then changes some of its propertiesdocument.getElementById('header2').style.color="red" document.getElementById('header2').style.background="yellow" - 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.
. The touchytext routine in the head of this page is
function touchytext(words) { document.getElementById('touchy').value=words; }
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
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)
is called at this point of the document by using this code
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.
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 yellow 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.
function moveme() { var thebutton = document.getElementById('mover'); var theframe=0; var intervalId = setInterval(displayNextFrame, 300); function displayNextFrame() { if(theframe >= 10) { clearInterval(intervalId); return; } thebutton.style.left=theframe*10+'px'; theframe++; } }
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 Tools
menu with helpful options including a DOM Inspector
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 -
See the Advanced Javascript page for more useful things to do with Javascript.