第一章：变量概述

1.1 什么是变量？

  • 白话：变量就是一个装东西的盒子。
  • 通俗：变量是用于存放数据的容器，我们可以通过变量名获取数据，甚至修改数据。

什么是变量.jpg

1.2 变量在内存中的存储

  • 本质：变量是程序在内存中申请的一块用于存放数据的空间。
  • 类似于酒店的房间，一个房间就可以看做是一个变量。

变量在内存中的存储.jpg

第二章：变量的使用

2.1 概述

  • 变量在使用的时候分为两步：
    • ①声明变量。
    • ②赋值。

2.2 声明变量

  • 语法：
  1. //声明变量
  2. var age; //声明了一个名为age的变量
  • var是JS的关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机会自动为该变量分配内存空间，不需要程序员管。
  • age是程序员定义的变量，我们要通过变量名来访问内存中分配的空间。

2.2 赋值

  • 语法：
  1. age = 18; //给age这个变量赋值为18
  • =用来将右边的值赋值给左边的变量空间，此处代表的是赋值的意思。
  • 变量值是程序员保存到变量空间的值。

2.3 变量的初始化

  • 语法：
  1. var age = 18;//声明变量的同时赋值
  • 声明一个变量并赋值，我们称之为变量的初始化。

2.4 变量的应用示例

  • 示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>变量的应用示例</title>
  9.     <script>
  10.         /* 
  11.             有个叫卡卡西的人在旅店登记的时候前台让他填一张表，这张表里的内容要存到电脑上，表中的内容有：姓名、年龄、邮箱、家庭住址和工资，存储之后需要把这些信息显示出来，所显示的内容如下：
  12.             我叫旗木卡卡西，我住在火影村，我今年30岁了，我的邮箱是 kakaxi@qq.com，我的工资2000
  13.          */
  14.         var name = "旗木卡卡西";
  15.         var address = "火影村";
  16.         var age = 30;
  17.         var email = "kakaxi@qq.com";
  18.         var salary = 2000;
  19.         console.log("我叫：" + name + ",我住在：" + address + ",我今年：" + age + "了,我的邮箱是：" + email + ",我的工资是：" + salary)
  20.     </script>
  21. </head>
  23. <body>
  25. </body>
  27. </html>
  • 示例：
<!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>变量的应用示例2</title>
    <script>
        // 弹出一个输入框，提示用户输入姓名
        var name = window.prompt("请输入姓名");
        // 弹出一个对话框，输出用户刚才输入的姓名
        window.alert("你刚才输入的姓名是:" + name);
    </script>
</head>

<body>

</body>

</html>

第三章：变量语法扩展

3.1 更新变量

  • 一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
var age = 18;
age = 28; //最后的结果是81，因为18被覆盖掉了
  • 示例：
<!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>更新变量</title>
    <script>
        var age = 18;
        console.log(age);
        age = 28;
        console.log(age);
    </script>
</head>

<body>

</body>

</html>

3.2 同时声明多个变量

  • 同时声明多个变量，只需要写一个var，多个变量名之间使用英文逗号隔开。
var age = 10 , name = '张三' , sex = '男';
  • 示例：
<!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>同时声明多个变量</title>
    <script>
        var age = 18, name = "张三", sex = "男";
        console.log(age);
        console.log(name);
        console.log(sex);
    </script>
</head>
<body>

</body>
</html>

3.3 声明变量的特殊情况

情况 说明 结果
var age;console.log(age); 只声明，不赋值。 undefined
console.log(age); 不声明，不赋值，直接使用。 报错
age = 10;console.log(age); 不声明，只赋值。 10
  • 示例：
<!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>声明变量的特殊情况</title>
    <script>
        // 只声明不赋值,结果是？ 程序也不知道里面存的是什么，所以结果是undefined，未定义的。
        var sex;
        console.log(sex); //undefined

        //不声明，只赋值
        age = 10;
        console.log(10); //10

         //不声明不赋值直接使用会报错
        console.log(tel);

    </script>
</head>

<body>

</body>

</html>

第四章：变量命名规范

  • 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
  • 严格区分大小写。var app; 和 var App; 是两个变量
  • 不能 以数字开头。 18age 是错误的
  • 不能 是关键字、保留字。例如：var、for、while
  • 变量名必须有意义。 MMD BBD nl → age
  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
  • 推荐翻译网站： 有道 爱词霸。

第五章：交换变量案例

  • 示例：
<!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>交换变量</title>
    <script>
        var a = 10;
        var b = 20;
        console.log("交换之前：a=" + a + ",b=" + b);
        var c = a;
        a = b;
        b = c;
        console.log("交换之后：a=" + a + ",b=" + b);
    </script>
</head>

<body>

</body>

</html>