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
2).Basic grammar
1. Variables and process control
2. Browser debugging skills
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
⑤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:
⑥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.
4. Strict inspection mode
Browser effects in strict mode:
js code:
Browser effect:
5. Detailed explanation of strings
① Escape character \
②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
position of the backticks:
③Template string
To concatenate multiple strings, use the + sign:
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:
④Commonly used functions
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
②The value of the array can be modified
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:
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
6.) join(): Link each element in the array with the specified string
7.) Multidimensional arrays
7. Detailed explanation of objects
①Define an object
② Freely add and delete attributes to objects
③ Determine whether the object has a certain attribute
④Define methods in objects
When calling a method, you need to add () after the function name, otherwise the function definition will be returned.
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:
More HTML Events
Case number one:
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));
</>
Loop through:
3. Function
1.) Definition and use of functions
Function definition:
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.
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
2.) Variable scope
① When the variables of internal functions and external functions have the same name:
② Variable promotion: Promote the declaration of all variables in the function body to the top of the function. Note that assignments are not included.
The above code is equivalent to the following:
③ Global scope
JS has a global object window by default, and global variables are actually bound to properties of a window:
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:
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:
2.) Date object
Time zone conversion can be achieved through timestamp.
3.) JSON object
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.
2.) class inheritance
es6, introduced the class keyword
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.
2.)navigator
The navigator object represents browser information. The most commonly used attributes include:
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:
4.)location
The location object represents the URL information of the current page.
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
2.) Update DOM
3.) Delete DOM
When deleting a node, you must first obtain the parent node of this node and delete itself through the parent node.
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.
②Create a new label and add it to the existing label:
③ Insert the child node into the specified position.
Original effect:
Modification:
8. Form
The main input controls of the html form:
1.) Get and set the value of the form
Get value:
Settings: