The Best Way to Learn JavaScript

• http://net.tutsplus.com/tutorials/javascript-ajax/the-best-way-to-learn-javascript/

• Learning something new is scary. For me, the biggest issue with picking up a new skill is that I don’t know what I don’t know. Given that, it’s often useful to find a plan for learning whatever you’re interested in.

• That’s what this post is: your blueprint, your roadmap, your plan of action for learning JavaScript! You don’t have to worry about finding the best resources, sorting out the bad ones, and figuring out what to learn next. It’s all here.

Assignment 0: Understand what JavaScript Is and Isn’t

• JavaScript is the language of the browser (not exclusively these days, though).

• It’s primary purpose is to add interactivity to an otherwise static page.

• In the browser, it’s not going to replace PHP or Ruby for you.

• It’s not even going to replace your HTML or CSS; you’ll use it in conjunction to them. 

• you’ve heard about jQuery, which is probably the most widely-used JavaScript library. Or maybe you’ve heard about one of the other popular JavaScript frameworks, like Mootools, YUI, Dojo, and others. 

• Consider them a collection of JavaScript helper utilities

Assignment 1: Work Through the Courses at Codecademy.com

• Codecademy is a relatively new website that bills itself as “the easiest way to learn how to code.”

Assignment 2: AppendTo’s Screencasts

• http://learn.appendto.com/

Assignment 3: Read A Good JavaScript Introduction

• A Re-introduction to JavaScript – This introduction is on the Mozilla Developers Network, and certainly does the language justice. It’s a dense work, with almost as many code examples as paragraphs.

• Eloquent JavaScript – This book, by Marijn Haverbeke, is available freely online, but you can also get it on Amazon if you’d like a hard copy. It goes beyond the MDN intro, because it covers not only the JavaScript language, but also coding style and using JavaScript in the browser. Also, “eloquent” isn’t an overstatement.

• Getting Good with JavaScript – Okay, yes, this is my own book, but there’s another reason I’m including it here. It’s really pretty different from the other two intros I’ve listed here; I only cover what you’ll need to know to get up and running as quickly as possible. Also, it comes with over 6 hours of screencasts, so if that you’re thing, check it out. (And yes, this one costs.)

Assignment 4: Install and Learn Firebug (or the Developer Tools)

• Firebug– Firebug website and wiki– Introduction to Firebug on CSS-Tricks– 10 Reasons Why You Should Be Using Firebug here on

Nettuts+.– Firebug: White to Black Belt by me, on the Tuts+ Marketplace.

• Developer Tools– Developer tools website– Google I/O 2011: Chrome Dev Tools Reloaded by Paul Irish– Google Chrome Developer Tools: 12 Tricks to Develop Quicker

 by Paul Irish

Assignment 5: Read a Book

• Professional JavaScript for Web Developers – Written by Nicolas C. Zakas, this book could hardly cover more than it does. If you’ve seen any of Zakas’ work before, you’ll know he’s incredibly thorough. Besides covering the JavaScript language, this book will give you a good handle on using JavaScript in the browser.

• JavaScript 24-hour Trainer – This awesome resource was put together by Jeremy McPeak, who writes for Nettuts+ as well. It’s not just a book: it comes with over 4 hours of video tutorials on DVD. There are 43 lessons, covering everything from syntax to coding guidelines and code optimization.

• JavaScript Patterns – Written by Stoyan Stefanov. I just finished reading this book, and, boy, do I wish I had read it sooner. After reading the resources above, you’ll know how to write JavaScript, but this book will teach you how to organize it, an important skill that isn’t as common as you’d think.

• JavaScript: The Good Parts – Written by Douglas Crockford. This little gem will explain what’s good and what’s bad about the JavaScript language.

Assignment 6: Build Something!

• A Photo Gallery: Display a set of photo thumbnails and a main photo. When a user clicks a thumbnail, have the larger version of the thumbnail (not the thumbnail itself) replace the current main photo. Bonus points if you can overlay a caption coming from the thumbnail alt tag, or loop through the photos if the user hasn’t clicked one for a minute.

• A To-do List: This might sound tougher than it is; but I’m not suggesting you build a full-fledged to-do application. Just have a text box with a button beside it; when you click the button, the entered text becomes an item in an unordered list below. Clicking on a list item removes it. It sounds simple enough, but there are several gotchas that it will be good for you to think about as a beginner.

• An Animating Box: Animation is always tricky, but it doesn’t have to be complex. Have a div with some text in it, and several buttons above. One button can adjust the width; one, the height; and one, the background colour. The key is not to have the changes happen immediately, but over the course of, say, a second. Remember, Google is your friend, especially if you haven’t done any animation in JavaScript thus far.

Assignment 7:Begin Learning a JavaScript Library

• jQuery

• Dojo

• YUI

• MooTools

• Prototype

Assignment 8: Keep up with the Masters

• 33 Developers you MUST Subscribe to as a JavaScript Junkie

• http://javascriptshow.com/

• John Resig • Find his musings on JavaScript at his blog.• Creator of the jQuery library, Sizzle selector

engine and the JavaScript port of Processing.• Author of Pro JavaScript Techniques and 

JavaScript Secrets.• Works at Mozilla.• Tweets at @jeresig

• Douglas Crockford • Find his musings on JavaScript at his blog.• Author of JavaScript: The Good Parts• Popularized JSON.• Works at Yahoo.• Lectures on JavaScript

• Brendan Eich • Find his musings on JavaScript at

his blog.• Inventor of the JavaScript language.• Works at Mozilla.• Remember to check out his podcast, as

well.• Tweets at @BrendanEich