文章目录

变量

变量

1. 学习目标

能够说出变量的主要作用
能够写出变量的初始化
能够说出变量的命名规范
能够画出变量
是如何在内存中存储的
能够写出交换变量案例

2.变量的概述

目标:理解变量是计算机存储数据的“容器”

2.1.导语

用户输入的数据我们如何存储起来？
在这里插入图片描述

答案：变量

3. 变量的含义

变量：用大白话来说，变量就是一个装东西的盒子。通俗一点就是，变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。
在这里插入图片描述
注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

4. 变量的基本使用

4.1 变量的声明方式

声明(定义)变量有两部分构成：声明关键字、变量名（标识）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // let 变量名
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age;
  </script>
</body>
</html>

关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 let 的含义是声明变量的，看到 let 后就可想到这行代码的意思是在声明变量，如 let age;

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！

4.2 变量的赋值

在这里插入图片描述

声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。
定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。
注意：是通过变量名来获得变量里面的数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age;
    // 赋值，将 18 这个数据存入了 age 这个“容器”中
    age = 18;
    // 这样 age 的值就成了 18
    document.write(age);
    
    // 也可以声明和赋值同时进行
    let str = 'hello world!';
    alert(str);
  </script>
</body>
</html>

4.3 变量的初始化

也可以声明变量的时候同时给变量初始化。
在这里插入图片描述

4.4 更新变量：

变量赋值后，还可以通过简单地给它一个不同的值来更新它。
在这里插入图片描述

注意： let 不允许多次声明一个变量。

4.5 声明多个变量：

变量赋值后，还可以通过简单地给它一个不同的值来更新它。
同时声明多个变量时，只需要写一个var，多个变量名之间使用 英文逗号 隔开。

在这里插入图片描述

4.6 声明变量的特殊情况

在这里插入图片描述

4.6.1 只声明不赋值

结果是?
程序也不知道里面存的是啥,所以结果是undefined 未定义的

var sex;
console.log(sex);

4.6.2 不声明不赋值

直接使用某个变量会报错滴😁

console.log(tel);

4.6.3 不声明直接赋值使用

qq = 110;
console.log(qq);

4.7 总结

在这里插入图片描述

4.8 变量的使用

案例1：

有个叫卡卡西的人在旅店登记的时候前台让他填一张表，这张表里的内容要存到电脑上，表中的内容有:姓名、年龄.邮箱、家庭住址和工资，存储之后需要把这些信息显示出来，所显示的内容如下:
我叫旗木卡卡西，我住在火影村，我今年30岁了，我的邮箱是kakaxi@itcast.cn，我的工资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 name='小明';
        var address='北京';
        var age=30;
        var email='xiaoming@dfdv.cn';
        var gz=2000;
        console.log(name);
        console.log(address);
        console.log(age);
        console.log(email);
        console.log(gz);
    </script>
</head>
<body>
    
</body>
</html>

案例2

1．弹出一个输入框，提示用户输入姓名。
2．弹出一个对话框，输出用户刚才输入的姓名。

<!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．用户输入姓名存储到一个myname的变量里面
       var myname=prompt('请输入您的名字');

       // 2．输出这个用户名
       alert(myname);
    </script>
</head>
<body>
    
</body>
</html>

5.变量命名规范

规则：必须遵守，不遵守报错
规范：建议，不遵守不会报错，但不符合业内通识

5.1规则：

不能用关键字
– 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如 Age 和 age 是不同的变量

5.2 规范：

起名要有意义
遵守小驼峰命名法:第一个单词首字母小写，后面每个单词首字母大写。例：userName

5.3笔记

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

在这里插入图片描述

6. 练习题（交换两个变量的值）

要求:交换两个变量的值(实现思路:使用一个临时变量用来做中间存储)
解析：我们以苹果为例，进行交换苹果。在这里插入图片描述

js 是编程语言有很强的逻辑性在里面:实现这个要求的思路先怎么做后怎么做
1．我们需要一个临时变量帮我们
2．把apple1 给我们的临时变量temp
3．把apple2里面的苹果给apple1
4．把临时变量里面的值给apple2

<!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 temp;
      var apple1='青苹果';
      var apple1='红苹果';
      temp =apple1;
      apple1=apple2;
      apple2=temp;
      console.log(apple1);
      console.log(apple2);

    </script>
</head>
<body>
    
</body>
</html>