Pinterest Stumbleupon Whatsapp
Ads by Google

“Love – love is a verb, love is a doing word,” or so the song goes. And actually, the same can be said about JavaScript: this sizzling-hot programming language is a doing language.

If you think JavaScript is interesting, you need to do JavaScript – not just read about it. Getting started is much easier than you might expect, and costs nothing. I tracked down three choice resources for learning JavaScript that are all about getting you to do something with the language, rather than just read or watch videos.

For Taking a Guided Tour: Codeacademy’s JavaScript Track

Assuming you know very little about JavaScript, taking a guided tour through the language would be a good first step. Some people do this with a book or two, others do it with a series of videos. The excellent Code School has a JavaScript path that uses both well-crafted videos and exercises, but it revolves around ancillary technologies such as jQuery or CoffeeScript CoffeeScript Is JavaScript Without The Headaches CoffeeScript Is JavaScript Without The Headaches I've never really liked writing JavaScript all that much. From the day I wrote my first line using it, I've always resented that whatever I write in it always ends up looking like a Jackson... Read More . Also, it costs money.

If you’re looking for a resource that is both free and has a strong emphasis on doing, you need Codeacademy’s JavaScript Track. This guided JavaScript course uses the absolute minimum of textual explanations, all crammed onto the sidebar. The bulk of the screen is taken up by an elegant code editor which runs right in your browser. To progress through the course, you need to complete actual (simple) coding assignments:

codecademy

The browser checks your code — once you get it right, you move on to the next phase. The course covers many JavaScript basics, from functions through loops, control flow, data structures, and objects. This is a great way to familiarize yourself with the core language, before diving into libraries such as jQuery. If you already know some JavaScript, you don’t have to start from the beginning: You may do any section you like, or even progress through several sections in parallel.

Ads by Google

For Experimenting: Chrome’s Console and jsFiddle

Once you have a basic grasp of the simple JavaScript syntax, the next important thing to keep in mind about the language is that it is very accessible: You are likely reading these words off a browser window right now. This means you’re already running a full-fledged JavaScript environment, right this minute. Nothing to install or configure – just right-click anything on the page and select Inspect Element. You’ll get the following:

javascript-console-1

By clicking the icon shown above, you can pop up a JavaScript console which runs in the context of the page you’re currently looking at. In other words, you can manipulate the current page with arbitrary JavaScript code, use any libraries (such as jQuery jQuery Tutorial - Getting Started: Basics & Selectors jQuery Tutorial - Getting Started: Basics & Selectors Last week, I talked about how important jQuery is to any modern web developer and why it's awesome. This week, I think it's time we got our hands dirty with some code and learnt how... Read More ) loaded with the page, and do anything you wish.

This is a very good way of learning by trial and error, because it’s so accessible and there’s zero fear. You can’t do any damage — none of your changes are saved anywhere, and all it takes is a single tap of the F5 key to revert everything you’ve done and start over. Another important thing to understand about the console is that you’re not limited to one-liners: You can write several lines of code. To begin a new line without executing the code you’ve entered so far, hit Shift+Enter.

javascript-console-2

Sometimes you may wish to create your own environment, though: A custom combination of HTML, CSS, JavaScript libraries, and your own code. This can help you test out more comprehensive ideas. If you’d like to create something like this without having to set up anything locally, jsFiddle is what you need. This is a four-pane environment: HTML, CSS, JavaScript, and the output. A sidebar lets you pick out all sorts of extras, such as which JavaScript library you want to rely on. There are also a bunch of examples, some of which may be too elaborate for beginners:

jsfiddle-1

Judicious use of Chrome’s console and jsFiddle should help you keep JavaScript accessible, playful, and alive in your mind. Focusing only on guided tours through the language without doing your own experiments could actually end up making JavaScript seem more intimidating than it really is. After all, it’s your code — play around!

For Reference: Mozilla Developer Network and jQuery API Documentation

We’ve mentioned the Mozilla Developer Network before, as one of several resources that can help you learn to code Learn To Code: 10 Free And Fantastic Online Resources To Hone Your Skills Learn To Code: 10 Free And Fantastic Online Resources To Hone Your Skills Coding. A topic that is avoided by many. There are an abundance of free resources and tools, all of which are available online. Sure you could take some courses on the topic at a nearby... Read More . That was in a more general context, as the MDN contains information about a broad variety of subjects. For our purposes here, you should know that the MDN serves as a very solid reference handbook to all things JavaScript. The MDN does offer a structured JavaScript Guide which you may be able to follow step by step (depending on your level of prior programming knowledge), but its true strength lies in its JavaScript reference section. This is a section you can use as a dictionary of sorts, just to figure out the structure of specific statements.

mdn

Another key reference resource is the jQuery API Documentation. Just like the MDN, this API documentation may seem daunting, scary, and altogether unfriendly at first. And yes, none of these reference resources will handhold you through gentle explanations — but they make up for it by being comprehensive, very trustworthy, and authoritative.

jquery-api

Coders don’t necessarily have to know everything — a big part of the work is knowing where to look when you need to figure something out. Learning how to read and understand the official documentation is an important step on the road to improving your coding style and knowledge. References are powerful tools in the quest to learn by doing, because each topic usually stands on its own: you can quickly look up something you need more information on, get the core of what you need, and carry on coding.

And Finally, One Optional Book

There actually is one book I would like to recommend. It’s not about JavaScript, and you won’t find any exercises in it. In fact, it barely has any code at all. And yet, it’s a very good book to read if you’re curious about programming of any kind: It’s called Code Simplicity, and it teaches you how to think about programming, and how to approach the subject as a whole. You can read my complete review of it right on the Amazon page (currently marked as the most helpful customer review, awww), but in a nutshell, this is a great book about the philosophical underpinnings of coding. It’s like taking a few steps back from the keyboard and just pondering the subject as a whole.

Code Simplicity is not required reading by any means, but if you do feel your knowledge may benefit by reading a book, this is a great one to start with.

Do You Learn by Doing?

And now I finally get to ask you: How do you approach learning to code? Do you learn by doing, or are you more of a reader? What are the resources you’ve made use of in your quest to become a coder? Let me know in the comments!

  1. Adam Walmsley
    August 29, 2013 at 1:15 am

    what about codeavengers ?

    • Karl J. Gephart
      August 29, 2013 at 5:59 am

      Code Avengers really rocks! Getting ready to start the 2nd course in JS. I started off with Codecademy and LearnStreet and wish I would've started off with Code Avengers! CA 1st course is free, 2nd course is $15. They're planning on a 3rd course in a few months, as I was told in email.

  2. Max K
    August 28, 2013 at 6:06 pm

    What about codepen?

Leave a Reply

Your email address will not be published. Required fields are marked *