Advertisement
JavaScript & AJAX

The Best Way to Learn JavaScript

by

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. Just follow it, step by step.


Assignment 0: Understand what JavaScript Is and Isn’t

JavaScript is the language of the browser.

Before you actually begin learning JavaScript, take a minute to understand what it is and does.

JavaScript is not jQuery, Flash, or Java. It’s a programming language separate from all of those.

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. Also, it isn’t as terrible to learn as you might have thought or heard.

One more note: 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. Where do these fit into the picture? Consider them a collection of JavaScript helper utilities; you’re still writing JavaScript when using them, but it’s heavily abstracted JavaScript. It saves you a ton of work.

You might even have heard someone say that you should start with jQuery (or another library) and learn JavaScript after. I respectfully yet strongly disagree. Get a good handle on JavaScript first, and then use libraries. You’ll understand what you’re doing much better; and, consequently, you’ll be writing much better JavaScript.


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.” You’ll be the judge of that! Currently, there are only two course: “Getting Started with Programming” and “JavaScript Quick Start Guide.” This is an awesome way to dip your toes in the JavaScript pool. Very similar to the Try Ruby exercises, you’ll follow short lessons, writing code inside the browser and watching the results. All while earning points and unlocking achievement badges.

CodeCademy

If you’re already familiar with another programming language, you can probably start with the “JavaScript Quick Start Guide”; if this is your first time taking up programming (beyond HTML and CSS), then you’ll find the “Getting Started with Programming” course immensely helpful. Codecademy is free, but signing up is required.


Assignment 2: appendTo's Screencasts

The folks at appendTo have a fantastic set of screencasts geared specifically for beginners. If you want to learn JavaScript the right (and easy) way, definitely work along with these lessons. Visual training is always a plus!

"Level up your skills with our on demand, pragmatic training solution. No signup required. No catch. No kidding."


Assignment 3: Read A Good JavaScript Introduction

Eloquent JavaScript

Once you work through the courses at the Codecademy, you’ll want to get a more thorough introduction to JavaScript - an introduction that will introduce you to the all the types, operators, control structures, and more.

A handful of good introductions, if I may:

  • 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

Once you start working with JavaScript in the browser, you’ll want to install Firebug and get familiar with it. Firebug is a plugin for Firefox that assists you in building and debugging your web pages: think of it as the surgeon’s knife for web developers. Don’t use Firefox? Like Safari or Chrome better? No problem: check out the built-in developer tools, which are very similar to Firebug.

You can open the developer tools panel by pressing Option + Command + I on the Mac, or Control + Shift + I on the PC.

You’ll learn a lot by opening up your tool of choice and just clicking around while on one of your favourite websites. Here are a couple of resources that will get you up to speed:


Assignment 5: Read a Book

So now you’re familiar with the basics. However, there’s a lot more to learn. While I could recommend a list of books that would bankrupt you, I’ll keep it to four of the highest-quality books you’ll find anywhere:

These first two are general, in-depth JavaScript resources that take what you know from the introductions to a much deeper level; sure, they’ll be some overlap from the introductions, but not much: just enough to keep you comfy.

(Note: while all these books are available on Amazon, I’ve linked to the publishers’ websites, so you can check out the sample chapters available.)

  • 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.

While those books are great for understanding the JavaScript language and how to use it in the browser, there’s a lot more to learn. And while those books do go into some patterns and practices, here are two books devoted to those subjects that I think you’ll find useful.

  • 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!

As you worked through the resources above, you should have been following along with the code samples: pulling them apart, and tweaking them to see what happens. But now it’s time to really strike out on your own. It’s time to actually build something.

So, what can you build? There’s a lot you can do. Here are a couple of ideas.

  • 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.

I’m sure you can think of other projects that will be great practice. Of course, push yourself out of your comfort zone; that’s the only way to learn.

Also, be sure to refer to the JavaScript category here on Nettuts+ for a massive list of tutorials, at all skill levels.


Assignment 7: Begin Learning a JavaScript Library

Use a JS library

If you’ve come this far, you’ll probably realize that there are several things that are difficult to accomplish in a cross-browser way (or at all) in JavaScript. The biggest offenders are probably things like excessive DOM manipulation, AJAX, and animation. This is where a library comes it.

As I mentioned earlier, the point of a JavaScript library is to sugar down the painful stuff. Therefore, now might be the time to look at one. There are a ton to choose from, and I’ll let you decided which to experiment with. Whether it be jQuery or Mootools, YUI or Dojo, their respective sites will give you everything you need to get started. If you feel the need, give one a try.

Most Popular Libraries

While there's certainly a countless number of libraries available, you should try to stick with a popular choice - at least at first.


Assignment 8: Keep up with the Masters

Drop what you're doing, and subscribe/follow these developers. This is a requirement.

There are a ton of incredible JavaScript geniuses out there, who are always doing cool stuff that you don’t want to miss. Thankfully, our never-sleeping associate editor Siddharth has rounded up a list of ”33 Developers you MUST Subscribe to as a JavaScript Junkie. Drop what you're doing, and subscribe/follow these developers. This is a requirement.

But you can do more. This fair website is often posting about JavaScript, so don’t go away. Also, check out the JavaScript Show, a podcast about the latest and greatest in the world of JavaScript. You might also want to sign up to the JavaScript Weekly email newsletter.


