BOM

概述：浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的现象，其核心对象是window

BOM 比 DOM大

window 是对象浏览器的顶级对象

窗口加载事件

window.onload = function () {}
或者 window,addEventListener(‘load’, function () {} );

调整窗口大小事件

window.onresize = function () {}
或者window.addEventListListener(‘resize’, function () {});

window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数
注意： 只要窗口大小发生像素变化，就会触发这个事件

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

 <script>
        window.addEventListener('load', function () {
            var div = document.querySelector('div');
            window.addEventListener('resize', function () {
                console.log('变化了');
                console.log(window.innerWidth);
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })
    </script>
    <div></div>

两种定时器

setTimeout(调用的函数，【延迟的毫秒数】)
setInterval()

setTimeout()定时器

  <script>
        //1.setTimeout
        //语法规范：window.setTimeout(调用函数， 延迟时间);
        //window 在调用的时候可以省略,注意延迟时间单位是毫秒，也可以省略，如果省略默认是0
        setTimeout(function () {
            console.log('时间到了');
        }, 2000);
        function callback() {
            console.log('爆炸了');
        }
        setTimeout(callback, 3000); 
    </script>

停止setTimeout() 定时器

window.clearTimeout(timeout ID)

<button>点击停止定时器</button>
<script>
    var btn = document.querySelector('button');
    var timer = setTimeout(function () {
        console.log('爆炸了');
    }, 5000);
    btn.addEventListener('click', function () {
        clearTimeout(timer);
    })
</script>

setInterval() 定时器

   <script>
        //1.setInterval
        //语法规范：window.setInterval(调用函数， 延迟时间);
        // setTimeout 延迟时间到了就调用这个回调函数，只调用一次，然后就结束了这个定时器
        //setInterval 每隔这个延迟时间，就会去调用这个回调函数，会调用很多次
        setInterval(function () {
            console.log('继续输出');
        }, 1000);
    </script>

停止setInterval定时器

clearInterval(定时器名字)

this指向问题

一般情况下this的最终指向的是那个调用它的对象
全局作用域或者普通函数中this指向全局对象window(定时器里面的this指向window)

js执行机制

js虽然是单线程语言，但是现在的js是可以创建多个任务的
也就是可以异步

URL（统一资源定位符）
Location对象的属性

location 对象方法

navigator对象

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

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

history对象