Learn the correct posture of JavaScript

Don’t learn JavaScript this way

Don’t immerse yourself in piles of JavaScript online tutorials from the beginning. This is the worst way to learn. Maybe it will be effective after watching countless tutorials, but it is very inefficient to learn something without hierarchy. You will still get stuck frequently when actually using JavaScript to build a website or web application. Overall, this approach to learning leads to confusion about how to use language as a tool—as a personal tool.

In addition, some people may suggest starting to learn JavaScript from "The Essence of JavaScript Language" written by Douglas Crockford, the respected godfather of JavaScript. However, although Mr. Crockford knows everything about JavaScript and is known as the Einstein of the JavaScript world, his "JavaScript Language Essence" is not suitable for beginners to learn. This book does not explain the core concepts of JavaScript in a thorough, clear and concise way. But for a more advanced learning route, I would recommend watching Mr. Crockford’s videos.

Also, don’t just learn JavaScript from websites like Codecademy, because even if you know how to write a lot of small snippets of JavaScript code, you still won’t learn how to build a web application. Even so, I will still recommend Codecademy as a supplementary learning resource later.

• Register for free on Stack Overflow, a question and answer forum in the field of programming. Asking questions here will get better answers than Codecademy, even if your question is very basic and seems silly (remember, there are never stupid questions).

• Register for free with Codecademy, which is an online learning platform where you can write code directly in the browser.

• Some blog posts on JavaScriptIsSexy, including objects, closures, variable scope and promotion, functions, etc.

JavaSctipt Learning Route

It will take 6 to 8 weeks to complete the entire course syllabus, and you will learn the complete JavaScript language (including jQuery and some HTML5). If you don't have time to complete all the courses in 6 weeks (which is definitely more challenging), try not to take more than 8 weeks. The longer it takes, the more difficult it will be to master and memorize various knowledge points.

1～2 weeks (introduction, data types, expressions and operators)

1. If you don’t know HTML and CSS very well, complete the web basics on Codecademy Task.

2. Read the preface and Chapters 1~2 of "The Definitive Guide to JavaScript" or "Advanced Programming with JavaScript".

3. Very important: Every sample code you encounter in the book must be typed out and run in the Firefox or Chrome browser console. Try to Trample it (do all kinds of experiments). You can also use jsfiddle, but don't use Safari. I recommend using Firefox with the Firebug plug-in to test and debug the code. The browser console is where you can write and run JavaScript code.

4. Complete the Introduction to JavaScript section on the Codecademy JavaScript Track.

5. Read Chapters 3~4 of "The Definitive Guide to JavaScript". Or read Chapters 3~4 of "Advanced Programming with JavaScript". You can skip the bit manipulation part, as you generally won't need this in your JavaScript career.

   Again, remember to stop and type the code from the book into the browser console (or JSFiddle) from time to time to do various tests. You can change a few variables or modify the code structure.

6. Read Chapter 5 of "The Definitive Guide to JavaScript." As for "JavaScript Advanced Programming", there are no reading tasks for the time being, because the relevant knowledge has been covered previously.

7. Complete Parts 2~5 on the Codecademy JavaScript Track.

3~4 weeks (object, array, function, DOM, JQuery)

1. Choose one of the following three:

   The two books will involve more details, but as long as you read my blog post, you can skip these details with complete confidence.

• Read my blog post JavaScript Objects Explained.

• Read Chapter 6 of "The Definitive Guide to JavaScript".

• Read Chapter 6 of "Advanced Programming with JavaScript". NOTE: Just look at the "Understanding Objects" section.

Read Chapters 7~8 of "The Definitive Guide to JavaScript" or Chapters 5 and 7 of "Advanced Programming with JavaScript".

At this point, you should be spending a lot of time writing code on the browser console, testing if-else statements, for loops, arrays, functions, objects, etc. More importantly, you need to practice and master writing code independently without using Codecademy. When doing questions on Codecademy, each task should be easy for you and won't require any help or prompts. If you're still stuck on Codecademy, keep going back to the browser to practice. This is the best way to learn. Just like James practiced on his neighbor's basketball court when he was young, Bill Gates learned programming in his basement.

