30. Front-end JavaScript's ECMA

1.JavaScript Fundamentals 2. Syntax rules 3 common built-in objects 4 functions 5 pseudo-Array 6. Exception Handling 1.1 Web front end is divided into three layers

• HTML: describing the structure of a page from a semantic perspective

• CSS: from an aesthetic perspective, describe the style (beautify the page)

• JavaScript: describing behavior from an interactive perspective (improving the user experience)

1.2 Features

The language of the weakly variable type, the variable only needs to declare with VAR

With interface effect, which is in the foreground language (running on the user's Terminal page, not on the server), it cannot manipulate the database

1.3 Composition

　　ECMAScript: JavaScript syntax standard. Include variables, expressions, operators, functions, if statements, etc.

　　DOM: An API for manipulating page elements, such as moving a box, changing color, carousel, etc.

　　BOM: an API for manipulating browser parts, such as letting the browser scroll automatically

2. Grammar rules

A semicolon must be appended at the end of each statement (for future compressed files to function properly)

All symbols must be in English

Comments (single line//or multiple lines/* */)

2.1 Introduction Method

1 Writing directly<Script>Alert ('Hello Yuan')    </Script>2 Importing Files<Scriptsrc= "Hello.js"></Script>

2.2JS statements

variant: Use the var keyword, a row can declare multiple variables, and can be of different types

var name= "Yuan", age=20, job= "lecturer";

Alert ("") Page Popup alert box

Console.log ("") Console output

Prompt () specifically pops up a dialog box that allows the user to enter

Cases:

<! DOCTYPE html>//alert Direct use without variable        alert (" Below I want to pop up a dialog box!! ")        ///  Remember, the prompt statement, regardless of what the user enters, is a string. Here there must be a variable to receive the value of the user input        var a = prompt ("Are you stupid?") ");        Console.log (a);     </script>
2.2.1 Variable type:
You can use typeof () to view variable types
1. Numeric type (number)
Exception:
var a1 = 5/0;console.log (typeof//Infinity infinitely large. Number Type
2. String type
Note: strings can also be added, if there is a string type (at least one) in the symbol, the others are all numbers, then the concatenation of the output is also a string. 
and numeric strings can also be calculated directly and numerically (string numeric + numeric = numeric)
3. Boolean type (Boolean), any data type can be converted to Boolean type
4. Empty type (NULL)
5. Undefined type (underfined)
2.2.2 Conversion of variable types:
parseint (), you can convert a string to a number
Characteristics:
It also has the filter function, only retains the first digit of the string, the following Chinese automatically cut off
Also comes with truncation decimal function, direct rounding, not rounding
Console.log (parseint ("528today")); // Background Output 528
string (), ToString (), coercion type conversion2.2.3 operator
Consistent with the Python syntax, slightly
Exception:
The string can not be subtraction operation, only stitching, otherwise will be error (NaN), that is, not a number, remember, this is also a number type
2.2.4 Process Control
If, If-else, If-else if-else
if (true) {   // execute action }elseif(true) {     // meet condition execution             } Else if (true) {   // satisfies the condition        execution }else{     meet condition execution }
Logic and Operations &&
Logic or Operation | |
Switch uses (it is clearer than the else if statement structure, making the program more readable)
// each case condition must be lost after the break jumps out, if not written, until you encounter the following break will stop Switch (expression) {    case value 1: statement 1;  break;      Case value 2: statement 2;  Break ;      Case Value 3: statement 3;  Break ;     default : statement 4;}
Cases:
<script type= "Text/javascript" >varNumber = 10; Switch(number) { Case8: Console.log ("Very small.")             Break;  Case10: Console.log ("6666")             Break;  Case13: Console.log ("Great!")             Break; default: Console.log (Exit)        }    </script>
View Code
For loop
 for (var i = ten; I >= 0; i--) {            console.log (i)        }
Exercise: Calculate the and of all numbers between 1-100
<script type= "Text/javascript" >        var sum = 0;          for (var i = 1; I <=; i++)            {+ = i        }        console.log (sum)    </script>
View Code
Output right triangle in the browser (think about how to implement the 9*9 multiplication table in Python)
 for (var i = 1;i<6;i++) {            for (var j = 1;j <=i;j++) {                document.write ("*")            }        document.write (' <br> ')        }
View Code3 common built-in objects
Array of arrays (in Python is actually a list)
How to create:
var colors = [' red ', ' color ', ' yellow '];
Common methods:
Brief introduction:
Join () joins the elements in the array using the specified string, which forms a new string
var score = [1,2,3,5,6];     var str = score.join (' | ') );    Console.log (str); // 1|2|3|5|6
Determine if an array: IsArray ()
Strings string
Common methods
Replace (b) replaces string A with string b
var a = ' 1234567755 '; var newstr = A.replace ("4567", "* * *"); Console.log (NEWSTR); // 123****755
Date Day Object
Common methods
Cases:
// Create Date Object var mydate=New  Date ();         // get a day in one months Console.log (Mydate.getdate ()); // returns the local time Console.log (MyDate (). tolocalstring ()); // 2018/5/27 pm 10:36:23
Math Built-in objects
Common methods
Example: Finding the maximum and minimum values of two numbers
Console.log (Math.max (2,5)); // 5Console.log (math.min (2,5)); // 2
4 functions
Function: Simplified programming, modular
　　Note: JS's function load execution is different from Python, it is the whole load will not be executed, so the execution function is placed above or below the function declaration can be
Cases
    SUM (3,4);    sum ("Hello", "World");     function sum (b) {        Console.log (a+b);    }     // 7    // HelloWorld
function return value
       Console.log (SUM (3, 4));         // functions: Summing        function sum (A, b) {            return a + b;        }
5 pseudo-Array (arguments)
Represents an argument and is used only in a function
5.1 Returns the number of function arguments: arguments.length
Cases
    FN (2,4);    FN (2,4,6);    FN (2,4,6,8);     function fn (a,b,c) {        console.log (arguments);           Console.log (fn.length);          // get the number        of formal parameters Console.log (arguments.length);  // get the number        of arguments Console.log ("----------------");    }
Results:
Empty the array:
     var array = [1,2,3,4,5,6];    Array.splice (0);      // Method 1: Delete all items    in the array Array.Length = 0;     // the 1:length property can be assigned a value, and length is read-only in other languages    array = [];           // Way 3: Recommended
6. Exception Handling
Try {    // This piece of code runs from top to bottom, where any one of the statements throws an exception the code block ends running }catch  (e) {     // If an exception is thrown in a try code block, the code in the catch code block is executed.     //e is a local variable that points to the error object or other thrown object }finally  {      // the finally code block is always executed, regardless of whether the code in the try is thrown abnormally (even if there is a return statement in the try code block). }
Actively throws exception throw error (' xxxx ')
30. Front-end JavaScript's ECMA