DHTML

DHTML Overview

Applications of DHTML

One thing we should discuss before we go much further in the world of DHTML is what it is used for, or its applications. Since there are many of them, we won't mention them all here, but we will talk about some of the more common ones.

Before we talk about DHTML applications that use both JavaScript and CSS together, let's talk about how they are used on their own.

Applications of Javascript

Image Swaps

This probably one of the better known applications of JavaScript. You have no doubt many times seen a Web page containing an image that, when the mouse is moved over it, changes to another image. This is commonly seen on navigation bar type objects, where a button will change from its normal state, to an active, or mouse-over state. This is commonly referred to as a hover state. This can also be done with pure CSS, but often the combination of the two (JavaScript and CSS) allows for more interesting effects.

Browser Detection

Many times, in the interest of keeping your Web site as accessible as possible, it is useful to detect what kind of browser the viewer is using, in order to select which scripts will run. This is a commonly used application of JavaScript on the WWW, many scripts have some form of detection to determine if the user's browser is capable of running the script properly. If it isn't, the script either won't run, or will direct the browser to another script or page with content tailored to that browser.

Besides browsers, JavaScript can be made to detect things like operating systems, screen resolutions, and even colour depth.

Pop-up Windows

Although they can, at times, be quite annoying, pop-up windows can also be very useful. Content can be shown in a smaller window with less chrome, or in any kind of window that the Web designer wants. Windows can be sized, placed, and set to have as much chrome (back/forward buttons, menu items, etc.) as you want.

Form Validation

Another very useful application of JavaScript is form validation. In fact, JavaScript can be made to interact with virtually any element of a form. This makes for many possibilities: from forms that check for a valid email address, to forms that do complex calculations. These are sometimes called 'smart forms'.

Dynamic Content

JavaScript can be used to write content to the Web page. This is used for showing content on the page based on a user preference, for example. It is also commonly used to write HTML tags to the code, often to overcome browser compatibility problems.

These are just a few of the many "pure" uses of JavaScript. As time goes on, we see more and more popular techniques that employ both JavaScript and CSS, as opposed to just JavaScript or just CSS.

Applications of CSS

Setting text properties (basic CSS)

CSS takes over these days from what HTML used to do with many, many different <font> tags. Before CSS, a Web designer would have to have <font> tags for each text element on a page. CSS allows you to set rules for font properties. This eliminates the need for any <font> tags at all on a document. In fact, the W3C, the organization that creates the standards for the Web, has effectively dropped the <font> tag and recommends not using it.

With CSS, not only can you set rules for text across a whole page, you can set rules across an entire site with a single style sheet.

Backgrounds (basic CSS)

With CSS, background images or colours can be specified. This eliminates the need for the bgcolor HTML tag attribute, or the background attribute. All elements can have backgrounds specified in CSS.

Positioning Elements

With advanced CSS (also referred to as CSS level 2) you can now do such things as positioning. This allow you to precisely place any object on the page, even on top or underneath other objects. This adds a third dimension to Web pages what was previously impossible. These positioned elements are sometimes referred to as 'layers'.

CSS layers shouldn't be confused with an older proprietary Netscape technology called layers that uses a <layer> HTML tag. Since the <layer> tag was never cross-browser compatible (it only worked in Netscape version 4), we won't be dealing with it at all in this course. Even Netscape dropped support for this tag in the later versions of its browsers.

Changing Visibility of Objects

With CSS, the visibility of an element can be turned on or off. This is another very useful feature. Some effects that previously required JavaScript can now be created easily using CSS. Another way this can be used is turning layers on or off, which, in some cases is an alternative to using a pop-up window.

Applications of both (CSS and JavaScript)

Once you start putting JavaScript and CSS together, things start to get even more interesting. Now, you can not only create a layer, but move it across the screen in a variety of ways. You can also create interactive menus that pop-up when the mouse is moved over them, with as many sub-menus as you wish. Layers can be dragged with the mouse, or turned off and on at will.

Applications of DHTML Summary

DHTML has many applications that can be broken up into applications that only use JavaScript, applications that only use CSS, and applications that use both.

Some common JavaScript applications are: