Comb the basic syntax of JS

Web Three-tier Architecture

Structure Layer: HTML describes the structure of a page from a semantic perspective

Style layer: CSS  from an aesthetic perspective, beautify the page

Behavioral Layers: JavaScript improves user experience from an interactive perspective

Js: used to make the Web page interactive effect, improve the user experienceSyntax Overviewone, JS introduced 3 kinds of ways:

1. Inline introduction, but not recommended

2. via ' <script async= ' async ' > ' tag introduced, can be placed inside the head, in order to reduce load time, usually placed in the body last

3. It is recommended that the link be introduced

properties of the <script> tag:

Type= "text/javascript" can be omitted

Sync: synchronize, A person in order to do more things

Async: asynchronous, Multi-person ordered multiple things

async= ' async ' and defer= ' defer ' are all asynchronous downloads, distinguished By:

Async= ' Async ' is immediately asynchronous download external js, does not affect the other operation of the page, JS download completed immediately execution;

Defer= ' defer ' is performed after the Js,css entire document has been downloaded and only external scripts can be used

two or five types of data:1. String type ("")note: quotation marks can be either single quotation marks or double quotes--the suggested single quotation mark

• a, If there is a single quotation mark in the string, use a quotation mark

• b, If there is a single double quote in the string content, use the translator, which is used before the quotation marks. Common translation characters are: \ ", newline \ n, indent \ t

2. Numeric type number: numbers that are not enclosed in quotation marks: integers, negative numbers, decimals ... (123), which represents the amount of a data3. Boolean value type Boolean

Boolean format stored in Memory: Boolean converts ture to 1,false when stored, turns into 0

var a =ture;  

var B = "ture";

var c = A = = b;

Console.log (c); Output false

4.undefined: declaring a variable without assigning a value5, null: Empty Objectspecial: NaN (not a number): one of number.

  Judge Nan:isnan Translation: is a non-numeric: if it is a digital ture

    var a = "abc";

    var B = 123;

    Console.log (a-b);

    console.log (isNaN (a));//output ture

  Function: an abnormal state used to represent a number (typically occurs when an error occurs in the calculation).

?

Special: special to oneself is not equal to oneself

  var a =nan;  

  var b =nan;

  var c = A = = = b;

tip: determine the type of Data: typeof (variable/direct) can omit parentheses: typeof Variable/direct volumeiii. variables: memory used to store data

Memory: running memory (computer can save data while running, empty after power Off)  

Memory Bar: Increase running memory

Hdd: size of storage 4G 32G  (power off will not be emptied)

How to Output:

• Alert (): pop up a message box-position cannot be changed, cannot be dragged, cannot be closed. In fact, the browser process has been paused-only in the task Manager to Close.

• Console.log () Output content to the console : Debugging Applications for code : recruiting

• Prompt () input box: Use your browser to output what you have entered

A. Declaring a variable: creating a variable var a

  Var: declaring a variable's keyword  A: variable name

B. Assign a value to a variable: a= "123" = Assignment Operator. Function: the right side of the equal sign equals the variable to the left

  var B = "456+123"

  Console.log (a);  

  Console.log (b)

  Console.log (a+b)

c. Naming rules for variable names:

1) the variable must start with a letter

Class,id naming conventions: can only be composed of English letters, numbers, underscores, and connectors, and numbers cannot be placed at the beginning

If the name is preceded by an underscore, then it is also possible to follow the numbers directly; Class,id can not

2) Name the variable, you cannot use keywords in javascript and reserved word keywords : Reserved words that have been used within JavaScript : They have not been used within JavaScript yet, but may someday be used (spare tires).

3) case-sensitive

D. The type of the variable is determined by the assignment of the Variable.

Console.log (typeof a);  --console Display String

Console.log (typeof b);  --console Display Numbe

Four. operator (operator):1. shorthand for operators:

  var a;

  A = 10;

Equivalent to var a = 10;

2. self-increment decrement operator: b++;//a+=1;a=a+1

var a = 2;

var B = 3;

var c = a++ + b++;

  //a++:a = a+1;

  //add: First operation, plus 1

  //var C = a+b;a=a+1;b=b+1;

  var d = ++a + ++b;

  Console.log (a);

  Console.log (b);

  Console.log (c); Output 5

  Console.log (d); Output 7

3. Logical Operators:

priority:! non-  >  && and > | | Or  

