JS4-BOM浏览器对象类型

2023-10-03 18:51:46

什么是BOM

浏览器的*对象

页面加载事件以及注意事项

定时器函数

JS执行机制

页面跳转、刷新

history、navigator对象

什么是BOM

浏览器对象模型(Browser Object Model)，主要作用是提供独立于内容而与浏览器窗口进行交互的对象，核心是window，BOM缺乏标准

对比

DOM BOM

文档对象模型浏览器对象模型

*对象的document *对象是window

主要学习操作元素主要和浏览器窗口交互，刷新跳转等

W3C BOM是浏览器厂商各自定义的，兼容性差

BOM的构成

window对象是浏览器的*对象，具有双重角色

是JS访问浏览器窗口的一个接口
是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的方法和属性
在调用的时候可以省略window，前面学习的对话框alert()、prompt()等
window下不要直接定义变量为name，因为有个特殊属性window.name

window对象常见事件

窗口加载事件

window.onload=function(){}
window.addEventListener=("load",function(){})

window.onload是窗口加载事件，当文档enrich完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数

有了window.onload就可以把JS代码写到页面元素的上方，但是写了多个后只处理最后一个
如果用addEventListener则没有限制

document.addEventListener('DOMContentLoaded',function(){})

仅当DOM加载完成时才会触发，不包含样式表、图片、flash等，ie9以上才支持

在页面图片很多加载很慢的时候，可以提前获取交互，保证用户体验

调整窗口大小事件

window.onresize=function(){}
window.addEventListener=("resize",function(){})

调整窗口大小事件

只要窗口带下发生像素变化时，就会触发
用于响应式布局；window.innerWidth可以获得屏幕宽度

        var div = document.querySelector('div');
        window.addEventListener('resize', function () {
            if (window.innerWidth <= 800) {
                div.style.display = 'none';
            }	else {
                div.style.display = 'block';
            }
        })

定时器

两种定时器

setTimeOut()

window.setTimeout(调用函数，[延迟的毫秒数]);

延迟时间可以省略
调用函数可以直接写函数，还可以写函数名
还有一个写法'函数名()',不提倡
页面中可能有很多定时器，我们经常给定时器加标识符

  function callback() {
            console.log('111');
        }
        var time1 = setTimeout(callback, 3000);
        var time2 = setTimeout(callback, 1000);

回调函数callback：需要等待时间，时间到了才去调用这个函数以前的.onclick=function()里面的函数也是回调函数

案例：5s后自动隐藏广告

        var ad = document.querySelector('.ad');
        setTimeout(function () {
            ad.style.display = 'none';
        }, 5000)

计时器停止：

window.clearTimeout(timeoutID)

setInterval()定时器

window.setInterval(回调函数，[间隔的毫秒数])

执行过程不同，本函数是每间隔一定时间就执行一次，会不断执行，setTimeout只执行一次

案例：秒杀倒计时

这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）
三个盒子分别存放时分秒
三个黑色盒子利用innerHTML放入计算的小时分钟秒数
最好先调用一次函数，防止刚刷新页面时出现空白

        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2021-3-13 18:00:00');//用户想输入的时间
        countDown();//最好先调用一次函数，防止刚刷新页面时出现空白
        //开启定时器 每秒都调用该函数
        setInterval(countDown, 1000);
        function countDown(time) {
            var nowTime = +new Date();//当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000;//秒数
            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;
        }

window.clearInterval();停止定时器

有时外界需要内部的变量，需要在函数外定义对象，可以定义为null

this

指向调用它的对象

全局作用域下或者普通函数下this指向window；（定时器里面的this指向window）
方法调用中this指向的是调用它的对象

btn.addEventListener('click',function(){})
btn.onclick=function(){};
//都指向btn

构造函数中this指向构造函数的实例

var fun=new Fun();//this指向fun

JS执行队列

JS单线程

JS是单线程语言，同一时间只能做一件事。

单线程意味着所有任务需要排队，如果JS执行事件过长，会造成其他代码等待时间过长

为了解决这个问题，HTM5提出了Web Worker标准，允许JS创建多个线程，因此出现了同步和异步

同步和异步

同步：

前一个任务结束后再执行后一个任务，程序的执行顺序和任务的排列顺序是一致的、同步的

异步：

做一件事情的时候同时还可以做其他事情

本质区别：这条流水线上各个流程执行顺序不同

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

异步任务：JS的异步是通过回调函数实现的，

普通事件：如click、resize等
资源加载，如load、error等
定时器，如setinterval、setTimeout等

异步任务相关回调函数添加到任务队列（消息队列）中。

JS执行机制

先执行执行栈中同步任务
异步任务放入任务队列中
一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

由于主线程不断的获取任务、执行任务、再获取任务、再执行任务，这种机制被称为事件循环

Location对象

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

URL

统一资源定位符(Uniform Resource Locator)，是互联网标准资源的地址，互联网每个文件都有位移的URL，包含的信息之处文件的位置以及浏览器该如何处理它

URL一般格式

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

protocol 通信协议常用的http、ftp、maito等
host 主机（域名）
port 端口号可选，省略时使用方案的默认端口，如http的默认端口为80
path路径由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query 参数以键值对的形式，用&号分割开
fragment 片段 #后面内容，常见于连接锚点

Location对象的属性

location.href 获取或设置整个URL 可以实现点击某位置跳转其他页面

location.host 返回主机（域名）

location.port 返回端口号

location.pathname返回路径

location.search 返回参数(query)

location.hash 返回片段 #后面内容常见于链接锚点

案例：5s后自动跳转页面

var timer=5;
setInterval(function(){
if(timer==0){
    location.href='http://www.itcast.cn';
}else{
    div.innerHTML='将在'+timeer+'s 后跳转首页'; 
    timer--;}
},1000)

案例：提交表单后跳转到另一个页面并显示

第一个登陆页面，里有提交表单，利用action='index.html'提交到第二个页面，input表单必须有name属性，作为提交的属性
第二个页面，可以使用第一个页面的参数，利用了参数的传递，从location.search可以得到
location.search得到的是形如 ?name=Andy 的样式，需要去掉问号（substr(开始的位置，位数)
还需要利用split('=')分开参数和值

Location常用方法

location.assign 跳转页面，记录浏览器历史，可以使用后退功能

location.replace 跳转页面，但是不记录历史，无法后退

location.reload 重新加载，相当于刷新页面，如果参数为true表示强制刷新（不读取缓存中图片，机载较慢），不填表示类似于F5直接刷新

navigator对象

navigator.userAgent显示浏览器信息、系统信息

if((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad|hpwOS|SysbianOS|Windows Phone|UCWEB|BlackBerry|Nokia|RIM|IEMobile|Mobile)/i){
location.href="http://www.cnblogs.com/dying"}
else{
    location.href="";
}

history对象

history.forward() 前进功能

history.back()后退

go() 参数是2表示前进2个页面，-2表示后退2个页面

一些OA办公系统有可能会用到

码农公寓

什么是BOM

对比

BOM的构成

window对象常见事件

窗口加载事件

调整窗口大小事件

定时器

两种定时器

this

JS执行队列

JS单线程

同步和异步

JS执行机制

Location对象

Location对象的属性

Location常用方法

navigator对象

history对象

相关文章