Learning DOM Scripting

Around Christmas I purchased Jeremy Keith’s new book DOM Scripting: Web Design with JavaScript and the Document Object Model. It has been amazingly good so far (I am on the sixth chapter). I have already found practical uses for the lessons in the book.

Jeremy nails the topic down with clear principles, examples that are easy to follow, and a fun but authoritative tone to his writing. I highly recommend this book to all web designers and developers.

If you’ve been doing JavaScript and client-side scripting for a while, you will learn new ways to make your code degrade gracefully and how to separate the scripts from your CSS and HTML code. If you are new to JavaScript, even better! This book will teach you the basics while giving you a solid education in unobtrusive scripting.

My experience is somewhere in between. I’ve been using JavaScript for some time, but I’ve never understood it very well. Until reading this book, I had also never written any scripts from scratch. Now that I see how easy it is to manipulate a document with the DOM, I will incorporate unobtrusive JavaScript into my daily workflow.

Tips and tricks

These are some of the lessons I have noted:

1. When considering JS for a project, or when writing scripts, a cautious, questioning attitude is desirable
2. A good practice: use double quotes in your JavaScript code, and use the (back slash) for escaping characters within a string
3. Some naming conventions: camelCase for functions, under_score for variable names
4. Good practice: use var when assigning a value to a variable for the first time, especially within a function. This forces it to be local in scope
5. Reminder for when manipulating the DOM: All nodes are objects
6. For conditional statements, if (something != null) can also just be if (something) to shorten the statement
7. The methods getAttribute and setAttribute only work on element nodes
8. Here are some useful methods used on the document object:
   • getElementById
   • getElementsByTagName
   • getAttribute
   • setAttribute
   • childNodes
   • firstChild
   • lastChild
9. Instead of browser sniffing, use object detection: if (!document.getElementsByTagName) return false;
10. Use safety checks to add object detection in functions to help separate code from markup. If id or class names change, the JavaScript won’t get called. It’s important to have these tests and checks both for backwards compatibility and for future use.

Some bad uses of JavaScript

Also, some of the wrong habits that I need to change:

1. Using javascript: pseudo-protocol to send links to a new window (for example)
2. Using inline event handlers
3. Relying on document.write and innerHTML for modifying markup
4. Avoid onkeypress if possible, since onclick works with both mouse AND keyboard!

Personal JavaScript Updates

Just as learning semantic markup for HTML documents and lean, clean CSS for style sheet use, there are now a lot of bad uses of JavaScript coming to my attention on sites that I own or operate. For one, I need to get all JavaScript out of the body element of my web pages. Next, inline event handlers need to be moved to the JavaScript file instead of being in the HTML.

Another example: I often use JavaScript to obfuscate email addresses and form action paths. Doing it in this way might not be unobtrusive (it doesn’t degrade nicely) unless I can figure out a way to return a statement of [at] type if JavaScript is not supported. This is worth pursuing more…Of course, there are always server-side solutions but I don’t always have access to the server on client projects.

Worth it’s Weight

I am only 6 chapters into DOM Scripting: Web Design with JavaScript and the Document Object Model, but it has already paid for itself. By the end of the book, it will be worth it’s weight in gold. Thanks Jeremy and hopefully others will find similar lessons in their own web work.

Visit the book’s companion web site and purchase the book on Amazon.com.

Published by