Saturday, September 17, 2011

Object Oriented JavaScript Tutorial

Over the past month I spent a lot of time helping teach a good friend of mine how to write advanced JavaScript. Although he had worked with JavaScript many times before, he did not know a lot of the simple things that make JavaScript the crazy dynamic rich development experience that it is. Together we built up this series of examples to help teach everything from language basics to object orientation.

Why do we need yet another JavaScript tutorial?

JavaScript is an interesting language. It is loosely typed, the object orientation has been hacked in over time, and there are at least 10 ways to do anything. The most important thing you can do when writing JavaScript is to choose a set of conventions and stick with them. Unfortunately with so many different ways to do things out there, it's hard to find tutorials that are consistent in their conventions.

Just like developing in any other programming language, understanding the fundamentals is key to building up an advanced application. This tutorial starts out extremely simple, and incrementally gets more advanced. It shows alternative implementations for different tasks, and tries to explain why I prefer the ones that I do. Meanwhile it always follows a consistent set of conventions.

Let's get to the tutorial!

This tutorial comes in 16 lessons. They are designed to be debugged with Firebug for Firefox. If you don't want to actually run the scripts then you can always just read them by downloading the small htm files below and opening them in notepad (or whichever text editor you prefer).

  1. JavaScript Types
  2. Object Properties
  3. Object Declarations
  4. Objects vs Arrays
  5. Object Pointers and Cloning
  6. Equals Operators
  7. Closures
  8. Advanced Closures
  9. Defining Classes with Closures
  10. Defining Classes with Prototype
  11. Function Scope
  12. Creating Delegates
  13. Class Inheritance
  14. Advanced Class Inheritance
  15. More Advanced Class Inheritance
  16. Extending jQuery

Additional Resources

If all that wasn't enough or it just got you thirsty for more, here are some additional resources to help start you down the path of becoming a ninja with JavaScript. My recommendation is that whenever you are writing JavaScript you should have w3schools open in a second browser window at all times.

Enjoy,
Tom

9/21 Update - Thanks to Zach Mayer (of System-Exception.com) for providing a great critique of my tutorial. He pointed out several typos and small bugs in lessons 4, 6, 7, 9, 10, 12, 14, 15.

2 comments:

  1. Hey, thanks for the help Tom. One of the most useful evenings I have spent studying, ever. The new job is reaping major benefits from your help.

    Side note: How the heck did we fail to work Taboo into the source code?

    ReplyDelete
  2. Bummer, links don't appear to work anymore....

    ReplyDelete

Real Time Web Analytics