Getting Started With Javascript

So you are a PHP (or Perl, or Ruby) programmer and want to dive in to Javascript, but don’t know quite where to start. It might be tempting to download the Javascript framework du jour and start coding, but that would be a mistake. Javascript is fundamentally different from most other programming languages, and your knowledge of the others will only get you so far.

So before touching jQuery, Prototype, or one of the other frameworks or libraries out there, it’s a good idea to get a feel for Javascript itself, without the extra stuff added in.

How I Learned Javascript (or: How Not To Learn Javascript)

I started learning Javascript by just diving in to it for a project I was working on. I also immediately started using both the Prototype framework and another library (Event-selectors, which I wouldn’t recommend using anymore) to accomplish the AJAX-y things I needed to do. They worked great in that it let me get the project done, but my longer-term Javascript knowledge suffered by starting this way.

Because I immediately started using a framework I became accustomed to Prototype’s syntax rather than learning native Javascript syntax first. I also did not take the time to learn how Javascript works, instead assuming it was like the languages I knew… just in a browser.

I have since learned better. Here’s how.

The Videos (or: Seven Episodes of Awesome)

Javascript looks a little like C++, Java, or PHP, but really is not the same kind of language. Doug Crockford explains this incredibly well in a series of lectures. In a four-part introductory series (part 1, part 2, part 3, part 4) and then in a three-part advanced class (part 1, part 2, part 3), Crockford starts with some Javascript history and talks about syntax, but quickly moves on to showing what makes the language unique, elegant, powerful, and dangerous.

I strongly recommend watching the Crockford videos (I could make a CRockford Files joke here, but I fear my father would be the only one to get it) carefully with a text editor and web browser open, and your finger on the rewind button. Crockford doesn’t waste words and packs every minute with relevant information.

Concepts (or: Pay Attention!)

The biggest conceptual leap for me was realizing just how powerful Javascript functions can be. If you’re writing Javascript and using functions just like you might in PHP, you’re not using them well.

Another huge concept I had to wrap my head around was Javasript’s prototypal inheritance; it makes the language unlike any other popular programming language.

As you’re watching the videos (in fact, why are you still reading this?), keep an eye out for some concepts:

  • Closure–what it means, how it works.
  • The differing meaning of this in different contexts. This concept is called “binding”, and it can be a huge source of confusion.
  • Functions are objects. Function names exist in the same scope as variables. Functions can have their own data members. All of these concepts are departures from what you might know from Ruby or PHP.
  • Prototypal Inheritance.
  • Global variables are everywhere, and there is no way to prevent your global variables from conflicting with any script you use on your site, or pull from some other site. If you’re not declaring your variables inside a function with the var keyword, they are global.

Once you’ve got a reasonable grasp of the concepts you can start to see how frameworks fit in. The Advanced series in particular gives a lot of context to help explain how the Prototype framework is different in philosophy from jQuery (although it doesn’t mention either framework directly).

What Next? (or: Links To Things)

The videos won’t teach you how to be a great Javascript programmer, but they will give you the base of knowledge you need to start building your skills. It’s tricky to recommend books or provide links to websites for further reading, since there is so much dubious and just plain bad Javascript code and advice out there, but I can point out a few.

Crockford’s book Javascript: The Good Parts is a great on-paper distillation of a lot of the topics covered in the video series, as well as further explanation of some stuff Crockford did not cover. Like his lectures, Crockford’s writing is sparse and packed with content (and very little filler), so the slim book has a ton of information.

If you’re still scratching your head about the concept of binding, this A List Apart article helps to clarify. Be warned that it does not talk about constructor-style binding (the kind that happens when you use the new keyword), which is an important thing to know about. Crockford recommends rarely or never using new, but he explains how it works in one of the advanced videos.

ppk maintains a very reliable and useful Javascript reference at quirksmode.org, and of course Crockford has a ton of resources as well.

Handy Tools

Once you start writing Javascript day-to-day, Firebug is an absolutely essential Firefox addon; it lets you interact with any website using Javascript, examine Javascript objects, keep an eye on AJAX requests, profile your scripts, debug to a console, and lots of other stuff.

You will also want to get into the habit of running your Javascript code through JSLint (written, of course, by Crockford) to quickly locate any trouble spots, unnoticed global variables, or syntax issues that might cause browser incompatibilities. I recently used it to solve a particularly dicey problem that was only appearing on IE7–after running my code through JSLint and cleaning up the syntax, everything worked again.

You can do a lot with Javascript, but you need to understand it. Hopefully you know where to start now.

©2011 Agathon Group™. All rights reserved.