Introduction

Document Object Model (DOM) scripting is often misrepresented as any sort of scripting on the Web, but pure DOM scripting includes only those features and methods incorporated into a W3C DOM specification—that means no proprietary browser features. In a perfect world, we could follow the standards, ignore proprietary features, and finish with an agnostic script that just works on any device. But it’s not a perfect world—yet. As we all know, not all devices or browsers are W3C standards compliant, so where does that leave developers like us when we need to accommodate everyone, and how do we stay true to the W3C DOM?

When trying to answer those questions and deal with multiple browsers while maintaining proper DOM compliance, the idea for this book was born. This book answers those questions and tackles a number of other topics as well:

  • Dive deeper into the W3C DOM specifications and fish out the little bits that are often misunderstood, while still providing equivalent options for nonstandard browsers.
  • Go further with new methodologies, such as Ajax client-server communication, and push the limits of Ajax to provide a more interactive experience.
  • Experiment with some great third-party source that can take away some of the mundane day-to-day tasks.
  • Understand and create your very own library of DOM methods that you can use every day.

With these newfound abilities come many temptations. Too often our DOM scripting adventures are focused on the new glittery features and stray from the basics of good, clean web application design. As a result, I’ve emphasized best practices throughout the book and provided solutions that focus on usability and accessibility for both the end user and you, the developer or designer. You can keep this book next to your computer as a reference or read it cover to cover—it’s up to you. Either way, after working through the mix of theory, code, examples, and case studies you’ll find inside, you’ll be well on your way to understanding exactly how and why these advanced concepts work—not just what they do to your document.

Who this book is for

AdvancED DOM Scripting: Dynamic Web Design Techniques is for any web developer or designer who’s dabbled with the DOM and wants to jump to the next level. With this book’s straightforward explanations, you can pick up the advanced concepts with ease, but you’ll get much more out of this book if you’ve already had a little experience with DOM scripting and web standards concepts.

How this book is structured

This book is structured into three main parts, and throughout, you’ll be assembling your own library of useful DOM methods. Each chapter will build on the concepts learned in the previous chapters, so each part of the book will act as one cohesive subject, rather than each chapter standing completely on its own.

Part One, “DOM Scripting in Detail,” deals with the ins and outs of various W3C DOM specifications, including what is and isn’t supported in noncompliant browsers. Beginning with best practices right from the start, you’ll be introduced to the DOM2 HTML and DOM2 Core specifications as well as the DOM2 Events and DOM2 style. Each chapter will include a number of browser-agnostic examples. You’ll also start to build up your personal scripting library, adding various methods for accessing and manipulating the DOM, styles, and events. These methods will be browser agnostic and will allow you to easily develop your applications using a common set of methods—which you’ll create yourself—so you know what’s going on in them. Part One will culminate a case study in Chapter 6, where you’ll build an interactive image cropping and resizing tool.

After covering everything you’ll need to know to manipulate and access the various aspects of your document, Part Two, “Communicating Outside the Browser,” focuses on Ajax and clientserver communications. I go beyond just a simple how-to and explain the whys, as well as the pitfalls you’ll encounter when integrating Ajax interfaces. Part Two finishes by putting your skills to the test, while combining traditional and recent communication methodologies, to create a file uploader with a real progress bar.

Finally, in Part Three, “Some Great Source,” I’ll focus on third-party source, including libraries and application programming interfaces (APIs). You’ll learn how to take advantage of great DOM scripting libraries to speed up your development, including the use of a number of effects to give your web application a little more flare. Also, you’ll see how you can integrate things like interactive maps and project management tools using freely available APIs. These sources can offer a lot of advanced programming with minimal effort on your part—but it’s important that you understand the hows and whys from Parts One and Two, so that you’ll better understand and appreciate the great source in Part Three. This book concludes with a case study by Aaron Gustafson that takes select elements to a whole new level.

Prerequisites

Creativity, interest, and the desire to learn are about all you need to have before you pick up this book—though a little familiarity with the DOM, JavaScript, web standards, and CSS won’t hurt. Where possible, I’ve tried to explain advanced topics in a manner that a novice web developer will still understand.

The code samples in this book have been tested to work with the following browsers, and I’ll explain the various caveats for each as the book progresses:

  • Firefox 1.5+
  • Microsoft Internet Explorer 6+
  • Safari 2+
  • Opera 9+

The code should work with other standards-compliant browsers as well, but older browsers will simply degrade to a DOM-script-free version.

© Copyright 2007 Jeffrey Sambells.