Unobtrusive JavaScript

Unobtrusive JavaScript is a general approach to the use of client-side JavaScript in web pages so that if JavaScript features are partially or fully absent in a user's web browser, then the user notices as little as possible any lack of the web page's JavaScript functionality. The term has been used by different technical writers to emphasize different aspects of front-end web development. For some writers, the term has been understood more generally to refer to separation of functionality (the "behavior layer") from a web page's structure/content and presentation, while other writers have used the term more precisely to refer to the use of progressive enhancement to support user agents that lack certain JavaScript functionality and users that have disabled JavaScript. Following the latter definition, unobtrusive JavaScript contributes to web accessibility insofar as it helps ensure that all users—whatever their computing platform—get roughly equal access to all of the web page's information and functionality.

Overview

A typical client-side dynamic web page can be conceived as consisting of four parts: the marked-up content (HTML), the style sheet (CSS), client-side JavaScript, and embedded objects such as images. The client-side JavaScript part can be conceived as enhancing the other parts by adding features or functionality that would not be possible without JavaScript.

The concept of "unobtrusiveness" in relation to client-side JavaScript was coined in 2002 by Stuart Langridge in the article "Unobtrusive DHTML, and the power of unordered lists". In the article Langridge argued for a way to keep all JavaScript code, including event handlers, outside of the HTML when using dynamic HTML (DHTML). He said that the purpose of this kind of organization of code was "providing a better user experience for people whose browsers can support it, and not affecting those whose browsers cannot", while also making scripting easier for web developers. Langridge later expanded upon this thought and emphasized that the core meaning of "unobtrusive" is that "if a given Web browser doesn't support the DHTML features you're using, that absence should affect the user experience as little as possible". In other words, for Langridge, "unobtrusive" principally refers to users' experience of the absence of JavaScript features in a given situation.

Variant definitions

Other authors have described variations on the essential elements of unobtrusiveness.

David Flanagan's book JavaScript: The Definitive Guide (2006) said that while there is no specific formula, there are three main goals of unobtrusive JavaScript:

• To separate JavaScript from HTML markup, as well as keeping modules of JavaScript independent of other modules using basic conventions such as the use of namespaces to prevent namespace collisions and the use of module initialization code;
• To degrade gracefully—all content should be available without all or any of the JavaScript running successfully;
• To not impede the accessibility of the HTML, and ideally to improve it, whether the user has personal disabilities or are using an unusual, or unusually configured, browser.

The Web Standards Project, in its JavaScript Manifesto (2006), said that the "purpose of JavaScript is enhancing the usability of web pages by adding interaction to them", and described four benefits of unobtrusive DOM scripting:

1. Usability: An unobtrusive DOM script does not draw the attention of the user—"visitors just use it without thinking about it."
2. Graceful degradation: Unobtrusive DOM scripts never generate error messages, in any browser, even when they fail. If features cannot be presented properly, they silently disappear.
3. Accessibility: If any script fails, the page still delivers its core functions and information via the markup, stylesheets and/or server-side scripting.
4. Separation: For the benefit of other and future web developers, all JavaScript code is maintained separately, without impacting other files of script, markup or code.

For the Paris Web Conference in 2007, Christian Heilmann identified seven rules of unobtrusive JavaScript, some of which were wider in scope than other narrower definitions of "unobtrusive":

1. "Do not make any assumptions": Defensive programming techniques should allow for the possibilities that JavaScript may not run, the browser may not support expected methods, the HTML may have changed, unexpected input devices may be in use and other scripts may either not be present or may be encroaching on the global namespace.
2. "Find your hooks and relationships", such as IDs and other aspects of the expected HTML.
3. Leave traversing individual DOM objects to the experts, such as to the CSS handler built into the browser where possible.
4. "Understand browsers and users", particularly how browsers fail, what assumptions users make, and unusual configurations or usages.
5. "Understand events", including how they 'bubble' and the features of the Event object that is passed to most event handlers.
6. Play well with other scripts by avoiding global function and variable names.
7. "Work for the next developer" by using self-explanatory variable and function names, creating logical and readable code, making dependencies obvious, and commenting any code that still might confuse.

The broader definitions of unobtrusive JavaScript have much in common with general programming best practices, such as encapsulation and abstraction layers, avoidance of global variables, meaningful naming conventions, use of appropriate design patterns, and systematic testing.

Further reading