ECMAScript

Js browser history

1. Web development

Mosaic was the first widely used web browser in the history of the Internet to display images. It came out in 1993. April 1994, Mark. Anderson and Jim Clark, the founder of Silicon Graphics (SGI), set up Mosaic Communication Corporation in California. When Mosaic was founded, because the University of Illinois owned the Mosaic trademark and had transferred the technology to Spy Glass, the team had to completely rewrite the browser code and rename it Netscape Navigator. In November 1994, the company changed its name to “Netscape Communication Corporation”, which has been used ever since. Earlier versions of Microsoft’s Internet Explorer and Mozilla Firefox were based on Mosaic. Microsoft later bought Technology from Spy Glass to develop Internet Explorer, and Mozilla Firefox is a derivative of netscape Communications’ open-source version.

2. The history of js

JavaScript first appeared in 1996 as part of the Netscape Navigator browser. It was originally designed to improve the user experience of the Web. JavaScript was originally named LiveScript, but later changed to JavaScript for marketing purposes in collaboration with Sun. Sun was later acquired by Oracle, which owns the JavaScript rights.

3. Browser composition

1. Shell part 2. Kernel part 1. Rendering engine (syntax rules and rendering) 2. In 2008, Google released the latest browser Chrome, it is the use of optimized javascript engine, engine code V8, because it can directly transform JS code into mechanical code to execute, and is known for its fast speed. After Firefox also launched a powerful JS engine Firefox3.5 TraceMonkey (for frequently executed code do path optimization) Firefox4.0 JeagerMonkey 3. Other modules

4. Pretend bility of js

1. Interpreted languages — (do not need to be compiled into files like compiled languages) cross-platform

The advantages and disadvantages

Compilation: Fast — developing game engines, operating systems; It cannot be cross-platform and has poor portability

Explanatory: slightly slower; cross-platform

2. Single thread

Asynchronous download

ECMA notation – To gain a technological edge, Microsoft has launched JScript and CEnvi has launched ScriptEase, which runs in the same browser as JavaScript. JavaScript is also called ECMAScript because it is compliant with the ECMA standard for uniform specification.

5. Js execution queue

Like to eat

How can ECMAScript, DOM, and BOM be introduced into JS? Page embedded script tag external introduction in line with the Web standard (one of the W3C standards) structure, style, behavior separation, usually adopt external introduction at the same time external introduction, page embedded external good, internal failure

Js basic syntax

1. The variable

Variable declaration declaration, assignment decomposition single VAR declaration method

Naming rules

1. The variable name must start with a letter, underscore (_), or underscore (_). 2. The variable name can contain letters, underscores (_), and starts with 2. The variable name can contain letters, hyphens (,), and digits 3. Do not use system keywords, reserved words as variable names (keywords, reserved words)

Development specification:

<script>
    var a = 10,
        b = 20,
        d;
    document.write(a,b,c,d);
</script>
Copy the code

2. Value types

Original value (immutable; The stack data)

type	instructions
Number	Var a = 123.12
String	Var b = “ABC”
Boolean	var b = false; var a = ture; The output is itself
Undefined	var b = undefined; The output is what it is: undefined
Null	var b = null; Empty placeholder

The difference between the two data types:

Original value: stack goes first and comes last

var a = 10;
var b = a;
a = 20;
document.write(b);
Copy the code

Stack memory is copied from stack memory

Reference value (heap data)

array, object, function

Date,RegExp

See the video for the basic principle of stack memory and heap memory

JS is a dynamic language, interpreting a line, executing a line

Js basic statement

End the statement with a semicolon (;).

Do not add a semicolon

0. function test(){}
1. for(){}
2. if(){}

Js different file variables can access each other

<script>
    var a = 10;
</script>
<script>
    document.write(a);
</script>
Copy the code

Js syntax errors cause subsequent code terminations, but do not affect other JS code blocks

<script>
    var a = 10;
    document.write(c);
    //20
</script>
<script>
    var b = 20;
    document.write(b);
</script>
Copy the code

