BOM（浏览器对象模型）

window 对象是 BOM 的核心，用来表示当前浏览器窗口，其中提供了一系列用来操作或访问浏览器的方法和属性。另外，JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象，甚至我们前面介绍的 document 对象也属于 window 对象。

window 对象中的属性

属性	描述
closed	返回窗口是否已被关闭
defaultStatus	设置或返回窗口状态栏中的默认文本
document	对 Document 对象的只读引用
frames	返回窗口中所有已经命名的框架集合，集合由 Window 对象组成，每个 Window 对象在窗口中含有一个或标签</td>
history	对 History 对象的只读引用，该对象中包含了用户在浏览器中访问过的 URL
innerHeight	返回浏览器窗口的高度，不包含工具栏与滚动条
innerWidth	返回浏览器窗口的宽度，不包含工具栏与滚动条
localStorage	在浏览器中以键值对的形式保存某些数据，保存的数据没有过期时间，会永久保存在浏览器中，直至手动删除
length	返回当前窗口中框架的数量</td>
location	引用窗口或框架的 Location 对象，该对象中包含当前 URL 的有关信息
name	设置或返回窗口的名称
navigator	对 Navigator 对象的只读引用，该对象中包含当前浏览器的有关信息
opener	返回对创建此窗口的 window 对象的引用
outerHeight	返回浏览器窗口的完整高度，包含工具栏与滚动条
outerWidth	返回浏览器窗口的完整宽度，包含工具栏与滚动条
pageXOffset	设置或返回当前页面相对于浏览器窗口左上角沿水平方向滚动的距离
pageYOffset	设置或返回当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离
parent	返回父窗口
screen	对 Screen 对象的只读引用，该对象中包含计算机屏幕的相关信息
screenLeft	返回浏览器窗口相对于计算机屏幕的 X 坐标
screenTop	返回浏览器窗口相对于计算机屏幕的 Y 坐标
screenX	返回浏览器窗口相对于计算机屏幕的 X 坐标
sessionStorage	在浏览器中以键值对的形式存储一些数据，数据会在关闭浏览器窗口或标签页之后删除
screenY	返回浏览器窗口相对于计算机屏幕的 Y 坐标
self	返回对 window 对象的引用
status	设置窗口状态栏的文本
top	返回最顶层的父窗口

window 对象中的方法

方法	描述
alert()	在浏览器窗口中弹出一个提示框，提示框中有一个确认按钮
atob()	解码一个 base-64 编码的字符串
btoa()	创建一个 base-64 编码的字符串
blur()	把键盘焦点从顶层窗口移开
clearInterval()	取消由 setInterval() 方法设置的定时器
clearTimeout()	取消由 setTimeout() 方法设置的定时器
close()	关闭某个浏览器窗口
confirm()	在浏览器中弹出一个对话框，对话框带有一个确认按钮和一个取消按钮
createPopup()	创建一个弹出窗口，注意：只有 IE 浏览器支持该方法
focus()	使一个窗口获得焦点
getSelection()	返回一个 Selection 对象，对象中包含用户选中的文本或光标当前的位置
getComputedStyle()	获取指定元素的 CSS 样式
matchMedia()	返回一个 MediaQueryList 对象，表示指定的媒体查询解析后的结果
moveBy()	将浏览器窗口移动指定的像素
moveTo()	将浏览器窗口移动到一个指定的坐标
open()	打开一个新的浏览器窗口或查找一个已命名的窗口
print()	打印当前窗口的内容
prompt()	显示一个可供用户输入的对话框
resizeBy()	按照指定的像素调整窗口的大小，即将窗口的尺寸增加或减少指定的像素
resizeTo()	将窗口的大小调整到指定的宽度和高度
scroll()	已废弃。您可以使用 scrollTo() 方法来替代
scrollBy()	将窗口的内容滚动指定的像素
scrollTo()	将窗口的内容滚动到指定的坐标
setInterval()	创建一个定时器，按照指定的时长（以毫秒计）来不断调用指定的函数或表达式
setTimeout()	创建一个定时器，在经过指定的时长（以毫秒计）后调用指定函数或表达式，只执行一次
stop()	停止页面载入
postMessage()	安全地实现跨源通信

Navigator对象：获取浏览器信息

JavaScript navigator 对象中存储了与浏览器相关的信息，例如名称、版本等，我们可以通过 window 对象的 navigator 属性（即 window.navigator）来引用 navigator 对象，并通过它来获取浏览器的基本信息。

