Dynamic HTML is a development of the 'traditional' HTML we already use to create Web pages of all kinds. HTML stands for HyperText Markup Language, and is designed to be a standard way of representing information so that many different types of client browser can display it.

HTML 3.2 is the latest standard to be awaiting final ratification by the World Wide Web Consortium. Since this standard was proposed, more additions continue to be made to new browsers—over and above the requirements to meet the standard. In fact, the standard itself is now in danger of being completely overtaken before it ever reaches the stage of final ratification. Even though Dynamic HTML, also know as HTML 4.0, is not that different from HTML 3.2, there are several subtle changes that require a new standard to be defined. These standards are likely to be accepted by W3C, but considering 3.2 is still to be ratified, it could take a little while.

Hopefully there should be less need for new tags and new attributes as a general framework has been established and changes might only need to be made to the scripting languages from now on. Therefore HTML 4.0 should see the standard settling down at long last. Only once there is a stable standard that the major companies adhere to, do we have any chance of achieving a fully standardized and platform-independent way of viewing information from across the planet.

You can download full specifications of Microsoft's proposals for Dynamic HTML from:

What's new in Dynamic HTML

• All of the elements in the page (tags, images, text, etc.) are now accessible to script written in the page. In prior versions of HTML, you could only access the properties of certain elements on the page. An infamous one of these was the src property of the <IMG> tag. In Netscape, you could change this property in script, allowing you to change the image on a page without reloading the page. This was not possible in IE 3.0. But in IE4, that's a different story.
• Cascading Style Sheets (CSS) have been enhanced with an object model, which provides more hooks to the page elements from scripting code.
• Extensions to the browser object model are included, which provide added functionality for the scripting languages used in the pages.
• Absolute positioning of elements, including a third dimensional coordinate known as the z-index, which allows a desktop publishing style of authoring, and a 2.5-D appearance
• Dynamic hiding and showing of any or all parts of the page allows changes to a loaded page to be made visible. Pages no longer need to be reloaded to show the updated version.
• New event-handling techniques are supported, including bubbling events up through the object hierarchy
• Graphic filters which allow the user to add multi-media effects to graphics and text such as flipping an image vertically or horizontally, making text appear to glow, adding motion blur to an image or even making it appear in x-ray form.

Getting Started in Dynamic HTML

In this course, I will be assuming that you already have some background in two areas:

• How create a traditional Web page using HTML tags,
• How scripts are used in Web pages. The examples in our text book will be in both VBScript and JavaScript. In fact, in the Appendix, Section H is a VBScript tutorial and Section I is a JavaScript reference. VBScript is easier to learn, but it looks like JavaScript (or JScript, or ECMAScript) will survive as the dominant scripting language. Don't worry - JavaScript has absolutely, positively nothing to do with JAVA.

Another way to enhance the user interface of an application is to present different parts of the interface when the user needs them, and not before. This has become possible in IE with Dynamic HTML. You have the ability to change the visibility property of any object on the screen, which will make it either appear or disappear. But with plain DHTML, you have no way of controlling how that appearance or disappearance looks. When you set the visibility property of a hidden object to visible, the object just appears. But what if you want to make the object appear as if it is dissolving onto the page, or building from the right. To do this, you need to use the transition filter.

The transition filter basically steps in front of IE4’s internal drawing functions, and allows the developer to specify how to display a particular object. Any object that has a visibility property can be used with the transition control. The transitions are added as a filter to the object's style property. This is very similar to adding a visual effect filter. You can either explicitly add the transition inside the objects style tag, or you can dynamically add it in script using the object's style property. There are two types of transitions: the blend transition and the reveal transition.

The blend transition allows for a simple fade in or fade out of an object over a specified duration. The fade works by slowly dissolving away the existing object, and showing the new object gradually in its place. You have no control over the way that the fade is done, merely over how long the transition takes. To add the blend transition to an object's style, you would add this to the style sheet:

Reveal Transition

Methods

Try to incorporate at least five of the following:

