BOM
浏览器对象模型（Browser Object Model (BOM)）
关于浏览器的一些知识
- Chrome(谷歌浏览器) ：WebKit内核 -webkit-
- Safari(苹果浏览器) ：WebKit内核 -webkit-
- Firefox(火狐浏览器) ：Gecko内核 -moz-
- IE(IE浏览器) ： Trident内核 -ms-
- Opera(欧朋浏览器) ：Presto内核 -o-
1. 弹出方法
- alert 警告框（window.alert() 方法可以不带 window 前缀来写。）
- confirm 确认框（window.confirm() 方法可以不带 window 前缀来编写。）
JavaScript 确认框
- prompt 提示框（输入弹出）
JavaScript Prompt
2. Window 对象
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至（HTML DOM 的）document 对象也是 window 对象属性：
window.document.getElementById("header");
等同于：
document.getElementById("header");
窗口尺寸
两个属性可用用于确定浏览器窗口的尺寸。
这两个属性都以像素返回尺寸：
window.innerHeight - 浏览器窗口的内高度（以像素计）
window.innerWidth - 浏览器窗口的内宽度（以像素计）
浏览器窗口（浏览器视口）不包括工具栏和滚动条。
对于 Internet Explorer 8, 7, 6, 5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或
document.body.clientHeight
document.body.clientWidth
例如：显示浏览器窗口的高度和宽度：（不包括工具栏和滚动条）
其他窗口方法
一些其他方法：
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口
3. Window Screen屏幕对象
window.screen 对象不带 window 前缀也可以写：
属性：
screen.width属性返回以像素计的访问者屏幕宽度。
screen.height属性返回以像素计的访问者屏幕的高度。
screen.availWidth----可用宽，属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条、底部栏之类的界面特征。
screen.availHeight----可用高，属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。
screen.colorDepth
screen.pixelDepth
4. Window Location
window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。
window.location 对象可不带 window 前缀书写。
一些例子：
地址栏对象
window.location.href 返回当前页面的 href 地址(URL)
reload() 刷新
window.location.assign 加载新文档，跳转 有记录
replace() 替换
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
5. Window History
对象包含浏览器历史。
window.history 对象可不带 window 书写。
为了保护用户的隐私，JavaScript 访问此对象存在限制。
一些方法：
history.back() ----等同于在浏览器点击后退按钮
history.forward() ----- 等同于在浏览器中点击前进按钮
Window History Back
history.back() 方法加载历史列表中前一个 URL。
go(2)-------前进两步
go(-3)-------后退三步
length -------历史记录的长度
这等同于在浏览器中点击后退按钮。
6. Window Navigator
window.navigator 对象包含有关访问者的信息。
window.navigator 对象可以不带 window 前缀来写。
一些例子：
navigator.appName 属性返回浏览器的应用程序名称
navigator.appCodeName 属性返回浏览器的应用程序代码名称：
navigator.platform 属性返回有关浏览器的版本信息：
userAgent 浏览器头信息（检测浏览器的类型和型号）
7. Timing 事件
JavaScript 可以在时间间隔内执行。
这就是所谓的定时事件（ Timing Events）。
- setTimeout(function, milliseconds)在等待指定的毫秒数后执行函数。
- setInterval(function, milliseconds)等同于 setTimeout()，但持续重复执行该函数。
- setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。
window 对象允许以指定的时间间隔执行代码。
这些时间间隔称为定时事件。
通过 JavaScript 使用的有两个关键的方法：
a. 间隔调用setInterval() 方法
setInterval() 方法
setInterval() 方法在每个给定的时间间隔重复给定的函数。
window.setInterval(function, milliseconds);
window.setInterval() 方法可以不带 window 前缀来写。
第一个参数是要执行的函数。
第二个参数每个执行之间的时间间隔的长度。
本例每秒执行一次函数 "myTimer"（就像数字手表）。
实例
显示当前时间：
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
b. 清除间隔调用clearInterval()
clearTimeout() 方法停止执行 setTimeout() 中规定的函数。
window.clearTimeout(timeoutVariable)
window.clearTimeout() 方法可以不带 window 前缀来写。
clearTimeout() 使用从 setTimeout() 返回的变量：
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
实例
类似上例，但是添加了“停止”按钮：
c. 延迟调动setTimeout() 方法
window.setTimeout(function, milliseconds);
window.setTimeout() 方法可以不带 window 前缀来编写。
第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。
单击按钮。等待 3 秒，然后页面会提示 "Hello"：
8. Cookie 让您在网页中存储用户信息。
什么是 cookie？
Cookie 是在您的计算机上存储在小的文本文件中的数据。
当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。
Cookie 是为了解决“如何记住用户信息”而发明的：
当用户访问网页时，他的名字可以存储在 cookie 中。
下次用户访问该页面时，cookie 会“记住”他的名字。
Cookie 保存在名称值对中，如：
username = Bill Gates
当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。
如果浏览器已关闭本地 cookie 支持，则以下实例均无法工作。
通过 JavaScript 创建 cookie
JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。
通过 JavaScript，可以这样创建 cookie：
document.cookie = "username=Bill Gates";
您还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：
document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";
通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
通过 JavaScript 读取 cookie
通过 JavaScript，可以这样读取 cookie：
var x = document.cookie;
document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;
通过 JavaScript 改变 cookie
通过使用 JavaScript，你可以像你创建 cookie 一样改变它：
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
旧 cookie 被覆盖。
通过 JavaScript 删除 cookie
删除 cookie 非常简单。
删除 cookie 时不必指定 cookie 值：
直接把 expires 参数设置为过去的日期即可：
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
您应该定义 cookie 路径以确保删除正确的 cookie。
如果你不指定路径，一些浏览器不会让你删除 cookie。
Cookie 字符串
document.cookie 属性看起来像一个正常的文本字符串。但它不是。
即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对。
如果设置了新 cookie，则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie，所以如果你读取 document.cookie，你得到的东西会像这样：
cookie1 = value; cookie2 = value;
显示所有 cookie 创建 cookie 1 创建 cookie 2 删除 cookie 1 删除 cookie 2
如果你想找到一个指定 cookie 的值，你必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值。
JavaScript Cookie 实例
在下面的示例中，我们将创建一个 cookie 来存储访问者的名称。
访客第一次到达网页时，会要求他填写姓名。然后将该名称存储在 cookie 中。
下次访客到达同一页时，他将收到一条欢迎消息。
例如，我们将创建 3 个JavaScript函数：
设置 cookie 值的函数
获取 cookie 值的函数
检查 cookie 值的函数
设置 cookie 的函数
首先，我们创建一个函数，将访问者的名字存储在 cookie 变量中：
实例
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays2460601000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
例子解释：
上面这个函数的的参数是：cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 过期的天数（exdays）。
通过把 cookie 名称、cookie 值和过期字符串相加，该函数就设置了 cookie。
获取 cookie 的函数
然后，我们创建一个函数返回指定 cookie 的值：
实例
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
函数解释：
把 cookie 作为参数（cname）。
创建变量（name）与要搜索的文本（CNAME”=”）。
解码 cookie 字符串，处理带有特殊字符的 cookie，例如 “$”。
用分号把 document.cookie 拆分到名为 ca（decodedCookie.split(';')）的数组中。
遍历 ca 数组（i = 0; i < ca.length; i++），然后读出每个值 c = ca[i]。
如果找到 cookie（c.indexOf(name) == 0），则返回该 cookie 的值（c.substring(name.length, c.length）。
如果未找到 cookie，则返回 ""。
检测 cookie 的函数
最后，我们创建检查 cookie 是否设置的函数。
如果已设置 cookie，将显示一个问候。
如果未设置 cookie，会显示一个提示框，询问用户的名字，并存储用户名 cookie 365 天，通过调用 setCookie 函数：
实例
function checkCookie() {
var username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
现在组合起来
实例
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
9. marquee
marquee 元素（）可以 用来插入一段滚动的文字，实现类似走马灯的动效。但这个标签已经过时（MDN文档已经不建议使用）
marquee的属性
behavior： 设置文本如何滚动。属性值有3种：
scroll - 循环滚动。默认值。
slide - 滚动一次。
alternate - 两端来回滚动。
direction： 设置文本滚动的方向。属性值有4种：
left - 从右向左。默认值。
right - 从左向右。
up - 向上。
down - 向下。
loop： 设置滚动的次数。默认值-1，无限次循环。
scrollamount： 设置每次滚动时移动的长度（以像素为单位），也就是滚动速度。默认值为6 。
值越大，滚动速度越快，一般5-10比较适合查看消息。
scrolldelay： 设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。
值越大，滚动速度越慢，通常不设置。