BOM初识

BOM概述

什么是BOM

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM的构成

常见的BOM对象

• window：代表整个浏览器窗口。
• Navigator ：代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器。
• Location： 代表浏览器当前的url信息，通过Location我们可以获取或者设置当前的地址信息。
• History：代表浏览器的历史信息，通过History我们可以实现上一步/刷新/下一步操作。
• Screen：代表用户的屏幕信息。
  
  （图源有蝉.）

window

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

1. 它是JS访问浏览器窗口的一个接口。
2. 它是全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

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

窗口加载事件

<script>
        window.addEventListener("load", function()  {});
        //或者
        window.onload = function() {};     
</script>    

1. window.onload是窗口加载事件，文档内容完全加载完成会触发该事件。
2. window.onload是传统注册方式，只能写一次，如果有多次，以最后一次为准，而window.addEventListener则没有限制。

<script>
        document.addEventListener('DOMContentLoaded',function()  {});
</script>  

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等，加载速度比load快一点。

调整窗口大小事件

<script>
        window.addEventListener("resize", function()  {});
        //或者
        window.onresize = function() {};     
</script>  

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

setTimeout()

定时器setTimeout()

<script>
       window.setTimeout(调用函数，[延迟毫秒数])；
</script>  

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

1. 延迟毫秒数默认是0，如果写，单位是毫秒。
2. 因为定时器可能有很多，所以我们要给定时器赋值。
3. setTimeout()这个调用函数我们也称回调函数callback。而这个函数需要等待时间。

停止setTimeout定时器

<script>
       window.clearTimeout(timeoutID)；
</script>  

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

setInterval()定时器

<script>
       window.setInterval(回调函数，[延迟毫秒数])；
</script>  

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

倒计时案例

 <style>
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #000000;
            color: #ffffff;
            line-height: 40px;
            text-align: center;
        }
  </style>

<div>
      <span class="hour">1</span>
      <span class="minute">2</span>
      <span class="second">3</span>
</div>

    <script>
        const hour = document.querySelector('.hour');
        const minute = document.querySelector('.minute');
        const second = document.querySelector('.second');   
        let inputTime = +new Date('2020-6-1 12:00:00'); // 返回得是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白
        // 开启定时器
        setInterval(countDown,1000);
        function countDown() {
            let nowTime = +new Date(); //返回当前时间总的毫秒数
            let times = (inputTime - nowTime) / 1000 // times是剩余时间总得秒数
            let h = parseInt(times / 60 / 60 % 24);
            h = h<10?'0'+h:h;
            hour.innerHTML = h;
            let m = parseInt(times / 60 % 60);
            m = m<10?'0'+m:m;
            minute.innerHTML = m;
            let s = parseInt(times % 60);
            s = s<10?'0'+s:s;
            second.innerHTML = s;
        }
        </script>

JS执行机制

JS是单线程

JS是单线程语言。 JS的Event Loop是JS的执行机制。深入了解JS的执行,就等于深入了解JS里的event loop。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

同步和异步

**同步：**在主线程上排队执行的任务，只有前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

**异步：**不进入主线程、而进入"任务列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
它们的本质区别：这条流水线上各个流程的执行顺序不同。

执行顺序

1. 先执行执行栈中的同步任务。
2. 异步任务（回调函数）放入任务队列中。
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
4. 由于主线程不断的重复获得任务，执行任务，再获取任务，再执行，所以这种机制被称为“事件循环”。

执行机制总结

更多

Location

封装当前窗口正在打开的url对象

什么是location对象

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

URL

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

URL的一般语法格式为：
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	同行协议 常用的http，ftp，maito等
host	主机（域名）www.itheima.com
port	端口号可选，省略时使用方案的默认端口
path	路径由零或多个’/'符号隔开的字符串，一般用来表示主机上的一个目录或者文件地址
query	参数 以键值对的形式通过&符号分割开来
fragment	片段 #后面内容 常见于链接锚点

location对象的属性

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

Navigator

封装浏览器配置信息的对象。

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

History

保存当前窗口打开后成功访问过的url的历史记录栈

属性	说明
history.length	返回浏览器历史列表中的 URL 数量
history.back()	加载 history 列表中的前一个 URL
history.go(numberURL)	加载历史列表中的某个具体的页面。
history.forward	加载历史列表中下一个URL，等同于history.go(1)

Screen