前端学习笔记（三）：js基础

前端学习笔记（三）：js基础

学习总括：

学习js的参考网站： MDN

一、js基础语法

1. js数据变量

1. js 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
2. JavaScript的组成由以下组成：
   
3. script标签写在body结束标签的上面，如果要是引入的话如下所示(注意引入外部的js样式的时候，不能在script里面书写样式代码，不会生效)，还有一种是内联，直接在标签内部书写：
   
4. 注释//单行，/* */为多行，英文分号 ; 代表结束符，可写可不写（现在不写结束符的程序员越来越多），因为换行符（回车）会被识别成结束符 ,如果一行多个语句，需要加；。但为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求.）
5. js输出语法（电脑输出）：
   
   输入语法为（用户输入），返回用户输入的值（且是字符串类型的）：
   
6. js字面量（类比于程序语言中的数据类型），如：数字字面量
7. 变量不是数据本身，它们仅仅是一个用于存储数值的容器。js使用let声明变量 ，后面跟变量名。 let 不允许多次声明同一个变量。但可以一次声明多个变量。
8. 变量名命名的必须遵循的规则和工作中常用的规范：
   
9. 声明变量用let，不要用var,var具有以下缺点：
   
10. js声明数组如下，里面的数组元素的类型可以不一样：
    
11. js数据类型分类如下，JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认：
    
