Accelerated DOM Scripting
3 comments | Posted: 28 June 08 in Books, by Nathan Smith
Luckily, there are plenty of tools available, but one has to look beyond the W3C to find them. Such helpful allies are the Firebug and Web Developer extensions for Firefox, and JSLint – an irreplaceable JS code verifier that offers a variety of strictness and integrity settings. Snook explains how to use these to your advantage, using
console.log to catch errors in Firebug, and writing well structured code that passes minification and obfuscation.
Snook explains the importance of taking a wholistic approach to web development, treating HTML and CSS with due respect, ensuring semantics in markup and steering clear of using JS presentational purposes that would be better handled in a stylesheet. He also explains the concepts of nodes as they appear in a page by showing them in a tree structured chart. For instance, a
<p> tag is a node, but so is the sum total of the text inside it. As a general rule of thumb, all tags are nodes, but so are their non-tag contents. This is important to remember when attempting to manipulate the DOM via
Another tricky concept, which is handled differently depending on the browser, is event bubbling. Despite the name, this has nothing to do with socializing and everything to do with the way actions are triggered in a browser. Snook explains how this can be used to one’s advantage, by assigning an event listener to a containing element, such as a
<ul>, and when it is clicked, checking if the click originated from a particular child element, such as a link within a
<li> with a certain
class. Now you are cooking with fire, because you can build out complex menu systems. For some event basics, see this article.
After laying a solid foundation of teaching the fundamentals, the book moves on to the juicier parts – using libraries. Snook cautions against jumping straight into using a library without understanding the nuances of what is happening “under the hood,” because if you ever need to debug at a core level, you’re stuck.
That being said, in chapter 5 he shows how to do some complex data exchange, mimicking a desktop environment, mentioning how this could be enhanced by Prototype, YUI or jQuery. Chapter 6 is all about doing the really cool stuff – adding visual motion to your pages. Snook shows how to achieve identical tweening effects with Scriptcaculous, jQuery and Mootools.
In chapter 7, Stuart Langridge takes the helm, and explains how to write your own custom form validation. Let me just say from experience that this is typically the best way to go, because the business requirements around what constitutes a valid form entry can often get pretty hairy. For me, it is usually easier to write this by hand, with the help of a library, rather than try to find a one size fits all plugin. Langridge shows how to do this on both the server side, via PHP as well as in the browser using JS. It should be noted that whether or not you’re doing client-side validation, server-side is a must-have (JS can be switched off, PHP can’t).
In chapter 8, Aaron Gustafson shows how to build an incredibly slick FAQ page, using JS to create an accordion style menu system. He does it in such a way that if JS is unavailable, the it reverts back to a standard page. This notion of adding functionality is called progressive enhancement whereas orchestrating an acceptably elegant fall-back scenario is termed graceful degradation.
For those familiar with Ruby on Rails, chapter 9 is for you. Dan Webb goes step by step, showing how to build a dynamic Ajax drive help system. He uses Prototype for some of the heavy lifting of data processing, and his own custom extensions dubbed Low Pro to assist in making his code unobtrusive. With the core functionality in place, he uses Moo.fx to add in animations.
Aside: The aforementioned Mootools is a full library which had its origins in Moo.fx. Mootools and Prototype both include core DOM functions, and can be considered mutually exclusive. However, if you want the animation style and syntax of Mootools, and area already using the base of Prototype, Moo.fx is a nice add-on. Likewise, Moo.fx and Scriptaculous are mutually exclusive.
Well, that wraps up my review. Hopefully it has encouraged you to dig in further to this well written book. The people involved definitely know their stuff, and the topics covered are highly relevant to the fast pace of web development today.
Discuss This Topic
Comments closed after 2 weeks.