navigator 对象中的属性

属性	描述
appCodeName	返回当前浏览器的内部名称（开发代号）
appName	返回浏览器的官方名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回浏览器是否启用 cookie，启用返回 true，禁用返回 false
onLine	返回浏览器是否联网，联网则返回 true，断网则返回 false
platform	返回浏览器运行的操作系统平台
userAgent	返回浏览器的厂商和版本信息，即浏览器运行的操作系统、浏览器的版本、名称

navigator 对象中的方法

方法	描述
javaEnabled()	返回浏览器是否支持运行 Java Applet 小程序，支持则返回 true，不支持则返回 false
sendBeacon()	向浏览器异步传输少量数据

判断浏览器是Android还是ios平台

var u = navigator.userAgent;
 isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

一个比较全面的浏览器检查函数，提供更多的检查内容，你可以检查是否是移动端（Mobile）、ipad、iphone、微信、QQ等

var browser={
 versions:function(){
  var u = navigator.userAgent, app = navigator.appVersion;
  return {
   trident: u.indexOf('Trident') > -1, //IE内核
   presto: u.indexOf('Presto') > -1, //opera内核
   webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
   gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
   mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
   ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
   android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
   iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
   iPad: u.indexOf('iPad') > -1, //是否iPad
   webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
   weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
   qq: u.match(/\sQQ/i) == " qq" //是否QQ
  };
 }(),
 language:(navigator.browserLanguage || navigator.language).toLowerCase()
}

Screen对象：获取屏幕信息

JavaScript screen 对象中包含了有关计算机屏幕的信息，例如分辨率、宽度、高度等，我们可以通过 window 对象的 screen 属性来获取它。

screen 对象中的属性

下表中列举了 JavaScript screen 对象中常用的属性及其描述：

属性	说明
availTop	返回屏幕上方边界的第一个像素点（大多数情况下返回 0）
availLeft	返回屏幕左边边界的第一个像素点（大多数情况下返回 0）
availHeight	返回屏幕的高度（不包括 Windows 任务栏）
availWidth	返回屏幕的宽度（不包括 Windows 任务栏）
colorDepth	返回屏幕的颜色深度（color depth），根据 CSSOM（CSS 对象模型）视图，为兼容起见，该值总为 24。
height	返回屏幕的完整高度
pixelDepth	返回屏幕的位深度/色彩深度（bit depth），根据 CSSOM（CSS 对象模型）视图，为兼容起见，该值总为 24
width	返回屏幕的完整宽度
orientation	返回当前屏幕的方向

location 对象中的属性

属性	描述
hash	返回一个 URL 中锚的部分，例如：http://c.biancheng.net#js 中的 #js。
host	返回一个 URL 的主机名和端口号，例如 http://c.biancheng.net:8080。
hostname	返回一个 URL 的主机名，例如 http://c.biancheng.net。
href	返回一个完整的 URL，例如 http://c.biancheng.net/javascript/location-object.html。
pathname	返回一个 URL 中的路径部分，开头有个`/`。
port	返回一个 URL 中的端口号，如果 URL 中不包含明确的端口号，则返回一个空字符串`' '`。
protocol	返回一个 URL 协议，即 URL 中冒号`:`及其之前的部分，例如 http: 和 https:。
search	返回一个 URL 中的查询部分，即 URL 中`?`及其之后的一系列查询参数。

location 对象中的方法

方法	说明
assign()	加载指定的 URL，即载入指定的文档。
reload()	重新加载当前 URL。刷新当前网页。
replace()	用指定 URL 替换当前的文档，与 assign() 方法不同的是，使用 replace() 替换的新页面不会保存在浏览历史中，用户不能使用后退来返回该页面。
toString()	与 href 属性的效果相同，以字符串的形式返回当前完整的 URL。

History对象：获取浏览历史

JavaScript history 对象中包含了用户在浏览器中访问过的历史记录，其中包括通过浏览器浏览过的页面，以及当前页面中通过<iframe>加载的页面。我们可以通过 window 对象中的 history 属性来获取 history 对象，由于 window 对象是一个全局对象，因此在使用window.history时可以省略 window 前缀，例如window.history.go()可以简写为history.go()。

history 对象中的属性

属性	说明
length	返回浏览历史的数目，包含当前已经加载的页面。
scrollRestoration	利用浏览器特性，使我们在返回上一页或者下一页时，将页面滚动到之前浏览的位置，该属性有两个值，分别是 auto（表示滚动）与 manual（表示不滚动）。
state	返回浏览器在当前 URL 下的状态信息，如果没有调用过 pushState() 或 replaceState() 方法，则返回默认值 null。

