JS Getting Started

"Three ways to use JavaScript"

1, HTML tag embedded JS (not advocated use):

<button onclick= "Javascript:alert (' You really dot ah ')" > Point me </button>

2, the HTML page directly using JS:

<script type= "Text/javascript" >

JS Code

</script>

3, reference external JS file:

<script language= "javascript" src= "JS file path" ></script>

"Precautions"

① page JS code and Reference JS code, can be embedded in the HTML page anywhere. However, the different location will affect the execution order of JS code;

For example,:<script> in front of the body, will execute the JS code before the page loads

② page JS code, using type= "Text/javascript"

Referencing external JS code, using language= "JavaScript"

③ refers to the external JS file <scipt></scipt> tag, must appear in pairs, and the tag can not have any code inside

The comments in JS

Single-line Comment ctrl+/

/*

* Paragraph comment ctrl+shift+/

*/

/* "Variables in JS"

* 1, JS in the variable declaration of the wording:

* Var width=10;//variables declared using VAR, only the current function scope is valid

width=11;//does not use Var, the direct assignment of the generated variables, the default is the global variable, the entire JS file is valid

Width a,b,c=1;//the same declaration statement declares more than one variable at the same time, separating the variables with commas (English). However, the assignment needs to be assigned separately,

For example, only C is assigned a value of 1,a B to undefined (undefined)

*

* "Declaring Variable Considerations"

All variable type declarations in *①js use the var keyword. The specific data type of the variable, depending on the type of assignment to the variable

*

*② the same variable, you can change the data type of the variable at multiple different assignments:

* var width=10;//width as shaping variable

Width= "hehe";//width is changed to string type

*

The *③ variable can be declared with Var, or you can omit var. "Difference" does not use VAR, defaults to global variables

*

*④ the same variable name, which can be declared multiple times with var. But it doesn't make any sense, and it doesn't make an error. After the second declaration, it will only be understood as an assignment.

*

* 2. Declaration specification of variables:

*① variable name, can only have letters, numbers, underscores, $ composition

*② cannot start with a letter

*③ variables are case-sensitive, uppercase and lowercase letters are different variables

*

* 3, the name of variable names to comply with the camel rule:

* variable starts with lowercase, followed by the first letter of each word (or the words are separated by an underscore)

* yiersansi√

* yi_er_san_si√*

* Yiersansix

*

* 4, the data type of the variable in JS

* underfined: Undefined, variable declared with VAR, no initialization assignment. var a

* Null: Represents an empty reference. For example, an empty object, an empty array

* Boolean: TRUE or FALSE, optional value True/false

* Number: Numeric type. Can be a decimal, or an integer.

* String: String type, with "" or "wrapped content, become a string

* Object (complex data type): Follow-up explanation, functions, arrays, etc...

*

* 5, the commonly used numerical function;

*①isnan: Used to determine whether a variable or constant is Nan (non-numeric)

* When judging with Nan, attempts to wrap with the number () function, if it can be converted to numbers, is not a non-numeric value, and the result is false

* "111" pure numeric string, false "" "empty string, false" 1a "contains other characters, True True/false Boolean type, False

*②number (): Convert other types to numeric types

* "String Type value"

* >>> string is a pure numeric string and will be converted to the corresponding number "111"->111

* >>> string is an empty string and will be converted to 0 ""->0

* >>> string contains other non-numeric characters, cannot convert "111a"->nan

*

* "Boolean Boolean type to Value"

* True-1 false-0

*

* "null/undefined to Value"

* Null-0 Undefined-NaN

*

* "Object type to Value"

* * (Learn later) call the ValueOf method first, determine whether the function has a return value, and then judge according to the various cases

*

*③parseint: Converting a string to a numeric type

* >>> empty string, cannot go. Result is Nan

* >>> Pure numeric string, can go. "123", 123 "123.5", "123" (decimal conversion, directly erase the decimal point, not rounding)

* >>> characters that contain other strings. The numeric part before the first non-numeric character is intercepted. "123a456", 123 "a123b456"->nan

* >>> parseint can only be converted to string type, boolean/null/undefined are Nan

*

*④parsefloat: Converting a string to a numeric value

* >>> used in the same way as parseint. However, when a decimal string is converted, the decimal point is preserved, and integers are preserved when the integer string is converted.

* "123.5"->123.5 "123"->123 "123.0"->123

*

*⑤typeof: Used to detect variable data types

* Undefined String---True/false

* Object/null---function

*

*/

/* "output statement in JS"

*

* document.write ();

* Output statement to print the contents of the write () on the browser screen;

*

* When using, be aware that except for variables/constants, any content that is accidentally printed must be placed in "". The variable/constant must be placed outside the

* When the printed content is composed of multiple parts, use a + link between them, for example: document.write ("Solitaire in the left hand:" +left+ "<br/>")

*

* Alert ();

* Pop-up Warning, () the use of the method, ibid.

*/

1. Arithmetic operations

+ Plus, minus, * multiply,/divide,% withdraw, + + self-increment 、--self-reduction

