JavaScript Best Practices

Here we discuss modern best practices in using JavaScript, including using unobtrusive JavaScript and progressive enhancement. This is an overview of the topics. Further details can be found in the links below.

JavaScript Support Is Not Always Available

First of all, you must accept the fact that some people will be using browsers that either don't support JavaScript at all or choose to switch support for it off. Some people switch off JavaScript support for security reasons. Some companies will do that company wide. Security isn't the only reason, however.

Many people, including this author, switch it off for annoyance reasons. For example, scripts that remove the context menu, change the text in the status bar at the bottom, or resize and/or move the window around can be annoying. Many newer browsers provide options to turn those features off without disabling JavaScript entirely. But there are more things that JavaScript can be used to do that can be found as annoying. An example of that is automatically scrolling text. The WCAG 1.0 state that all moving or scrolling objects should be able to be paused or stopped. Unfortunately, there are many pages and scripts out there that don't follow that guideline.

I use Firefox's NoScript extension which blocks JavaScript (which I write scripts in on a regular basis) and Flash except for domains that I specifically allow. Unfortunately there are many sites that use JavaScript to add the primary navigation to their pages. There is no good reason to do that, since at least one form of server side includes are available on most web servers. If they're not available on yours then you should probably find a new server. This is one of PHP's many capabilities that I use. Most, if not all, other server-side languages have this capability too. Besides being annoying and/or confusing to users of browsers in which JavaScript support is not enabled, using JavaScript to add navigation to the page also hides it from search engines. Most people I know want search engines to index their sites.

I suggest you read these other articles that explain why you should treat JavaScript like a doubled edge sword, lest you injure yourself with it.

Unobtrusive JavaScript

The basics of unobtrusive JavaScript are using DOM scripting to be able to keep all JavaScript in external .js files or at least in <script> elements, thus removing the need for messy inline event handlers. These techniques also have the advantage of making progressive enhancement easier and making it easier to make scripts fail silently when they fail. Another benefit to keeping the JavaScript in external files is that you can maintain it separately and even easily apply the same script to multiple pages.

For the specifics of how to start doing this, I recommend you read some or even all of the following articles on this subject.

Progressive Enhancement

This refers to using JavaScript and CSS to make pages "better" when support for either or both of them is available.

Example Case

For example, if we want to make some element be shown when we click on another element, we use JavaScript to hide the element when the DOM or page has finished loading instead of just doing it with the CSS. Therefore, when JavaScript support is not available, the user can still access the content of the element that would otherwise be hidden (assuming a JS off/CSS on scenario).

The older way, using graceful degradation, would be to use a <noscript> element in some manner (there are a few possible ways) to make the content available to those with JavaScript disabled. There's a problem that's been known to happen with that: a user is using a browser with JavaScript enabled, but a firewall blocks the JS file. Since the browser has JavaScript support enabled, the contents of the <noscript> element will not be used and yet the JavaScript script will have failed to execute.

Further reading

Last update: 2007-04-18