I was watching a video named "Mastering jQuery" on Tekpub a few days ago and I heard the term "Unobtrusive JavaScript". Basically unobtrusive JavaScript is a technique that emphasizes the separation of your functional layer from your presentation layer. In layman's terms this means that your JavaScript is NOT placed directly in your HTML. Instead it is placed in a separate external file. Hopefully, you are already doing this with your cascading style sheets. Why? So you can change the look and feel of your website without having to modify each page. The same principal applies to Unobtrusive JavaScript. Here is an example...
In the old days it was very common to add a control to your HTML and wire up the event directly on the controls. Although this works fine it does not give you flexibility in your design. If you have similar controls on other pages that call the same function you will have to modify each page if you change the method signature or rename the function.
<HTML>
<HEAD>
<script type="text/javascript">
function doTest() {
alert( "Now that's obtrusive" );
}
</script>
</HEAD>
<BODY>
<input type="button" id="btnTest" onclick="doTest()" />
</BODY>
</HTML>
When adhering to the rules of unobtrusive JavaScript you would first and foremost take the script out of the head of the HTML page and place it in a separate file. This allows for code re-use and central management of your scripts. Secondly, you would not bind the onclick event directly from within the HTML. Instead, you bind the events programmatically. In jQuery this is done with the $(document).ready function
$(document).ready( function() {
$("#btnTest").click( function() {
doTest()
});
});
Now that your JavaScript is isolated in a separate file and that your events are wired up from the script your HTML can be reduced to the bare minimum.
<HTML>
<HEAD>
<script type="text/javascript" src="script.js"></script>
</HEAD>
<BODY>
<input type="button" id="btnTest" />
</BODY>
</HTML>
This is just a simple example but it does a good job at illustrating the power behind adopting the unobtrusive JavaScript methodology. After all, with great tools like jQuery at our disposal there is really no reason why you should not kick your old school habits and start putting some separation between your functionality and presentation layer.
If you are a .NET web developer, than you have probably witnessed change due to this methodology before. When we moved from classic ASP to ASP.NET we were all excited because it meant the end of spaghetti-code. The Web Form revolution was also supposed to allow teams to work better together. For example, a designer could work on the HTML while the developer independently wrote the code behind the controls. Although this was an improvement over classic ASP we still longed for a better paradigm. So along came MVC. We now have no excuses for not having a complete separation of our data layer, presentation layer and etcetera. So why not adhere to the same principals by making your JavaScript unobtrusive as well.
