JS4-BOM浏览器对象类型
什么是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办公系统有可能会用到