JavaScript 变量 及 案例练习

变量

一. 变量是什么:

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

答案1: 使用变量

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

1. **变量: **

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

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

变量有什么作用呢?

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

生活中的变量:

• HTML标签
• 教室
• 宿舍
• 杯子
• …

二. 变量的基本使用

1. 声明变量

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

总结:

1. 变量是使用什么关键字来声明?

   • let

2. 变量通过什么符号来赋值?

   • = 这个符号我们也称为 赋值运算符

变量练习

需求:

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

// 用户购买的商品
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)

并不提倡大家这么写

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

总结:

1. 变量赋值后如何更新新值?

   • 直接给他一个不同的值来更新它, 注意不可加 let

2. 我们提倡同时声明多个不同的变量吗?

   • 不提倡, 可读性不好

1. 变量案例-弹出姓名

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

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

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

需求:

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

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

目的:

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

分析:

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

// 临时变量
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>')