Unobtrusive JavaScript

Lessons learned from CSS

• Gotta keep 'em separated.
• External is better than inline.
• Progressive enhancement leads to graceful degradation.

CSS: inline vs. external

• Inline

  <p style="font: weight: bold">This is an introductory paragraph.</p>

• External

  <p class="introduction">This is an introductory paragraph.</p>

  p.introduction { font-weight: bold; }

JavaScript: inline vs. external

• JavaScript pseudo-protocol - Awful!

  <a href="javascript:window.open('help.html')">my help page</a>

• Pointless link - Bad!

  <a href="#" onclick="window.open('help.html')">my help page</a>

• Using the DOM - Better.

  <a href="help.html"
  onclick="window.open(this.getAttribute("href")); return false;">my help page</a>

• No inline JavaScript - Best!

  <a href="help.html" class="help">my help page</a>

Writing the function

• function doPopups() {

•   var links = document.getElementsByTagName("a");

•   for (var i=0; i < links.length; i++) {

•     if (links[i].className.match("help")) {

•       links[i].onclick = function() {

•         window.open(this.getAttribute("href"));

•         return false;

•       };
      }
    }
  }

Object detection

function doPopups() {
  if (document.getElementsByTagName) {
    var links = document.getElementsByTagName("a");
    for (var i=0; i < links.length; i++) {
      if (links[i].className.match("help")) {
        links[i].onclick = function() {
          window.open(this.getAttribute("href"));
          return false;
        };
      }
    }
  }
}

Personal preference

function doPopups() {
  if (!document.getElementsByTagName) return false;
  var links = document.getElementsByTagName("a");
  for (var i=0; i < links.length; i++) {
    if (links[i].className.match("help")) {
      links[i].onclick = function() {
        window.open(this.getAttribute("href"));
        return false;
      };
    }
  }
}

Triggering the function

• <script type="text/javascript" src="file.js"></script>
• doPopups();
• You must wait until the document has finished loading. The Document Object Model must be complete.
• window.onload = doPopups;
• You can queue up a series of functions using addLoadEvent from Simon Willison: addLoadEvent(doPopups);

Next

Applying Progressive Enhancement to Ajax: Hijax