BOM
浏览器对象模型：在Web中使用JavaScript的核心。BOM提供了操作浏览器的API接口（对象），用于访问浏览器的功能。
window对象
BOM的核心对象：window。window表示浏览器的一个实例，既是JavaScript访问浏览器窗口的一个接口，又是一个ESMAScript规定的Global对象。
1、全局作用域
在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
定义全局变量 VS 定义window对象的属性
1.全局变量不能通过delete操作删除，在window对象上定义的属性可以。
2.尝试访问未定义的全局变量会报错，但是通过查询window对象，可以知道某个可能未声明的变量是否存在
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>window对象</title>
</head>
<body>
<script type="text/javascript">
/**
* 测试delete方法在全局变量和window对象属性的不同
*/
// 定义全局变量和window对象的属性
console.log("*****测试delete方法在全局变量和window对象属性的不同*****")
var a = "defined";
window.b = "defined";
console.log("==删除之前==")
console.log("a=", a)
console.log("window.b=", b) // 可以通过window.b 或者b 进行访问
// 删除全局属性和window对象的属性
console.log("==删除结果==")
console.log(delete a)
console.log(delete b)
// 删除之后的结果
console.log("==删除之后==")
console.log("a=", a)
console.log("window.b=", b) // 可以通过window.b 或者b 进行访问
/**
* 测试未声明的变量是否存在
*/
console.log("*****测试未声明的变量是否存在*****")
console.log(window.test)
console.log(test)
</script>
</body>
</html>
运行截图：
注释掉出错的语句
2、窗口关系及框架
如果页面中包含框架（<frameset>、<iframe>等），每个框架都拥有自己的window对象，并且保存在window.frames中，可以通过数值索引（从上到下、从左到右；从0开始）或者框架的名称（定义使用frame标签的时候定义的name属性值）。
对象
- top对象：始终指向最外层的框架，也就是浏览器窗口。
- window对象：始终指向特定的框架实例。
- parent对象：始终指向框架实例的父框架。
- self对象：始终指向self，self 始终等于 window对象。
有些情况下，top==window==parent，有些情况下却不相等。
属性
- name：直接输入url打开，name属性为""，否则可以定义name属性的值。
案例
index.html，其中包含indexframe1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>window对象</title>
</head>
<body>
<iframe src="./indexframe1.html" width="600" height="400" name="frame1"></iframe>
<script type="text/javascript">
console.log(window.location.pathname)
console.log("-window与top的关系", window == top)
console.log("-window与parent的关系", window == parent)
console.log('\n')
</script>
</body>
</html>
indexframe1.html indexframe1.html中包含indexframe2.html和indexframe3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>indexframe1</title>
</head>
<body>
<div>
目前是indexframe1页面
</div>
<iframe src="./indexframe2.html" width="100" height="100"></iframe>
<iframe src="./indexframe3.html" width="100" height="100"></iframe>
<script type="text/javascript">
console.log(window.location.pathname)
console.log("-window与top的关系", window == top)
console.log("-window与parent的关系", window == parent)
console.log("-window.parent与top的关系", window.parent == top)
console.log('\n')
</script>
</body>
</html>
indexframe2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>indexframe2</title>
</head>
<body>
<div>
目前是indexframe2页面
</div>
<script type="text/javascript">
console.log(window.location.pathname)
console.log("-window与top的关系", window == top)
console.log("-window与parent的关系", window == parent)
console.log("-window.parent.parent与top的关系", window.parent.parent == top)
console.log('\n')
</script>
</body>
</html>
indexframe3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>indexframe3</title>
</head>
<body>
<div>
目前是indexframe3页面
</div>
<script type="text/javascript">
console.log(window.location.pathname)
console.log("-window与top的关系", window == top)
console.log("-window与parent的关系", window == parent)
console.log("-window.parent.parent与top的关系", window.parent.parent == top)
console.log('\n')
</script>
</body>
</html>
运行截图：
3、窗口位置
窗口的位置表示的浏览器相对于桌面的位置。
对象
- screen对象：实现Screen接口，返回当前渲染窗口中和屏幕有关的属性。
属性
- screenX | screenLeft：【只读】表示浏览器左边界到操作系统桌面左边界的水平距离，单位是：像素
- screenY | screenTop：【只读】表示浏览器上边界到操作系统桌面上边界的垂直距离，单位是：像素
方法
但是以下方法被禁用
- moveBy(水平方向移动的像素值deltaX,垂直方向移动的像素值deltaY)：移动多少像素
- moveTo(移动到的位置横坐标x,移动到的位置纵坐标y)：移动到哪里
4、窗口大小
各个浏览器提供了4个属性来表示浏览器窗口的大小
属性
- outerWidth：整个浏览器窗口的宽度。
- innerWidth：浏览器窗口的视口(viewport)的宽度。
- outerHeight：整个浏览器窗口的高度。
- innerHeight：浏览器窗口的视口(viewport)的高度。
outerHeight和innerHeight的区别.png
方法
但是以下方法被禁用
- resizeBy(窗口水平方向变化的像素值xDelta,窗口垂直方向变化的像素值yDetla)：调整了多少像素。
- resizeTo(新的outerWidth,新的outerHeight)：调整到多少像素。
5、导航和打开窗口
属性
- opener：返回打开当前窗口的那个窗口的引用，例如：在window A中打开了window B，B.opener 返回 A.返回打开当前窗口的那个窗口的引用，例如：在window A中打开了window B，B.opener 返回 A.
方法
- open()：用指定的名称将指定的资源加载到浏览器上下文。
返回值：
打开新窗口对象的引用。如果失败，返回null。
参数：
要加载的URL、窗口目标（窗口名称）、一个特性字符串(逗号分隔)、浏览器历史记录是否用当前新页面取代旧页面。 - close()：该方法只能关闭由window.open()方法打开的窗口，否则关闭失败。
注意事项
1.如果windowName已经存在，则不会打开一个新窗口，而是在当前页面加载新的url地址。
2.远程的url不会立即载入，载入过程是异步的。
6、定时器和循环器
JavaScript是单线程，可以设置定时器和循环器。定时器和循环器是异步执行，不在主线程中，当时间到达的时候，就会开辟一个线程，去执行，执行后再返回主线程。
方法
- setTimeout(执行的代码, 等待的时间[毫秒级别])：指定的时间后执行的代码；
返回值：
返回一个定时器的id，可以通过id进行清除定时器clearTimeout(timeoutID)
参数：
1.执行的代码
2.等待的时间[毫秒级别]
3.传递参数，给执行的函数使用 - setInterval(执行的代码, 等待的时间[毫秒级
别])：指定的时间后执行的代码；
返回值：
返回一个循环器的id，可以通过id进行清除定时器clearInterval(timeoutID)
参数：
1.执行的代码
2.等待的时间[毫秒级别]
3.传递参数，给执行的函数使用
7、系统对话框
常用的方法：alert()、confirm()、prompt()
作用：调用系统对话框向用户显示消息。
注意：
1.系统对话框与在浏览器中显示的网页没有关系，它的外观由操作系统或浏览器设置，不是由css决定；
2.显示这些对话框的时候代码会停止执行，关掉这些对话框后代码又会恢复执行。
方法
- alert(message显示的信息)：显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。
- confirm(message)：显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框 。
返回值：返回一个布尔值，true表示确定、false表示取消
参数：显示的消息信息 - prompt(text, value)：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。
返回值：用来存储用户输入的文字【默认返回用户输入的文字，如果用户没有输入且点击确定：返回“”；如果用户点击取消，返回null】
参数：
text：提示用户的信息
value：输入的默认值 -
print()：打开打印对话框打印当前文档。
print().png - find()：在一个页面中搜索指定的字符串.
8、调试控制台console
Console对象可以从任何全局对象中访问到，如window、WorkerGlobalScope等
方法
- console.log(message)：向 Web 控制台输出一条消息。
message：使用逗号进行分割的字符串、对象；模版字面量；格式化输出
案例：
格式化输出：
console.log('String: %s, Int: %d,Float: %f, Object: %o', str, ints, floats, obj)
console.dir()：在控制台中显示指定JavaScript对象的属性，并通过类似文件树样式的交互列表显示。
console.info()：向web控制台输出一个通知信息。
console.debug(message)：输出“调试”级别的消息且仅仅控制台配置为显示调试输出时才显示该消息。
参数：对象或者字符串console.warn()：向Web控制台输出一条警告信息。
console.error()：向 Web 控制台输出一条错误消息。
console.group(groupName)：在Web控制台上创建一个新的分组，随后输出到控制台上的内容都会被添加一个缩进，表示该内容属于当前分组，直到调用console.groupEnd()之后，当前分组结束。
console.groupEnd()：在Web控制台中退出一格缩进(结束分组)。
console.time(timeName)：启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行10,000个计时器。
console.timeEnd(timeName)：停止一个通过 console.time() 启动的计时器。
-console.table()：将列表型的数据打印成表格。
location对象
location对象是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。可以通过window.location或者document.location进行访问，两个指向的是同一个对象。
作用：
1.保存当前文档的信息
2.将URL解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。
方法
- assign(url)：触发窗口加载并显示指定的URL的内容。
// 三者的作用效果相同
document.location.assign(url)
location.href = url;
window.location = url;
- replace(url)：以给定的URL来替换当前的资源
assign() VS replace()
assign()使用该方法，会将当前页面保存到会话历史中（session history）中，用户能够点击回退按钮
replace()使用该方法，不会将当前页面保存到会话历史中，用户不能点击回退按钮。
- reload(url)：方法用来刷新当前页面
参数：true-表示从服务器加载页面资源；flase或省略-表示从缓存中读取页面
属性
- hash：返回URL中的hash（以#开头），如果不包含散列，则返回空字符串。
【#的作用：代表网页中的一个位置，即可以认为是页面内的跳转】 - host：返回服务器名称和端口号（使用默认的端口不会显示）
- hostname：值返回服务器名称
- href：返回当前加载页面的完整的URL。====location.toString()
- pathname：返回url中的目录和文件名
- port：返回URL中的指定的端口号。使用默认的端口号的时候，返回空字符串
- protocol：返回页面使用的协议：常用的有http（默认的端口是80）或https（默认端口是443）。
- search：返回URL中的查询字符串（?开头）
navigator对象
表示用户代理的状态和标识。
属性
appCodeName：返回当前浏览器的内部“开发代号”名称
appName：返回浏览器官方名称。大部分是NetSpace
appVersion：返回浏览器的版本。
connection：返回浏览器联网状态
language： 返回用户的首先语言
languages：返回用户已知语言的String数组。
genlocation：返回设备的地理位置信息。Genlocation对象有获取当前位置信息、监听位置信息改变等方法。需要设备开始定位，否则即使统一获取也会发生错误。
//获取位置信息，需要用户打开位置定位和同意获取当前位置
navigator.geolocation.getCurrentPosition(success, error, options)
success：表示成功的函数
error：表示失败的函数
options：表示其他选项
history对象
保存着用户上网的历史记录，从窗口被打开的那一刻算起。
属性
- length：返回一个整数，表示会话历史中元素的数目。
- scrollRestoration：允许Web应用程序在历史导航上显示地设置默认滚动恢复行为。auto或manual
- state：表示历史堆栈顶部的状态值。
方法
- back()：上一页。=== history.go(-1)
- forward()：下一页。=== history.go(1)
- go()：通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面
