LearnWhat is Unobtrusive JavaScript and Why it’s Important?

Unobtrusive JavaScript is a best practice methodology for attaching JavaScript to the front-end of a website. It’s an ideal to strive toward and something we should bear in mind whenever we’re adding JavaScript to a site.

It is the separation of behaviour from markup or structure. Just like the CSS gurus of old taught us there should be a separation of layout from markup, there should be a separation of behaviour from markup. That’s HTML for the content and structure of the document, CSS for the layout and style, and Unobtrusive JavaScript for behaviour and interactivity. Simple.

What?

It boils down to this: your site, and it’s content, should still be accessible when JavaScript is unavailable – the only way to guarantee this is by employing Unobtrusive JavaScript techniques.

Adding JavaScript to your site should be an additive process, bringing better experiences to those who have the capabilities of running your code, not a destructive one for those who for whatever reason have JavaScript disabled or blocked or not fully implemented. This is known as Progressive Enhancement.

How?

Let’s look at an example where you want to open a popup window for external links on your site.

The Downright Hackish Way

The first way is the downright hackish way &emdash; a technique that early on gave JavaScript a bad reputation &emdash; of hijacking the href attribute on all anchor elements on the site.

<a href="javascript:window.open('http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript')">W3C Article</a> 

This poses a big problem if JavaScript is unavailable. The link won’t work! It’s not a very maintainable technique either, since changing your linking technique would require you to change every external link.

The Less Obtrusive Way

The less obtrusive way would be to add the JavaScript to the onclick handler for every link.

<a href="http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript" onclick="window.open('http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript');return false;">W3C Article</a> 

While this is still a maintenance nightmare, it does work if the browser’s JavaScript is disabled. Without JavaScript the user won’t follow the link in a new window, but will be able to follow the link through the default link behavior.

The Unobtrusive Way

Now to the best way, the unobtrusive way. We’ll add a class attribute to all links that are to open in a new window. This is just like how we’d add a class to style similar elements. However, in this case we’ll add a class to add behavior to similar elements. Let’s add a class of new_window to our links.

<a href="http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript" class="new_window">W3C Article</a>

<a href="https://en.wikipedia.org/wiki/Unobtrusive_JavaScript" class="new_window">Wikipedia Article</a>

Now we have two links, both with the class new_window, but with no JavaScript. As a bonus we could style new_window links differently too, but that’s not what we’re doing right now, we’re adding behaviour.

Next, create a separate JavaScript file called app.js. Let’s use JavaScript to get all the elements with the class of new_window. We do this with the following code:

    var anchors = document.getElementsByClassName("new_window");

Now we have a variable anchors with all anchors on the document with the class of new_window. Now we can iterate over all the anchors and add a function to the onclick attribute.

for (var i=0; i < anchors.length; i++) {
    anchors[i].onclick = function() { };
};

We can also add a little bit of code to open the link in new window.

for (var i=0; i < anchors.length; i++) {
    anchors[i].onclick = function() {
        window.open(this.href);
        return false;
    };
};

We’re using this.href instead of typing out the URL string (like "http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript") because now the same code is being used on multiple links. Since we’re binding a function to onclick we have the this object to play with. In the on click handler, the this object is the given anchor that the onclick function is bound to. So this.href is the href of the link that has been clicked.

Why?

There are a number of reasons why you’d want to use Unobtrusive JavaScript. From the how-to above you can see that maintenance and updating functionality is a lot easier. But the benefits of being unobtrusive aren’t purely selfish. It’s about the user.

When a user comes to your site you can’t guarantee the device, browser or connection they have to your site. For example, older browsers wouldn’t be able to execute the above code since they don’t support the getElementsByClassName method. This would stop the script from being executed. Still they will be able to go to the site and follow the link in spite of getting a JavaScript warning in the status bar of their browser. Ideally, to be truly unobtrusive, you’d write some more code to fall back on to with older browsers, or alternatively use something like jQuery.

In the case of connectivity, JavaScript files should be included at the bottom of the page, giving more weighting to the HTML document and stylesheets to be downloaded first. Say your user is connecting via a mobile device with flaky connectivity. The HTML and CSS may get downloaded before the connection disconnects and fails to download the JavaScript files. You don’t want this mobile user to have a poorer experience than they’re already having. Imagine someone accessing your site from work and their somewhat paranoid system administrators strip out all JavaScript tags through their proxy or disable JavaScript on all their computers. The user is totally out of control in this case and they shouldn’t be penalised by not having their experience hindered by your inability to provide content or functionality that would work in their scenario.

Finally there are cases where screen-readers for visually impaired users disable or don’t fully implement JavaScript, so it’s important to make your content accessible. An accessible site is also a search engine optimised site. Having your content there-and-then on your site, behind working links, will guarantee the even the least sophisticated search engine spiders will be able to index your site and it’s contents. An indexed site is a visited site.

Conclusion

The astute readers will have noticed that even the less selfish reasons will ultimately pay off in your favor. Being unobtrusive on your own, your employer’s, or your client’s projects will ultimately bring more users and paying customers to your site. It’s win-win.

In your next project, when adding interactive behavior, why not try to employ unobtrusive techniques to your JavaScript code?

You can check out the sample code on github or download the source files in a zip file.

• code
• javascript
• jquery
• seo