# BOM 概述

# 什么是 BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，对象是 windows

BOM 由一系列的对象构成，并且每个对象都提供了很多方法与属性

# BOM 组成

BOM 比 DOM 大，它包含 DOM

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

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

注意：window 下的一个特殊属性 window.name

# window 对象常见事件

# 窗口加载事件

window.onload = function(){}    // 只能加载一次，以最后一次为准

window.addEventListener('load',function(){})    // 可以加载多次

window.onload 是窗口加载事件，当文档内容完全加载完成会触发该事件，就调用处理函数

docunment.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded 事件触发时，仅完成 DOM 加载完毕，不包括样式表，图片等等

如果页面较多，用户访问到 onload 需要较长事件，交互效果不能实现

# 调整窗口大小事件

window.onreasize = function(){}

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

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

注意：

• 我们窗口大小发生变化，就会触发这个事件
• 我们经常利用这个事件完成响应式布局，window.innerWidth 当前屏幕宽度

# 定时器

# 两种定时器

window 对象给我们提供了 2 个定时器

• setTimeout()
• setInterval()

# setTimeout() 定时器

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

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

<script>

    var timer1 = setTimeout(function(){    // 命名区分不同定时器

        console.log('时间到了1');

    },1000);

    var timer2 = setTimeout(function(){

        console.log('时间到了2');

    },3000);

</script>

注意：

• window 可以省略
• 这个调用函数可以直接写函数，或者写函数名或者采取字符串，’函数名 ()‘三种形式，第三种不推荐
• 延迟的毫秒数默认值为 0，如果写，必须是毫秒
• 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

# 停止 setTimeout() 定时器

window.clearTimeout(timeout ID);

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

注意：

• window 可以省略
• 里面的参数就是定时器的标识符

# setInterval() 定时器

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

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

<script>

    var timer = setInterval(function(){

        console.log('持续输出');

    },2000);

</script>

注意：

• window 可以省略
• 这个调用函数可以直接写函数，或者写函数名或者采取字符串，’函数名 ()‘三种形式，第三种不推荐
• 延迟的毫秒数默认值为 0，如果写，必须是毫秒
• 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

# 停止 setInterval() 定时器

window.clearInterval(interval ID);

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

注意：

• window 可以省略
• 里卖弄的参数就是定时器的标识符

# 倒计时案例

<span class="hour">1</span>

<span class="minute">2</span>

<span class="second">3</span>

<script>

    var h = document.querySelector('.hour');

    var m = document.querySelector('.minute');

    var s = document.querySelector('.second');

    var inputdate = +new Date('2022/10/9 13:00:00');

    console.log(inputdate);

    countDown();    // 提前调用，防止出现一秒空时间

    setInterval(countDown,1000);

    function countDown() {

        var nowdate = +new Date();

        var seconds = (inputdate - nowdate)/1000;

        var hour = parseInt(seconds / 60 /60 % 24);

        hour = hour > 10 ? hour : '0' + hour; 

        h.innerHTML = hour;

        var minute = parseInt(seconds / 60 % 60);

        minute = minute > 10 ? minute : '0' + minute;

        m.innerHTML = minute;

        var second = parseInt(seconds % 60);

        second = second > 10 ? second : '0' + second;

        s.innerHTML = second;

    }

</script>

# JS 执行机制

# JS 是单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事

# 单线程出现的问题

<script>

    console.log(1);

    setTimeout(function(){

        console.log(3);

    },1000);

    console.log(2);

</script>

//只有等一秒之后才 打印3

//执行结果 1 2 3 JS解决了单线程问题

# 同步和异步

# 同步

前一个任务结束后，在执行后一个任务 i，程序的执行顺序和排列顺序一致

# 异步

不用等前一个任务完成，采用多线程，可以同时完成多个任务

# 同步任务

同步任务都在主线程上执行

# 异步任务

JS 的异步是通过回调函数实现的

一般而言，异步任务有一下三种类型

• 普通事件：如 click，resize
• 资源加载：如 load，error
• 定时器：setInterval setTimeout

异步任务相关的回调函数放在消息队列中（任务队列也称为消息队列）

# 执行过程

• 先执行执行栈中的同步任务
• 异步任务（回调函数）放入消息队列中
• 一旦执行栈中所有同步任务执行完毕，系统就会按照次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

# JS 执行机制

由于主线程不断地重复获得任务，执行任务，在获取任务，在执行，所以这种机制被称为事件循环（event loop）

# location 对象

# 什么是 location 对象

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

# URL

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

URL 的一般语法格式：

protocol://host[:port]/path/[?query]#fragment

# location 对象的属性

# location 对象的方法

# navigator 对象

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

# history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互，该对象包含用户访问郭的 url