示例代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript</title></head><body>    <script type="text/javascript">        document.write(history.length + "<br>");        document.write(history.scrollRestoration + "<br>");        document.write(history.state + "<br>");    </script></body></html>

history 对象中的方法

方法	说明
back()	参照当前页面，返回历史记录中的上一条记录（即返回上一页），您也可以通过点击浏览器工具栏中的`←`按钮来实现同样的效果。
forward()	参照当前页面，前往历史记录中的下一条记录（即前进到下一页），您也可以通过点击浏览器工具栏中的`→`按钮来实现同样的效果。
go()	参照当前页面，根据给定参数，打开指定的历史记录，例如 -1 表示返回上一页，1 表示返回下一页。
pushState()	向浏览器的历史记录中插入一条新的历史记录。
replaceState()	使用指定的数据、名称和 URL 来替换当前历史记录。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button onclick="myBack()">back()</button>
    <button onclick="myForward()">forward()</button>
    <button onclick="myGo()">go()</button>
    <button onclick="myPushState()">pushState()</button>
    <button onclick="myReplaceState()">replaceState()</button>
    <script type="text/javascript">
        function myBack(){
            history.back();
        }
        function myForward(){
            history.forward();
        }
        function myGo(){
            var num = prompt('请输入一个整数', '1');
            history.go(num);
        }
        function myPushState(){
            var state = { 'page_id': 1, 'user_id': 5 }
            var title = 'JavaScript'
            var url = 'index.html'
            history.pushState(state, title, url)
            console.log(history.state);
        }
        function myReplaceState(){
            var state = { 'page_id': 3, 'user_id': 5 }
            var title = 'history'
            var url = 'index.html'
            history.replaceState(state, title, url)
            console.log(history.state);
        }
    </script>
</body>
</html>

try catch用法：异常处理

根据类型的不同，JavaScript 编程中的错误大致可以分为以下三种类型：

语法错误：也称为解析错误，一般是因为代码存在某些语法错误引起的。当发生语法错误时，代码会停止运行；
运行时错误：也称为异常，发生在程序运行期间，例如调用未定义的方法、读取不存在的文件等，发生运行时错误也会终止代码运行；
逻辑错误：是最难发现的一种错误，逻辑错误通常是因为代码存在瑕疵，导致程序输出意外的结果或终止运行。

错误和异常的区别

错误（Error）是在代码运行之前出现的，在运行 JavaScript 程序之前，JavaScript 解释器会先对代码进行检查，如果代码有误，例如某些语法错误，浏览器就会报出相应的错误，只有将错误修正后，代码才能运行。

异常（Exception）是在代码运行中出现的，例如调用某个未定义的方法、读取不存在的文件等。在出现异常之前，代码的运行并不受影响，当出现异常时，会在浏览器控制台输出错误信息，并终止程序的运行。

JS 异常处理

异常处理的目的是捕捉产生异常的代码，使整个程序不会因为异常而终止运行。在 JavaScript 中，您可以使用 try catch 语句来捕获异常，并做出相应处理，语法格式如下：

try {
    // 可能会发生异常的代码
} catch(error) {
    // 发生异常时要执行的操作
}

我们可以将任何可能发生异常的代码放到 try 语句块中，并在 catch 语句块中定义处理异常的方法。如果 try 语句块中的代码发生错误，代码会立即从 try 语句块跳转到 catch 语句块中，如果 try 语句块中代码没有发生错误，就会忽略 catch 语句块中的代码。当 try 语句块中的代码出现异常时，会创建并抛出一个 Error 对象（例如上面代码内catch(error)中的 error），对象中包含两个属性，如下所示：

name：错误的类型；
message：对错误的描述信息。

JS try catch finally 语句

在 try catch 语句的后面，还可以添加一个 finally 语句块，无论 try 语句块中的代码是否发生错误，finally 语句中的代码都会执行。

JS 抛出错误

JavaScript 中，不仅可以依赖 JavaScript 解析器来自动抛出错误，还可以手动抛出错误。抛出错误需要使用 throw 语句，语法格式如下：

throw expression;

其中 expression 为要抛出的异常，可以是任何类型的值，例如对象、字符串、数组等，推荐使用对象类型。

