JavaScript and jQuery for programmers

I’ve been thinking a bit about JavaScript and jQuery. To some, jQuery is the spawn of the devil - to others it’s the greatest thing since sliced bread, and possibly better. A lot of JavaScript developers hold a lot of hostility towards jQuery, which I don’t fully understand.

The other issue is whether to learn jQuery without learning JavaScript first. Received wisdom is that this is a Bad Thing® - you should learn the basics before you come to rely too much on a framework.

In the interests of avoiding religion, I’m going to suggest a middle way. I think it’s possible to learn JavaScript through jQuery. And I mean properly know JavaScript - understand what it’s doing - not just learn the syntax for an event handler.

In these posts I want to teach JavaScript through jQuery idioms. By that, I mean I’m going to show some common jQuery idioms and explain what they mean in JavaScript. Teaching JavaScript is going to be the primary purpose - learning jQuery will come for free on top. I’ll be assuming some prior programming experience (that’s why I wrote “for programmers” in the title). The main reason for that is because I really can’t be bothered to explain assignment.

jQuery sucks ass man

Some will say that jQuery hides too much of what JavaScript does, and you should learn the JavaScript way before the jQuery way. I partially agree with that, but I think it’s important to remember one thing: JavaScript is not the DOM. For those that only read code:

JavaScript != DOM;

JavaScript is a programming language. The DOM is the API for interacting with web pages. JavaScript interacts with the DOM API. Unfortunately, the DOM is really messy. It’s also not the same on all browsers, which means any code for interacting with the DOM will be littered with if and else statements.

JavaScript, on the other hand, is a beautiful programming language. It doesn’t deserve to be dirtied with all that DOM crap. I don’t think there’s much point in learning how to use the DOM directly, as it’s a messy, incomplete, inconsistent interface. It brings nothing but pain, and the more people I can save from ever having to deal with it, the better.

A brief (and partially fabricated) history of JavaScript

Old Skool JavaScript

Back in the day, selecting HTML objects with JavaScript wasn’t necessary. If you wanted a link to open a popup when you clicked on it, you’d just add it in in the HTML:

<a href="#" onclick="popup()">Annoy me!</a>

Here’s a real life example.

Nu Skool JavaScript

One day, a Real Programmer came into the world of web developers. And he spake thus:

Thou shalt not allow the mixing of content and behaviour. Thou shalt write semantic HTML. Above all, thou shalt avoid code duplication, lest a plague of locusts be cast upon your land!

The web developers were given two years to adopt web standards. And adopt them they did. By the end of those two years, there was a new world-wide web.

To avoid duplication and the mixing of content and behaviour, the inline JavaScript in HTML had to go. But selecting DOM elements was tricky - nobody likes to type getElementById more than twice a day, but some developers were writing it ten or twenty times before lunch! Something had to give.

Out of the shadows came a man by the name of Resig. This Resig man saw getElementById and saw that it was bad. He saw CSS selectors and was impressed by their succinct clarity. And he said:

Every .man, .woman and :nth-child should be able to select their elements with CSS selectors!

and jQuery was born.

Back to the truth, back to reality

Back to the here and now yeah. Yeah, anyway. The point I was trying to get at was that JavaScript is a language, the DOM is a badly designed API, and jQuery is a wrapper around that API. That’s all. It’s not a replacement for JavaScript. Personally, I think it complements JavaScript really nicely most of the time. So if you’re going to learn JavaScript, and you’re going to want to interact with web pages, you might as well learn jQuery at the same time.

Why jQuery? Why not another library?

Yes, I knew you’d ask that. Well, here’s my rationale. jQuery won. That’s it. jQuery has a huge community, with a lot of experts. More and more are moving to jQuery every day. Even in Rails, where for ages Prototype was bundled by default, there’s been a huge push towards using jQuery. I’m not saying it’s the best. But it’s got the best support. And it’s probably going to be the most developed for the foreseeable future.

Lesson plan

I’m going to assume that you’ve got this far, seeing as you’re reading this. Hopefully that means that you’re at least vaguely interested in learning JavaScript through jQuery. Below is a list of likely topics I’ll end up talking about. I reserve the right to edit this list, reorder it, remove items and generally monkey about with it.

  • Part 1: Anonymous functions
  • Part 2: Object literals
  • Part 3: Evented programming model
  • Part 4: Closures