In this case, Windows has to work out where the mouse pointer is on the screen and which application is under the pointer, bring this application's window to the front, and tell the other application that it is no longer the active one. And this is only a simplified view. In reality there will be a lot more happening 'under the hood'—a stream of messages is being sent to all the applications by the operating system. Each application can choose to either do something about the message, or simply ignore it.

Events in Dynamic HTML

In the case of the browser and Dynamic HTML, this constant barrage of messages provides a way for us to react to things that are going on in the browser. We can link code in our pages to the events that are occurring, and use them to interact with the viewer of our pages.

For example, just clicking the mouse button creates several events—descriptively named onmousedown, onmouseup, and onclick. Each message is collected by the Windows operating system, which then decides what to do with it. If the user pressed the mouse button while the pointer was on the screen over the browser window, Windows sends a message to the browser. It includes information on which button was pressed, what other keys were held down, and where the pointer was on the screen.

The browser then decides if it is going to handle the event. If they clicked on one of the browser toolbar buttons, it just gets on and does whatever is required—perhaps printing the page, refreshing it, or loading the user's Home page. If, however, the click was over the page itself, the browser then exposes it, by passing it on to our script code via the browser's object model. At this point, we can react to the event ourselves if we want to.

The reverse path is taken if we actually do decide to respond. The instructions in our code are passed back to the browser via the object model. It decides what effect this will have on the page and tells Windows. Windows then updates the screen to show the new page. The great thing is that, as Dynamic HTML programmers, all we have to do is decide which events to respond to, and what instructions to give the browser. Everything else is looked after automatically.

Reacting to browser events

To be able to react to an event, we have to be able to detect it happening. If we don't react to it, the browser will just carry on regardless—perhaps carrying out some action of its own. And even if we do decide to react, we can still let the browser carry out the original task as well.

There are 39 different events that the browser exposes to our script—but for any one element in the page, only a limited number of these are available. For example a heading in the page, such as <H2>Some Text</H2>, only provides 14 events, while an image tag <IMG> provides 25 different ones. In Section A of the book's reference pages, you'll find a description of all the events, and, in Section B, a list of those available for each HTML element tag.

Event Handling in VBScript

In VBScript, we have four ways of connecting our code to an event. The main one we've used so far is to create a subroutine or function whose name is a combination of the element name and the event name. To react to a click on some heading text, we can use:

Alternatively, we can create a routine with almost any name, and link it to the event and the element by declaring the name of the routine in the element tag. And we don't need an ID in this case:

Another way is to use 'inline' script code, which does away with the need for a separate code routine. We simply write the code inside the tag, as the value of the event name attribute. Notice how we have to use single quotes inside the ONCLICK attribute, because this itself is a string:

The final method is to use a different script section for each event. This is done by identifying the element and the event in the <SCRIPT> tag:

Event Handling in JavaScript

In JavaScript (or Microsoft's implementation of JavaScript, called JScript), we don't have as many options for connecting events to our code. And the two things we have to watch out for are:

The most usual way of making the connection between the function and the element is by defining the name of the function in the element tag itself. Notice that we need MyClickCode(), not just MyClickCode, to satisfy the JavaScript syntax requirements. We also have to use the browser's built-in alert dialog, rather than MsgBox, which is part of VBScript:

This is fine for connecting script to specific elements in the page, but what about when we want to connect event handlers to the document itself? In this case, we simply put them all in the <BODY> tag:

We can also use inline code, within the element tag. This time, we're using the alternative LANGUAGE description of JSCRIPT:

And because JavaScript is the default language in the browser, we can omit the LANGUAGE attribute if we want to, making our code more compact:

Finally, we can create the separate <SCRIPT> sections for each event, just like we did for VBScript. However, this time, we have to make sure that the name of the event is all lower-case:

Handling Window Events in JavaScript

We've seen how we can place event handler declarations, such as onmousemove, in the <BODY> tag of the document to cause them to occur at document level. The other situation is how we handle events at window level. In Internet Explorer, we can place the event handler declarations on the opening <HTML> tag:

Alternatively, we can use a technique similar to the VBScript method of naming an event handler in line with the ID of the element and the event name. This time, we separate the two with a period (full stop) rather than an underscore. For example, the following are both supported in Internet Explorer 4—but bear in mind that this is not the generally accepted method for connecting events and their code. (It works because the functions are themselves actually stored as properties of the element object)

The same works for the main browser objects as well, such as the document and window:

Responding to events

Now that we've found ways of connecting our code to an event, we can start to write the code that instructs the browser—and tells it what we want to do. In general, this involves three tasks—getting information about the event, finding out about the element the event occurred for, and carrying out the task. This is where the links between our code and the elements in the page (as exposed by the object model) come into play.

Getting Information about an Event

All the ways you've seen here of connecting code to an event were equally valid in earlier releases of browsers that supported scripting (though the heading element didn't expose its events—only a very limited subset of controls did this previously). Dynamic HTML also adds another way of getting information about an event: the event object.

