Home > Developer > JavaScript
1. JavaScript overview
2. JavaScript Introduction method
3. JavaScript Language Specification
4. JavaScript Language Basics
5. JavaScript data type
6. JavaScript operators
7. JavaScript Process Control
In November 1996, the creator of JavaScript,--netscape, decided to submit JavaScript to the International Organization for Standardization, the ECMA, in the hope that the language would become a global standard. The following year, ECMA released the first edition of Standard No. 262 (ECMA-262), which specifies the standard of the browser scripting language and calls this language ECMAScript, which is version 1.0.
The standard was developed for JavaScript in the first place, but it was not called JavaScript, for two reasons. One is a trademark, and JavaScript itself has been registered as a trademark by Netscape. But to embody the language of the creator is the ECMA, not the Netscape, which helps to ensure the development of the language and neutrality.
Therefore, the relationship between ECMAScript and JavaScript is that the former is the specification of the latter, which is an implementation of the former.
| Year | Name | Describe |
| 1997 | ECMAScript 1 | First version |
| 1998 | ECMAScript 2 | Version change |
| 1999 | ECMAScript 3 | To add a regular expression Add Try/catch |
| ECMAScript 4 | Not published | |
| 2009 | ECMAScript 5 | Add "strict mode" strict modes Add JSON support |
| 2011 | ECMAScript 5.1 | Version change |
| 2015 | ECMAScript 6 | adding classes and modules |
| 2016 | ECMAScript 7 | Increase the exponential operator (* *) Increase Array.prototype.includes |
Note: ES6 means ECMAScript 6.
Although ECMAScript is an important standard, it is not the only part of JavaScript, and certainly not the only one that is standardized. In fact, a complete JavaScript implementation is made up of the following 3 different parts:
Simply put, ECMAScript describes the content of the JavaScript language itself.
JavaScript is a scripting language
JavaScript is a lightweight programming language.
JavaScript is a programmatic code that can be inserted into an HTML page.
When JavaScript is inserted into an HTML page, it can be performed by all modern browsers.
JavaScript is easy to learn.
2. Introduction of additional JS files<script> //write your JS code here </script>
c. javascript Language Specification1. Comments<script src= "Myscript.js" ></script>
2, TerminatorThis is a single-line comment/* This is Multi-line Comment */
The statements in JavaScript are terminated with a semicolon (;).
var name = "Duoduo"; var age = 18;
Attention:
Variable names are case-sensitive.
Camel-named rules are recommended.
Reserved words cannot be used as variable names.
Add:
ES6 has a new let command for declaring variables. The usage is similar to Var, but the declared variable is valid only within the block of code where the Let command resides. For example, a For loop counter is good for using the Let command.
for (let i=0;i<arr.length;i++) {...}
ES6 New Const is used to declare constants. Once declared, its value cannot be changed.
Const PI = 3.1415; Pi//3.1415PI = 3//TypeError: "PI" is read-only
Add again:
reserved word listabstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile
1. JavaScript has a dynamic type
2. Value (number)var x; At this point x is Undefinedvar x = 1; At this point x is the number var x = "Duoduo"
JavaScript does not differentiate between integral and floating-point types, there is only one numeric type.
var a = 12.34;var b = 20;var c = 123e5; 12300000var d = 123e-5; 0.00123
There is also a Nan, which indicates that it is not a number.
Common methods:
parseInt ("123") // returns 123
parseInt ("ABC") // returns NaN, the NaN attribute is a special value representing a non-numeric value. This attribute is used to indicate that a value is not a number.
parseFloat ("123.456") // returns 123.456
var a = "Hello"
var b = "world;
var c = a + b;
console.log (c); // get Helloworld
3. Strings (String)
var a = "Hello" var b = "World;var c = a + B; Console.log (c); Get HelloWorld
Common methods:
| Method | Description |
| . length | return length |
| . Trim () | Remove whitespace |
| . Trimleft () | Remove the left margin |
| . TrimRight () | Remove the blank on the right |
| . CharAt (N) | Returns the nth character |
| . concat (value, ...) | Stitching |
| . indexOf (substring, start) | Sub-sequence position |
| . substring (from, to) | Get sub-sequences by index |
| . Slice (start, end) | Slice |
| . toLowerCase () | Lowercase |
| . toUpperCase () | Capital |
| . Split (delimiter, limit) | Segmentation |
Splicing strings generally use "+"
the difference between slice and substringstring.slice (start, stop) and string.substring (start, stop): Similarities between the two: If start equals end, return an empty string If the stop parameter is omitted, it is taken to the end of the string If a parameter exceeds the length of the string, the parameter is replaced with the length of the string substirng () features: If start> stop, start and stop will be swapped If the argument is negative or not a number, it will be replaced by 0 silce () features: If start> stop will not swap the two If start is less than 0, the abs (start) character from the end of the string (including the character at the position) If stop is less than 0, the cut ends at the abs (stop) character from the end of the string
Add:
A template string was introduced in ES6. The template string, which is an enhanced version of the string, is identified with an inverse quotation mark ('). It can be used as a normal string, or it can be used to define a multiline string, or to embed a variable in a string.
// ordinary string
`This is a normal string! `
// multi-line text
`This is multi-line
Text`
// embed variable in string
var name = "duoduo", time = "today";
`Hello $ {name}, how are you $ {time}?`
Attention:
If you need to use anti-quotes in the template string, precede it with a backslash to escape.
Jshint Enable ES6 Syntax support:/* jshint Esversion:6 */
The difference between python,true and false is lowercase.
var a = True;var B = false;
"" (empty string), 0, null, undefined, Nan are all false.
Null means that the value of the variable is empty, and undefined means that only the variable is declared, but it has not been assigned a value.
All things in JavaScript are objects: strings, numbers, arrays, functions ... In addition, JavaScript allows custom objects to be customized.
JavaScript provides multiple built-in objects, such as String, Date, Array, and so on.
Objects are just special data types with properties and methods.
7. Arrays
The purpose of an array object is to use a separate variable name to store a series of values. Similar to the list in Python.
var a = [123, "ABC"];console.log (A[1]); Output "ABC"
Common methods:
| Method | Description |
| . length | The size of the array |
| . push (Ele) | Trailing append Element |
| . Pop () | Gets the trailing element |
| . Unshift (Ele) | Head Insert Element |
| . Shift () | Removing elements from the head |
| . Slice (start, end) | Slice |
| . Reverse () | Reverse |
| . Join (SEQ) | Concatenate array elements into a string |
| . concat (Val, ...) | Connection array |
| . Sort () | Sort |
Note about sort ():
If the method is called without parameters, the elements in the array are sorted alphabetically, more precisely, by the order in which the characters are encoded. To do this, you should first convert the elements of the array to a string, if necessary, for comparison.
If you want to sort by other criteria, you need to provide a comparison function that compares two values and returns a number that describes the relative order of the two values. The comparison function should have two parameters A and B with the following return values:
If a is less than B, a value that is less than 0 is returned if a should appear before B in the sorted array.
If a equals B, 0 is returned.
If a is greater than B, a value greater than 0 is returned.
Example:
function Sortnumber (A, b) {return A-b}var arr1 = [One, A, a, a, a, 44]arr1.sort (Sortnumber)
For iterating over the elements in an array, you can use the following method:
var a = [Ten, A, 40];for (Var i=0;i<a.length;i++) { console.log (i);}
Add:
ES6 introduces a new primitive data type (Symbol) that represents a unique value. It is the 7th data type of the JavaScript language.
typeof "ABC" //"string" typeof null //"Object" typeof true //"Boolean" typeof 123//"number"
typeof is a unary operator (like ++,--,! ,-the unary operator), is not a function, nor is it a statement.
Calling the TypeOf operator on a variable or value returns one of the following values:
2. Comparison Operators+ - * / % ++ --
> >= < <= = = = = = = =!==
Attention:
3. Logical Operators1 = = "1" //true1 = = = "1" //False
4. Assignment Operators&& | | !
Seven, Process Control1, If-else= += -= *= /=
var a = 10;if (a > 5) { Console.log ("Yes");} else { Console.log ("No");}
2, If-else If-else
var a = 10;if (a > 5) { Console.log ("a > 5");} else if (a < 5) { Console.log ("A < 5");} else { Console.log ("a = 5");}
3. Switch
var day = new Date (). GetDay (), switch (day) {case 0: console.log ("Sunday"); break; Case 1: console.log ("Monday"); Break;default: console.log ("...")}
The case clause in switch usually adds a break statement, or the program continues to execute the statements in the subsequent case.
for (Var i=0;i<10;i++) { console.log (i);}
5. While
var i = 0;while (i <) { console.log (i); i++;}
6, ternary operation
Viii. function 1, function definitionvar a = 1;var b = 2;var c = a > B? A:b
The functions in JavaScript are very similar to those in Python, but the way they are defined is somewhat different.
// ordinary function definition
function f1 () {
console.log ("Hello world!");
}
// function with parameters
function f2 (a, b) {
console.log (arguments); // built-in arguments object
console.log (arguments.length);
console.log (a, b);
}
// function with return value
function sum (a, b) {
return a + b;
}
sum (1, 2); // call function
// anonymous function
var sum = function (a, b) {
return a + b;
}
sum (1, 2);
// execute the function immediately
(function (a, b) {
return a + b;
}) (1, 2);
Add:
ES6 allows you to define functions using the arrow (= =).
var f = v = v;//equals var f = function (V) { return v;}
If the arrow functions do not require arguments or require multiple arguments, use parentheses to represent the parameter part:
var f = () = 5;//equals var f = function () {return 5};var sum = (NUM1, num2) = = Num1 + num2;//equals var sum = function (nu M1, num2) { return num1 + num2;}
2. The arguments parameter in the function
function Add (A, b) { console.log (a+b); Console.log (Arguments.length)}add (ON)
Output:
32
Attention:
A function can only return a value, and if you want to return more than one value, you can only return it in an array or object.
Local Variables :
A variable declared inside a JavaScript function (using VAR) is a local variable, so it can only be accessed inside the function (the scope of the variable is inside the function). As soon as the function is complete, the local variable is deleted.
Global variables:
Variables declared outside of a function are global variables, and all scripts and functions on a Web page can access it.
Variable life cycle:
The lifetime of JavaScript variables begins at the time they are declared.
Local variables are deleted after the function is run.
Global variables are deleted after the page is closed.
First, find the variable inside the function, find the outer function to find it, and find the outermost layer gradually.
A few examples:
1.
var city = "Beijing", function f () { var city = "Shanghai"; function inner () { var city = "ShenZhen"; Console.log (city); } Inner ();} f (); What is the output?
2.
var city = "Beijing", function Bar () { console.log (city);} function f () { var city = "Shanghai"; return Bar;} var ret = f (); ret (); What is the print result?
3. Closures
var city = "Beijing", function f () { var city = "Shanghai"; function inner () { console.log (city); } return inner;} var ret = f (); ret ();
Ix. Lexical analysis (try to understand)
In JavaScript, the lexical analysis is performed at the moment the function is called.
The process of lexical analysis:
When a function is called, an active object is formed first: Avtive object (AO), and analyzes the following 3 aspects:
1: function parameter, if any, assigns this parameter to AO, and the value is undefined. If not, no action is made.
2: Function local variable, if there is a value with the same name on the AO, no action is done. If not, the variable is assigned to AO, and the value is undefined.
3: function declaration, if there is on the AO, the object on the AO will be overwritten. If not, no action is made.
Inside the function, either use a parameter or use a local variable to find it on the AO.
See two examples:
var = 18;function foo () { console.log (age); var age =; Console.log (age);} Foo (); Q: What is the result of executing foo ()?
The second question:
var = 18;function foo () { console.log (age); var age =; Console.log (age); Function age () { console.log ("hehe"); } Console.log (age);} Foo (); What is the result after execution?
Lexical analysis process:
1. Analyze the parameters. There is a parameter to form an AO.age = undefine;
2. Analyze the variable declaration. There is a var age, and it is found that there is already an AO.age on the AO, so no processing is done.
3. Analyze the function declaration. If there is a function age () {...} declaration, the original age will be overwritten with AO.age = function () {...};
In the end, the attribute on the AO has only one age, and the value is a function declaration
Implementation process:
Note: all values are searched from the AO object during execution
1. When the first console.log (age) is executed, AO.age at this time is a function, so the first output is a function
2. This sentence var age = 22; is the value assigned to the attribute of AO.age, at this time AO.age = 22, so in the second output is 2
3.Similarly, the third output is still 22, because there is no statement that changes the age value in the middle.
Answer resolutionX. Built-in objects and methods
All things in JavaScript are objects: strings, numbers, arrays, dates, and so on. In JavaScript, objects are data that owns properties and methods.
We have learned about the basic data types, the number object in JavaScript, the string object, the array object, and so on.
Note the difference between var S1 = "abc" and var s2 = new String ("abc"): TypeOf S1--string and typeof S2--Object
Custom Objects
JavaScript objects (object) are essentially collections of key-value pairs (hash structures), but only strings can be used as keys.
var a = {' name ': ' Duoduo ', ' Age ': 18};console.log (A.name); Console.log (a["age"]);
Iterate through the contents of the object:
var a = {' name ': ' Duoduo ', ' Age ': 18};for (var i in a) { console.log (i, A[i]);}
To create an object:
var person=new Object (); Create a Person object person.name= "Duoduo"; The Name property of the Person object person.age=18; The age property of the person object
Attention:
The map data structure is provided in the ES6. It is similar to an object and a collection of key-value pairs, but the scope of the key is not limited to strings, and various types of values (including objects) can be used as keys.
That is, the object structure provides a "string-value" correspondence, the map structure provides "value-value" correspondence, is a more perfect hash structure implementation.
var m = new Map () var o = {p: "Hello World"}m.set (o, "content"}m.get (o) //"Content" M.has (o) //Truem.delete (o)//Truem.has (O)//False
Map
Extended:
// parent class constructor
var Car = function (loc) {
this.loc = loc;
};
// parent method
Car.prototype.move = function () {
this.loc ++;
};
// subclass constructor
var Van = function (loc) {
Car.call (this, loc);
};
// inherit the method of the parent class
Van.prototype = Object.create (Car.prototype);
// fix constructor
Van.prototype.constructor = Van;
// extension method
Van.prototype.grab = function () {
/ * ... * /
};
JavaScript Object-oriented inheritance2. Date Object
Create a Date Object
// Method 1: Do not specify parameters
var d1 = new Date ();
console.log (d1.toLocaleString ());
// Method 2: The parameter is a date string
var d2 = new Date ("2004/3/20 11:12");
console.log (d2.toLocaleString ());
var d3 = new Date ("04/03/20 11:12");
console.log (d3.toLocaleString ());
// Method 3: The parameters are milliseconds
var d3 = new Date (5000);
console.log (d3.toLocaleString ());
console.log (d3.toUTCString ());
// Method 4: The parameters are year, month, day, hour, minute, second, and millisecond.
var d4 = new Date (2004,2,20,11,12,0,300);
console.log (d4.toLocaleString ()); // milliseconds are not displayed directly
Method of the Date object:
var d = new Date (); // getDate () get date // getDay () Get weekday // getMonth () Get the month (0-11) // getFullYear () get full year // getYear () get year // getHours () get hours // getMinutes () Get minutes // getSeconds () get seconds // getMilliseconds () Get milliseconds // getTime () returns the accumulated milliseconds (from 1970/1/1 midnight)
Detailed Date object method: Point Me
var str1 = ‘{" name ":" duoduo "," age ": 18}’;
var obj1 = {"name": "duoduo", "age": 18};
// JSON string into object
var obj = JSON.parse (str1);
// Object is converted to JSON string
var str = JSON.stringify (obj1);
4. RegExp Object
// RegExp object
// Create regular object mode 1
// parameter 1 regular expression (no spaces)
// Parameter 2 Match mode: g (global match; find all matches instead of stopping after the first match) and i (ignore case)
// The user name can only be English letters, numbers, and _, and the first letter must be English letters. The length must be at least 6 digits and the longest cannot exceed 12 digits.
// Create RegExp object (do not add spaces after the comma)
var reg1 = new RegExp ("^ [a-zA-Z] [a-zA-Z0-9 _] {5,11} $");
// match the response string
var s1 = "bc123";
// The test method of the RegExp object tests whether a string conforms to the corresponding regular rule, and the return value is true or false.
reg1.test (s1); // true
// creation method 2
// / Fill in the regular expression / matching pattern (do not add spaces after the comma)
var reg2 = / ^ [a-zA-Z] [a-zA-Z0-9 _] {5,11} $ /;
reg2.test (s1); // true
// 4 methods of String object and regular combination
var s2 = "hello world";
s2.match (/ o / g); // ["o", "o"] find regular content in the string
s2.search (/ h / g); // 0 find the content position in the string that matches the regular expression
s2.split (/ o / g); // ["hell", "w", "rld"] splits a string according to a regular expression
s2.replace (/ o / g, "s"); // "hells wsrld" replaces the string according to the regular
// About matching patterns: simple examples of g and i
var s1 = "name: duoduo age: 18";
s1.replace (/ a /, "hahaha"); // "nhahaha me: duoduo age: 18"
s1.replace (/ a / g, "hahaha"); // "nhahaha me: duoduo hahaha ge: 18" global match
s1.replace (/ a / gi, "hahaha"); // "nhahaha me: duoduo hahaha ge: 18" is not case sensitive
// Note 1:
// If regExpObject has a global flag g, the test () function does not search from the beginning of the string, but starts from the index specified by the property regExpObject.lastIndex.
// The attribute value defaults to 0, so the first time is still looking from the beginning of the string.
// When a match is found, the test () function will change the value of regExpObject.lastIndex to the next index position of the last character of this match in the string.
// When the test () function is executed again, it will search from this index position to find the next match.
// Therefore, after we perform a match using the test () function, if we want to use the test () function again to find from scratch, we need to manually reset the value of regExpObject.lastIndex to 0.
// If the test () function can no longer find matching text, the function will automatically reset the regExpObject.lastIndex property to 0.
var reg3 = / foo / g;
// now regex.lastIndex = 0
reg3.test (‘foo’); // returns true
// now regex.lastIndex = 3
reg3.test (‘xxxfoo’); // still returns true
// So when we use the test () method to check whether a string exactly matches, we must add ^ and $ symbols.
// Note 2 (speak out you may not believe the series):
// When we call the RegExpObj.test () method without parameters, it is equivalent to executing RegExpObj.test ("undefined"), and /undefined/.test () returns true by default.
var reg4 = / ^ undefined $ /;
reg4.test (); // returns true
reg4.test (undefined); // returns true
reg4.test ("undefined"); // returns true RegExp Related
Extended Reading
Mathabs (x) returns the absolute value of a number. exp (x) returns the exponent of e. floor (x) rounds down the logarithm. log (x) returns the natural logarithm of a number (base e). max (x, y) returns the highest value of x and y. min (x, y) returns the lowest value of x and y. pow (x, y) returns x to the power of y. random () returns a random number between 0 and 1. round (x) rounds the number to the nearest whole number. sin (x) returns the sine of a number. sqrt (x) returns the square root of a number. tan (x) returns the tangent of the angle.
Basic overview and syntax for front-end Foundation-javascript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