#&& Operator: The Boolean value of the first operand, if this boolean value is true, then the final return value is the second operand, otherwise the output of the first|| Operator: the Boolean value of the first operand, if the Boolean value is true, then the final return value is the first operand, otherwise the final return value is the first ER operand. short-circuit operation: in && | | , if the first operand is already able to determine the result of the final return, then the second operand is not evaluated4. Comparison Operators (relational operators):

1. >

2. <

3, >=

4, <=  

5, = = Whether equal, is only the content of the data, no judgment of the type of data

6, = = = To determine whether congruent

7,! = Not equal to

8,! = = Not congruent

5. Assignment operator: = function: The right side of the equal sign equals the variable to the left6. Comma operator:--omit var

  var a,b,c;

  a=b=c=1;

7. Conditional operator (trinocular operator/ternary Operator)

  structure: Bolean expression? Operation One: Operation two;

  var a=15;

  var b=16;

  var c=24;

Judging the size of A and B

  a>b?alert (a): Alert (b);

Determine if a is greater than b, if a is greater than b, output a; otherwise output B  --the shorthand for if else

  Determine the size of the A,b,c

  (a > B a:b) > C alert (a > B a:b): Alert (c);

First find the big in a and b, and then compare with C.

Note: the precedence of the use of congruent and non-congruent operators!

six. operators:

1. + Number: The function of the plus sign:

  a, Connect two strings, connect function  

  b, Two values in the middle of the +, is the operational effect

  c, the + between the string and the value, is the connection

2.-minus: two operations between number

3.*: operation between two number

4./except: operation between two number

5.% (modulo): operation between two number

6.10 Take-up (modulo) 3

7. () Function: Change the calculation priority order

8.Math Object (object oriented; everything is a box)

1) Math.pow (a, b); Get the B-order of a

2) Math.Round (a); Rounded

3) Math.ceil (a);  Rounding up

4) Math.floor (a);  Rounding down

5) Math.max (a,b,c); Take the maximum value in three numbers

6) math.min (a,b,c);  //

7) math.random ();  Generate random number (between 0-1)

Expand: generate 1-50 of random numbers

  var f =math.random () *49+1;  

  Console.log (f);

8) Math.pow (a,1/3);//cube Root

  var a = Math.pow (2,10);

  Console.log (a);

  var b =math. round (3.38);

  Console.log (b);

Seven. precedence of Operators

   Describe  

++ -- - + ~ ! Delete new typeof void unary    operator, return Data type, object creation, undefined value  

   multiplication, division, modulo  

   Shift  

< <= > >= instanceof      less than, less than equals, greater than, greater than or equal to, instanceof

&&     

?:      conditions  

The following table lists the JavaScript operators by priority from highest to Lowest. Operators with the same precedence are evaluated in order from left to Right.

eight. Conversion of data types: cast and invisible conversions8.1 casts:8.1.1 to number (string/boolean)

The type of data entered via prompt is a string, whether 123, or a specific kanji

  var b =a+1;

  Console. Log (b);//output 41

Want to output 5:

var a=prompt ("please Enter a section");

A=number (a);//convert The original string A to number type

var b =a+1;

Console. Log (b);//output 5

Console.log (typeof (a));//output Number

features:

a, If you want to convert to a number, the input must be a pure number, otherwise Nan.

b, If the content is empty, convert to 0

c, if it is a decimal, the decimal will remain

d, If the string contains a non-above format, convert it to Nan

8.1.2 Turn Number,parseint conversion

  var a = "123.abc";

  A = parseint (a);

  Console.log (a);//output 123

  Console.log (typeof (a));//output number

Features: a, If there are decimals, will directly remove the Decimal.

  b, If the first is a number, continue parsing until the string is complete or a non-numeric symbol is encountered

8.1.3 parsefloat (): Turn numbers

Same as parseint: the only difference: the ability to keep decimals

8.1.4 Boolean turns into number

  var a = true;

  A = number (a);

  Console.log (a);

  Console.log (typeof (a));

8.2 Conversion of Strings:8.2.1 Numeric to string method one

var a = 123;

  A = a.tostring ();

  Console.log (a);

  Console.log (typeof (a));//string

Call The. tostring method directly to convert the content directly to a string

8.2.2 Numeric to string method two

  var a = 123;

  A = string (a);

  Console.log (a);

  Console.log (typeof (a));//string

