Articles|Summation IT

Unobtrusive Javascript

Unobtrusive Javascript is an approach which defines efficient way of using Javascript in a web page. With unobtrusive javascript in place you code your javascript functionality separately from the site’s content, follow best practice to avoid the problems of traditional JavaScript programming and give progressive enhancement to support user agents that may not support advanced JavaScript functionality.

It is a separation of concern where in you separate the markups, styles and scripts from each other. The main cause to implement this strategy is to allow the web page to be very much accessible even if JavaScript is unavailable and above all the separation gives better understanding to the code. The rule of unobtrusive JavaScript is simple as it says, the HTML file should not contain any JavaScript, as it should not contain any CSS. Getting rid of embedded scripts and event handlers is the simplest way to achieve separation of structure and code.

Let’s take an example to understand the behavior of unobtrusive JavaScript.

First Approach:

What if you want to open a link in a different browser window, if you go with the traditional way the code would look like:

<!DOCTYPE html>

<html>

<head>

<title>"Welcome to Unobtrusive JavaScript"</title>

</head>

<body>

<h1>

<a href="javascript:window.open('http://SummationIT.com')">SummationIT</a>

</h1>

</body>

</html>

With this approach someone with JavaScript would click this and open the site in a new web page. But what if there is no JavaScript. The link would do nothing.

Second Approach:

Here is a different approach wherein we handle the onclick event.

<a href="http://SummationIT.com" onclick="window.open(this.href)">Summation IT</a>

But even with this approach if JavaScript is disabled for the browser this will not open in a new window, but will be able to follow the link with the default link behavior.

Third Approach:

Now, let’s have a look at the unobtrusive way. Here we will add class to the link which we want to open in a new window. Let’s add class “openInNewWindow” to the anchor element:

<a href="http://SummationIT.com" class="openInNewWindow">Summation IT</a>

<a href="http://google.com" class="openInNewWindow">Google</a>

Here we have taken two anchor tags with class as openInNewWindow with clear intention of opening these references in a new window. But notice that both of the anchor tags above do not have any javascript code. Here we are following the unobtrusive way, with the unobtrusive way we place the javascript code in a separate file and keep a reference of that javascript file in the html file.

Now let us create a separate JavaScript file called site.js. Here in this file write the javascript code to find all the elements with class name as openInNewWindow. Then for each element register an onclick event which would open the reference in a new window using the window.open() method. Below is the code for the file.

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

for (var i=0; i < anchors.length; i++) {

anchors[i].onclick = function() {

window.open(this.href);

return false;

};

As mentioned earlier we need to keep reference of the javascript file in our html file. We can do this by setting the source for the script tag as give below:

Javascript files should be included at the bottom of the page, giving more weighting to the HTML document and stylesheets to be downloaded first.

With the unobtrusive way javascript can bring smile in users face if he/she has JavaScript and if he/she does not have javascript it will not make him cry.