JavaScript 变量及案例练习

变量

一. 变量是什么:

问题1: 用户输入的数据我们如何存储起来?

答案1: 使用变量

理解变量是如何存储数据的 “容器”

**变量: **
- 白话: 变量就是一个装东西的盒子
- 通俗: 变量是计算机中用来存储数据的 “容器” , 它可以让计算机变得有记忆
- 注意: 变量不是数据本身, 它们仅仅是一个用于存储数值的容器, 可以理解为是一个个用来装东西的纸箱子

变量是盒子, 里面存储的东西是数据.

变量有什么作用呢?

用来存储数据的. 注意变量指的是容器而不是数据.

生活中的变量:

HTML标签
教室
宿舍
杯子
…

二. 变量的基本使用

1. 声明变量

要想使用变量, 首先需要创建变量 (也称为声明变量或者定义变量)

语法:
```
let 变量名
```
- 声明变量有两部分构成: 声明关键字, 变量名(标识)
- let 即关键字(let: 允许, 许可, 让, 要), 所谓关键字是系统提供专门用来声明 (定义) 变量的词语
  
  当然有的小伙伴说var 也可以, 但是请大家把var忘掉, 它是我们的前任他不适合我们, 适合的话也不会变成前任了
举例:
```
// 1. 声明一个年龄的变量
let age;
```
- 我们声明了一个age变量
- age即变量的名称, 也叫做标识符

2. 变量赋值

定义开了一个变量后, 你就能够初始化它(赋值). 在变量名后跟一个 “=” , 然后是数值.

在这里它 “=” 不叫等号, 叫做赋值号

// 1. 声明一个年龄的变量
let age;
age = 18  //把18给age

age: 变量

18: 字面量

注意: 是通过变量名来获得变量里的数据

// 1. 声明一个年龄的变量
let age;
age = 18  //把18给age
console.log(age)

此时现在控制台上就有了18这个数据

变量的初始化:

声明变量的同时直接赋值

let age = 18

这个变量不再是空的了, 叫做初始化变量为18

总结:

变量是使用什么关键字来声明?
- let
变量通过什么符号来赋值?
- = 这个符号我们也称为赋值运算符

变量练习

需求:

声明一个变量, 用于存放用户购买的商品 ==数量(num) ==为 20件
声明一个变量, 用于存放用户的姓名(uname) 为 ‘张三’
依次控制台打印输出两个变量

// 用户购买的商品
let num = 20;
// 用户姓名
let uname = '张三'
//控制台打印
console.log(num)
console.log(uname)

3. 更新变量

变量赋值后, 还可以通过简单地给它一个不同的值来更新它

// 用户年龄
let age = 18;
// 更新变量
age = 19;

错误的写法

// 用户年龄
let age = 18;
// 更新变量
// 注意不能这样写
let age = 19; //控制台会报错

如果使用var来声明变量

// 如果使用var来声明变量
var agevar = 18;
// 更新变量
var agevar = 19;

//控制台打印
console.log(agevar)

此时控制台出现 19 并且一个false undefined, 所以说这里我们不使用var了, 它是我们的前任, 有一定的问题

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

4. 声明多个变量

语法: 多个变量中间用逗号隔开

let age = 18, uname = '张三'
console.log(age, uname)

并不提倡大家这么写

*提倡大家还是一行只声明变量一个变量, 为了更好的可读性 *

总结:

变量赋值后如何更新新值?
- 直接给他一个不同的值来更新它, 注意不可加 let
我们提倡同时声明多个不同的变量吗?
- 不提倡, 可读性不好

1. 变量案例-弹出姓名

需求: 浏览器中弹出对话框: 请输入姓名, 页面中输出: 刚才输入的姓名

// 1. 用户输入
// prompt('请输入姓名')
// 2. 内部处理保存数据
let uname = prompt('请输入姓名')
// 3. 打印输出
document.write(uname)

2. 变量案例-交换变量的值

需求:

有2个变量: num1 里面放的是 10 , num2 里面放的是 20

最后变为 num1 里面放的是 20 , num2 里面放的是 10

目的:

练习变量的使用
为了后面冒泡排序做准备

分析:

核心思路: 使用一个临时变量用来做中间存储

// 临时变量
let temp;
let num1 = 10;
let num2 =20;
// num1 = temp //这么写是错误的
// 我们的变量是把右边的给左边
temp = num1
// 把num2的值给num1
num1 = num2
num2 = temp
document.write(num1,num2)

三. 变量的本质

**内存: **计算机中存储数据的地方, 相当于一个空间

变量的本质: 是程序在内存中申请的一块用来存放数据的小空间

四. 变量命名规则与规范

规则

不能使用关键字

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

规范:

起名要有意义

遵守小驼峰命名法
- 第一个单词首字母小写, 后面每个单词首字母大写.
  
  例: userName

变量练习-输出用户信息

需求: 让用户输入自己的名字, 年龄, 性别, 在输出到网页
分析:
1. 弹出输入框 (prompt): 请输入您的姓名 (uname): 用变量名保存起来.
2. 弹出输入框 (prompt): 请输入您的年龄 (age): 用变量存起来
3. 弹出输入框 (prompt): 请输入您的性别 (gender): 用变量存起来
页面分别输出(document.write)刚才的3个变量

let uname = prompt('请输入您的姓名')
let age = prompt ('请输入您的年龄')
let gender = prompt ('请输入您的性别')

document.write('<h1>您的姓名为: '+uname+'</h1>')
document.write('<h1>您的年龄为: '+age+'</h1>')
document.write('<h1>您的性别为: '+gender+'</h1>')