• JavaScript 变量 及 案例练习


    变量

    一. 变量是什么:

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

    答案1: 使用变量

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

    1. **变量: **

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

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

    变量有什么作用呢?

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

    生活中的变量:
    • HTML标签
    • 教室
    • 宿舍
    • 杯子

    二. 变量的基本使用

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

      语法:

      let 变量名
      
      • 1
      • 声明变量有两部分构成: 声明关键字, 变量名(标识)

      • let 即关键字(let: 允许, 许可, 让, 要), 所谓关键字是系统提供专门用来声明 (定义) 变量的词语

        当然有的小伙伴说var 也可以, 但是请大家把var忘掉, 它是我们的前任他不适合我们, 适合的话也不会变成前任了

      举例:

      // 1. 声明一个年龄的变量
      let age;
      
      • 1
      • 2
      • 我们声明了一个age变量
      • age即变量的名称, 也叫做标识符
    2. 变量赋值

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

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

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

    age: 变量

    18: 字面量

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

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

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

    变量的初始化:

    声明变量的同时直接赋值

    let age = 18
    
    • 1

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

    总结:

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

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

      • = 这个符号我们也称为 赋值运算符
    变量练习

    需求:

    1. 声明一个变量, 用于存放用户购买的商品 ==数量(num) ==为 20
    2. 声明一个变量, 用于存放用户的 姓名(uname) 为 ‘张三’
    3. 依次控制台打印输出两个变量
    // 用户购买的商品
    let num = 20;
    // 用户姓名
    let uname = '张三'
    //控制台打印
    console.log(num)
    console.log(uname)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    3. 更新变量

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

    // 用户年龄
    let age = 18;
    // 更新变量
    age = 19;
    
    • 1
    • 2
    • 3
    • 4

    错误的写法

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

    如果使用var来声明变量

    // 如果使用var来声明变量
    var agevar = 18;
    // 更新变量
    var agevar = 19;
    
    //控制台打印
    console.log(agevar)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

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

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

    4. 声明多个变量

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

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

    并不提倡大家这么写

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

    总结:

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

      • 直接给他一个不同的值来更新它, 注意不可加 let
    2. 我们提倡同时声明多个不同的变量吗?

      • 不提倡, 可读性不好
    1. 变量案例-弹出姓名

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

    // 1. 用户输入
    // prompt('请输入姓名')
    // 2. 内部处理保存数据
    let uname = prompt('请输入姓名')
    // 3. 打印输出
    document.write(uname)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    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)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    三. 变量的本质

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

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

    四. 变量命名规则与规范

    规则

    • 不能使用关键字

      比如:

      let let;
      let if;
      let for;
      
      • 1
      • 2
      • 3
      • 关键字: 有特殊含义的字符, 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('

    您的姓名为: '+uname+'

    '
    ) document.write('

    您的年龄为: '+age+'

    '
    ) document.write('

    您的性别为: '+gender+'

    '
    )
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
  • 相关阅读:
    Windows IOCP相关资料
    用HTML+CSS做一个漂亮简单的个人网页——樱木花道篮球3个页面 学生个人网页设计作品 学生个人网页模板 简单个人主页
    Android 13 Developer Preview一览
    用Python爬取短视频列表
    2022年全球市场抹茶巧克力总体规模、主要生产商、主要地区、产品和应用细分研究报告
    iptables详解:常用模块的基本使用
    (附源码)计算机毕业设计JavaJava毕设项目租车网站
    嵌入式软件好还是硬件好?
    关于面向对象的几大特性所能够解决的编程问题
    Lecture 9 Semaphores Ⅰ(信号量)
  • 原文地址:https://blog.csdn.net/zzx_mn/article/details/138186341