This post is the first in a continuing series of DIY tutorials, which aims to make things as simple as possible. I will also monitor the comments on the 'Easy as Pie' posts more carefully so I can address any questions anyone has.
Before I delve into the technique I use for unobtrusive JavaScript, I'll give a brief overview of what unobtrusive JavaScript is, and the benefits of using it.
What is unobtrusive JavaScript?
Quite simply put, it's removing JavaScript from the source of the document, and including it in an external file. That's what unobtrusive JavaScript IS - but what is far more important is what unobtrusive JavaScript symbolizes. Unobtrusive JavaScript to me is a largely promoted technique to adhere to web development best practices and standards. It encourages the separation of the "behavior" layer from the "presentation" and "structure" layer.
In essence, it's the same thing that we have been doing with CSS for years - Calling a style sheet and within itself, selecting the elements you wish to style. With the ability to traverse the DOM, JavaScript is essentially the same thing, just with a bit more functionality.
To fully understand what unobtrusive JavaScript is, you need to be able to identify obtrusive JavaScript -- here are some examples of obtrusive JavaScript:
<a href="JavaScript:alert('You clicked!')">Click Me!</a>
You may have seen this around, and sometimes you may see something like this:
<a href="#" onclick="alert('You clicked!')">Click Me!</a>
Obviously, this will not do anything for those with JavaScript disabled. A slightly better version would be this:
<a href="clicked.html" onclick="alert('You clicked!')">Click Me!</a>
This way, if the user does not have JavaScript capabilities, or has JavaScript disabled, they will still go to the 'clicked.html' page.
Making your JavaScript unobtrusive
The process for making your JavaScript unobtrusive is actually quite simple - you simply need to 'hook' into it and apply an event handler (such as 'onclick'). Let's get started.
First, one option you have is to create a listener to run when the window has fully loaded by using window.onload. Here is a quick example:
window.onload = function() {
//run this on page load
}
However, this will wait until ALL elements are completely loaded (even large images) before running the JavaScript.
To get around that hurdle, we can use domFunction.
domFunction is a small (2k) JavaScript file that waits for the DOM to be ready before running your JavaScript, this allows you to traverse the DOM without waiting for images to load. It does this by checking for an element/id on the page, and if it can access it with the DOM, it assumes the DOM is ready. The syntax is:
var foobar = new domFunction(function() {
//run this when DOM is ready
}, {'footer' : 'id'});
The code
Alright, now you know how to initiate a script as soon as it can use the DOM, now we have to hook into the elements we want to add JavaScript to.
Here's the HTML we are going to use:
<div id="mylinks">
<a href="mypage.html" title="Go to my page">My Page</a> | <a href="yourpage.html" title="Go to your page">Your Page</a>
</div>
And the JavaScript (not including the domFunction):
function unobtrusifier() {
if(document.getElementById('mylinks')) {
var links = document.getElementById('mylinks').getElementsByTagName('a');
linklength = links.length;
for(var i=0;i<linklength;i++) {
links[i].onclick = function() { alert(this.title); return false; };
};
};
};
- Click Here to view the JavaScript with comments
The example
- Click Here to see the above code in action
The end
Please let me know if you found this at all helpful. I tried to make it as simple as possible without neglecting standards.
The next 'Easy as Pie' will be on Ajax. Fun stuff!
