Dynamic HTML (DHTML) is a combination of standard HTML and CSS, and often JavaScript, used to create dynamic Web page effects. These can be animations, dynamic menus, text effects such as drop shadows, text that appears when a user rolls over an item, and other similar effects.
This post introduces DHTML by reviewing some JavaScript basics and providing a look at the Document Object Model, which allows you access to HTML elements so that you can change their properties and/or content. Examples of common DHTML techniques are provided.
The Need for DHTML
DHTML, when used correctly, can significantly enhance the user experience. DHTML was originally best known for its flashy effects, and these still exist, but their importance is questionable, and when used improperly they can be annoying for your users. Fancy text animations and bouncing balls might be fun to write, but they’re not so much fun for the user.
Most of these have to do with navigation. After all, your Web site is all about the user experience. Whenever you create an enhancement to your Web site, you should always ask, “Does this improve the user experience? Can they navigate my site more easily? Read my Web page more easily?”
How DHTML Works
DHTML can work either by applying certain CSS properties, or by using JavaScript to manipulate HTML elements. When using JavaScript, DHTML takes advantage of a browser’s object model, which is a tree of objects based on the element set of HTML and on the property set of CSS. When you code against that object model, you can change an element’s properties, which are associated with an element’s attributes. An
element’s attributes, in fact, are referred to as properties in a JavaScript environment. How these properties are referred to, and what actions (methods) you can take on them, is determined by the Document Object Model (DOM).
Using event handlers
Notice the onclick attribute in the following code fragment:
onclick=“this.style.fontSize=‘60px’; this.style.color=‘red’”>
This tells the browser that when the user clicks the div element, something should happen. In this case, that something is that the following two attributes of the style element will change:
✦ style.fontSize=‘60px’ tells the browser to change the font size to 60 pixels.
✦ style.color=‘red’” tells the browser to change the color to red.
The onclick attribute is actually an event handler. An event is something that happens, as you probably already know. A party, for example, is an event. When a human triggers the onparty event, sometimes that human falls down drunk. When a human triggers an onclick event in a browser, more benign things take place, such as text color changes, menu changes, and so on. Table bellow shows the common event handlers associated with JavaScript.
Event Handler Usage
Cross-Browser Compatibility Issues
The most important caveat to exploring DHTML is that there are tons of compatibility issues. The newest iterations of Mozilla/Netscape and Internet Explorer have actually begun to come closer together, but developers working with DHTML during the height of the browser wars quickly learned that developing
cross-browser DHTML was a very difficult proposition. As a result, most large professional sites eschew complex DHTML in favor of simpler cross-browser routines to improve navigation and other facets of the user experience, rather than excessive visual effects.
Browser detection
You can detect what kind of a browser a user is running by running a browser detection script. This kind of script, along with some more finely tuned type of object detection described in the next section, is sometimes referred to as browser sniffing. At its simplest, a typical browser-detection script looks like this:
<SCRIPT LANGUAGE=“JavaScript”>
<!--
var bName =navigator.appName;
var bVer = parseFloat(navigator.appVersion);
if(bName == “Netscape”)
var browser = “Netscape Navigator”
else
var browser = bName;
document.write(“You are currently using ”, browser, “ ”,
bVer, “.”);
// -->
</SCRIPT>
When using simple browser-sniffing scripts, you can replace the code in bold in the preceding example with more complex tasks.
This post introduces DHTML by reviewing some JavaScript basics and providing a look at the Document Object Model, which allows you access to HTML elements so that you can change their properties and/or content. Examples of common DHTML techniques are provided.
The Need for DHTML
DHTML, when used correctly, can significantly enhance the user experience. DHTML was originally best known for its flashy effects, and these still exist, but their importance is questionable, and when used improperly they can be annoying for your users. Fancy text animations and bouncing balls might be fun to write, but they’re not so much fun for the user.
Most of these have to do with navigation. After all, your Web site is all about the user experience. Whenever you create an enhancement to your Web site, you should always ask, “Does this improve the user experience? Can they navigate my site more easily? Read my Web page more easily?”
How DHTML Works
DHTML can work either by applying certain CSS properties, or by using JavaScript to manipulate HTML elements. When using JavaScript, DHTML takes advantage of a browser’s object model, which is a tree of objects based on the element set of HTML and on the property set of CSS. When you code against that object model, you can change an element’s properties, which are associated with an element’s attributes. An
element’s attributes, in fact, are referred to as properties in a JavaScript environment. How these properties are referred to, and what actions (methods) you can take on them, is determined by the Document Object Model (DOM).
Using event handlers
Notice the onclick attribute in the following code fragment:
onclick=“this.style.fontSize=‘60px’; this.style.color=‘red’”>
This tells the browser that when the user clicks the div element, something should happen. In this case, that something is that the following two attributes of the style element will change:
✦ style.fontSize=‘60px’ tells the browser to change the font size to 60 pixels.
✦ style.color=‘red’” tells the browser to change the color to red.
The onclick attribute is actually an event handler. An event is something that happens, as you probably already know. A party, for example, is an event. When a human triggers the onparty event, sometimes that human falls down drunk. When a human triggers an onclick event in a browser, more benign things take place, such as text color changes, menu changes, and so on. Table bellow shows the common event handlers associated with JavaScript.
Event Handler Usage
- onAbort | Occurs when a user stops an image from loading
- onBlur | Occurs when a user’s mouse loses focus on an object. Focus is when the cursor is active on an object, such as a form input field. When a cursor is clicked within the field, it has focus, and when the mouse is taken out of the field, it loses focus, causing an onBlur event onChange Occurs when a change takes place in the state of an object, when, for example, a form field loses focus after a user changes some text within the field.
- onClick | Occurs when a user clicks an object
- onError | Occurs when an error occurs in the JavaScript
- onFocus | Occurs when a user’s mouse enters a field with a mouse click
- onLoad | Occurs when an object, such as a page (as represented by the body element) is loaded into the browser.
- onMouseOut | Occurs when a mouse no longer hovers over an object
- onMouseOver | Occurs when a mouse begins to hover over an object
- onSelect | Occurs when a user selects text
- onSubmit | Occurs when a form is submitted
- onUnload | Occurs when an object is unloaded
Cross-Browser Compatibility Issues
The most important caveat to exploring DHTML is that there are tons of compatibility issues. The newest iterations of Mozilla/Netscape and Internet Explorer have actually begun to come closer together, but developers working with DHTML during the height of the browser wars quickly learned that developing
cross-browser DHTML was a very difficult proposition. As a result, most large professional sites eschew complex DHTML in favor of simpler cross-browser routines to improve navigation and other facets of the user experience, rather than excessive visual effects.
Browser detection
You can detect what kind of a browser a user is running by running a browser detection script. This kind of script, along with some more finely tuned type of object detection described in the next section, is sometimes referred to as browser sniffing. At its simplest, a typical browser-detection script looks like this:
<SCRIPT LANGUAGE=“JavaScript”>
<!--
var bName =navigator.appName;
var bVer = parseFloat(navigator.appVersion);
if(bName == “Netscape”)
var browser = “Netscape Navigator”
else
var browser = bName;
document.write(“You are currently using ”, browser, “ ”,
bVer, “.”);
// -->
</SCRIPT>
When using simple browser-sniffing scripts, you can replace the code in bold in the preceding example with more complex tasks.
0 comments:
Post a Comment