Web前端105天-day16-JS_var n1 = number('3')-CSDN博客

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js的两种书写方式</title>
	</head>
	<body>
		<!-- js的写法一：内部写法 -->
		<!-- 现在script标签推荐写在body的最后，这样不影响网页的加载 -->
		<!-- 方便上面的html+css都加载完毕了再执行JS代码 -->
		<script>
			// 打印输入hello world,注意要加引号，推荐使用单引号
			console.log('hello world')
			//结果要在F12的控制台查看，HTML页面中是看不到的
		</script>
		
		<!-- JS的写法二：引入外部的JS文件 -->
		<script src="01.js">
			// 如果此script标签已经用于引入外部的js文件，里面的代码是不执行的
			console.log('你好中国') //此句代码没有执行
		</script>
	</body>
</html>

2.2JS的语法规范

注释
注释：用于解释代码的内容，被注释掉的内容不会执行，可以提高代码的可读性与可维护性
单行注释，格式 // 快捷键Ctrl+/
多行注释，格式 /* */ 快捷键 Ctrl+Shift+/
语法规范

代码严格区分大小写

每行代码结束的分号可以省略不写

JS代码要比html和CSS都严格，一旦出错，代码就无法正常执行了
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的注释</title>
	</head>
	<body>
		<script>
			// 被注释掉的内容就不会执行了
			//单行注释 Ctrl+/
			//console.log('我是一个单行注释')
			
			//多行注释 Ctrl+Shift+/
			/* console.log("我是一个多行注释")
			console.log("我是一个多行注释")
			console.log("我是一个多行注释") */
			
			//JS严格区分大小写
			//大小写错误 中英文符号错误等都会报错
			console.log('欢迎来到程序猿的世界')
			//Console.log('欢迎来到程序猿的世界') //报错
		</script>
	</body>
</html>

三、变量

3.1变量的概念

用于存储数据的容器
var（variable可变化的）用于声明变量，格式：
声明单个变量: var 变量名 = 值
声明多个变量: var 变量名1=值1，变量名2=值2
使用关键字var来声明变量，x表示变量名称，会在内存中开辟空间，然后把后面的值1存进去

3.2变量的赋值

变量可以声明时同时赋值，也可以先声明再赋值，变量需要声明后才可以使用

变量声明了，但没有赋值，打印出来的是undefined(未定义)空值

变量允许多次赋值，后面的值会把前面的值覆盖掉，重新赋值不需要再写var

变量的多次赋值可以赋不同类型的值(这是弱类型语言的特点)

3.3变量的命名规则

变量名称可以由字母、数字、下划线(_)、美元符号($)构成
变量名称不可以使用数字开头
变量名称不可以使用关键字，如:var if 等
变量名称不推荐使用汉字
变量名称要做到语义化(见名知意)，如：email
多个单词的命名方式：
user_name 下划线命名法

userName 小驼峰命名法

UserName 大驼峰命名法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS变量测试</title>
	</head>
	<body>
		<script>
			//1.变量的声明
			//变量的名称为x,然后将值1交给变量x保存
			var x = 1
			//变量的名称为color,然后将值交给变量color保存
			var color = 'red'
			//打印查看两个变量的值
			console.log(x,color)
			
			//2.练习，声明多个变量，分别保存一个用户的：
			//用户名uname,邮箱email,手机phone,性别gender，最后打印输出这组变量
			var uname = 'xin88'
			var email = 'xin@tedu.cn'
			var phone = 18811118888
			var gender = '未知'
			console.log(uname,email,phone,gender)
			
			//3.使用一个var声明多个变量
			var a = 11,b = 22
			console.log(a,b)
			
			//4.变量的赋值
			//变量需要声明才可以使用
			//ReferenceError(引用错误):c is not defined(定义)
			//声明了但没有赋值，打印出来的是undefined(未定义)空值
			//console.log(c)
			var c2
			console.log(c2)//undefined
		
			var user
			//可以先声明，再赋值，重新赋值的时候不需要写var
			user = 'liang'
			console.log(user)
			user = 666 //会覆盖前面的值'liang'变为666
			//这个覆盖数据的类型都变了，由字符串变为数字，所以称JS为弱类型语言
			//没有贬义，指的是它的赋值特点
			console.log(user)
			
			//5.变量的命名规则 字母 数字 下划线_ 美元符号$
			var a1 = 2
			//var 1a = 3 变量名称不可以使用数字开头
			var _b2 = 4
			var $c3 = 5
			//var var = 5 变量名称不可以使用关键字
			var 城市 = '大连' //中文虽然不报错，但是不推荐使用！
			console.log(城市)
			
			//6.练习：声明多组变量保存商品的单价price/数量num/总价total，最后打印输出总价
			var price1=30,num1=2
			var price2=50,num2=3
			var total = price1*num1+price2*num2
			console.log(total)
			
			//7.练习：交换两个变量的值x=1,y=2 交换后x=2,y=1
			var x=108,y=27
			console.log(x,y)
			var z //准备第3个变量协助交换
			z = x //将x的值给z
			x = y //将y的值给x
			y = z //将z的值给y
			console.log(x,y)
		</script>
	</body>
