DHTML Utopia: Modern Web Design Using JavaScript & DOM by Stuart contributes to Stylish Scripting: SitePoint’s DHTML and CSS Blog. About The. DHTML Utopia: Modern Web Design Using JavaScript & DOM explores the Document Object Model, remote scripting, Ajax, XML-RPC and. What do Flickr, Google Suggest, Google Maps, and GMail have in common? They all take great advantage of some of the latest modern, unobtrusive DHTML .

Author: Mektilar Tojataxe
Country: Zimbabwe
Language: English (Spanish)
Genre: Career
Published (Last): 8 January 2013
Pages: 14
PDF File Size: 12.81 Mb
ePub File Size: 6.37 Mb
ISBN: 850-2-54563-967-4
Downloads: 45799
Price: Free* [*Free Regsitration Required]
Uploader: Yozshutaur

This title contains over pages of DHTML techniques that enrich the user experience without sacrificing usability or standards-compliance.

Build your own standards-compliant hierarchical navigation menu; create animated tooltips; validate form data using regular expressions and give dynamic feedback to your users; construct an AJAX signup form that can let the user know if their chosen username is already taken, without their having to submit the form itself.

These first four chapters should give you dhtjl taste of the action. As always, you can download this excerpt as a PDF if you prefer. And now, to Chapter 1.

If you already know all these details, you might want to flick through the chapter anyway; you may even be a little surprised by some of it. Mixing these technologies together can result in a humble stew or a grandiose buffet. Websites are written in HTML.

BookNomads: DHTML Utopia

These needs may necessitate a shift away from your previous experiences writing HTML. They may also require a different approach than having your preferred tools write HTML for you. HTML that complies with these rules is said to be “valid. While the set of rules is pretty complex, you can ensure that your HTML is valid by following a few simple guidelines. For now, simply remember that if you cross your tags, each browser will interpret your code in a different way, according to different rules rather than according to the standard.

Any hope of your being able to control the appearance and functionality of your pages across browsers goes right out the window unless you do this right. That information can be typed on a single line, or with a line break after EN”.

I visit that article all the time to cut and paste the one I need! The most important page creation step is to check that your HTML is valid. As mentioned above, browsers rely on a standard that describes how validated HTML should be interpreted.

However, there are no standards to describe how invalid HTML should be interpreted; each browser maker has established their own rules to fill that gap. Trying to understand each of these rules would be difficult and laborious, and you have better things to do with your time.

Sticking to valid HTML means that any problems you find are deemed to be bugs in that browser — bugs that you may be able to work around. Thus, using valid HTML gives you more time to spend with your family, play snooker, etc.

In addition to its validity, your HTML should be semantic, not presentational. What this means is that you hdtml use HTML tags to describe the nature of an element in your document, rather than the appearance of that element.

This approach is utoopia semantic markup — a fancy way of saying, “uses tags to describe meaning.

Modern Web Design Using JavaScript & DOM

First, imagine your Website has a list of links to different sections. That list should be marked up on the basis of what it is: It dbtml look something like this:. Many of the items within a Website are really lists: Similarly, if your list contains items with which comments are associated, maybe it should be marked up as a definition list:.


The important part is that the information in the page is marked up in dht,l way that describes what it is. In essence, it allows you to state how you want each element on your page to look. An element is a piece of HTML that represents one thing: Elements usually correspond to a particular tag and its content.

If you want to look good, you need to learn how to dress up and go to the gym regularly!

You utopiq specify that in your style sheet as follows:. The key point here is to remove the presentation aspects from your HTML and put them into your style sheet.

This makes your job as Website developer much easier. Although the full definition ytopia CSS allows you to do some fairly amazing things, and to control the presentation of your pages to a high degree, utopix every browser supports everything that CSS has to offer. Dytml are two sorts of browser incompatibilities: Missing implementations are relatively easy to deal with: This can be a pain, especially since the most commonly used browser in the world, Internet Explorer for Windows, has some serious holes in its CSS support; however, this “solution” is often a necessary compromise.

Badly implemented standards are a bigger problem. In such cases, the browser gets it wrong. Another step to CSS guru-hood is understanding exactly what each browser does wrong, and how you can work around those failings.

