Wednesday, February 4, 2009

JavaScript Introduction

We will now learn to program in JavaScript. We will first learn all about the JavaScript programming language, in the next few lectures. Later on we will see how JavaScript can be used to manipulate XHTML documents (the DOM).

Most people "learn" JavaScript when they want to do some small animation in their website; they google for some JavaScript code and cut-and-paste something that they torture into fitting their needs. This works, it fixes your immediate problem, but it does not teach you JavaScript. The process eventually leads to a Frankenstein website with cobbled together pieces that is impossible to maintain. Of course, by then the original author has moved on to a higher-paying job elsewhere.

I do not want you to learn JavaScript this way. I think it is important to understand that JavaScript is a full-fledged complex object-oriented programming language. You should learn to use JavaScript wisely. JavaScript is poised to become the next major programming language: most new applications will be implemented in JavaScript. The language is no longer just for making simple animations, it is fast becoming and application development language (for example, see google docs).

The lectures you must watch by February 11 are below. The first one goes over the basic primitives of JavaScript. It is good for people who have very little or no programming experience. Also note that this video in in HD with a resolution of 1280x720. If you watch it embedded in the box below you are only getting a resolution of 640x360. To watch these lectures in their full resolution you must click on the "view in full screen mode" icon on the bottom right of the video.

JavaScript: Part 1 from Jose Vidal on Vimeo.

There is also a version formatted for the iphone.

In the second lecture I just write a couple of short programs in JavaScript. It is an example of how to use your editor and firebug to write, test, and debug JavaScript programs.

JavaScript Examples from Jose Vidal on Vimeo.
iphone version

You also need to go over this JavaScript tutorial or, even better, buy and read JavaScript: The Good Parts, by Douglas Crockford. That book is the best guide I have found to the JavaScript language, even if I don't see the value added by parsing diagrams he often adds. It does cover all the "good parts" of JavaScript and tells you which features of the language are best avoided. Unfortunatly, that book does not say anything about the DOM so it is not enough. You will also need a good reference book like JavaScript: The Definitive Guide. My lectures are based on both of these books.

Finally, if you are tired of listening to me, and I don't blame you, may I recommend you instead listen to Crockford himself. Douglas Crockford is a JavaScript Architect (that is his official title) at Yahoo!. He is the Yoda of JavaScript, teaching all the young JavaScript jedi the true ways of prototype programming. He has a series of lectures were he introduces JavaScript and later explains some of the most advanced ideas, like closures and prototype inheritance. I really enjoyed watching these. However, these lectures are targeted to an audience of experienced software developers, so he does not go into a lot of details. Still, they are worth watching just for the gossip bits he throws in. His introduction to JavaScript lecture is divided into four parts:


  1. For javascript: the definitive guide is it best to get the most recent release?

    You can get the 2006 release for $20+ship or $1.00 for the 2001 release on

    I'm fine with paying more if there are important updates.

  2. The 5th edition is a monster update. You can read the author's details on what is new. Basically, it is a lot of new info regarding the DOM and Ajax. It is a really good reference book.

    However, you can get all the same information for free from places like and The book is good for those of us who like to sit back and read. Flanagan does a really good job at carefully explaining the ideas while the websites are much more succinct in their explanations.