The event object provides a whole range of properties that tell us about an event that has just occurred. We simply query these properties inside our event handler to find the information we need to make a decision on what to do. Here's how we can query the properties of the event object to get information about the mouse button that was pressed, and the position of the moue pointer when the event occurred:

Notice that in this example, we've preceded the event object with the default window object. This is not necessary in JavaScript (or JScript), but must be done in VBScript to prevent a clash between the event object and the VBScript event keyword.

If we query the event object for a key-press event, we can use the same techniques as we did for a mouse event to find out where the mouse pointer is, and use the shiftKey, ctrlKey and altKey properties. However, more than that, we can use the keyCode property to find out which key was pressed. In this example, we're reacting to the onkeypress event of the document:

Sub document_onkeypress()

StrMesg = "You pressed the " & Chr(window.event.keyCode) & " key, " & "which has an ASCII value of " & window.event.keyCode

StrMesg = strMesg & Chr(10) & "while holding down the "

If window.event.shiftKey Then strMesg = strMesg & "Shift key "

If window.event.ctrlKey Then strMesg = strMesg & "Ctrl key "

If window.event.altKey Then strMesg = strMesg & "Alt key "

StrMesg = strMesg & Chr(10) & "The mouse pointer is at position " & "x = " & window.event.x & ", y = " & window.event.y

MsgBox strMesg, vbInformation, "The Event object parameters"

End Sub

Bubbling and canceling events

The event object plays another major role in the way we create script routines in Dynamic HTML. It not only stores the values of the environment as each event comes along, it also plays a part in controlling how these events are propagated to our code. It does this through two properties, cancelBubble and srcElement.

The Event Object's Control System

When an event occurs in a page, the event object gets first look at it, and decides which element should receive it. The event object looks to see which element the mouse pointer was over at the time. (If two elements are overlapped, it uses the one with the higher z-index). If there is an event handler for the element and the proper event, then that handler is executed.

However, it doesn't stop there. It now looks to see which element is the container of the heading tag, checking for an appropriate event handler. This process continues while there are containers available. This will continue all the way up to the document itself.

After an particular event handler is finished, the event is passed on up the hierarcy. If you do not want this top happen, then set the cancelBubble property of the event object to false.

Event bubbling, as this process is called, is very useful. For one thing, it helps to minimize the code we have to write, by letting one routine handle an event for several elements. Now that all the elements support events, this is particularly helpful.

Using Containers in Dynamic HTML

Event bubbling allows us to work with the concept of containers. In HTML, when we create a list of items in the page, we group them together in <UL> or <OL> tags:

<STYLE>

.notover {font-family=Arial; font-weight:normal; font-size:12;

color:blue; visibility: show}

.color {font-family="Arial Narrow"; color:red; font-size:12}

.sizechange {font-family=courier; font-size:26; color:blue}

.disappear {font-family=Arial; font-weight:normal; font-size:12;

visibility: hidden}

</STYLE>

...

<DIV ID=DivTag STYLE="position:absolute; top:50; left:30;

height:200; width:400; cursor:default">

<UL ID=MyList>

<LI ID=Item1 CLASS=notover> Change the font and size of text

<LI ID=Item2 CLASS=notover >Change the position of elements

<LI ID=Item3 CLASS=notover> Change the color and style of things

