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.

• Downloads
  • Download this tutorial in a ZIP
• Learning Resources
  • w3schools - JavaScript and HTML DOM Reference
  • krook - JavaScript DOM
• Alternative Tutorials
  • Object Oriented Programming in JavaScript (Using Prototype) - Mike Koss
  • JavaScipt Closures for Dummies - Morris Johns
  • JavaScript - Crockford
• JavaScript Frameworks
  • jQuery
  • Sencha - Ext JS

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.