11-JavaScript的BOM对象

11-BOM

---

1.BOM对象

1).BOM

-浏览器对象模型
-BOM可以使我们通过JS来操作浏览器
-在BOM中为我们提供了一组对象，用来完成对浏览器的操作- BOM对象

2).window

​ -代表的是整个浏览器的窗口，同时window也是网页中的全局对象

3).Navigator

​ -代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
​ -由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
​ -—般我们只会使用userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent

console.log(navigator.appName);
var ua=navigator.userAgent;
console.log(ua);
if(/firefox/i.test(ua)){
 alert("你是火狐");
}else if(/chrome/i.test(ua)){
 alert("你是谷歌");
}else if(/msie/i.test(ua)){
 alert("你是IE");
}else if("ActiveXObject" in window){
 alert("你是IE浏览器");
}

如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息比如:Activexobject

if(window.ActiveXObject){
 alert("你是IE浏览器");
}else{
 alert("你不是IE浏览器");
}
//！取反，两个就是反反，但是会转为布尔类型
alert(!!window.ActiveXObject);
alert("ActiveXObject" in window);
if("ActiveXObject" in window){
 alert("你是IE浏览器");
}else{
 alert("你不是IE浏览器");
}

火狐的userAgent：
	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0

Edge的userAgent:
	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 Edg/106.0.1370.42
	-在IE11中已经将微软和IE相关的表示都已经去除了，所以基本上已经不能通过userAgent来识别一个浏览器是否是IE浏览器

Chrome的userAgent:
	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

IE8的userA:
	Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)
IE10的userA:
	Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)

4)Location

​ -代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
​ -可以直接将location的值修改为一个新的地址，这样会使得网页发生跳转
​ -location.assign()跳转到一个新的地址
​ -location.replace(）跳转到一个新的地址（无法通过回退按钮回退)
​ -location.reload(）刷新页面，可以传递一个true作为参数来强制清缓存刷新
​ -location.href获取当前地址

**a.**如果直接将location属性修改为一个完整的路径，或相对路径，则我们页面会自动跳转到该路径，并且会生成相应的历史记录

location="http://www.baidu.com";
location="hellowrld.html";

**b.**如果直接打印location则可以获取到地址栏的信息（当前元素的完整路径）

console.log(location);

**c.**assign( )
-用来跳转到其他的页面，作用和直接修改location—样

location.assign("http://www.baidu.com");

**d.**reload()
-用于重新加载当前页面，作用和刷新按钮一样
-如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面

location.reload(true);

**e.**replace()
-可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
不会生成历史记录，不能使用回退按钮回退

location.replace("../hellowrld.html");

---

2.定时器

通过定时器，可以使代码在指定时间后执行
-设置定时器的方式有两种:

setTimeout()
 -参数:
     1．回调函数（要执行的代码)
     2．间隔的时间（毫秒)
 -关闭定时器
 	clearTimeout()

setInterval()（每间隔一段时间代码就会执行一次)
 -参数:
     1．回调函数（要执行的代码)
     2．间隔的时间（毫秒)
 -返回值:
     返回一个Number类型的数据
     这个数字用来作为定时器的唯一标识
 -关闭定时器
     clearInterval()
     方法中需要一个定时器的便是作为参数，这样将关闭表示对应的定时器

const numh=document.getElementById("num")
let num=0
const timer=setTimeout(()=>{
 alert("我是定时器中的代码")
},3000)
clearTimeout(timer)

const timer2=setInterval(()=>{
 num++
 numh.textContent=num
 if (num===200) {
     clearInterval(timer2)
 }
},1000)

---

3.事件循环

事件循环（event loop)
    -函数在每次执行时，都会产生一个执行环境
    -执行环境负责存储函数执行时产生的一切数据
    -问题:函数的执行环境要存储到哪里呢?
        -函数的执行环境存储到了一个叫做调用栈的地方
        -栈，是一种数据结构，特点后进先出
        -队列，是一种数据结构，特点先进先出

1).调用栈

调用栈（call stack)
-调用栈负责存储函数的执行环境
-当一个函数被调用时，它的执行环境会作为一个栈帧
插入到调用栈的栈顶，函数执行完毕其栈帧会自动从栈中弹出

function fn() {
 let a=10
 let b=20
 function fn2() {
     console.log("fn2~");
 }
 fn2()
 console.log("fn~");
}
fn()
console.log(111);

2).消息队列

​ -消息队列负责存储将要执行的函数
​ -当我们触发一个事件时，其响应函数并不是直接就添加到调用栈中的
​ 因为调用栈中有可能会存在一些还没有执行完的代码
​ -事件触发后，JS引擎是将事件响应函数插入到消息队列中排队

function fn() {
 let a=10
 let b=20
 function fn2() {
     console.log("fn2~");
 }
 fn2()
 console.log("fn~");
}
fn()
console.log(111);

const btn=document.getElementById("btn")
const btn2=document.getElementById("btn2")
btn.onclick=function () {
 //console.log("按钮被点击了");
 alert(1111) 
 const begin=Date.now()
 while (Date.now-begin<3000) {}
}
btn2.onclick=function () {
 alert(2222) 
}

---

4.定时器的应用

定时器的本质，就是在指定时间后将函数添加到消息队列中

console.time()
const timer=setTimeout(function(){
 console.timeEnd()
 console.log("定时器执行了~");
},3000) 

//使程序卡3秒
const begin=Date.now()
while (Date.now()-begin<6000) {} 

setInterval()每间隔一段时间就将函数添加到消息队列中
-但是如果函数执行的速度比较慢，它是无法确保每次执行的间隔都是一样的

console.time("间隔")
setInterval(function(){
 console.timeEnd("间隔")
 //console.log("定时器执行了~");
 alert("定时器执行了~")
 console.time("间隔")
},3000)

//确保每次执行都有相同间隔
console.time("间隔")
setTimeout(function fn(){
 console.timeEnd("间隔")
 console.log("函数执行了~");
 console.time("间隔")
 //在setTimeout的回调函数的最后，在调用一个setTimeout
 setTimeout(fn,3000)
},3000)

setTimeout(()=>{
 console.log(11111);
},0)
console.log(22222);
3000)

//确保每次执行都有相同间隔
console.time("间隔")
setTimeout(function fn(){
 console.timeEnd("间隔")
 console.log("函数执行了~");
 console.time("间隔")
 //在setTimeout的回调函数的最后，在调用一个setTimeout
 setTimeout(fn,3000)
},3000)

setTimeout(()=>{
 console.log(11111);
},0)
console.log(22222);