A huge variety of these CSS hacks is documented for each browser in various places around the Web; utopis the section called “Further Reading” for more. While it can be a lot of work, many CSS bugs only become apparent with the complex use of this technology; most CSS is handled perfectly across platforms and browsers without the need for hacks or complex tests. The capabilities of CSS increase all the time, and more “interactive” features are constantly being added to the CSS specification.

JavaScript is a simple but powerful programming dthml. JavaScript works with the Document Object Model, described in the next chapter, to attach actions to different events mouseovers, drags, and clicks.

The first function does the work of converting the text. The second function makes sure that the first is connected to the right HTML tag. The final line performs this connection once the page has loaded in full. Although this means more code, notice how it keeps the HTML content clean and simple.

A good JavaScript development environment makes working with JavaScript far easier than it would otherwise be. This console will clearly display where any JavaScript error occurs on your page, and what that error is. Editors are a very personal tool, and you might have to kiss a fair few frogs before you find your prince in this regard, but a good editor will seriously speed and simplify your coding work. It has a real wow factor! This comprehensive list of CSS hacks shows you which browsers will be affected by a given hack, if you need to hide certain CSS directives or deliver certain directives to a particular browser.

This site demonstrates CSS issues in various browsers and explains how to work around them. The CSS-Discuss mailing list is “devoted to talking about CSS and ways to use it in the real world; in other words, practical uses and applications. A lot of tutorials on the Web cover JavaScript.

DHTML Utopia: Modern Web Design Using JavaScript and DOM

This tutorial provides an introduction to the basics of JavaScript for the total non-programmer. On with the show! One day someone came in and observed, on the paper sticking out of one of the Teletypes, displayed in magnificent isolation, this ominous utopja. Utterly meaningless, but it looks like what… a warning? A Web page is a document. To see that document, you can either display it in the browser utooia, or you can look at the HTML source.


It describes the document content as a set of objects that a JavaScript program can see.

According to the World Wide Web Consortium”the Document Object Model uttopia a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. In Netscape Navigator 2, Netscape Communications introduced JavaScript briefly called LiveScriptwhich gave Web developers scripting access to elements in their Web pages — first to forms, then, later, to images, links, and other features.

By version 4, the two browsers had diverged significantly in terms of their respective feature sets and the access they provided to page content.

Each browser manufacturer implemented its own proprietary means of providing scripting access to layers. Scripts dhtjl wanted to work in both browsers needed to contain code for each method.

The ill-fated “browser wars” were all about these proprietary extensions to the Web, as each manufacturer strove to attract more developers to its platform through the utopai of new features. There was little regard for cross-browser compatibility, although Microsoft copied and supported most of the early innovations made by Netscape.

DHTML Utopia: Modern Web Design Using JavaScript and DOM

While all this was taking place, the W3C developed a specification for the Document Object Model Level 1, which outlined a generic and standard method to access the various parts of an XML document using script.

Both major browser manufacturers implemented the DOM Level 1 specification: The previously existing proprietary specifications were retrospectively titled; since the new standard was DOM Level 1, those old and now deprecated methods were called DOM Level 0.

Each element becomes an element node, and each bit of text becomes a text node. Take this HTML snippet, for example:. I added lots of extra indenting so that you can compare this snippet with the matching DOM tree. The matching DOM tree is shown in Figure 2. As you can see, the a element, which is located inside the p element in the HTML, becomes a child nodeor just childof the p node in the DOM tree. Symmetrically, the p node is the parent of the a node.

The two li nodes, children of the same parent, are called sibling nodes or just siblings. Notice that the nesting level of each tag in the HTML markup matches the number of lines it takes to reach the same item in the DOM tree. From this last example, we can see more clearly why valid HTML, including properly nested elements, is important.

If elements are improperly nested, problems arise. Take the following line:. Each browser fixes malformed content in a different way, which can generate such horrors as an element that is its own parent node.

Keeping your HTML valid avoids all these problems. Trees of nodes turn up a lot in computing, because, among other things, they have a very useful property: Walking a tree is easy because any element node can be considered as the top of its own little tree.

Therefore, to walk through a tree, you can use a series of steps, for example:. This process is known as recursionand is defined as the use of a function that calls itself. Each child is the same type of thing as the parent and can therefore be handled in the same way.

In order to walk the DOM tree, you need a reference to the node at its top: