(3) Variables let and var
Previously, we learned that the var keyword is used to declare and create a variable. Generally, we use var to create global variables and let to create local variables.
Examples are as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript base</title>
</head>
<body>
<script>
var i = 10;
document.write(i + '<br/>'); // Here the output i is 10
{
let i = 2;
document.write(i + '<br/>'); // Here the output i is 2
}
document.write(i + '<br/>'); // Here the output i is 10
</script>
</body>
</html>Operation results:
Code analysis:
Use the let keyword to implement block level scope. The variables declared by let are only valid in the code block {} where the let command is located, and cannot be accessed outside {}. The curly braces outside the variable "let = i" make us better distinguish between var and let. let i # traverses the creation place, which is equal to a "local" and is isolated from the outside
First create a global variable called i, assign a value of 10, and then output i. at this time, the value of i is 10. Then use the keyword let to create the local variable i, assign a value of 2. In the local {}, the value of the local variable {i with the same name as the global variable is assigned to 2. In the local {}, the output value of the variable i is 2. Outside the local {}, output the global variable i again, The result is 10.
3, Array
3.1 concept of array
Array is a data set. Similar to the concept of variable, variable is a container for storing a value, and the types of this value can be varied. Array is a container for storing multiple values, and the types of these values can also be varied. Through an example to understand how to use arrays, array format specifications, etc.
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript base</title>
</head>
<body>
<!-- way 1 importance literal -->
<script>
var aaa = ["Dong A","Beijng" ,"Yuzu", 2022];
document.write(aaa);
</script>
<!-- way 2 routine -->
<script>
var bbb = Array ();
bbb [0] = "Dong A";
bbb [1] = "Beijng";
bbb [2] = "Yuzu";
bbb [3] = 2022;
document.write(bbb);
</script>
<!-- way 3 concise -->
<script>
var ccc = Array("Dong A","Beijng","Yuzu",2022);
document.write(ccc);
</script>
</body>
</html>
Operation results:
Code analysis:
The above describes the writing methods of three kinds of codes, mainly the first one, using the keyword var + array name = [data 1, data 2,..., data n]; Multiple values in the array are separated by commas.
3.2 array access and value
visit
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript base</title>
</head>
<body>
<p id="pID"></p>
<script>
var aaa=["Dong A","Beijng" ,"Yuzu", 2022];
document.getElementById("pID").innerHTML = aaa[0];
</script>
</body>
</html>Operation results:
Code analysis:
Through document Getelementbyid ("paragraph ID") InnerHTML = AAA [array element position]; Get element.
Note that array elements start with 0. The value cannot exceed the number of elements in this array (array length).
Value
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript base</title>
</head>
<body>
<p id="pID"></p>
<script>
var aaa=["Dong A","Beijng" ,"Yuzu", 2022];
aaa[0]="winter";
document.getElementById("pID").innerHTML = aaa[0];
</script>
</body>
</html>Operation results:
Code analysis:
By changing the value of the array through the index, the code changed the content of the first element of the array, that is, the content "Dong a" of aaa[0] just now, and changed it to "winter".
3.3 arrays and loops
Generally, arrays and loops are used together. For example, when making a website, some data in the web page needs to be transmitted from the back end. Sometimes these data appear in the format of arrays, and these data need to be displayed at the front end. It is very inconvenient to take them one by one. Therefore, combined with the loop in the previous section, we can get twice the result with half the effort.
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript base</title>
</head>
<body>
<p id="pID"></p>
<script>
var aaa=["Dong A","Beijng" ,"Yuzu", 2022];
for (let i = 0;i< aaa.length;i++)
{
document.getElementById("pID").innerHTML += aaa[i]+',';
}
</script>
</body>
</html>Operation results:
Code parsing
aaa.length indicates the length of the array named AAA;
document.getElementById("pID").innerHTML += aaa[i]+','; Because the array takes one at a time, but all the data of the array should be presented at last, the symbol "+ =" is used, and the value of I in AAA [i] will increase by 1 every time, but the value of I will not exceed the length of the current array AAA. The change of I value is to add the length of the array from 0.
3.4 array addition and deletion values
(1) Add elements in front of the array aaa, using unshift();
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript base</title>
</head>
<body>
<p id="pID"></p>
<!-- Add elements before the array with unshift()Method of -->
<script>
var ddd=["Dong A","Beijng" ,"Yuzu", 2022];
ddd.unshift("new_1","new_2");
for(let i=0;i<ddd.length;i++){
document.getElementById("pID").innerHTML += ddd[i]+',';
}
</script>
</body>
</html>Operation results:
Code analysis:
Using the unshift () method, two elements are added in front of the array ddd, namely new_1 and new_2 .
(2) add elements after array aaa, and use push();
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript base</title>
</head>
<body>
<p id="pID"></p>
<!-- New element -->
<script>
var ccc=["Dong A","Beijng" ,"Yuzu", 2022];
ccc.push("New element 1","New element 2");
for(let i=0;i<ccc.length;i++){
document.getElementById("pID").innerHTML += ccc[i]+',';
}
</script>
</body>
</html>Operation results:
Code analysis:
Using the push () method, two elements are added after the array aaa, namely, new element 1 and new element 2.
(3) Delete the first element and use shift();
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript base</title>
</head>
<body>
<p id="pID"></p>
<!-- Delete the first element with shift()Method of -->
<script>
var bbb=["Dong A","Beijng" ,"Yuzu", 2022];
bbb.shift();
for(let i=0;i<bbb.length;i++){
document.getElementById("pID").innerHTML += bbb[i]+',';
}
</script>
</body>
</html>Operation results:
Code analysis:
Using the method of shift (), the first element "Dong a" of the array bbb is deleted.
(4) Delete the last element and use pop();
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript base</title>
</head>
<body>
<p id="pID"></p>
<!-- Delete the last element with pop Method of -->
<script>
var aaa=["Dong A","Beijng" ,"Yuzu", 2022];
aaa.pop();
for(let i=0;i<aaa.length;i++)
{
document.getElementById("pID").innerHTML += aaa[i]+',';
}
</script>
</body>
</html>Operation results:
Code analysis:
The pop-up method is used to delete the last value of array aaa.
4, Object
1. Basic introduction to the object:
JavaScript objects are data that has properties and methods. In JavaScript, almost everything is an object.
In real life, a laptop is an object. Objects have their properties, such as weight and color, and methods include start and stop. All laptops have these properties, but the properties of each laptop are different. All laptops have these methods, but they are executed at different times.
An object is also a variable, but an object can contain multiple values (multiple variables), and each value is rendered in a name:value pair.
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript base</title>
</head>
<body>
<p id="pID"></p>
<script>
class laptop
{
brand ='';
color ='';
storage ='';
weight = 3;
}
var Asus = new laptop();
Asus.brand='ASUS';
Asus.color='black';
Asus.storage='2T';
Asus.weight = 2;
document.write(Asus.brand+Asus.color+Asus.storage+Asus.weight);
</script>
</body>
</html>Operation results:
Code analysis:
Class means that a class starts to be created, followed by a class name laptop. Write the attribute of the class in curly brackets after the class name, and the attribute is marked with "; "Separation;
var Asus = new laptop(); Looking from the right to the left indicates that a new class (with the keyword new) has been created. It is called laptop and assigned to the variable called ASUS on the left, so that the variable Asus has the attribute of laptop. Use the decimal point to call its attributes, assign values, and finally output.
There is another way to express it:
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript base</title>
</head>
<body>
<p id="pID"></p>
<script>
var laptop = {brand:"Asus", color:"break", Storage:"2T"};
for(let i in laptop){
document.write(i+':'+laptop[i]+' ');
}
</script>
</body>
</html>Operation results:
Code analysis: use key value pairs in the curly braces of the class, that is, the method of Name: value. Note that the name and value are separated by colons, and there will be indexes in the output results to make the content of the value more clear.
2. Create multiple objects at the same time
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript base</title>
</head>
<body>
<p id="pID"></p>
<script>
class laptop
{
brand ='';
color ='';
storage ='';
weight = 3;
}
var Asus = new laptop();
Asus.brand='ASUS';
Asus.color='black';
Asus.storage='2T';
Asus.weight = 2;
var HP = new laptop();
HP.brand='HP';
HP.color='silver';
HP.storage='1.5 T';
HP.weight = 1;
document.write(Asus.brand+Asus.color+Asus.storage+Asus.weight +'<br/>');
document.write(HP.brand+HP.color+HP.storage+HP.weight+'<br/>');
</script>
</body>
</html>Operation results:
Code analysis: two objects of the same class laptop are created, Asus and HP
(3) Create functions using object methods
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript base</title>
</head>
<body>
<p id="pID"></p>
<script>
class laptop
{
brand ='';
color ='';
storage ='';
weight = 3;
greeting()
{
document.getElementById("pID").innerHTML += 'We will help you log in, network and configure your computer. You can start using it soon';
}
}
var Asus = new laptop();
Asus.brand='ASUS';
Asus.color='black';
Asus.storage='2T';
Asus.weight = 2;
Asus.greeting();
var HP = new laptop();
HP.brand='HP';
HP.color='silver';
HP.storage='1.5 T';
HP.weight = 1;
HP.greeting();
document.write(Asus.brand+','+Asus.color+','+Asus.storage+','+Asus.weight +'<br/>');
document.write(HP.brand+','+HP.color+','+HP.storage+','+HP.weight+'<br/>');
</script>
</body>
</html>Operation results:
Code analysis: the function greeting() is added to the class to output a prompt
(4) Loop through pair properties
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript base</title>
</head>
<body>
<p id="pID"></p>
<script>
class laptop
{
brand ='';
color ='';
storage ='';
weight = 3;
greeting()
{
document.getElementById("pID").innerHTML += 'Hi';
}
}
var Asus = new laptop();
Asus.brand='ASUS';
Asus.color='black';
Asus.storage='2T';
Asus.weight = 2;
Asus.greeting();
for(let i in Asus)
{
document.write(i+':'+Asus[i]+' ');
}
</script>
</body>
</html>Operation results:
Code analysis:
for(let i in Asus)
{
document.write(i+':'+Asus[i]+' ');
}
Mainly look at the above code. The ini value goes into the Asus object to find the corresponding attribute value, and Asus[i] represents the elements in the array. The I ， in the array will represent the attributes brand, color, storage, weight and greeting in turn, and Asus[i] will be equal to Asus[brand], Asus[color], Asus[storage], Asus[weight] and Asus[greeting()], You can replace the corresponding value.