How to Learn JavaScript Properly

»feb. 24 Last Year 467

Learn JavaScript Properly (For Non-JavaScript Programmers and First-time Programmers)

Prerequisite: Completed at least some high school (no programming experience necessary).

Important Update (October 27, 2014):
Around November 10, I will add a new study guide for new programmers. I will replace the recommended book with another book better suited (easier to understand and easier to comprehend) for first-time programmers. We will use either JavaScript and JQuery: Interactive Front-End Web Development or Beginning JavaScript.

Study Groups
People have started study groups for this study guide. You can find such groups on Reddit here and here, and other places, including Code Crew Meetup.


This study guide, which I also refer to as a course outline or a road map, gives you a structured and instructive outline on how to learn JavaScript properly, from beginner to attainment.

You do want to learn JavaScript. I presume you are here for that reason; you have made a wise decision, for if you want to develop modern websites and web applications (including an internet startup), you need to know JavaScript, unless you are developing a native iOS or Android app. And while there exist ample online resources to teach you JavaScript, finding the most efficient and beneficial method to learn the “language of the web” is a frustrating endeavor. This study guide streamlines and simplifies the process.

This study guide has gotten so popular that more than 4500 websites currently link to it and more than 4000 visitors read it every day.

How Will Your Life Change After You Learn JavaScript Properly?

Maybe you will look more lovely and have a kinder, more pleasant personality after you learn JavaScript properly. Who knows? I don’t know.

But I do know that you will emerge more confident, more assured in your ability, and amply trained with a highly valued skill—a skill more valuable than most college degrees. For as a JavaScript developer, you will have the capacity not only to create whatever startup or web app you imagine, but also to work, making a handsome salary, as a front-end or full-stack developer, developing modern and futuristic applications. In fact, if you have never developed any kind of application before, you will experience ecstasy, so exultant and euphoric that you will want to enthusiastically practice more and build something—anything, like a hungry chef discovering a furnished kitchen with every tool, every utensil, and a stocked refrigerator.

It is worth noting that unlike just a couple of years ago—when you needed to know a true server-side language (such as PHP, Rails, Java, Python, or Perl) to develop scalable, dynamic, and database-driven web applications—today you can do as much and more with JavaScript alone.

This is the flourishing and glorious age of the JavaScript developer.

How NOT To Learn JavaScript

  • Do not try to learn JavaScript the first time from bits of unrelated or related JavaScript tutorials online; this is the worst way to learn a programming language. It could work for some after countless such tutorials, but it is an inefficient process that lacks the proper hierarchical structure needed for learning a subject matter thoroughly. And this could lead to your being stuck quite frequently, when you start to build websites and web applications with the language. In short, you will not have the know-how—the comprehensive knowledge—you need to use that language as a tool—as your tool.
  • In addition, some will recommend you learn JavaScript from “JavaScript: The Good Parts,” by the venerable Douglas Crockford. While many regard Mr. Crockford as a JavaScript godfather, his book, The Good Parts, is not the best JavaScript book for beginners. It does not explain JavaScript’s core concepts in a detailed, clear, and easily digestible form. I do recommend you follow Crockford’s advanced videos, however, as part of the Learn Advanced JavaScript road map.
  • And do not try to learn the language by using only Codecademy; while you will learn how to program bits of small JavaScript tasks, you will not have learned enough to build web applications. Nonetheless, below, I do recommend Codecademy as a supplemental learning resource.

Resources For This Course

We are using either of two JavaScript books; one is ideal for first-time programmers and the other is better if you have at least a bit of programming experience.

  • You can use either of the following two books:

    This first book is my personal preference because the author explains the topics very well and it covers up to advanced JavaScript topics. However, it is best used if you have at least some very basic understanding of web development. Therefore, buy this book only if you have at least a bit of programming or web development experience (it needn’t be in JavaScript):
    — The paperback Version: Professional JavaScript for Web Developers
    — The Kindle Version: Professional JavaScript for Web Developers

    Or:
    Buy this book if you have no programming experience:
    — The paperback Version: JavaScript: The Definitive Guide
    — The Kindle Version: JavaScript: The Definitive Guide

  • Sign up for an account on Stack Overflow (a FREE service). It is a forum for asking and answering programming questions. This website will be considerably more useful than Codecademy for answering your programming questions, even very basic, seemingly stupid (remember, there is never a stupid question) questions.
  • Sign up for an account on Codecademy. This is an online platform to learn programming: you can write code on their website, right in your browser. (It is also a FREE service.)
  • JavaScriptIsSexy (this blog :) ) blog posts on Objects, Closures, Variable Scope and Hoisting, Functions, and more.

