JavaScript(三)——变量

目录

 

1. 变量概述

1.1 什么是变量

1.2 变量在内存中的存储

2. 变量的使用

2.1 声明变量

2.2 赋值

2.3 变量的初始化

3. 变量语法扩展

3.1 更新变量

3.2 同时声明多个变量

3.3 声明变量特殊情况

4. 变量命名规范

5. 小结


 

1. 变量概述

1.1 什么是变量

白话:变量就是一个装东西的盒子。
通俗:变量是用于存放数据的容器。 我们通过 变量名 获取数据,甚至数据可以修改。
 

1.2 变量在内存中的存储

本质:变量是程序在内存中申请的一块用来存放数据的空间。
类似我们酒店的房间,一个房间就可以看做是一个变量。
c133c7186dd5424ebb11743ff67ccb85.png

2. 变量的使用

变量在使用时分为两步: 1. 声明变量 2. 赋值

2.1 声明变量

// 声明变量
var age; // 声明一个 名称为age 的变量
 var 是一个 JS关键字,用来声明变量( variable 变量的意思 )。使用该关键字声明变量后,计算机会自动为变量分配 内存空间,不需要程序员管
 age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间
 

2.2 赋值

age = 10; // 给 age 这个变量赋值为 10
 = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
 变量值是程序员保存到变量空间里的值

 

2.3 变量的初始化

var age = 18; // 声明变量同时赋值为 18
声明一个变量并赋值, 我们称之为变量的初始化。
 
案例:变量的使用
1. 弹出一个输入框,提示用户输入姓名。
2. 弹出一个对话框,输出用户刚才输入的姓名。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. 用户输入姓名  存储到一个 myname的变量里面
        var myname = prompt('请输入您的名字');
        // 2. 输出这个用户名
        alert(myname);
    </script>
</head>

<body>

</body>

</html>

3. 变量语法扩展

3.1 更新变量

一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。
var age = 18;
age = 81; // 最后的结果就是81因为18 被覆盖掉了

3.2 同时声明多个变量

同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开。
var age = 10, name = 'zs', sex = 2;

3.3 声明变量特殊情况

a49b0308883645ea909f535e7996bda0.png

4. 变量命名规范

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

6f557434b8d4442ba65009a2cb33ce1f.png

 

案例:课堂练习
要求:交换两个变量的值 ( 实现思路:使用一个 临时变量 用来做中间存储 )
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // js 是编程语言有很强的逻辑性在里面: 实现这个要求的思路 先怎么做后怎么做 
        // 1. 我们需要一个临时变量帮我们
        // 2. 把apple1 给我们的临时变量 temp 
        // 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>

5. 小结

b146f760410548bc82a834ad40fb653b.png

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

m0_60434562

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值