How to learn JavaScript correctly

Duration of study: 6-8 weeks
Learning Prerequisites: High school level, no programming experience required

Updated (2014-1-7)

A learning group was created on Reddit.
January, "Learn JavaScript" Study Group on Reddit

Directory

• Don't learn JavaScript like this
• Resources for this course
• 1-2 weeks (Introduction, data type, expressions, and operators)
• 3-4 weeks (object, array, function, Dom,jquery)
• JavaScript Ultimate Editor: Webstorm
• First project-Dynamic quiz app
• 5-6 weeks (Regular expression, window object, event, JQuery)
• 7 weeks, extendable to 8 weeks (class, inheritance, HTML5)
• Continue to promote
• Some encouraging words

The syllabus above provides a structured and inspiring learning route, from beginners to achievements, to the learning of JavaScript.

Now that you have found this article, you really want to learn JavaScript. You're not mistaken, you have to learn JavaScript today if you want to develop a modern website or Web application (including Internet startups). In the face of the proliferation of JavaScript online learning resources, it is difficult to find an efficient and practical way to learn the "language of the Web age."

It is important to note that a few years ago we needed to know a real server-side language (such as Php,rails,java,python or Perl) to develop a scalable, dynamic, database-driven Web application that can now be implemented with only JavaScript.

Don't learn JavaScript like this

Don't start out in the stacks of JavaScript online tutorials, which is the worst way to learn. It may be a bit of a success after you've seen countless tutorials, but it's really inefficient to learn a thing in a hierarchical way, and you'll get stuck frequently when you actually build a Web site or web App with JavaScript. In general, this learning approach makes it hard to know how to use language as a tool-as a personal tool.

In addition, one might suggest starting with JavaScript in the language of JavaScript, written by the venerable JavaScript godfather Douglas Crockford. However, although Mr. Crockford knows JavaScript, and is known as the JavaScript World Einstein, his "JavaScript language essence" is not suitable for beginners to learn. This book does not articulate, clear, and clear the core concept of JavaScript. But for more advanced learning routes, I'd suggest you look at Mr. Crockford's video.

Also, don't learn JavaScript from websites like Codecademy, because even if you know how to write a bunch of small snippets of JavaScript code, you can't learn how to build a Web application. Even so, I would recommend Codecademy as a supplementary learning resource later on.

Resources for this course

Updated: Reddit usersd0gsbodyApril 8 set up a study group on the Reddit. He and the other team members are very active and helpful. I suggest you join this group and they will keep you motivated and help you learn JavaScript better. After all, it's still a bit difficult to toss JavaScript alone. Link: Learning JS properly–study Group on Reddit

• Please select one of the following two books, the first one is more suitable for people with programming experience, while the other is suitable for beginners with no programming experience at all.

  I personally recommend the first book because the author is very good at each point of knowledge and covers some of the advanced JavaScript knowledge points. However, to understand this book you must at least have a basic understanding of web development. So, if you have a little bit of programming experience or Web development experience (not necessarily JavaScript), then buy this book.

  • Paper edition (English): Professional JavaScript for WEB developers
  • Paper version (Chinese): JavaScript Advanced Programming (3rd edition)
  • Kindle (US): Professional JavaScript for WEB developers
  • Kindle Edition (Chinese): JavaScript Advanced Programming (3rd edition)

  If you have no programming experience, you can buy this:

  • Paper version: Javascript:the Definitive Guide
  • Paper version (Chinese): JavaScript authoritative Guide (6th edition)
  • Kindle Edition (English): Javascript:the Definitive Guide
  • Kindle Edition (Chinese): JavaScript authoritative Guide (original book 6th edition)

