Unobtrusive JavaScript

From Wikipedia, the free encyclopedia

This article relies largely or entirely upon a single source. Please help improve this article by introducing appropriate citations of additional sources. (December 2008)

This article needs additional citations for verification. Please help improve this article by adding reliable references (ideally, using inline citations). Unsourced material may be challenged and removed. (December 2008)

"Unobtrusive JavaScript" is an emerging technique in the JavaScript programming language, as used on the World Wide Web. Though the term is not formally defined, its basic principles are generally understood to include:

• Separation of functionality (the "behavior layer") from a Web page's structure/content and presentation^[1]
• Best practices to avoid the problems of traditional JavaScript programming (such as browser inconsistencies and lack of scalability)
• Progressive enhancement to support user agents that may not support advanced JavaScript functionality^[2]

[edit] The need for a new paradigm

JavaScript has long had a reputation as a clumsy, hackish language unsuitable for serious application development^{[citation needed]}. This has been largely due to inconsistent implementations of the language itself and the Document Object Model in various browsers, and the widespread use of buggy cut-and-paste code. Runtime errors were so common (and so difficult to debug) that few programmers even tried to fix them, as long as the script behaved more or less the way it was supposed to^{[citation needed]}; scripts often failed completely in some browsers.

The recent emergence of standardized browsers, JavaScript frameworks and high-quality debugging tools have made organized, scalable JavaScript code possible, and the emergence of AJAX and Web 2.0 interfaces has made it essential.

Whereas JavaScript was once reserved for relatively simple and non-critical tasks such as form validation and decorative novelties, it is now being used to write large, complex codebases that are often part of a site's core functionality. Runtime errors and unpredictable behavior are no longer minor annoyances; they are fatal flaws.

Unobtrusive JavaScript can be seen as part of the larger Web standards movement; much as the demand for cross-browser compatibility has driven the increasing emphasis on standardized markup and style, the increasing demand for rich Internet applications is driving the movement toward the more robust methods of unobtrusive JavaScript. The term was invented in 2002 by Stuart Langridge.^[3]

[edit] Separation of behavior from markup

Traditionally, JavaScript often was placed inline together with an HTML document's markup. For example, the following is a typical implementation of JavaScript form validation when written inline:

<input type="text" name="date" onchange="validateDate(this);" />

However, the purpose of markup is to describe a document's structure, not its programmatic behavior. Combining the two negatively impacts a site's maintainability for the same reason that combining content and presentation does: if a site contains hundreds of such date fields, adding the appropriate onchange attribute for each one (and modifying them later, if necessary) can be a labor-intensive process.

The unobtrusive solution is to register the necessary event handlers programmatically, rather than inline. This is commonly achieved by assigning a particular CSS selector to all elements which need to be acted upon by the script:

<input type="text" name="date" />

The script can then look for all input elements with the name date, and set them up accordingly:

Using native JavaScript:

window.onload = function(){ //Wait for the page to load.
    var inputs = document.getElementsByTagName('input');
    for(var i=0,l=inputs.length;i<l;i++){ 
        input = inputs[i];
        if(input.name && input.name=='date'){ 
            input.onchange = function(){ 
                validateDate();
            }
        }
    }
};
 
function validateDate(){
	//Do something when the content of the 'input' element with the name 'date' is changed.
}

The following script is specific to the jQuery JavaScript library:

$(document).ready(function(){ //Wait for the page to load.
	$('input[name=date]').bind('change', validateDate);
});
 
function validateDate(){
	//Do something when the content of the 'input' element with the name 'date' is changed.
}

Because the intended purpose of the name attribute is to describe the semantic role of an element, this approach is consistent with modern standards-based markup practices.

The following script is specific to the MooTools JavaScript library:

window.addEvent("domready",function() {
	//code here will be executed when the dom has loaded
})

[edit] Graceful degradation

This can be achieved by making sure links and forms can be resolved properly and rely not solely on Ajax. In JavaScript, e.g. a form submission can be halted by using "return false". If nothing goes wrong, Ajax code will be executed and the form submission will be skipped. If any problems occur with the user agent’s Ajax support or if the user does not have JavaScript enabled, the form will be submitted and the traditional version of the action will be performed.^[4]

[edit] Best practices

Though the essence of unobtrusive JavaScript is the concept of a separate behavior layer, advocates of the paradigm generally subscribe to a number of related principles, such as:

• Strict adherence to the W3C DOM and event model, and avoidance of browser-specific extensions.
• More generally, JavaScript best practices often parallel those in other programming languages, such as encapsulation and abstraction layers, avoidance of global variables, meaningful naming conventions, use of appropriate design patterns, and systematic testing. Such principles are essential to large-scale software development, but have not been widely observed in JavaScript programming in the past; their adoption is seen as an essential component of JavaScript's transition from a "toy" language to a tool for serious development.

[edit] See also

• AJILE
• Progressive Enhancement

[edit] External links

This article's external links may not follow Wikipedia's content policies or guidelines. Please improve this article by removing excessive or inappropriate external links.

• The Behaviour Layer: Using JavaScript for good, not evil
• Unobtrusive JavaScript
• A List Apart: Behavioral Separation
• Unobtrusive JavaScript plugin for Ruby on Rails
• Unobtrusive Javascript Presentation - Background and overview
• AJILE, A JavaScript module that supports Unobtrusive JavaScript development
• Unobtrusive JavaScript Plugin for the Symfony PHP framework
• Quirksmode: Examples of how to write unobtrusive javascript
• Unobtrusify - a simple, practical demonstration of unobtrusive JavaScript

[edit] References