1. Variables
1. Our JavaScript code is written in the script tag
2. We define a variable named name, and its value is "Zhang San"
3. Open the console of the developer tools and view the print results
<!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(二) ECMAScript</title>
</head>
<body>
</body>
<script>
let name = "张三";
console.log(name);
</script>
</html>
Come directly to us, we can change the value of name to 18
<script>
let name = "张三";
name = 18;
console.log(name);
</script> 
2. Data type
1. Each programming language defines data types. The purpose of data types is to hold corresponding data.
2. Currently there are 5 simple data types and 1 complex data type in JavaScript
1. Take a look at 5 simple data types
undefined --- undefined
null --- null
Boolean --- Boolean type
number --- number type
String --- string type
2. Complex data type Object
Object --- Object type
3. Use the typeof operator to detect the data type
Let’s take a practical look at how to define variables for various types of data.
(1), number, string type
<script>
let name = "张三";
console.log(typeof(name));
name = 18;
console.log(typeof(name));
</script> 
（二） boolean、undefined、null
<script>
//定义boolean(布尔类型)
let flag = true; //可以等于false
console.log(typeof(flag));
//定义一个undefined类型
let msg;
console.log(typeof(msg));
//定义一个null类型（typeof 无法检测出null的类型）
let people = null;
console.log(typeof(people));
</script>
(3) Define an object variable
<script>
//定义object类型数据，该对象表达的含义是，定义了一个人，她的名字叫索菲亚，年龄18岁，性别是一个女孩
let people = {
name: "索菲亚",
age: 18,
gander: "female"
};
console.log(typeof(people));
</script> 
3. Operator
Calculation operators: addition, subtraction, multiplication, division, remainder
Relational operators: greater than >, less than <, greater than or equal to >=, less than or equal to <=, equal ==
Boolean operator: logical NOT! , logical AND &&, logical OR ||
Conditional operator: a>b?true:false
1. Calculation operators: addition, subtraction, multiplication, division, remainder
<!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(二) ECMAScript</title>
<style>
body{
background-color: blueviolet;
}
</style>
</head>
<body>
</body>
<script>
//定义两个变量
let a = 8;
let b = 4;
//加法
console.log("计算a+b的结果",a+b);
console.log("number类型+字符串类型的数字，会拼接",a+"11");
console.log("number类型+用Number转化的字符串类型的数字，会执行加法",a+Number("11"));
//减法
console.log("计算a-b的结果",a-b);
//乘法
console.log("计算a*b的结果",a*b);
//除法
console.log("计算a/b的结果",a/b);
//除法
console.log("计算a%b的结果",a%b);
</script>
</html>
2. Relational operators: greater than >, less than <, greater than or equal to >=, less than or equal to <=, equal ==
<script>
//定义两个变量
let a = 8;
let b = 4;
console.log("a>b ",a>b);
console.log("a<b ",a<b);
console.log("a<=b ",a<=b); //a小于等于b，肯定是假，打印值就为false
console.log("a>=b ",a>=b);
console.log("a==b ",a==b); //a是否等于b，肯定是假
</script>
3. Boolean operator: Logical NOT! , logical AND &&, logical OR ||
<script>
/*
逻辑非：符号是!
含义：我们一般是将结果的boolean取非，也就是取相反的值
*/
console.log("逻辑非");
console.log(!false);
console.log(!(2>3));
/*
逻辑与：符号是 &&
含义：需要两个值同时满足true才能得到true的结果
*/
console.log("逻辑与");
console.log("只有当，一个值为true，另一个值也为true，那么结果才能为true ",true&&true);
console.log("一个值为true，一个值为false，那么结果就是false ",true&&false);
/*
逻辑或：符号是 ||
含义：两个值中，只要有一个值为true，那得到结果就为true
*/
console.log("逻辑或");
console.log("两个值中，只要有一个值为true，那得到结果就为true ", true||false);
console.log("只有当，两个值都为false，那得到结果就为false ", false||false);
</script>
4. Conditional operator: a>b?true:false
<script>
let a = 1;
let b = 2;
let result = a>b?"哈哈哈哈":"噢噢噢噢";
console.log("a是否大于b,如果大于就显示问号(?)后面的结果，如果不大于就像是冒号(:)的结果 ",result);
</script>
4. Statements: if, while, for, switch
1. if conditional statement
<script>
let i = 26;
if(i>25){
console.log("进入true条件的代码块");
}else{
console.log("进入false条件的代码块");
}
//简写
if(i>25)console.log("简写,进入true条件的代码块")
//多个条件语句
let result = 55;
if(result>90){
console.log("优秀");
}else if(result>80 && result<=90){
console.log("良好");
}else if(result>=60 && result<=80){
console.log("一般");
}else{
console.log("不及格");
}
</script>2. while statement
The while statement is a pre-test loop statement, that is. The exit condition is evaluated before the code within the loop body is executed. Therefore, the code inside the loop may never be executed.
<script>
let a = 0;
while(a<10){
a= a+1;
}
console.log("a=",a);
</script>3. for statement
The for statement is also a pre-test loop statement, but it has the ability to initialize variables before executing the loop and define the code to be executed after the loop. The following is an example of a for statement.
<script>
let count = 10;
for(let i=0;i<count;i++){
console.log("普通for循环 打印i值得变化",i);
}
//另一种for in写法
let arr = [1,2,3,4]; //定义了一个数组
for(let i in arr){
console.log("for-in 打印i值得变化",i);
}
</script>
4. switch statement
The switch statement is used to perform different actions based on different conditions. It is very similar to if and else if. The difference is that switch performance is better. However, computer performance is no longer a big problem at present, so whether to use if or switch depends on the specific situation.
<script>
let n = 2;
switch(n)
{
case 1:
console.log("进入1");
break;
case 2:
console.log("进入2");
break;
case 3:
console.log("进入3");
break;
default:
console.log("没有符合条件时，执行默认语句");
}
</script>There is a keyword break here, its meaning is to jump out of the current loop. When n=2 hits the condition, switch will jump out directly .
5. Function
Functions are a core concept for any statement. It can encapsulate multiple statements for unified execution. It is declared with the keyword function
1. Let’s first feel the function
<!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(二) ECMAScript</title>
</head>
<body>
</body>
<script>
//用function 定了一个叫 people的函数
function people(){
let name = "张三";
let age = 18;
let bodyHeight = 180;
console.log("姓名=",name);
console.log("年龄=",age);
console.log("身高=",bodyHeight);
}
//调用函数
people();
</script>
</html>
2. Understand the parameters of functions
Usually when we use functions, we sometimes need to get a calculation result, such as an addition function. The code is as follows
<script>
let result = sum(1,2);
console.log("打印result结果",result);
function sum(sum1,sum2){
return sum1+sum2;
}
</script>Pay attention to three points
return represents the end of the statement and returns the result.
sum1 is a formal parameter, representing 1
sum2 is a formal parameter, representing 2
3. Deepen understanding of parameters
ECMAScript function parameters differ from function parameters in most other languages. It doesn't care how many parameters are passed in, nor what data type the parameters are created with. That is to say, even if the function you define only accepts two parameters, you may not need to pass two parameters when calling.
The reason for this is because the parameters are represented internally by arrays. We can use arguments to access the parameter array, like this
arguments[0] accesses the first element in the argument array
arguments[1] accesses the second element in the arguments array
<script>
let result = sum(1,2);
console.log("打印result结果",result);
function sum(){
console.log(arguments[0],arguments[1]);
return arguments[0]+arguments[1];
}
</script>
6. Conclusion
Beginners should go through these cases carefully. The most important thing is to understand the structure of knowledge and the meaning of knowledge, so that they don't have to memorize and practice everything, but can find solutions by asking questions.
The process of laying the foundation is still a bit boring. The next step is to learn reference type data. After thoroughly mastering the use of all data types, you can truly develop functions and then persist.