The Road Map to JavaScript Attainment
You will learn just about the full JavaScript language (and jQuery and some HTML5) in 6 to 8 weeks, if you complete this entire course outline. If you don’t have enough time to commit to do all the sections in 6
weeks (which is a relatively aggressive schedule), try to do it in no more than 8 weeks. The longer you take, the harder it will be for you to grasp and remember everything you learn.

Weeks 1 and 2 (Introduction, Data Types, Expressions, and Operators

  1. If you do not already know HTML and CSS very well, complete the Web Fundamentals Track on Codecademy.
  2. Read the Preface and Chapters 1 and 2 of JavaScript: The Definitive Guide.

    Or Read the Introduction and Chapters 1 and 2 of Professional JavaScript for Web Developers.

  3. Very Important: Every example code you encounter in the book, type it out and test it and tweak it (experiment with it) in Firefox’s or Chrome’s browser console. Or use JSFiddle. Don’t use Safari. I recommend Firefox—add the Firebug Add on to firefox and use it for testing and debugging your code. The browser console is an area of the browser where you can write and run JavaScript code.

    And JSFiddle is a web application that allows you to write and test your code online, right in your browser. You can test all sorts of code, including a combination of HTML, CSS, and JavaScript (and jQuery).

  4. Work through the Introduction to JavaScript section of the JavaScript Track on Codecademy.
  5. Read chapters 3 and 4 of JavaScript: The Definitive Guide.

    Or Read the Preface and Chapters 3 and 4 of Professional JavaScript for Web Developers. You can skip the section on “Bitwise Operators”; it is hardly likely you will use those in your JavaScript career.

    And again, make sure you stop and write the example code in your browser’s console (or JSFiddle) and experiment—change some of the variables and tweak the code a bit.

  6. Read chapter 5 of JavaScript: The Definitive Guide. No reading for Professional JavaScript for Web Developers, you have learned the material already in the last chapter.
  7. And work through sections 2 to 5 of the JavaScript Track on Codecademy.

Weeks 3 and 4 (Objects, Arrays, Functions, DOM, jQuery)

  1. Read my post JavaScript Objects in Detail

    Or read chapter 6 of JavaScript: The Definitive Guide.

    Or read chapter 6 of Professional JavaScript for Web Developers. NOTE: Only read the “Understanding Objects” section.

    Any of the 3 is fine, although the 2 textbooks go into more detail: the extra detail you can skip confidently, if you read and thoroughly understand my post.

  2. Read chapters 7 and 8 of JavaScript: The Definitive Guide

    Or read chapters 5 and 7 of Professional JavaScript for Web Developers

  3. At this juncture, you should be spending a lot of time writing code in your browser’s console and testing if-else statements, for loops, Arrays, Functions, Objects, and more. It is critically important that you know (and keep practicing) how to code independently (without help from Codecademy) in your browser. By the time you get back to Codecademy, you shouldn’t need any help or hints. Every assignment should be easy for you.

    If you are still struggling with Codecademy, go back to your browser and keep hacking away. This is where you will learn the most. This is analogous to Lebron James honing his skills as a youth in the “streets” (the neighborhood basketball courts), or to Bill Gates hacking away in his basement.

    There is tremendous value in your hacking away and learning bit by bit on your own. You have to see the value in this strategy, and you have to embrace it and trust that it will work.

    False Sense of Accomplishment When Using Codecademy
    The biggest problem with Codecademy is that the hints and little code snippets help you so much that you have a false sense of accomplishment when you are progressing through the exercises easily. You wouldn’t know it at the time, but much of what you are doing is not on your own.

    Now, Codecademy is still great for helping you to learn how to code, particularly in the manner in which it guides you through the process of developing small projects and small applications from very basic code constructs like if statements, for loops, functions, and variables.

  4. Return to Codecademy and complete the JavaScript track by working through sections 6, 7, and 8 (Data Structures to Object 2).
  5. While you are on Codecademy, go ahead and build the 5 little Basic Projects on the Projects track. After this, you are done with Codecademy. And this is a good thing, because the more you work on your own, the faster you will learn and the better prepared you will be to start programming on your own.
  6. Read chapters 13, 15, 16, and 19 of JavaScript: The Definitive Guide.

    Or read chapters 8, 9, 10, 11, 13, and 14 of Professional JavaScript for Web Developers. This book does not cover jQuery, and the jQuery coverage on Codecademy is insufficient. Follow this jQuery course—it is free: http://try.jquery.com/

    And you can read chapter 19 of JavaScript: The Definitive Guide, if you have the book, for more on jQuery.

  7. Work through the entire jQuery course at http://try.jquery.com/

Get The Ultimate JavaScript Editor: WebStorm

  • Before you build your first project, if you plan to be a JavaScript developer or use JavaScript often, you should take a break now and download a trial copy of WebStorm. Learn how to get started with WebStorm here (written especially for this course).

    WebStorm is unquestionably the absolute best editor (IDE) for programming JavaScript. It costs $49.00 when your 30-day trial period expires, but it is probably the best investment you will make as a JavaScript developer, besides buying the book you are using in this course and learning JavaScript.

  • Make sure you set WebStorm to use JSHint. JSHint is a “tool to detect errors and potential problems in JavaScript code and to enforce your team’s coding conventions.” The cool thing with using WebStorm is that JSHint automatically adds a red line under errors in your code, just as a spell checker does in a word processing application. So JSHint will show you all the errors in your code (including HTML errors) and make you a better JavaScript programmer, even as you are learning. This is extremely important. You will thank me later after you realize how much WebStorm and JSHint have helped you become a better programmer.
  • Moreover, WebStorm is a world-class, professional-grade IDE for coding professional JavaScript web applications, so you will use it a lot. And it integrates Node.js, Git, and other JavaScript frameworks, so even after you have become a rock star JavaScript developer, you will be using it, unless a more compelling JavaScript IDE comes out in the next few months.
  • It is fair that I also mention Sublime Text 2, which is the next best JavaScript editor. But it is not as feature rich and complete (even with numerous add-on packages) as WebStorm. I use Sublime Text 2 to make small edits to files of different programming languages, including JS files. But I don’t use it to program full JavaScript web applications.

Your First Project—A Dynamic Quiz

At this juncture, you have learned enough to build a solid web application that is manageable. Don’t proceed any further until you can successfully build this application I describe below. If you are stuck, ask questions on Stack Overflow and reread sections of the book to properly understand the concepts.

You are building a JavaScript quiz application (you will use HTML and CSS as well) that will function as follows:

  • It is a simple quiz that has radio button choices, and it will show the user her score upon completion.
  • The quiz can show any number of questions and any number of choices.
  • Tally the user’s score and display the final score on the last page. The last page will only show the score, so remove the last question.
  • Use an array to store all the questions. Each question, along with its choices and correct answer, should be stored in an object. The array of questions should look similar to this:
    // Only one question is in this array, but you will add all the questions.
    var allQuestions = [{question: "Who is Prime Minister of the United Kingdom?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer:0}];
  • Dynamically (with document.getElementById or jQuery) add the next question and remove the current question from the screen, when the user clicks the “Next” button. The Next button will be the only button to navigate this version of the quiz.
  • You can ask for help in the comments below or preferably on Stack Overflow. You are likely to get a prompt and accurate answer on Stack Overflow.

Weeks 5 and 6 (Regular Expressions, Window Object, Events, jQuery)

  1. Read chapters 10, 14, 17, and 20 of JavaScript: The Definitive Guide.

    Or read chapters 20 and 23 of Professional JavaScript for Web Developers.

  2. Remember to keep typing out all the example codes in Firefox console and tweak each piece of code to experiment with it to really understand how it works and what it does.
  3. At this point, you should be very comfortable with JavaScript, probably feeling like a Jedi. You are not quite a Jedi yet, you must keep using your newly acquired knowledge and skills as often as possible to keep learning and improving.
  4. Improve Your Quiz Application From Earlier:
    — Add client-side data validation: make sure the user answers each question before proceeding to the next question.
    — Add a “Back” button to allow the user to go back and change her answer. The user can go back up to the first question. For the questions that the user has answered already, be sure to show the radio button selected, so that the user is not forced to answer the questions again, which she has completed.
    — Use jQuery to add animation (fade out the current question and fade in the next question).
    — Test the quiz on IE 8 and 9, and fix any bugs. This will give you a good workout ;)
    — Store the quiz questions in an external JSON file.
    — Add user authentication: allow users log in, and save their login credentials to local storage (HTML5 browser storage).
    — Use cookies to remember the user, and show a “Welcome, First Name” message when the user returns to the quiz.

Weeks 7 and, if necessary 8 (Classes, Inheritance, more HTML5)

  1. Read chapters 9, 18, 21, and 22 of JavaScript the Definitive Guide.

    Or read my blog post, OOP In JavaScript: What You NEED to Know.

    Or read chapters 6 (only the “Object Creation” and “Inheritance” sections this time) 16, 22, and 24 of Professional JavaScript for Web Developers. NOTE: The reading in this section of the book is the most technical reading you will encounter in this entire road map. It is up to you if you want to read all of it. You should at least learn the Prototype Pattern, Factory Pattern, and Prototypal Inheritance. You don’t have to know all the other patterns.

  2. Improve Your Quiz Application Even Further:
    — Use Twitter Bootstrap for the entire page layout, including the quiz elements to make it look more professional. As an added bonus, use the tabs user interface component from Twitter Bootstrap and show 4 different quizzes, one on each tab.
    Learn Handlebars.js and add Handlebars.js templating to the quiz. You should no longer have any HTML in your JavaScript code. Your quiz is getting more advanced bit by bit.
    — Keep a record of all the users who take the quiz and show each user how her score ranks amongst the scores from other quiz takers.
  3. Later (after you have learned Backbone.js and Node.js), you will use these two technologies to refactor your quiz code and turn the same quiz into a sophisticated, single-page, modern web application built with the latest JavaScript frameworks. And you will store the users’ authentication credentials and scores in a MongoDB database.
  4. Next: Decide on a personal project to build, and start building your project promptly (while everything is fresh in your mind). Use JavaScript the Definitive Guide (or “Professional JavaScript for Web Developers,” if you own it) as a reference when you are stuck. And of course be an active member of Stack Overflow: ask questions and answer other programmers’ questions.

Continue Improving

  1. Learn Backbone.js Completely
  2. At this point, you will definitely need my book, MongoDB for JavaScript Applications, to help you build your own jQuery, Backbone.js, Node.js, or Meteor.js applications, since none of the noted resources, or any other book for that matter, cover MongoDB in depth for JavaScript applications.
  3. Learn Intermediate and Advanced JavaScript
  4. Learn Node.js Completely and With Confidence
  5. Read my forthcoming post on Getting Started with Meteor.js
  6. Read my forthcoming posts on the Three Best Front-end JavaScript Frameworks

Words of Encouragement

I wish you success with your studies and in your JavaScript career. Never give up! When you are struggling and feeling incompetent (you may from time to time), always remember that most (probably all) programmers, new and experienced alike, feel this way sometimes, or have felt this way at some point during their programming career.

Remember to dig deep and don’t get frustrated; just carry on and stick with the task until you figure it out, for a worthwhile reward awaits you when you triumph in the end: programming is fun, liberating, and lucrative. The joy and intense pleasure one gets from building an application is a powerful feeling that must be experienced to be understood. Even more satisfying, however, is the empowerment you experience when you realize you have attained the skill and knowledge to build applications from scratch, to change the world with any idea you dream up.

There will come the moment when you realize that all the difficulty you endured was well worth it. Just as the millions before you have, so too, you will survive the toughest bugs, the incomprehensible topics, and the seemingly impossible tasks.

Feel free to share your links with us when you build something, even if it is a tiny, itsy-bitsy project. :)

Get My Book, MongoDB for JavaScript Apps

You need it if you are developing any type of JavaScript application with MongoDB.

MongoDB for JavaScript Applications

Leave a Reply

Current ye@r *