JavaScript Development tips (JS Getting started, operators, branching structures, looping structures)

First, JS introduction and Getting Started

<! DOCTYPE html>

<meta charset= "UTF-8" >

<title>javascript Introduction </title>

<!--[three ways to use JS]

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

<button onclick= "Javascript:alert (' Little Green Pond! You're a bit of a man! ' > have the ability to 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, the page will be loaded before the execution of JS code;

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

Referencing external JS files, using language= "JavaScript"

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

-

<script type= "Text/javascript" >

The comments in JS

Single-line comment. ctrl+/

/*

Paragraph comments. ctrl+shift+/

*/

document.write ("

/* "Variables in JS"

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

* var width = 10; Variables declared with Var, valid only at the current function scope

Width1 = 11; The variable generated by the direct assignment without Var, the default is the global variable, the entire JS file is valid

var a,b,c=1; The same declaration statement declares multiple variables at the same time, separating the variables with commas. However, the assignment needs to be assigned individually, such as in the above, only C is assigned 1,a/b to undefined (undefined)

[Declaration of 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 modify the data type of the variable at multiple different assignments:

var width = 10;//width as shaping variable

width= "haha";//width is changed to string type

The ③ variable can be declared with Var, or you can omit var. [difference] does not use VAR, the default is the global variable

④ the same variable name, which can be declared multiple times with var. But there is no meaning and no error. The declaration after the second time will only be interpreted as an assignment;

2. Naming conventions for variables:

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

② cannot start with a number

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

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

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

Jianghaoisshuaige√

Jiang_hao_is_shuai_ge√

Jianghaoisshuaigex

4, the data type of the variable in JS

Undefined: 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: Type. Use "" or "wrapped content to become a string.

Object (complex data type): Subsequent explanations, functions, arrays, etc...

5, the commonly used numerical functions:

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

When you use isNaN, you try to convert using the number () function, and if you can convert to numbers, it 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 (): Converting other types to numeric types

[String type to value]

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

>>> string is an empty string, it will be converted to 0 ""->0

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

[Boolean Boolean type to numeric value]

True, 1 false-0

[null/undefined to value]

Null-0 Undefined-NaN

[Object type to value]

* (Learn later) First call the ValueOf method, determine whether the function has a return value, and then according to the above-mentioned various circumstances to judge.

③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)

>>> strings that contain other characters. The numeric part before the first non-numeric character is intercepted.

NaN, "123a456", 123 "a123b456"

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

④parsefloat: Converting a string to a numeric value

>>> use the same way as parseint. However, when the decimal string is converted, the decimal point is preserved and integers are preserved when converting an integer string;

"123.5", 123.5 "123", 123

⑤typeof: Used to detect variable data types

Stringtrue/false, undefined string, not defined

Value, Number object/null, function

*/

var A; declaring variables

a=10;//Assigning values to variables

var width = 10;//variable is declared at the same time, directly assigned value

width= "haha";

var x,y=9,z=10;

var b = {};

alert (d);

/* [Output statement in JS]

*

* document.write ();

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

*

* Note: Any content other than variable/constant must be placed in "" when printing. Variables/constants must be placed outside the "".

* When printing content is composed of multiple parts, use + link between:

* For example: document.write ("Solitaire in the left hand:" +left+ "<br/>");

*

* Alert ();

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

*/

</script>

<script language= "JavaScript" src= "" ></script>

<body>

<button onclick= "Javascript:alert (' Little Green Pond! You're a bit of a man! ' > have the ability to point me!!! </button>

</body>

Second, JS operator

<! DOCTYPE html>

<meta charset= "UTF-8" >

<title></title>

<script type= "Text/javascript" >

/*

Arithmetic operations

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

+: There are two functions, link string/addition operations, and when the + both sides are numbers, the addition and subtraction operations, when the + side has any side is a string,

String is linked, and the result after the link is still a string.

+ +: The increment operator, adding 1 to the original base of the variable;

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

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

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

++n: First the value of n is +1, then the value of n+1 is calculated

The same point: whether n++ or ++n, after executing the code, the value of a is +1;

Case: var a = 3;

var b,c;

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

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

document.write (ABC) is 557

————————————————————————————————————————————————

Assignment operations

= Assignment = = = *=/=%=

+=:a+=5 is equivalent to a=a+5, but the former is more efficient than the latter.

————————————————————————————————————————————————

Relational operations

= = equals number, = = = Strictly equals,! = Not equal To, >, <, >=, <=

= = =: Strictly equal to: ① type different direct return false; ② type the same as the next step to judge;

= =: equal to: ① type is the same as the ===;② type, the two sides of the equation with the number function to transpose numbers, in judgment;

[Note exceptions]

Null==undefined√;null===undefinedx

document.write (123== "123") was established;

————————————————————————————————————————————————

Conditional operator (multi-mesh operation)

A>b? True:false

There are two key symbols:? and:

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

When the previous part of the operation result is False, execute: the following code;

Multi-mesh operators can be nested in multiple layers

For example:

————————————————————————————————————————————————

logical operators

&& and, | | Or! Non -

_______________________________________________________________________________________________________________ _____

"Operator Precedence"

()

! ++ --

%  /  *

+ -

> < >= <=

==   !=

&&

||

various assignments = + = *=/=%=

* */

</script>

<body>

</body>

Three, the branch structure in JS

<! DOCTYPE html>

<meta charset= "UTF-8" >

<title></title>

<script type= "Text/javascript" >

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

*/

var num = {};

if (num) {

Execute when condition is true

document.write (if condition is established);

}else{

Execute if condition is false

document.write ("If condition is not established");

}

Num<10?document.write ("If condition"):d ocument.write ("If condition is not established");

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

*/

var num2 = 5;

if (num2>5) {

document.write ("Input too large");

} else if (num2<5) {

document.write ("Input too small");

} else if (num2==5) {

document.write ("input correct");

}

if (num2==5) document.write ("Input too large");

if (num2==5) document.write ("Input too large");

else document.write ("11");

document.write ("22");

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

*/

var num4 = 5;

Switch (NUM4) {

Case 4:

document.write ("This is a case block of 9!") ");

Break

Case 5:

document.write ("This is a case block of 10!") ");

Break

Case 6:

document.write ("This is a case block of 11!") ");

Break

Default

document.write ("This is the case block of default!") ");

Break

}

</script>

<body>

</body>

The loop structure in JS

<! DOCTYPE html>

<meta charset= "UTF-8" >

<title></title>

<script type= "Text/javascript" >

/* "Steps for looping structures"

① 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

*/

/*

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

*/

var n = 1; ① declaring a loop variable

while (n<=5) {//② judgment loop condition

document.write ("hellowhile<br/>");//③ performing loop body operation

N++;//④ Updating loop variables

}

var m = 1;

do{

document.write ("hellodowhile<br/>");

m++;

}while (m<=5);

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

*/

/*

* 1-100 summation, with end-to-end addition

* (1+100) + (2+99) +......+ (50+51) =5050

*/

for (Var n=1,j=5;n<=3&&j>=1;n++,j--) {

document.write ("hellofor<br/>");

document.write (n+ "/" +j);

//}

var sum = 0;

for (Var i=1,j=100;i<j;i++,j--) {

if (i<50) document.write ("(" +i+ "+" +j+ ") +");

Else document.write ("(" +i+ "+" +j+ ") =");

sum+= (I+J);

}

document.write (sum);

</script>

<body>

</body>

JavaScript Development tips (JS Getting started, operators, branching structures, looping structures)