文章目录

1 变量概述
- 1.1 什么是变量
2 变量的使用
- 1 声明变量
- 2 赋值
- 3 变量的初始化
- 案例：变量的使用
3 变量语法扩展
- 1 更新变量
- 2 同时声明多个变量
- 3 声明变量特殊情况
4 变量命名规范
案例：交换两个变量值
5 小结
推荐

之前有个程序是弹出一个填密码的框，然后填写的数据要保存，可以用变量这个方法

1 变量概述

1.1 什么是变量

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

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

类似酒店的房间，一个房子可以看成一个变量

2 变量的使用

变量的使用

声明变量 2. 复制

1 声明变量

//声明变量
var age; //声明一个名称为age的变量

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

2 赋值

age = 10; //给age 这个变量赋值为10

= 用来把右边的值赋给左边的变量空间中此处代表赋值的意思
变量值是程序员保存到变量空间里的值

3 变量的初始化

var age = 18; //声明变量同时赋值为18

声明一个变量并赋值 , 我们称之为变量的初始化。

eg . 05-变量.html

<!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 声明了一个age 的变量var age;// 2 赋值 把值存入这个变量中age = 18;// 3 输出结果console.log(age);// 4 变量的初始化var myname = '墨鱼';console.log(myname);</script>
</head>
<body></body>
</html>

网页显示

案例：变量的使用

有个叫卡卡西的人在旅店登记的时候前台让他填一张表, 这张表里的内容要存到电脑上, 表中的内容有: 姓名、年龄、邮箱、家庭住址和工资,存储之后需要把这些信息显示出来,所显示的内容如下:

我叫旗木卡卡西,我住在火影村, 我今年30岁了, 我的邮箱是kakaxi@itcast.cn ,我的工资2000

eg . 06-变量案例.html

<!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 myname = '旗木卡卡西';var address = '火影村';var age = 30;var email = 'kakaxi@itcast.cn';var gz = 2000;console.log(myname);console.log(address);console.log(age);console.log(email);console.log(gz);</script>
</head>
<body></body>
</html>

网页显示

弹出一个输入框, 提示用户输入姓名。
弹出一个对话框, 输出用户刚才输入的姓名。

07-变量案例弹出用户名.html

<!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>

网页显示

输入名字确认后弹出

3 变量语法扩展

1 更新变量

一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。

var age = 18;
age = 81; //最后的结果就是81 因为18被覆盖掉了

2 同时声明多个变量

同时声明多个变量时,只需要写一个var ，多个变量名之间使用英文逗号隔开。

var age = 10, name = 'zs', sex = 2;

3 声明变量特殊情况

情况	说明	结果
var age;console.log(age);	只声明不赋值	undefined
console.log(age);	不声明不赋值直接使用	报错
age = 10;console.log(age);	不声明只赋值	10

上面第三种没有报错，但是会变成全局变量，不利于使用。

所以，规范使用，先声明，再赋值

08-变量的语法拓展.html

<!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 变量更新var myname = '墨鱼';console.log(myname);myname = '圣代';console.log(myname);// 2 声明多个变量// var age = 18;// var adress = '火影村';// var gz = 2000;var age = 18,address = '火影村';gz = 2000;// 3 声明变量的特殊情况// 3.1只声明不赋值结果是? 程序也不知道里面存的是啥所以结果是undefined 未定义的var sex;console.log(sex); // undefined//3.2不声明不赋值直接使用某个变量会报错滴// console.log(te1);// 3.3 不声明直接赋值使用qq= 110;console.log(qq);</script>
</head>
<body></body>
</html>

4 变量命名规范

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

案例：交换两个变量值

交换两个变量值：增加一个临时变量（中间媒介）

10-交换两个变量值.html

<!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>// js是编程语言有很强的逻辑性在里面: 实现这个要求的思路先怎么做后怎么做// 1.我们需要一个临时变量帮我们// 2.把apple1 给我们的临时变量temp// 3.把apple2里面的苹果给 apple1// 4.把临时变量里面的值给  apple2var temp; // 声明一个临时变量为空var apple1 = '青苹果';var apple2 = '红苹果';temp = apple1; //把右边给左边apple1 = apple2;apple2 = temp;console.log(apple1);console.log(apple2);</script>
</head>
<body></body>
</html>

网页显示

5 小结

Q	A
为什么需要变量?	因为我们一些数据需要保存,所以需要变量
变量是什么?	变量就是一个容器 ,用来存放数据的。方便我们以后使用里面的数据
变量的本质是什么?	变量是内存里的一块空间,用来存储数据。
变量怎么使用的?	我们使用变量的时候, 一定要声明变量,然后赋值声明。变量本质是去内存申请空间。
什么是变量的初始化?	声明变量并赋值我们称之为变量的初始化
变量命名规范有哪些?	变量名尽量要规范,见名知意—驼峰命名法
交换2个变量值的思路?	区分哪些变量名不合法。学会交换2个变量

web前端学习526-534（变量概述，变量的使用，变量语法扩展，变量命名规范，推荐Diagram Designer）

文章目录

1 变量概述

1.1 什么是变量

2 变量的使用

1 声明变量

2 赋值

3 变量的初始化

案例：变量的使用

3 变量语法扩展

1 更新变量

2 同时声明多个变量

3 声明变量特殊情况

4 变量命名规范

案例：交换两个变量值

5 小结

推荐

web前端学习526-534（变量概述，变量的使用，变量语法扩展，变量命名规范，推荐Diagram Designer）相关推荐

最新文章

热门文章