JavaScript基础系列8---BOM操作 JavaScript

一、BOM概述

BOM: Browser Object Model 浏览器对象模型

1.1 什么是BOM

浏览器对象模型(BOM)是JavaScript的组成之一，他提供了独立与内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。
ECMAScript是 JavaScript的核心，但如果要在 Web中使用 JavaScript，那么 BOM（浏览器对象模
型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任
何网页内容无关。

1.2 BOM的作用

将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的工作量，提供设计Web页面的能力.BOM是一个分层结构。

二、BOM核心—window对象 2.1 window对象

BOM 的核心对象是 window ，它表示浏览器的一个实例。在浏览器中， window 对象有双重角色，
它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。
通过window可以操作整个浏览器。
BOM图谱：

文章图片

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

2.1.1 全局作用域

? 由于 window 对象同时扮演着 ECMAScript中 Global 对象的角色，因此所有在全局作用域中声明
的变量、函数都会变成 window 对象的属性和方法。
注意：有三种获取全局变量的方式。

2.3 history对象(了解)

History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

2.3.1 常用属性

属性	描述
length	返回浏览器历史列表中的 URL 数量。

2.3.2 常用方法

方法	描述
back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	加载 history 列表中的某个具体页面。

2.4 navigator对象(了解)

Navigator 对象包含有关浏览器的信息。
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。

属性	说明
appCodeName	浏览器代码名的字符串表示
appName	官方浏览器名的字符串表示
appVersion	浏览器版本信息的字符串表示
systemLanguage	操作系统的语音
language	浏览器的主语言
onLine	是否联了因特网
cookieEnabled	如果启用cookie返回true，否则返回false
platform	浏览器所在计算机平台的字符串表示
plugins	安装在浏览器中的插件数组
userAgent	用户代理头的字符串表示

"text/javascript"> document.write("appCodeName: " + navigator.appCodeName + " "); document.write("appName: " + navigator.appName + " "); document.write("appVersion: " + navigator.appVersion + " "); document.write("systemLanguage : " + navigator.systemLanguage + " "); document.write("language: " + navigator.language+ " "); document.write("onLine: " + navigator.onLine+ " "); document.write("cookieEnabled : " + navigator.cookieEnabled+ " "); document.write("platform: " + navigator.platform + " "); document.write("userAgent: " + navigator.userAgent+ " "); document.write("plugins: " + navigator.plugins+ " ");

2.5 screen对象(了解)

screen对象：包含有关用户屏幕的信息
在JavaScript中用处不大，只是用来表面客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等，各浏览器的screen对象都包含不相同的属性，罗列一些共同的.

属性	说明
height	屏幕的像素高度
width	屏幕的像素宽度
colorDepth	用于表现颜色的位数
availWidth	屏幕的像素宽度减系统部件宽度之后的值(减去任务栏之后的宽度)
availHeight	部屏幕的像素高度减系统件的高度之后的值（减去任务栏之后的高度）

"text/javascript"> document.write("height : " + screen.height + " "); document.write("width : " + screen.width + " "); document.write("colorDepth : " + screen.colorDepth + " "); document.write("availWidth : " + screen.availWidth + " "); document.write("availHeight " + screen.availHeight + " ");

三、window中常用事件 3.1 onload—加载事件

当整个页面加载完成的时会触发该事件。
语法：window.onload = function(){} 或者 window.onload = 方法名
注意：一般把事件注册的代码放在head中。

"text/javascript"> window.onload = function () { alert("页面加载完毕"); }

3.2 onscroll—滚动事件

当窗口发生滚动会触发该事件
语法：window.onscroll = function(){} 或者 window.onscroll = 方法==名==;

