window对象

一、BOM（浏览器对象模型）

1、BOM( Browser Object Model ) 是浏览器对象模型

2、window是浏览器内置中的全局对象，我们所学习的所有Web APIs的知识内容都是基于window对象实现的

3、window对象下包含了navigator、location、document、history、screen5个属性，即所谓的BOM（浏览器对象模型）

4、document是实现DOM的基础，她其实是依附于window的属性

5、注：依附于window对象的所有属性和方法，使用时可以省略window

二、定时器—延时函数

1、JavaScript内置的一个用来让代码延迟执行的函数，叫setTimeout

2、语法：setTimeout(回调函数,等待的haomiaoshu）

3、setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window

4、清除延时函数：

let timeId = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timeId)

5、结合递归函数可以使用setTimeout 实现 setInterval 一样的功能

6、两种定时器对比：

setInterval的特征是重复执行，首次执行会延时
setTimeout的特征是延时执行，只执行一次
setTimeout结合递归函数，能模拟setInterval重复执行
clearTimeout清除由setTimeout创建的定时任务

创建的定时器应该有clearInterval 来清除创建的延时器应该有clearTimeout来清除

三、location对象

1、location的数据类型是对象，它拆分并保存了URL地址的各个组成部分

2、常用属性和方法：

1）href属性获取完整的URL地址，对其赋值时用于地址的跳转

2）search属性获取地址中携带的参数，符号？后面部分

3）hash属性获取地址中的哈希值，符号#后面部分

4）reload方法用来刷新当前页面，传入参数true是表示强制刷新

四、navigator对象

1、navigator的数据类型是对象，该对象记录了浏览器自身的相关信息

2、常用属性和方法：

1）通过userAgent检测浏览器的版本及平台

// 检测 userAgent（浏览器信息）
  !(function () {
      const userAgent = navigator.userAgent
       // 验证是否为Android或iPhone
      const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
      const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
       // 如果是Android或iPhone，则跳转至移动站点
      if (android || iphone) {
          location.href = 'http://m.itcast.cn'
      }
  })()

五、histroy对象

1、histroy的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

2、常用属性和方法

六、案例

1.5秒钟之后消失的广告

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: cadetblue;
        font-size: 20px;
        position: fixed;
        text-align: center;
        line-height: 200px;
    }
</style>

<body>
    <div class="box">频繁掉发怎么办</div>
    <script>
        const box = document.querySelector('.box')
        setTimeout(function() {
            document.querySelector('.box').style.display = 'none'
        }, 5000)
    </script>
</body>

2.5秒钟之后跳转的页面

<body>
    <button>跳转</button>

    <script>
        const button = document.querySelector('button');
        button.addEventListener('click', function() {
            location.href = "http://www.baidu.com"

        })

        setTimeout(function() {
            location.href = "http://www.baidu.com"
        }, 5000)
    </script>
</body>

3.递归函数—延时器变定时器

<script>
    let index = 0;

    function func() {
        console.log(++index);
        setTimeout(func, 1000)
    }
    func()
</script>

4.前进和后退

<body>
    <a href="http://www.baidu.com">百度</a>
    <button class="forward">前进</button>
    <button class="back">后退</button>

    <script>
        const forward = document.querySelector('.forward')
        const back = document.querySelector('.back')

        forward.addEventListener('click', function() {
            history.forward()
        })
        back.addEventListener('click', function() {
            history.back()
        })
    </script>
</body>