1. 简介
（1）是什么？
JavaScript，简称JS，是一种运行在浏览器的编程语言，实现人机交互的效果。
（2）干啥的？（作用）
①网页特效 ---（监听用户的一些行为，让网页作出对应的反馈）
②表单验证 ---（针对表单数据的合法性进行判断）
③数据交互 ---（获取后台数据，渲染到前端）
④服务端编程 ---（node.js）
（3）有什么？（组成）
由 ECMAScript 的基础语法和 web APIs（由页面文档对象模型DOM 和 浏览器对象模型BOM组成）组成。
①ECMAScript 规定了JS的基础语法核心知识（比如说：变量、分支语句、循环语句、对象等）
②Web APIs :
DOM 操作文档，比如说，对网页元素进行移动、大小、添加删除等操作
BOM 操作浏览器，比如说，页面弹窗，检测窗口宽度、存储数据到浏览器等
（4）写在哪？（位置）
①内部JS
直接写在HTML文件里，用script标签包住，最好写在</body>上面 （因为浏览器会按照代码在文件中的顺序加载HTML，而JS是控制修改HTML的元素，若HTML未被加载完可能会导致JS失败）
②外部JS
代码写在以.js结尾的文件里，通过script标签，引入HTML页面中。
③内行JS
代码写在标签内部，一般少用，vue框架多用。
2. 基础语法(大概过一遍)
（1）注释与结束符
①单行注释 “//” （ctrl+/）
②多行注释 “/* 。。。*/” （shift+alt+a）
③结束符 “;” （实际开发中，可写可不写，最好要么每句都写，要么都别写）
（2）输入输出语法
①什么是语法？
任何计算机打交道的规则约定。
②输出语法
第一种：向body内输出内容（内容写的标签会被执行）
document.write('要输出的内容')
【注】：反引号 “`” 可以换行输出（使用反引号的几种情况：①需要创建多行字符串；②在字符串中用到嵌入表达式，如：模板字符串${}的使用；③标签模板）
第二种：页面弹出警告的对话框
alert("要输出的内容")上面已有例子，不做重复。
第三种：控制台输出语法，供程序员调试使用
console.log("控制台打印")
③输入语法
显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
prompt("请输入您的姓名：")
【注】JS按HTML文档流顺序执行JS代码（alert()和prompt()它们会跳过页面渲染先被执行）
④字面量literal
在计算机科学中，字面量是在计算机中描述的事/物。（有数字字面量、字符串字面量等）
（3）变量
变量就是一个容器，用来存储数据的容器，它让计算机变得有记忆。（但变量不是数据本身，它仅仅是装东西的盒子）
①变量的申明
要想使用变量，首先要创建变量（也称申明变量或定义变量）==两部分构成：申明关键词与变量名
let 变量名其中，lei 为申明关键字，变量名即为标识
【注】：变量不能重复声明
若函数内部变量没有声明，直接赋值，也当全局变量看，但强烈不推荐。
②变量的赋值
赋值号“=”，例如 let age = 18，意思就是把18赋给了age
③变量的更新
变量赋值后，还可以再赋值给它（新的值会覆盖掉旧的值），以此完成变量的更新。
④变量的本质
内存：计算机中存储数据的地方
变量的本质：程序在内存中申请的一块用来存放数据的小空间
（4）数组
数组（Array），一种将一组数据存储在单个变量名下的优雅方式。
let arr = []命名使用规则与python类似。
申明： let arr = ["数据1"，“数据2 ”，...]
使用：arr[0]
数组的基本操作：增删查改
（5）常量（相较于let更常用）
用const声明的变量叫常量。常量，永远不会改变的值。Like: const name = "JS"
它存的其实不是值，是地址！！！
[注]：常量不允许重新赋值，申明时需要赋值（初始化）
有变量先用const，发现需要修改再改回let。
但是要注意！！！
①简单数据类型，不能修改值；
②复杂数据类型（数组、对象等），只要地址不修改就可以（追加元素可以）。===因为复杂数据类型的值存在堆里边
（6）数据类型
JS数据类型整体分为两大类：
①基本数据类型
number 数字型：可以是整数、小数、正数、负数
string 字符串型：使用单引号、双引号包裹的数据都叫字符串。
（单引号、双引号没有本质区别，更建议用单引号）
[注]：“+” 可以实现字符串的拼接
模板字符串：document.write("我今年${age}岁了")
boolean 布尔型：表示肯定或者否定时，计算机中对应的是布尔数据类型。（true或false）
undefined 未定义型：只有一个值 underfined (声明一个变量未赋值的就是 undefined)
null 空类型：仅仅是一个代表“空”、“无”或“值未知”的特殊值
开发时，就是说将来有个变量里边存放的是一个对象，但是对象还没创建好，可以先给个 null
②引用数据类型
object 对象
what：也是JS中的一种数据类型。可以理解为是一种无序的数据集合，注意数组是有序的数据集合。（用来描述事物或人）
如何使用：
其基本操作：
对象的方法：
遍历对象：
③检测数据类型
typeof x，可以显示出x的数据类型
④类型转换
从表单、单选框、多选框取来的值默认都是字符串类型。这些值相加减需要转化为数字类型。
一、隐式转换==>系统内部自动将数据类型进行转换
二、显式转换==>自己写代码告诉系统该转换成什么类型
转数字类型：前面加一个“+”
[注]：NaN也是数字类型，代表非数字
parseInt(x)，把x转为整数或只取整数【不会四舍五入】
parseFloat(x)，把x转为浮点数或只取浮点数
转Boolean类型：
（7）运算符（和C语法大致相同）
①赋值运算符：对变量进行赋值的运算符
②一元运算符
大多数的JS运算符可以根据所需的表达式的个数（需要几个数），分为一元运算符、二元运算符、三元运算符等
一元：“+” 或 “-”，自增、自减
③比较运算符
④逻辑运算符（与“&&”或“||”非“!”）
⑤运算符优先级（优先级高的先算）
（8）语句
①表达式和语句
表达式：可以被求值的代码，比如说：num=3+7。
语句：语句不一定有值，例如说：alert()，for和break等语句。
②分支语句
分支语句包括：
if分支语句(if...单、if...else...双、if...if else...else...多分支)、
三元运算符(
)、
switch语句
③循环语句
while循环（break强制退出）
for语句
（9）函数
函数就是把重复的部分封装在一起重复使用，提高代码的使用效率。
函数大致分为两种：具名函数（有名）、匿名函数（无名）。
匿名函数：没有名字的函数是无法直接使用的。
而它的使用方式：函数表达式；
立即执行函数。（第二个小括号在调用）
函数的使用格式：
参数有实参（实际参数）、形参（形式参数，无需声明，仅在函数内有效）。（实参传数值给形参）
【注】：实参形参在数量上尽量保持一致，若形参不给值，默认为：undefined，而 undefined+undefined = NaN
更严谨的写法：
函数返回值
（10）数学内置对象
what：JS内部提供的对象，包含各种属性和方法给开发者调用
常用的内置对象-math：Math对象是JS提供的一个“数学”对象 
Marh.PI ===>圆周率
Math.round() ===>四舍五入
3. Web APIs
（1）What is the Web API?
它是一组可通过网络进行访问和交互的接口。
作用：使用JS去操作HTML和浏览器
分类：DOM（文本对象模型）、BOM（浏览器对象模型）
（2）What is the DOM？
DOM（Document Object Model），是用来呈现以及与任意HTML或XML文档交互的AIP。
简单地说，DOM是浏览器为我们提供了一套专门用来操作网页内容（标签）的功能。
其作用自然就是，开发网页内容特效和实现与用户的交互。
①DOM Tree
DOM树（文档树）：将HTML文档以树状结构的形式直观的表现出来。
DOM树直观的体现出了标签与标签之间的关系，更有利于我们理解代码。比如说，下面右图：
②DOM对象（重要！！！）
DOM对象：浏览器根据HTML标签自动生成的JS对象。（任何标签都是一个对象）
下图来理解，document就是最大的DOM对象
如下图：div在HTML里叫标签，在JS里叫对象。
DOM的核心思想：把网页内容当作对象来处理。
③如何获取DOM对象？
此处重点讲用CSS选择器获取DOM对象。
1.选择匹配的第一个元素，其语法：
document.querySelector('css选择器')举个栗子：
其返回值是CSS选择器匹配到的第一个元素，是一个HTMLElement对象。
若没有匹配到，则为NULL。
当然，想要获取第几个元素或随机获取元素：
//获取第三个元素
const li = document.querySelector('ul li:nth-child(3)')
//随机获取第几个元素(random为随机数，${}为模板字符串)
const li = document.querySelector(`ul li:nth-child(${random})`)
它可以直接对其进行修改。
[注]：一定要有引号！！！
2. 选择匹配的多个元素，其语法：
document.querySelectorAll('css选择器')像这样：
其返回值是CSS选择器匹配的NodeList 对象集合（以数组的形式来展示，但是不是数组，是一个伪数组，该数组有长度、有索引，但是没有pop()、push()等数组方法）。
不可以直接修改，只能通过数组遍历的方式逐个修改。like this，
④操作元素内容
1. 对象.innerText属性：实现了网页文本内容的修改。
修改前
修改后
[注]：此属性仅仅显示文本，并不会解析标签
2.对象.innerHTML属性：将文本内容添加/更新到任意标签位置。
该属性会解析标签，多标签时建议使用模板字符。
修改前：
修改后：
⑤操作元素属性
1.常用属性（如：href，title，src等）
其语法：
对象.属性 = '值'
修改前：
修改后：
2.样式属性
Ⅰ. 通过style属性操作css
其语法，
对象.style.样式属性 = '值'举个栗子，（图中有注意事项）
来个小练习：实现页面刷新，页面随机更换背景颜色
Ⅱ. 操作类名(className)操作css
当你需要给这个盒子修改的样式比较多时，用上面的方法会让代码变得比较繁琐。因此，可以借助类名的形式。
其语法，
对象.className = '类名'举个栗子，
注：className是用新值换旧值的（新值会覆盖旧值），当然，想实现新值的同时保留旧值，可以这样：
Ⅲ. 通过 classList 操作类控制css（最常用！！！）
当你需要保留原值时，第二种方法要求你去找原值的类名，也比较麻烦，因此还有第三种方法。
通过classList方式可以追加（在保留前面属性的基础上再加入其他属性）或删除类名。
其语法，
//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类（原来的类还存在）
元素.classList.toggle('类名')以add为例，remove以此类推：
这里注意一下toggle，与我认知的 "切换" 略有不同！！！
当元素本身不含有a类名（设它叫a类）时，用toggle后，元素会加上a类：
当元素本身就含有a类时，用toggle后，元素会把a类删除：
简单记忆：有则无，无则有。
写一个随机轮播图的小案例：
3.表单属性
获取表单里的值，需要用value属性。即：表单.value
举个栗子：
disabled属性---button是否禁用
check属性---checkbox是否选中
这里注意，disabled和check这两个属性只能接收布尔值，无需加引号~
4.自定义属性
总的来说，标签属性分为两种，一种是标准属性（比如说，class，id...），还有一种就是自定义属性。
自定义属性呢，就是由我们自己定义，自己使用的属性。（都以"data-"开头）
dataset就相当于自定义属性的一个集合，若想获取具体某一个属性，直接再加一个".属性"即可
⑥间歇函数
它其实是定时器的一种，在网页开发中，我们也许会需要实现倒计时、或者每隔一时间自己执行一段代码，这是就需要用到间歇函数，也叫定时器函数。
定时器函数由两部分组成，一部分是开启定时器，还有一部分叫关闭定时器。
1.开启定时器
其语法，
setInterval(函数名，间隔时间)作用：每隔一段时间，就引用一次setInterval里面的函数，自动去调用。但是不要加括号！！！
因为加上括号以后，就变成了调用。
这里补充：函数引用与函数调用的区别~
首先，函数的引用：
函数引用是指函数作为一个对象被传递或赋值，但它本身并不执行。
它通常用于将函数作为参数传递给其他函数，或者作为对象的属性。
接着是，函数的调用：
函数调用是指执行函数。当函数被调用时，JavaScript引擎会立即执行函数体内的代码。
它们的明显区别：
1. 执行的时间：函数引用只是指向函数的指针，它不会导致函数立即执行。而函数调用会立即执行函数体内的代码。
2. 返回值的不同：函数调用会返回函数执行的结果（除非函数没有返回值，此时默认返回
undefined）。函数引用本身不返回任何值，它只是一个指向函数的指针。3. 上下文的不同：函数引用在作为参数传递给其他函数时，可以保持其原始的上下文（即
this的值）。而函数调用的上下文取决于调用它的环境。简单的说，
引用函数，就类似于，你有这个函数地址，但是你并没有实际过去；
调用函数，就类似于，你访问这个函数，走进了一栋建筑（执行代码）。
最后，这里仅仅只是将JS下的函数引用与函数调用，其他语言也有，但可能表现形式有所区别。
间隔时间单位为毫秒。
【注】：该间歇函数，一旦开启，永不停歇。
2.关闭定时器
其语法，
let 变量名 = setInterval(函数名，间隔时间)
clearInterval(变量名)
Test：写一个小按钮，里边内容“我同意（3）”，然后随倒计时变化，按钮开启（开始默认关闭）
⑦事件监听
1.什么是事件？
事件是指在编程时，系统内发生的动作或发生的事情。
2.什么是事件监听？
就是让程序检查是否有事件发生，一旦有事件发生，就立即调用一个函数作出响应，也称为绑定事件或注册事件。
其语法，
元素对象.addEventListener('事件类型',要执行的函数)事件监听三要素：
事件源：哪个DOM元素被事件触发了，获取DOM元素
事件类型：用什么方式触发的，Like，
事件调用的函数：要干啥
此函数，每点击一次，函数就会执行一次。
小Test：
3. 事件对象
事件对象也是一个对象，这个对象存储了有事件触发时的相关信息。
其使用场景，需要判断用户输入了哪个键，判断鼠标点击了哪个位置，从而作出反应。
如何获取？
在事件绑定的回调函数的第一个参数就是事件对象。如，下面的e就是一个事件对象。
元素.addEventListener('click',function(e){})其常用属性，
4.环境对象
环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境。
每个函数里都会有环境对象this，在普通函数里，this指向的是window。简单地说，谁调用，this就指向谁。
Like，
写个小例子：鼠标经过哪一个选项，哪一个选项就会亮起：
5.回调函数
若将函数A作为参数传递给函数B时，A就是一个回调函数。
特点：它不会立马执行。
比如说，之前定时器那里
function fn()
{console.log('回调函数')
}
setInterval(fn, 1000)以上面代码为例，fn就是回调函数，在setInterval函数中，每过一秒，回头调用一次fn函数。
暂时到这。。。