BOM——浏览器对象模型(1)
BOM-浏览器对象模型
- BOM概述
- 1.1 BOM概述
- DOM与BOM的比较
- 1.2 BOM的构成
- window对象的常见事件
- 2.1窗口加载事件
- 2.2调整窗口大小事件
- 定时器
- 3.1 setTimeout定时器
- 5秒后广告自动关闭
- 3.2停止setTimeout() 定时器
- 3.3 setInterval() 定时器
- 倒计时
- 3.4停止setInterval()定时器
- 限时发送短信
- 3.5 this
- JS执行机制
- 4.1 JS 是单线程
- 4.2 同步和异步
- 4.3 JS 执行机制
- location对象
- 5.1 location对象概述
- 5.2 URL
- navigator对象
- history对象
BOM概述
1.1 BOM概述
BOM是浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。
与浏览器进行一系列交互操作
BOM是由一系列相关的对象构成,并且每个对象都提供了很多方法和属性
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
DOM与BOM的比较
DOM | BOM |
---|---|
文档对象模型 | 浏览器对象模型 |
DOM是把一个文档当作对象看待 | BOM是把浏览器当作一个对象看待 |
DOM的顶级对象是document | BOM的顶级对象是window |
DOM主要学习的是操作页面元素 | BOM学习的是浏览器窗口交互的一些对象 |
DOM是W3C标准化 | BOM是浏览器厂商在各自浏览器上定义的,兼容性较差 |
1.2 BOM的构成
window对象是浏览器的顶级对象,它具有双重角色
1.他是JS访问浏览器窗口的一个接口
2.他是一个全局对象,定义在全局作用域中的变量、函数都会变成window对象的属性和方法
在调用的时候省略window,前面的学习的对话框都属于window方法,比如alert()、prompt()等
window对象的特殊属性 window.name
window对象的常见事件
2.1窗口加载事件
window.onload
窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),调用的处理函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>按钮</button><script>window.onload = function() {var btn = document.querySelector('button');btn.addEventListener('click',function() {alert('点击')}) }</script>
</body>
</html>
注意:
1.有了window.onload就可以把JS代码写到页面元素的上方,onload是等页面内容全部加载完在执行处理函数
2.window.onload传统注册方式只能写一次,如果有多个,会以最后一个window.onload为准。
3.如果使用addEventListener 则对2没有限制.
==DOMContentLoaded ==
事件触发时,仅当DOM加载完成,不包括样式表、图片、flash等。
以下情况适宜:
1.页面的图片较多,从用户访问到onload触发需要较长时间,交互效果就不能实现,必然影响用户体验,此时用DOMContentLoaded 事件更为适宜
2.2调整窗口大小事件
window.onresize
当浏览器窗口大小发生变化就触发的处理函数
window.onresize = function() {alert('窗口变了哦');}
注意:
1.只要窗口大小发生像素变化,就会触发这个事件
2.利用这个事件完成响应式布局,window.innerWidth当前屏幕的宽度
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;}</style>
</head>
<body><div></div><script>window.addEventListener('load',function() {var div = document.querySelector('div');window.addEventListener('resize',function() {// 窗口大小变化console.log(window.innerWidth);console.log('变化了');// 当窗口小于800像素,隐藏窗口if (window.innerWidth <= 800) {div.style.display = 'none';}})})</script>
</body>
</html>
定时器
setTimeout()
setInterval()
3.1 setTimeout定时器
window.setTimeout(调用函数,[延迟的毫秒数]);
setTimeout() 方法用于设置一个定时器,该定时器在定时器到期后调用函数
<script>// 1.window在被调用的时候可以省略// 2.拖延时间的单位是毫秒// 3.调用函数可以直接写函数也可以写函数名// 4.页面中可能不止一个计时器,我们经常给定时器加标识符// window.setTimeout(function(){// alert('boom');// },2000);function boom() {alert('boom');}var time1 = setTimeout(boom,2000);var time2 = setTimeout(boom,4000)</script>
5秒后广告自动关闭
<body><img src="/images/ad.jpg" alt="" class="ad"><script>var ad = document.querySelector('.ad');setTimeout(function() {ad.style.display = 'none';}, 1000);</script>
</body>
3.2停止setTimeout() 定时器
clearTimeout
window.clearTimeout(timeoutID)
点击按钮“停止倒计时”,倒计时会停止
<body><button>停止计时器</button><script>var btn = document.querySelector('button');var timer = setTimeout(function() {alert('结束计时')},4000);btn.addEventListener('click',function() {clearTimeout(timer);})</script>
</body>
3.3 setInterval() 定时器
window.setInterval(回调函数,[间隔的毫秒数]);
setInterval() 方法重复调用一个函数,每隔一个时间,就去调用一次回调函数。
注意:
1.window可以省略
2.这个调用函数可以直接写函数,写函数名或采取字符串‘函数名()’三种形式。
3.单位是毫秒
4.因为定时器可能很多,可以给定时器赋值一个定时符
倒计时
1.这个计时器是不断变化的,因此需要计时器来自动变化
2.三个黑色盒子分别存放时分秒
3.三个盒子利用innerHTML放入计算的时分秒
4.最好采取封装函数的方式,这样可以调用一次这个函数,防止刚刷新页面会有空白
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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">1</span><span class="minute">2</span><span class="second">3</span></div><script>var hour = document.querySelector('.hour');var minute = document.querySelector('.minute');var second = document.querySelector('.second');var inputTime = +new Date('2021-3-14 18:00:00');countDown();setInterval(countDown, 1000);function countDown() {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;}</script>
</body></html>
3.4停止setInterval()定时器
<body><button class="begin">开启计时器</button><button class="stop">停止计时器</button><script>var begin = document.querySelector('.begin');var stop = document.querySelector('.stop');var timer = null;begin.addEventListener('click',function() {timer = setInterval(function(){console.log('halo');},1000)})stop.addEventListener('click',function() {clearInterval(timer);})</script>
</body>
限时发送短信
点击按钮后,该按钮60秒内都不能点击,防止重复发送短信
1.点击按钮之后,disabled为true。
2.同时按钮里面的内容发生变化,button里面的内容通过innerHTML修改
3.里面的秒数有所变化,所以用到计时器
4.定义一个变量,在计时器中不断递减
5.如果变量为0说明时间到了,需要停止计时器,并且复原按钮初始状态
<body><input type="text" name="" id="input"><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);btn.disabled = false;btn.innerHTML = '发送';time = 3;} else {btn.innerHTML = '还剩下' + time + 's';time--;}}, 1000)}, 3000);</script>
</body>
3.5 this
this的指向在函数定义的时候是确认不了的,只有函数执行的时候才能确定this的指向,一般情况下我们认为this的最终指向是那个调用他的对象
JS执行机制
4.1 JS 是单线程
JavaScript语言最大的特点是单线程,同一时间只能做同一件事,因为JavaScript这门脚本语言诞生的使命——JavaScript是为处理页面中用户的交互,以及操作而诞生。比如我们对某个DOM元素进行添加和删除操作,不能同时进行,需要先添加再进行删除
单线程就意味着,所有任务需要排队。问题:如果JS执行的时间过长,就会造成页面的渲染不连贯,导致页面渲染加载阻塞
4.2 同步和异步
为了解决页面可能渲染不连贯的问题,利用多核CPU的计算能力,HTML5提出web Worker标准,允许JavaScript脚本创建多个线程。于是出现了同步和异步
同步:顺序进行
异步:同时进行
同步任务
同步任务都在主线程上,形成一个执行线
异步任务
JS的异步是通过回调函数实现的。
一般而言,异步有以下三种类型:
1.普通事件:click、resize等
2.资源加载:load、error等
3.定时器:setInterval、setTimeout等
异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)
4.3 JS 执行机制
1.先执行执行栈中的同步任务
2.回调函数(异步任务)放到消息队列中挂起
3.执行栈中的所有任务完成后,系统会按照次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈开始执行
由于主线程不断地重复获得任务、执行任务、再获取任务在执行,所以这种机制被称为事件循环
location对象
5.1 location对象概述
window对象给我们提供了一个location属性用于获取或设置窗口的URL,并且可以用于解析URL。由于这个属性返回的是一个对象,我们将这个属性称为location对象
5.2 URL
统一资源定位符(URL)是互联网上标准资源的地址。互联网上的每个文件都有唯一的URL,它包含的信息指出文件的位置以及浏览器的处理方式
URL的一般格式:
protocol://host[:post]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
组成 | 说明 |
---|---|
protocol | 通信协议 常用的http,ftp,maito等 |
host | 主机(域名)www.baidu.com |
port | 端口号可选,省略 |
path | right-aligned 文本居右 |
query | right-aligned 文本居右 |
fragment | right-aligned 文本居右 |
navigator对象
history对象
BOM——浏览器对象模型(1)相关推荐
- JavaScript(七)—— BOM 浏览器对象模型
本篇为 JavaScript 系列笔记第七篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程 系列笔记: JavaScript(一)-- 初识JavaScript / ...
- BOM——浏览器对象模型
BOM 浏览器对象模型 BOM 的概念 • BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM 由多个 ...
- BOM浏览器对象模型(Browser Object Model)
文章目录 一.BOM浏览器对象模型(Browser Object Model) window对象 window对象的方法 navigator/location/history/screen对象 nav ...
- JavaScript BOM浏览器对象模型
什么是BOM浏览器对象模型? 浏览器对象模型(Browser Object Model(BOM))允许JavaScript与浏览器对话 BOM:浏览器对象模型 //宿主对象 BOM 提供了很多对象,用 ...
- JS BOM浏览器对象模型
BOM浏览器对象模型 bom概述 BOM(Browser Object Model) 即浏览器对象模型,它提供了独立于内容与浏览器窗口进行交互的对象,其核心对象的window BOM由一系列相关的对象 ...
- Javascript的HTML BOM(浏览器对象模型)
Javascript的HTML BOM(浏览器对象模型) 一.Window 对象 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话". Browser O ...
- BOM—浏览器对象模型(Browser Object Model)
1,javascript 组成部分: 1.ECMAscript(核心标准): 定义了基本的语法,比如:if for 数组 字符串 ... 2.BOM : 浏览器对象模型(Browser ...
- BOM——浏览器对象模型(Browser Object Model)
什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
- JavaScript - WebAPI - BOM浏览器对象模型
1.1-BOM与DOM介绍 JavaScript语言由三部分组成 ECMAJavaScript:定义了js的语法规范 Dom:document object model文档对象模型:一个HTML文档中 ...
最新文章
- 蓝桥杯练习系统习题-算法提高2
- QString与LPCWSTR互转
- 三维错切变换矩阵_图像的仿射变换
- swift 2.1 安裝與下載
- 【答辩问题】计算机专业本科毕业设计答辩的一般程序3
- wow.js中各种特效对应的类名
- python pdf转txt_Python之pdf转txt
- shell 命令返回值判断
- 块设备驱动详解 IDE(转)
- 数据结构1800试题(第5章)
- Android 接口的default 方法运行时报错AbstractMethodError
- 有限新息率FRI信号模型
- 谷歌打开后开始页面被hao123篡改
- microduino实现红外线发送与接收
- 流程图的会签、或签、转审、加签、一票否决实现
- 亚马逊QA是什么意思?
- odoo tree 颜色设置decoration
- 「智哪儿评测」强强联合:OPPO智美生活凯迪仕K15-W评测
- 同时在线用户人数怎么统计?
- javaJDBC 增删改查一个方法一条龙解决