第一章-JavaScript基础进阶part3：BOM

Sophie_U

已于 2023-08-05 17:15:18 修改

阅读量244

点赞数

分类专栏： Web前端自学教程文章标签： javascript 开发语言 ecmascript

于 2023-08-05 17:14:54 首次发布

本文链接：https://blog.csdn.net/Sophie_U/article/details/132112170

版权

Web前端自学教程专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

一、BOM概述
- 1.1 什么是BOM
二、window对象的常见事件
- 2.1 页面加载事件
- 2.2 调整窗口大小事件onresize
三、定时器
- 3.1 案例
四、JS执行机制
五、location对象
- 5.1 locationc对象常用属性
- 5.2 location对象的方法
六、navigator对象
七、history对象

一、BOM概述

1.1 什么是BOM

BOM ( Browser Object Model) 即浏览器对象模型，它提供了独立于内容而与浏览密商口进行交与的对象，其校心对象足window.
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性.
BOM缺乏标准，JavaScript语法的标准化组织是ECMAScript，DOM的标准化组织是W3C，BOM最初是Netscape览器标准的一部分

BOM：

浏览器对象模型
把【浏览器】当做一个【对象】来看待
BOM的顶级对象是window
BOM学习的是浏览器窗口交互的一些对象
BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

BOM中最大的对象window:

window 对象是浏览器的顶级对象，它具有双重负色
它足JS 访问浏觉器商口的一个接口
它是一个全局对象。定义在全局作用域中的变量、函数都会变成window 对象的属性和方法
在调用的时候可以省略window，如alert()、promp()等.
注意：window下的一个特殊属性window.name

二、window对象的常见事件

2.1 页面加载事件

1、window.onload

window.onload 或 window.addEventListener(“load”,function(){})

window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像，脚本文件、CSS文件等),就调用的处理函数。
注意：
- 有了window.onload 就可以把J5 代码与到页面元素的上方，因为 onload 是等页面内容全部加技完毕再去执行处理函数
- window.onload传统注册事件方式只能与一次，如果有多个，会以最后一个window.onload为准
- 如果使用addsventistener 则没有限制

2、DOMContentLoaded

document.addEventListener(“DOMContentLoaded”,function(){})
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等.（IE9以上支持）
如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间.交互效果就不的实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适

    <script>
        // 示例1： window.onload
        // 重复注册onload事件，最后一个会覆盖之前
        // window.οnlοad=function(){
        //     alert(111)
        // }
        // window.onload = function(){
        //     alert(22)
        // }

        // 示例2： window.addEventListener("load",fn)
        // 多次注册均能执行，且按注册顺序执行
        // window.addEventListener("load",function(){
        //     alert(11)
        // })
        // window.addEventListener("load",function(){
        //     alert(22)
        // })

        // 示例3： DOMContentLoaded事件
        // 注意：此事件是DOM加载完成时就会执行，不包含图片，flass，css等，加载速度比load更快
        document.addEventListener("DOMContentLoaded",function(){
            alert("content loaded")
        })
    </script>

2.2 调整窗口大小事件onresize

window.onresize
window.addEventListener(“resize”,fn)
只要窗口大小发生像素变化，就会能发这个事件
我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:300px;
            height:300px;
            background:pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector("div")
        window.addEventListener("resize",function(){
          if(window.innerWidth<800){
            div.style.background='purple'
          }else{
            div.style.background='pink'
          }
        })
    </script>
</body>
</html>

三、定时器

setTimeout(fn, [延迟的毫秒数])：延迟一定时间后，执行fn函数（只执行一次）,返回定时器对象
- clearTimeout(定时器对象)：清除定时器
setInterval(fn, 间隔毫秒数)：每间隔一定时间执行一次
- clearInterval(定时器对象)：清除持续定时器

  <script>
        // 执行一次定时器
        var timer = setTimeout(function(){
            console.log("1秒执行了")
            clearTimeout(timer)
        },1000)
        // 持续执行定时器
        var intervalTimer = setInterval(function(){
            console.log("每1秒执行")
        },1000)
    </script>

3.1 案例

1、倒计时

<body>
    <div>5</div>
    <script>
        var div = document.querySelector("div")
        var start = 5
        var timer = setInterval(function () {
            start -= 1
            if (start >= 0) {
                div.innerHTML = start
            } else {
                alert("时间到了！")
                // 清除定时器
                clearInterval(timer)
            }
        }, 1000)
    </script>
</body>

2、验证码倒计时

<body>
    <div class="form">
        <input type="text">
        <button>发送验证码</button>
    </div>
    <script>
        var btn = document.querySelector("button")
        var input = document.querySelector("input")
        btn.onclick=function(){
            btn.disabled = true
            if(input.value.length<=0){
                alert("请输入手机号")
                return;
            }
            var start = 5
            var timer = setInterval(function(){
                start-=1
                if(start==0){
                    btn.innerHTML = "发送验证码"
                    btn.disabled = false
                    start = 5
                    clearInterval(timer)
                }else{
                    btn.innerHTML=start+"秒后重新获取"
                }

            },1000)
        }
    </script>
