网页前端培训笔记（JavaScript基础语法篇一）

ᴍᴀɢɪ

已于 2022-02-14 22:55:39 修改

阅读量345

点赞数

分类专栏：网页前端培训笔记文章标签： javascript 前端 elementui

于 2022-02-10 22:12:21 首次发布

本文链接：https://blog.csdn.net/qq_61175638/article/details/122870298

版权

网页前端培训笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、JS的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本使用</title>
	</head>
	<body>
		<!-- 
			JS的三种使用方式
				1.行内JS
					在html标签上直接写代码
				2.内部JS
					在script标签中写JSdaima，script标签可以放在head中或body中（建议放在body标签最后）
				3.外部JS
					定义JS文件，通过script标签的src属性引入对应的JS文件
					注：如果script标签设置了src属性，则在script双标签之间的JS代码不会生效
		 -->
		 <!--  行内JS  -->
		 <button onclick="alert('Hellow World')">按钮</button>
		 <!--  内部JS  -->
		 <script type="text/javascript">
			alert("这是一个按钮！")；
		 </script>
		 <!--  引入外部文件  -->
		 <script src="js/text.js" type="text/javascript" charset="UTF-8">
			
		 </script>
	</body>
</html>

2、JS的基础语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基础语法</title>
	</head>
	<body>
		<!-- 
			语句
				1.JS代码一行为单位，代码从上往下执行，一行一条语句
				2.语句不加分号结尾，如果一行定义多条语句每句语句只会必须以分号结尾（建议都加分号）
				
		 -->
	</body>
</html>

3、数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据类型</title>
	</head>
	<body>
		<!-- 
			数据类型
				JS是弱类型语言，变量没有数据类型，数据有类型
				undefined 类型
					值不存在
					出现的情况：
						1，变量只声明未赋值，值为 undefined 
						2．当定义函数需要形参，调用函数未传递实参时，参数的值为 undefined 
						3．当函数没有返回值，接收值为 undefined 
				null 类型
					表示空值
					注意点：
						1）使用 typeof 操作符测试 null 返回 object 字符串。
							typrof 操作符：判断变量的类型
						2) undefined 派生自 null ，所以等值比较返回值是 true 。未初始化的变量和赋值为 null
						
				布尔类型
					true 和 false
					
				数值型
					数值型包含两种数值：整型和浮点型。
						1）所有数字（整型和浮点型）都是以64位浮点数形式储存。所以， JS 中1与1.0相等
						2）在存储数值型数据时自动将可以转换为整型的浮点数值转为整型。
				学符串类型
					1，使用''或""引起来
					2。可以使用"+"对字符串进行拼接
				对象类型
					数组
						var 数组名 = []；
					对象
						var 对象名 = {}；
					函数
						function 方法名（）{
							
							}
				
		 -->
		<script type="text/javascript">
				/* undefined 类型 */
				//1．变量只声明未赋值，值为 undefined
				var a;
				console.log(a);
				
				//2．当定义函数需要形参，调用函数未传递实参时，参数的值为 undefined 
				//定义函数 function 方法名（［参数］）
				function fn01(str) {
					console.log(str);
				}
				//调用方法  方法名（[参数]）；
				fn01();
				
				//3．当函数没有返回值，接收值为 undefined 
				function fn02() {
					console.log("fn02...");
				}
				var b = fn02();
				console.log(b);

				console.log("========");
				/* null 类型  */
				var num = 1; //数值类型
				var flag = true; //布尔类型
				var str = "hello";//字符串
				// 字符串类型
				console.log(typeof num); // number 
				console.log(typeof flag); // boolean 
				console.log(typeof str); // string 

				// 1）使用 typeof 操作符测试 null 返回 object 字符串。 
				var aa = null;
				console.log(typeof aa); // object 

				// 2) undefined 派生自 null ，所以等值比较返回值是 true 。未初始化的变量和赋值为 null 
				console.log(undefined == null); // true
				//只声明未赋值的变量值为nul1的变量相等 
				var bb;
				var cc = null;
				console.log(bb == cc); // true 
				
				/* 数值型  */
				// 1和 1.0相等
				console.log(1== 1.0); //true
				//  1 + 1.0 等于 2
				var n = 1 + 1.0;
				console.log(n); //2
				// 将浮点型的整数转换成整型 1.0 -> 1
				console.log(1.0)
				
				console.log('===============');
				
				/* 字符串类型 */
				// 1.使用''或""引起来
				var s1 = 'Hello';
				var s2 = "Hello";
				console.log(s1,s2);
				// 2.可以使用 + 对字符串进行拼接
				console.log(s1 + s2);
		</script>

	</body>
</html>

运行代码，点击鼠标右键选择检查，找到Console 如下图

4、类型转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--  
			1.自动类型转换
				1．转字符串：所有的值转字符串都是加引号
				2．转布尔型：有值为 true ，无值为 false (0为 false ，非0为 true )
				3．转数值型：空值是0，非空的数值型字符串能转换，非数值字符串转换为 NaN 
			2.函数转换
				parseInt()    转整数型
				parseFloat()  转浮点型
				注：转换时会从值的第零个位置开始找有效数字，直到找到无效数字位置
			3.显示转换
					toString()  将值转换成字符串
					toFixed()   保留指定小数位，四舍五入
					注：值不能为null
					
					JS 为 Number、Boolean(布尔类型)、String对象提供了构造方法，用于强制转换数据类型，转换的是值的
					注：可以转换null
		-->
		
		
		
		 <script type="text/javascript">
			// parseInt()
			console.log(parseInt("123abc")); // 123 
			console.log(parseInt ("abc123")); // NaN 
			console.log(parseInt ("123.4abc")); // 123 
			console.log(parseInt ("123")); // 123
			console.log("123");
			var a = 1;
			var b = "2";
			console.log(a+b); //12
			console.log(a = parseInt(b));
			
			// parseFloat()
			console.log(parseFloat("123abc")); // 123
			console.log(parseFloat("123")); // 1234
			console.log(parseFloat("123.4.5")); // 123.4
			
			console.log("----------");
			// toString()
			var aa = 10;
			console.log(aa);
			console.log(aa.toString());
			var bb = null; //空值
			// console.log(bb.toString()); // Cannot read property 'toString' of null
			
			// 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(null);
			console.log(String(null));
		 </script>
		
	</body>
</html>

运行代码，点击鼠标右键选择检查，找到Console 如下图