Basic overview and syntax for front-end Foundation-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

• 8. JavaScript functions
• 9. JavaScript Lexical analysis
• 10. JavaScript built-in objects and methods

I. JavaScript Overview 1, ECMAScript and JavaScript relationships

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.

2, the history of ECMAScript

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:

• Core (ECMAScript)
• Document Object Model (DOM) Documents object models (consolidated js,css,html)
• Browser object models (BOM) Broswer object Model (integrated JS and browser)

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.

second, JavaScript introduction method1. Write code in script tag

<script>  //write your JS code here </script>

2. Introduction of additional JS files

<script src= "Myscript.js" ></script>

c. javascript Language Specification1. Comments

This is a single-line comment/* This is
Multi-line Comment */

2, Terminator

The statements in JavaScript are terminated with a semicolon (;).

Iv. JavaScript Language Basics1. Variable Declaration

1. The variable name of JavaScript can be composed of _, number, letter, $, and cannot begin with a number.
2. declaring variables using var variable names; The format to declare

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:

 
abstract
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

reserved word list

V. JavaScript data types

1. JavaScript has a dynamic type

var x;  At this point x is Undefinedvar x = 1;  At this point x is the number var x = "Duoduo"  

2. Value (number)

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 "+"

string.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 

the difference between slice and substring

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 */

4, Boolean value (Boolean)

The difference between python,true and false is lowercase.

var a = True;var B = false;

"" (empty string), 0, null, undefined, Nan are all false.

5, null and undefined

• Null indicates that the value is empty and is generally used when a variable needs to be specified or emptied, such as name=null;
• Undefined indicates that when a variable is declared but not initialized, the default value of the variable is undefined. There is also the undefined that is returned when the function has no definite return value.

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.

6. Objects (object)

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.

8. Type Inquiry

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:

• Undefined-If the variable is of type undefined
• Boolean-If the variable is of type Boolean
• Number-If the variable is of type number
• String-If the variable is of type string
• Object-If the variable is a reference type or a Null type

VI, operator 1, arithmetic operators

+ - * / % ++ --

2. Comparison Operators

> >= < <= = = = = = = =!==

Attention:

1 = = "1"  //true1 = = = "1"  //False

3. Logical Operators

&& | | !

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.

4. For

for (Var i=0;i<10;i++) {  console.log (i);}

5. While

var i = 0;while (i <) {  console.log (i);  i++;}

6, ternary operation

var a = 1;var b = 2;var c = a > B? A:b

Viii. function 1, function definition

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.

3. Global variables and local variables for functions

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.

4. Scope

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

3. JSON object

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

5. Math Object

abs (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. 

Math

Basic overview and syntax for front-end Foundation-javascript