Xem mẫu
Lesson 15. Creating Applications with Dynamic HTML and AJAX
Dynamic HTML offers you something unique: the capability to make changes in web pages on the fly. Using conventional HTML, web pages are loaded by a browser and just sit there until you click a link or interact with forms. That`s pretty simple, but it can be static and boring.
People have improved upon static web pages by using a variety of technologies outside the realm of HTML. Any number of platforms are available for creating server-side web applications. You can embed Shockwave and Flash in your pages to add animation and interactivity, and use Java applets to provide application-like functions. However, these methods rely on browser plug-ins or virtual machines (which can be messy), and can lead to longer download times.
Dynamic HTML is different. DHTML, as it is commonly known, enables you to create web pages that look, feel, and act a lot like the other programs you use on your computerusing the web browser as an interfacewithout having to rely on external programming solutions. AJAX takes that one step further, and allows you to actually exchange data with the server from within your web page, without submitting a form or clicking on a link.
In this Lesson
Today`s lesson is a full plate of information, so let`s get right to it. In this lesson, you will learn about the following:
● Defining Dynamic HTML and the technologies that make it possible ● Understanding the Document Object Model (DOM)
● Creating cross-browser routines with DHTML by testing browser capabilities ● Examples of using DHTML to manipulate elements on a page
file:///G|/1/0672328860/ch15.html [19.12.2006 13:49:43]
What Exactly Is Dynamic HTML?
Simply put, Dynamic HTML uses normal HTML elements to create a web page that relies on style sheets for element formatting, and scripting to dynamically change HTML content, style, or positioning, without having to re-download the page from the server. Dynamic HTML isn`t a thing by itself, but a collection of technologies working together to produce an interactive interface. So, what can you do with DHTML? The possibilities are endless! Just to whet your appetite, here are a few of them:
● Move objects around the web page ● Show or hide elements
● Dynamically alter the color and size of web content
● Provide drag-and-drop functionality similar to that used by modern graphical operating systems (such as Windows and the Mac OS)
Dynamic HTML was born with the advent of the "fours." The World Wide Web Consortium developed HTML 4.01 and released the official recommendation at about the same time Microsoft and Netscape released their competing web browsers, Internet Explorer 4 and Netscape 4. There was a flurry of activity surrounding all this. HTML 4.01 promoted several new features to better integrate itself with cascading style sheets and respond to user events. Microsoft and Netscape were competing hard for market share in the browser war, and the result of it all was a drive for something different: a level of user interactivity and "dynamism" in web pages that previously was impossible without resorting to external programming. DHTML was born.
For DHTML to work, it requires the following three key technologies supported by the web browser:
● HTML
● Cascading style sheets ● Scripting
Style sheets are wonderful after you know how to use them, and are a critical component of DHTML. Although DHTML technically isn`t dependent on any one type of style sheet, the official W3C style sheet technology, cascading style sheets (CSS), is the standard. CSS enables you to format elements on your web pages using properties, such as font, color, and spacing, as well as positioning items on the web page.
DHTML takes style to a new level. Rather than creating a style rule or positioning an element on the page and then forgetting about it, you can use DHTML to dynamically alter the visual style or position of your elements. As with HTML, there are inconsistencies in how various browsers implement CSS. None have fully implemented all of the specifications, but also browsers have implemented portions differently. Things are a lot better now than they were a few years ago. The latest versions of Internet Explorer, Netscape, and Opera offer much closer adherence to the HTML and CSS standards than they once did. That said, complex dynamic HTML applications require lots of testing and many workarounds to work on all the browsers that are still in common use.
Finally, scripting is a sort of glue that holds together everything in DHTML. Scripting is the engine that makes DHTML go. Using scripting, you can alter the content on your page when the page loads in response to any of the events discussed in Lesson 12, "Introducing JavaScript," or even when the user
leaves the page.
Caution
If you`ve caught on to the "inconsistent implementation across web browsers" pattern here,
file:///G|/1/0672328860/ch15lev1sec1.html (1 von 2) [19.12.2006 13:49:44]
you should know that official specifications may bear little resemblance to reality. You should always read any browser-specific documentation you can find to ensure that the web browsers you`re targeting support what you`re attempting to accomplish. Even then, some experimentation will usually be required.
The scripting lingua franca of today is JavaScript. JavaScript was the first scripting language to be implemented in a web browser, and currently enjoys the most widespread support across different web browsers. Although you can create DHTML using other scripting languages such as VBScript, I recommend always using JavaScript unless you are in a Microsoft-only environment (such as an intranet).
As you`ll see when we get to the DHTML examples, a large part of DHTML involves creating scripts that manipulate elements on a page. You`ll probably need to fall back on the discussion of JavaScript back in Lessons 12, "Introducing JavaScript," and 13, "Using JavaScript in Your Pages," to refresh your memory
of JavaScript at times. Because DHTML is really just an application of JavaScript, it might even be helpful to think about this lesson as a follow-up to those.
Two final notes about what DHTML actually is: DHTML (the scripting part of it) relies on something called a Document Object Model (DOM) to identify, create, and manipulate elements on a web page. For example, you have to be able to identify an element, such as an image, in order to manipulate it with a script. Likewise, you must be able to identify an element`s style in order to change it. This is what the DOM does. It provides a bridge between the content of the web page and scripts.
Finally, DHTML relies on event handling to track the actions of the web browser and user. When the page loads, the onload event is triggered. Likewise, when a visitor clicks a button in a form, several events might be triggered that you, the DHTML author, can use to run scripts. Event handling is covered in more depth later on.
file:///G|/1/0672328860/ch15lev1sec1.html (2 von 2) [19.12.2006 13:49:44]
Using the Document Object Model
When you think of a web page, you probably think of the document that`s produced when it`s displayed in the browser, or the HTML codes that you see when you use your browser`s View Source functionality. However, there are other ways that the same data can be represented. Modern web browsers create a representation of a page that can be accessed via scripts in a standardized fashion. This representation is called the Document Object Model, or DOM. Under the DOM, the page content is treated as a tree of objects. I`m using the word objects the way a software developer would. In that parlance, an object is a component that generally has different properties, methods, and event handlers. A property is data that somehow describes the object. A method is a function you can call to make the object do something or to manipulate the object itself. An event handler is a hook you can use to enable the object to respond to an action (generally an action performed by the user). If you were speaking grammatically, you`d say that properties are an object`s nouns and methods are its verbs.
Note
Fully realizing the capabilities of the DOM requires a depth of knowledge beyond the scope of this book. But, as with other webrelated code, you can learn a lot by cutting and pasting scripts and taking the time to study their results.
DOM Data Types
When a DOM representation of a web page is created, all of the objects that are used to construct the page are assigned to various categories, which are called interfaces in the world of object-oriented programming. If an object has a certain interface then it has the properties and methods associated with that interface. For example, all of the tags on a page have the element interface, which means that they support methods such as getAttribute and setAttribute. The generic data types that make up the DOM are listed in Table 15.1.
Table 15.1. Interfaces in the DOM
Data Type
document
node
element
nodeList
attribute
NamedNodeMap
Purpose
This is the root object in the DOM.
All of the other interfaces mentioned are children of the node interface, and express all of its properties and methods.
All the tags on a page express the element interface, and thus inherit all its properties, methods, and event handlers.
An array (or list) of elements. Some method calls return lists of elements. For example, you can fetch all the items in a list or all the children of any element. The results are returned in a nodeList.
Attributes of tags have their own interface.
An alternative form of list for dealing with groups of elements.
file:///G|/1/0672328860/ch15lev1sec2.html (1 von 6) [19.12.2006 13:49:45]
Objects in the DOM
The base of the DOM tree is the document object. The document object should look familiar to you from
the examples in Lesson 13. You can call methods of the document object directly, such as document.write () to add content to the page, or you can reference children of the document object, using methods
such as getElementById() or getElementsByTagName().
Even if you don`t explicitly use the document object, you`re still accessing the DOM any time you reference objects on the page. For example, in the form validation example in Lesson 13, I passed the form object to the validation function using the onsubmit handler and this. In that case, this referred to
the form being validated. Had the form not been passed to the function using an argument, it could have been referenced by name or count using the document object.
Another object that you`ll deal with frequently is window. The window object (unlike document) is not formally part of the DOM, but browsers include it in order to provide an interface to the browser itself. For example, the height and width of the browser window are properties of the window object rather than the document object.
Each element on the page is also an object unto itself and is accessible using the document object. Using generic methods, you can get to all the children of the document object, but a number of convenience methods are included to give you shortcuts to things such as the forms, images, and links on a page. Before going further, let`s look at an example.
There`s More to the DOM
The DOM consists of many more objects as well, but discussing each of them in detail is beyond the scope of this lesson. There are up-to-date online DOM references provided by the browser vendors online. Microsoft`s DOM/DHTML reference is at http://msdn.microsoft.
com/workshop/author/dhtml/_dhtml_node_entry.asp.
The DOM reference for Netscape and Mozilla is at http://www.mozilla.org/docs/dom/ domref/.
Opera attempts to hew as closely to published standards as possible. Notes on their departures from the specification can be found at http://www.opera.com/docs/specs/.
Using the DOM
You should be thankful that I`m not going to discuss the DOM in detail because it would be incredibly dry and boring, and chances are whatever I put in this book would be at least somewhat out of date not a year after it is published. For reference materials on the specific properties, methods, and event handlers for each object in the DOM, you should rely on the vendor references. Generally speaking, web programmers use the DOM in a few specific ways. I`ll go over those.
file:///G|/1/0672328860/ch15lev1sec2.html (2 von 6) [19.12.2006 13:49:45]
...
- tailieumienphi.vn
nguon tai.lieu . vn