Starting with jQuery

I’ve been meaning to learn how to use a JavaScript library for some time. I first learnt JavaScript when it originally appeared in Netscape 2 and wasn’t working with it much in the years when it was knocked into shape by some proper programmers, so a library seemed to be the best short cut to more modern coding styles.

Looking at the various libraries I ranked them in order of attractiveness as jQuery > YUI > Prototype > Dojo. This was based on a first glance at file size, amount of documentation and supported features. That was over a year ago.

With jQuery in the lead it would be surprising of John Resig’s talk at @media would do much to change it my mind. But I decided to put his advice into practice and download a library and try it out. Twenty minutes after downloading jQuery I was starting to update a copy of the code used on VisitLondon.com

From this (not the greatest piece of JavaScript in the world – it was written by multiple authors in a bit of a rush – but not the worst either):

function topmenuClear() {
 var navRoot = document.getElementById("topmenu");
 for (var i=0; i<navRoot.childNodes.length; i++) {
  var node = navRoot.childNodes[i];
   if (node.nodeName=="LI") {
    node.className=node.className.replace("over", "");
    node.childNodes[0].className="";
   }
 }
}
function topmenuHover() {
 if(document.getElementById("topmenu")) {
  var navRoot = document.getElementById("topmenu");
  for (var i=0; i<navRoot.childNodes.length; i++) {
   var node = navRoot.childNodes[i];
   if (node.nodeName=="LI") {
    node.onmouseover=function() {
     clearTimeout(navTimer); topmenuClear();
     this.className+=" over";
     this.childNodes[0].className="over";
    };
    node.onmouseout=function() {
     navTimer = setTimeout(topmenuClear,2000);
    };
   }
  }
 }
}
function showlang() {
 if(document.getElementById('lang-list').style.display == "none") {
  document.getElementById('lang-list').style.display = "block";
 } else if (document.getElementById('lang-list').style.display == "block") {
  document.getElementById('lang-list').style.display = "none";
 }
}

To this:

function topmenuClear() {
 $("#topmenu > li").removeClass("over");
 $("#topmenu > li > *").removeClass("over");
}
function topmenuHover() {
 $("#topmenu > li").mouseover(function(){
  clearTimeout(navTimer); topmenuClear();
  $(this).addClass("over");
  $(this).find(":first").addClass("over");
 });
 $("#topmenu > li").mouseout(function(){
  navTimer = setTimeout(topmenuClear,2000);
 });
}
function showlang() {
 $("#lang-list").toggle();
}

Okay, so that’s probably the easiest part of our code to modify as it’s doing a very basic task – toggling visibility and adding event handlers – but it makes a dramatic difference to the complexity of the code. I’ve still got a lot of work and testing to do but I’d like to reach the point where the only JavaScript coding I have to do is implementing our functionality rather than reimplementing common functions.

Very True Mood:  chipper