</html>

四、常量

和变量一样，都是用于存储数据的容器
常量的值不允许被修改
常量声明的时候必须被赋值，不允许为空

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常量练习const</title>
	</head>
	<body>
		<script>
			//1.声明常量
			const a = 2
			console.log(a)
			// 2.常量的值不允许被修改
			//a = 3 //TypeError: Assignment to constant variable.
			//3.常量声明时必须同时赋值
			//const b //Missing initializer in const declaration
			
			//4.练习：声明变量保存圆的半径r,声明常量保存圆周率pi 3.14
			//声明变量保存计算的面积area,声明变量保存计算的周长length
			//最后打印输出面积和周长
			var r = 5
			const pi = 3.14
			//计算面积
			var area = pi*r*r
			//计算周长
			var length = 2*pi*r*100/100
			console.log(area,length)
		</script>
	</body>
</html>

五、数据类型

数据类型分为原始类型和引用类型
原始类型分为：数值型、字符串型、布尔型、未定义型、空

5.1数值型

整数类型

整数类型就是我们所说的整数 0 1 2…

数值有多种进制的表示方式

浮点型
浮点型就是我们所说的小数 3.14

浮点型可以使用科学计数法的表示方式

5.2字符串型

被引号所包裹的值，引号不区分单双引号
检测数据类型
typeof 值

number数值型/string字符串型/boolean布尔型/undefined未定义型/null空

查看任意一个字符的编码 ：'a'.charCodeAt().

5.3布尔型

只有两个值，分别是true和false表示真和假，用于保存只有两种状态的数据

如：是否登录、是否是会员、是否购买过…

5.4未定义型

只有一个值undefined,表示空值，如：变量声明但未赋值就是undefined

5.5空

只有一个值，null,常和引用类型的数据一起使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据类型测试</title>
	</head>
	<body>
		<script>
			//1.数值型number
			//1.1 整型
			var n1 = 10
			var n2 = 0b1010 //二进制 以0b开头的数字
			var n3 = 012 //八进制 以0开头的数字
			var n4 = 0xA //十六进制 以0X开头的数字
			console.log(n1,n2,n3,n4) //以上数值均转为10进制输出
			console.log(typeof n1)
			
			//1.2 浮点型
			var f1 = 3140
			var f2 = 3.14E3 //3.14*10^3
			var f3 = 31.4e+2 //31.4*10^2
			var f4 = 31400e-1 //31400*10^-1
			console.log(f1,f2,f3,f4)//都是3140
			console.log(f1)
			
			//2.字符串型string
			var str1 = '新哥'
			var str2 = '3'
			var str3 = 'str1'
			console.log(str1)
			//typeof 检测数据的类型
			console.log(str2,typeof str2)//3 string
			console.log(str3)
			//查看任意一个字符的编码
			console.log('a'.charCodeAt())//小写字母a对应编码数字97
			console.log('我'.charCodeAt())
			console.log('喜'.charCodeAt())
			console.log('欢'.charCodeAt())
			console.log('你'.charCodeAt())
			
			//3.布尔型boolean
			var b1 = true
			var b2 = 0>1
			console.log(b1,b2,typeof b2)
			
			//4.未定义型undefined 
			var c 
			console.log(c,typeof c)
			
			//5.空 object
			var p = null
			console.log(p,typeof p)
		</script>
	</body>
</html>

六、数据类型转换

数据类型转换分为隐式转换和强制转换

6.1隐式转换

