Dynamic HTML | Internet Development Index |
Dynamic HTML (DHTML) is a set of innovative features in Microsoft® Internet Explorer 4.0. By enabling authors to dynamically change the rendering and content of a document, DHTML gives authors the ability to create visually outstanding HTML documents that interact with the user without the burden of relying on server-side programs or complicated sets of HTML pages to achieve special effects.
With DHTML, you can easily add effects to your documents that previously were difficult to achieve. For example, you can:
- Hide text and images in your document and keep this content hidden until a given time elapses or the user interacts with the page.
- Animate text and images in your document, independently moving each element from any starting point to any ending point, following a path that you choose or that you allow the user choose.
- Create a ticker that automatically refreshes its content with the latest news, stock quotes, or other data.
- Create a form and then instantly read, process, and respond to the data the user enters in the form.
DHTML achieves these effects by modifying the current document and automatically reformatting and re-displaying the document to show changes. It does not need to reload the document or load a new document, or require a distant server to generate new content. Instead, it uses the power of the user's computer to calculate and carry out changes. This means a user does not have to wait for text and data to complete time-consuming roundtrips to and from a server before seeing results. Furthermore, DHTML does not require additional support from applications or embedded controls to make changes. Typically, DHTML documents are self-contained, using styles and a little script to process user input and directly manipulate the HTML tags, attributes, styles, and text in the document.
The HTML elements, attributes, and styles in DHTML are based on existing HTML and Cascading Style Sheets (CSS) specifications. Users can view your documents whether they use Internet Explorer 4.0 or later. Naturally, the dynamic and interactive features that you add to your documents might not be fully functional when viewed with a browser that does not support DHTML. But DHTML is designed to "degrade gracefully"—if you follow some basic guidelines, the content of your document can be viewable in other browsers.
DHTML works well with applications, Microsoft ActiveX® Controls, and other embedded objects. You can use existing applications and controls, or create new ones that specifically take advantage of the features of DHTML. Applications and controls work best when you rely on them to perform computationally difficult tasks, and use DHTML to display output and process user input. For example, you can create a document that allows the user to query, display, and modify the content of a large, server-based database by combining the data binding features of DHTML with a data source object (DSO). The DSO retrieves and sets data in a database, and DHTML does the rest: it processes user queries, displays the data, carries out and performs the necessary interaction with the object.
In short, DHTML eliminates the shortcomings of previous browser technologies. You can create innovative Web sites, whether on the Internet or an intranet, without having to sacrifice performance for interactivity and special effects. Not only does DHTML enhance the user's perception of your documents, it also improves server performance by reducing requests to the server and, subsequently, server load.
Microsoft is working with Internet standards bodies, such as the World Wide Web Consortium (W3C), to provide the best standards-based solutions to make the Web a better open environment for building efficient and interactive multimedia content. DHTML is the next step in that effort—all the HTML and CSS extensions for DHTML conform to W3C specifications or have been submitted to the W3C for consideration.
The following sections describe DHTML in more detail and how to use it.
- Dynamic Styles
- Dynamic Content
- Positioning and Animation
- Filters and Transitions
- Font Download
- Data Binding
- DHTML Object Model
- Related Topics
Dynamic Styles
Dynamic styles are a key feature of DHTML. By using styles and style sheets, you can quickly change the appearance and formatting of elements in a document without adding or removing elements. This helps keep your documents small and the scripts that manipulate the document fast.
The object model provides programmatic access to styles. This means you can change inline styles on individual elements and change style rules in a document's CSS using simple script-based programming. These scripts can be written in Microsoft JScript® or Microsoft Visual Basic® Scripting Edition (VBScript).
Inline styles are CSS style assignments that have been applied to an element using the style attribute. You can examine and set these styles by retrieving the style object for an individual element. For example, if you want to highlight the text in a heading when the user moves the mouse pointer over it, you can use the heading's inline style to enlarge the font and change its color, as shown in the following simple example.
<HTML>
<HEAD><TITLE>Dynamic Styles</TITLE>
<SCRIPT LANGUAGE="JScript">
function doChanges() {
window.event.srcElement.style.color = "green";
window.event.srcElement.style.fontSize = "20px";
}
</SCRIPT>
<BODY>
<H3 ID=heading onmouseover="doChanges()" STYLE="color:black;font-size:18">Welcome to Dynamic HTML!</H3>
<P>You can do the most amazing things with the least bit of effort.
</BODY>
</HTML>
In the preceding example, the process (also known as an event handler) that responds when the onscreen cursor moves over an HTML tag that contains an onmouseover statement receives control when the user first moves the mouse pointer into the heading (known as an event). The handler uses the srcElement property of the event object to determine which element is the source of the event—in this case, the H3 element. It then uses the color and fontSize properties of the style object for the element to change the color and font size. Setting these properties changes the CSS color and font-size attributes given in the style attribute for the heading, and the browser immediately updates the onscreen text to display these new attribute values.
By using styles, you can create a simple document, such as the following, in which all items in a bulleted list are hidden until the user clicks the mouse.
<HTML>
<HEAD><TITLE>Dynamic Styles</TITLE>
<SCRIPT LANGUAGE="JScript">
function showMe() {
MyHeading.style.color = "red";
MyList.style.display = "";
}
</SCRIPT>
<BODY onclick="showMe()">
<H3 ID=MyHeading>Welcome to Dynamic HTML!</H3>
<P>You can do the most amazing things with the least bit of effort. Just click and see!
<UL ID=MyList STYLE="display:none">
<LI>Change the color, size, and typeface of text
<LI>Show and hide text
<LI>And much, much more
</UL>
<P>And this is just the beginning!
</BODY>
</HTML>In the preceding example, the CSS display attribute is set to none, causing the ul list to be hidden from view. When the user clicks the document, the event handler clears the value of this attribute, making the browser display the list onscreen. Notice how any content that comes after the list shifts to accommodate the new text rendering.
Dynamic styles are based on the World Wide Web Consortium 
Recommendation for Cascading Style Sheets (CSS) specification for static style sheets. For a list of topics that describe and explain dynamic styles in full detail, see Dynamic Styles.
Dynamic Content
With DHTML, you can change the content of a document after it is loaded. Internet Explorer provides a rich set of properties and methods to dynamically construct and alter documents, from inserting and deleting elements to modifying the text and attributes in individual elements.
The DHTML Document Object Model (DOM) provides access to all elements in the document. Consider the following simple document. You can replace and change elements as well as change colors and text by using a few lines of script.
<HTML>
<HEAD><TITLE>Welcome!</TITLE>
<SCRIPT LANGUAGE="JScript">
function changeMe() {
MyHeading.outerHTML = "<H1 ID=MyHeading>Dynamic HTML!</H1>";
MyHeading.style.color = "green";
MyText.innerText = "You can do the most amazing things with the least bit of effort.";
MyText.align = "center";
document.body.insertAdjacentHTML("BeforeEnd", "<P ALIGN=\"center\">Just give it a try!</P>");
}
</SCRIPT>
<BODY onclick="changeMe()">
<H3 ID=MyHeading>Welcome to Dynamic HTML!</H3>
<P ID=MyText>Click anywhere on this page.</P>
</BODY>
</HTML>When the user clicks on the page in the preceding example, the script replaces the H3 element with an H1 element, centers the paragraph, and inserts a new paragraph at the end of the document. Using script in this way, you can add, delete, and replace any elements and text in the document.
For a list of topics that describe and explain dynamic content in full detail, see Dynamic Content.
Positioning and Animation
Positioning is the ability to place an HTML element at a specific point in a document by assigning an x- and y-coordinate and a z-plane to that element. This means you can place elements—images, controls, and text—exactly where you want them and achieve special, overlapping effects by defining in what order elements at the same point should be stacked atop one another.
Positioning is an extension of CSS. This means that you set the position of an element by setting the appropriate CSS attributes for that element. The following example shows how to set the absolute position of an image.
<HTML> <HEAD><TITLE>Positioning</TITLE> <BODY> <H3>Welcome to Dynamic HTML!</H3> <P>With positioning, you can place images exactly where you want them, even behind text and other images. <IMG STYLE="position:absolute;top:0; left:0; z-index:-1" SRC="banner.gif"> </BODY> </HTML>
In the preceding example, the image is placed at the document's top left corner. Setting the z-index attribute to -1 causes the image to be placed behind the text on the page.
Internet Explorer 4.0 supports positioning and animation of elements even after a document is loaded. Because the DOM provides access to styles and style sheets, you can set and change the position of an element as simply as you set and change its color. This makes it especially easy to change the position of elements based on how the user is viewing the document, and even to animate the elements. For animation, all you need is to slightly modify the position of an element on some interval. The following example presents an image that glides across the top of the document and comes to rest at the upper-left corner.
<HTML>
<HEAD><TITLE>Dynamic Positioning</TITLE>
<SCRIPT LANGUAGE="JScript">
var id;
function StartGlide()
{
Banner.style.pixelLeft =
document.body.offsetWidth;
Banner.style.visibility = "visible";
id = window.setInterval("Glide()",50);
}
function Glide()
{
Banner.style.pixelLeft -= 10;
if (Banner.style.pixelLeft<=0) {
Banner.style.pixelLeft=0;
window.clearInterval(id);
}
}
</SCRIPT>
<BODY onload="StartGlide()">
<H3>Welcome to Dynamic HTML!</H3>
<P>With dynamic positioning, you can move images anywhere in the document
even while the user views the document.
<IMG ID="Banner" STYLE="visibility:hidden;position:absolute;top:0; left:0; z-index:-1"
SRC="banner.gif">
</BODY>
</HTML>In the preceding example, the StartGlide function is called when the document is loaded. The function sets the absolute position of the Banner image to the top, far-right edge of the document body, shows the image, and starts an interval. The Glide function is called repeatedly in 50-millisecond intervals. The function moves the image to the left by 10 pixels, and when the image is finally at the left edge, it cancels the interval.
Dynamic positioning has many uses in consumer and business applications. By combining dynamic styles, positioning, transparent images, and transparent ActiveX Controls, you can present a rich set of animation effects in your documents.
Dynamic positioning and animation is based on the W3C Working Draft on Positioning HTML with Cascading Style Sheets and will be adapted, as needed, to conform to the final recommendation. Documents that use positioning will be compatible with browsers that support this standard.
For a list of topics that describe and explain CSS positioning in full detail, see Positioning.
Filters and Transitions
Internet Explorer 4.0 supports an extensible architecture that enables you to specify filters and transitions using CSS properties. Visual filters can be used to apply visual effects to an element without requiring any scripts. The syntax is:
filter: filter_name( param1, param2, ...)
Transitions are effects that can be applied when changing the display of an element—switching from one image to another, for example. Both interpage transitions and transitions on specific elements within a page are supported. Transitions are most commonly seen in "slide show" presentations. Filters are effects, such as text drop shadows, that can be applied to content on Web pages. In addition to the set of standard filters and transitions included in Internet Explorer 4.0 , the standard filters and transitions can be supplemented by additional third-party filters and transitions. For more information about filters, see Creating Multimedia Effects with Visual Filters and Transitions.
Font Download
Internet Explorer 4.0 supports the use of dynamically downloaded fonts. Using the @font-face style attribute , a document can reference a font that is automatically downloaded, is used for the page only, and is discarded once the page is no longer displayed. The following example shows the use of downloaded fonts.
<HTML><HEAD>
<STYLE>@font-face {font-family:comic; src:url(http://abc.domain.com/fonts/comicbold.eot);}
</STYLE>
</HEAD>
<BODY>
<P STYLE="font-family:comic;font-size:18pt">this line uses the @font-face
style element to display this text using the Comic Sans MS font in 18-point
size and bold.
<P>
</BODY></HTML>Data Binding
Data binding is a DHTML feature that lets you easily bind individual elements in your document to data from another source, such as a database or comma-delimited text file. When the document is loaded, the data is automatically retrieved from the source and formatted and displayed within the element.
One practical way to use data binding is to automatically and dynamically generate tables in your document. You can do this by binding a table element to a data source. When the document is viewed, a new row is created in the table for each record retrieved from the source, and the cells of each row are filled with text and data from the fields of the record. Because this generation is dynamic, the user can view the document while new rows are created in the table. Additionally, once all the table data is present, you can manipulate (sort or filter) the data without requiring the server to send additional data. The table is simply regenerated, using the previously retrieved data to fill the new rows and cells of the table.
Another practical use of data binding is to bind one or more elements in the document to specific fields of a given record. When the document is viewed, the elements are filled with text and data from the fields in that record, sometimes called the "current" record. A simple example is a form letter in which the name, e-mail address, and other details about an individual are filled from a database. To adapt the letter for a given individual, you simply specify which record should be the current record. No other changes to the letter are needed.
Yet another practical use is to bind the fields in a form to fields in a record. Not only can the user view the content of the record, but the user can also change that content by changing the settings and values of the form. The user can then submit these changes so that the new data is uploaded to the source—for example, to the HTTP server or database.
To provide data binding in your documents, you must add a DSO to your document. This invisible object is simply an ActiveX control or Java applet that knows how to communicate with the data source. Microsoft provides two DSOs with Internet Explorer 4.0: one to access comma-delimited data in text files and another to access Structured Query Language (SQL) data in SQL Server and other Open Database Connectivity (ODBC) sources. Additional DSOs, such as a JDBC data source, will also be available from Microsoft and third parties.
The following example shows how easy it is to bind to a data source. When viewed, this example displays the first three fields from all the comma-delimited records of the file "sampdata.csv" in a clear, easy-to-read table.
<HTML> <BODY> <OBJECT CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" ID=sampdata> <PARAM NAME="DataURL" VALUE="sampdata.csv"> <PARAM NAME="UseHeader" VALUE="True"> </OBJECT> <TABLE BORDER=1 DATASRC="#sampdata"> <THEAD> <TR><TH>First Field<TH>Second Field<TH>Third Field <TBODY> <TR><TD><SPAN DATAFLD=A></SPAN><TD><SPAN DATAFLD=B></SPAN><TD><SPAN DATAFLD=C></SPAN> </TABLE> </BODY> </HTML>
For a list of topics that describe and explain data binding in full detail, see Data Binding.
DHTML Object Model
The DOM is the foundation of DHTML, providing the interface that allows scripts and components to access DHTML features.
Using the DOM, you can access and manipulate virtually anything within the document. The HTML elements in the document are available as individual objects, meaning you can examine and modify an element and its attributes by reading and setting properties and by calling methods. The text is available through properties and methods on the elements.
The object model also makes user actions—such as pressing a key and clicking the mouse—available as events. You can intercept and process these and other events by creating event handler functions and routines. The event handler receives control each time a given event occurs and can carry out any appropriate action, including using the object model to change the document.
The following example shows how to use the object model to modify a document. This example changes the color of the heading and adds a line of text when the user clicks the mouse in the document.
<HTML>
<HEAD><TITLE>Welcome!</TITLE>
<SCRIPT LANGUAGE="JScript">
function changeMe() {
MyHeading.style.color = "green";
MyText.innerText = "You can do the most amazing things with the least bit of effort.";
}
</SCRIPT>
<BODY onclick="changeMe()">
<H3 ID=MyHeading>Welcome to Dynamic HTML!</H3>
<P ID=MyText>Click anywhere in this document.</P>
</BODY>
</HTML>The preceding example contains an event handler, named changeMe, that processes mouse clicks for the document. The handler uses the all collection of the document object to pick out the H3 and p elements using their ID values. It changes the color of the heading by setting the color property of the STYLE object for that element. It replaces the text in the paragraph by setting the innerText property.
The object model is a superset of the JavaScript Object Model found in Netscape Navigator. This means that portions of the model are compatible with other browsers, even if they do not support DHTML. By following basic guidelines, you can write scripts that take full advantage of the object model when run in Internet Explorer and that provide reasonable results when run in browsers that do not support DHTML.
For lists of topics describing important aspects of the object model, see Working with Windows, Frames, and Dialog Boxes; Scripting with Elements and Collections; and Understanding the Event Model.
For a complete listing of the objects, properties, methods, collections, and methods of the object model, see DHTML References.
Tidak ada komentar:
Posting Komentar