"text/javascript"> window.onscroll = function() { console.log("开始滚动...") //获取滚动距离。 //document.body.scrollTop: 只支持chorme，火狐和ie不支持， document.documentElement.scrollTop ie和火狐支持 chrome不支持 //这样就可以跨浏览器了。 console.log(document.documentElement.scrollTop || document.body.scrollTop); }

四、使用JavaScript操作cookie 4.1 什么是cookie ? Cookie，有时也用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。
? Cookie 是在 HTTP 协议下，服务器或脚本可以维护客户工作站上信息的一种方式。Cookie 是由 Web 服务器保存在用户浏览器（客户端）上的小文本文件，它可以包含有关用户的信息。无论何时用户链接到服务器，Web 站点都可以访问 Cookie 信息。
? cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。而且不同的浏览器之间cookie不能共享。

==cookie的本质就是用键值对存储在用户本地的一些数据，这些数据不同的网站，不同的浏览器是不能共享的==

4.2 cookie的用处 ? cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于以下几种场合。

保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个月、一年等。
跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便。
定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。
创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样，在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。

4.3 cookie的缺陷

cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

4.4 cookie的构成

cookie 由浏览器保存的以下几块信息构成。

名称：一个唯一确定 cookie 的名称。cookie 名称是不区分大小写的，所以 myCookie 和 MyCookie被认为是同一个 cookie。然而，实践中最好将 cookie 名称看作是区分大小写的，因为某些服务器会这样处理 cookie。cookie 的名称必须是经过 URL 编码的。
值：储存在 cookie 中的字符串值。值必须被 URL 编码。
域：cookie 对于哪个域是有效的。所有向该域发送的请求中都会包含这个 cookie 信息。这个值可以包含子域（subdomain，如 www.wrox.com ），也可以不包含它（如. wrox.com ，则对于wrox.com的所有子域都有效）。如果没有明确设定，那么这个域会被认作来自设置 cookie 的那个域。
路径：对于指定域中的那个路径，应该向服务器发送 cookie。例如，你可以指定 cookie 只有从
http://www.wrox.com/books/ 中才能访问，那么 http://www.wrox.com 的页面就不会发送 cookie 信息，即使请求都是来自同一个域的。
失效时间：表示 cookie 何时应该被删除的时间戳（也就是，何时应该停止向服务器发送这个cookie）。默认情况下，浏览器会话结束时即将所有 cookie 删除；不过也可以自己设置删除时间。这个值是个 GMT 格式的日期（Wdy, DD-Mon-YYYY HH:MM:SS GMT），用于指定应该删除cookie 的准确时间。因此，cookie 可在浏览器关闭后依然保存在用户的机器上。如果你设置的失效日期是个以前的时间，则 cookie 会被立刻删除。
安全标志：指定后，cookie 只有在使用 SSL 连接的时候才发送到服务器。例如，cookie 信息只
能发送给 https://www.wrox.com ，而 http://www.wrox.com 的请求则不能发送 cookie。

4.5 存储cookie

有2种途径去存储cookie.

服务器端通过http响应头Set-Cookie来通知浏览器存储cookie。例如：(这个暂时不研究，仅了解)。浏览器收到这个头响应头之后会自动存储这个cookie

HTTP/1.1 200 OK Content-type: text/html Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com Other-header: other-header-value

客户端(浏览器端)通过JavaScript去存储cookie(重点研究)。Javascript操作cookie需要通过document的cookie属性来完成。

//存储cookie，并设置超时时间。domaim和secure使用默认的情况 "text/javascript"> /* 在存储cookie的时候，name和value是必须的参数1：cookie的name 参数2：cookie的值参数3：存储时间单位天只要name不同，就可以存储多个cookie */ function saveCookie(name, value, expiredays){var date = new Date(); alert(date.getDate()) date.setDate(date.getDate() + expiredays); alert(date.toGMTString()) //cookie的内容其实就是一串纯文本。对字符最好进行url编码，否则如果有中文就会出现问题。 var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value) + "; expires=" + date.toGMTString(); document.cookie = cookieText; } saveCookie("name", "张三", 1);

4.5 读取cookie

读取cookie仍然是通过document的cookie属性，不过字符串需要我们自己解析。
只能说，JavaScript的这个API设计的真烂

"text/javascript"> function getCookie (name) { //先拿到cookie字符串 var cookieText = document.cookie; //获取要查找的 cookie的 name所在的下标 var index = cookieText.indexOf(name + "="); // name=李四; ... //如果下标不为-1，证明找到了 if(index != -1){ var endIndex = cookieText.indexOf("; ", index); //查找指定的cookie的结束为止 // 如果等于-1，证明没有找到; 号，则把末尾设置为字符串的末尾 endIndex = (endIndex == -1 ? cookieText.length : endIndex); //把想要的cookie的value截取出来 var value = https://www.it610.com/article/cookieText.substring(index + (name +"=").length, endIndex); //因为存储的时候使用了url编码，所以查到的东西需要url解码 return decodeURIComponent(value); } } var value = https://www.it610.com/article/getCookie("name"); if(value){ alert("欢迎你：" + value); }

4.6 删除cookie

删除cookie的原理非常简单，只要把超时时间设置为0，就会立即删除了。

function saveCookie(name, value, expiredays){var date = new Date(); alert(date.getDate()) date.setDate(date.getDate() + expiredays); alert(date.toGMTString()) //cookie的内容其实就是一串纯文本。对字符最好进行url编码，否则如果有中文会出现问题。 var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value) + "; expires=" + date.toGMTString(); document.cookie = cookieText; } saveCookie("name", "", 0);

【JavaScript基础系列8---BOM操作】?