Introduction to JavaScript_javascript skills-JS Tutorial-php.cn

This article is not a reference manual. It is only suitable for gaining a general understanding of JS. If you need detailed syntax and application of JS, please go to w3school

What is JavaScript?

The birth of JavaScript

Around 1995, the world's mainstream bandwidth was 28.8Kbps, and now the world's average download bandwidth is 21.9Mbps (data comes from http://www.netindex.com). At that time, netizens had to wait for a long time to receive a response from the server every time they submitted a form. It was even possible that after waiting for a few minutes, the response they received was that a certain item was missing. In order to improve the user experience, a script embedded in the browser client that can realize simple form judgment was born. This is JavaScript.

JavaScript was first developed by Brendan Eich, who was working at Netscape, for Netscape Navigator 2.0 (NN2.0), which was to be released in 1995. It was called LiveScript at the time. Since it was cooperating with the very popular Sun company at the 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 of this language.

Strictly speaking, it doesn’t matter. If we have to make a connection, maybe some of the functions, object-oriented ideas, judgment structures, loop statements are the same, etc., but these are obviously not Java's patents, but the consensus of programming languages.

JavaScript standardization and development history

When JavaScript was launched, the NN browser with better user experience dominated the browser market, and Microsoft has been catching up. When IE3 was launched, Microsoft released VBScript under the name JScript, which was actually not much different from Netscape's JavaScript (a copycat in today's terms). Facing competition from Microsoft, Netscape and Sun submitted their JavaScript drafts to ECMA (European Computer Manufacturers Association) to standardize JavaScript, and finally formed the first version of ECMAScript (ECMA-262).

Interestingly, after Netscape standardized JavaScript, internal problems arose and JavaScript research stagnated. Microsoft took the opportunity to catch up and launched IE4, which built in the first JavaScript engine that complied with the ECMA specification. NN is one year ahead of schedule. In addition, Microsoft systems gradually occupy the computer operating system market, and its pre-installed IE browser market share gradually increases, and NN continues to be squeezed out of the market. However, when Microsoft lost its biggest rival, it lost the motivation to develop. IE6~IE8 were incompatible with each other in terms of interface rendering and script execution. It became a strange flower in the history of browsers and a curse for front-end developers. Nightmare.

Copy code The code is as follows:

v1 June 1997 First Edition 

v2 June 1998 The format was revised to make its format consistent with the ISO/IEC16262 international standard 

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 

v4 is not finished...maybe more clear definition of classes, namespaces, etc...

v5 December 2009 Added "strict mode", a subset used to provide more thorough error checking to avoid structural errors. Clarifies many ambiguous specifications of version 3, and accommodates behavior of real-world implementations that differed consistently from that specification. Some new features have been added, such as getters and setters, support for JSON and more complete reflection on object properties.

****In June 2004, the European Computer Manufacturers Association published the ECMA-357 standard, which is an extension of ECMAScript. It is also called 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 general specification. JavaScript and JScript are developed according to this specification and are compatible with ECMAScript, but include functions beyond ECMAScript. However, no matter which one it is, it is now commonly known as JavaScript, just because it appeared first and had the greatest influence, and its name has been passed down to this day.

What can JavaScript do?

On the web page, all operations that require logical processing can be completed by JavaScript. For example:

Copy code The code is as follows:

• Form validation

•Animation effects 

•Web games

•Countdown 

•……

There are many, many applications, which I won’t go into details here. I believe you will find many applications after learning this language.

Why should you 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. To learn web technology, you must learn JavaScript.

2. JavaScript is a beautiful language, it is good, so we have to learn it

Positioning of JavaScript

Copy code The code is as follows:

JavaScript is a lightweight scripting language that does not require compilation and is parsed and run by a JavaScript parsing engine (generally refers to the browser, of course not excluding parsers such as node) 

JavaScript has non-functional language features, functional language features and dynamic language features, and its syntax is very flexible

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 previously written an article specifically explaining prototype inheritance) 

JavaScript is a C-like language, so anyone who has learned C can easily get started with JavaScript

Writing JavaScript does not require a compiler, but only a text editor (Notepad is not required, sublime text is highly recommended here)

What does JavaScript have?

The JavaScript used by everyone now includes three parts: DOM, BOM, and ECMAScript (or core js).

DOM

It is assumed here that everyone has at least some understanding of HTML and CSS. If you want to skip HTML and CSS directly to read this article, read here first.

DOM, document object model

We know that XHTML requires that tags must be closed and nested correctly. The nesting of tags creates a parent-child relationship (or ancestor-descendant relationship). The DOM provides a large number of APIs that allow us to easily operate the DOM tree. I will write an article specifically about JS DOM later.

Using DOM, we can dynamically modify page content, adjust styles, etc. This is also a manifestation of the diversity of JS.

BOM

BOM, browser object model

Similar to DOM, except that the main body becomes the browser. The browser also provides a large number of APIs, some of which are open to JS, providing us with methods to operate the browser window.

Common uses:

Copy code The code is as follows:

The ability to pop up a new browser window; 

The ability to move, close and change the size of the browser window; 

Navigation object that can provide detailed information of WEB browser; 

A local object that can provide detailed information about the page loaded by the browser; 

A screen object that provides detailed information about the user’s screen resolution; 

Support Cookies; 

Internet Explorer extends the BOM to include ActiveX object classes, and ActiveX objects can be implemented through JavaScript.

ECMAScript core

Also called JS core, no matter what you call it, the meaning is the same. They all represent the core components of the JS language, including variable definition, garbage collection, syntax, scope, etc. Unlike the DOM and BOM mentioned above, which only require us to use these APIs, ECMAScript core is the essence of the language and requires continuous study. The next chapter will further discuss the syntax of JS.

Usage of JavaScript

Inline

Inline is JavaScript written in tags. For example, we write in HTML:

Copy code The code is as follows:

When we click the button, a pop-up box will display "be clicked".
But note that this is strongly not recommended, because it will bring 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 have 'on', and js can only be introduced into tags through events, and simple js expressions cannot be written

Embedded

Embedded means writing js code in the script tag of HTML. The method is to add a new script tag in HTML, and then insert any of your js code in the middle of the tag, as follows:

Copy code The code is as follows:

If you use inline, you are much freer than inline. You can write more code, you can also avoid the problem of escaping quotation marks, and maintenance becomes easier. But there is also a problem. These codes can only be applied to this page and cannot be used by other pages.

External link

The external link method solves all the shortcomings of the above two forms. Here’s how:

First create a new file and change the suffix to .js. For example, we create a new click.js file, and then copy the js code in the inline we just wrote (note that the script tag is not included)

Copy code The code is as follows:

var btn = document.getElementById("btn");

btn.onclick = function() {

​​ alert("be clicked");

}

Then introduce

in HTML through script tag

Copy code The code is as follows:

The advantage of this is that the same js code can be shared by multiple HTML pages. The disadvantage is that it increases the number of files and increases the time required for requests, so the reusability of the code should be enhanced and the js files should be merged in the end ( Merge different js files into one js file)