+: There are two functions, link string/addition operation, when the + both sides are numbers, the addition operation, when the + side has any side as a string, string link, the result of the link is considered a string;

+ +: The increment operator, the variable is based on the original +1;

--: The self-decrement operator, the variable on the original basis-1;

2. Assignment operation

= Assignment, + = = *=/=%=

+ =: A + = 5, equivalent to a = a + 5; But the efficiency of the former is faster than that of the latter.

3. Relational operations

= = equals, = = = Strictly equals,! = is not equal to, >, <, >=, <=

= = = strictly equals; Type is different, return false; Type is the same, then make next judgment;

= = = equal to, same type, same as = = =, type different, try to convert both sides of the equation to a number, then judge;

Exception: null = = Undefined√null = = = Undefinedx

4. Conditional operator (multi-mesh operation)

A>b?true:false

There are two key symbols:? and:

When? When the previous part evaluates to True, execute: the preceding code;

When? When the previous part of the operation results in False, execute: the following code;

>>> multi-mesh operators can be nested in multiple layers:

For example: var Jieguo = num>5? " Input too big ":(num==5?" It's right! ":" Input is too small ");

5. Logical operators

&& and, | | Or! Non -

[Precedence of operators]

()

! ++ --

% / *

+ -

> < >= <=

==  !=

&&

||

various assignments = + = *=/=%=

"The similarities and differences between n++ and ++n"

n++: First Use the value of N to calculate, then put the n+1;

++n: First put the value of N +1, and then use n+1 after the value, to calculate;

The same point: whether n++ or ++n, after the execution of the code, will be n+1;

Eg:var a = 3;

var b,c;

b = a++ +2; A=3 b=5 a=4

c = ++a +2; A=4 a=5 c=7

"If-else Structure"

1, the structure of the wording:

if (judging condition) {

Execute when condition is true

}else{

Execute if condition is false

}

2, if () the expression, the result of the operation should be:

①boolean:true true False False

②string: Non-empty string for vacuum string is False

③number:0 is false everything is not 0, are true

④null/nan/undefined: All is False

⑤object: All is True

3, else{} structure, can be omitted according to the specific circumstances;

"Multiple If, ladder if"

1, the structure of the wording:

if (condition i) {

Condition One established

} else if (condition two) {

Condition one not established && condition II established

Else-if section, can have more than n

} else{

Condition one not established && condition two not established

}

2, multiple if structure, each judgment condition is mutually exclusive! Only one of the roads can be selected.

3, If/else {} can be omitted, but generally not advocated;

If you omit {}, the IF/ELSE structure contains code that is only the most recent line (the semicolon ends);

If you omit {}, the else structure always belongs to the nearest if structure in front of it.

"Nested IF Structure"

1, the structure of the wording:

if (condition i) {

Condition One established

if (condition two) {

Condition I set up && Condition II also established

}else{

Condition One establishment && condition two not established

}

}else{

Condition one is not tenable

}

2, if structure can be multi-nesting, but in principle, not more than 3 layers

"Switch-case Structure"

1, the structure of the wording:

switch (expression) {

case constant Expression 1:

Statement 1;

Break

Case constant Expression 2:

Statement 2;

Break

......

Default

Statement n

Break

}

2. Precautions:

The expression in ①switch (), and the expression following each case, can be any of the data types supported by JS (objects and arrays do not work);

All constant expressions following the ②case must be different, otherwise only the first one will be executed;

The constants after ③case can be any data type; different case of the same switch structure can be many different data types;

④switch in the judgment of the time, the use of a congruent judgment = = =.

⑤break function: After executing the case code, jump out of the current switch structure;

The consequences of missing a break: Start with the correct case and execute all case and default in turn. Reason: ⑥↓

⑥switch structure When judging, will only judge the correct answer, when the correct case is encountered, will not judge the subsequent project. Execute in turn.

⑦switch structures are executed faster than multiple if structures. In a multi-channel branch, you can prioritize the use of the switch structure.

"Steps of the looping structure"

① declaring a loop variable

② Judging Cycle conditions

③ executing the loop body (all code in the while {}) operation

④ Updating loop variables

Then, the loop executes the ②③④

"Data types supported by loop conditions in JS"

①boolean:true true False False

②string: Non-empty string for vacuum string is False

③number:0 is false everything is not 0, are true

④null/nan/undefined: All is False

⑤object: All is True

Note:

* While Loop features: First judge, then execute;

* Do-while cycle characteristics: First execution, then judgment; even if the initial conditions are not established, the Do-while cycle is executed at least once;

"For Loop"

1. For loop has three expressions: ① define cyclic variable ② judge loop condition ③ Update loop variable

Between three expressions, separated by;

For loop three expressions can be omitted, two, one is indispensable

2, for loop characteristics: First judge, then execute;

3, for loop three expressions, can have a multi-part, separated by commas; however, the second part of the judging condition needs to use && link, the final result needs to be true/False

JS Getting Started