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