JavaScript 中内置了一个 Error() 函数来创建要抛出的错误对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        function squareRoot(number) {
            // 如果数字为负数，则抛出错误
            if(number < 0) {
                throw new Error("抱歉，无法计算负数的平方根！");
            } else {
                console.log(Math.sqrt(number));
            }
        }
        try {
            squareRoot(16);
            squareRoot(625);
            squareRoot(-9);
            squareRoot(100);
            // 若抛出错误，则不会执行下面的行
            console.log("所有函数都执行成功。");
        } catch(e) {
            // 处理错误
            console.log(e.message);
        }
    </script>
</body>
</html>

JS 错误类型

前面我们提到，当 try 语句块中的代码出现错误时，会创建并抛出一个 Error 对象，对象中包含错误类型和错误描述两个属性。

发生不同的错误，会返回不同的错误类型，JavaScript 中支持以下几种错误类型：

错误类型	说明
EvalError	使用 eval() 函数时发出错误，会抛出该错误
InternalError	由 JavaScript 引擎内部错误导致的异常，会抛出该错误
RangeError	范围错误，当使用了超出允许范围的数值时，会抛出该错误
SyntaxError	语法错误，当代码中存在任何语法错误时，会抛出该错误
TypeError	类型错误，当使用的值不是预期类型时，会抛出该错误，例如对数字调用字符串方法，对字符串调用数组方法等
URIError	URI 错误，当使用 URI 相关函数但传入 URI 参数时，会抛出该错误
ReferenceError	参数错误，当尝试使用未定义的变量、函数、对象时，会抛出该错误

Cookie 代表一种小型的文本文件，可以让开发人员在用户计算机上存储少量的数据（大约 4kb），来记录用户的某些信息，例如用户身份、喜好等，当用户下次访问网站时，网站可以通过检索这些信息来为用户展示个性化页面。另外，一些电商网站的购物车也用到了 Cookie 技术。

Cookie 最初是为 PHP、ASP 等服务器端脚本语言设计的，但是我们也可以使用 JavaScript 来操作，只是操作起来比较复杂，下面就来简单介绍一下如何使用 JavaScript 来操作 Cookie。

在 JavaScript 中，您可以通过

document.cookie

属性来创建、读取、修改和删除 Cookie 信息。

创建（设置）新的 Cookie 信息，需要以

name=value

形式的字符串来定义新的 Cookie 信息，如下例所示：

document.cookie = "url=http://c.biancheng.net/";

Cookie 数据中不能包含分号、逗号或空格，因此在将数据存储到 Cookie 之前，可以使用 JavaScript 内置的 encodeURIComponent() 函数对数据进行编码。在读取 Cookie 时，使用对应的 decodeURIComponent() 函数来解析 Cookie 数据，如下例所示：

document.cookie = "url=" + encodeURIComponent("http://c.biancheng.net/");

注意：运行上面的代码，您会发现 Cookie 并没有创建，这是因为 Cookie 是用来与服务器进行交互的，所以要成功创建 Cookie 需要借助服务器环境。

Cookie 并不会一直存在，默认情况下，Cookie 的生命周期就是浏览器的会话周期，即用户关闭浏览器后，Cookie 就会失效。如果想要延长 Cookie 的生命周期，您可以使用 max-age 属性来指定 Cookie 可以存在的时间（单位为秒），默认为 -1，即关闭浏览器后失效。

如果将 max-age 设置为一个负数，则表示该 Cookie 为临时 Cookie，关闭浏览器后就会失效。如果设置为 0，则表示删除该 Cookie。若要将 Cookie 的生命周期设置为 30 天的话，则可以像下面这样：

document.cookie = "url=http://c.biancheng.net/; max-age=" + 30*24*60*60;

此外，您也可以使用 expires 属性来指定 Cookie 失效的具体日期（GMT/UTC 格式），如下所示：

document.cookie = "url=http://c.biancheng.net/; expires=Sun, 31 Dec 2017 12:00:00 UTC;";

提示：通过为 Cookie 设置生命周期，不仅可以延长 Cookie 存在的时间，还可以让 Cookie 提前失效。

读取（获取） Cookie 同样使用

document.cookie

即可，该属性会返回一个字符串，字符串中包含除 max-age、expires、path 和 domain 等属性之外的所有 Cookie 信息，例如

url=http://c.biancheng.net/; course=JavaScript

。为了获取单个 Cookie 的值，我们可以通过 split() 函数将包含 Cookie 信息的字符串拆分为数组，然后再获取某个 Cookie 的值，示例代码如下：

