JavaScript standard reference tutorial, basic specifications of JavaScript

Hello everyone, the editor will answer your questions about the JavaScript Standard Reference Tutorial. Many people still don’t know the basic specifications of JavaScript, let’s take a look at it now!

1. What is JavaScript?

Overview: JavaScript is the most popular scripting language in the world.


ECMAScript(es) can be understood as a standard python for statement usage of JavaScript .

The latest version has reached the es6 version, but most browsers only support es5, which results in the development environment being es6 and the online environment being es5.

2. Quick Start

1). Use js to output hello and world

Insert image description here

2).Basic grammar

1. Variables and process control

Insert image description here

2. Browser debugging skills

Insert image description here

3.Data type
①Number

JavaScript does not distinguish between integers and floating point numbers, and is represented by Number. The following are legal Number types:

123;//整数123
0.456;//浮点数0.456
1.1234e3;//科学计数法
-99;//负数
NaN;//表示NOT A NUMBER ,当无法计算结果时用NaN表示
Infinity;//表示无限大,数值超过了JavaScript的Number所表示的最大值时。
②String

Any text enclosed in ' ' or " ".

③Boolean value
④Comparison operator

< 1.> == : It will automatically convert the type and then compare. Many times, you will get a lot of weird results.

< 2.> === : It will not automatically convert the type. If the types are inconsistent, false will be returned. If the types are consistent, the values ​​will be compared.

<3.> NaN is not equal to any other type of data, including itself. The only way to judge NaN is the isNaN() function
Insert image description here

⑤Array

An array is a sequence of collections, each value of which is called an element. JavaScript arrays can contain any data type .

Two ways to create an array:
Insert image description here

⑥Object

A JavaScript object is an unordered collection of keys and values, for example:

The keys of the object are all of type String, and the values ​​can be of any type.
Insert image description here

4. Strict inspection mode

Browser effects in strict mode:

js code:
Insert image description here
Browser effect:
Insert image description here

5. Detailed explanation of strings
① Escape character \

Insert image description here

②Multi-line string

Since multi-line strings are more troublesome to write using \n, the latest ES6 standard adds a new representation method for multi-line strings, using backticks `` to indicate: the
Insert image description here
position of the backticks:Insert image description here

③Template string

To concatenate multiple strings, use the + sign:

Insert image description here
If there are many variables that need to be connected, it will be more troublesome to use the + sign. ES6 adds a new template string, which is expressed in the same way as the multi-line string above, but it will automatically replace the variables in the string:
Insert image description here

④Commonly used functions

Insert image description here

6. Detailed explanation of arrays

JS arrays can contain any type of data , and an element can be accessed through indexing.

①Points to note when defining an array and the length attribute

Insert image description here

②The value of the array can be modified

Insert image description here

Note that when modifying the value corresponding to the index, if the index exceeds the limit, the array will also change.

③Common methods
1.) indexof: Search for the position of a specified element:

Insert image description here

2.) slice: corresponds to the substring() version of String, which intercepts some elements of Array and then returns a new Array
3.) push and pop: tail additions and deletions
4.) unshit and shit: addition and deletion of heads
5.) concat() concatenates the current array with another array and returns a new array

Insert image description here

6.) join(): Link each element in the array with the specified string

Insert image description here

7.) Multidimensional arrays

Insert image description here

7. Detailed explanation of objects
①Define an object

Insert image description here

② Freely add and delete attributes to objects

Insert image description here

③ Determine whether the object has a certain attribute

Insert image description here

④Define methods in objects

When calling a method, you need to add () after the function name, otherwise the function definition will be returned.

Insert image description here

8.Events

HTML events are things that happen to HTML elements . When using JS in HTML pages, JS can handle these events.

An event can be something the browser or user does, the following are common HTML events:
Insert image description here
More HTML Events

Case number one:
Insert image description here

9.ES6 new features: Map and Set

Basic features:

    <>
        'use strict';
        // map:   新增set    获取get   删除delete
        var map = new Map([['tom',100],['mary',18]]);
        map.set('machenfei',20);
        var tomAge = map.get('tom');
        console.log(tomAge);
        console.log(map);

        map.delete('tom');
        console.log(map);

        console.log("--------------------------------------------")

        // set:   新增add  删除delete  是否包含has
        var set = new Set([1,2,3,4,5]);
        set.add(6);
        console.log(set);
        
        set.delete(1);
        console.log(set);

        console.log(set.has(100));

    </>

Insert image description here
Loop through:
Insert image description here

3. Function

1.) Definition and use of functions

Function definition:
Insert image description here