Several kinds of errors

0. Low-level errors (parsing errors) do not execute a line

1. Logical error

   First scan the global, no low-level errors, explain a line, execute a line

Write in a standard format, with Spaces on both sides of “= + / -“

1. Js operator

Operational operator

“+”

1. Mathematical operations and string links

2. Any data type plus a string equals a string

var a = "a" + 1; document .write(a); a1 var a = "a" + 1 + 1; document .write(a); Var a = "a" + 1; document .write(a); ature1 var a = 0 / 0; NAN -- not a number var a = 1/0; InfinityCopy the code

“, “*”, “/”, “%”, “=”, “()”

Priority = weakest, () priority is high

“++”, “-“, “+=”, “-=”, “/=”, “*=”, “%=”

a ++; Execute statement first, then ++

var a = 10; document .write(a ++); Var a = 10; var a = 10; document .write(a ++); document .write(a); Var a = 10; var b = ++a - 1 + a++; document .write(b + "" + a); //11 (a becomes 11) -1+11 b:21 a:12 (a last ++)Copy the code

Comparison operator

“>”, “<“, “==”, “>=”, “<=”, “! = “The comparison result is Boolean

Logical operator

“&”, “| |”, “! “The result of the operation is the real value

2.false

Undefined, null, NaN, “” (empty string), 0, false

3. Conditional statements

Boolean value

1. Everything can be sized (strings compare ASCII order)

2. As long as left and right are the same, it is the same

Special case:

var a =NAN == NAN;
document .write(a);
//false
Copy the code

3. The logical operators: && | |!

&& :

var a = 1 && 2;
document .write(a);      2
Copy the code

Two expressions:

(false: undefined, null, NaN, “”, 0, false); (false: undefined, null, NaN,” “, 0, false)

var a = 1 && 2; //1 is true, so return 2 var a = 0 &&2; // Return the original value of the first expression directly, so return 0Copy the code

Multiple expressions:

Look at the first expression, if true, look at the second, true, look at the third, if false, return false

&& : If the front is zero, don’t look; Really, the next sentence.

Developing applications (short circuit statements)

2>1&& document. write(" 新 长 大 的 新 长 ") var data =... ; Data && executes a statement that uses data. If data is null, the following statement cannot be executedCopy the code

&

Var num = 1 &3; So that’s 01 and 11, that’s 01

||

If the first one is true, return true original value, if false, return second

4. Write compatible applications

Div. Onclick = function(e){var event = e; } div. Onclick = function(e){var event = e; window. event; } compatible: div. The onclick = function (e) {/ / taking out the value of e var event = e | | window. The event; }Copy the code

If, if else if

demo

var score = parseInt(window .prompt('input'));
if(score > 90 && score <= 100){
    document .write('alibaba');
}
if(score > 80 && score <= 90){
    document .write('tencent');
}
Copy the code

To optimize the

var score = parseInt(window .prompt('input'));
if(score > 90 && score <= 100){
    document .write('alibaba');
}else if(score > 80 && score <= 90){
    document .write('tencent');
}else{
}
Copy the code

Equivalence relation

if(1 > 2){ document .write('a'); } and 1 > 2 && document. write('a');Copy the code

6.for

for(var i = 0; i < 10; i++) {
    document .write('a');
}
Copy the code

To optimize the

var i = 1;
var count = 0;
for(; i; ){
    document.write('a');
    count ++;
    if(count == 10) {
        i = 0;
    }
}
Copy the code

Development of thinking

var i = 100; for(; i --; ) { document.write(i + " "); }Copy the code

7.while, do while

Multiples of 7 and 7: var I = 0; while(i < 100){ if(i % 7 == 0 || i % 10 ==7){ document.write(i + ” “); } i++; }

## 8.switch case

Copy the code

var n = 3; switch(n) {    case 1:        console.log(‘a’);    case 2:        console.log(‘b’);    case 3:        console.log(‘c’); }

Copy the code

var n = 3; switch(n){    case “a”:        console.log(‘a’);    case “b”:        console.log(‘b’);    case ture:        console.log(‘c’); }

