JavaScript初学者整理（2）

BOM

页面交互过程

我们知道为了让网页能显示出来，首先我们得在浏览器中输入网址敲击回车，浏览器能自动帮我们渲染网页内容。和浏览器渲染有关的对象，我们叫做浏览器对象模型(Browser Object Model)BOM.
BOM是由一系列相关对象构成，每个对象都提供了很多方法和属性
但 BOM 缺乏标准，BOM 属于约定俗成，比如 Chrome 怎么实现，FireFox，IE 等等 就照抄一下。所以不同浏览器并不完全相同，在前端有一门高级技术叫做浏览器兼容处理，也就是处理这类问题，我们在之后会涉及到。
现在业界主要以Chrome为准(这也是我们希望大家用 Chrome 进行学习的原因)。在这里我们主要学习BOM一些共同的 对象和 API。

BOM最重要的5个对象：

1. window (窗口):window 是整个网页的框架，每个网页的内容都是装载在 window 里面
2. navigator (浏览器):navigator 里面存储浏览器相关信息
3. history (历史):我们知道每个网页可以前进后退history 便拿来存储整个网页栈的
4. screen (显示屏幕):screen 包含我们显示屏幕的信息这个是硬件信息
5. location (地址):location 包含当前访问的地址(网址)信息

• screen 是整个电脑 唯一的
• navigator 是 整个浏览器 唯一的，如果有多个浏览器就会有多个navigator
• window 是 每个网页 唯一的，每个网页都有一个独立的window
• history，location 是 每个网页的信息，当然也是网页唯一的

window

MDN

1. window 对象表示一个浏览器窗口或一个 frame 框架，它处于对象层次的最顶端，它提供了处理浏览器窗口的方法和属性。
2. window 对象是浏览器对象中的默认对象，所以可以隐式地引用 window 对象的属性和方法。在浏览器环境中，添加到 window 对象中的方法、属性等，其作用域都是全局的。

console.log('oageux');
window.console.log('oageux');//都是挂在window下面的

console.log(navigator);
console.log(window.navigator);

function hello() {}
console.log(hello);
console.log(window.hello);

location

MDN链接

属性	值	解释
href	https://github.com/	href是整个网页地址
hostname	github.com	hostname是网页域名
host	github.com	host是网页域名+端口信息，在这里端口默认80省略了，所有和hostname一样
protocol	https:	protocol代表协议信息
origin	https://github.com	origin页面来源的域名的标准形式
pathname	/	pathname包含URL的路径部分
search		search表示URL参数

History

MDN链接

在 history 中需要掌握两个方法， **back()**和 forward()，分别对应到浏览器左上角的返回和前进按钮。

如果我们在网页中点击某个链接，或者使用 window.location = xxx
跳转到 https://www.baidu.com,那 history 中存储为

// 会话记录
['https://www.youkeda.com', 'https://www.baidu.com'];

Navigator

Navigator 表示用户代理的状态和标识，也就是浏览器基本信息，在这里面我们需要了解一个属性 —userAgent，代表当前浏览器的用户代理。

console.log(navigator.userAgent);

screen

大家可以自行在MDN上查找