Outside reading

Quick Introduction to HTML
Dynamic HTML and Scripts


Dynamic HTML (DHTML) is the generic term for HTML with code (called a script) that changes the content or appearance of the page in the user’s browser on the user’s computer.

For example, a script may replace one image with another in a web page, either continuously or in response to mouse clicks. This is the most common technique used for the popular “roll-over” and “tree menu” effects, as well as controls that react when the mouse moves over them.

To write a script of any complexity requires some computer programming skills. However, many web page authors with no such skills regularly use scripts, either by just copying the script and pasting it into the code of the page, or by means of a web page builder.

Here, we will not discuss the details of how to write a script. We will concentrate on how a script relates to HTML, how they can be used, and the available technologies for scripting.

Purposes and limitations

Generally, DHTML scripts manipulate the elements of a web page. In principle, they can have access to every element of the web page. Furthermore, they have access to certain information about your browser: its name and version, your preferred natural language, etc.

Scripts are widely used and abused on the web. They can make a page more fun to use, or extremely annoying. They can make a form in a web page easier to use, or they can make it completely non-functional.

Scripts do not have access to the data on your hard disk. They cannot communicate via the Internet. Once text in a page element has been loaded, it cannot be changed by the script. (However, text may be generated and added by the script while the page is loading.)

One common use of scripts is to change an image in a web page as you watch. Scripts can also make certain items move around in the page.

Another very common use of scripts is to “pre-verify” the values in a form before it is submitted, the idea being that the act of submitting the form is unpleasant if the server rejects some value. With a script, you can tell the user immediately that something they typed is invalid, before they submit the form.

It is also possible to make page elements that move about on the page while you watch. These are usually more amusing or annoying than useful.

Be warned that scripting technologies are not as portable as they should be. Only about 90% of code written in the most portable one, JavaScript, will work in another browser. The other 10% requires experimentation and tweeking. Portability has much improved since most browsers have implemented the DOM (Document Object Model).

As with all technologies outside HTML proper, think twice before you use DHTML. As yourself whether your goal can be obtained by more direct means. If you still really want Dynamic HTML, be careful: try out your page with different browsers on different computer platforms.

Typically, a script should be an enhancement of the user’s experience with your page, not a prerequisite. That is, the page should function adequately with no script at all; the script should just make it more convenient, beautiful, or fun.

Scripting HTML

By definition, scripts consist of textual code. This text can be either directly in the web page or in a separate file.

Script code in the web page must appear between script begin and end tags. These these tags could appear within any HTML element, but their location influences when they are executed, and possibly the results.

If a page won’t function without a script, be sure to explain this with text between noscript tags.

For instance, an HTML document containing the code

	<script type="text/javascript">
	  self.alert( "Howdy there!" );
	  <p>This page requires
		JavaScript to function. 

will cause a simple alert window with the text “Howdy there!” to pop up when the page is loaded, if JavaScript is functioning in the user’s browser. Otherwise, it just puts the explanatory text in the page.

Alternatively, script code may loaded from a separate file by means of the src attribute of a script tag.

	<script src="scriptFile.js" 

Note that the file name of a pure JavaScript file conventionally ends with “.js”.

This method is especially useful if several pages are to share the same code, or if there is a lot of code in the script.

Invoking a script

Any bare code that appears in a script is executed as soon as it is loaded.

To make a script respond to user actions such as mouse clicks or keyboard input, you should wrap the script code in a function, and then refer to it in an event attribute of the HTML tag that you want to respond.

For example, to make a generic paragraph responed to a mouse click, you would make a JavaScript function

	<script type="text/javascript">
	  handle_click() {
	    self.alert( "Well clicked!" );

and put this in the HTML somewhere before an element with the event attribute onclick:

	<p onclick="handle_click()">
	  Go ahead, click on
          this paragraph!</p> 

This results in the following “dynamic” paragraph:

Other user-input event attributes are:

These event attributes are only for body or frameset elements, and are triggered when the browser finishes loading or unloading the document, respectively:

These events are triggered when an element of type a, area, button, input, label, select, or textarea obtains keyboard focus either by tabbing or mouse pointing:

The rest of the events only apply to forms.

These are triggered when the form is submitted or reset, and are only for the form elemsnt:

The last event is for form user-input elements input, select, and textarea, and is triggered when the element loses keyboard focus and has been changed by the user

Element references in a script

Browser scripts can act on elements in the document, but how do they refer to a specific element?

Unfortunately, the answer depends somewhat on the language used, and has changed in the brief history of the Web. The modern standard is specified in the DOM (see below).

The easy DOM way is to give the element a unique ID attribute, like this:

<p id="aSpecialParagraph">

Script code could then refer to that element by the value of the ID attribute.

	<script type="text/javascript">
	  element = document.getElementByID( "aSpecialParagraph" );
	  doSomethingTo( element );

This works fine in modern browsers, but not in older ones. Older browsers often relied on lists of things in the document, such as a list of images.

However, once a script has a reference to an element, it can change it in many ways. It can set the image file being used, and change style information such as color.

Script languages


JavaScript is a product of the Netscape company. JavaScript and its variants are by far the most widely applied browser scripting languages, and is available on any fuller-featured modern browser. It is internationally standardized, under the name “ECMAScript”. For most page scripting purposes, this is what you want.

The down side of JavaScript is that, since its standardization came late, the chances of code that works on one browser to fail on another is high. Also, the language itself isn’t a work of art.

JavaScript should not be confused with Sun Microsystem’s Java language. There is a historical reason for the connection, but the two languages are deeply different, and intended for different purposes. (It is possible for a page to load a Java applet that communicates with JavaScript, via an interface called LiveConnect.)


VBScript is Microsoft’s Visual Basic adapted to the purpose of browser scripting. It will only work in Microsoft browsers. VBScript has unique capabilities that make it the only choice for some purposes which pertain to Microsoft software, and software that uses Microsoft API’s.


JScript is Microsoft’s answer to JavaScript. It accepts mostly the same syntax, but has elements that don’t exist in the JavaScript standard. Code written in JScript is likely to run only in Microsoft browsers. The current proposals for new versions of ECMAScript and the DOM should eventually alleviate this problem however.

The Document Object Model

The Document Object Model (DOM) is a standardized way for scripts to refer to all the items in a web browser window, including all the items in a web document. It has gone a long way to make the various scripting languages much more robust, but at this time, it is only partly implemented in most browsers.

Besides providing a way to refer to all the HTML elements in a document as well as their attributes and textual content, the DOM provides standardized ways to talk about

so the script can read and set the style of any element (for example, to highlight an element when the mouse moves over it)
this will be a big improvement: mouse and keyboard events were handled in quite differently by different browsers.

The DOM has nothing to do with entities outside the browser window. There is some talk about standardized ways for a script to get certain other information about the browser, such as information about browser plug-ins, but so far, this must be done on a per-browser basis.

For now, script writers must either pick a browser for which to write, or spend a disappointing amount of time writing special code to work in multiple browsers. But as DOM-compliant browsers become more prevalent, the task is being greatly simplified.