Unobtrusive Javascript

17 Jul
2011

Javascript is very important part of web pages and web development. Web pages are static documents and Javascript is a programming language that can run in your browser (when we are talking about web pages).

How Javascript can be obstructive for your web pages?

-Web browser doesn’t have support for Javascript
-Javascript stripped at the company firewall
-Some people choose to disable Javascript by some addons or by browser settings to protect themselves from XSS, CSRF vulnerabilities.
-Some mobile browsers doesn’t have Javascript support

Above reasons makes Javascript obstructive that means probably your HTML document will not perform what you expect when user clicked an element which triggers a Javascript function.

For example, you have an order form that needs some input from user and validates them with Javascript code and submits the form. But if Javascript can’t get executed by browser users can’t order from your site. Anything dynamic with Javascript will fail in your web page for this kind of users.

Do you really want to ignore these users for your “business critical web”?

The idea of unobtrusive Javascript is make your static HTML web pages functioning and add Javascript functionalty over it. Basically your static HTML web page should be able to run and function correctly, and javascript should be supportive layer over that.

Best way to create unobtrusive Javascript is keeping Javascript code in external files, not in HTML file. And when browser executes Javascript, it should function correctly, read HTML document, probably use some metadata information from HTML and do it’s job.

Below two examples can’t work without javascript. They have inline javascript and static HTML document declarations doesn’t have link (href) data. Links are depends on Javascript window.open function.

<a href="javascript:window.open('http://twitter.com/hancengiz');">follow me on twitter</a>
<a href="#" onclick="window.open('http://twitter.com/hancengiz');return false;">follow me on twitter</a>

Okay, let’s add url information to href attribute.

<a href="http://twitter.com/hancengiz" onclick="window.open('http://twitter.com/hancengiz');return false;">follow me on twitter</a>

Above sample would work without javascript support but it’s not the best way for unobtrusive Javascript.

Let’s just create a regular "a" element in our HTML document, and add a metadata attribute to use by Javascript. A "class" attribute seems enough for this case, but we could choose a non standart attribute name like "ourjavascriptenabledlink".

<a href="http://twitter.com/hancengiz" class="menulinkitem">follow me on twitter</a>

And add this Javascript code in your .js file and add it to the HTML document by using "script" element. This Javascript code uses jQuery so you need to add jQuery too.

jQuery(function($) {
  $('a.menulinkitem').click(function() {
    var url= $(this).attr('href');
    window.open(url);
    return false;
  });
});

HTML document will function simply without Javascript support. This example was a very simple one, and it was not adding any extra functionality or any Javascript supported effects. Javascript part depends on your Javascript skills and requirements.

For future readings and links you can visit Wikipedia.



Comment Form

top