修改或更新 Cookie 值的唯一方法就是创建一个同名的 Cookie，来替换要修改的 Cookie。

删除 Cookie 与修改 Cookie 类似，只需要重新将 Cookie 的值设置为空，并将 expires 属性设置为一个过去的日期即可，

// 创建一个 Cookie
document.cookie = "url=http://c.biancheng.net/; path=/; max-age=" + 30*24*60*60;
// 删除这个 Cookie
document.cookie = "url=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

也可通过将 max-age 属性设置为 0 来删除 Cookie。

Cookie是保存在客户端磁盘上的，所以不宜占据太多磁盘空间。同时，Cookie是绑定在特定域名上的。当设定了一个Cookie之后，再给创建它的域名发一个请求时，还会包含该Cookie。所以对Cookie的限制是对每个域来说的。但各个浏览器也有不同：
IE6及以下每个域名最多包含20个Cookie；
IE7及以上每个域名最多50个Cookie；
Firefox每个域名最多50个Cookie；
Opera下每个域名最多30个Cookie；
Sarafi和Chrome对每个域的Cookie数目没有严格限制。

每个Cookie最大是4096B(加减一)。即对于大多数浏览器来说，Cookie大小是4096个字节，而对于少数浏览器，有的是4097B，而有的是4095B.因此为了浏览器兼容性，最好将Cookie大小限制在4095B之内。

本地存储的 localStorage 和 sessionStorage

localStorage 是只读的。数据存储也是跨浏览器会话。localStorage 类似于sessionStorage。区别在于，数据存储在 localStorage 是无期限的，而当页面会话结束——也就是说当页面被关闭时,数据存储在 sessionStorage 会被清除。

// 增加了一个 localStorage ‘myCat’ 数据项
localStorage.setItem('myCat', 'Tom');
// 读取 localStorage ‘myCat’ 数据项
let cat = localStorage.getItem('myCat');
// 移除 localStorage ‘myCat’ 数据项
localStorage.removeItem('myCat');
// 移除所有的 localStorage 数据项
localStorage.clear();

使用 localStorage.hasOwnProperty() 检查 localStorage 中存储的数据里是否保存某个值

hasOwnProperty() 方法检查对象自身属性中是否具有指定的属性，返回一个布尔值。换句话说就是检查 localStorage 中存储的数据里是否保存某个值。

0
8i98

js笔记07-BOM对象

BOM（浏览器对象模型）

window 对象中的属性

window 对象中的方法

Navigator对象：获取浏览器信息

navigator 对象中的属性

navigator 对象中的方法

判断浏览器是Android还是ios平台

一个比较全面的浏览器检查函数，提供更多的检查内容，你可以检查是否是移动端（Mobile）、ipad、iphone、微信、QQ等

Screen对象：获取屏幕信息

screen 对象中的属性

location 对象中的属性

location 对象中的属性

location 对象中的方法

History对象：获取浏览历史

history 对象中的属性

history 对象中的方法

try catch用法：异常处理

错误和异常的区别

JS 异常处理

JS try catch finally 语句

JS 抛出错误

JS 错误类型

本地存储的 localStorage 和 sessionStorage

使用 localStorage.hasOwnProperty() 检查 localStorage 中存储的数据里是否保存某个值

localStorage和sessionStorage的存储数据大小一般都是：5MB

0 8i98

js笔记07-BOM对象

BOM（浏览器对象模型）

window 对象中的属性

window 对象中的方法

Navigator对象：获取浏览器信息

navigator 对象中的属性

navigator 对象中的方法

判断浏览器是Android还是ios平台

一个比较全面的浏览器检查函数，提供更多的检查内容，你可以检查是否是移动端（Mobile）、ipad、iphone、微信、QQ等

Screen对象：获取屏幕信息

screen 对象中的属性

location 对象中的属性

location 对象中的属性

location 对象中的方法

History对象：获取浏览历史

history 对象中的属性

history 对象中的方法

try catch用法：异常处理

错误和异常的区别

JS 异常处理

JS try catch finally 语句

JS 抛出错误

JS 错误类型

cookie的设置、获取和删除

JS 设置 Cookie

JS 获取 Cookie

JS 修改或更新 Cookie 的值

JS 删除 Cookie

Cookie限制

本地存储的 localStorage 和 sessionStorage

使用 localStorage.hasOwnProperty() 检查 localStorage 中存储的数据里是否保存某个值

localStorage和sessionStorage的存储数据大小一般都是：5MB

0
8i98