BrianBal.com

The Module Patter in JavaScript is a powerful tool that uses the idea of closures and automatically evaluated functions. After using this technique for a while now it’s hard for me to imagine writing JavaScript in any other way.

The repetition of rewriting long namespaces while calling methods or accessing properties was the one thing that bugged me about using this pattern. To alleviate this annoyance I did some googling and found Again with the Module Pattern. This article will give you an idea about how useful the Module Pattern can be.

Two other good Module Pattern articles, both named A JavaScript Module Pattern, can be found at yuiblog.com and ajaxian.com.

The jQuery add-on “Humanized Messages” make it easy create growl like alerts with javascript.

Humanized Messages is a javascript-based system for non-model notifications, from an idea by Jef Raskin, as relayed by Aza Raskin and adapted for jQuery and use with K2 by Michael Heilemann.

These messages seem like a great way to alert users to new or updated data in a ajaxified web app.

Coda-Slider 1.1 is some pretty slick javascript animation that mimics the coda tab sliding effect.

I have been playing around with jQuery and think that it is an amazing JavaScript library. It seems to work the way that I want it to. If you are thinking about giving it a go, the article “jQuery Crash Course” by Nathan Smith is a great introduction to the jQuery Library

http://clientside.cnet.com/wiki/mootorial

This is a good place to start learning about the MooTools JavaScript Library.

Getting Your Markup Ready

The first step to using Unobtrusive JavaScript is to remove all of the inline JavaScript from your markup. This does not mean that you can never use JavaScript inline in a document. What it does mean is that you may choose to add it as an option and not out of necessity.

In order to add behaviors to elements later you are going to have to find them in the document. This means that you may have to add “id”, “class”, or “rel” attributes to the elements that you are trying to find. Keep in mind that it is good practice to keep the use of these attributes semantic.

Find Elements That You Want to Add Behaviors To

In order to add behavoirs to the desired elements you need to first parse the document and find all of the elements that you are looking for. For example let say you want to add some behavior to every element on a page with the class name of “button” Below is an example of how to find elements by class name. This example uses the getElementByClassName function from the Prototype Library.

function findButtons() {

var checks=document.getElementsByClassName("button");

  for (var i=0; i < checks.length; i++)

  {

    //  .. found the elements

  }


}

Adding the JavaScript Behavior

Now lets create the function that will add an on click behavior to an element.

function findButtons() {

var checks=document.getElementsByClassName("button");

  for (var i=0; i < checks.length; i++)

  {

    checks[i].onclick=function() {

      //.. do something cool

      return false;

    }

  }


}

Making the Script Run On Load

The final step is to make the findButtons() function run when the page is loaded. To do this we have to add one more line of code to our script.

window.onload=findButtons;

Now your JavaScript should be working and unobtrusive.

One of the Best things about CSS is that you keep your content and style separate from each other. Keeping the style separate from the content of a page allows you to keep the markup intelligible. The benefit of this is that it makes everyone’s job in the production line easier. The developer does not have to worry about adding style to the content and the designer can keep making tweaks to the design without altering the content on the page. If you already have a large site up and want to change the appearance of a few elements this is a huge benefit.

How this all relates to unobtrusive JavaScript is that the same principals of CSS can be applied to JavaScript via keeping the behavior of a web page separated from the content.