I’ve just finished reading Pro JavaScript Techniques by John Resig, and I thought I’d post some thoughts about it.

The author, John Resig, is the creator of the popular jQuery library. He also works as a Javascript evangelist for Mozilla, so there’s no doubt that he’s one of the best known proponents of the language.

Although I use the jQuery library on a daily basis, I was keen to brush up on some of the finer points of Javascript; my knowledge of the jQuery library probably exceeds my knowledge of Javascript! For this reason, I thought the book sounded good.

The first half of the book certainly doesn’t disappoint. Covering the nitty-gritty of DOM traversal, OO Javascript, and unobtrusive scripting, the book does a great job of covering a lot of ground in a concise, clear manner. The key concepts are illustrated with plenty of code snippets which do a great job of illuminating the subject matter.

The second part of the book was less useful for me, illustrating some examples of AJAX functionality, image galleries, autocomplete, that sort of thing. These topics might have been considered intermediate to advanced in 2006, when the book was released, but the plethora of options around today means that developing stuff like that now is re-inventing the wheel. (Of course you might be interested in learning more about wheels!)

You can almost see the snippets of code in this book forming the nuts and bolts of the jQuery library, and it’s interesting to take a look at the hoops we developers would have to jump through to otherwise gain cross-browser compliance.

I’m just glad I’m not the one having to negotiate those hoops myself!

To sum up, this book is still worth reading for the first half alone, and the stuff on OO javascript, scoping, closures etc is really useful. But some might consider the book a little out of date, so be warned.

I’ve had some fun this weekend tinkering with Jquery. It’s taken me a long time to get round to playing with this library, having thrown my eggs in the Prototype / Scriptaculous basket, but after some experimentation, I wish I’d done it sooner!

I have to admit; the syntax is nicer, much simpler (no more $$(‘selector’)) and the documentation seems better. Jquery is also lightweight and fast.

To celebrate my switchover, here’s a very simple Jquery menu demonstration!

Let’s start off with the HTML:

<div id="”content”">
<ul id="”menu”">
  <li class="”starter”&gt;menu"></li>
  <li><a href="”#”">home</a></li>
  <li><a href="”#”">about us</a></li>
  <li>a href=”#”&gt;portfolio</li>
  <li><a href="”#”">contact us</a></li>
</ul>
</div>

It doesn’t get much simpler than this! An ordered list, ready for styling. Not much to see here. Here comes the javascript:

$(document).ready(function(){
  $("li:not(:first)").hide();

  $("li.starter").click(function(){
    if($("li:not(:first)").is(":visible")){
        $("li:not(:first)").fadeOut("fast");
    }else{
        $("li:not(:first)").fadeIn("fast");
    }
  })
})

Eek! Slightly more complicated. Let’s walk through it.

$(document).ready(function(){

Before we do anything, we make sure that the DOM is ready for manipulation. This has a handy side effect, when we see the next line:

$("li:not(:first)").hide();

This piece of code looks for all the ‘li’ elements in the page (disregarding the first one) and hides them, using display:none. The great thing is, since we’re doing this within $(document).ready, users with javascript switched off will still see the menu!

$("li.starter").click(function(){

This tells the browser to look out for any clicks on the li.starter element, and use the next bit of code to handle it.

if($("li:not(:first)").is(":visible")){
    $("li:not(:first)").fadeOut("fast");
}else{
    $("li:not(:first)").fadeIn("fast");
}

This part checks to see if the list items are visible, and shows them or hides them as appropriate.

You can see the full demonstration here, with comments!