Quick Introduction to HTML
Dynamic HTML and Scripts

Overview

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,the details of how to write a script will not be discussed. The tobic will be the relation of scripts to HTML, how scripts can be useful, 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. Some 98% of code written in the most portable language, JavaScript, will work in another browser. The other 2% requires experimentation and tweeking, and accounts for many exasperating bugs in web pages. Portability has much improved since most browsers have implemented the ECMAScript standard for JavaScript and the DOM (Document Object Model).

As with all technologies outside HTML proper, think twice before you use DHTML. Ask 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!" );
	</script>
	<noscript>
	  <p>This page requires
		JavaScript to function. 
		Sorry!</p>
	</noscript>

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" 
		type="text/javascript">
	</script>

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">
	  function
	  handle_click() {
	    self.alert( "Well clicked!" );
	  }
	</script>

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 );
	</script>

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.

Update: as of HTML 4, the type attribute of the script tag is no longer recommeded for JavaScript code. JavaScript is now the default scripting language of the script tag. So in the above, instead of 

	<script type="text/javascript">

new HTML files should have just 

	<script">

This amounts to a simplification, but one must keep in mind what version of HTML is being used. (A web page validator is very handy for keeping such things in line.)

Script languages

JavaScript

JavaScript was 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, for many years, the chances of code that works on one browser to fail on another has been high. Again, this is much improved in recent years, but we have all seen the little web page glitches.

Also, the language itself isn’t a work of art.

JavaScript should not be confused with Java language (originally by Sun Microsystems, now administered by Oracle). There is a historical reason for the connection, but the two languages are deeply different, and intended for different purposes. (It was originally possible for a page to load a Java applet that communicates with JavaScript, via an interface called LiveConnect. But support for Java in web pages has been dropped in recent years.)

VBScript

VBScript is Microsoft’s Visual Basic adapted to the purpose of browser scripting. It functions only 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, but it is inappropriate for scripting pages meant for the general WWW.

Support for the use of VBScript for client-side Web scripting has waned even at Microsoft, however.

JScript

JScript is Microsoft’s answer to JavaScript: officially, it is their "implementation of the ECMA 262 language specification". It accepts mostly the same syntax, but has elements that don’t exist in the JavaScript standard: recent versions provide .Net support. Code written in JScript will have capabilities that work only in Microsoft browsers, running on Microsoft Windows.

The documentation for the MS Edge web browser emphasizes JavaScript over JScript..

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

style
so the script can read and set the style of any element (for example, to highlight an element when the mouse moves over it)
events
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.