</body>

四、JS执行机制

4.1 this指向

1、在全局作用域或都普通函数中this指向全局对象window
2、对象方法中的this，指向对象本身（调用者）
3、构造函数中的this：指定实例化的对象

<body>
    <button>按钮</button>
    <script>
        // 示例：this指向
        // 1、全局作用域或普通函数中的this
        console.log(this) // window
        function fn(){
            console.log(this,'fn') // window
        }
        fn(); // 调用普通函数

        // 2、对象方法
        var obj = {
            say:function(){
                console.log(this,'obj.say') // obj
            }
        }
        obj.say();
        var btn = document.querySelector("button")
        btn.addEventListener('click',function(){
            console.log(this,'btn.onclick') // <button>按钮</button>
        })
        
        // 3、构造函数中的this
        function Fn(){
            console.log(this,'Fn')
        }
        var ins = new Fn() // this指向ins
    </script>
</body>

4.2 JS执行机制

1、JS是单线程

JavaScript语言的一大持点就是单线程，也就是说，同一个时问只做一件事，这是因为javascript这门脚本语言诞生的使命是为处理页面中交互，以及提作DOM而生的。比如我们对某个 DOM 元素进行添加和删除操作，不会同时进行。应该先进行添加，之后再删除。

为了解决JS单线程的问题，利用多核CPU的计算力，HTML5提出 Web Worker 标准，允许 JavaScript脚本创建多个线程，但是子线程受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质，也因此，HTML5中出现了同步和异步。

2、JS的同步和异步

同步：一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭，等水开了( 10分钟之后），再去切菜。炒菜。
异步：你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。
JS同步任务：

同步任务都在主线程上执行，形成一个执行栈，

JS异步任务：

JS的异步任务是通过回调函数实现的，JS中的异步任务是在单独的任务栈中，当主线程上的执行栈执行完毕后开始执行任务队列
一般的异步任务有以下三类：
普通事件，如click,resize等
资源加载，如load,error等
定时器，如setInterval,setTimeout等

3、JS的执行机制

先执行主线程的执行栈
如果遇到异步任务(回调函数）放入任务队列中。
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务（event loop），于是被读取的异步任务结束等待状态，进入执行栈，开始执行

事件循环（Event Loop）：
同步任务和异步任务分别进入不同的执行“场所”，同步任务进入主线程执行栈中执行，异步任务进入(Event Table）并注册回调函数。当执行栈(call stack）中的代码执行完毕，执行栈(call stack)中的任务为空时，就会读取任务队列(task quene)中的任务，去执行对应的回调;如此循环，就形成js的事件循环机制(Event Loop),

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

  <script>
        // 1->2->3
        console.log(1)
        // setTimeout回调函数是异步任务会在主任务执行完后再执行
        setTimeout(function(){
            console.log(3)
        },0)
        console.log(2)
    </script>

五、location对象

1、什么是location对象
window 对象给我们提供了一个location 属性用于获取或设置窗体的URL，并且可以用于解析 URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location 对象。
2、什么是URL
统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址与联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位百以及浏览器应该怎么处理它.
URL的一般语法格式：
protocol://host [:port]/path/[?query]#fragment

5.1 locationc对象常用属性

在这里插入图片描述
1、案例：5秒后跳转页面

<body>
    <div>即将跳转</div>
    <script>
        // location.href可直接读取页面URL
        console.log(location.href)
        var div = document.querySelector("div")
        var time = 5
        let timer = setInterval(function(){
            time--
            if(time==0){
                // location.href赋值则会跳转
                window.location.href = 'https://www.baidu.com'
                clearInterval(timer)
                time = 5
            }else{
                div.innerHTML = time +"秒后即将跳转"
            }
        },1000)
    </script>
</body>

2、案例：获取页面参数（location.search)

    <script>
        // 页面添加参数?name=lala&age=12
       var search = location.search
       var queryObj = parseSearch(search)
       // {name:'lala',age:'12'}
       console.log(queryObj)

       function parseSearch(searchStr){
        // 未传入或无参数时不执行
        if(!searchStr) return;
        let mainStr = searchStr.substr(1)
        let keyValueArr = mainStr.split('&')
        let queryObj = {}
        for(let i=0;i<keyValueArr.length;i++){
            let itemArr = keyValueArr[i].split("=")
            queryObj[itemArr[0]]=itemArr[1]
        }
        return queryObj
       }
    </script>

5.2 location对象的方法

在这里插入图片描述

<script>
        // 重定向
        // location.assign("https://www.baidu.com")
        //  替换,不记入历史记录
        location.replace("https://www.baidu.com")
        // 重新加载
        // location.reload(true)
    </script>

六、navigator对象

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

 <script>
        let reg = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Windows Phone)/i
       if(navigator.userAgent.match(reg)){
        console.log("移动端访问")
       }else{
        console.log("PC端访问")
       }
    </script>