JavaScript 03 - 变量_1.弹出一个输入框,提示用户输入姓名。2.弹出一个对话框,输出用户刚才输入的姓-优快云博客

本文详细探讨了JavaScript中的变量，包括其用法、案例分析，如弹出用户名，以及变量的语法扩展和命名规范。还介绍了如何巧妙地交换两个变量的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

变量

05 - 变量
06 - 变量案例
07 - 变量案例弹出用户名
08 - 变量的语法扩展
09 - 变量命名规范
10 - 交换两个变量值

05 - 变量

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>05-变量</title>
	<!-- 
		1. 变量概述
		==========

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

		1.2 变量在内存中的存储
		---------------------
		本质：变量是程序在内存中申请的一块用来存放数据的空间。
		类似我们酒店的房间，一个房间就可以看做是一个变量。

		2. 变量的使用
		============
		变量在使用分为两步：1. 声明变量 2. 赋值

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

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

		2.3 变量的初始化
		---------------
		var age = 18; // 声明变量同时赋值为18
		声明一个变量并赋值，我们称为变量的初始化。

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

</body>
</html>

06 - 变量案例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>06-变量案例</title>
	<!--
		案例：变量的使用
		---------------
		有个叫卡卡西的人在旅店登记的时候前台让他填一张表，这张表里的内容要存到电脑上，
		表中的内容有：姓名、年龄、邮箱、家庭住址和工资，存储之后需要把这些信息显示出来，所显示的内容如下：
		我叫旗木卡卡西，我住在火影村，我今年30岁了，我的邮箱是 kakaxi@itcast.cn，我的工资2000
	-->
	<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); // 30
		console.log(email); // kakaxi@itcast.cn
		console.log(gz); // 2000
	</script>
</head>
<body>

</body>
</html>

07 - 变量案例弹出用户名

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>07-变量案例弹出用户名</title>
	<!--
		案例：变量的使用
		---------------
		1. 弹出一个输入框，提示用户输入姓名。
		2. 弹出一个对话框，输出用户刚才输入的姓名。
	-->
	<script>
		// 1. 用户输入姓名 存储到一个 myname的变量里面
		var myname = prompt('请输入您的名字');
		// 2. 输出这个用户名
		alert(myname);
	</script>
</head>
<body>

</body>
</html>

08 - 变量的语法扩展

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>08-变量的语法扩展</title>
	<!--
		3. 变量语法扩展
		==============

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

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

		3.3 声明变量特殊情况
		-------------------
				情况							说明					结果
		var age;console.log(age);		只声明 不赋值			 undefined
		console.log(age);			不声明 不赋值 直接使用		报错
		age = 10;console.log(age);		不声明 只赋值				 10	
	-->
	<script>
		// 1. 更新变量
		var myname = 'bing';
		console.log(myname); // bing
		myname = 'yuan';
		console.log(myname); // yuan

		// 2. 声明多个变量
		// var age = 18;
		// var address = '火影村';
		// var gz = 2000;
		var age = 18,
			address = '火影村';
			gz = 2000;

		// 3. 声明变量的特殊情况
		// 3.1 只声明不赋值 结果是？ 程序也不知道里面存的是啥 所以结果是 undefined 未定义的
		var sex;
		console.log(sex); // undefined

		// 3.2 不声明 不赋值 直接使用某个变量会报错滴
		// console.log(tel); // error

		// 3.3 不声明直接赋值使用
		qq = 110;
		console.log(qq); // 110
	</script>
</head>
<body>

</body>
</html>

09 - 变量命名规范

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>09-变量命名规范</title>
	<!--
		4. 变量命名规范
		==============

		由字母（A-Z a-z）、数字（0-9）、下划线（_）、美元符号（$）组成，如：usrAge，num01，_name
		严格区分大小写。var app;和var App;是两个变量
		不能以数字开头。 18age 是错误的
		不能是关键字、保留字。例如：var、for、while
		变量名必须有意义。MMD BBD nl-age
		遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

		以下面哪些是合法的变量名？
		第一组		第二组			第三组
		var a 		var userName	var theWorld
		var 1		var $name 		var the world
		var age18	var _sex		var the_world
		var 18age	var &_sex		var for
		-----------------------------------------------
		第一组			第二组			第三组
		var a y			var userName y	var theWorld y
		var 1 n			var $name y		var the world n
		var age18 y		var _sex y		var the_world y
		var 18age n		var &_sex n		var for n
	-->
	<script>
		var app = 10;
		var App = 100;
		console.log(app); // 10
		console.log(App); // 100
		// var 18age;
		// var var; 因为var 有特殊意义了，这个叫做关键字 不能作为变量名的 for while if
		// name 我们尽量不要直接使用name作为变量名
		// console.log(tel); // error
		console.log(name);
	</script>
</head>
<body>

</body>
</html>

10 - 交换两个变量值

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>10-交换两个变量值</title>
	<!--
		案例：课堂练习
		要求：交换两个变量的值（实现思路：使用一个临时变量用来做中间存储）

		小结
		----
		为什么需要变量？			因为我们一些数据需要保存，所以需要变量
		变量是什么？ 				变量就是一个容器，用来存放数据的。方便我们以后使用里面的数据
		变量的本质是什么？		变量是内存里的一块空间，用来存储数据
		变量怎么使用的？			我们使用变量的时候，一定要声明变量，然后赋值
								声明变量本质是去内存申请空间。
		什么是变量的初始化？		声明变量并赋值我们称之为变量的初始化
		变量命名规范有哪些？		变量名尽量要规范，见名知意——驼峰命名法 
		交换2个变量值的思路？	
			js 是编程语言有很强的逻辑性在里面： 实现这个要求的思路 先怎么做后怎么做 
	    	1. 我们需要一个临时变量帮我们
	    	2. 把apple1 给我们的临时变量 temp 
	    	3. 把apple2 里面的苹果给 apple1 
	    	4. 把临时变量里面的值 给 apple2 
	-->
	<script>
        var temp; // 声明一个临时变量为空
        var apple1 = '青苹果';
        var apple2 = '红苹果';
        temp = apple1; // 把右边给左边
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1); // 红苹果
        console.log(apple2); // 青苹果
	</script>
</head>
<body>

</body>
</html>