2021蓝旭第七次讨论班——BOM

BOM

编程需要沉淀
关于BOM，里面的内容比较多比较杂，也不建议大家初学就全部搞懂，用的时候上网直接查就好了。我在这里选取了我觉得以后暑期项目可能会用到的知识点，进行讲解

一、什么是BOM

1.JavaScript的组成

     Javascript 由三部分构成：ECMAScript，DOM和BOM。根据浏览器的不同，具体的表现形式也不尽相同。

• ECMAScript（核心）：描述了js的基本语法和基本对象
• DOM（Document Object Model）: 是文档对象模型，处理网页内容的方法和接口。是W3C 的标准——所有浏览器公共遵守的标准
• BOM（Browser Object Model）: 是浏览器对象模型，提供与浏览器交互的方法和接口。各个浏览器厂商根据 DOM在各自浏览器上的实现——表现为不同浏览器定义有差别,实现方式不同

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C

2.BOM（Browser Object Model）

• 把“浏览器”当做一个“对象”来看待
• BOM 学习的是浏览器窗口交互的一些对象
• BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差
• BOM 的顶级对象是 window
• BOM 包含 DOM
  

二、BOM基础知识

BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关

1、window对象

BOM的核心对象是 window，它代表整个浏览器，它是浏览器的顶级事件。
在浏览器中，window有着双重的角色：JavaScript访问浏览器的接口对象，ES中的Global对象。
这意味着网页中的任何一个对象，变量，函数都是以window作为其Global对象

通俗来讲就是，网页中的所有变量，对象，函数等，最终都是window对象的子属性

  1.1全局作用域

在ECMAScript中，window对象扮演着Global对象的角色，也就是说，所有在全局作用域声明的变量，函数都会变成window的属性和方法，都可以通过 window.属性名（或方法名） 直接调用

var age = 19;
function sayName(){
  console.log("游智妍");
}
console.log(window.age);//19
window.sayName();//"游智妍"

注意：

• 定义全局变量与在window对象上直接定义属性有一点区别：全局变量不能通过 delete操作符 删除，而直接在window对象上的定义的属性可以

var age = 19;
window.age2 = 30;
console.log(delete window.age);//false
console.log(delete window.age2);//true
console.log(window.age);//19
console.log(window.age2);//undefined

• 在JavaScript中，尝试使用未声明的变量会抛出错误，但是通过 window 对象查询未声明的变量，只会返回 undefined

  1.2导航和打开窗口

通过 window.open()方法 既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口
该方法接收四个参数：

• 要加载的URL (通常只需传递第一个参数)
• 窗口目标
• 一个特性字符串
• 布尔值，是否取代当前页面（仅在不打开新窗口的时候有效）

window.close() 仅用于关闭通过 window.open() 打开的窗口

2、location对象

location是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能
注: window.location 和 document.location 引用的是同一个对象。location 既是 window 对象的属性，也是 document 对象的属性

  2.1URL

统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，
它包含的信息指出文件的位置以及浏览器应该怎么处理它
URL 的一般语法格式为︰protocol: / /host [ :port]/path/ [ ?query]#fragment
http: / / www.itcast.cn/index.html ?name=andy&age=18#link

  2.2location对象的属性

注意：

• location.search 是返回从问号到URL末尾的所有内容，但没有办法逐个访问其中的每个查询字符串参数，所以一般可以自己写一个解析查询字符串参数（网上博客有很多，大家可以下去自行了解）

  2.3重新加载页面

通过 location.reload() 方法可以重新加载当前显示的页面

• location.reload() : 重新加载（有可能会从缓存中加载）
• location.reload(true)：重新加载（从服务器重新加载）

注意：

• 位于reload()调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素。所以最好将它放在代码的最后一行。

3、navigator对象

navigator 对象主要用来获取浏览器的属性，但不同浏览器中navigator对象的属性是不相同的，点击这里查看navigator的属性

4、history对象

• history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起
• 因为 history 是 window 对象的属性，因此每个浏览器窗口，每个标签乃至每个框架，都有自己的 history对象与特定的 window 对象关联
• 出于安全方面的考虑，开发人员无法得知用户浏览过的URL。不过，借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退和前进。

history 常用的有如下3个方法和一个属性

  4.1go()方法

• 使用go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。参数为正整数表示向前跳转；参数为负表示向后跳转。

history.go(0);//刷新页面
history.go(-1);//后退一页
history.go(1);//前进一页
history.go(2);//前进两页

history.go(0)是直接读取缓存数据，不会从服务器端获取数据，相当于值会对数据进行刷新，对当前页面的布局更改不会刷新。
location.reload()是会从服务端获取数据的
它们的区别就是看服务器中当前所在页面更改后会不会重新加载该页面。

• 参数为字符串参数时，表示浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退，也可能前进，具体要看哪个位置最近。如果历史记录中不包含该字符串，那么这个方法什么也不做

history.go("yzy.com");//跳转到最近的yzy.com页面

  4.2forward()方法和back()方法

history.forward();//前进一页，等价于history.go(1);
history.back();//后退一页，等价于history.go(-1);

  4.3length属性

获取历史记录数，如果是打开的第一个页面，则 history.length == 0，可以用该属性来判断当前打开的网页是不是该窗口打开的首个网页

5、screen对象

• screen对象包含有关客户端显示屏幕的信息
• 每个浏览器中的screen对象都包含着各不相同的属性 点击查看screen对象的属性
• 在编程中用处不大，基本上只用来表明客户端的能力

6、定时器（重）

是Window 对象方法，定时器可以让程序按指定的时间间隔自动执行任务

  6.1周期性定时器

让程序按指定时间间隔反复自动执行一项任务

setInterval('执行语句','时间周期（单位为毫秒）')

清除周期性定时器

clearInterval("定时器名字")

var timer = setInterval(function () {
    console.log("Hello World");
}, 1000);
clearInterval(timer)

  6.2一次性定时器

让程序延迟一段时间执行

setTimeout('执行语句','等待时间（单位为毫秒）')

清除一次性定时器

clearTimeout("定时器名字")

var timer = setTimeout(function () {
    console.log("Hello World");
}, 1000);
clearInterval(timer)

7、三种对话框

  7.1 警告框 alert()

• 警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作，一般不推荐使用
• 

  7.2 确认框 confirm()

• 确认框用于使用户可以验证或者接受某些信息
• 

  7.3 提示框 prompt()

• 提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵
• 

但在实际项目中，一般不推荐使用，一是因为样式不够美观，二是它们会阻塞整个页面

课外了解：

1、什么是API和WebAPI?
2、从URL输入到页面展现到底发生什么？
3、如何拆解url的各部分内容信息？