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.
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.
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.
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
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
For instance, an HTML document containing the code
Alternatively, script code may loaded from a separate file
by means of the
src attribute of a
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.
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.
and put this in the HTML somewhere before an element with the
<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
frameset elements, and are triggered when the browser
finishes loading or unloading the document, respectively:
These events are triggered when an element of type
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
The last event is for form user-input elements
textarea, and is triggered
when the element loses keyboard focus and has been changed
by the user
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:
Script code could then refer to that element by the value of the
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.
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.
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.