Continue to practice, and the cumulative effect of this little bit of progress will be amazing. You have to see the value of this strategy, believe it is feasible, and devote yourself to it.

Codecademy creates the illusion of mastery.
The biggest problem with using Codecademy is that its prompts and small code snippets make it easy for people to come up with answers, creating the illusion that they have mastered this knowledge point. You may not see it at the moment, but by doing this your code is no longer independent.

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

Return to Codecademy to complete the JavaScript route. Complete parts 6~8 (the data structure must be Object 2).

Five basic projects (Basic Projects) to implement the Projects route on Codecademy. Once you're done, you no longer need Codecademy. This is a good thing because the more you do it yourself, the faster you learn and the better prepared you will be to start programming independently.

Read Chapters 13, 15, 16, and 19 of The Definitive Guide to JavaScript. Or read Chapters 8, 9, 10, 11, 13, and 14 of "Advanced Programming with JavaScript." This book does not cover jQuery, and the jQuery knowledge on Codecademy is not covered enough. You can take a look at jQuery's official tutorial, which is free: http://try.jquery.com/

You can also learn more about jQuery in Chapter 19 of "The Definitive Guide to JavaScript".

Complete all jQuery tutorials http://try.jquery.com/.

The ultimate JavaScript editor: WebStorm

• Before you implement your first project, if you plan to do JavaScript in the future If you are a developer who may frequently use JavaScript, it is best to download the trial version of WebStorm now. Here you can learn how to use WebStorm (written specifically for this course). There is no doubt that WebStorm is the best editor (or IDE) for JavaScript programming. It costs $49.00 after a 30-day trial, but as a JavaScript developer, this should be the wisest investment besides buying a book.

• Make sure JSHint is enabled in WebStorm. JSHint is a tool that checks JavaScript code for errors and potential problems, forcing your team to write code according to specifications. The best part about using WebStorm is that JSHint will automatically display a red line under erroneous code, just like a spell checker in a word processing program. JSHint will display all code errors (including HTML), prompting you to develop good habits and become a better JavaScript programmer. This is important, when you truly realize how much WebStrom and JSHint have helped you, you will come back and thank me.

• Additionally, WebStorm is a world-class, professional-use IDE for writing professional JavaScript web applications, so you'll use it often in the future. It also integrates with Node.js, Git and other JavaScript frameworks, so even if you become a star JavaScript developer, you will still use it. Unless more JavaScript IDEs appear in the future.

• To be fair, I will mention here Sublime Text 2, which is the second best JavaScript editor after WebStorm. It's not as feature rich and complete as WebStorm (even with the addition of a bunch of plugins). When doing small modifications I use Sublime Text 2, which supports many languages, including JavaScript, but I don't use it to build full JavaScript web applications.

The first project-Dynamic Question and Answer Application

At this point, you have mastered enough knowledge to build a stable and maintainable web application. Don't read the following chapters before finishing the application I designed for you. If you get stuck, ask questions on Stack Overflow and re-read the relevant material in the book until you fully understand the concepts.

Next, start building a JavaScript question and answer application (HTML and CSS will also be used). The functions are as follows:

• This is a set of single-choice test questions , the user's results will be displayed after completion.

• The Q&A application can generate any number of questions, and each question can have any number of options.

• Display the user's results on the final page. This page only shows results, so remove the last question.

• Use arrays to store all problems. Each question, including its options and correct answers, is encapsulated into an object. The questions array should look like this:

// 这里只演示一个问题，你要把所有问题都添加进去 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", use document.getElementById or jQuery to dynamically add the next question , and remove the current issue. In this version "Next" is the only navigation button.

