variable
target
- Be able to say the main role of variables
- Can write the initialization of variables
- Be able to say the naming convention of variables
- Can draw how variables are stored in memory
- Be able to write cases of exchange variables
catalogue
- Variable overview
- Use of variables
- Variable syntax extension
- Variable naming convention
- Exchange variable case
1. Overview of variables
1.1 what are variables
Vernacular: a variable is a box of things.
Popular: a variable is a container for storing data. We obtain data through the variable name, and even the data can be modified.
1.2 storage of variables in memory
Essence: a variable is a piece of space applied by a program in memory for storing data.
Similar to our hotel room, a room can be regarded as a variable.
2. Use of variables
Variables can be used in two steps: 1 Declare variable 2 assignment
1. Declare variables
<script>
// 1. Declare variables
var age; // Declare a variable named age
</script>
- var is a JS keyword used to declare variables (the meaning of variable variable). After using this keyword to declare a variable, the computer will automatically allocate memory space for the variable, which does not need to be managed by the programmer.
- age is the variable name defined by the programmer. We need to access the allocated space in memory through the variable name.
2. Assignment
<script>
// 1. Declare variables
var age; // Declare a variable named age
// 2. Assign a value and pass it into the variable
age = 10; // Assign a value of 10 to this variable
// 3. Output results
console.log(age); // 10
</script>
- =Used to assign the value on the right to the variable space on the left. This represents the meaning of assignment.
- Variable value is the value that the programmer saves in the variable space.
3. Initialization of variables
<script>
// Initialization of variables
var age = 10; // The declared variable is also assigned a value of 10
console.log(age); // 10
</script>
Declaring and assigning a variable is called variable initialization.
Case: use of variables
A man named Kakashi was asked by the front desk to fill out a form when he registered in the hotel. The contents of this form should be stored on the computer. The contents in the form include: name, age, email address, home address and salary. After storage, these information should be displayed. The displayed contents are as follows:
My name is qimukakassi. I live in Huoying village. I'm 30 years old. My email is kakaxi@itcast.cn , my salary is 2000
<!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>Document</title>
<script>
var myname = "Qimukakassi";
var address = "Huoying Village";
var age = 30;
var email = "kakaxi@itcast.cn";
var gz = 2000;
console.log(myname, address, age, email, gz); // Qimukakasi Huoying village 30 kakaxi@itcast.cn two thousand
</script>
</head>
<body></body>
</html>
Case: use of variables
- An input box pops up, prompting the user to enter the name.
- A dialog box pops up to output the name just entered by the user.
<!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>Document</title>
<script>
// 1. The name entered by the user is stored in a myname variable
var myname = prompt("Please enter your name");
// 2. Output the user name
alert(myname);
</script>
</head>
<body></body>
</html>
3. Variable syntax extension
1. Update variables
After a variable is re assigned, its original value will be overwritten, and the value of the variable will be subject to the last assigned value.
<script>
// 1. Update variables
var myname = "pink teacher";
console.log(myname); // Teacher pink
myname = "Delireba";
console.log(myname); // Delireba
</script>
2. Declare multiple variables at the same time
When declaring multiple variables at the same time, you only need to write a var, and the names of multiple variables are separated by English commas.
<script>
// 2. Declare multiple variables
// var age = 18;
// var address = "Huoying village";
// var gz = 2000;
var age = 18,
address = "Huoying Village",
gz = 2000;
</script>
3. Special cases of declared variables
| situation | explain | result |
|---|---|---|
| var age; console.log(age); | Only declaration without assignment | undefined |
| console.log(age) | No declaration, no assignment, direct use | report errors |
| age = 10; console.log(age); | No declaration, only assignment | 10 |
<script>
// Special case of declaring variables
// Only declare no assignment, and the result is? The program also does not know what is stored in it. All results are undefined and undefined
var sex;
console.log(sex); // Undefined undefined
// Using a variable directly without declaration or assignment will report an error
// console.log(tel);
// Use of direct assignment without declaration
qq = 110;
console.log(qq); // 110 not advocated
</script>
4. Variable naming specification
- It consists of letters (A - Za - z), numbers (0 - 9), underscores () Combination of dollar sign ($), such as usrAge, num01_ name
- Strictly case sensitive. var App; And var App; Are two variables
- Cannot start with a number. 18age is wrong
- Cannot be keyword or reserved word. For example: var, for, while
- Variable names must be meaningful.
- Follow the hump nomenclature. The first letter is lowercase, and the first letter of the following word needs to be capitalized. myFirstName
- Promote translation website: Youdao aiciba
Case: classroom practice
Requirements: exchange the values of two variables (implementation idea: use a temporary variable as intermediate storage)
<script>
// js is a programming language with strong logic: the idea of realizing this requirement is how to do it first and then how to do it
// 1. We need a temporary variable to help us
// 2. Give us the temporary variable temp from apple1
// 3. Give the apple in apple2 to apple1
// 4. Give the value in the temporary variable to apple2
var temp; // A temporary variable was declared null
var apple1 = "green apple";
var apple2 = "Red apple";
temp = apple1; // Give the right to the left
console.log(temp); // green apple
apple1 = apple2;
console.log(apple1); // Red apple
apple2 = temp;
console.log(apple2); // green apple
</script>
5. Summary
- Why do I need variables?
- Because we need to save some data, we need variables
- What are the variables?
- A variable is a container for storing data. It is convenient for us to use the data in it in the future
- A variable is a space in memory that is used to store data
- When we use variables, we must declare variables and then assign values
- What is the essence of variables?
- The essence of declaring variables is to apply for memory space
- How are variables used?
- When we use variables, we must declare variables and then assign values
- What is variable initialization
- Declaring variables and assigning values is called variable initialization
- What are the variable naming conventions?
- The variable name should be standardized as far as possible. See the meaning of name - hump naming method
- The idea of exchanging two variable values?
- Learn to swap 2 variables