除了HTML文档，JavaScript还可以和浏览器进行交互。

BOM

Browser Object Model，浏览器对象模型。

实质上就是为浏览器建立一个对象模型，该对象提供了一系列的方法（又称API）供开发人员使用。比如：alert()方法。

观察：不同的浏览器调用alert()会有不同的呈现效果，这就是因为alert()的实现效果是由浏览器决定的原因。

目前BOM还没有统一的标准（所以有浏览器兼容性问题），但常用的大部分对象/方法/属性都是相同的。

window对象

alert()实际上也是window对象的方法：

window.alter('天上地下，唯我独尊！')

在BOM中，window就代表浏览器，是JavaScript运行环境中“最顶级”的对象，所以调用window对象的方法和属性，都可以直接省略前面的window。

弹出窗口

alert(message)：单纯显示message

confirm(message)：要求用户确认，返回bool值

prompt(message)：返回值接收用户输入

导航

open(url)

打开一个新窗口

open('http://17bang.ren')    //默认_blank，新页面打开
open('http://17bang.ren', '_self')    //当前页面打开

location

href属性：

location.href   //获取当前url/href的值
//跳转到“一起帮”
location.href='http://17bang.ren' 

注意这种模式，在BOM/DOM中都非常常见：给属性赋值之后就立即自动执行。以下url部分(segment)也是可以获取和改变的：

location.host    //含port，如"localhost:57210"
location.hostname    //不含port，如"localhost"
//端口，如"57210"，注意仅根据href解析，不会显示隐藏的默认端口location.port    
location.pathname    //路径，如"/htmlpage.html"
location.search    //url参数，如"?id=3"

reload([true|false]) 方法：重新加载当前页面

location.reload(true);    //清除缓存
location.reload();    //不清除缓存，同reload(false);

其他不常用的，页面“跳转”方法：

• replace(url) ：用指定的url替换当前页面，所以当前页面不会被记录在“浏览历史”中
• assign(url)：区别：是否会被记录在“浏览历史”中

演示：
 

history

浏览历史对象

• back() ：后退
  
• forward() ：前进
  
• go(n)：跳转到某一个历史页，n用正负整数：
  
  • 正数向前，go(1) 同 forward()，还可以go(2)，go(3)
    
  • 负数向后，go(-1) 同 back()，还可以go(-2)，go(-3)

其他

navigator：查看浏览器信息，常用的有：

navigator.language    //如："zh-CN"
//以前有开发人员用userAgent判断浏览器，但这是不可靠的……
navigator.userAgent    //如："Mozilla/5.0 (Windows NT 10.0;…… 

screen：显示器相关信息，如width/height……

定时器

观察我们“一起帮”导航栏上有一个闪烁的铃铛，它实际上是每隔若干时间（比如100毫秒）改变一次铃铛的颜色实现的。

这就需要用到两个非常类似的方法：

• setTimeout(handler, milionseconds) ：过多久（milionseconds）之后开始执行handler
  
• setInterval(handler, milionseconds)：每隔多久（milionseconds）执行一次handler

这里面的handler不是一个数据，而是一个回调函数（复习）

并进一步#理解#为什么需要回调：

1. 在定义（是“定义”）setTimeout()时，（定义该函数的）开发人员不知道：以后要调用该函数的开发人员究竟要计时器做什么；
2. 所以，他只能在setTimeout()中定义一个函数参数handler，然后在setTimeout()方法中再调用handler()。

function smart() {
    console.log(`飞哥帅呆了`);
}

setTimeout(smart, 2000);
//setInterval(smart, 500);

注意：在setTimeout()中的smart是没有括号的！@想一想@：如果加了括号会怎样？

setTimeout()实现间隔

有时候你会看到这样的写法：

function smart() {
    setTimeout(() => {
        console.log(`飞哥帅呆了`);
        smart();
    }, 500);
}

smart();

@想一想@：

1. 这样运行之后会是怎么样的一种效果？（类似于setInterval）
2. 这算不算递归？（我个人认为不算）

这样做和setInterval()的区别在哪里呢？可以为每一次执行设置不同的时间间隔：

function smart() {
    let interval = Math.random()*1000;
    console.log(interval);
    setTimeout(() => {
        console.log(`飞哥帅呆了`);
        smart();
    }, interval);
}

#试一试#：用setInterval()能不能实现？

参数传递

假如回调函数需要参数：

function smart(sname) {
    console.log(sname + '帅呆了');
}

@想一想@：怎么办？

首先是可以使用匿名函数包裹（复习）：

setInterval(function () {
    smart('飞哥')
}, 100);

还可以引入一个（#试一试#：传入两个？会toggle轮换）额外的参数：

setInterval(smart, 1000, '廖光银');

异步

复习并演示执行顺序：

setTimeout(() => {    //①
    console.log(`我在setTimeout中`);    //③
}, interval);
console.log(`我在setTimeout之后`);    //②

这种异步执行的方式很容易让初学者的代码产生bug：

let i= 0;
setTimeout(() => {
    i++;
}, 100);
console.log(i);    //输出的i值是多少？

#理解#：JavaScript是单线程可异步的语言，JavaScript处理异步的方法简单粗暴，把所有的异步方法扔最后面执行

#体会#：线程和异步没有直接关系

停止执行

有时候我们需要停止定时器的执行，怎么办呢？控制台演示：

1. setTimeout()和setInterval()都有一个返回值，代表这个定时器的id
2. 调用clearTimeout()或clearInterval()方法，传入其id，就可以终止

注意这个停止执行何时触发/被调用？

let i = 0;
let timerId = setInterval(function () {
    i++;
    console.log('小伙子帅呆了……');
}, 200)

// if (i > 5) {
    clearInterval(timerId);
// }

演示定时器：

1. 来不及执行就被停止
2. 不会被停止
3. 被正确停止

定时器还可以配合Ajax实现短轮询。

作业

本章作业名为：bom.html

1. 一个“前一页”按钮，点击可以跳到上一页；一个“下一页”按钮，点击可以跳到下一页；
   
2. 一个a标签，点击不会跳转到href指定页面，而是将href的值赋值给下面的一个文本框（学习事件之后完成）
3. 一个“转到”按钮，点击该按钮页面可跳转到文本框指定的网址页面
   
   
4. 实现铃铛闪烁效果
5. 实现n张图片每隔1秒切换，自动播放的效果（能有“滑动”效果更佳）
6. 实现源栈课堂首页的代码自动显示效果，注意每个单词显示间隔的时间应该是随机的。

源栈学历

在当前系列 Javascript入门 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：