How to Learn JavaScript Properly

Source: http://javascriptissexy.com/how-to-learn-JavaScript-properly/

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.

https://learn.moderndeveloper.com

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 simplifies the process; it has proven successful in helping thousands, and thousands more read and follow it each day.

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.

What You will Learn

You will learn the JavaScript language (up to advanced-intermediate, if you follow the “Beginners” study guide; 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.

  • Receive Updates

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

  1. Beginners should follow the Learn JavaScript Properly Study Guide for Beginners and get this book:
    Beginning JavaScript.Experienced programmers and web developers should follow the Learn JavaScript Properly Study Guide for Experienced Programmers and get this book:
    — The paperback Version: Professional JavaScript for Web Developers (3rd Edition)
    — The Kindle Version: Professional JavaScript for Web Developers (3rd Edition)
  2. 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.
  3. Sign up for an account on Codecademy. 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.)
  4. JavaScriptIsSexy.com (this blog :) ): We will read 4 articles
  5. CodeSchool.com: We will complete 1 free course

Resources:
— Beginning JavaScript (4th Edition)
— JavaScriptIsSexy.com (4 articles)
— Codecademy.com (4 tracks)
— CodeSchool.com (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 JavaScript and jQuery: Interactive Front-End Web Development 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 JSFiddle. 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).

Don’t use Safari. I recommend Chrome, but if you use Firefox, get the Firebug Add on for Firefox; use it for testing and debugging your code.

Watch this Firefox’s and Chrome’s Console Tutorial on YouTube.

And watch this Chrome Dev Tools Tutorial (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

  1. Codecademy.com: If you do not already know HTML and CSS, complete the Web Fundamentals Track on Codecademy.
  2. Codecademy.com: Then follow the Make a Website track to make your first little website, using what you learned above.
  3. Beginning JavaScript: Read Chapter 1 (Introduction to JavaScript and the Web) and Chapter 2 (Data Types and Variables).
  4. Beginning JavaScript: Read Chapter 3 (Decisions, Loops, and Functions).
  5. Codecademy.com: Work through the JavaScript Track on Codecademy. Specifically, work through these sections: “Introduction to JavaScript,” “Functions,” “‘For’ Loops in JavaScript,” “‘While’ Loops in JavaScript,” and “Control Flow.”
  6. Beginning JavaScript: Read Chapter 4 (Common Mistakes, Debugging, and Error Handling).

Week 2: Learn JavaScript Objects, the Browser Object Model (BOM), and Events; Learn jQuery

  1. Beginning JavaScript: Read Chapter 5 (JavaScript — An Object- Based Language).
  2. JavaScriptIsSexy.com: Read my article, JavaScript Objects in Detail
  3. Codecademy.com: Work through the last three sections of the Codecademy JavaScript track: “Data Structures,” “Objects 1,” and “Objects 2.”
  4. Beginning JavaScript: Read Chapter 6 (Programming the Browser).
  5. Beginning JavaScript: Read Chapter 15 (JavaScript Frameworks), and stop just after you complete this section: “Digging Deeper Into jQuery”.
  6. Codecademy.com: Work through the entire jQuery Track on Codecademy.

Weeks 3 and 4

Week 3: HTML Forms and Frames; JavaScript Strings; Build Your First Interactive Website

  1. Beginning JavaScript: Read Chapter 7 (HTML Forms: Interacting with the User).
  2. Beginning JavaScript: Read Chapter 8 (Windows and Frames).
  3. Beginning JavaScript: Read Chapter 9 (String Manipulation).
  4. Codecademy.com: Now, make your first cool website. Work through the entire Make an Interactive Website track on Codecademy.

Week 4: JavaScript Date, Timers, and Cookies

  1. Beginning JavaScript: Read Chapter 10 (Date, Time, and Timers).
  2. 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

  1. JavaScriptIsSexy.com: Read my post JavaScript Variable Scope and Hoisting Explained
  2. JavaScriptIsSexy.com: Read my post Understand JavaScript’s “this” With Clarity, and Master It
  3. Beginning JavaScript: Read Chapter 12 (Dynamic HTML and the W3C Document Object Model).
  4. 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 in this example array; 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 Git; Objective Oriented JavaScript; Improve Your Quiz Even More

  1. CodeSchool.com: Take the FREE Try Git course.
  2. JavaScriptIsSexy.com: Read my post, OOP In JavaScript: What You NEED to Know.
  3. Improve Your Quiz Application Even Further:
    — Use Twitter Bootstrap for the entire page layout, including the quiz elements to make it look more polished. 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 his or her score ranks among the scores from other quiz takers.
  4. Later (after you have learned Backbone.js and Node.js or Meteor.js), 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.
  5. 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.

Continue Improving

    1. Learn Backbone.js Completely, 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, learn Meteor.js properly.

  1. 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.
  2. Learn Intermediate and Advanced JavaScript
  3. Learn Node.js Completely and With Confidence

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 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. :)

Views: 0

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.