The contents of the direct move are placed in parentheses after the string

Difference: The first is the method of calling this variable object directly, and the second is casting

8.2.3 Boolean Turn string

  var a = true;

  A = Boolean (a);

  Console.log (a);

  Console.log (typeof (a));

  Note: In addition to false, the null character "", 0, NaN, undefined will turn to false when converted, and the rest will turn to true

8.3 Implicit conversions: without the program ape to write the fixed code, the browser can directly convert8.3.1 implicitly converted to number: add +-*\% directly before the content to be converted

  +a a-0 a*1 A/1 a%1

  var a = "123";

  A = +a;

  B = a\1;

  Console.log (a);

  Console.log (b);

  Console.log (typeof (a));

  Console.log (typeof (b));

8.3.2 is implicitly converted to string: Hou add "" to the content you want to convert

   var a = 123;    A = a + "";    Console.log (a);

8.3.3 implicitly converted to Boolean: direct a =!! a; or! Anine, Code comments:

The part of the source code that is ignored by the JavaScript engine is called a comment, and its purpose is to interpret the Code. JavaScript provides two types of annotations: one-line comments, with//starts with, and the other is a multiline comment, placed between/* and */.

It is recommended to use multiline comment/** */when the function is created at JS Time. The rest of the time multi-line comments prone to problems

note: Although the JS code is not sensitive to whitespace, line wrapping, indentation, but must pay attention to Writing. It is recommended to have both a semicolon and a newline-more readablefirst, Process Control:1. If structure: used to determine whether certain conditions are performed

  If_else: can judge 2 conditions  if_else if_else judge multiple conditions    var a = prompt ("with how much money");    If (a>300) {        console.log ("your money exceeds 300, please eat");    }   else if (a>200) {       console.log ("your money is not 300, enough 200, please eat fast food");     }   else{        Console.log ("remember to bring enough tomorrow");        

note:

• Cannot add a semicolon after curly braces

• After the program runs to if, the conditions in the IF brackets are judged, the content is executed if the condition is met, and if it is not satisfied, it is executed;

#注意:

• a, curly braces can not be added semicolon;

• b, the code does not support Ligatures: 90<pj<100, only 90<pj&&pj<100;

2. Switch Case structure: The function is the same as the Else if,

   var a = prompt ("please Enter today's weekday number of corresponding numbers");    Switch (a) {case        "1":            alert ("you entered monday");            break;        Case "2":            Alert ("you entered Tuesday");            break;        Case "3":            Alert ("you entered Wednesday");            break;        Case "4":            Alert ("you entered Thursday");            break;        Case "5":            Alert ("you entered friday");            break;        Case "6":            Alert ("you entered saturday");            break;        Case "7":            Alert ("you entered Sunday");            break;        Default:            alert ("what kind of ghost do you enter");    }

second, The sources of the console to see the source code

a, Open the page you want to view b, break point, Refresh the page, you will find hit breakpoint c, the mouse on the variable name, you will find the input value

JS Background

-in 1995, Netscape Company developed a scripting language called livescript, which is used for Verification. In order to promote, the use of the most popular Java vocabulary, renamed Javascript. -netscapt is the first browser

• 03 ago, Psoriasis ads, Very excluded

• 04 Google uses JS technology to do AJAX technology

• In 07, Jobs released the first-generation apple, and the mobile page began to grow

• In 10, HTML5 launched the canvas-the Game. Example: Cutting Fruit

• 11, Node. JS was born, JS rolled out of the server side from the mobile side

how the browser works:

http://www.2cto.com/kf/201202/118111.html

Browser engine for querying and manipulating the rendering engine

Rendering engine: used to display the requested content, responsible for parsing HTML and CSS

Javascript Interpreter:js parser, responsible for executing JS

Notworking Network: responsible for sending network requests

JavaScript language:

1. Is the most used scripting language in the WORLD. Scripting Languages: languages that do not require compilation and are executed directly by the edge parsing side

   Compile: convert all code at once to a language that the CPU can understand, one line to execute

   Explanation: One line parsing, parsing one row to execute a row

2. JS is a client-side scripting language

js composition: ECMAScript, DOM, BOM

• Syntax specification for ECMASCRIPT:JS

• DOM:JS API for manipulating elements on Web pages

• BOM:JS API for operating the browser part of the functionality

Comb the basic syntax of JS