1. Foreword
In the past, JavaScript was only used to do some simple web page effects, such as form validation, floating ads, etc., so JavaScript was not taken seriously at that time. Since AJAX became popular, people have discovered that using JavaScript can bring a better experience to users, and even use this advantage to develop large-scale web games, so this small language has been taken seriously. Nowadays, many companies will recruit specialized JavaScript engineers. Usually JavaScript is an essential skill for WEB front-end development. A brief introduction to the benefits of JavaScriptr does not mean that everyone will learn it or even learn it well. Interest is very important. I think interest is the best teacher. It is the motivation for you to concentrate on doing one thing and do it well. . In addition, everyone must believe that small languages can do big things. I have used Greasemonkey to write some very practical tools. For example, you can use JavaScript Greasemonkey to write plug-ins for online web games. Let’s talk about my process and experience of learning JavaScript.
2. Getting started
1. Learn DIV CSS layout
Using DIV CSS to layout standard web pages can make the front-end XHTML code less and the structure clearer. It is helpful to easily use JavaScript to operate the DOM. For example, if you want to display a list with 3 rows and 3 columns, if you use the traditional table layout, and now you need to use JavaScript to dynamically generate this list, then you need a loop nesting. If you use the li structure and add CSS floating layout, one loop is enough. Of course, WEB standardization does not necessarily mean that tables cannot be used. What I mean is that XHTML with a clear structure makes it easier to integrate JavaScript effects or functions into projects.
2. Master several development and testing tools
As a developer, it is necessary to be familiar with testing tools. This will help improve your efficiency in finding and solving problems, especially for large projects. This is especially true for projects. I will first recommend the two most commonly used JavaScript and XHTML development and testing tools: Web Developer and Firebug.
3. Be familiar with the function of each method in JavaScript
This requirement may sound a bit unrealistic. I think this requirement is indeed true for large languages such as C# and JAVA, because These language libraries are so huge that I believe no one can fully remember them, and there is no need to remember them all. For example, using JAVA to build web pages and mobile phone development focus on different class libraries. Not so with JavaScript. It really doesn’t have many built-in methods and functions. If you familiarize yourself with it first, you will be able to develop it easily. For example, you may think at first that JavaScript has trim(), which many languages have, to remove spaces at the beginning and end of lines. Methods, when you understand the JavaScript built-in function library, you will find that you have to implement these methods in JavaScript yourself. For another example, if you switch to JavaScript from another more powerful language, you may think that JavaScript should have an MD5 encryption method. Of course, this does not exist, but someone has implemented such a method in JavaScript, namely JavaScript MD5. After all, there are very few built-in methods in JavaScript, but many talented people have written some new methods to increase JavaScript functions. For example, the prototype framework mainly prototypes extensions of basic JavaScript functions.
4. Understand DOM programming
Understanding DOM programming is a more important course in learning JavaScript, because in addition to writing some pure data processing logic, JavaScript is more about dynamically changing XHTML structure and content to achieve the purpose of dynamic updating of the interface, and these tasks all rely on DOM programming. The jQuery framework encapsulates this aspect quite well, providing a wealth of DOM operation methods, allowing you to easily find a DOM node (XHTML tag) anywhere on the page, and then perform related operations (add, delete, modify, check). For those who have experience in operating XML documents in other languages, I believe you will get started quickly.
5. Contact and use AJAX
Today, if you learn JavaScript without using AJAX, you will bury the advantages of JavaScript (AJAX itself is not considered JavaScript content). AJAX is beneficial to both users and servers. For users, it provides a better user experience. The most typical application scenario is pre-detection of user name availability on the registration page. Traditionally, users may encounter such problems: After filling in a bunch of information and submitting the form, the server informs the user that the user has been registered and requires the user to fill in the information again. This is very fatal for large multi-user websites, because half of the 10 usernames entered by the user may have been registered. used. For the server, reduce web page traffic, because after AJAX, data is generally loaded on demand, and the entire page will not be reloaded due to local updates. For example, if a web page occupies three screens high, we can load only the content of the first screen by default, and then load the content of the second and third screens when the user pulls the scroll bar down. In addition, WEB online map applications are also examples of AJAX use.
3. Improvement
1. In-depth understanding of JavaScript this keyword
The function and direction of JavaScript this are very different from many real object-oriented development languages. The difference is that it does not always point to the current object and will change. If you don't pay attention to this problem, you may encounter problems such as errors or non-execution of code that seems to be correct.
2. Learn JavaScript OOP programming
OOP is a good thing. It makes programmers think more organized and organize their code more clearly. JavaScript can also be OOP, but it is also quite different from some traditional OOP languages, so it takes some effort to really become familiar with JavaScript OOP.
3. Understand closures
JavaScript closures are also a topic that has been talked about a lot. Closures complicate JavaScript variable scope, but this feature makes this subject Language has become more flexible.
4. Learn standardized development
I believe you have heard a lot about team spirit. Working for a company to do development is of course inseparable from the team. If the team wants to cooperate happily, each member must Coding must comply with certain standards, which is also the basic requirement for programmers of every company. Specifications usually refer to variable naming, file organization, annotation specifications, etc. This knowledge is similar to the specifications of other languages.
5. Find a book on algorithms and read it
I think it is not difficult to learn and use a language. What is difficult is to use the basic grammar and sentences of the language to solve some problems. Complex issues. To solve some complex problems, some algorithms may be used. Some algorithm implementations may be done by a team, such as the specific implementation of Chinese word segmentation by the Chinese Academy of Sciences, and the automatic path finding A* algorithm commonly used in games. Maybe you think you can't encounter such complex problems in JavaScript development. In fact, it depends on what project you are doing. If you are developing a large-scale web game, you usually face more challenging problems. If you have Reading some algorithm books and understanding the solutions to some common problems will naturally make you more powerful during the development process. In addition, being familiar with algorithms will obviously be helpful for you to come into contact with other development languages in the future.
4. Habits
1. Take notes on compatibility and BUG issues
It is best to take notes on CSS and JavaScript browser compatibility issues, because these issues, In other words, BUGs are quite weird. For these problems, the browser will not prompt you where you went wrong, and the IDE will not prompt you either, especially CSS compatibility issues. This will cause you to be stuck for a long time when encountering such problems during the development process. cannot be resolved. Even if you have solved similar problems before, you may encounter them again in the future. As a result, you have not taken notes before to strengthen your memory. You are destined to suffer again, because these compatibility problems are not just one or two, and the temporary memory effect is not obvious. In my experience, many problems occur under IE6. Now even Microsoft itself hopes to accelerate IE6's demise. This is of course good news for us in front-end development.
2. Reading excellent code, such as jQuery
Reading excellent code is definitely a good way to improve yourself. This not only allows you to understand the organizational specifications of excellent code, but also understands the implementation ideas of some functions. . For example, jQuery is a JavaScript framework that is worth learning. Of course, to read such a professional JavaScript framework, you must have a solid foundation in JavaScript, otherwise you will encounter too many questions during the reading process, which may even be a blow to your confidence.
4. Note
1. Avoid using JavaScript frameworks for development directly before getting started with JavaScript
If you don’t have any JavaScript foundation, please do not use JavaScript frameworks for development directly. I think this It may mislead your understanding of a language. For example, if you directly use jQuery to write sentences with connected dots, do you think this is a type of JavaScript syntax? For another example, if you use prototype, don't think that the base class method after the framework extension is built-in in JavaScript. I think JavaScript frameworks are used to improve efficiency, and they are definitely not something you should learn when getting started with JavaScript.
2. Many examples found online may not be cross-browser compatible
There are many JavaScript effect source codes written by a netizen N years ago. N years ago, IE was the world, so some The front-end is too lazy to solve the cross-browser compatibility issue of scripts, making the scripts written only applicable to IE. When you get such a piece of code, please don't talk rubbish or complain about it, because these codes are not worthless. If you understand JavaScript cross-browser compatibility issues, I believe you can easily use it with few modifications. The code has better compatibility.
5. Related reading
"JavaScript Development Specification Requirements"
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
