Department of Engineering

IT Services

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,

<p id="MYDIV" style="position:relative; left:100px; bottom:30px; color:red; ">HELLO</p>

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 properties
    document.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

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

<button onclick="changeClassStyle('Cplusplus','bold','normal','black',''); changeClassStyle('Java','normal','normal','grey','')" >Emphasise C++</button>

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 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.