This article is not a reference manual article, it is only suitable for generating a general understanding of JS. If you need the detailed syntax and application of JS, please move to w3school.
What is JavaScript?
The Birth of JavaScript
Around 1995, the mainstream bandwidth in the world was 28.8Kbps, and the average download bandwidth in the world is now 21.9Mbps (data comes from http://www.netindex.com). At that time, netizens had to wait a long time to receive a response from the server every time they submitted a form. It is very likely that what they received after waiting for a few minutes was that they were missing one. In order to improve the user experience, scripts embedded in the browser client that can achieve simple form judgment were born, which is JavaScript.
JavaScript was first developed by Brendan Eich, who worked at Netscape (NN2.0), for NetscapeNavigator 2.0 (NN2.0), which will be released in 1995, and was then called LiveScript. Since he was working with the very popular Sun company at that time, in order to catch up with the trend of the time - Java language, this language was named JavaScript.
What is the relationship between JavaScript and Java?
This is also the first reaction of laymen when they hear JavaScript, and it is also one of the most criticized problems in this language.
Strictly speaking, there is no relationship between half a cent. If you have to get involved, maybe some of the functions of the two are the same, object-oriented ideas, judgment structures, loop statements, etc., but these are obviously not Java's patents, but the consensus of programming languages.
JavaScript standardization and development history
When JavaScript was launched, NN browsers with better user experience dominated the browser market, and Microsoft has been catching up. When IE3 was launched, Microsoft released VBScript and named it JScript, which is actually not much different from Netscape's JavaScript (in today's terms, it's a copycat). Faced with Microsoft's competition, Netscape and Sun submitted their own JavaScript draft to ECMA (European Association of Computer Manufacturers) to standardize JavaScript, and finally formed the first version of ECMAScript (ECMA-262).
Interestingly, after Netscape standardized JavaScript, there was an internal problem. JavaScript research stagnated, while Microsoft took the opportunity to catch up and launched IE4, which built-in the first JavaScript engine that followed the ECMA specifications, a year ahead of NN. In addition, Microsoft system is gradually occupying the computer operating system market, and its pre-installed IE browser market share is gradually increasing, and NN is constantly being squeezed into the market. However, when Microsoft loses its biggest rival, it has no motivation to develop. IE6~IE8, both interface rendering and script execution, is incompatible with each other, becoming a weirdo in the history of browsers and a nightmare for front-end developers.
The code copy is as follows:
1.v1 First Edition in June 1997
2.v2 June 1998 format revised to make its form consistent with the ISO/IEC16262 international standard
3.v3 December 1999 powerful regular expressions, better text chain processing, new control instructions, exception handling, clearer error definitions, formatting of number output and other changes
4.v4 not completed...maybe more explicit class definition, namespace, etc...
5.v5 In December 2009, "strict mode" was added, a subset used to provide more thorough error checking to avoid structural errors. Clarify many fuzzy specifications of version 3, and accommodates behaviour of real-world implementations that different consistently from that specification. Some new features have been added, such as getters and setters, which support JSON and more complete reflections on object properties.
****In June 2004, the European Association of Computer Manufacturers issued the ECMA-357 standard, which is an extension of ECMAScript, also known as E4X (ECMAScript for XML).
What is the relationship between JavaScript and ECMAScript?
In fact, the question should be what is the relationship between JavaScript, JScript and ECMAScript. In fact, ECMAScript is the overall specification. JavaScript and JScript are both developed according to this specification and are compatible with ECMAScript, but contain functions beyond ECMAScript. However, no matter which type it is now, it is commonly called JavaScript, because it first appeared and has the greatest influence and its name has been passed down to this day.
What can JavaScript do?
On web pages, all operations that require logical processing can be completed by JavaScript. for example:
The code copy is as follows:
•Form Verification
•Animation effects
• Web Games
•Countdown
•…
There are many other applications, which I will not elaborate on here. I believe that after learning this language, you will find many applications.
Why learn JavaScript?
1. Because you have no choice, only JavaScript can control all commonly used browsers, and JavaScript is one of the most important programming languages in the world, and learning web technology must learn JavaScript.
2. JavaScript is a beautiful language, it is very good, so we need to learn
JavaScript positioning
The code copy is as follows:
1. JavaScript is a lightweight scripting language that does not require compilation and is parsed and run by the JavaScript parsing engine (generally refers to the browser, and of course parsers such as node are not excluded)
2. JavaScript has non-functional language features, functional language features and dynamic language features, and its syntax is very flexible.
3. JavaScript is an object-oriented programming language. There is a saying in the JavaScript world: Everything is an object. Its inheritance is based on prototype inheritance (I have written a special article explaining prototype inheritance before)
4. JavaScript is a C language, so it is easy for anyone who has learned C to get started with JavaScript.
5. JavaScript is written without a compiler, but only a text editor (Notepad is exempt, sublime text is highly recommended here)
What is JavaScript?
The JavaScript we use now includes three parts: DOM, BOM, and ECMAScript (or core js).
DOM
Here, by default, everyone has at least some understanding of HTML and CSS. If you skip HTML and CSS directly to read this article, please read here first.
DOM, document object model
We know that XHTML requires that the tags must be closed and the nesting must be correct. The nesting of tags creates a father-son relationship (or, an ancestor-descendent relationship). DOM provides a large number of APIs, allowing us to easily manipulate DOM trees. I will write an article later on specifically talking about JS DOM.
Using DOM, we can dynamically modify page content, adjust styles, etc., which is also a reflection of JS diversity.
BOM
BOM, browser object model
Similar to DOM, except that the main body becomes a browser. The browser also provides a large number of APIs, some of which are open to JS, providing us with a way to operate browser windows.
Common uses:
The code copy is as follows:
1. The ability to pop up a new browser window;
2. The ability to move, close and change the size of the browser window;
3. Navigation objects that can provide detailed information of WEB browser;
4. Local objects that can provide detailed information about the browser loading page;
5. Screen objects that can provide detailed information on user screen resolution;
6. Support cookies;
7. Internet Explorer extends BOM to include ActiveX object classes, and ActiveX objects can be implemented through JavaScript.
ECMAScript core
Also called JS core, no matter how you call it, it means the same meaning, it represents the core composition of the JS language, including variable definition, garbage collection, syntax, scope, etc. Unlike the DOM and BOM mentioned above, they only require us to use these APIs, and ECMAScript core is the essence of this language and requires continuous research. The next chapter will further talk about the syntax of JS.
JavaScript usage
In-line style
Inline form is JavaScript written in tags. For example, we write in HTML:
The code copy is as follows:
<button onclick="alert('be clicked');">Click</button>
When we click the button, the box will display "be clicked".
But note that this is strongly not recommended, because this will cause huge trouble to maintenance. Every time we need to change the event, we need to find the element first and then modify its javascript content, and these javascript codes cannot be reused.
In addition, events written in tags need to be 'on', and js can only be introduced through events in tags, and simple js expressions cannot be written.
Embedded
Embedded means writing js code in html script tag. The method is to add a script tag to HTML and then insert any js code in the middle of the tag, as follows:
The code copy is as follows:
<html>
<body>
<button id="btn">Click</button>
</body>
<script>
<span style="font-family: Arial, Helvetica, sans-serif;">var btn = document.getElementById("btn");</span><pre name="code"> btn.onclick = function() {
alert("be clicked");
}
</script></html>
If you use embedded style, it is much freer than inline style. You can write more code, avoid quotation escaping problems, and maintain it easier. But the problem also exists. These codes can only be applied to this page and cannot be used by other pages.
External connection
The external connection method solves all the shortcomings of the above two forms. The following methods are as follows:
Create a new file first and change the suffix to .js. For example, we create a new click.js file and copy the js code in the embedded version we just wrote (note that we do not include script tags)
The code copy is as follows:
var btn = document.getElementById("btn");
btn.onclick = function() {
alert("be clicked");
}
Then import it in HTML via script tag
The code copy is as follows:
<html>
<body>
<button id="btn">Click</button>
</body>
<script src="click.js"></script>
</html>
The advantage of this is that the same js code can be shared by multiple HTML pages. The disadvantage is that the number of files increases and the time required for requests is increased. Therefore, the reusability of the code should be enhanced, and finally the js file should be merged (merge different js files into one js file)