Development of JavaScript
JS was developed by Netscape. After JS was developed, ECMAScript, es, was formulated to make js a global standard. That is to say, es is a language standard, and JS is an implementation of es
js nested in html
js function code,It is recommended to insert between the heads. Before loading the body of the page document and the rest of the code. web The content is parsed from top to bottom in the browser, head The script in the body The script in is processed first. So it's best to include all the predefined functions js Code on the head
Some brief js Event codes can be written directly in the html Inside the label, Format: onclick=javascript:Function name() The specific function is written in the embedded head of js In code
onload When the web page is downloaded to the browser, it will execute if onload Need access html label For the defined object, you need to ensure that the object precedes the onload Script execution. therefore onload The function should be written in body Medium rather than head
js Put on body The main body is used to realize the dynamic creation of documents in some parts
How to introduce js?
-
Directly use the script tag, and the type attribute defaults to "text/javascript"
<script> alert("hello world"); </script>
-
Use the script tag attribute src to embed the external js file
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
-
Use a pseudo url to introduce, such as
<button value="click" onclick="JavaScript:console.log('Click this button')"></button>
Semicolon of js basic syntax
The ASI mechanism in js allows us to omit semicolons
"The ASI mechanism does not mean that the parser will automatically add semicolons to the code during parsing, but that the parser will take the semicolon change behavior as the basis for sentence breaking according to certain rules, so as to ensure the correctness of parsing."
Enhance code readability and reduce ambiguity. It is recommended to add semicolons and do not write multiple statements in one line
Data type of js basic syntax
-
Number
js does not distinguish between integers and floating-point numbers. Whether it is 1 or 1.0, it is Number. In particular, NaN,Infinity, is also of type Number. NaN, that is, not a number, means that the result cannot be calculated. Infinity means infinity, which means that it exceeds the maximum value that Number can represent
Especially different from java,js integers also have remainder operations, such as 3% 1.25 = 0.50
-
character string
For text wrapped in single quotation marks or double quotation marks, the attribute and attribute value are generally expressed in double quotation marks in json, and single quotation marks are used in other times
-
Boolean value
In particular, js has two kinds of judgment, one is = =. One is = = =. When = = = is used, the comparison value will be automatically transformed. For example, 1 = = '1' returns true, while = = = will not transform the data
In particular, NaN is not equal to any value, and even NaN = =, NaN will get false
-
null
-
undefined
It means undefined. It is used to judge whether function parameters are passed
-
array
js array, which can hold any data type, is also an object
var arr=[1,'1',true,null,undefined] //In addition, var arr = new Array(1,'1') can also be used to create an array; //For the consideration of simplicity, readability and execution speed, the previous one is used
In particular, the array type can modify the properties of the object, such as arr.length=1, which will directly modify the capacity of the array, and those that cannot be accommodated will be deleted. If arr.length=100, the null of the original length will be increased by 100
We can take values by subscript, such as arr[0],js does not check the array out of bounds. When accessing out of bounds elements, we will get an undefined value
js array supports direct expansion and reduction of the array. Use arr.push (x) for expansion and arr.pop() for reduction. These two methods are aimed at the end of the array. For array headers, you can use the unshift(x) and shift() operations
-
object
A collection of key value pairs. Values can be of any data type
var person={ name:'lihua'; age:20; tags: ['handsome','cute']; };
To obtain object properties, refer to the object variable. Property name
person.name;//'lihua'
js basic syntax promotes the scope when declaring variables
Before the es6 standard, var was used as the only variable declaration keyword
"varHoisting: using var to declare a variable anywhere within a function or global is equivalent to declaring it at the top of its interior (within a function or global). This behavior is called Hoisting."
In particular, the declaration is only promoted here, and the assignment operation is still in the original position
function demo(){ console.log(x);//Undefined, no error will be reported here, not defined var x=1; console.log(x);//1 }
Example 1:
var x = 1; function foo() { var x = 2; console.log(x); } foo(); // => 2 console.log(x); // => 1
Control statements are also included anywhere in varHoisting. In other words, var has no block level scope, and the variables declared in the block will also be promoted to the top of the function or global
Example 2:
function foo() { for (var i = 1; i < 10; i++) {} if (true) { var x = 2; } console.log(i); // => 10 console.log(x); // => 2 } foo();
Example 3:
var x = 1; if (true) { var x = 10; // Same name as external x variable } console.log(x); // => 10 The above code is equivalent to var x; x = 1; if (true) { x = 10; } console.log(x); // => 10
strict mode of js basic syntax
js did not force var to declare variables at the beginning of its design. This design has serious consequences. If a variable is not declared through var, the variable will automatically become a global variable. The consequence of this is that different js files will be affected by variables with the same name
The variable declared with var is not a global variable, its scope is limited to the function body in which the variable is declared, and the variables with the same name do not conflict with each other in different function bodies.
To solve this problem, es introduces the strict mode. Write 'use strict' in the first line of js code to start the strict mode