• You can comment below this article for help. It is best to ask questions on Stack Overflow, where you will get timely and accurate answers.
  

  5~6 weeks (regular expressions, Window objects, events, JQuery)

  Some words of encouragement

  I wish you success in your studies and never give up! When you feel stupid for not being able to do it (and you will from time to time), remember that other beginners and even experienced programmers around the world feel this way from time to time.

  If you are a complete beginner, especially if you are past your teenage years, it may be difficult to start writing code. Young people have nothing to fear and no burdens. They can spend a lot of time doing what they like. So various challenges are just temporary obstacles for them.

  But after your teenage years, you will want to see results quickly. Because you don’t have so much time to spend hours just to figure out some details. But you must understand these things in depth. Don't be frustrated by it. Stick to completing the course tasks and find all the bugs until you fully understand them. When you reach the other side of victory, you will know that it was all worth it, you will find that programming is very interesting and the time spent on it will be handsomely rewarded.

  One must feel and understand the intense pleasure of building programs. When you master the knowledge points step by step and build the program bit by bit, you will be motivated and affirmed, and bring a wonderful sense of satisfaction.

  One day you will realize that all the difficulties you endured were worth it. Because you are about to become a glorious programmer, and you also know that as a JavaScript developer, your future is bright. Like thousands of programmers before you, you beat the hardest bugs, you didn't regress, you didn't let go, you didn't make any excuses to give up.

  When you have achieved something, feel free to share your results with us, even if it is a trivial project that is too small to be seen with a microscope.
  
  Original text: http://javascriptissexy.com/how-to-learn-JavaScript-properly/

• Add client data validation: ensure user answer You must answer the current question before you can move on to the next question.

• Add a "Back" button to allow users to go back and modify their answers. You can go back to the first question at most. Note that for questions that the user has answered, the select button should appear selected. This way users don't have to re-answer questions that have already been answered.

• Use jQuery to add animation (fade out the current question, fade into the next question)

• Tested under IE8 and IE9, fixed the bug, here it should be You will be busy. ;D

• Export the question to a JSON file

• Add user authentication, allow users to log in, and save user authentication information in local storage (local storage, HTML5 browser storage).

• Use cookies to remember the user, and when the user logs in again, it will display "Welcome username back".
  

  7 weeks, can be extended to 8 weeks (class, inheritance, HTML5)

  Continue to improve

• Use Twitter Bootstrap for page layout, Make the Q&A element look professional. As an added bonus, use Twitter Bootstrap’s label control (Translator’s Note: The original address is invalid and has been changed) to display questions, with each label displaying one question.

• Learn Handlebars.js and use Handlebars.js template in Q&A applications. There should no longer be HTML code in your JavaScript code. Our Q&A app is getting more and more advanced now.

• Record the results of users who participated in the Q&A, and display the user's ranking comparison with other users in the Q&A application.

1. Proficient in backbone.js

2. Intermediate and Advanced JavaScript Advanced

3. 无码不卡综合Node.js

4. Getting started with Meteor.js (coming soon)

5. The three best JavaScript front-end frameworks (coming soon) Released)

1. Read Chapters 9, 18, 21, and 22 of "The Definitive Guide to JavaScript."

   Or read my blog post JavaScript Object-Oriented Must Know

   Or read Chapters 6, 16, 22, 24 of "JavaScript Advanced Programming", Chapter 6 read-only "Creating Objects" ” (Object Creation) and “Inheritance” sections. Note: This part is the most technically intensive reading in this course. You should consider whether to read it all based on your own situation. You must at least know prototype pattern (Prototype Pattern), factory pattern (Factory Pattern) and prototype inheritance (Prototypal Inheritance), others are not required.

2. Continue to upgrade your Q&A application:

3. After learning Backbone.js and Node.js, you will Use these two latest JavaScript frameworks to refactor the code of your Q&A application into a complex single-page modern web application. You also need to save the user's authentication information and grades in the MongoDB database.

4. Next: Conceive a project and develop it quickly while the iron is hot. When you get stuck, refer to "The Definitive Guide to JavaScript" or "Advanced Programming with JavaScript". Of course, you also need to be an active user of Stack Overflow, ask more questions, and try to answer other people's questions.

1. Read Chapters 10, 14, 17, and 20 of "The Definitive Guide to JavaScript."

   Or read Chapters 20 and 23 of "Advanced Programming with JavaScript".

2. Remember to type the sample code into the browser console, play with it as much as possible, and do various tests until you fully understand how it works and what it can do.

3. At this point, you should be very comfortable using JavaScript, a bit like a martial arts master about to come out. But you can't become a master yet. You have to use the newly acquired knowledge repeatedly and keep learning and improving.

4. Q&A application made before upgrading

The above is the detailed content of Learn the correct posture of JavaScript. For more information, please follow other related articles on the PHP Chinese website!