前端之JS篇(十)——BOM概述&定时器&JS执行机制&location&navigator&history

BOM浏览器对象模型

通过本节学习，希望你可以掌握

1. BOM概述

1.1 什么是 BOM

DOM主要包括隐藏或显示某个元素，让某一个元素的样式，内容发生变化

BOM主要包括页面条滚动，刷新页面，跳转页面

1.2 BOM的构成

新建.html文件，执行代码如下

    
    
    
    


    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

效果如下

2.window 对象的常见事件

2.1 窗口加载事件

(有了这个，写的script可以放在html的任意位置了)

还有一个窗口加载事件

新建.html文件，执行代码如下

    
    
    
    
    


    点击
    

    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

效果如下

效果如下

效果如下

2.2 调整窗口大小事件

(当浏览器大小改变就会触发的事件)

新建.html文件，执行代码如下

    
    
    
    
    


    
    

    
    



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

效果如下

3. 定时器

window对象给我们提供了2个非常好用的方法——定时器。

setTimeout()
setlnterval()
1
2

3.1 setTimeout() 定时器

window.setTimeout(调用函数,[延迟的毫秒数]);
1

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

注意：

1.window 可以省略

2.这个调用函数可以直接写函数，或者写函数名或者采用字符串 ‘函数名()’ 三种形式。第三种不推荐

3.延迟的毫秒数省略默认是0，如果写，必须是毫秒。

4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

新建.html文件，执行代码如下

    
    
    
    


    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

效果如下

上面的例子中

setTimeout()这个函数我们也称为回调函数callback

普通函数是按照代码顺序直接调用。

而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。

简单理解: 回调，就是回头调用的意思。上一件事干完，再回投再调用这个函数。

以前我们讲的 element.onclick=function() {} 或者 element.addEventListener("click",fn)；里面的函数也是回调函数
1

3.2 案例：5秒自动关闭的广告

分析：

1.核心思路：5秒之后，就把这个广告隐藏起来

2.用定时器setTimeout

新建.html文件，执行代码如下

    
    
    
    
    


    
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果如下

3.3 停止 setTimeout() 定时器

window.clearTimeout(timeoutID);
1

clearTimeout() 方法取消了先前通过调用 setTimeout() 建立的定时器。

注意：

1.window 可以省略。

2.里面的参数就是定时器的标识符。

新建.html文件，执行代码如下

    
    
    
    


    点击停止定时器
    
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果如下

3.4 setInterval()定时器

window.setInterval(回调函数,[间隔的毫秒数]);
1

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

注意：

1、window 可以省略

2、这个调用函数可以直接写函数，或者写函数名或者采用字符串’函数名()'三种形式。

3、间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。

4、因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

新建.html文件，执行代码如下

    
    
    
    


    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

效果如下

3.5 案例：倒计时

新建.html文件，执行代码如下

    
    
    
    
        


    
    

        1
        2
        3
        


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

效果如下

3.6 停止 setInterval() 定时器

window.clearInterval(intervalID);
1

clearInterval() 方法取消了先前通过调用 setIntervla() 建立的定时器。

注意：

1、window可以省略。

2、里面的参数就是定时器的标识符。

新建.html文件，执行代码如下

    
    
    
    


    
    开启定时器
    停止定时器
    
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

效果如下

3.7 案例：发送短信

新建.html文件，执行代码如下

    
    
    
    


    手机号码:   发送
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

效果如下

3.8 this

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象

1、全局作用域或者普通函数中this指向全局对象window (注意定时器里面的this指向window)

2、方法调用中谁调用this指向谁

3、构造函数中this指向构造函数的实例

新建.html文件，执行代码如下

    
    
    
    


    点击
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

效果如下

通过this的学习，可以讲发送短信代码优化

    
    
    
    


    手机号码:   发送
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

4. JS执行机制

4.1 JS 是单线程

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所在——JavaScript是为页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是:如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

4.2 面临的问题

1
2
3
4
5
6
7

4.3 同步和异步

为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker 标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步。

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如:做饭的同步做法：我们要烧水煮饭，等水开了(10分钟之后)，再去切菜，炒菜。

异步

在做一件事时，因为这件事会花费很长的时间，在做这件事的同时，还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜、炒菜。

同步和异步的本质区别：这条流水线上各个流程的执行顺序不同。

【提醒】虽然JS属于单线程语言，但是允许创建多个任务

新建.html文件，执行代码如下

    
    
    
    


    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果如下

4.4 同步任务和异步任务执行过程

如下代码，最后的结果是多少呢？

1
2
3
4
5
6
7

执行结果如下

同步任务和异步任务

4.5 JS的执行机制

JS的执行机制——执行多任务时

新建.html文件，执行代码如下

    
    
    
    


    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

效果如下

5.location 对象

5.1 什么是location 对象

window对象给我们提供了一个location属性用于获取或者设置窗体URL,并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

5.2 URL

【提醒】 href和search比较重要

5.3 location 对象的属性

5.4 案例：5秒之后跳转页面

新建.html文件，执行代码如下

    
    
    
    


    点击
    


    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

效果如下

5.5 案例：获取URL的参数数据

主要练习数据在不同页面中的传递。

新建login.html文件，其代码如下

    
    
    
    


    

        用户名:
        	
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

新建index.html文件，执行代码如下

    
    
    
    


    

    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

布局如下：

效果如下

5.6 location 对象的方法

新建.html文件，执行代码如下

    
    
    
    


    点击
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果如下

6. navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转。

7. history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。

新建index.html页面

    
    
    
    


    点击   去列表页
    前进


1
2
3
4
5
6
7
8
9
10
11
12
13

新建list.html页面

    
    
    
    


    点击   去列表页
    后退


1
2
3
4
5
6
7
8
9
10
11
12
13

其布局如下

修改完的index.html代码如下

    
    
    
    


    点击   去列表页
    前进

    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

修改完的list.html代码如下

    
    
    
    


    点击   去主页
    后退
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

示例: