Weblogs: Javascript

Jeremy Keith's presentation is about reintroducing JavaScript using web standards best practice instead of old-school crusty techniques.

My summary is just a brief note on the topic. The presentation seemed to go down well with the crowd, and certainly sparked an interest in the much-maligned JavaScript in the mostly CSS-geared audience. For my part I was a bit disappointed by the level of the talk, I was expecting something a lot meatier, like AJAX, which was named as the technology that makes HTML cool again.

Unobtrustive JavaScript is the new future for JavaScript. This creates a clear separation between the structure of the content and the behaviour layer, which is now totally within an external JavaScript file.

We need more articles on attaching event handlers dynamically. This technique is the fundamental basis for unobtrustive JavaScript.

Popup windows

javascript: protocol

The old, discredited way of using JavaScript to open pop-up windows involved using the javascript: pseudo-protocol:

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

With JavaScript disabled this becomes a broken link. The javascript: pseudo-protocol is not a standard, it happens to be a browser-only protocol, and not documented anywhere.

The old onclick method

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

Just as bad as the javascript: method. With JavaScript disabled, the link goes nowhere. We can improve on this slightly by including a proper URL in the href attribute.

Using href

 <a href="page.html" 
  onclick="openWin(this.href);">
  my page</a>

Improved, and now when JavaScript is disabled the link still works. This is more accessible than the previous methods. The only clunky thing left is the presence of JavaScript inside the structure and content layer. It would be better to have JavaScript insert the onclick event handler. This is where unobtrusive JavaScript comes in.

Unobtrusive method

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

No JavaScript is present in the markup. We apply it dynamically using the class attribute as a hook from the external JavaScript file.

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('popup')) {
   links[i].onclick = 
    function() {
     window.open(this.href);
     return false;
    }
  }
 }
}
window.onload = doPopups;

(Editor Note - I wouldn't recommend just overwriting window.onload, but use Scott Andrew's functions for dynamically adding functions to event handlers. This allows you then to attach multiple functions to any event. Also className.match('popup') would also match the class name of nopopup.)

Behaviour: CSS or JavaScript

There is a grey-area for behaviour. What should be done with CSS and what should be done by JavaScript? Its fine to use CSS for rollovers and changing link colours when hovering.

Web standards

When WaSP fought for standards, they fought for the adoption and support of three W3C recommendations - HTML, CSS and DOM. The Document Object Model is the glue between JavaScript and the content. Its one of the best supported standards in browsers.

Questions and Answers

We don't know enough about JavaScript and screenreaders. This is something we must do.

---

[ Weblog | Categories and feeds | 2011 | 2010 | 2009 | 2008 | 2007 | 2006 | 2005 | 2004 | 2003 | 2002 ]