• Register for free stack Overflow, a question and answer forum in the field of programming. Answering questions here is better than codecademy, even if your question is very basic and looks silly (remember, there's never been a stupid question).

• Register for Free Codecademy, an online learning platform where you can write code directly in your browser.

• Some of the posts on Javascriptissexy include objects, closures, scope and elevation of variables, functions, and so on.

Javasctipt Learning Route

It takes 6-8 weeks to complete the syllabus and will learn the full JavaScript language (including jquery and some HTML5). If you do not have the time to complete all the courses in 6 weeks (indeed more challenging), try not to exceed 8 weeks. The longer it takes, the more difficult it is to master and memorize various points of knowledge.

1-2 weeks (Introduction, data type, expressions, and operators)

1. If you are not familiar with HTML and CSS, complete the Web Foundation task on Codecademy.

2. Read the preamble and 1th to 2nd chapter of the JavaScript Authority Guide or JavaScript advanced programming.

3. It's important: Every sample code you encounter in a book will have to be knocked out and run in the Firefox or Chrome browser console to try to ravage it (do all kinds of experimentation). You can also use Jsfiddle, but do not use the Safari browser. I recommend using Firefox with the Firebug plugin to test and debug your code. The browser console is where you can write and run JavaScript code.

4. Complete the section on the Codecademy JavaScript trackIntroduction to JavaScript.

5. Read the 3rd to 4th chapter of the JavaScript authoritative guide.

   or read the 3rd to 4th chapter of JavaScript Advanced programming. You can skip the位操作section, which is not normally used in your JavaScript career.

   Again, remember to stop every now and then to knock the code of the book into the browser console (or jsfiddle) for a variety of tests, change several variables, or modify the code structure.

6. Read the 5th chapter of the JavaScript authoritative guide. As for the advanced programming of JavaScript, there is no reading task for the time being, as the relevant knowledge has already been covered.

7. Complete the 2~5 section on the Codecademy JavaScript track.

3-4 weeks (object, array, function, Dom,jquery)

2. The following three choices:

   • Read my blog about JavaScript objects in detail.

   • Read the 6th chapter of the JavaScript authoritative guide.

   • Read the 6th chapter of JavaScript Advanced programming. Note: Just look at the "Understanding Objects" (Understanding Objects) section.

   The two books will cover more details, but you can skip these details with complete confidence as soon as you have finished reading my blog post.

4. Read the 7th to 8th chapter of the JavaScript Authority Guide or the 5th and 7 chapters of Advanced JavaScript programming.

6. At this point, you should spend a lot of time writing code on the browser console, testing if-else statements, for loops, arrays, functions, objects, and so on. More importantly, you need to exercise and master the independent code, without the help of Codecademy. When you do a problem on a codecademy, each task should be simple for you, with no need for help or hints.

   If you're still stuck on the Codecademy, go back to the browser and practice, which is the best way to learn. Just as James was practicing on his neighbour's basketball court when he was young, Bill Gates studied programming in the basement.

   Continuous practice, this point of progress in the cumulative effect will be very amazing. You have to see the value of this strategy, believe it is feasible, and put it all in.

   Codecademy will cause the illusion that has been mastered.
   The biggest problem with using Codecademy is that its hints and snippets of code make it easy to make an answer, creating an illusion that you have mastered this knowledge point. You may not be able to see it for a while, but your code will not be done independently.

   But so far, Codecademy is still a good helper for learning programming. Especially from some basic code structures such as if statements, for loops, functions and variables to guide you through the development process of small projects and small applications.

8. Go back to Codecademy to complete the JavaScript route. Finish the 6~8 section (data structure to do object 2).

10. Implement the 5 basic Projects of the Projects route on Codecademy. When you're done, you don't need codecademy anymore. This is a good thing, because the more you do, the faster you learn, the better prepared you are to start programming independently.

12. Read Chapters 13,15,16 and 19 of the JavaScript authoritative guide.

    or read chapters 8,9,10,11,13 and 14 of advanced JavaScript programming. This book does not involve jquery, and the knowledge of jquery on the Codecademy is not covered enough. Take a look at the official jquery tutorials, free of charge: http://try.jquery.com/

    You can also learn more about jquery in chapter 19th of the JavaScript Authority Guide.

14. Complete the full jquery tutorial http://try.jquery.com/.

JavaScript Ultimate Editor: Webstorm

• Before you implement your first project, if you plan to be a JavaScript developer or use JavaScript often, it's best to download Webstorm's trial version now. Here you can learn how to use Webstorm (written specifically for this course).

  Undoubtedly, Webstorm is the best editor (or IDE) for JavaScript programming. After 30 days of trial, pay $49.00, but as a JavaScript developer, this should be the most sensible investment besides buying books.

• Make sure that Jshint is enabled in Webstorm. Jshint is a tool for checking JavaScript code errors and potential problems, forcing your team to write code according to specifications. The best thing about using Webstorm is that Jshint will automatically display the red line under the wrong code, just like the spelling checker in a word processing program. Jshint will show you all the code errors (including HTML), prompting you to develop good habits and become better JavaScript programmers. It's important that you will come back to thank me when you really realize the great help Webstrom and Jshint have for you.

• In addition, Webstorm is a world-class, professional-use IDE used to write professional JavaScript Web applications, so you will often use it later. It also combines node.js,git and other JavaScript frameworks, so even if you become a star-level JavaScript developer, you'll still be using it. Unless more JavaScript Ides appear in the future.

• To be fair, I'm here to mention Sublime Text 2, which is second only to Webstorm's JavaScript editor. Its functionality is less webstorm rich and complete (even with a bunch of plugins added). I use sublime Text 2 when I make minor changes, which supports many languages, including JavaScript, but I won't use it to build a complete JavaScript web app.

First project-Dynamic quiz app

At this point, you have mastered enough knowledge to build a solid, maintainable Web application. Do not look at the following chapters until you have finished the application I have designed for you. If you get stuck, go to stack overflow to ask questions and read the contents of the book again until you fully understand the concepts.

The next step is to create a JavaScript question and answer app (which also uses HTML and CSS), with the following features:

• This is a set of single-choice test questions that will show the user's score when completed.

• Question and answer applications can produce any number of problems, and each problem can have any number of options.

• The final page shows the user's score. This page only shows the results, so you need to remove the last question.

• Use the array to save all the problems. Each question includes its options and the correct answer, all encapsulated as an object. The problem array should look like this:

// Only one question is demonstrated here, you have to add all questions
    var allQuestions = [
        {
            question: "Who is Prime Minister of the United Kingdom?",
            choices: [
               "David Cameron",
               "Gordon Brown",
               "Winston Churchill",
               "Tony Blair"],
            correctAnswer: 0
        }
    ]; 

• When the user clicks "Next", usedocument.getElementByIdor jquery dynamically add the next question and remove the current issue. In this version "Next" is the only navigation button.

• You can comment for help at the bottom of this article, preferably to stack overflow questions, where there will be a timely and accurate answer.

5-6 weeks (Regular expression, window object, event, JQuery)

1. Read Chapter 10,14,17,20 of the JavaScript authoritative guide.

   Or read the 20th and 23 chapters of advanced JavaScript programming.

2. Remember to knock the sample code into the browser console, ravage it as much as possible, and do all kinds of testing until you fully understand how it works and what it does.

3. At this point, you use JavaScript should be very handy, a bit like martial arts master to come out. But you can not become a master, you have to use the newly learned knowledge repeatedly, and constantly learning and promotion.

4. Pre-upgrade Quiz app

   • Add client data validation: Ensure that the user answers the current question before entering the next question.

   • Add a "Back" button that allows the user to return to the modified answer. You can return up to the first question. Note For questions that the user has answered, the Select button to display is selected. This eliminates the need for users to re-answer questions they have already answered.

   • Add animations with jquery (fade out the current issue, fade into the next question)

   • In IE8 and IE9 test, modify the bug, here should have you busy. ;D

   • Export the problem to a JSON file

   • Add user authentication, allow user to log in, save user authentication information in本地存储(local STORAGE,HTML5 browser store).

   • Use cookies to remember users and show "Welcome back" when users log in again用户名.

7 weeks, extendable to 8 weeks (class, inheritance, HTML5)

1. Read Chapter 9,18,21,22 of the JavaScript authoritative guide.

   or read my blog. JavaScript Object-oriented must know

   Or read chapter 6,16,22,24, "Advanced Programming in JavaScript", chapter 6th Read Only the "Create Objects" (object Creation) and "Inherit" (Inheritance) sections. Note: This section is the most technically intensive reading in this course, and you should not read it all according to your own situation. You should at least know the prototype pattern (Prototype pattern), Factory mode (Factory pattern) and prototype inheritance (Prototypal inheritance), others are not required.

2. Continue to upgrade your question and answer app:

   • Page layouts use Twitter Bootstrap to make the elements of questions and answers look professional. As an extra bonus, the label control with Twitter bootstrap (translator Note: The original address is invalid, changed) displays the problem, and each label shows a problem.

   • Learn handlebars.js and use the Handlebars.js template for question and answer applications. There should be no more HTML code in your JavaScript code. Our question and answer application is now more and more advanced.

   • Record the user scores for the quiz and show the user's ranking compared to other users in the quiz app.

3. After you finish backbone.js and node. js, you'll refactor the code of the question and answer application with these two latest JavaScript frameworks, making it a complex single-page, modern Web application. You also need to keep the user's authentication information and results on the MongoDB database.

4. Next: The idea of a project, the rapid development of the strike. When stuck, refer to the JavaScript authority Guide or JavaScript advanced programming. Of course, also want to become a stack overflow active user, ask questions more, also should try to answer other people's questions.

Continue to promote

1. Proficient in Backbone.js

2. Advanced JavaScript Advanced

3. No-side leaks proficient in node. js

4. Meteor.js Introduction (Coming Soon)

5. Three of the best JavaScript front-end frameworks (coming soon)

Some encouraging words

I wish you good study and never give up! When you can't do it and feel stupid (you'll think about it from time to time), keep in mind that other beginners, even experienced programmers from all over the world, sometimes have this idea.

If you are a complete beginner, especially a teenager, it may be difficult to start writing code. Young people are fearless and have no burdens, and they can spend a lot of time on what they like. So the challenges are just a temporary hurdle for them.

But after a teenage year, you'll want to see results quickly. Because you don't have so much time to spend a few hours trying to figure out the details. But these things you have to understand deeply, don't be frustrated, stick to the task of completing the course, and find out the bugs until you fully understand them. When you reach the other side of victory, you will know that it is worth it, and you will find that programming is very interesting and the time spent on it will be rewarded handsomely.

One has to feel and understand the intense thrill of building a program. When you step by step to grasp the knowledge point, a little bit of the program to build up, you will have to stimulate and affirmation, bring a very wonderful satisfaction.

One day you will realize that all the difficulties endured before are worth it. Because you are going to be an honorable programmer, you know that as a JavaScript developer, your future is bright. Just like thousands of programmers before you, you beat the hardest bug, you didn't step backwards, you didn't let go, you didn't find any excuses to let yourself give up.

When you learn something, feel free to share your results with us, even if it's a small project that you can't see in a microscope. ;D

How to learn JavaScript correctly