DEMO

Copy the code

var data = window.prompt(‘input’); switch(data){    case “monday”:        console.log(‘working’);        break;    case “tuesday”:        console.log(‘working’);        break;    case “wednesday”:        console.log(‘working’);        break;    case “thursday”:        console.log(‘working’);        break;    case “firday”:        console.log(‘working’);        break;    case “saturday”:        console.log(‘relaxing’);        break;    case “sunday”:        console.log(‘relaxing’);        break; }

To optimize theCopy the code

var data = window.prompt(‘input’); switch(data){    case “monday”:    case “tuesday”:    case “wednesday”:    case “thursday”:    case “firday”:        console.log(‘working’);        break;    case “saturday”:        console.log(‘relaxing’);        break;    case “sunday”:        console.log(‘relaxing’);        break; }

## 9.break

Copy the code

var i = 0; while(1){ i++; console.log(i); if(i > 100){ break; }}

## 10. Continue > Abort this loop and proceed to the next loopCopy the code

for(var i = 0; i < 100; i++){ if(i % 7 == 0 || i % 10 == 7){ }else{ console.log(i); }}

Copy the code

for(var i = 0; i < 100; i ++){    if(i % 7 == 0 || i % 10 == 7){        continue;   }    console.log(i); }

# 1. ArrayCopy the code

Var arr = [1, 2, 3, 4, “ABC”, undefined];

Array is later assigned to change the demo to fetch each bitCopy the code

Var arr = [1,2,3,45,5,7, “acv” listed, undefined]; for(var i = 0; i < arr.length; i++) { console.log(arr[i]); }

## 2Copy the code

var deng = {    lastName : “Deng”,    age : 40,    sex : undefined,    Wife : “xaioliu”,    father : “dengge”,    son : “dengxiaobao”,    handsome : false } console.log(deng.lastName); deng.lastName = “123”; console.log(deng.lastName);

Typeof six types of data: **number, string, Boolean, undefined, object, function false** undefined, null, NaN, "", 0, false** type conversion demoCopy the code

var num = 1 * “1”; console.log(typeof(num) + “:” + num); Var num = “2” * “1”; console.log(typeof(num) + “:” + num); // Number type 2

Typeof: Typeof (num) or typeof numCopy the code

var num = 123; console.log(typeof(num)); // number var num = “true”; // string true console.log(typeof(num)); // string

Who returns object reference values: object, array, NULL (legacy) Show type conversion > Number(mix)Copy the code

var num = Number(‘123’); console.log(typeof(num) + ” : ” + num); / / number: 123 / / Null: 0 / / Underfined: NAN / / “a” : NAN / / False: 0 / / “123”, 123

> < p style = "margin-bottom: 14px; margin-bottom: 14px; margin-bottom: 14pxCopy the code

“123.9” :123 TURE :NAN Null:NAN Underpay :NAN 123.9:123 123ABC :123

The basalCopy the code

var dmeo = “10”; var num = parseInt(demo, 16); Console. log(typeof(num) + “:” + num); var demo = “10”; var num = parseInt(demo, 16); console.log(typeof(num) + “:” + num);

Radix ∈ (2-36) > parseFloat (string) converts floating-point (normal number) parameters can only be string 100.2:100.2 100.2.2:100.2 abs 100.2:100.2 > the toString (radix) into a stringCopy the code

var demo = 123; var num = demo.toString(); console.log(typeof(num) + “:” + num); //string:123

Radix: base, demo conversion into baseCopy the code

var demo = 123; var num = demo.toString(); console.log(typeof(num) + “:” + num); //string : 123

Special points: I am therefore underpaid and NULL cannot be converted into strings using > String(mix) and number StringCopy the code

underfined: underfined //123:123 //ture:ture

> Boolean() true: undefined, null, NaN, "", 0, falseCopy the code

// parseInt       toString // 2       10     16 var num = 10101010; var test = parseInt(num, 2); console.log(test.toString(16));

