BOM

BOM

1.BOM概述

1.1 什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
BOM由一系列对象构成，并且每个对象都提供了很多方法和属性
BOM>DOM
window对象是浏览器的顶级对象，它具有双重角色

1. 它是JS访问浏览器窗口的一个接口
2. 它是一个全局变量，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。在调用时可以省略window。
   注意：window下的一个特殊属性window.name

2.window对象的常见事件

2.1 窗口加载事件

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

window.onload是窗口加载事件，当文档内容完全加载完成会触发该事件，就调用的处理函数
注意：

1. 有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
2. window.onload传统注册事件方式只能写一次，如果有多个，以最后一个window.onload为准。
3. 如果使用addEventListener没有限制

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

区别：
load等页面内容全部加载完毕，包含页面dom元素 图片 flash css等等
DOMContentLoaded 是DOM加载完毕，不包含图片 flash css 等都可以执行，加载速度比load更快一些

2.2 调整串口大小事件

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

window.onresize是调整大小加载事件，当触发时就调用的处理函数。

<script>
window.addEventListener('load',function(){
var div=document.querySelector('div');
window.addEventListener('resize',function(){
console.log(window.innerWidth);
console.log('变化了');
if(window.innerWidth<=800){
div.style.display='none';
}
else{
div.style.display='block';
}
})
})
</script>
<div></div>

注意：

1. 只要窗口大小发生像素变化，就会触发这个事件
2. 我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度

3.定时器

3.1两种定时器

window对象给我们提供两种非常好用的-定时器

• setTimeout()
• setInterval()

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

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数

<script>
//这个延迟时间单位时毫秒，如果省略默认是0
//这个调用函数可以直接写函数 ，还可以写函数名，还有一种写法'函数名()'
setTimeout(function(){
console.log('时间到了');
},2000);

或者

function callback(){
console.log('爆炸了');
}
setTimeout(callback,3000);

setTimeout('callback()',3000);//我们不提倡这个写法

注意：

1. window可以省略
2. 有三种：直接写函数，或写函数名或字符串‘函数名（）’
3. 延迟的毫秒数省略默认是0，如果写，必须是毫秒
4. 因为定时器有很多，我们经常给定时器赋值一个标识符

3.2 setTimeout（）定时器

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

setTimeout()这个调用函数我们也称回调函数callback
简单说：回头调用函数
element.οnclick=function(){}或者element.addElementListener(“click”,fn);也是回调函数

3.3停止setTimeout()定时器

window.clearTimeout(timeout ID)

clearTimeout()方法取消了先前通过调用setTimeout（）建立的定时器

<button>点击停止计时器</button>
<script>
  var btn=document.querySelector('button');
  var timer=setTimeout(function(){
  console.log('爆炸了');
  },5000);
  btn.addEventListener('click',function(){
  clearTimeout(timer);
  })
  </script>

注意：

1. window可以省略
2. 里面的参数就是定时器的标识符。

3.4 setInterval()定时器

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

与setTimeout类似
不同：
setInterval（）方法重复调用一个函数，每个这个时间，就去调用一次回调函数

setInterval(function){
console.log('继续输出');
},1000);//重复调用

3.5 停止

<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('ni hao ma');
      },1000);
});
stop.addEventListener('click',function(){
    clearInterval(timer);
})
</script>

3.6 this

this的指向在函数定义的时候确定不了的，只有函数执行时才能确定this到底指向谁，一般情况下this的最终指向的时那个调用它的对象

1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）

console.log(this)//window
function(){
  console.log(this);
  }
  fn();//window

2. 方法调用中谁调用this指向谁

<button></button>
var o={
   sayHi:function(){
      console.log(this);//this指向o对象
      }
      }
      o.sayHi();
      var btn=document.querySelector('button');
      btn.onclick=function(){
        console.log(this);//this指向的时btn这个按钮对象
        }

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

function Fun(){
   console.log(this);//this指向fun实例对象
   }
   var fun = new Fun();

4.JS执行机制

4.1 JS是单线程

JavaScript语言的一大特点就是单线程，同一个时间只能做一件事，这是因为JavaScript这门脚本语言诞生的使命所致–JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应该先进行添加，之后再删除。
单线程就意味着，所有任务都需要排队，前一个任务结束才会执行后一个任务

4.2 同步和异步

为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，JS出现了同步和异步。
同步任务：同步任务都在主线程上进行，形成一个执行线
异步：JS的异步是通过回调函数实现的。
一般而言，异步任务有以下3种类型：

1. 普通事件：如click，resize等
2. 资源加载：如load，error等
3. 定时器：包括setTimeout，setInterval
   思考：下面的输出结果是什么呢？

console.log(1)
setTimeout(function(){
    console.log(3);
    },0);
    console.log(2);

输出结果：

1
2
3

4.4 JS执行机制

1. 先执行执行栈中的同步任务。
2. 异步任务（回调函数）放入任务队列中。
3. 一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
   由于主线程不断地重复获得任务，执行任务，再获取任务，在执行，所以这种机制被称为事件循环

5.location对象

5.1 什么是location对象

window对象给我们提供了一个location属性用于获取或者设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以魔门将这个属性也成为location对象。

5.2 URL

**统一资源定位符（Uniform Resource Locator，URL）**是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式：

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

5.3 location对象的属性

location对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机（域名）
location.port	返回端口号 如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容 常见于链接锚点

href search

5.4 location对象的方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面（也称为重定向页面）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者f5如果参数为true 强行刷新ctrl+f5

<button>点击</button>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
location.assign('http://www.itcast.cn');//可以实现后退功能
location.replace('http://www.itcast.cn');//不能实现
location.reload();
})
</script>

6. navigator对象

navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回有客户机发送服务器的user-agent头部的值。

7. history对象

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go（参数）	前进后退功能 参数如果是1 前进1个页面 如果是-1 后退1个页面

<a href="list.html">点击我去列表页</a>
<button>前进</button>
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
  history.forward();
  });