Luke Amery17 November 2008, 6:35 PM
A Tag Short | Unobtrusive Javascript separates the logic of dynamic HTML pages from the content, allowing designers to modify designs without affecting scripts on the pages
Unobtrusive Javascript is a really neat technique for separating the logic of dynamic HTML pages from the content. As all good web developers should know “
separation of concerns” is a good thing. In this case we are separating the layout and content from the “page logic” (for want of a better term).
This leaves designers free to modify the design of the pages and the scripts remain functional and effective. No more “don’t change this part” directives to the artistes!
To get to the bottom of how this technique evolved a quick history lesson is in order. In the beginning there was just HTML, no script. Way back in 1995 Brendan Eich
added Javascript functionality to Netscape 2. This made it possible to have web pages interact with the user without making a return trip to the web server – a very important advance. The original incarnations of Javascript supported very simple document manipulation by allowing the script to “write” content into the page. It also had a rudimentary DOM (Document Object model), rudimentary in the sense that certain preordained properties were changeable such as document.aLinkColor (which would change the active link colour of hyperlinks in the document).
The more important aspect that was available at this time was access to forms. This allowed client side validation of inputs. To achieve this back in the day you supplied a form onsubmit handler, best demonstrated by example:
<script>
function validateLogin()
{
if(document.forms["login"].elements["username"].value == "")
{
alert("error");
return false;
}
return true;
}
</script>
.
.
.
<body>
<form name="login" action="login.cgi" onsubmit="validateLogin();">
Login: <input type="text" value="" name="username">
Password: <input type="text" value="" name="password">
</form>
</body>
As you can see the onsubmit attribute in the HTML wired up the logic to the action of trying to execute the form.
The world moved on however, with the advent of Internet Explorer 4. Microsoft took the rudimentary DOM that had been introduced in Netscape 2 and applied it to the entire document in a way that made everything an object that could be manipulated easily using Javascript. This little branch of the browser wars made it possible (although unadvisable due to the sheer incompatibility of implementations at the time) to not embed script within the HTML. Our example above morphs into:
<script>
window.onload = function() { document.forms["login"].onSubmit =
function()
{
if(document.forms["login"].elements["username"].value == "")
{
alert("error");
return false;
}
return true;
}};
</script>
.
.
.
<body>
<form name="login" action="login.cgi">
Login: <input type="text" value="" name="username">
Password: <input type="text" value="" name="password">
</form>
</body>
Yay! No script inside the body. Designers and HTML processing tools can now be used to manipulate the HTML and there is no fear that the script is going to be messed up. A few problems persist though. What happens when there are a few scripts that should be run given a particular event? It is possible to achieve this with the earlier browser implementations but more complex than it needs to be (it involves remembering the previous state of the onSubmit attribute before you override it then attempting to execute the logic held in the old value either before or after your handler runs).
Microsoft’s answer to this dilemma is the
attachEvent and
detachEvent of Internet Explorer 5. It was around this era however that it was considered a good idea to have browsers conform to some kind of standard to stop the insanity! This resulted in a standard for this conundrum called
DOM Level 2 Events. To this day only Microsoft has avoided the DOM Level 2 standard preferring to stick with their own thing making compatibility a chore once again. There is even an indication that IE8 will not address this shortcoming.
Despair not all the popular Javascript libraries such as
jQuery and
YUI wrap the browser’s eventing system making it as good as having DOM Level 2 Events implemented in any reasonably modern browser. Now you have the tools, go forth and get that inline script out of your HTML!
All "A Tag Short of Compliance" Blogs Luke Amery works on shopping cart software. He is the technical director of On Technology, Australia's leading e-commerce development company.