第五次网页前端培训笔记（JS基础使用）

 B站视频网址：（本次仅涉及P13-P19）​​​​​​【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

菜鸟教程网址：HTML 教程 | 菜鸟教程 (runoob.com)

一、JS的三种使用方式

			JS的三种使用方式
				1.行内JS
					在html标签上直接写JS代码
				2.内部JS
					在script标签中写JS代码，script标签可以放在head中或body中（建议放在body标签最后）
				3.外部JS
					定义JS文件，通过script标签的src属性引入对应的JS文件
					注：如果script标签设置了src属性，则在script双标签之间的JS代码不会生效

1.1 行内JS

		<!--行内JS-->
		<button onclick="alert('Hello World!')">按钮</button>

点击按钮显示：

 1.2 内部JS

		<!-- 内部JS -->
		<script type="text/javascript">
			alert("这是一个按钮！");
        </script>

进入页面显示：

1.3 外部显示 

		<!-- 引入外部JS -->
		<script src="test.js" type="text/javascript" charset="UTF-8"></script>

console.log("这是引入外部JS文件");

控制台显示 

 二、JS基础语法

2.1 语句和注释

			<!-- 语句
				1.JS代码一行为单位，代码从上往下执行，一行一条语句。
				2.语句可以不加分号结尾；如果一行定义多条语句，每条语句只能以分号结尾。（建议都加分号）
				3.表达式不需要以分号结尾，如果加了分号则JavaScript引擎会当作语句执行，生成无用的语句
			注释：
				1.HTML代码注释
				2.JS代码注释
					//单行注释
					/* 多行注释 */
			-->

        <script type="text/javascript">
			console.log("Hello");
			console.log("haha");
			
		</script>

控制台显示：

 2.2 标识符

			标识符：
				规则
					由Unicode字母、_、$、数字、中文组成
					（1）不能以数字开头
					（2）不能是关键字和保留字
					（3）严格区分大小写
				规范
					（1）见名知意
					（2）驼峰命名或下划线规则
			关键字（保留字）：
				声明变量时，不要使用关键字

三、变量

				变量
					JS是一种弱类型语言；在声明变量时不需要指明数据类型，直接用 var 修饰符进行声明
					变量的声明
						1.先声明再赋值
						2.声明并赋值
					变量的注意点：
					1.如果变量只声明不赋值，则显示undefinded
					2.如果变量未声明就使用，则会报错
					3.可以使用var同时声明多个变量
					4.若重新声明一个已存在的变量，则无效
					5.若重新声明一个已存在的变量并赋值，则会覆盖
					6.JS是一种动态的、弱类型语言，可以声明任意数据类型的变量
				变量名提升
					JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量·，然后一行一行地运行。
					这造成的结果，就是所有变量的声明语句，都会被提升到代码的头部，这就叫做变量提升

		<script type="text/javascript">
			// 变量名提升
			console.log(flag);
			console.log(name);
			// 变量的声明
			//1.先声明再赋值
			var a;
			a = 1;
			console.log(a);
			//2.声明并赋值
			var b = 2;
			console.log(b);
			//变量的注意点
			// 1.如果变量只声明不赋值，则显示undefinded
			var c; 
			console.log(c);
			//2.如果变量未声明就使用，则会报错
			//console.log(d);//d is not definded
			//3.可以使用var同时声明多个变量
			var aa,bb,cc = 10;
			console.log(aa);//undefinded
			console.log(bb);//undefinded
			console.log(cc);//10
			//4.若重新声明一个已存在的变量，则无效
			var a;
			console.log(a);
			// 5.若重新声明一个已存在的变量并赋值，则会覆盖
			var a = 10;
			console.log(a);
			// 6.JS是一种动态的、弱类型语言，可以声明任意数据类型的变量
			var str = "Hello World";//字符串类型
			var flag = true;//布尔类型
			console.log(str);
			console.log(flag);
			console.log("true");
			// 不使用var声明变量
			name = "zhangsan";
			console.log(name);
		</script>

控制台显示： 

