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).
- JavaScript Types
- Object Properties
- Object Declarations
- Objects vs Arrays
- Object Pointers and Cloning
- Equals Operators
- Closures
- Advanced Closures
- Defining Classes with Closures
- Defining Classes with Prototype
- Function Scope
- Creating Delegates
- Class Inheritance
- Advanced Class Inheritance
- More Advanced Class Inheritance
- 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
- Learning Resources
- Alternative Tutorials
- JavaScript Frameworks
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.
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.
ReplyDeleteSide note: How the heck did we fail to work Taboo into the source code?
Bummer, links don't appear to work anymore....
ReplyDeleteThis tutorial takes a practical approach to learning JavaScript by starting with language fundamentals and gradually moving toward object-oriented concepts. The emphasis on consistent coding conventions is especially valuable because JavaScript provides many different ways to accomplish the same task. Building a strong foundation before moving into advanced application development can make the language much easier to understand.
ReplyDeleteThe incremental structure of the lessons also makes the tutorial approachable for developers who already have some JavaScript experience but want to strengthen their understanding of the language's dynamic and object-oriented features. Following Javascript Online Training can provide another structured way to develop these fundamentals and improve practical coding skills.
I also like the focus on explaining alternative implementations rather than simply presenting code, as understanding why a particular approach is preferred can help developers make better design decisions. Exploring a Javascript Online Course can further support learners who want to progress from basic JavaScript concepts toward more advanced development.
ReplyDelete