文章目录

一.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相关推荐

javascript的BOM
2019独角兽企业重金招聘Python工程师标准>>> javascript的BOM ECMAScript是 JavaScript的核心,但如果要在 Web中使用 JavaScrip ...
JavaScript中BOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
[Javascript]：BOM对象详解和BOM与DOM的层次关系
BOM与DOM的结构层次图 BOM对象是什么 BOM:浏览器对象模型(Brower Object Model),是用于操作浏览器而出现的API,BOM对象则是Javascript对BOM接口的实现. ...
JavaScript之BOM和DOM入门
JavaScript之BOM和DOM入门 JavaScript的组成包含三大部分,分别为ECMAScript.DOM和BOM.JavaScript组成,如下图所示: ECMAScript是JavaSc ...
JavaScript中BOM及DOM的学习
JavaScript中BOM及DOM的学习文章目录 JavaScript中BOM及DOM的学习 1 BOM编程 1.1 BOM编程概述 1.1.1 BOM编程的概念 1.1.2 BOM编程的作用 1 ...
轻松学习JavaScript十七：JavaScript的BOM学习(二)
JavaScript计时事件通过使用JavaScript中的BOM对象中的window对象的两个方法就是setTimeout()方法和claerTimeout()方法,我们有能力作 ...
Javascript学习笔记3 Javascript与BOM简介
什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象 ...
JavaScript之BOM基础
BOM(Browser Object Model)也叫浏览器对象,它提供了很多对象,用于访问浏览器的功能.但是BOM是没有标准的,每一个浏览器厂家会根据自己的需求来扩展BOM对象.本文主要以一些简单的 ...
前端JavaScript之BOM与DOM
什么是BOM,DOM avaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...
Web前端——JavaScript（bom文档对象模型）
>window对象是bom的顶层对象,其中包含document对象: Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML ...

JavaScript之BOM