BOM(1)

什么是BOM？

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

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

1、它是JS访问浏览器窗口的一个接口

2、它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。调用的时候可以省略window，如alert()并不用写window（本来应该是window.alert()）

window对象的常见事件

窗口加载事件

当文档内容完全加载完成后会触发该事件（包括图像、脚本文件、CSS文件等），调用处理函数。

在没有学习BOM之前，我们的函数只能写在控件下面，不然就无法执行。但在用了BOM之后，我们的处理函数可以放在其他地方

<body>
<script>
	window.onload = function() {
    var btn = document.querySelector("button")
    btn.addEventListener('click', function() {
        alert('窗口触发事件')
    })
}
</script>
<button>点击我</button>
</body>

有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容加载完毕后，才执行处理函数。同样这和前面DOM学的onclick一样，只能写一次。如果有多个，会以最后一个为准。用addEventListener就不会有这种困扰

还有一个DOMContentLoaded，这是仅当DOM加载完成，不包括样式表，图片，flash等等。但只有IE9以上才支持

这种情况比较适用于图片较多的页面，如果访问的网页图片较多，从用户访问到onload触发可能需要较长的时间，交互效果无法实现，影响用户体验，这时候用DOMContentLoaded事件比较合适。

1
2
3

document.addEventListener('DOMContentLoaded', function() {
        alert('只需要把DOM加载完')
    })

调整窗口大小事件

只要窗口变化，就会调用处理函数。常常用于处理响应式布局

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

<body>
    <script>
        window.addEventListener('load', function() {
            var div = document.querySelector('div')
            window.addEventListener('resize', function() {
                if (window.innerWidth <= 500) {
                    div.style.display = 'none'
                } else {
                    div.style.display = 'block'
                }
            })
        })
    </script>
    <div>窗口变化</div>
</body>

上面的例子即可让窗口width小于500时，隐藏div。而在width>500，显示div

定时器

setTimeout()

window.setTimeout(调用函数名,[延迟毫秒数])：setTimeout()方法用于设置一个定时器，该定时器在延迟毫秒后执行调用函数，默认是0。

function f1() {
    alert('从来就没演好那些很酷的角色')
}
var timer1=setTimeout(f1, 2000)
//还有一种调用方法
var timer2=setTimeout('f1',5000)

一个页面可以有多个定时器，我们最好用名字加以区分

我们经常上网，在各种千奇百怪的网页上常常出现广告，这些广告在几秒后会自动消失，这也是靠定时器完成的

<body>
<img src='dy.jpg' alt="" class="ad">
<script>
    var ad = document.querySelector(".ad")
    var close = setTimeout(function() {
        ad.style.display = 'none'
    }, 5000)
</script>
</body>

关闭setTimeout定时器

使用clearTimeout()关闭定时器

<body>
<button>解除炸弹</button>
<script>
    var btn = document.querySelector('button')
    var timer1 = setTimeout(function() {
        alert('爆炸了')
    }, 5000)
    btn.addEventListener('click', function() {
        clearTimeout(timer1)
        alert('危机解除')
    })
</script>

</body>

setInterval()

这个定时器和setTimeout的用法一样，那他们有什么不同？答案是他们的执行过程不同

1
2
3

setInterval(function() {
    alert('周杰伦，yyds')
}, 2000)

setTimeout是延时事件到了，就去调用这个回调函数，只调用一次就结束这个定时器。而setInterval每隔这个延时时间执行回掉函数一次，会调用很多次

关闭setInterval()

<body>
  <button class='begin'>开启定时器</button>
  <button class='end'>停止定时器</button>

  <script>
      var begin = document.querySelector('.begin')
      var end = document.querySelector('.end')
      var timer = null
      begin.addEventListener('click', function() {
          timer = setInterval(function() {
              alert("开始计时")
          }, 3000)
      })
      end.addEventListener('click', function() {
          clearInterval(timer)
      })
  </script>
</body>

//短信发送案例
<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>

this

this指向问题，一般情况下this的最终指向是哪个调用它的对象

JS执行机制

JS是单线程的。同步任务都在主线程上执行的，形成一个执行栈。JS的异步是通过回掉函数实现的，一般而言，异步任务有以下三种类型：1、普通事件，如click、resize等 2、资源加载，如load、error 3、定时器。异步任务相关回调函数添加到任务队列（消息队列）中

所以，JS的执行机制是：1、先执行栈中的同步任务 2、异步任务（回调函数）放入任务队列中 3、一旦执行栈中的所有同步任务执行完毕，系统会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

  console.log(1)
  setTimeout(function() {
      console.log(3)
  }, 0)
  console.log(2)
//运行结果
//123

那如果有多个异步任务呢？

<script>
    console.log(1)
    document.onclick = function() {
        console.log('click')
    }
    setTimeout(function() {
        console.log(3)
    }, 4000)
    console.log(2)
</script>

上段代码有两种结果：如果在4秒内点击了，结果是12click3，如果在4秒后点击，结果是123click。如果之后还有点击，则会继续输出click。由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，这种机制成为事件循环(event loop)

location对象

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

location属性

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            console.log(location.href)
            //跳转链接
            location.href = "https://baidu.com"
        })
    </script>
</body>

//自动跳转
<body>
<div></div>
<script>
    var timer = 5
    var div = document.querySelector('div')


    function f1() {
        if (timer == 0) {
            location.href = "https://www.baidu.com"
        } else {
            div.innerHTML = '你将在' + timer + '跳转到百度首页'
            timer--
        }
    }
    f1()
    setInterval(f1, 1000)
</script>
</body>

location对象方法

<body>
    <button>点击</button>
    <script>
        btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            //记录浏览历史，可以回退
           location.assign("https://baidu.com")
        })
    </script>
</body>

navigator对象

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

history对象

window对象给我们提供history对象用与浏览器对象进行交互。该对象包含用户访问过的URL