JavaScript之BOM

2022/1/26 12:34:39

本文主要是介绍JavaScript之BOM,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

文章目录

  • 一.BOM概述
    • 1.什么是BOM
    • 2.BOM的构成
    • 3.窗口加载事件
    • 4.调整窗口大小事件
    • 5. 定时器
    • 6.this
  • 二.JS执行机制
    • 1.JS是单线程
    • 2.location对象
    • 3.location对象的属性
    • 4.location对象的方法
    • 5.navigator对象
    • 6.history对象

一.BOM概述

1.什么是BOM

BOM(BrowserObject Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window

BOM由一系列相关的对象构成,并且每个对象都提供了很对方法和属性

BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是w3c,BOM最初是Netscape浏览器标准的一部分
在这里插入图片描述

2.BOM的构成

BOM比DOM更大,它包含了DOM
在这里插入图片描述
window对象是浏览器的顶级对象,它具有双重角色。
1.它是JS访问浏览器的一个接口
2.它是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法。在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如:alert( )、prompr( )等
注意:window下的一个特殊属性window.name

3.窗口加载事件

<!-- 传统的窗口加载事件  只能写一次-->
    window.onload = function(){}
    或者
<!-- 没有限制 -->
    window.addEventListener(‘load’,function(){});

window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)就调用到处理函数
在这里插入图片描述

window.addEventListener(‘DOMContentLoaded’,function(){});

在这里插入图片描述

4.调整窗口大小事件

window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数

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

注意:
1.只要窗口大小发生像素变化,就会触发这个事件
2.我们经常利用这个事件完成响应式布局。window.innerWidth当屏幕的宽度

5. 定时器

两种定时器

  • setTimeout()
  • setInterval ()

setTimeout()定时器
window.setTimeout(调用函数,[延迟的毫秒数]);
setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数
在这里插入图片描述
setTimeout()这个调用函数我们也称之为回调函数callback
普通函数是按照代码顺序直接调用
而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数
简单理解:回调,就是回头调用的意思,上一件事干完,再回头再调用这个函数
5秒之后自动关闭广告案例:

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

停止setTimeout()定时器:
window.clearTimeout(timeoutID);
1.window 可以省略
2.里面的参数就是定时器的标识符
在这里插入图片描述
setInterval()定时器
window.setInterval(调用函数,[间隔的毫秒数]);
setTimeout()方法重复调用一个函数,每隔这个时间,就去调用一次回调函数
在这里插入图片描述
倒计时案例:
在这里插入图片描述

<style>
        
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    
    </style>
</head>
<body>
    <div>
    <span class = "hour"></span>
    <span class = "minute"></span>
    <span class = "second"></span>
</div>
<script>
    
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2022-1-25 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数,防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    
</script>

在这里插入图片描述
清除计时器:
在这里插入图片描述
发送短信案例:
在这里插入图片描述
在这里插入图片描述

发送短信<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);//当时间为0时销毁定时器
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    time = 3;
                }else{
                    btn.innerHTML = '还剩下'+ time +'秒';
                    time--;
                }
            },1000);
        })
    </script>

6.this

this的指向在函数定义的时候是确定不了的,只有在函数执行的时候才能确定this到底指向谁。一般情况下this的最终指向的是那个调用它的对象
1.全局作用域或者普通函数中this指向全局对象window(主营定时器里面的this指向window)

二.JS执行机制

1.JS是单线程

JavaScript语言的一大特点是单线程,同一个时间只能做一件事。这是因为JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的,比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先添加,之后再删除。
单线程就意味着,所有任务需要排队,前一个任务结束才会执行后一个,导致的问题是:如果JS执行的时间过长,这样会造成页面渲染不连贯,导致页面渲染加载阻塞的感觉
于是JS提出了同步和异步
在这里插入图片描述
JS的执行机制:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
URL:统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它
在这里插入图片描述

3.location对象的属性

在这里插入图片描述

4.location对象的方法

在这里插入图片描述

5.navigator对象

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

6.history对象

window对象给我们提供了一个history对象,与浏览器历史记录进行交互该对象包含用户(在浏览器窗口中)访问过得URL
在这里插入图片描述



这篇关于JavaScript之BOM的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程