<LI ID=Item4 CLASS=notover> Make elements appear and disappear

</UL>

</DIV>

Notice that we've given the list and each item in it an ID here, and used style classes to create the styles for the list. We've also wrapped the whole list in a <DIV> tag, so that we can position it absolutely and move it around in our code.

This time we want to react to the onmouseover event for all the items in the list, by creating one single event handler for the list itself—the container of the list items:

Sub MyList_onmouseover

...

End Sub

• Events are Windows' way of telling applications that something has happened
• The browser exposes many events to our script code through its object model
• We can respond to these events if we want to, or just ignore them
• Each element maintains a set of properties—either directly or through a style object—whose values we can access, and often change to make the page dynamic
• By default, all events bubble up through the browser object hierarchy, from the source element to the document
• We can use the event object to get information about an event, and prevent event bubbling taking placeWith this chapter, we've completed our tour of the main parts of Dynamic HTML.

Try to do all of the following:

• Use both VBScript and JavaScript to handle events.
• Format your page to use containers and event bubbling.
• Experiment with event handlers at different levels in the HTML hierarchy
• Have fun!

Lesson 6 - Changing the Contents of the Page

The previous lessons of this course covered changing the position and appearance of elements. We can also change the actual element itself, just as though we has changed the HTML source that created it. We can also add elements to, and remove them from a page while it is displayed.

The easiest way to manipulate the contents of a page is to use the special properties that are supported by the majority of visible elements. They expose the contents of each part of the document, almost as it appears in the source code. By assigning new values to these properties, we can change the contents of the page that is being displayed.

By document, we mean a stream of characters that consists of both text and HTML and which represents the current page. Don't confuse the document with the actual HTML source code though. This is why we said 'almost as it appears in the source code'. The browser translates the source code into its own representation of the page before displaying it, and changing the contents of an element on the page does not update the original HTML source—just the browser's internal representation of it.

We can also manipulate the contents of a document by using TextRange objects. However, this is more involved that using the 'content-manipulation' properties and methods we've just looked at. A TextRange object has properties that are set to reference part or all of a document, and methods that are used either to change which parts of the document that the TextRange currently references, or to work with that referenced part of the document.

We usually resort to using TextRange objects in two particular instances: when the element that we want to access does not support the 'content-manipulation' properties we looked at earlier, and when we come to manipulate the contents of a selection object. This object provides a reference to the current user's selection on screen (from dragging over with the mouse).

We can create a TextRange object in two different ways :

• Use the createTextRange method on the document's BODY element to create a range covering the entire body of the document, or on an individual TEXTAREA, BUTTON or INPUT TYPE=TEXT element in the page. Every visible element has an isTextEdit property, which is true only for the elements that support the createTextRange method.
• Create a copy of an existing TextRange using the duplicate method:

We can change the contents of a TextRange by moving the start and end positions. This means that we are effectively changing the text and elements that the TextRange refers to, but not changing the actual text itself. We can do this with the following techniques:

• Using the expand, collapse, move, moveStart, moveEnd, or setEndPoint methods to change either the start position, end position, or both together

Once we've created our TextRange object, or moved it to a new position, we can get information about the current text and elements it refers to by:

Working with HTML tables and their contents isn't a whole lot different from working with the plain text in the page. This shouldn't be surprising, because tables are just a heap of HTML <TABLE>, <TH> and <TD> tags anyway. We can use the techniques we've seen in this chapter to manipulate them as easily as we manipulate text.

The Rows and Cells Collections

What makes tables interesting, however, is that Dynamic HTML finally brings the concept of rows and columns to a table created with HTML tags. We can use the rows and cells collections to access individual rows and cells in a table whenever we like:

• rows - Collection of all the rows in the table, including those in the <THEAD>, <TBODY>, and <TFOOT> sections.
• cells - Collection of all the <TH> and <TD> cells in the row of a table.

Assignment 6

Here is a list of things that I might like to see you try in a page:

• Use the Element 'content' properties to change the text on your page dynamically
• Use the textRange object to manipulate a block of text on the page.
• Try to create a dyanmic "spreadsheet" using Dynamic Tables