Function call:

Unlike Java, when JS calls a function, you can pass in any number of parameters.

JavaScript also has a free keyword arguments, which only works inside the function and always points to
all the parameters passed in by the caller of the current function.

Insert image description here
When calling a method, the number of parameters passed in is greater than the number of parameters specified when defining the function. In order to facilitate acceptance, you can use the rest variable
Insert image description here
Insert image description here

2.) Variable scope

① When the variables of internal functions and external functions have the same name:

Insert image description here

② Variable promotion: Promote the declaration of all variables in the function body to the top of the function. Note that assignments are not included.

Insert image description here
The above code is equivalent to the following:
Insert image description here

③ Global scope

JS has a global object window by default, and global variables are actually bound to properties of a window:

Insert image description here
Therefore, directly accessing the global variable course is exactly the same as accessing window.course.
Therefore, the definition of the top-level function is also treated as a global variable and bound to the window object

Global variables will be bound to the same window. If multiple JS files are introduced, the possibility of variable naming conflicts will greatly increase.
Solution: Put all your code into the unique namespace MYAPP, which will greatly reduce the possibility of global variable conflicts.

④Block-level scope
Only global variables and function-scope variables can be declared using var, but block-level variables need to use let.

let —> block scope —> variable
const–> block scope —> constant

⑤ Use the apply function to control the pointing problem of this:
Insert image description here
Insert image description here

4. Object

1.) Standard objects

In the world of JavaScript, everything is an object. In order to distinguish the type of the object, we use the typeof operator to get the type of the object, which always returns a string:
Insert image description here

2.) Date object

Insert image description here
Time zone conversion can be achieved through timestamp.

3.) JSON object

JSON

5. Object-oriented programming

1.) Prototype

Those who are familiar with Java programming should understand two concepts:

Class: A class is a type template of an object.
Instance: An instance is an object created based on a class.

In JavaScript, this concept needs to be changed. JavaScript does not distinguish between the concepts of classes and instances, but implements object-oriented programming through prototypes.

Insert image description here

2.) class inheritance

es6, introduced the class keyword

Insert image description here

6. Manipulate BOM

BOM is the browser object model.

1.)window

The window object not only serves as the global scope, but also represents the browser window.

The window object has innerWidth and innerHeight properties, which can get the inner width and height of the browser window.
The internal width and height refers to the net width and height used to display the web page after removing placeholder elements such as menu bars, toolbars, and borders.
Insert image description here

2.)navigator

The navigator object represents browser information. The most commonly used attributes include:
Insert image description here
Note: HTML5 allows any browser to return to Netscape after executing navigator.appName, so do not rely on this attribute to obtain its browser value.

The navigator's information can be easily modified by the user, so the value read by JavaScript may not be correct. In order to write different codes for different browsers, many beginners like to use if to determine the browser version, for example:

var width;
if (getIEVersion(navigator.userAgent) < 9) {
width = document.body.clientWidth;
} else {
width = window.innerWidth;
}

However, this may cause inaccurate judgment and make it difficult to maintain the code. The correct method is to make full use of JavaScript's feature of returning undefined for non-existent properties and directly use the short-circuit operator || to calculate:

 var width = window.innerWidth || document.body.clientWidth;

3.)screen

The screen object represents screen information. Commonly used attributes are:
Insert image description here

4.)location

The location object represents the URL information of the current page.
Insert image description here

5.)document

The document object represents the current page. Since HTML is represented as a tree structure in the form of DOM in the browser, the document object is the root node of the entire DOM tree.

6.) history (do not use)

The history object saves the history of the browser. JavaScript can call back() or forward() of the history object, which is equivalent to the user clicking the "back" or "forward" button of the browser.

7. Manipulate DOM

DOM is the Document Object Model. A web page is a DOM node tree.

1.) Get DOM

Insert image description here

2.) Update DOM

Insert image description here

3.) Delete DOM

When deleting a node, you must first obtain the parent node of this node and delete itself through the parent node.
Insert image description here

4.) Add DOM

① Add an existing tag to another tag:

Because the p node already exists in the DOM tree, when it is added, it will be deleted from the original location and then inserted into the new location.
Insert image description here

②Create a new label and add it to the existing label:

Insert image description here
③ Insert the child node into the specified position.
Original effect:
Insert image description here
Modification:

Insert image description here

8. Form

The main input controls of the html form:
Insert image description here

1.) Get and set the value of the form

Get value:

Insert image description here

Settings:

Insert image description here

Guess you like

Origin blog.csdn.net/wenangou/article/details/134497546
Recommended