1. JS is an interpreted programming language that runs on the client side, and it is a weakly typed language.
2. The role of JS:
It is used to complete some logic implementations for front-end and back-end interaction and increase user experience.
3. A web page is composed of three parts: structure (HTML/HTML5), performance (CSS/CSS3) and form (JavaScript).
4. The core of front-end development is: JavaScript.
5. The composition of JavaScript:
1) ECMAScript (standard: ECMA-262): basic language part (basic, object-oriented, etc.)
2) DOM (standard: W3C): node operation
3) BOM (no standard): browser operation
6 Features of .JS
1) Loose
JS variables do not have a clear type, also known as weakly typed language (allows a piece of memory to be regarded as multiple types).
2) Object properties
The properties of an object can also be mapped to arbitrary data.
3) Inheritance mechanism
JS is based on prototype inheritance.
7.
defer: Indicates that after all DOM elements are loaded, execute the JS code (generally not needed for development now)
charset: character encoding (mainly solve the problem of garbled Chinese characters) (generally not needed for development now)
Note:
a. The script tag can be written anywhere in the web page code, because JS is executed synchronously, but in order to avoid JS blocking and affecting the operation of the DOM, it is best to write it after the body.
b. If you want to output the end tag of the script, you must disassemble and write:
alert('</sc'+'ript>');
2) Write JS code in the href of the a tag (this kind of use is not recommended in actual development, because it will affect performance)
<a href="javascript:alert('Hi everyone!')">Hi everyone</a>
<a href="javascript:var a=10,b=20;alert('The result is: '+(a+b))">Calculation result</a>
<a href="javascript:close();" >×</a>
<a href="javascript:void(1);">test</a>
3) Import external JS files with script tags (can be used by multiple HTML files)
<script src="01_test .js" type="text/javascript" async="async"></script>
Description:
src: the path and file name of the imported external JS file (only for importing JS files)
async: load JS code asynchronously (JS code can be run while loading DOM elements)
8. Identifier
The so-called identifier is Refers to the name of a variable, function, property, or function parameter.
Identifier definition rules:
1) The first character must be a letter, an underscore (_) or a dollar sign ($).
2) Other characters can be letters, underscores, dollar signs or numbers.
3) Keywords, reserved words, true, false and null cannot be used as identifiers.
关键字：
break、else、new、var、case、finally 、return 、void、catch、for、switch、while、continue、
function、this、with、default、if、throw、delete、in、try、do、instanceof、typeof等
保留字：
abstract、enum、int、short、boolean、export、interface、static、byte、extends、long、
super、char、final、native、synchronized、class、float、package、throws、const、goto、
private、transient、debugger、implements、protected、volatile、double、import、public等
Note:
Anywhere in JS is strictly case-sensitive! ! !
9. Comments
1) Single-line comment
// Comment content is generally used to explain the current line of code (usually written behind the code) (the shortcut key in WebStorm is Ctrl+/)
2) Multi-line comment (in WebStorm The shortcut key is Ctrl+Shift+/)
/*
Comment ContentComment
Content
...
*/ Also called block comment. Generally, the following codes are described as a whole, and the description content may be more.
Explanation:
1) The comment statement will not be parsed and executed in the browser, but only serves as an explanation;
2) In the project, you must get used to writing comments, which is mainly convenient for later project maintenance.
10. Constants
Constants are also called direct quantities or literal quantities, which directly give specific data in the program.
Constants cannot be changed.
Such as: 100, true, 'abc', null, undefined, etc.
11. Variable
Variable is to open up a space in memory for storing certain data.
A variable must have a variable name, and the variable name must follow the naming convention for identifiers.
Definition:
1) Only define variables
var x;
var a, b, c;
2) Define variables and assign
var x1 = true;
var y1 = 100, y2 = null;
Explanation:
1) It is not necessary to give the data type when defining a variable (a feature of loose language).
2) Variables can be defined repeatedly, and the previous variables will be overwritten later.
3) It is also possible to define variables without var. The default is to add attributes to the window object.
name = 'Zhang San'; // Equivalent to window.name = 'Zhang San';
4) If the defined variable is not assigned a value, the system will automatically assign the default value to 'undefined'.
5) A statement can end with a semicolon or without a semicolon; if multiple statements are written on the same line, they must be separated by semicolons.
6) When writing code, except for Chinese punctuation that can be used in strings, only English punctuation can be used anywhere else.
12. Data type
The data type refers to the way it is stored in memory.
Divided into:
1) Basic data type
number: Numerical type
is used to represent a number, usually used for operations such as addition, subtraction, multiplication, and division.
Divided into integer and floating point (decimal places can float).
100 (decimal)
0123 (octal)
0xae12 (hexadecimal)
isNaN(): Used to judge whether it is a number or not.
string: character
type A string of characters (can be numbers, letters, punctuation marks, Chinese characters, etc.) enclosed by quotation marks (single and double quotation marks are acceptable, they make no difference), usually used as a description.
'abc'
"abc"
"a\'bc"
boolean: Boolean (logical) type
means true (true) or false (false).
null: Null
indicates that the address of an empty object specifies that it points to empty.
undefined: Undefined
means that a variable is defined, but if no value is assigned to this variable, the system will automatically assign the value to undefined.
2) Reference data type
object: object type
is used to declare or store an object (object, function, regular, character, value, etc.)
var a = new Number(10);
var obj = { sno: '007', sname: 'Zhang San' } 13. Operators 1) Arithmetic operators + - * / % (remainder/module) ++ (self Increment) --(self-decrement) 2) String operator +: used to realize string connection. 3) The relational operators > < >= <= == === != !== can only return true or false. Comparison method: a. Value comparison is to compare its size; b. Character comparison is to compare the size of ASCII code value; 0->48,A->65,a->97,Enter->13,ESC-> 27 c. The comparison of Chinese characters is to compare the size of its Unicode encoding value. The encoding value can be obtained through charCodeAt(). d.== and != only compare values, not types; === and !== compare both values and types
Comparison: partial symbols <numbers<uppercase letters<lowercase letters<Chinese characters
4) Logical operators
There are three types of logical operators: !, && and ||. The returned value is generally the logical value true or false, and other values may be returned.
! : Logical NOT (inversion) (unary/unary operation)
!true -> false !false -> true
&&: Logical AND (binary/binary operation)
as long as one operand is false, the result is false.
Note:
If any of the two operands is not a logical value, when the result of the first operand is true, the value of the second operand is returned;
when the result of the first operand is false, the first operation is returned value of the number.
||: logical or (binary/binary operation)
as long as one operand is true, the result is true.
Note:
If any of the two operands is not a logical value, when the result of the first operand is true, the value of the first operand is returned;
when the result of the first operand is false, the second operation is returned value of the number.
Short-circuit operation:
a. In && operation, if the first operand is false, the second operand does not need to be calculated, and the result returns false.
b. During || operation, if the first operand is true, the second operand does not need to be calculated, and the result returns true.
5) Bitwise operators
are not discussed yet.
6) Ternary operator (conditional operator)
syntax:
expression 1 ? expression 2: expression 3,
if expression 1 is true, return the result of expression 2; if not, return the result of expression 3.
Tips:
The ternary operation is equivalent to the double-branch structure in the if statement.
If expression 2 or expression 3 is more complicated, it is recommended to use if statement or switch statement to realize.
Operator precedence: operator
description
. [] () Field access, array subscript, function call, and expression grouping
++ -- - ~ ! delete new typeof void Unary operator, return data type, object creation, undefined Value
* / % Multiplication, Division, Modulo
+ - + Addition, Subtraction, String Concatenation
<< >> >>> Shift
< <= > >= instanceof less than, less than or equal to, greater than, greater than or equal to, instanceof
== ! = === !== equal, not equal, strict equality, non-strict equality
& bitwise AND
^ bitwise XOR
| bitwise OR
&& logical AND
|| Logical or
?: Condition (ternary operation)
= += -= *= /= %= Assignment, operation assignment
, multiple evaluation
14. Flow control
JS is an interpreted language that is both process-oriented and object-oriented .
Process-oriented: Execute sequentially in the order in which the code is written (OOP).
JS is also a structured language.
The structure of JS is divided into three types: sequential structure, branch (condition/selection) structure and loop structure.
Sequence structure: Execute in sequence according to the writing order of the code, generally including initialization, assignment, input/output and other statements.
Conditional structure: implemented with an if or switch statement, in which the code is conditionally selected for execution.
Loop structure: A certain part of code is executed repeatedly within the specified condition range, which is realized by for/for...in/forEach/while/do...while statement.
1) Conditional structure
a. Single-branch
syntax:
if (condition) statement;
or:
if (condition) { statement group; } If the condition is true, the statement or statement group will be executed; if the condition is not true, the next statement of if will be executed.
b. Double-branch
syntax:
if (condition) statement 1; else statement 2;
or:
if (condition) { statement group 1; }else{ statement group 2; } If the condition is true, statement 1 or statement group 1 will be executed; condition If not, statement 2 or statement group 2 will be executed.
Note: else means "otherwise", and conditions cannot be written afterwards.
c. Multi-branch (three-branch and above)
multi-branch is actually the nesting of single-branch and double-branch.
Syntax:
if(condition 1){ if(condition 2){ if(condition 3){ statement or statement group; } } }
Or:
if(condition 1){ statement 1 or statement group 1; }else{ if(condition 2){ statement 2 or statement group 2; }else{ statement 3 or statement group 3; } }
Or:
if(condition 1){ if(condition 2){ statement 1 or statement group 1; } }else{ if(condition 3){ statement 1 or statement group 2; }else{ statement 1 or statement group 3; } } Or (concise writing, recommended): if(condition 1){ statement 1 or statement group 1; }else if(condition 2){ statement 2 or statement group 2; }else if(condition 3){ statement 3 or statement group 3 ; } ....
else{ statement n or statement group n; } If condition 1 is true, statement 1 or statement group 1 will be executed, and the following code will not be executed; if condition 1 is not true, condition 2 will be judged, if condition 2 is true, statement 2 will be executed Or statement group 2... If none of the previous conditions are met, the code behind else will be executed.
d. Case statement switch
syntax:
switch(expression){ case expression 1: statement 1 or statement group 1;[break;] case expression 2: statement 2 or statement group 2;[break;] case expression 3: Statement 3 or statement group 3;[break;] ... case expression n: statement n or statement group n;[break;] default: statement n+1 or statement group n+1; }
Description: Execute the expression. If the result of the expression is a corresponding value behind the case, the corresponding statement or statement group will be executed. If there is a break after the statement, the statement in this case will be terminated. If there is no break, the statement will not be executed
. Then judge the condition and continue to execute the following statement until a break is encountered; if the condition is not met, the statement after default will be automatically executed.
The difference between switch and if:
switch is generally used to judge simple conditions that can obtain results, while if is generally used to judge more complex conditions; the condition judgment that can be
realized by if may not be realized by switch, but the conditional judgment that can be realized by switch, if can also be used;
if both switch and if can be used, switch is generally more concise.
2) Loop structure
I) Loop
a. Count loop (for)
syntax:
for ([variable initial value]; [condition]; [step size]) { [loop body;] [continue;] [break;] }
Description:
Execute the initial value of the variable first, then judge the condition, if the condition is true, recycle the body, then calculate the step size, and finally judge the condition, if the condition is true, continue to execute the loop body...until the condition is not true, jump out of the loop.
The number of cycles can be calculated:
Number of cycles = [(final value - initial value) / step size] + 1
b. while
syntax:
while (condition) { [cycle body;] [continue;] [break;] } Explanation: When the condition is true, execute the loop body, otherwise, jump out of the loop. c. Until type loop (do...while) syntax: do{ [cycle body;] [continue;] [break;] } while (condition) description:
Execute the loop body first, and then judge the condition. If the condition is true, continue the loop, otherwise, jump out of the loop.
The difference between the until-type loop and the while-type loop:
When the condition is not true once, the until-type loop will execute at least one loop, while the while-type loop will not execute once.
d. Array and object traversal (more on this later)
for...in
forEach()
Summary:
for can only be used when the number of cycles is known; while and do...while can be used when the number of cycles is known or unknown.
Generally, for is used when the number of cycles is known; for...in is used It is used to traverse arrays and objects; forEach() is used to traverse arrays, and for loops can also traverse arrays, but the performance is poor.
II) break and continue statement
The break statement can be used in switch statement and loop statement (except forEach loop), which means to jump out (end) the conditional statement or loop.
The continue statement can only be used in a loop statement (except the forEach loop), which means that the loop ends and the next loop continues.
Note:
a) The break and continue statements must exist independently, and no other codes can be added later.
b) break and continue statements are generally placed in the if statement.
15. Function
A function is the encapsulation of a piece of JS code with a certain function, which can be called repeatedly in multiple places in the program.
1) Define a function
format 1:
function function name ([formal parameter list]) { function body; [return [<expression>];] } format 2: var variable name = function ([formal parameter list]) { function body ; [return [<expression>];] } Format three: ;(function ([formal parameter list]){ function body; [return [<expression>];] })([actual parameter list]); above The function of is called Immediately Invoking Function Expression (IIFE), which will automatically call itself and not be called elsewhere. It is generally used for encapsulation or closure processing of JS libraries or JS plug-ins. 2) Function call function name ([actual parameter list]);
Tips:
Functions are not automatically executed (except for IIFE (immediately executed function expressions)), they must be called to execute.
3) The return
function can return a result through return. If return does not return a result, it means that the call of the function ends and returns to the calling place.
4) The arguments object
returns a pseudo-array of the actual parameter list.
It is generally used when the number of actual parameters passed is uncertain.
16. Object (object)
object is actually a type, that is, a reference type. Used to organize data and functionality together.
Objects consist of properties and methods, usually defined with key-value pairs.
1) Object definition
a) new constructs
new Object([parameter]);
b) literal definition
var obj = { key: value,// attribute fn: function(){ // method ... } } 2) object Reference a) object name.property name
Object name. Method name ([actual parameter list])
b) Object name [property name]
17. Array (Array)
An array combines a group of data and stores them in a variable. The array is arranged in an orderly manner. Occupies a contiguous memory space.
An array can store data of different types.
1) Define an array
a.new
new Array([value list])
b. Create literals
var arr = [value list]
2) Get the array element value
array name [subscript] // The subscript can be a numeric constant, It can also be an expression, function or variable.
3) Traversing the array
One-dimensional arrays can be implemented with one loop; two-dimensional arrays must be implemented with double loops (rows first, columns second).
a.for
b.for...in // Recommended writing method
c.forEach()
4) Array properties and methods
a.length property
gets the length of the array.
b. Method
i) push()
adds the array to the end of the array.
ii) pop()
Delete the last element of the array.
iii) unshift()
adds data to the head of the array.
iv) shift()
deletes the first element of the array.
v) concat()
combines two or more arrays into one array.
vi)reverse()
reverses the array.
vii) join()
converts the array to a string.
viii) splice()
deletes, modifies or adds data to the array.
18.Function type
Function is a class (constructor) used to build functions.
Function internal properties
Inside the function, there are two special objects: arguments and this.
callee:
arguments is an array-like object that contains all parameters passed into the function, and its main purpose is to save function parameters.
But this object also has an attribute called callee, which is a pointer to the function that owns the arguments object.
That is to say, the function itself can be called through arguments.callee, which is generally used for recursive calls of functions.
A function calls itself a recursive call to a function.
The this pointer object
in the global context this points to window (there is no global object in JS, and the global object of JS is window);
in the function, this points to the current object that this function operates on.