js阶段总结（二维表+思维导图+信息提交案例代码）

本文链接：https://blog.csdn.net/2301_79075752/article/details/144427787

1.引言：

从10月30日学完HTML，到今天的12月12日，时间如此久远，以至于连博客的标题一在哪里都不知道了。虽然期间有各种各样的杂七杂八的事务，但是自己待提高的部分有很多，是时候做出改变了。ok先将这段时间学习的内容总结在下面。

2. 3w1h二维表

2.1 =

这是 js 中 = 的二维表，通过对比，可以搞清楚什么时候用几个 = 。其中 == 和 === 正是 js 弱类型语言的体现。

	(`=`)	(`==`)	(`===`)
what	赋值运算符：让左边的值等于右边的值	宽松相等：是判断等于的意思，返回值是一个布尔值，它只判断值是否相等，不判断类型是否一样	严格相等：也是判断等于的意思，返回值也是一个布尔值，但是它不仅仅判断值是否相等，还判断类型是否相等
where	需要给变量赋值	不判断类型，值判断值	既判断类型，也判断值。
why	用于将右侧的值赋给左侧的变量。	会在比较之前进行类型转换。	建议使用 `===` 来进行比较，以避免由于隐式类型转换带来的潜在问题。
How	let x = 5; x = 10	console.log(5 == '5'); console.log(0 == false); console.log(null == undefined);	console.log(5 === '5'); console.log(0 === false); console.log(null===undefined);
相反 / 非	无	!=:在表达式两边的数据类型不一致时,会隐式转换为相同数据类型,然后对值进行比较。	!==:不会进行类型转换,在比较时除了对值进行比较以外,还比较两边的数据类型

2.2 函数

在js中，函数也很重要，而且有很多种类，也需要对比学习一下。

	声明式语法	lambda函数（匿名函数）	Function对象（动态函数）	箭头函数	立即执行函数表达式
what
where	需要在声明之前调用函数	赋值给变量或作为参数传递。	这种方式不常见，因为它可能导致代码难以维护和调试	更适合用于回调函数和高阶函数。	不让函数的的属性污染到其他地方
why	简单。函数声明会在代码执行前被解析，这意味着可以在声明之前调用函数。	与函数声明不同，函数表达式不会在代码执行前被解析，而是在运行时赋值给变量。	可以在运行时根据需要创建新的函数	箭头函数没有自己的`this`绑定，而是捕获其所在上下文的`this`值。它们更适合用于回调函数和高阶函数。	IIFE常用于创建私有作用域，避免污染全局命名空间。
How	使用`function`关键字后跟函数名、参数列表和小括号包围的函数体。	通过将`function`关键字与变量赋值结合来创建匿名或命名函数。	通常指通过`new Function()`构造函数创建的函数，这是一种动态生成函数的方式。	使用`=>`符号，后面跟随参数列表和函数体。	通过将函数表达式包裹在圆括号中并在后面加上圆括号来立即执行该函数。

2.3 鼠标事件

点击事件

	click	dblclick
what	当用户点击一次鼠标按钮时触发。	当用户快速连续点击两次鼠标按钮时触发，通常在第二次点击后立即触发。
where	需要对单次点击做出响应的场景	需要对快速连续点击做出特殊响应的场景
why	在大多数浏览器中都得到了很好的支持。	虽然在大多数桌面浏览器中也得到了支持，但在移动设备上可能不太容易触发，因为移动设备更多地使用触摸事件。
How	可以通过调用元素的`click`方法来模拟单击操作，从而触发click事件。	虽然元素没有内置的`dblclick`方法，但可以通过自定义事件或使用其他方式来模拟双击操作并触发dblclick事件。
事件顺序	在用户单击鼠标时立即触发。	在用户双击鼠标时，首先会触发第一次click事件，随后才会触发dblclick事件。这意味着在处理双击事件时，必须先处理两个click事件

鼠标按下、抬起、移动

	mousedown	mouseup	mousemove
