JavaScript Patterns

Chapter 8. DOM and Browser Patterns

In the previous chapters of the book, the main focus was on the core JavaScript (ECMAScript) and not so much on patterns for using JavaScript in the browser. In contrast, this chapter explores a number of browser-specific patterns, because this is the most common environment for JavaScript programs. Browser scripting is also what most people have in mind when they say they don’t like JavaScript. And that’s understandable, given all the inconsistent host objects and DOM implementations that exist in the browsers. It’s obvious that we can benefit from any good practices that help make the client scripting less of a pain.

In this chapter you see some patterns divided into several areas, including DOM scripting, event handling, remote scripting, strategies for loading JavaScript on the page, and steps to deploying JavaScript to production websites.

But first, let’s start with a brief and somewhat philosophical discussion on how to approach client-side scripting.

Separation of Concerns

The three main concerns in web application development are:

Content

The HTML document

Presentation

The CSS styles that specify how the document looks

Behavior

The JavaScript, which handles the user interaction and any dynamic changes to the document

Keeping the three concerns as separate as possible improves the delivery of the application to a vast array of user agents—graphic browsers, text-only browsers, assistive technology for disabled users, mobile devices, and ...