I worked for years designing interfaces for other developers to build. Bit by bit I slowly ramped up my skills until I was writing all of the HTML, CSS, Sass, and documentation for most of my projects. Then the day came when I could no longer introduce myself as a "web designer" when meeting other web designers. In their world I was a front-end-developer. But I never felt comfortable introducing myself as a front-end developer. I didn’t know JavaScript. And what front-end developer doesn’t know JavaScript?
I was a bit unsure of how difficult learning JavaScript would be. What I had been told of JavaScript was that it was not the most well-written language on the block. The language of ‘wat?’? The language that has good parts and bad parts? The language that has nothing to do with Java or scripting.
Regardless, I decided to jump in with both feet and teach myself JavaScript. I wanted to share the resources I used as well as my thoughts while learning. I've listed them in roughly the same order that I consumed them.
CodeSchool: JavaScript Road Trip Part 1
https://www.codeschool.com/courses/javascript-road-trip-part-1 (Free)
This course was a synch. It covers the basics of values and variables. It almost felt like more of an introductory course to algebra than JavaScript. Nonetheless, my attitude was to force myself through content I may already know. If anything, it solidifies my existing knowledge.
CodeSchool: JavaScript Road Trip Part 2
https://www.codeschool.com/courses/javascript-road-trip-part-2 (Subscription Required)
This course begins to cover some programming concepts like loops, functions and arrays. Get used to writing for loops. You will write a lot of them.
Kirupa.com: Learn JavaScript
http://www.kirupa.com/html5/learn_javascript.htm (Free)
Most reading resources teaching JavaScript have a wall of text explaining concepts with a code example every so often showing its implementation. Kirupa incorporates visual imagery and diagrams to illustrate the flow of execution in the code. This is where I got my deepest understanding of capturing and bubbling of events, prototypal inheritance, and closures. I would highly recommend this site for every beginner (especially if you are a visual learner as I am).
CodeSchool: JavaScript Road Trip Part 3
https://www.codeschool.com/courses/javascript-road-trip-part-3 (Subscription Required)
Holy Jeez! Things just got really complicated. This course covers function expressions, closures, objects, prototypes, and constructors. It glazes over a few known rules in JavaScript (like the lack of classes). This could be confusing to some as it seems to imply that you can simply create "classes" by just capitalizing the name of your functions. Luckily, I was reading other resources while doing Codeschool, so I could pick up on these subtleties. I’d recommend reading outside materials while completing code school to avoid some head pain.
JavaScript Enlightenment
http://www.javascriptenlightenment.com/JavaScript_Enlightenment.pdf (Free)
This book was a great review of the concepts I had learned so far in JavaScript. Cody Lindley covers a lot of “quirks” by showing examples of what you can do in JavaScript. Just remember it is not necessarily what you should do. This is also the first place where I encountered an explanation of global functions. It also was comforting to finally learn that the Array() constructor can take up to 4,294,967,295 parameters. Phew. What would I do without that knowledge?
Eloquent JavaScript:
eloquentjavascript.net (Free)
This book began to make me think about the best way to write JavaScript. Marijn Haverbeke does a lot of code refactoring throughout the book. He also covers commonly used conventions like functional programming, object oriented programming, and modularity. This book introduced some new topics that I hadn’t seen discussed before such as error handling. I should also note that a wise JavaScript friend of mine recommended doing all (yes, all) of the exercises within this book to really make it worthwhile.
Duck Typing Definition:
http://en.wikipedia.org/wiki/Ducktyping#InJavaScript (Free)
I added this because this phrase kept coming up. I had never heard of it. Essentially it means that unlike strongly typed languages where you would specify the type of object you are creating explicitly (type = “Duck”), in JavaScript you can make the assumption that if the object has methods that allow it to talk like a duck, walk like a duck, and have feathers like a duck, it’s a duck!
JavaScript: The Good Parts
http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742 (Paid)
This was pretty much the #1 recommended book listed in most JavaScript learning resources list. So, I had to read it. I wouldn't recommend starting with it thought as it is slightly more advanced. I found Douglas Crockford's train diagrams towards the beginning of the book to be the best part. It helped me visualize the structure of how the code executes in JavaScript . They were pretty genius actually. The rest of the book was more review of all the other resources.
Mozilla Developer Network: JavaScript
https://developer.mozilla.org/en-US/docs/Web/JavaScript (Free)
This covers everything and anything you would ever need to know about JavaScript. It's extremely detailed. This is my go-to for reviewing concepts and exploring them in extreme depth now that I've covered my bases. Definitely work bookmarking.
Bonus! jQuery Resources too!
I obviously had to tackle learning jQuery since I planned to be doing a great deal of my JavaScripting on the web. I think it would be a shame for someone to try to learn jQuery without having learned Javascript first. Knowing the concepts of Javascript helped me tremendously when it came to separating the Javascript from jQuery. I would have been confused as to what a “method” was exactly for example.
CodeSchool: Try jQuery
https://www.codeschool.com/courses/try-jquery (Free)
This course was a great intro on how to include jQuery in a project, how to traverse the DOM, and how to begin manipulating the DOM using jQuery. If you’re unfamiliar with HTML, you’ll need to go back and study that first before doing this course.
jQuery Succintly
http://www.syncfusion.com/content/downloads/ebook/jquery_succinctly.pdf (Free)
This was essentially an abridged version of jQuery’s documentation. It was easily digestible. It helps you to grok the more commonly used methods in jQuery as well as grok their application in a variety of circumstances. Yah, Cody Lindley says grok a lot throughout the book.
Codeschool: jQuery The Return Flight
https://www.codeschool.com/courses/jquery-the-return-flight (Subscription Required)
I didn’t really enjoy this course very much (sorry Codeschool). I spent a lot more time searching the jQuery docs than watching the videos and completing the challenges. Maybe this was a goal of the course? I don’t know. But I found it more frustrating than helpful. It did familiarize me with Ajax (which is essential), but I feel like there is probably a better resource out there to learn Ajax (which I have yet to really find.)
Summary
All of these resources are a good start, but nothing can replace what you learn by actually writing JavaScript. Start on a new project. Rewrite one of your favorite websites / plugins. Join a hackathon. Contribute to an open source a repo or community-driven project.
Also, join and attend your local JavaScript meetup. You don't have to be interested in the topic being covered in order to get something out of it (pst...it's really about meeting other people and learning from them in person).
If you know of any other great beginner JavaScript resources I missed, tell me about them in the comments. I'd love to hear your own reviews. Also, be on the lookout for future blog posts where I will detail resources for learning Coffeescript, Backbone.js, and Marionette.js.