what	用户按下鼠标任意按键时触发	用户抬起鼠标任意按键时触发	鼠标在元素上移动时触发
where	适用于需要对鼠标按下操作做出响应的场景，如拖拽操作的开始、按钮按下效果等。	适用于需要对鼠标释放操作做出响应的场景，如拖拽操作的结束、按钮释放效果等。	适用于需要对鼠标移动操作做出响应的场景，如跟随鼠标的提示框、绘图应用中的实时绘制等。
why	需要对鼠标的操作进行判断
How	事件绑定：通过方法绑定事件处理：用户操作鼠标时，触发事件。eg：更新页面、发送ajax 事件触发：好像也是调用方法
事件对象	包含了鼠标的位置信息（clientX、clientY）、按键信息（button）以及是否按下了修饰键（如Ctrl、Shift）等信息。	mouseup事件的事件对象与mousedown类似，也包含了鼠标的位置信息、按键信息以及修饰键信息。	mousemove事件的事件对象包含了鼠标的当前位置信息（clientX、clientY）、是否按下了鼠标按钮（buttons）以及是否按下了修饰键（如Ctrl、Shift）等信息。

鼠标进入、离开事件

	mouseover	mouseout	mouseenter	mouseleave
what	鼠标进入元素时触发	鼠标离开元素时触发	鼠标进入元素时触发，该事件不会冒泡	鼠标离开元素时触发，该事件不会冒泡
where	适用于需要对鼠标进入元素及其子元素区域做出响应的场景，如显示提示信息、高亮显示等。	适用于需要对鼠标离开元素及其子元素区域做出响应的场景，如隐藏提示信息、取消高亮显示等。	适用于需要对鼠标进入元素区域做出响应的场景，如显示提示信息、高亮显示等。由于不会在其子元素上触发，因此可以避免重复触发的问题。	适用于需要对鼠标离开元素区域做出响应的场景，如隐藏提示信息、取消高亮显示等。由于不会在其子元素上触发，因此可以避免重复触发的问题。
why	需要对鼠标的移动进行判断
How	事件绑定：通过方法绑定事件处理：用户操作鼠标时，触发事件。eg：更新页面、发送ajax 事件触发：好像也是调用方法
事件对象	适用于需要对鼠标离开元素区域做出响应的场景，如隐藏提示信息、取消高亮显示等。由于不会在其子元素上触发，因此可以避免重复触发的问题。

2.4 dom 和 bom 和 ECMAscript

js = dom + bom + ECMAscript

搞清楚这几部分都是什么，对js的理解很有帮助

	dom	bom	ECMAscript
what	DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。对于JavaScript：为了能够使JavaScript操作Html，JavaScript就有了一套自己的DOM编程接口。	BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口。对于JavaScript：为了能够让JavaScript能控制浏览器的行为，JavaScript就有了一套自己的BOM接口。	ECMAScript 是一种由 ECMA国际（前身为欧洲计算机制造商协会）通过 ECMA-262 标准化的脚本程序设计语言，它是JavaScript（简称JS）的标准，浏览器就是去执行这个标准。
where	需要页面中各个元素交互的方式	控制浏览器行为	需要进行js逻辑代码
why	DOM为JavaScript提供了一种访问和操作HTML元素的"方法"	规定了各个浏览器怎么样去执行JavaScript的语法	规定了各个浏览器怎么样去执行JavaScript的语法
How	节点	window对象	语法

2.5 addEventListener的三个参数

addEventListener方法用于向指定元素添加事件句柄。

	type（事件名称）	function / listener（事件处理函数）	useCapture布尔值
what	表示监听事件类型的大小写敏感的字符串。	当事件发生时要调用的处理函数	一个布尔值
where	第一个参数	第二个参数	第三个参数
why	指定了要监听的事件	当事件发生时要调用的处理函数	指定事件处理程序是在捕获阶段还是冒泡阶段执行。
How	所有DOM事件，但是不能带 on	可以是一个匿名函数或预先定义的函数名	true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

3. 思维导图

按照358原则，一步步抽象

第一版思维导图

只是简单的将自己的代码都罗列了一遍

第二版

分了DOM、BOM、ECMAscript三大类。将第一版的基础、运算符、条件循环、函数归结在了ECMAscript中了。

第三版

对EMCA部分进一步综合归类。

第四版

简化一下

第五版

4. 信息提交代码

此次并没有使用第三方库。

这是html部分的代码

