JavaScript的学习笔记（day14）

1.BOM（Browser Object Model）浏览器对象模型

 提供与网页无关的浏览器功能对象，为WEB开发提供了浏览器间相互操作的基础。

2.window对象

概念：BOM的核心，表示浏览器的实例，window对象在ES中表示的是Global对象，在浏览器窗口表示的是JS的接口

2.1 Global作用域

window对象是ES中Global对象的复用，因此，在浏览器环境中，通过var声明的所有全局变量和函数都存在window对象中

2.2 Window窗口

相关属性
位置属性

screenLeft & screenTop：返回窗口相对于屏幕的X和Y坐标（火狐不支持该属性）
screenX & screenY：返回相对于屏幕的X和Y坐标（IE不支持，火狐支持该属性）
pageXOffset：设置或返回当前页面相对于窗口显示区左上角的X坐标
pageYOffset：设置或返回当前页面相对于窗口显示区左上角的Y坐标

注意：IE8及之前的版本不支持该属性，但是可以通过document.body.scrollLeft/scrollTop属性

窗口大小属性

innerWidth：视图区宽度
innerHeight：视图区高度
outerWidth：浏览器窗口宽度
outerHeight：浏览器窗口高度

注意：IE8及之前的版本不支持这些属性

screen对象及其属性

screen.width/height：屏幕总宽度/高度（像素单位）
screen.availWidth/availHeight：可用宽度/高度（像素单位）
screen.colorDepth：颜色深度
screen.pixelDepth：颜色分辨率

2.3 window.open()方法

用于导航到指定的URL，也可以用于打开新的浏览器窗口语法：window.open(URL, name, specs, replace) 参数均是可选择输入参数：  URL：指定的页面URL地址，没有指定则打开一个空白窗口  name：指定target属性或者窗口的名称    _blank: 新建窗口打开这个指定的URL    _parent: 将指定的URL加载到父框架    _self: 将指定的URL替换当前页面    _top: 将指定的URL替换任何可加载的框架集    字符串：窗口名称  specs：将要打开的窗口的一些特性  replace：布尔值 判断是替换浏览历史中的当前条目还是创建新条目

2.4 系统对话框

alert：警告框 当传入的参数不是原始字符串时会调用toString()方法转化为字符串 confirm：确认框 返回用户点击的是确定还是取消的布尔值prompt：提示框 返回用户在提示框中输入的内容注意：系统对话框在进行时程序进程将会等待系统对话框的执行，直到对话框的程序执行完毕才会继续执行程序

2.5 location对象

提供了当前窗口中加载的文档的有关信息和一些当行功能属性：  host				返回服务器名称和端口号  hostname	  返回不带端口号的服务器名称  href				 返回当前加载页面的完整URL  pathname	  返回URL的目录和文件名  port			     返回URL中指定的端口号  protocol	      返回页面使用的协议  search		     返回URL的查询字符串。这个字符串以问号开头方法：  assign()：传入一个url参数 打开一个新url，在浏览记录中生成一条记录  replace(): 传入一个url参数 替换当前的页面，浏览记录中不会生成记录  reload()：传入一个布尔值 重新加载当前页面 false表示从缓存中加载 true表示强制从服  务器中加载

2.6 history对象

保存着用户的上网历史记录，一般用于实现网页的前进与后退属性及方法：  length：返回历史列表中的网址数  back()：加载前一个url  forward()：加载下一个url  go()：加载历史列表中的某个具体页面，输入负数表示向后跳转，正数表示向前跳转

2.7 间歇调用和延迟调用

延迟调用：setTimeout()方法 延迟调用该内容的方法 返回唯一标识ID参数：执行代码 延迟时间（单位是毫秒）取消延迟：clearTimeout() 输入唯一表示ID间歇调用：setInterval()方法 按照指定的时间间隔重复执行内容代码 返回唯一标识ID参数：执行代码 间隔时间（单位是毫秒）取消间歇调用：clearInterval() 输入唯一表示ID

2.8 防抖和节流

防抖：重复触发某一个时间时，只以最后一次触发为准
防抖实现：
1.声明全局变量存储定时器ID
2.每次触发事件时，清除上一次的定时器，开启本次的定时器
例子：

  <input type="text" name="" id="inp">  <script>    //输入框事件    //声明全局变量存储定时器ID    var timeID = null    // 获取输入框节点    var inp = document.getElementById('inp')    // 输入框输入事件    inp.oninput = function () {      //1.先清除之前的定时器      clearTimeout(timeID)      //2.开启本次定时器      timeID = setTimeout(() => {        console.log(`输入的内容是${this.value}`)      }, 500)    }  </script>

节流：一段时间内重复触发某一个事件，只执行一次
节流实现：
1.声明一个全局变量存储触发事件。
2.每一次触发事件，获取当前时间。
3.判断当前时间与上一次触发事件，是否超过了间隔。
4.如果超过间隔时间，则执行事件处理代码，然后存储本次触发的时间。
例子：

  <button id="btn">点我呀</button>  <script>    //声明一个全局变量存储触发时间    let lastTime = null    // 获取按钮节点    var btn = document.getElementById('btn')    //页面滚动事件    btn.onclick = function () {      //1.每一次触发 先获取本次时间戳      let currentTime = Date.now()      //2.判断当前时间 与 上次触发时间 是否超过间隔      if (currentTime - lastTime >= 3000) {        console.log(this.innerHTML)        //3.存储本次的触发时间        lastTime = currentTime      }    }  </script>