Conclusion

Thanks for reading! Hopefully, this plan can help you become a JavaScript fanatic. If you’re already familiar with JavaScript, can you recommend any other resources in the comments?

Related Posts
  • Computer Skills
    Productivity
    Why a Finder Replacement is Still a Good IdeaFinder2x
    Until OS X Mavericks, a replacement Finder application was a must for most power users. Basic features like tabs were missing from OS X’s default application, so to get an improved Finder experience you had to turn to third parties. With Mavericks, however, Apple has finally brought tabs to Finder. In this tutorial I’ll show you what replacement Finder applications are out there, what they can still add to your workflow and why they're still worth getting.Read More…
  • Code
    Articles
    Resources to Get You Up to Speed in AngularJSAngular js retina preview
    Some of you may have read my Ember.js series of articles and realized I'm pretty smitten with the framework. But as a professional developer, it's important that I consider other tools and take the time to vet them properly. One of the frameworks that everyone keeps telling me to look at is AngularJS. It aims to make building complex web apps easier but from experience, I know that most frameworks have a learning curve. It's never just dive in and code.Read More…
  • Code
    News
    Write for Wptuts+Writeforus 400
    Our focus here on Wptuts+ is on tutorials for WordPress developers (makes sense, right?). We cover anything related to WordPress, in particular theme and plugin development. Our tutorials are aimed at anyone from beginner to intermediate, intermediate to advanced, and so on. Ultimately, our goal is to make sure that the reader leaves with more knowledge than when they arrived. What We’re Looking For At the moment we’re wanting to publish more content on areas such as responsive theme development, app themes, unit testing with WordPress, preprocessors (Sass / LESS, in particular), parallax implementation, and a variety of plugin examples. Basic tutorials are welcome, but we’re really after thorough coverage of these areas. Think Tom McFarlin-style (check out Tom’s series’ on Wptuts+ to get what I mean there). At the moment we only accept content in English. We’ll proofread, edit, and provide feedback on your content, but we won’t re-write it for you, so it’s important your English is fluent. Having said that, if you have a question about how to phrase something in English, go ahead and write it as best you can and one of the editors will be happy to provide feedback prior to publishing the article. Don’t let intimidation of the English language prevent you from contributing an article! I’m going to go ahead and assume you know a little about WordPress for this, so you’ll be comfortable drafting your posts in WordPress ;) Let’s Talk Money We don’t expect you to write for us for free! You’ll start out on $150 USD per tutorial, and we bump that up once you’ve written a handful of posts for us. High profile authors can negotiate a higher rate with us, but you’ve really got to know your stuff. I’m talking serious WordPress chops! Some of our regular authors invoice us for $750+ USD per month. That’s not bad for dropping some knowledge and getting some recognition, too! For the right authors, we can guarantee you publishing spots to help you pump out quality WordPress tutorials. Also, who doesn’t love a marketplace badge? You get a special badge for contributing a tutorial to a Tuts+ site ;) Where To Next? Whether you’ve written for Wptuts+ before, or you’re fresh to this tutorial writing business, please hit me up! (Even if you’ve applied before and it hasn’t worked out!) Shoot an email to wp@tutsplus.com with the following info: Name Marketplace username Brief paragraph filling me in on your background and why you want to write for us One link to a tutorial you’ve written, helped with, or is the kind of content you want to create Two ideas for tutorials you’d like to write for us A link to your portfolio and / or GitHub profile Show your passion! Best of luck! I look forward to hearing from you and hopefully working together. If WordPress isn’t your strong suit, don’t forget there are other Tuts+ sites you may consider getting in touch with too: Nettuts+ Webdesigntuts+ Mobiletuts+ Gamedevtuts+ Psdtuts+ Vectortuts+ Audiotuts+ Aetuts+ Cgtut+ Phototuts+ Mactuts+ Crafttuts+ Read More…
  • Code
    PHP
    How to Accept Payments With StripeCode
    Processing credit cards is unfortunately far more difficult than we might hope, as developers. Given that it’s such a common task, is it really necessary that we jump through countless hoops (surrounded by fire, of course) for the sole purpose of processing a payment? Merchants? Gateways? SSL? Security? Very quickly, a seemingly simple operation can become an overwhelmingly confusing and, more importantly, dangerous task. Any time that you find yourself handling a user’s sensitive data, you better be on your toes. Read More…
  • Code
    jQuery
    The State of jQuery in 2013Code
    A long time ago, in a galaxy far, far away, JavaScript was a hated language. In fact, “hated” is an understatement; JavaScript was a despised language. Consequently, developers generally treated it as such, only tipping their toes into the JavaScript waters when they needed to sprinkle a bit of flair into their applications. Some form validation here, an image slider there. Despite the fact that there is a whole lot of good in the JavaScript language, due to widespread ignorance, few took the time to properly learn it.Read More…
  • Code
    Tools
    Demystifying RESTCode
    No, this is not an article that encourages you to sleep more! However, if that was your first inclination, then the following text was tailor-made for you! It’s an unfortunate truth, though, that the principles of REST are decidely complex. Entire books have been written on the subject. I won’t be so presumptuous to assume that I can merge such an intricate topic into a few thousand words.Read More…