Posts Tagged ‘unobtrusive’

Unobtrusive JavaScripting

Monday, November 17th, 2008

Unobtrusive JavaScriping is a very crucial part of designing a website.  As you should know there are 3 major layers of the web, and they should all be separated into external files.  You have XHTML (structure), CSS (presentation), and JavaScript (behavior).

Separating these three pillars of the web will go a long way towards maintainability of the code you produce.  The reason I am focusing on the external JavaScript portion is because I find it one of the more difficult.  It takes a lot of discipline to stay away from putting even handlers into the code.  Today I will be talking about the concept of unobtrusive JavaScript, as well as provide you with a tool that will make your life easier.

What is Unobtrusive JavaScripting?

Unobtrusive JavaScript is a process by which you make your JavaScript as user-friendly, accessible, and maintainable as possible.  It supports graceful degradation in older browsers, and provides separation of behavior from structure. The following are some simple rules I have come up with:

  1. Don’t add inline JavaScript via the event handlers( onclick, onmouseover, etc)
  2. JavaScript should be an enhancement, not a requirement
Inline Event Handlers

Using those inline event handlers are so handy, but really it is just as bad as using the dreaded style tags within your code.  Remember that we want to keep things separated as best we can.  The following is how you can add a simple event handler to a link in an accessible way:

<a href=”login.php” id=”login” title=”Login to Admin”>Login</a>

// when our document is loaded
window.onload = function()
{
    // check browser support
    if(!document.getElementById){ return; }

    // get element
    var e = document.getElementById('login');

    // when our element is clicked call a function
    e.onclick = clickHandler;
}

function clickHandler(e)
{
    // fancy ajax code entered here
    alert('JavaScript took over the link');

    // cancel the default browser action
    // This works in Firefox - keeping this example simple
    e.preventDefault();
}

Now the JavaScript portion can be put in an external JavaScript file and we can keep our HTML nice and clean.

Use JavaScript to enhance

Beginners to web design often like the power of JavaScript and they develop using it for everything.  As with any programming language you need to use the proper tool for the job, and whether or not you are using it for the “cool” factor or if it will actually help the user.  Links such as the following are big no-no’s and show that the user is assuming JavaScript is enabled:

<a href="#" onclick="popup('web-development.html');return false;">Web Development</a>
<a href="javascript:popup('web-development.html')">Web Development</a>

Do you know what happens when JavaScript is disabled?  You guessed it nothing.  The visitor is left thinking, “Why does this link do nothing?”  The following is a better way of handling the above:

<a href="web-development.html" onclick="popup(this.href);return false;">Web Development</a>

Now if JavaScript is disabled, at least the user will be redirected to the appropriate page even though it might not be in a pop up.  You may be wondering why I used the onclick attribute… It is solely to cut down code in this example.  You know that this should be put in an external JavaScript file.

Obtrusive JavaScript Checker

The other day I found this nifty Firefox tool that allows you to check if there are any problems with obtrusive JavaScript within a page.  It shows the number of inline events, “javascript: links”, as well as many other useful features to keep you disciplined.  Please visit the Obtrusive JavaScript Checker plug-in page.

Tags: ,
Posted in Uncategorized | 3 Comments »

 
connect with me!