12. 通过单引号（ ‘’） 、双引号（ “”）或反引号( ` )包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
13. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双），必要时可以使用转义符 \，输出单引号或双引号（反引号类似）。
14. console.log时候如果是布尔、数字是蓝色的，未定义或者空的为浅灰色，字符串是黑色的，使用加号拼接字符串时，拼接后的结果还是字符串。
15. 模板字符串：必须以反引号包含，而且使用反引号输出换行不会报错，正常的引号就会报错。
    
16. 只声明变量，不赋值的情况下，变量的默认值为 undefined，null 表示值为空，示赋值了，但是内容为空，布尔类型（boolean）有两个值true（真）false（假），注意首字母小写。
17. 不声明 只赋值虽然不会报错，但是是全局变量，使用比较危险，不建议使用。
18. 使用typeof检测数据的类型，但是注意typeof null的输出是object，官方解释：把 null 作为尚未创建的对象。
19. + 号两边只要有一个是字符串，都会把另外一个转成字符串 ； 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型，+号作为正号解析可以转换成Number
20. 显示转换：parseFloat如果数字后面有字母，会把字母过滤掉，通常用来去除数字后面的单位，但是如果字母加数字，也是NaN。下面的正常转换后类型都是number。
    
21. 转换为字符串，进制不写默认就是十进制，转换后的进制也是字符串
    

2. js运算符及语句

2.1 运算符

1. %：取模（取余数）， 开发中经常作为某个数字是否被整除
2. 先乘除后加减，有括号先算括号里面的，乘、除、取余优先级相同。加、减优先级相同
3. 将等号右边的值赋予给左边, 要求左边必须是一个容器（变量），运算符中+=、++、*=与c语言类似。几元运算符，看运算符要几个变量，如加号为二元，++为一元。
4. 前置自增和后置自增单独使用没有区别，都能使得变量加一，运算时候区别如下：
   
5. ==： 左右两边是否值相等，例如5和字符5的值是相等的（不要混淆为比较ascii）； 三个=： 左右两边是否类型和值都相等；（常用）!=： 左右两边是否不相等 !两个等号：左右两边是否不全等
6. NaN不等于任何值，包括它本身，即NaN==NaN返回也是false，尽量不要比较小数，因为小数有精度问题，字符串比较，是比较的字符对应的ASCII码
7. 负数也为真，为假的数有以下五种： false 数字0 ‘’ undefined null ，逻辑运算符返回的不是true和false，只有not 返回的是True和False。而**！！！and和or的运算结果返回的是能确定结果的最后一个值！！！因为我们之前常做判断语句，所以没有什么问题**。包括python也是这样，如过结果是undefined null 返回也是undefined null，空字符串返回空 。
8. 逻辑运算符中的短路（注意运算结果那句话），num=null || 0，可以将空字符转为数值0. 如果后面是字符串5，返回也是字符串5
   
9. 运算符的优先级总结如下：逻辑与比逻辑或优先级高
   
10. 纯数字和数字字符串相比较，则将字符串数字隐式转换成数字（单纯的去掉引号的数字）再进行比较；纯字符串比较，转换成ASCII码在进行比较，就算是两个字符串里面都是数，也是按照ASCII进行比较，（从左到右一个一个比较）；数字与其他字符串之间的比较，会把字符串识别为NaN，即false

2.2 语句

1. 表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)其实某些情况，也可以把表达式理解为语句，因为它是在计算结果，也是做事。
2. else if 多分支，中间有空格
3. ！！！把输入的转为数值，在prompt前加+，不要再赋值后的变量前加+，会报错。
4. if else工作中要加上大括号（如果后只有一句可以省略大括号，不建议写）
5. switch找到跟小括号里数据全等的case值，并执行里面对应的代码若没有全等 === 的则执行default里的代码,switch case语句一般用于等值判断,不适合于区间判断,switch case一般需要配合break关键字使用,没有break会造成从上到下一直执行到有值的地方为止。
6. 设置断点的方法，注意，设置完之后记得刷新页面，断点只会执行断点之前的语句，当前的也不会执行：
   
7. 注意变量的初始化不要忘了，不然相加后是NaN，声明未初始化值是undefined
8. for循环括号中的分号不能省略

3. js数组与冒泡排序

1. js数组新增的方式：数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度，数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度，如果是多个元素，用逗号隔开：
2. 定义一个新数组 let newArr=[],数组全部输出的时候可以整个输出数组名。
3. js数组删除的方式：
   （1）**数组. pop() 方法从数组中删除最后一个元素，并返回刚刚删掉的值（类型不变） **
   （2） 数组. shift() 方法从数组中删除第一个元素，并返回刚刚删掉的值
   （3）数组. splice() 方法 删除指定元素：start 起始位置: 指定修改的开始位置（从0计数，包含strat的当前位，如果给的是字符串，自动转为数值）deleteCount: 表示要移除的数组元素的个数，表示可选的。 如果省略则默认从指定的起始位置删除到最后。
   
4. 冒泡排序重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
5. 冒泡排序js代码实现（假设从小到大）：
   

4. js函数

1. 函数的声明方式，函数名和变量名规则基本一致，命名建议：前缀常用动词约定，括号里面填写参数，称为形参（不用声明），调用的时候的参数叫实参，多个参数用逗号隔开：
   
2. 函数如果不传参数，是undefined，undefined和其他数值运算结果是NaN,，除了和字符串，因为字符串会进行拼接。可以使用下面的方法规避这个问题，使得没有参数的时候值为0，数组名可以直接传入：
   
3. 函数没有返回值，调用后返回undefined，return 表达式，先计算表达式，在返回。函数只打印函数名字，不加小括号，输出整个函数的内容
4. 函数内部只能运行 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写， return会立即结束当前函数。函数可以没有 return，这种情况函数默认返回值为 undefined，return和数值中间记得加空格
5. return只能返回一个值，若想返回多个值，用中括号将其变为数组返回
6. 多个变量等于同一个值时，可以连写，如m1=m2=1
7. script标签可以有多个，全局（变量或者函数等）作用于整个的script标签，其作用域分类如下，对应变量成为全局变量等：
   
8. 注意：如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐，函数内部的形参可以看做是局部变量。
9. 调试的时候变量的作用域，Block块级，Local局部，script/global:全局（如果未声明赋值，变量放在global，不推荐；如果声明赋值，放在script）
10. 函数有具名函数，和匿名函数，匿名函数的写法如下，也可以传参（一种函数表达式的写法）：
    
11. 立即执行函数写法如下，可以防止变量污染，里面的都是局部变量，不会和外面的冲突。 第一个小括号放的形参 ，第二个小括号放的是实参，其实写法就是将上述匿名函数，不赋值变量，直接拿来使用，假如立即执行函数给了函数名，不能拿来调用，注意位置！！！，外部引入的js文件放到body标签结束之前！！！：
    
12. 注意： 多个立即执行函数（其它函数不用）要用 ; 隔开，要不然会报错，工作中常把；卸写在函数的开头。
13. 函数传的参数多得话，多余的忽略不计，传的少的话，未赋值的未undefined
14. 在函数的形参那里也可以给参数一个默认的值

4. 对象

1. 对象（object）：JavaScript里的一种数据类型，可以理解为是一种无序的数据集合，用来详细描述一个具体的事物。
2. 静态特征（属性） (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示，动态行为 （方法）(点名, 唱, 跳, rap) => 使用函数表示，声明方式如下，多个属性和方法要用逗号隔开：
   
3. 变量访问属性的方式如下，第一种不能加引号，第二种必须加引号，属性名和方法名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线：
   
4. 对象调用方法，函数中也可以传递参数：
   
5. 对象的增删改查：
   
6. console.dir() 方法用来对一个对象进行检查(inspect)，并以易于阅读和打印的格式显示。该方法对于输入 DOM 对象非常有用，因为 dir 方法会显示DOM对象的所有属性,建议调试的时候使用console.log
7. 遍历对象使用for in语句，具体使用如下，注意只能使用obj[k]，因为k得到的是字符串（属性名，不是值）,obj.k是找名字叫k的属性的值（即这里的k不要看成变量了）：
   
8. 数组里面也可以放对象，得到值可以先遍历数组，然后直接拿得到的对象点属性即可，因为这里不是在循环对象！
9. 内置对象： JavaScript内部提供的对象，包含各种属性和方法给开发者调用，如Math，注意math.floor函数的.5是往大的取整，如1.5为2，-1.5为-1.其他的都是四舍五入。
10. 随机数生成的常用写法（包括min和max），常做的是将第三个封装成一个函数：
    
11. script可以包含在盒子里面，里面的内容就会包含在盒子里面，举例如下：
    
12. 简单数据（简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型，如string ，number）类型存放到栈里面，引用数据（复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型，通过 new 关键字创建的对象（系统对象、自定义对象））类型存放到堆里面
13. 简单数据类型的栈空间不干扰，相等后是两个空间，但是对象相互复制后，指向的是同一个对象。
14. 真正开发用vue，其实不用特别兼顾兼容性，因此大胆使用新语法

二、WebAPI

Web API 作用: 就是使用 JS 去操作 html 和浏览器，分类：DOM (文档对象模型)、BOM（浏览器对象模型）

1. 初识DOM

1. DOM（Document Object Model——文档对象模型）是浏览器提供的一套专门用来操作网页内容的功能（如轮播图、盒子的移动），开发网页内容特效和实现用户交互。
2. DOM树将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，文档树直观的体现了标签与标签之间的关系，例如：
   
3. DOM对象：浏览器根据html标签生成的 JS对象，所有的标签属性都可以在这个对象上面找到，修改这个对象的属性会自动映射到标签上，也就是说例如button放到HTML中我把把他成为标签，通过js拿到后我们称为对象（DOM对象），里面有很多属性和方法，可以直接使用。
4. document对象是最大的DOM对象，网页所有内容都在document里面

2. js获取修改DOM对象

1. js获取某个元素的方法如下：CSS选择器匹配的**第一个元素,**一个 HTMLElement对象。如果没有匹配到，则返回null，css选择器注意是字符串，必须加引号，其次里面可以写多种选择器，用逗号隔开。
   
2. js获取全部元素的方法，想要得到里面的每一个对象，则需要遍历（for）的方式获得。哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组（NodeList），里面只有一个元素而已
   
3. 可以直接在控制台输入进行调试，不用再界面写console.log
4. 其它获取元素的方式如下：
   
5. 书写到标签的方式的区别如下，注意输出内容加引号，三者（所有只要有反引号）都可以用${}引用变量，注意后两个元素指的是获取的DOM对象，注意后两种写法是等号：
   
6. 可以直接对象.属性名，去修改对应的标签的属性。
7. 设置修改style标签里面的样式用，style标签可以是内嵌或者外引都行：对象.style.样式属性=值，下面三点需要特别注意：
   
8. 如果修改是style里面的body属性，可以直接使用document.body,其它的不能这样写。
9. 可以使用BOM对象.className='类名1 类名2’等给标签添加属性，注意添加属性后会覆盖原来的类，而且没有id形式的，注意是类名，没有点，querySelector是选择器，需要点
10. 为了解决9的覆盖问题，可以使用下述的形式，切换一个类的意思是如果原来有就去掉，没有就加上，toggle函数如果添加上返回true，移出的话返回false：
    
11. 对于一些特殊的属性比如： disabled、checked、selected，可以直接DOM对象.该属性=true/false进行修改，注意disabled为false代表可以使用

3. 定时器-间歇函数

1. 每隔一段时间需要自动执行前面的函数代码，设置定时器的函数如下，注意单位是毫秒，1s=1000ms，而且函数要是函数的名字或者声明，不要加（），其返回数值id代表当前是页面中第几个定时器：
   
2. 关闭定时器写法如下：
   

4. 事件基础

1. 事件是在编程时系统内发生的动作或者发生的事情
2. 事件监听就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件
3. 事件监听三要素：
   事件源： 那个dom元素被事件触发了，要获取dom元素
   事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
   事件调用的函数： 要做什么事
4. 写法如下：注意事件类型必须加引号，而且里面的所有事件都是小写的，其次函数是点击之后再去执行，每次事件发生都会执行一次：querySelector前面不一定是document，也可以是其它dom对象更精准查找
   
5. 在局部里面对全局变量进行的赋值操作可以在全局进行使用
6. 常用到事件如下：
   
7. 高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用，如函数表达式和回调函数。
8. 如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数，当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
9. this是一个DOM对象，哪个对象调用使用了this，那么this就指向谁，注意小心嵌套的问题

项目练习

1. 获取文本域textarea或者input里面的值用dom对象.value
2. 写js看清是哪个对象，同时，注意是id还是class，同时如果是querySelectorAll注意选多个是数组，如果要更改，要把数组里面的取出来更改。
3. script里面的变量可以和html的标签重名
4. 注意哦，全局变量一变全变
5. 改变输入框的值用value（即1的用法），不要用innerHTML，那是往标签里面写东西的，注意进行加减判断是不是数值类型
6. 尽量不要用全局变量
7. 使用++可以也可以进行隐式转换
8. tab标签栏切换，可以选出有active的标签，然后把这个标签的active属性移除掉，然后再给我点击下的标签添加active，添加的时候也是找到对应属性下的active，不会重叠
9. 选择类的时候尽量写详细一点，避免发生歧义。
10. 使用display：none、overflow: hidden,属性，被隐藏的元素不占据任何空间 ，visibility = hidden，隐藏的元素占用空间。

5. 节点操作

1. DOM节点：DOM树里每一个内容都称之为节点
2. 节点类型
   （1） 元素节点
   • 所有的标签 比如 body、 div • html 是根节点
   （2）属性节点 ：所有的属性 比如 href
   （3）文本节点：所有的文本
3. 书写形式如下，只找亲爹，返回的是dom对象：
   
4. 子节点查找的方法，重点用第二个！，必须是亲儿子：
   
5. 查找兄弟节点：了解：
   
6. 增加节点，（1）首先创建节点：注意标签名要加引号，返回dom对象
   

（2）其次增加节点到指定位置，要插入的元素，插入多个元素，用逗号隔开，注意插入的元素即获得的变量，因此不用加引号：

6. 向元素里面填入标签代码固定相同的话，可以直接innerHTML写入里面。
7. 克隆节点的方式，如下：cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值，若为true，则代表克隆时会包含后代节点一起克隆，若为false，则代表克隆时不包含后代节点，默认为false：

8. 删除节点，在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除。使用父元素.removeChild(要删除的元素)，如不存在父子关系则删 除不成功，删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点。

6. 时间对象

1. 实例化时间对象，创建一个时间对象并获取时间，如果后面再写具体的时分秒，如下’1949-10-01 18:30:00’
   
2. 获取到data对象后，常用下述的方法，返回的是数字，注意，星期日返回的是0！
   
3. 时间戳是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
4. 实例化date后，使用date.getTime()、或者+new Date() ,或者直接Data.now() ,推荐使用第二种，在实例化前面加加号，最后一种只能返回当前的，不能返回指定时间的。

7.重绘和回流

1. ** 回流(重排) **当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流或者重排
2. 由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。
3. 重绘不一定引起回流，而回流一定会引起重绘。(重绘不影响布局，因此不一定会重构，但是重构，布局改变，一定会重绘)

案例练习

1. Date不是Data，栓q，记得把毫秒除以1000
2. 防止输入无意义空格, 使用字符串.trim()去掉首尾空格
3. 可以使用new Date().toLocaleString()便捷生成所需的时间字符串
4. 变量记得声明！！！不然报错你都不知道哪里错了
5. 给每个新建的li添加了删除操作，其直接可以对应删除，不用再去考虑对应的问题，即绑定的事件会自己对应，不用担心对应的问题
6. **parseInt（‘’）最大的作用可以用来去除单位！！**如果括号里面返回的本身就是字符串，不要加引号
7. 一个易错点：变量的名字相同，如果全局变量，在局部，没有重新声明，一变全变，如果重新声明，那么只局部变，全局不变
8. 声明函数的时候不要声明一个和变量名一样的函数名，避免冲突。
9. 多个元素动态删除操作使用如下代码，或者重新获取这几个元素，每个进行一次绑定
   记住一点：遍历循环删除 操作用找父亲的写法，不要用找孩子的写法

del[i].addEventListener('click', function () {
        carBody.removeChild(this.parentNode.parentNode)//根据父节点的关系去查找（几级父节点根据情况而定）
        // carBody.removeChild(carBody.children[i])//动态找孩子会报错，因为删除之后长度会发生变化
      })

8. 事件高级

1. 事件对象，如下述函数中的e代表就是一个事件对象，里面也包含着很多的属性方法。

  btn.addEventListener('mouseenter', function (e) {
            console.log(e)
        })

2. 事件对象常用的属性：可见窗口字面意思，浏览器此时的窗口区域（不要去忽略调试代码的那一块），有时候界面会设置高度之类的比较大，就有不可见的区域，dom元素可以去理解为div盒子，pageX 和 pageY 跟整个文档区域（包含不可见的区域）有关系
   
3. 自动触发点击按钮 ，Dom对象.click()
4. 如果是点击后生效，尽量使用keyup，不要使用keydown，判断完keyup的触发属性后，可以使用事件对象.key==='Enter’判断是否是回车键
5. 事件流经过的两个阶段：捕获和冒泡。子孩子被触发事件，如果父级也有相同的事件会一起被触发，逐个父级看，直到document，这就是冒泡事件冒泡默认存在
6. 捕获阶段（了解即可）：从父级依次调用子集，前提给addEventListener添加第三个参数，true代表捕获出发，默认是false，冒泡。
7. 阻止冒泡/捕获的代码，组织谁在上面写e（事件对象）.stopPropagation()
8. 区别是一个是鼠标移入，一个是鼠标移出。对应，使用那个，另一个最好对应
   
9. 阻止默认的行为，用事件对象.preventDefault()
10. 同一个对象绑定了相同的事件，不会被覆盖，解绑事件用对象.removeEventListener(‘事件类型’，函数名)，不能对匿名函数进行解绑。
11. 事件委托是给父级添加事件 而不是孩子添加事件，使用事件对象e.target获取当前的触发子元素对象。

案例练习

1. 数组元素里面也可以直接追加对象
2. 防止过多渲染数组，每次渲染前可以先清空数值使得innerHTML=‘’
3. 使用加号将字符串进行转换数值的时候，如果还有其它运算符，最好加上空格，避免报错
4. 删除数据使用事件委托，委托给父级元素，单独模块，不要写到循环里面，渲染时候增加一个id，然后进行删除操作。

9. 滚动事件和加载事件

1. 当页面进行滚动时触发的事件，很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部，事件名：scroll，写法和之前一样，给 window（页面） 或 其它对象添加 scroll 事件
2. 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件，事件名：load给， window（页面） 或 其它对象添加
3. DOMContentLoaded 事件当初始的 HTML 文档被完全加载和解析完成之后被触发，而无需等待样式表、图像等完全加载。

10. 元素大小和位置

1.scroll家族

1. 获取元素的内容总宽高（不包含滚动条）返回值不带单位对象.scrollWidth和scrollHeight，内容若超出盒子，超出部分也是算的
2. 获取位置: 获取元素内容往左、往上滚出去看不到的距离scrollLeft和scrollTop示意图如下，这两个属性可以赋值，不要加单位，默认px：
   
3. 开发中，我们经常检测页面滚动的距离，因为滚动的是html页面获取html对象的方法document.documentElement 返回对象为页面的HTML元素，（类比div滚动，首先要得到div这个对象）不要去获取body对象，不可行，直接使用document.documentElement.scrollTop（直接记住，获得页面滚动距离）,同时给页面添加监听事件是给window添加。

2.offset家族

1. 获取元素的自身宽高、包含元素自身设置的宽高、padding、border。offsetWidth和offsetHeight
2. 获取元素距离自己定位父级元素的左、上距离，如果都没有定位则以文档左上角为准，offsetLeft和offsetTop，这个属性代码不会提示。 注意是只读属性，示意图如下：
   

3.client家族

1. 获取宽高：获取元素的可见部分宽高（只看能看到的）（不包含边框，滚动条等）clientWidth和clientHeight
2. 获取位置（了解）：获取左边框和上边框宽度，clientLeft和clientTop 注意是只读属性
3. resize事件，当窗口变化的时候触发的事件，document.documentElement.clientWidth用于获得当前视口的宽度

案例练习（轮播图）

1. 变量最好先声明再使用，函数可以先调用再声明
2. 如果是函数里面使用全局变量，在函数调用的前面使用即可
3. 开启定时器，理解为重新定义一个定时器，定时器函数可以直接使用，前面的window.可以省略

11. window对象

1. BOM(Browser Object Model ) 是浏览器对象模型，window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的，document是实现 DOM 的基础，它其实是依附于 window 的属性，依附于 window 对象的所有属性和方法，使用时可以省略 window，DOM依附于BOM
2. BOM示意结构图如下所示：
   
3. JavaScript 内置的一个用来让代码延迟执行的函数，函数里面也不要加小括号，叫 setTimeout，setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window。定义及清除写法如下：
   
4. **（面试必问）JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。
   （1）同步：顺序执行，同步任务都在主线程上执行，形成一个执行栈。（先执行执行栈）
   （2）异步：在做这件事的同时，你还可以去处理其他事情，一般有下述几种异步任务，回调函数也都是异步：异步任务相关添加到任务队列中（任务队列也称为消息队列）。
   
   （3）先执行执行栈中的同步任务。执行完后在将任务队列里面放到执行栈在进行执行的，整个过程叫做事件循环。
   （4）异步任务也会进行一些处理，比如：如果先点击，则可能先执点击（放到执行栈），在执行延时，如果延时后还没点击，先延时，再点击。
   （5）由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）
5. BOM下的location对象：它拆分并保存了 URL 地址的各个组成部分，常用属性和方法（前三个是属性，reload是方法）：。href 属性获取完整的 URL 地址，对其赋值时用于地址的自动跳转

6. reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新，reload() 刷新方法 有本地缓存 强制刷新 ctrl + f5 直接更新最新内容从网上拉去，不走本地缓存，默认参数为false
7. form表单action属性代表提交到哪里
8. navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息，常用userAgent 检测浏览器的版本及平台，如判断是移动端还是pc端，执行不同的网站，代码如下（通常放到head标签里面）：

 // 检测 userAgent（浏览器信息）
 <script>
        !(function () {
            const userAgent = navigator.userAgent
            // 验证是否为Android或iPhone
            const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
            const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
            // 如果是Android或iPhone，则跳转至移动站点
            if (android || iphone) {
                location.href = 'http://m.itcast.cn'
            }
        })()
   </script>

9. history对象，常用属性如下（了解即可）：
   

12. swiper 插件（已经写好了js代码）

1. 网站：https://swiper.com.cn/demo/index.html
   选中想要的模块，然后查看网页源代码，在对应的位置进行粘贴，注意不要放错位置。
2. 使用前先引入：

!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper-bundle.min.js"></script>
    ...
</body>
</html>

3. 多个轮播图给添加在类swiper-container后添加one 、two等类名，然后分开去写，防止冲突，改完之后记得把script里面new的时候的类名改为one或者two，分开对待。

13. 本地存储

1. 为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
2. localStorage：生命周期永久生效，除非手动删除 否则关闭页面也会存在，可以多窗口（页面）共享（同一浏览器可以共享)。以键值对的形式存储使用
3. 常用的操作如下，使用的时候如果key和value存得是字符串要加引号，在浏览器检查面板的Application中可以看到，也可在浏览器中进行手动删除，点击禁止标志即可：
   
4. 存储复杂数据类型的数据，如对象的时候，本地存储只能存储字符串 所以要转换，需要进行字符串到json格式字符串的相互转换。
   
5. 无论新增删除都要先读取本地数据：

6. 自定义属性，传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以在html5中推出来了专门的data-自定义属性，在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取，如data-id,获取到时候DOM对象.daraset**.id**,设置自定义属性的方法，可以直接在标签里面添加，或者对象.setAttribute(‘data-id’, 10)

14. 正则表达式

1. 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象，通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。
2. 正则表达式先定义再查找，定义方法如下，返回的reg是一个对象
   
   查找的时候，使用该对象.test(被检测的字符串)，如果正则表达式与指定的字符串匹配 ，返回true，否则false，如果使用该对象.exec(被检测的字符串),如果匹配成功，exec() 方法返回一个数组，否则返回null.
3. 元字符(特殊字符）是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
4. 正则表达式参考文档：MDN，测试工具：tool
5. 正则表达式的开头和结尾（位置也是在开头和结尾，）的写法如下，如果 ^ 和 $ 在一起，表示必须是精确匹配（只能是精确匹配里面的内容，不是站在开有结尾考虑）。：
   
6. 量词，判断次数，放在需要重复的次数的元素前面，只管前面那一个。逗号左右两侧千万不要出现空格，常用的做法如下：
   
7. [ ] 匹配字符集合，后面的字符串只要包含 括号里中任意一个字符，都返回 true，使用连字符 - 表示一个范围，连字符有的话代表范围，单个存在的话代表匹配连字符。
8. 如果^写在了中括号的里面，表示匹配除了多少以外的字符。点 . 匹配除换行符之外的任何单个字符
9. 常见模式的简写方式如下：
   
10. 修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等，直接在正则最后一个/后面更上修饰符，常用的如下： i 是单词 ignore 的缩写，正则匹配时字母不区分大小写，g 是单词 global 的缩写，匹配所有满足正则表达式的结果。
11. 字符串的替换，写法如下，如果要替换所有的，记得在后面加上g（否则就只改其中的一个，之前的任务只是查找是否存在，因此没有必要加g）：
    

案例练习

1. change事件当表单里面的值发生变化的时候触发，和 blur 不一样 ，blur是焦点离开的时候就触发，不管值有没有改变。input 事件 只要输入就会触发，change 事件是输入完之后离开表单时候才触发 并且值有变化才触发
2. 中括号里面填写相关的【‘‘属性名=值’’】代表属性选择器,选择器引号两侧不要加空格
3. 因为提交表单的时候还有移出光标的时候进行验证，因此最好将验证函数封装成一个函数。
4. 提交的时候是对整个form表单进行的提交，因此要获取的是form对象，提交的事件要使用submit，阻止提交使用的是事件函数.preventDefault()
5. 可以使用**对象名.classList.contains(‘类名’)**去判断是否对象里面包含这个类名
6. submit要设置网页的跳转，首先你要先禁止默认的提交行为