四、数据类型

			数据类型
				JS是弱类型语言，变量没有数据类型，数据有类型
				
				undefinded
					值不存在
					出现的情况：
						1.变量只声明未赋值，值为undefinded
						2.当定义函数需要形参，调用函数未传递实参时，参数的值为undefinded
						3.当函数没有返回值，接收值为undefinded
			null类型
				表示空值
				注意点：
					（1）使用 typeof 操作符测试null返回object字符串
					（2）undefinded 派生自null，所有等值比较返回值是 true 。未初始化的变量和赋值为null的变量相等
			布尔类型
				true 和 false
			数值型
				数值型包含两种数值：整型和浮点型
					（1）所有数字（整型和浮点型）都是64位浮点数形式存储。所有JS中1与1.0相等
					（2）在存储数据时自动将可以转换成整型的浮点数转为整型
			字符串类型
				1.使用""或''引起来
				2.可以使用"+"对字符串进行拼接
			对象类型
				数组
					var 数组名 = [];
				对象
					var 对象名 = {};
				函数
					function 方法名() {
						
					}

		<script type="text/javascript">
			// 1.变量只声明未赋值，值为undefinded
			var a;
			console.log(a);
			// 2.当定义函数需要形参，调用函数未传递实参时，参数的值为undefinded
			// 定义函数 使用Function
			function fn01(str) {
				console.log(str);
			}
			//调用方法 方法名（[参数]）
			fn01();
			// 3.当函数没有返回值，接收值为undefinded
			function fn02() {
				console.log("fn01...")
			}
			b = fn02();
			console.log(b);
			
			console.log("==================")
			
			// null类型
			var num = 1;//数值类型
			var flag = true;//布尔类型
			var str = "Hello";//字符串类型
			console.log(typeof num);
			console.log(typeof flag);
			console.log(typeof str);
			//（1） 使用 typeof 操作符测试null返回object字符串
			var aa = null;
			console.log(typeof aa);//object
			// （2）undefinded 派生自null，所有等值比较返回值是 true 。未初始化的变量和赋值为null的变量相等
			console.log(undefined == null);
			//只声明未赋值的变量和赋值为null的变量相等
			var bb;
			var cc = null;
			console.log(bb == cc);//true
			
			console.log("==================")
			
			// 数值型
			// 1和1.0相等
			console.log(1 == 1.0);//true
			// 1.0 + 1 = 2
			var n = 1 + 1.0;
			console.log(n);
			//将浮点型的整数转化成整型
			console.log(1.0);
			
			console.log("==================")
			
			// 字符串类型
			// 1.使用""或''引起来
			var s1 = "Hello";
			var s2 = "World";
			console.log(s1,s2);
			// 2.可以使用"+"对字符串进行拼接
			console.log(s1+s2);
			
		</script>

运行效果截图

 五、类型转换

自动类型转换

			1.自动类型转换
				1.转字符串：所有的值转字符串都是加引号
				2.转布尔型：有值为true，无值为false (0为false,1为true)
				3.转数组型：空值是0，非空的数组型字符串能转换，非数值字符串转换为NAN
			2.函数转换
				parseInt() 转整型
				parseFloat() 转浮点型
				注：转换时会从值的第0个位置开始找有效数字，直到找到有效数字位置。parseFloat()比parseInt()多识别一个小数点
			3.显示转换
				toString() 数值转换成字符串
				toFixed() 保留指定小数位,四舍五入
				注：值不能为null
				
				JS为Number、Boolean、String对象提供了构造方法，用于强制转换数据类型，转换的是值的全部
				注：可以转换null

		<script type="text/javascript">
			console.log(parseInt("123abc"));//123
			console.log(parseInt("abc123"));//NAN
			console.log(parseInt("123.4abc"));//123
			console.log(parseInt("123"));//123
			
			var a = 1;
			var b = "2";
			console.log(a+b);//12
			console.log(a + parseInt(b));//3
			
			console.log(parseFloat("123abc"));//123
			console.log(parseFloat("abc123"));//NAN
			console.log(parseFloat("123.4abc"));//123
			console.log(parseFloat("123.4.5"));//123
			
			console.log("=============");
			//toString()
			var aa = 10;
			console.log(aa);
			console.log(aa.toString());
			//toFixed
			var cc = 1.346
			console.log(cc.toFixed(2));//保留两位，四舍五入
			
			//Number
			var q = "1";
			var w = "a";
			var e = "123abc";
			var r = "123.4";
			var t = "123.4.5";
			console.log(Number(q));
			console.log(Number(w));
			console.log(Number(e));
			console.log(Number(r));
			console.log(Number(t));
			
			//Boolean
			console.log(Boolean("a"));//true
			console.log(Boolean(0));//false
			console.log(Boolean("1"));//true
			console.log(Boolean(null));//false
			
			//string
			console.log(10);
			console.log(String(10));
			console.log(String(null));
			console.log(String("null"));
		</script>

运行效果