How to Learn JavaScript Properly | JavaScript is Sexy
Learn JavaScript Properly (For Beginners and Experienced Programmers)
This study guide, which I also refer to as a course outline and a road map, gives you a structured and instructive outline for learning JavaScript properly. In fact, you will find two study guides below, one for absolute beginners and the other for experienced programmers and web developers.
Our Career Paths and Courses Website Is Now Live
Learn.Modern Developer Launched
Our first cohort is in session: 97% of our first cohort on target to graduate. Enroll in the second cohort. Career Path 1: JavaScript Developer and Career Path 3: Modern Frontend Developer usually fill up quickly.
You do want to learn JavaScript. I presume you are here for that reason, and you have made a wise decision. For if you want to develop modern websites and web applications (including an internet startup), or if you want a high-paying developer job ($75K to $250K+), JavaScript is undoubtedly the best web-development language to learn today, unless you want to develop native iOS or Android apps exclusively. 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” can be a frustrating endeavor. This study guide streamlines and si it has proven successful in helping thousands, and thousands more read and follow it each day.
Table of Contents
Study Groups
People have started study groups for this study guide. You can find such groups on Reddit
and , and other places, including .
What You will Learn
You will learn the JavaScript language (up to advanced-intermediate, if you follow the “Beginners” or up to advanced, if you follow the “Experienced Programmers” study guide). You will also learn HTML, CSS, jQuery, and Git. And you will build a simple HTML/CSS website, an interactive HTML/CSS/JavaScript website, and a moderately sophisticated JavaScript quiz application.
Email Address :
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.
Be Empowered
This course outline transcends an entire semester of college coursework. If you complete the study guide, you will have learned enough programming to develop modern web applications, and with a bit of experience and a couple of completed projects, you will have become a sought-after programmer. Indeed, JavaScript developers are in high demand today. But you must prove your worth by developing a few impressive (interesting and non-trivial, though not necessarily complex) web applications.
How NOT To Learn JavaScript
Do not try to learn JavaScript the first time from bits of unrelated or related JavaScr 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
And do not try to learn the language by using only C while you will learn how to program bits of small JavaScript tasks, you will not have learned enough to build complex web applications. Nonetheless, below I do recommend Codecademy as a supplemental learning resource.
Resources for the Two Study Guides
I have outlined two different study guides below, one for beginners and one for experienced web developers.
Beginners should follow the Learn JavaScript Properly Study Guide for Beginners and get this book:
Experienced programmers and web developers should follow the Learn JavaScript Properly Study Guide for Experienced Programmers and get this book:
— The paperback Version:
— The Kindle Version:
Sign up for an account on
(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 . We will complete 4 Codecademy tracks. Codecademy is an online platform to learn programming: you can write code on their website, right in your browser. (It is also a FREE service.)
< (this blog
): We will read 4 articles
<: We will complete 1 free course
Resources:
(4 articles)
(4 tracks)
(1 short course)
— Notice for Visual Learners: If you are a visual learner, that is, if you prefer to see lots of images, schematics, and the like when learning a topic, you may find
more appealing than the Beginning JavaScript book. If you do get the JavaScript and jQuery book, note that the chapters are similar enough that you can use it (instead of Beginning JavaScript) to follow this study guide, though you will have to modify the sections a bit.
Learn JavaScript Properly Study Guide for Beginners
Prerequisite: Completed at least some high school (no programming experience necessary)
The Level of JavaScript Covered in this Study Guide: Absolute Beginner to Intermediate
How to Get the Best Out of This Study Guide
Type out and test every example code you encounter in the book. You can type the code and tweak it (experiment with it) in Firefox’s or Chrome’s console. The browser console is an area of the browser where you can write and run JavaScript code. Or use .
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).
Don’t use Safari. I recommend Chrome, but if you use Firefox, get the
for F use it for testing and debugging your code.
Watch this
on YouTube.
And watch this
(also on YouTube) to learn how to use Chrome Dev Tools.
Also, work all the end-of-chapter exercises.
Let’s get to work.
Weeks 1 and 2
Week 1: Making a Website with HTML and CSS; Learn JavaScript Data Types, Functions, Control Flow, and Loops
<: If you do not already know HTML and CSS, complete the
Track on Codecademy.
<: Then follow the
track to make your first little website, using what you learned above.
Beginning JavaScript: Read Chapter 1 (Introduction to JavaScript and the Web) and Chapter 2 (Data Types and Variables).
Beginning JavaScript: Read Chapter 3 (Decisions, Loops, and Functions).
<: Work through the
on Codecademy. Specifically, work through these sections: “Introduction to JavaScript,” “Functions,” “‘For’ Loops in JavaScript,” “‘While’ Loops in JavaScript,” and “Control Flow.”
Beginning JavaScript: Read Chapter 4 (Common Mistakes, Debugging, and Error Handling).
Week 2: Learn JavaScript Objects, the Browser Object Model (BOM), and E Learn jQuery
Beginning JavaScript: Read Chapter 5 (JavaScript — An Object- Based Language).
<: Read my article,
<: Work through the last three sections of the Codecademy JavaScript track: “Data Structures,” “Objects 1,” and “Objects 2.”
Beginning JavaScript: Read Chapter 6 (Programming the Browser).
Beginning JavaScript: Read Chapter 15 (JavaScript Frameworks), and stop just after you complete this section: “Digging Deeper Into jQuery”.
<: Work through the entire
on Codecademy.
Weeks 3 and 4
Week 3: HTML Forms and F JavaScript S Build Your First Interactive Website
Beginning JavaScript: Read Chapter 7 (HTML Forms: Interacting with the User).
Beginning JavaScript: Read Chapter 8 (Windows and Frames).
Beginning JavaScript: Read Chapter 9 (String Manipulation).
<: Now, make your first cool website. Work through the entire
track on Codecademy.
Week 4: JavaScript Date, Timers, and Cookies
Beginning JavaScript: Read Chapter 10 (Date, Time, and Timers).
Beginning JavaScript: Read Chapter 11 (Storing Information: Cookies).
Weeks 5 and 6
Week 5: JavaScript “this,” Variable Scope, and Hoisting, the DOM, JavaScript XML, and AJAX
<: Read my post
<: Read my post
Beginning JavaScript: Read Chapter 12 (Dynamic HTML and the W3C Document Object Model).
Beginning JavaScript: Read Chapter 14 (Ajax).
Week 6: Build a Real-World JavaScript Quiz Application
At this juncture, you have learned enough to build a solid JavaScript web application. Don’t proceed any further until you can successfully build this application I describe below. Don’t be afraid to ask questions on Stack Overflow, and do reread sections of the book to properly understand the concepts.
You are building a JavaScript quiz web 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 quiz taker his or 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 (Notice that only one question is i you will add many 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) remove the current question and add the next question, 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 will likely to get a prompt and accurate answer on Stack Overflow.
Improve Your Quiz
You should be very comfortable with JavaScript, probably feeling like a Jedi. No, you are not. Not yet. You must keep using your newly acquired knowledge and skills as often as possible to keep learning and improving.
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 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 to 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.
Week 7 (Extra Credit)
Getting Started with G Objective Oriented JavaS Improve Your Quiz Even More
<: Take the FREE
<: Read my post, .
Improve Your Quiz Application Even Further:
for the entire page layout, including the quiz elements to make it look more polished. As an added bonus, use the
user interface component from Twitter Bootstrap and show 4 different quizzes, one on each tab.
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 his or her score ranks among the scores from other quiz takers.
Later (after you have learned
or ), you can use these 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.
Next: Decide on a personal project to build, and start building your project promptly (while everything remains fresh in your memory). Use the book as a reference. And of course be an active member on Stack Overflow: ask questions and answer other programmers’ questions. I am confident you will be able to answer a number of questions.
Resources:
(4 articles)
(2 tracks)
Prerequisite: You should know at least some programming basics and how to build a simple HTML/CSS website.
The Level of JavaScript Covered in this Study Guide: Beginner to Advanced
How to Get the Best Out of This Study Guide
Type out and test every example code you encounter in the book. You can type the code and tweak it (experiment with it) in Firefox’s or Chrome’s console. The browser console is an area of the browser where you can write and run JavaScript code. Or use .
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).
Don’t use Safari. I recommend Chrome, but if you use Firefox, get the
for F use it for testing and debugging your code.
Watch this
on YouTube.
And watch this
(also on YouTube) to learn how to use Chrome Dev Tools.
Also, work all the end-of-chapter exercises.
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
If you do not already know HTML and CSS very well, complete the
Track on Codecademy.
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.
Work through the Introduction to JavaScript section of the
on Codecademy.
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.
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.
And work through sections 2 to 5 of the
on Codecademy.
Weeks 3 and 4 (Objects, Arrays, Functions, DOM, jQuery)
Read my post
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.
Read chapters 7 and 8 of JavaScript: The Definitive Guide
Or read chapters 5 and 7 of Professional JavaScript for Web Developers
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.
Return to Codecademy and complete the JavaScript track by working through sections 6, 7, and 8 (Data Structures to Object 2).
While you are on Codecademy, go ahead and build the 5 little Basic Projects on the
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.
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:
And you can read chapter 19 of JavaScript: The Definitive Guide, if you have the book, for more on jQuery.
Work through the entire jQuery course at
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 . Learn how to get started with WebStorm
(written especially for this course).
O they might be the best WebStorm tutorials.
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 , 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. As I noted earlier, 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)
Read chapters 10, 14, 17, and 20 of JavaScript: The Definitive Guide.
Or read chapters 20 and 23 of Professional JavaScript for Web Developers.
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.
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.
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)
Read chapters 9, 18, 21, and 22 of JavaScript the Definitive Guide.
Or read my blog post, .
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.
Improve Your Quiz Application Even Further:
for the entire page layout, including the quiz elements to make it look more professional. As an added bonus, use the
user interface component from Twitter Bootstrap and show 4 different quizzes, one on each tab.
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.
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.
Next: Decide on a personal project to build, and start building your project promptly (while everything is fresh in your mind).
Continue Improving
, if you want to be a front-end developer or learn how to develop web applications with a JavaScript front-end framework.
Alternatively, if you want to develop complete applications, that is, the front-end and the backend, .
At this point, you will definitely need my book, , 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.
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’ 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 ecstasy one gets from building an application is a powerful feeling that you must experience to understand. 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.
The moment will come when you realize that all the difficulties you endured were worth while. Just as the millions before you have triumphed, so too, you will vanquish the toughest bugs, master the incomprehensible topics, and overcome the seemingly impossible tasks.
Feel free to share your links with us below when you build something, even if it is a tiny, itsy-bitsy project.
Share this:
Modern Front-end Developer
Full-stack Developer
Startup Ready (Build complex startups like Facebook and Twitter)
HTML5/JavaScript Mobile Developer (Build mobile apps for Android and iOS using your JavaScript skills)
iOS Developer (Build native iPhone/iPad apps)
Trackbacks for this post
Mailing List
Email Address :
Programmers, Bloggers, Writers, Write Well
Recent Posts
Most Popular Posts
Send to Email Address
Your Email Address
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.