在运算过程中，自动产生的转换
数字+字符串数字转为字符串
- 如：2 + ‘3’ //23
数字+布尔型布尔型转数字 true->1 false->0
- 如：2+true //3
字符串+布尔型布尔型转字符串
- 如：‘2’+ true //2true
JS中加号(+)的作用：
- 数字之间执行加法运算
- 字符串之间执行拼接运算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据类型转换-隐式转换</title>
	</head>
	<script>
		var n1 = 2 + '3'//先把数字2转为字符串2，再执行字符串的拼接
		console.log(n1,typeof n1)//23 string
		var n2 = 2 + true //布尔型转数字1
		console.log(n2,typeof n2)//3 'number'
		var n3 = 2 + false//布尔型转数字0
		console.log(n3,typeof n3)//2 'number'
		var n4 = '2' + true//布尔型转字符型
		console.log(n4,typeof n4)//2true string
		
		//字符串的拼接
		//商品名称：iPhone 14，系统：iOS
		var pro = 'iPhone 14'
		var os = 'iOS'
	  console.log('商品名称：'+pro+'，系统：'+os)
		
		//假设一个员工的信息，姓名:李逵 年龄:18 住址:柳树下 
		//打印输出：有一个员工叫XX,他的年龄是XX,每天住在XXX
		var name = '李逵'
		var age = 18
		var addr = '柳树下'
		console.log('有一个员工叫'+name+',他的年龄是'+age+',每天住在'+addr)
		
		var m1 = '3' - '2' //1
		var m2 = '3' * false //0
		var m3 = true / '2' //0.5
		var m4 = '3a' - 2 //NaN
		var m5 = 3 + undefined //NaN
		var m6 = 1 - null //1
		console.log(m1,m2,m3,m4,m5,m6)
		//以上的操作都会默认调用Number()进行转换
		
		//NaN和任何数字执行数学运算的结果还是NaN
		console.log(NaN-2,NaN+2,NaN*2,NaN/2)
	</script>
	</body>
</html>

6.2强制转换

强制转换成数字Number()
NaN(Not a Number)不是一个数字，是在将一个值转换为数字的过程中，没有成功的得到数字结果，就是NaN, NaN和任何数字执行数学运算的结果还是NaN
var n1 = Number('3') //3
var n2 = Number(true) //1
var n3 = Number(false) //0
var n4 = Number('3a') //NaN
var n5 = Number(undefined) //NaN
var n6 = Number(null) //0
强制转换成整型 parseInt()

用于将小数或者是字符串转为整型，其他类型转换结果为NaN
var p1 = parseInt(3.5)//3
var p2 = parseInt('6a')//6
var p3 = parseInt('a6')//NaN
强制转换成浮点型 parseFloat()
用于将字符串转为浮点型，其他类型转换结果为NaN
var f1 = parseFloat('3.14a')//3.14
var f2 = parseFloat('75')//75			
var f3 = parseFloat('a3.14')//NaN
强制转换为字符串【了解】 toString()
用于将数字和布尔类型转为字符串
var n = 2
var str = n.toString()
拓展：进制

10进制(DEC decimal) 由0~9组成

2进制(BIN binary) 由0和1组成，以0b开头

8进制(OCT octal) 由0~7组成，以0开头

16进制(HEX hexadecimal) 由0~9 a~f组成，以0x开头

Win+R->calc->程序员计算器可以计算出不同进制的数值转换
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据类型转换-强制转换</title>
	</head>
	<body>
		<script>
			//Number()函数
			var n1 = Number('3') //3
			var n2 = Number(true) //1
			var n3 = Number(false) //0
			var n4 = Number('3a') //NaN
			var n5 = Number(undefined) //NaN
			var n6 = Number(null) //0
			console.log(n1,n2,n3,n4,n5,n6)
			
			//转整型
			var p1 = parseInt(3.5)//3
			var p2 = parseInt('6a')//6
			var p3 = parseInt('a6')//NaN
			var p4 = parseInt(null)//NaN
			console.log(p1,p2,p3,p4)
			
			//转浮点型(小数)
			var f1 = parseFloat('3.14a')//3.14
			var f2 = parseFloat('75')//75
			var f3 = parseFloat('a3.14')//NaN
			console.log(f1,f2,f3)
			
			//转字符串
			var n = 2
			var str = n.toString()
			console.log(str,typeof str)
		</script>
	</body>
</html>