Site of John D Wells Jr

Book Preview Review: The Javascript Anthology

Wednesday March 15th 2006

The latest self-inflating buzz about SitePoint is the release of the book, The Javascript Anthology: 101 Essential Tips, Tricks & Hacks, written by two well-known minds in the web community, James Edwards and Cameron Adams. To help draw potential readers into purchasing this promoted gem, SitePoint is offering sample chapters to download. I downloaded my copy, and I'd recommend that others do the same.

The contents look enticing, the topics to cover pretty much blanket the list of things I'd like to become better at with Javascript. I almost purchased my copy straight away. But I figured, with the luxury of having over a hundred pages of sample content in the free download, I could just relax and read on. So I did, and I'm glad. Because at page 9, yes just 9 pages into the sample chapter, I found a bug. A javascript bug. A bug in javascript code that, in their brief snippet, they "recommended" as a way to effectively "separate contenet from behavior", that buzz phrase that should make everyone weak in the knees.

This event, me finding a bug in a books code, has become a regular occurrence, and I'm growing very very tired of it. I understand that these topics are complicated, I understand that bugs are sometimes difficult to miss. That is why "expert reviewers" are employed to catch these hiccups. Yet still they leak through, often at an unacceptable pace.

And then, what is a developer like me to think when I come across a bug? My trust is blown. In this instance I thought to myself, "Geez, if they let a bug from the first sample chapter slip through, what other bugs did they miss? How much time am I going to have to spend debugging their code just to learn from them?"

This is all quite a shame, because as I said, the book seems to cover about everything that I'm interested in learning about Javascript. I'll keep reading the sample chapters, and hold off my purchasing decision until then. But if you had to ask me where my money is going on this round, right now I'd say straight into my back pocket.

...Oh, so what was the bug? When they were talking about separating behavior from presentation, they introduced a small script that would change the border color of a div item. They defined a function to implement the color change, and that function required two parameters, the reference of the element who's border color should change, and the desired color to change the border to. That's fine, everything works. But then they defined two event functions tied to the element itself, and when those event functions called the changeBorder() function, they only passed one parameter, which was the color itself. They needed to also pass a self-referencing "this". Here's the *fixed* code:

function changeBorder(element, to) {
	element.style.borderColor = to;
}
window.onload = init();
function init() {
	var contentDiv = document.getElementById('content');
	contentDiv.onmouseover = function() {
		// Original, buggy code. Look, only one parameter!
		// changeBorder("red");
		// Fixed Code: Added a self-referencing this as the first parameter.
		changeBorder(this,"red");
	}
	contentDiv.onmouseout = function() {
		// Original, buggy code. Look, only one parameter!
		// changeBorder("black");
		// Fixed Code: Added a self-referencing this as the first parameter.
		changeBorder(this,"black");
	}
}