JavaScript

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函数。

暂时到这。。。