<body>
		<div class="table" id="tabile">
			<div class="message_div">
				<h2>请完成以下表单</h2>
				<form>
					<div class="main_div">
						姓名： <input type="text" id="name" placeholder="请输入姓名" /><br />
						密码： <input type="password" id="pvd" placeholder="请输入密码" /><br />

						<!-- 第一条提示——提示 姓名的要求 -->
						<div class="tip1">
							字符最长为四个汉字，或八个字母。
						</div>

						性别：<input type="radio" name="sex" value="1" />男
						<input type="radio" name="sex" value="2" />女<br />

						电子邮箱地址：<input type="text" id="email" placeholder="请输入电子邮箱地址" /><br />

						职业： <select id="mySelect" name="mySelect">
							<option value="空">请选择自己的职业</option>
							<option value="传媒/媒体">传媒/媒体</option>
							<option value="学生">学生</option>
							<option value="程序员">程序员</option>
						</select><br><br>

						<!-- 个人爱好 -->
						<div id="z">个人爱好：</div>
						<div class="habbit_div">
							<input type="checkbox" name="hobbit" />电脑网络
							<input type="checkbox" name="hobbit" />影音娱乐
							<input type="checkbox" name="hobbit" />棋牌游戏<br />
							<input type="checkbox" name="hobbit" />读书读报
							<input type="checkbox" name="hobbit" />美酒佳肴
							<input type="checkbox" name="hobbit" />绘画书法<br />
						</div>

						<!-- 留言内容 -->
						<table>
							<tr>
								<td>留言内容</td>
								<td><textarea name="context" rows="5" cols="30" placeholder="请输入留言内容"></textarea></td>
							</tr>
						</table>

						<!-- 第二条提示 -->
						<div class="tip2">填表完成后，选择下面的提交按钮提交表单。</div>

						<!--  按钮 -->
						<div class="button">
							<!-- 因为懒得写重置的js了，所以用了表单，于是就得改一下提交按钮 -->
							<input type="button" id="submit" value="提交" onclick="sbmit_func()" />
							<input type="reset" value="重置" />

						</div>

					</div>
				</form>

			</div>
		</div>
		</script>

	</body>

这是css部分的代码

<style type="text/css">
			/* 整个界面 */
			body {
				font-family: Arial, sans-serif;
				background-color: #f4f4f4;
				margin: 0;
				padding: 20px;
			}

			/* 表格 */
			.table {
				max-width: 600px;
				margin: auto;
				background-color: #db780e;
				padding: 20px;
				/* 没瞅着啊 */
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				border-radius: 10px;
				/* 圆角边框 */
			}

			/* 最上面的 "请完成以下表单" */
			h2 {
				text-align: center;
				background-color: gold;
				padding: 10px;
				border-radius: 5px;
				/* 圆角边框 */
				margin-bottom: 20px;
			}

			.message_div {
				background-color: #ffffff;
				padding: 20px;
				border-radius: 10px;
				/* 圆角边框 */
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			}

			.tip1 {
				color: red;
				font-weight: bold;
				margin-left: 50px;
			}

			.tip2 {
				text-align: center;
				background-color: gold;
				padding: 10px;
				border-radius: 5px;
				/* 圆角边框 */
				margin-top: 20px;
			}

			/* 整个表单内容 */
			.main_div {
				padding: 20px;
			}

			/* 个人爱好 */
			.habbit_div {
				margin-left: 50px;
			}

			/* 提交 和 重置 的 按钮 */
			.button {
				text-align: center;
				margin-top: 20px;
			}

			input[type="text"],
			input[type="password"],
			select,
			textarea {
				width: calc(100% - 20px);
				/* 减去内边距 */
				padding: 10px;
				margin-bottom: 10px;
				border-radius: 5px;
				/* 圆角边框 */
				border: 1px solid #ccc;
				/* 边框颜色 */
			}

			input[type="button"],
			input[type="reset"] {
				padding: 10px 20px;
				border-radius: 5px;
				/* 圆角边框 */
				border: none;
				/* 去掉默认边框 */
				background-color: #ffcc00;
				/* 按钮背景色 */
				color: white;
				/* 按钮文字颜色 */
				cursor: pointer;
				/* 鼠标悬停时显示指针 */
			}

			input[type="submit"]:hover,
			input[type="reset"]:hover {
				background-color: #ff9900;
				/* 鼠标悬停时改变按钮背景色 */
			}
		</style>

	</head>

下面是js部分的代码

