How to learn js

A friend said that he wanted to learn javascript, but he didn’t know how to learn it. In this article, the editor summarizes the important knowledge points and learning methods of JavaScript. It is a bit long, but it is very useful. I hope it will be helpful to you.

1. Development environment and JavaScript version issues

The simpler the development environment, the better. Don’t waste time on this link.

First let’s talk about the choice of editor, sublime text, vs code, atom, webstorm, and HBuilder. When a newbie gets started, he always wants to find the best editor. In fact, this editor is just like choosing a hero in the game. There is no most powerful one, only the one that suits you best. If you are still not sure, just choose vs code. I I feel like this is quite friendly to newbies.

Use chrome as the browser, and then you can start coding.

Regarding the JavaScript version, I suggest you start learning from ES5, and then look at the new features of ES2015 after you have a certain foundation.

2. Basic Grammar

There are many similarities between learning programming languages ​​and learning natural languages. We have to start from the most basic words and grammar.

• Variables: How to declare variables and how to assign values ​​to variables.
• Data type: What is a data type and what is the difference between numbers and strings.
• Operators and expressions: What are the commonly used operators? The difference between "=", "==" and "===", etc.
• Branch statements: if, switch
• Loop statements: for, while
• Function: What is a function, what are parameters, and what is the return value.

You must be very familiar with these basic grammars, otherwise subsequent learning will be difficult.

3. Object

Object is a very important concept and must be grasped flexibly:

• Object: an unordered collection of attributes. When the attribute value is a function , we call this function a method of the object.
• Array: An ordered collection of elements. Common methods for understanding arrays
• Date objects: Get year, month, day, hour, minute and second
• Mathematical objects: Get random numbers
• Understand other objects: regular expressions, packaging objects, in fact Functions are also objects, but a brief understanding of these will suffice.

Each object has many methods. Just know where to look for these methods. Don’t memorize them. Just like when we learn English, we need to memorize necessary words, but most of the words know how to use them. Just look it up in a dictionary.

The process of learning [Basic Grammar] and [Object] is relatively boring, and the connection between knowledge points is not particularly close. Just like when we learn Chinese characters in the first grade of elementary school, we know what each character is, but I don't know how to put them together, so I only practice word formation, sentence making, and composition writing in elementary school. We compare the projects we are doing to writing essays, so we still have a way to go, so don’t be impatient.

4. DOM

• The tree structure of DOM
• Nodes: element nodes, text nodes, attribute nodes
• Node relationships: peers , parent-child level, etc.
• Get nodes: querySelector, querySelectorAll, etc.
• Node operations: add, delete, modify, check
• Event binding: event flow and event delegation should be understood

DOM also provides many methods. Still don’t invest too much energy. Newbies who are self-study will always be troubled by these large numbers of methods. What we need to do is to have a general understanding of DOM. As for We can completely replace those messy interfaces with jQuery or frameworks in the future.

(If you are interested in DOM, you can come back and study in depth after you have mastered the skills a little more comprehensively, but investing a lot of time in the early stage will indeed affect the learning efficiency)

五, jQuery

jQuery is a must, but it is really easy to get started with jQuery. It takes two days to understand the usage of jQuery, and then you can use jQuery to achieve various page effects. There will definitely be stumbling in the early stage, but There is a lot of information on jQuery, just learn and do it at the same time.

6. JavaScript Advanced

After you are proficient in jQuery, you can start to learn more advanced JavaScript content:

The difference between primitive types and reference types
Various type conversions and type detection
Closure: Functions within functions, just don’t fool yourself no matter how you apply them.
Prototype: How constructors, prototype properties, and prototype-based inheritance are implemented.
this: You can open a pit and study it carefully

7. Understand node

Node can now be said to be a must-learn for the front-end, but instead of learning to use node as the backend, use Various tools in the node ecosystem, by the way, use node to understand the background.

• Use node to open a static server
• Use npm to download third-party modules
• webpack
• babel

It is best to use express to write a simple background program (one server.js is enough) to handle some requests, so that when we learn ajax, we can write the background interface ourselves. Of course, this requires basic knowledge of the http protocol.

8. ES2015 new features

• Variables and constants: Why abandon var?
• Structure assignment
• Arrow function
• Modularization
• class
• Compilation

Like promise, Async/await functions, etc., it all depends on your ability. If you are interested, take a look. If you don’t look, it will not affect your subsequent learning. However, even if you don’t learn it now, you will still need to make up for it in the future.

9. AJAX

Simply put, understand the http protocol, what is a request, what is a response, what are the differences between get and post, and then learn ajax and see that the syntax is basically Got it.

• Use XMLHttpRequest to send a request and receive data.
• Use jQuery to send a request and receive data.
• json analysis

That’s enough to know these. Whether you are working or studying, you will definitely encounter many problems in the future. We will analyze the specific problems in detail at that time.

10. Framework

Choose one of react, angular, and vue. Beginners with zero foundation strongly recommend vue. If you are switching from backend to front-end, angular is recommended. If you are a technical front-end, react is recommended.

This article is for novices with no basic knowledge, so naturally it is better to choose vue.

Finally

Through these ten steps, you can have an overall understanding of the JavaScript system, and then focus on which direction to develop, depending on your hobbies or work needs. The road to technology is long and this is just a starting point.

The above is the detailed content of How to learn js. For more information, please follow other related articles on the PHP Chinese website!