1、变量的概述

1.1、什么是变量

在这里插入图片描述

1.2、变量在内存中的存储

在这里插入图片描述

2、变量的使用

2.1、声明变量

在这里插入图片描述

2.2、赋值变量

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1、声明变量
        var age;
        //2、给变量赋值
        age = 18;
        //3、输出变量
        console.log(age);
    </script>
</head>
<body>
    
</body>
</html>

2.3、变量的初始化

 //4、变量的初始化
  var myname='pink老师';
  console.log(myname);

2.4、案例1

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var name='旗木卡卡西';
        var address='火影村';
        var age = 30;
        var email = 'kaka@qq.com';
        var gz=2000;
        console.log(name);
        console.log(address);
        console.log(age);
        console.log(email);
        console.log(gz);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2.5、案例2

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1、用户输入姓名，存储到myname变量中去
        var myname = prompt('请输入用户名');
        // 输出这个用户名
        alert(myname);
    </script>
</head>
<body>
    
</body>
</html>

3、变量语法拓展

3.1、更新语法

在这里插入图片描述

 //1、更新变量
        var myname='pink老师';
        console.log(myname);
        myname='迪丽热巴';
        console.log(myname);

3.2、同时声明多个变量

在这里插入图片描述

//2、同时声明多个变量
var age = 18,
    name = 'pink',
    gz = 2000;

3.3、声明变量特殊情况

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      
        // 3、声明变量的特殊情况
        // 3.1、只声明不赋值结果是？ 程序也不知道里边存的是啥，所以结果是 undefined 未定义的
        var sex;
        console.log(sex); //undefiend
        //3.2、不声明 不赋值 直接使用某个变量会报错的
        console.log(tel);
        //3.3、不声明直接赋值也可以使用
        qq = 110;
        console.log(qq);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

4、变量的命名规范

在这里插入图片描述

5、课堂案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1、创建一个临时变量
        //2、把apple1的值给临时变量
        //3、把apple2的值给apple1
        //4、把临时变量的值给给apple2
        var temp;
        var apple1 = '青苹果';
        var apple2 = '红苹果';
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1);
        console.log(apple2);
    </script>
</head>
<body>
    
</body>
</html>