## 2. Implicit conversion > isNaN () -- call numberCopy the code

//console.log(isNAN(NAN)); I am 25; therefore, I am therefore 25; therefore, I am therefore 25; therefore, I am therefore 25; therefore, I am therefore 25; therefore, I am therefore 25; / / Number (‘ ABC ‘) — — — — > NAN process

> ++/ -- +/- (unary plus or minus) -- call numberCopy the code

// var a = “123”; // a++; Var a = “ABC “; // a ++; // // NAN But typeof is number

> + on either side of a string, call string to a stringCopy the code

// var a = “a” + 1; // console.log(a + ” : ” + typeof(a));

> * / % - the call number > && | |! > < > <= >=Copy the code

// var a = “3” > 2; // console.log(a + ” : ” + typeof(a)); // var a = “3” > “2”; // console.log(a + ” : ” + typeof(a)); // var a = 1 == “1”; // console.log(a + ” : ” + typeof(a)); // // undefined== null:true // undefined>0 // false // undefined<0 // false // undefined==0 // False // null // NAN == NAN: false;

= =! Type conversion does not occur ===! Console. log(typeof(a))Copy the code

alert(typeof(a)); alert(typeof(undefined)); alert(typeof(NAN)); alert(typeof(null)); var a = “123abc”; alert(typeof(+a)); alert(typeof(!! a)); alert(typeof(a+””)); alert(1 == “1”); alert(NAN == NAN); alert(typeof(NAN == undefined)); alert(“11″+11); alert(1===”1”); alert(parentInt(“13abx”)); Var num = 123123.22324; alert(num.toFixed(3)); alert(typeof(typeof(a)));

Function form - function name - parameter argument - return value ## 1. Define ** method 1: function declaration **Copy the code

function test(){}

** Method 2: function expression ** function definition method > 1. Name function expressionCopy the code

var test = function abc(){    document.write(‘a’); }

> 2. Anonymous function expressions (common) -- function expressionsCopy the code

var demo = function (){    document.write(‘b’); }

> < span style = "box-sizing: border-box; color: RGB (74, 74, 74); To the right of the equals sign is the expression, which ignores the ABC nameCopy the code

test.name//abc demo.name//demo test.name//test

## 2. Function parametersCopy the code

Function text(a,b){var a,b; document.write(a+b); } the text (1, 2);

> Formal parameters -- parameterCopy the code

function sum(a,b){    var c = a + b;    document.write(c); }

> Actual parameters -- argumentsCopy the code

The sum (1, 2);

> < p style = "max-width: 100%; clear: both; min-height: 1emCopy the code

function sum(a){ document.write(a); } the sum (11, 2, 3)

"> < p style =" max-width: 100%; clear: both; min-height: 1emCopy the code

function sum(a,b,c,d){ document.write(a); document.write(d); //undefined} function sum(a){//arguments–[11,2,3]; Argument list console.log(arguments); console.log(arguments.length); }

Small applicationCopy the code

function sum(a){ for(var i = 0; i < arguments.length; I ++){console.log(arguments[I])}} sum(11,2,3);

For parameterCopy the code

function sum(a,b,c,d){ console.log(sum.length); } sum(11,2,3);

Mapping rule (parameter = argument mapping) : But two thingsCopy the code

function sum(a,b){ a = 2; console.log(arguments[0]); } the sum (1, 2); Function sum(a,b){a = 2; arguments[0] = 3; console.log(a); } the sum (1, 2); / / 3 became a

Parameters are not equal and do not mapCopy the code

Function sum(a,b){// argument[1] = 2; console.log(arguments[1]); // return undefined} sum(1);

## 3. Return 1Copy the code

function sum(a,b){ console.log(‘a’); return; // Terminate console.log(‘b’) here; } sum(1);

2. The return valueCopy the code

function sum(){ return 123; console.log(‘a’); } sum(1);} sum(1); var num = sum();

Copy the code

function myNumber(target){    return +target; } var num = myNumber(‘123’); console.log(typeof(num) + ” ” + num);

Copy the code