JavaScript
Quick Start
JavaScript code can be directly embedded anywhere in the Web page, but usually we put JavaScript code in <script>...</script> included code is the JavaScript code, it will be directly executed by the browser. The second approach is to put the JavaScript code in a separate .js
file and then in the HTML by <script src="..."></script>
introducing this file.
Example one: Put it inside the head
<HTML><Head> <Script>Alert ('Hello, World'); </Script></Head><Body> ...</Body></HTML>
Example two: Separate JS file invocation
<HTML><Head> <Scriptsrc= "/static/js/abc.js"></Script></Head><Body> ...</Body></HTML>
Putting JavaScript code in a separate .js
file is better for maintaining your code, and multiple pages can refer to the same .js
file individually.
You can also introduce multiple files in the same page, and .js
you can write them more than once in a page <script> js代码... </script>
, and the browser executes sequentially.
Grammar
JavaScript syntax is similar to the Java language, with each statement ending with a ;
statement block {...}
. However, JavaScript does not impose a requirement at the end of each statement ;
, and the engine responsible for executing JavaScript code in the browser automatically complements the end of each statement, but note: having the JavaScript engine automatically add semicolons in some cases alters the semantics of the program. Cause the running result to be inconsistent with expectations.
{...}
The statement inside the curly braces has indentation, usually 4 spaces. Indenting is not required for JavaScript syntax, but indentation helps us understand the hierarchy of code, so we follow indentation rules when writing code. {...}
It can also be nested to form a hierarchical structure.
Comments
1. //
characters that begin with the end of the line are treated as line comments, and the comments are visible to the developer, and the JavaScript engine is automatically ignored.
// This is a line of comments // This is also a comment
2. Another block annotation is to /*...*/
wrap a multiline character together and treat a large "block" as a comment:
/**/
Data type
Number
JavaScript does not distinguish between integers and floating-point numbers, and is uniformly represented by number, and the following are valid number types:
// Integer 123 // floating point 0.456 // scientific notation means 1.2345x1000, equivalent to 1234.5 // Negative number // Nan means not a number, which is represented by Nan when the result cannot be evaluated // Infinity is infinitely large, and is represented as infinity when the value exceeds the maximum value that JavaScript can represent.
Because the computer uses binary, it is sometimes convenient to use hexadecimal notation for integers, hexadecimal is represented by 0x prefixes and 0-9,a-f, for example:,, and 0xff00
0xa5b4c3d2
so on, and they are exactly the same as decimal values.
Number can do arithmetic directly, and the rules and math are consistent:
// 3 // 7.5 // Infinity // NaN // 1 // 1.5, %
is to seek the remainder operation.
string
strings are arbitrary text enclosed in single quotes ' or double quotes, for example, and ‘abc‘
"xyz"
so on. Note that ‘‘
or ""
itself is just a representation, not part of a string, so the string is ‘abc‘
only a
, b
c
this 3 characters.
Boolean value
A Boolean value is exactly the same as a Boolean algebra, with a Boolean value of only true
false
two values, either, either directly, by means of a true
false
true
false
Boolean, or by a Boolean operation.
&&
Operations are associated with operations ||
, operations, or operations !
, and non-operations
comparison Operators
When we compare number, we can get a Boolean value from the comparison operator:
// false // true // true
In fact, JavaScript allows comparison of arbitrary data types:
false // true false // false
Pay special attention to the equality operator ==
. At design time, JavaScript has two comparison operators:
The first is the ==
comparison (two equals), which automatically converts the data type to compare, and many times it gets very weird results;
The second is the ===
comparison (three equals), which does not automatically convert the data type if the data type is inconsistent, returns false
if consistent, and then compares.
Because of this design flaw in JavaScript, do not use ==
comparisons, always insist on using ===
comparisons.
Another exception is that NaN
this particular number is not equal to all other values, including itself:
// false
The only way to judge NaN
is through the isNaN()
function:
// true
Finally, pay attention to the equal comparison of floating-point numbers:
// false
This is not a design flaw in JavaScript. Floating-point numbers generate errors during operation because the computer cannot accurately represent infinite loop decimals. To compare two floating-point numbers for equality, you can only calculate the absolute value of their difference to see if they are less than a certain threshold:
// true
null and undefined
null
Represents an "empty" value, 0
unlike an empty string, which ‘‘
0
is a numeric value that ‘‘
represents a string of length 0 and null
represents "null".
In other languages, there are also JavaScript-like null
representations, such as Java, which is also used by null
Swift nil
, which is represented by Python None
. However, in JavaScript, there is one and null
similar undefined
, which means "undefined".
The designer of JavaScript wants to null
represent an empty value, whereas the undefined
value is undefined. It turns out that there is no such thing as an egg, and the difference between the two is insignificant. In most cases, we should all use null
. undefined
useful only when judging whether a function parameter is passed or not.
Array
An array is a set of sequentially arranged collections, each of which is called an element. An array of JavaScript can include any data type. For example:
NULL true];
The above array consists of 6 elements. Arrays []
are represented by ,
separate elements.
Another way to create an array is through a Array()
function:
New // array created [1, 2, 3]
However, for the sake of readability of the code, it is strongly recommended to use it directly []
.
The elements of an array can be accessed through an index. Notice that the starting value of the index is 0
:
var NULL true ];arr[// Returns an element with an index of 0, that is, 1// Returns an element with an index of 5, that is, true// Index is out of range, Back to undefined
Object
The object of JavaScript is a set of unordered collections of key-values, "The dictionary in Python" for example:
var person = { ' Bob ', Tags: [' js ', ' web ', ' mobile '], ' Beijing ', true, null};
The key of a JavaScript object is a string type, and the value can be any data type. All of the above person
objects define a total of 6 key-value pairs, each of which is also called an object's properties, for example, the property is person
name
‘Bob‘
zipcode
null
.
To get the properties of an object, we use 对象变量.属性名
the following method:
// ' Bob ' // NULL
variables
The concept of variables is basically the same as the equation variables in junior algebra, but in computer programs, variables can be not only numbers, but also arbitrary data types.
Variables are represented in JavaScript by a variable name, which is a combination of uppercase and lowercase English, numeric, and numeric, and $
_
cannot begin with a number. The variable name is also not a JavaScript keyword , such as, and if
while
so on, variable names can also be used in Chinese, but, please do not find trouble for themselves.
declare a variable with a var
statement , such as:
var // The variable A is declared, at which point a value is undefined var // The variable $b is declared, and the value of the $b is assigned to the $b at this time, which is 1. var // s_007 is a string var true // answer is a Boolean value of True var NULL // The value of T is null
Use equals = To assign, and can be assigned multiple times (even to different types), but only once with Var.
var // the value of A is an integer 123 // a becomes a string
This type of variable itself is called Dynamic language, which corresponds to static language. Static languages must specify the variable type when defining the variable, and if the type does not match, an error is given. For example, Java is a static language, and the assignment statement is as follows:
int // A is an integer type variable, and the type is declared with int // Error: Cannot assign string to integer variable
This is why dynamic languages are more flexible than static languages.
Strict Mode
JavaScript at the beginning of the design, in order to facilitate learning for beginners, does not require the use of var
declaration variables. This design error has serious consequences: if a variable is used without a var
declaration, the variable is automatically declared as a global variable:
// I am now a global variable
In different JavaScript files on the same page, if you do not have var
to declare it, the variables i
will be used, causing i
the variables to interact with each other, resulting in hard-to-debug error results.
A var
variable that uses a declaration is not a global variable, its scope is confined to the body of the declared function of the variable (the concept of the function will be explained later), and the variable of the same name does not conflict with each other in the function body.
In order to fix the serious design flaw of JavaScript, ECMA introduced the strict mode in the follow-up specification, the JavaScript code that runs in strict mode, which is enforced by var
declaring variables, not using var
declaration variables, Will cause a run error.
The way to enable strict mode is to write on the first line of the JavaScript code:
' Use strict ';
This is a string, browsers that do not support strict mode will execute it as a string statement, and browsers that support strict mode will turn on strict mode to run JavaScript.
Variables that are not var
declared are considered global variables, and in order to avoid this flaw, all JavaScript code should use the strict pattern. The JavaScript code we write later will all be in strict mode.
JavaScript Learning Basics "1th article": Getting Started with JavaScript