1. BOM概述

1.1 什么是BOM

  • BOM ( BrowserObject Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window，
  • BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
  • BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

1.2 BOM的构成

window对象是浏览器的顶级对象，它具有双重角色。

  • 它是JS访问浏览器窗口的一个接口。
  • 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等。

window对象的常见事件

2.1 窗口加载事件

1
2
3
window.onload = function () {};
或者
window.addEventListener('load',function(){});

window.onload是窗口(页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。

  1. 有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
  2. window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
  3. 如果使用addElemenListenr则没有限制

2.2 调整窗口页面大小事件

​ onresize或resize

1
2
3
window.onresize = function(){}

window.addEventListener('resize', function(){});

window.onresize 是调整窗口大小的加载事件，当触发时就调用处理函数

1.只要窗口大小发生像素变化，就会触发这个事件

2.经常利用这个事件来完成响应式布局，window.innerWidth获取当前屏幕的宽度

1
2
3
4
5
6
7
8
9
10
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        window.addEventListener('resize', function() {
            console.log(window.innerWidth);//输出窗口宽度
        });
    </script>

</body>

3. 定时器（回调函数）

3.1 setTimeout (clearTimeout)

  • window.setTimeout(调用函数，延时时间);
  • 延时单位是毫秒，可省略，默认是0；
  • 这个调用函数可以直接写函数，还可以写函数名。
1
2
3
4
//直接写函数
setTimeout(function () {
     console.log('时间到了');
}, 2000);
1
2
3
4
5
6
//写函数名
function callback() {
    console.log('爆炸了');
}
setTimeout(callback, 3000);

清除定时器clearTimeout(定时器名字)

​ 因为清除定时器要指明清除哪个定时器，所以要给定时器起一个名字，即赋值给一个变量。

1
2
3
4
5
6
7
var btn = document.querySelector('button');
var timer = setTimeout(function () {
    console.log('boom!');
}, 5000);
btn.addEventListener('click', function () {
    clearTimeout(timer); //清除定时器
})

3.2 setInterval（clearInterval）

  • window.setTimeout(调用函数，延时时间);
  • 延时单位是毫秒，可省略，默认是0；
  • 与setTimeout不同的是，setInterval是每隔“延时时间”间隔就调用一次，属于重复调用。

清除定时器clearInterval(定时器名字)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button class="begin">开启定时器</button>
<button class="stop">关闭定时器</button>
<script>
    var begin = document.querySelector('.begin');
    var stop = document.querySelector('.stop');
    var timer = null;
    begin.addEventListener('click', function () {
        timer = setInterval(function () {
            console.log('riki');
        }, 1000);
    })
    stop.addEventListener('click', function () {
        clearInterval(timer);
    })
</script>

3.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
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 150px;
            height: 200px;
            margin: 100px auto;
        }

        li {
            width: 30px;
            height: 30px;
            color: white;
            background-color: rgb(27, 25, 25);
            float: left;
            margin-right: 3px;
            list-style: none;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <ul>
        <li class="day"></li>
        <li class="hour">1</li>
        <li class="minute">2</li>
        <li class="second">3</li>
    </ul>
    <script>
        var day = document.querySelector('.day');
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var targetTime = +new Date('2021-7-13 7:10:00');   // 目标时间总毫秒数
        setInterval(countDown); // 先调用一次，防止刷新页面后有一秒的空白
        setInterval(countDown, 1000);
        function countDown() {
            var nowTime = +new Date();   // 当前时间总毫秒数
            var times = (targetTime - nowTime) / 1000;  // 剩余时间总秒数
            var d = parseInt(times / 60 / 60 / 24);
            d = d < 10 ? '0' + d : d;
            day.innerHTML = d;
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60)
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>
</html>

3.4发送验证码案例

在我们点击发送验证码按钮后一般会出现按钮禁用的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    手机号码：<input type="number">
    <button>发送验证码</button>
    <script>
        var btn = document.querySelector('button');
        var time = 3;// 定义剩下的秒数
        btn.addEventListener('click', function () {
            btn.disabled = true;    //禁用按钮
            var timer = setInterval(function () {
                // 如果到时间了，恢复初始状态：清除定时器，取消禁用按钮，改变按钮中的文字，恢复剩下的秒数
                if (time == 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送验证码';
                    time = 3;
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000)
        })
    </script>
</body>

4.this

1.全局作用域或普通函数中this指向全局对象window，因为我们一般调用函数的完整写法应该是window. xx。定时器中的this也是指向window。

1
2
3
4
5
6
7
8
console.log(this);  //window
function fn() {
    console.log(this);
}
window.fn();    //window
window.setTimeout(function () {
    console.log(this);  //window
}, 1000)

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

1
2
3
4
5
6
7
8
9
10
var o = {
    sayHi: function () {
        console.log(this);  //sayHi这个对象
    }
}
o.sayHi();
var btn = document.querySelector('button');
btn.onclick = function () {
    console.log(this);  // btn
}

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

1
2
3
4
function Fun() {
    console.log(this);
}
var fun = new Fun();    // Fun这个对象

5.JS执行机制

5.1 JS是单线程

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

5.2 同步和异步

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

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

同步任务：同步任务都在主线程上执行，形成一个执行栈。

异步：你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他 事情。

异步任务：

​ JS的异步是通过回调函数实现的。一般而言，异步任务有以下三种类型：

  • 普通事件，如：click、resize等；
  • 资源加载，如：load、error等；
  • 定时器，包括：setTimeout、setInterval等。
  • 异步任务相关回调函数添加到任务队列中（也称消息队列）。

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

5.3 JS执行机制

  1. 先执行执行栈中的同步任务。

  2. 异步任务（回调函数）放入任务队列中。

  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

当有多个异步任务时，会将异步任务交给异步进程处理程序，如果回调函数被调用了（比如说点击了按钮，定时器时间到了），那么就将此异步任务写在任务队列中，等待同步任务执行完成后，进入执行栈执行。由于主线程不断地重复获得任务、执行任务、再获取、再执行，所以这种机制被称为==事件循环（event loop）==。

6. location对象

6.1 什么是location对象

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

6.2 URL

统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL的一般语法格式为：

1
2
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#1ink
组成 说明
protocol 通信协议，常用的http、ftp、maito等
host 主机（域名）
port 端口号（可选），省略时使用方案的默认端口
path 路径，由零或多个/符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query 参数，以键值对的形式,通过&符号分隔开来
fragment 片段，#后面内容常见于链接锚点

6.3 location对象的属性

location对象属性 返回值
location.href 获取或者设置整个URL
location.host 返回主机（域名）
location.port 返回端口号
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段，#后面内容常见于锚点链接

5秒钟自动跳转页面案例

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>click</button>
    <div></div>
    <script>
        var time = 5;
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function () {
            location.href = 'http://www.baidu.com';
        })
        downCount();
        setInterval(downCount, 1000);
        function downCount() {
            if (time === 0) {
                location.href = 'http://www.baidu.com';
            } else {
                div.innerHTML = '页面将在' + time + '秒后为您跳转...';
                time--;
            }
        }
    </script>
</body>

</html>

跳转页面案例

  • 第一个登录页面，里面有提交表单，action提交到index.html页面。
  • 第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
  • 第二个页面之所以可以使用第一个页面的数据，是利用了URL里面的location.search参数
  • 在第二个页面中，需要把这个参数提取。
  • 第一步去掉?利用substr(‘起始位置’,截取几个字符)
  • 第二步利用=号分割键和值split( ‘=’ )

login.html

1
2
3
4
<form action="index.html">
    用户名：<input type="text" name='uname'>
    <input type="submit" value='登录'>
</form>

index.html

1
2
3
4
5
6
7
8
9
10
11
12
<div></div>
<script>
    console.log(location.search);    // ?uname=riki
    // 1. 先去掉? substr('起始位置',截取几个字符)
    var params = location.search.substr(1);
    console.log(params);    // uname=riki
    // 2. 利用=把字符分割成数组
    var arr = params.split('=');
    console.log(arr);
    var div = document.querySelector('div');
    div.innerHTML = '亲爱的' + arr[1] + '欢迎您';
</script>

6.4 location对象的方法

location对象方法 返回值
location.assign() 跟href一样，可以跳转页面，记录历史，可以实现后退功能
location.replace() 替换当前页面，不记录历史，不能后退页面
location.reload() 重新加载页面，相当于刷新按钮或者F5，如果参数为true，相当于强制刷新

7. nevigator对象

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

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

1
2
3
4
5
if ((navigator.userAqent.match(/(phoneIpad/pod | iPhone | iPod | ios | iPad | Android | Mobile | BlackBerry | IEMobile | MQQBrowser | JUc | Fennec | wOSBrowser | BrowserNG | WebOS | Symbian | WindowsPhone) / i))) {
    window.location.href = "";  //手机
} else {
    window.location.href = ""; // 电脑
}

8. history对象

history对象方法 作用
back() 后退
forward() 前进
go(参数) 前进后退功能，参数如果是1前进一个页面，如果是-1后退一个页面 
1