JavaScript 学习总结
JS 引入与使用
JS 的引入推荐将 <script> 标签放在 </body> 前，这样可以确保 HTML 加载完毕后再运行脚本。要定义函数的话就在 script 标签里面编辑。外部引入脚本的格式：<script src="path/to/your/script.js"></script>
基本写法
var i = 10; var 用来定义变量。
alert(typeof i); typeof 是用来返回一个当前变量类型的字符串。
JS 数据类型
数值 number，字符串 string，逻辑布尔 boolean，空 null，未定义 undefined，Object（对象，数组），Symbol 和 BigInt 这些是 ES6 及以后版本中新增的数据类型。
JS 运算符号
与 C 语言类似。
注意点：
1、如果出现除零, 那么结果是 infinity，而不是报错。
2、取余数运算对于浮点数仍然有效，如果和 0 取余数，结果是 NaN (not a number)。
JS 控制流程
与 C 语言类似，JavaScript 的大部分基础语法都与 C 语言类似，例如条件语句、循环语句等。
JS 函数
三种写法：
1、与 Python 类似，先写关键字 function，再写函数名称 function name(参数) {函数内容}
2、先定义变量再赋值关键字函数，var name = function() {}
3、最少用且不推荐使用，因其安全性和性能问题。先定义变量再赋值函数，var name = new Function('js代码')
4、箭头函数（ES6 语法）：const func = () => { // function body }
1、在
head 部分直接函数名，fun1()；2、在
body 的标签中设置相应的属性加函数名字示例 ondblclick="fun1()"传参与 Python 语言基本类似，注意：实际参数个数过多或者过少都不会报错。
JS 数组
四种创建方法，前三种使用 new Array()；
1、空数组 var name = new Array();
2、定长数组 var name = new Array(5);
3、定长，指定元素值 var name = new Array();
4、类似于 Python 的创建 var name = [3, 4, 5]
元素和长度随意更改，长度通过 length 属性赋值更改。name.length=6; name[0]=3;
遍历数组方法：
1、用 for 循环和 length 的结合
2、for (var name in 数组名){}
常见方法使用，详细查询菜鸟网学习。
JS 的常用对象
Array 对象, String 对象, Math 对象, Number 对象, Date 对象等等. 各对象的使用方法详细查询菜鸟网学习。
JS 自定义对象
三种方法：
1、Object 类型，var name = new Object(); 然后就类似 Python 更改类属性一样，name.age=23; name.eat=func();
2、准备一个构造方法，function Name() {} , 然后赋值var n1 = new Name(传参); 调用 n1.属性名 即可
3、字面量创建，var name = {name:"小明", eat:function() {}}; 调用 n1.属性名 即可
JS 的类对象的原型
原型可以理解为创建 JS 类的蓝图，根据原型创建实例然后赋值给对象，这就是整个原型的作用流程。
JS 中的事件
事件触发和绑定标签中设置相应的属性加函数名字示例 ondblclick="fun1()"，常见的事件详细查询菜鸟网学习。
BOM 和 DOM 编程
BOM 是什么？是浏览器的控制，DOM 是什么？是整个文档的控制。他们之间有关系吗？有！BOM 其实也是一个类，一个被抽象出来的类，它的本体是浏览器，被抽象成 window 对象。
DOM 也是被抽象出来的 document 对象，这个对象是用来控制当前浏览器页面对应文档的，因为文档是显示在浏览器上的，所以 document 对象是 window 类对象的属性。
BOM 的学习比较简单主要是记住各种属性和方法就可。
DOM 操作
DOM 属于 BOM 属性当中比较难的一个，目前需要掌握的是对节点的各种操作。
1、获取节点：
1-var element1=document.getElementById("d1");通过 ID 名
2-var elements=document.getElementsByClassName(className);通过类名
3-var elements=document.getElementsByTagName("input");通过标签名
4-var elements=document.getElementsByName("hobby");通过 name 属性
节点的获取类似于通过选择器筛选出指定内容，推荐使用 querySelector 和 querySelectorAll，这些方法更灵活，支持 CSS 选择器。
2、操作节点属性：
语法1：先获取属性值，然后将属性赋值给变量，最后将更改值赋值给变量的属性
示例:
var node = document.getElementById("in1");
console.log(node.type);
node.type="button";
语法2：也是先获取属性值使用两个方法
示例:
var node = document.getElementById("in1");
console.log(node.getAttribute("type"));
node.setAttribute("type","button");
3、操作节点样式：总的来说是改变 CSS
步骤如下：先获取属性值，然后将属性赋值给变量，变量通过访问和修改 style 属性的各种属性实现。如果提前写好选择器可以通过增加属性来改变
示例:
function fun1() {
// 节点.style.样式名=样式值
var element=document.getElementById("div1");
element.style.width="200px";
element.style.height="200px";
element.style.border="10px solid green";
// css 样式在更多的时候是以 class 选择器的形式作用到元素上
// 可以通过修改 class 属性, 影响 div 的样式
element.setAttribute("class","a")
}
4、操作标签文本：两种 innerText 不包含 HTML 结构和 innerHTML 包含 HTML 结构。
5、增加删除节点：
var div1=document.getElementById("d1"); 创建节点
div1.appendChild(in1); 追加节点
in3.onclick=function (){} 节点点击后的操作
div1.removeChild(in1); 删除节点
增加节点时，可以使用新的 API 例如 insertAdjacentHTML, append, prepend，它们更现代并且使用更方便。