Accelerated DOM Scripting

3 comments | Posted: 28 June 08 in Books, by Nathan Smith

Accelerated DOM Scripting Accelerated DOM Scripting with Ajax, APIs, and Libraries – despite its lengthy title, is a succinct glimpse into the world of JavaScript programming. Primarily written by developer extraordinaire Jonathan Snook, this book also includes contributions from a veritable who’s-who of the JS world: Aaron Gustafson, Stuart Langridge, and Dan Webb. They cover a myriad of topics, including object oriented programming, DOM traversal, and popular libraries:

The book starts off at a reasonable pace, explaining a brief history of how JavaScript came to be, debunking some of the myths around its viability, and showing some of the differences in implementation between HTML and XHTML. Namely, the use of CDATA for inline scripts. Snook also clarifies the meaning of Ajax, which originally stood for “Asynchronous JavaScript and XML,” but has since come to encompass any asynchronous browser – server interaction.

Another topic covered by Snook is that of code maintainability and debugging. While JavaScript comprises one-third of the “holy trinity” (HTML, CSS, JS) of web development, the W3C only offers validation services for the first two. As one transitions from a code savvy designer who can do HTML and CSS, it can be somewhat confusing, left to one’s own devices to learn JS.

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 cloneNode.

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

  1. 1 Erwin Heiser

    Nice review, made me want to read it (downloaded the ebook from the Apress website) :)

  2. 2 Nathan Smith

    Erwin: I’m glad you found my review helpful. I saw on your site that you do HTML, CSS and ExpressionEngine work. I think this book will help to compliment that skill-set. Getting familiar with JavaScript is a good investment.

  3. 3 Aaron Gustafson

    Thanks for the great review!


Comments closed after 2 weeks.