Variable learning



  • 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


  • 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
      // 1. Declare variables
      var age; // Declare a variable named age
  • 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
      // 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
  • =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
      // Initialization of variables
      var age = 10; // The declared variable is also assigned a value of 10
      console.log(age); // 10

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 , my salary is 2000

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      var myname = "Qimukakassi";
      var address = "Huoying Village";
      var age = 30;
      var email = "";
      var gz = 2000;
      console.log(myname, address, age, email, gz); // Qimukakasi Huoying village 30 two thousand

Case: use of variables

  1. An input box pops up, prompting the user to enter the name.
  2. A dialog box pops up to output the name just entered by the user.
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      // 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

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.

      // 1. Update variables
      var myname = "pink teacher";
      console.log(myname); // Teacher pink
      myname = "Delireba";
      console.log(myname); // Delireba
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.

      // 2. Declare multiple variables
      // var age = 18;
      // var address = "Huoying village";
      // var gz = 2000;
      var age = 18,
        address = "Huoying Village",
        gz = 2000;
3. Special cases of declared variables
var age; console.log(age);Only declaration without assignmentundefined
console.log(age)No declaration, no assignment, direct usereport errors
age = 10; console.log(age);No declaration, only assignment10
      // 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

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)

      // 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

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

Keywords: Javascript Front-end html

Added by Mobile on Wed, 09 Mar 2022 10:39:49 +0200