Unobtrusive JavaScript.

July 16, 2008

There are many developers who do not consider how their web site might function if a user has JavaScript disabled within their web browser. Unobtrusive JavaScript (UOJS) methodology is a key component that encourages developers to build web pages that do not rely on JavaScript to deliver core content.

Usually the most common way to implement event based JavaScript is to embed event-handlers directly into HTML tags i.e., onclick, onmouseover, onload etc, or to generate dynamic mark-up using document.write functions. Unfortunately these techniques aren’t always implemented using the appropriate methods and sometimes go against the UOJS methodology.

It is important to remember that a web page should still be functional without any scripting and caution should be taken to avoid the over use of functions and dynamic content generation. The key is to separated web content into appropriate layers (i.e., Structure – HTML, Presentation – CSS and behavioural – JavaScript) so that each layer complements the layer that proceeds it.

Wherever possible, each layer should be separated into its own file and hooked into the page via IDs and Class attributes. Dynamic page content should be inserted after a page has fully loaded so that if JavaScript is disabled users aren’t left with a partially functioning page. UOJS stresses that the behavioural layer (JavaScript) should act as an enhancement to a page rather than a dependency.

Loading JavaScript Files
There are two ways to load JavaScript into a HTML document. One is to add the JavaScript within the head tags and the other is to add the script before the closing body tag. The first method can cause loading issues as it can slow down the page loading process. By default functions placed within the head tag are fired after the browser has rendered the page content. This means that the extra time it takes to download the necessary external JavaScript files is pointless, as the functions are called after the page content has loaded. If a web page relies on a particular JavaScript function to dynamically render or position content this can cause page elements to display incorrectly or jump when the desired function is eventually fired.

A more ideal solution would be to place JavaScript at the bottom of a web page so that by the time the function is fired the DOM is fully loaded and ready to be manipulated since the script is being loaded after the HTML. This method decreases the time it takes to load the page and forces the developer to build a page that doesn’t initially rely on JavaScript.

JavaScript Disabled Browsers
In circumstances where we have to generate dynamic HTML a useful method would be to add HTML place holders. These place holders take the place of the pre-rendered dynamic content (using CSS to set ‘visibility:hidden’ in-order to preserve the elements dimensions) and once the page has fully loaded we can generate the appropriate dynamic content and unhide the place holders via the JavaScript that loads at the end of the page.

You may be thinking that this contradicts the purpose of writing UOJS as users with JavaScript disabled will be left with parts of the browser content missing. The point of this technique is that by leaving the rendering of dynamic content to the end of a page users with JavaScript turned off will still be able to view the page without any page errors. Missing content can always be replaced by some informative information indicating why the content is absent. The above technique is highly recommended for web sites that are heavily reliant on JavaScript.

Although this blog post briefly touches on the subject of Unobtrusive JavaScript, hopefully it has wetted you appetite to go on and investigate the subject further. There are many guidelines and codes of conduct when applying UOJS so it is strongly advised that readers of this blog post explore this topic in more detail (especially articles written by Jeremy Keith). It is not always possible to implement all the concepts of UOJS as in some cases it may even break an application. A good working knowledge of this methodology, especially at the early stages of development may improve scalability, portability and efficiency of your future web applications.