<script type="text/javascript">
			// 需要点一下才可以使用
			function sbmit_func() {
				var name = document.getElementById("name").value;
				var pvd = document.getElementById("pvd").value;
				var sex = document.getElementsByName("sex");
				var email = document.getElementById("email").value;

				// //检查姓名
				// //完成
				if (name === "") {
					alert("姓名不能为空");
					// console.log("姓名不能为空");
					var a = false
					// errorMessage += "姓名不能为空且最多四个汉字或八个英文字母
				} else if (name.length > 32) {
					alert("名字")
					// console.log("名字");
					var a = false
				}

				// // 检查密码
				// // 完成
				if (pvd === "") {
					alert("密码不能为空")
					// console.log("密码不能为空");
					var a = false
				}

				// //检查性别 
				// //完成：遍历就行了
				for (i = 0; i < sex.length; i++) {
					// alert("")
					// // 问题： 什么这里要加括号才可以不报错，是第一个！的原因吗？
					// // 		不是
					if (!sex[i].checked && !sex[i + 1].checked) {
						alert("请选择性别");
						// console.log("请选择性别");
						var a = false
						// 要加break ，否则 sex.checked会报错
						break;
					}
				// 这里也要终止一次循环，否则会导致!sex[i + 1].checked报错
					break;
				}


				// //检查电子邮箱
				// //完成 ：搜的
				var emailPat = /^(.+)@(.+)$/;
				var matchArray = email.match(emailPat);
				if (email === "") {
					alert("请填写邮箱地址");
					// console.log("请填写邮箱地址");
					var a = false
				} else if (matchArray == null) {
					alert("请填写正确的邮箱地址")
					// console.log("请填写正确的邮箱地址");
					var a = false
				}

				// //职业
				var selectElement = document.getElementById('mySelect');
				var selectedIndex = selectElement.selectedIndex;
				var selectedText = selectElement.options[selectedIndex].text;
				if (selectedText === "请选择自己的职业") {
					alert('请选择职业');
					// console.log('请选择职业');
					var a = false
				}

				// //判断是否都按要求写了
				console.log(a);
				if (a === undefined) {
					alert("提交成功");
				}
			}
		</script>

5. 总结

js的学习阶段，自己的学习出现了很大的问题，不管是看课的过程，还是很多事情的协调方面，还是带徒弟的过程，以及自己的情绪问题，

自己的进度被其他同期的同学拉开一大截，导致自己一个人学习的过程很累。想解决这个问题就是要抓紧时间赶回来。

事情协调方面，很多杂七杂八的乱七八糟的事情，导致很难快速融入学习，也导致无法形成长时间的学习，无法投入。解决这个问题的话，需要可以练习一下自己快速切换状态，多做少想，不被上一件事情影响，干一件事就干一件事。也要协调自己的时间，多看看gtd，自从换了手机，很多事情都忘记了，就比如之前写完日报后，会用手机再记录一下，用手机上的笔记来展示，干完一件事就拿出来看看，检查自己是不是忘记了什么。这个事情也要重新再拾起来。

带徒弟方面，自己是师傅，身为师傅，太不稳重了，一点都不可靠，虽然表面上不错，但其实问题也很大。整天跟个傻逼似的嘻嘻哈哈了，小丑是吧。自己学习受印象，也带不好徒弟，光害自个不够，还tm带坏徒弟，你有个屁的责任感，真笑话。好好好，抽根烟冷静下来继续。

这个问题是最迫切解决的，被表面现象迷惑了。周六用开会的对应流程给他们开会吧。

首先，自己方面，要先稳重起来，不能毫无保留地放荡不羁了。平时交流没有防备，就会导致碰到正事也有问题。不能因为自己的情绪不好，就对徒弟们突然说不负责的话，要有原则，不能让人感觉莫名其妙的。

其次，徒弟方面，和他们交流幽默可以，不能再不带脑子哈哈了。

自己的情绪方面，因为事情多，就导致了自己的情绪崩溃。但是事后想一想，还是确实很可笑。这才多大点事啊，就撑不住了，太low了。还是要锻炼出自己的“超绝钝感力”，不被事情影响。

OK！总结中再总结一次：

1. 抓紧时间赶回来进度。

2. 刻意练习一下自己快速切换状态的能力

3. 手机上把gtd和笔记利用回来

4. 稳重一点，别不带脑子嘻嘻哈哈

5. 别情绪化，刻意锻炼超绝钝感力。