前端基础：JavaScript BOM对象
JavaScript BOM对象
JavaScript Window - 浏览器对象模型
浏览器对象模型(BOM)使JavaScript有能力与浏览器"对话"。
浏览器对象模型(BOM)
浏览器对象模型(Browser Object Model：BOM)尚无正式标准，由于现代浏览器已经几乎实现了JavaScript交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。
Window对象
所有浏览器都支持window对象，它表示浏览器窗口。所有JavaScript全局对象、函数以及变量均自动称为window对象的成员。全局变量是window对象的属性，全局函数是window对象的方法，甚至HTML DOM的document也是window对象的属性之一：
window.document.getElementById("header");
与此相同：
document.getElementById("header");
Window尺寸
有三种方法能够确定浏览器窗口的尺寸，对于IE、Chrome、FireFox、Opera语句Safari：
- window.innerHeight：浏览器窗口的内部高度(包括滚动条)
- window.innerWidth：浏览器窗口的内部宽度(包括滚动条)
对于IE8、7、6、5：
- document.documentElement.clientHeight
- document.documentElemetn.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
实用的JavaScript方案(涵盖所有浏览器)：
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
其他Window方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
JavaScript Window Screen
widow.screen对象包含有关用户屏幕的信息。
Window Screen
window.screen对象在编写时可以不使用window这个前缀，其属性有：
- screen.availWidth：可用的屏幕宽度
- screen.availHeight：可用的屏幕高度
Window Screen 可用宽度
screen.availWidth属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏：
<script>
document.write("可用宽度: " + screen.availWidth); // 返回屏幕可用宽度：1920
</script>
Window Screen 可用高度
scree.availHeight属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏：
<script>
document.write("可用高度: " + screen.availHeight); // 返回屏幕可用高度：1040
</script>
JavaScript Window Location
window.location对象用于获取当前页面的地址(URL)，并把浏览器重定向到新的页面。
Window Location
window.location对象在编写时可不使用window这个前缀，如下例子：
- location.hostname：返回web主机的域名；
- location.pathname：返回当前页面的路径和文件名；
- location.port：返回web主机的端口(80或443)；
- location.protocol：返回所使用web协议(http://或https😕/)；
Window Location Href
location.href属性返回当前页面的URL：
<script>
document.write(location.href); // 返回当前页面的整个URL：https://www.baidu.com/
</script>
Window Location Pathname
location.pathname属性返回URL的路径名：
<script>
document.write(location.pathname); // 返回当前URL的路径名：/
</script>
Window Location Assign
location.assign()方法加载新的文档：
<html>
<head>
<script>
function newDoc()
{
window.location.assign("http://www.w3cschool.cc"); // 加载一个新的文档
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>
JavaScript Window History
window.history对象包含浏览器的历史。
Window History
window.history对象在编写时可不使用window这个前缀，为了保护用户隐私，对JavaScript访问该对象的方法做出了限制：
- history.back()：与在浏览器中点击后退按钮相同；
- history.forward()：与在浏览器中点击向前按钮相同；
Window History Back
history.back()方法加载历史列表中的前一个URL，这与在浏览器中点击后退按钮是相同的：
<html>
<head>
<script>
function goBack()
{
window.history.back(); // 在页面上创建后退按钮
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>
Window History Forward
history.forward()方法加载历史列表中的下一个URL，这与在浏览器中点击前进按钮是相同的：
<html>
<head>
<script>
function goForward()
{
window.history.forward(); // 在页面中创建一个向前的按钮
}
</script>
</head>
<body>
<input type="button" value="Forward" onclick="goForward()">
</body>
</html>
JavaScript Window Navigator
window.navigator对象包含有关访问者浏览器的信息。
Window Navigator
window.navigator对象在编写时可不使用window这个前缀：
<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
警告
来自navigator对象的信息有误导性，不应该被用于检测浏览器版本，这是因为：
- navigator数据可以被浏览器使用者更改；
- 一些浏览器对测试站点会识别错误；
- 浏览器无法报告晚于浏览器发布的新操作系统；
浏览器检测
由于navigator可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。由于不同的浏览器支持不同的对象，我们可以使用对象来检测浏览器。例如：由于只有Opera支持属性"window.opera"，可以据此识别出Opera。
if (window.opera) {...some action...}
JavaScript 弹窗
可以在JavaScript中创建三种消息框：警告框、确认框、提示框。
警告框
警告框经常用于确保用户可以得到某些信息，当警告框出现后，用户需要点击确定按钮才能继续进行操作。其语法为：
window.alert("sometext");
window.alert()方法可以不带上window对象，直接使用alert()方法。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("你好，我是一个警告框！");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="显示警告框">
</body>
</html>
确认框
确认框通常用于验证是否接受用户操作，当确认框弹出时，用户可以点击"确认"或"取消"来确定用户操作。当用户点击"确认"，确认框返回true，如果点击"取消"，确认框返回false。其语法为：
window.confirm("sometext");
window.confirm()方法可以不带上window对象，直接使用confirm()方法。
var r=confirm("按下按钮");
if (r==true)
{
x="你按下了\"确定\"按钮!";
}
else
{
x="你按下了\"取消\"按钮!";
}
提示框
提示框经常用于提示用户在进入页面前输入某个值，当提示框出现后，用户需要输入某个值，然后点击确认或者取消按钮才能继续操作。如果用户点击确认，那么返回值为输入的值，如果用户点击取消，那么返回值为null。其语法为：
window.prompt("sometext", "defaultvalue");
window.prompt()方法可以不带上window对象，直接使用prompt()方法。
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!="")
{
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
换行
弹窗使用反斜杠+"n"(\n)来设置换行。
alert("hello\nhow are you?");
JavaScript 计时事件
JavaScript 计时事件
通过使用JavaScript，我们可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。在JavaScript中使用计时事件是很容易的，两个关键方法是：
- setInterval()：间隔指定的毫秒数不停地执行制定的代码；
- setTimeout()：在指定的毫秒数后执行制定的代码；
注意：setInterval()和setTimeout()是HTML DOM Window对象中的两个方法。
setInterval()方法
setInterval()间隔指定的毫秒数不停地执行指定的代码，其语法是：
window.setInterval("javascript function", milliseconds);
window.setInterval()方法可以不使用window前缀，直接使用函数setInterval()。setInterval()第一个参数是函数(function)，第二个参数是间隔的毫秒数(1000毫秒是1秒)。
setInterval(function(){alert("Hello")},3000); // 每三秒弹出"hello"
实例展示了如何使用setInterval()方法，但是每三秒弹出一次对用户体验并不好。以下实例将显示当前时间，setInterval()方法设置每秒执行一次代码，就像手表一样。
var myVar=setInterval(function(){myTimer()},1000); // 显示当前时间
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
如何停止执行?
clearInterval()方法用于停止setInterval()方法执行的函数代码，其语法是：
window.clearInterval(intervalVariable);
window.clearInterval()方法可以不使用window前缀，直接使用函数clearInterval()。要使用clearInterval()方法，在创建计时方法是必须使用全局变量：
my_var = setInterval("javascript function", milliseconds);
然后就可以使用clearInterval()方法来停止执行。
<p id="demo"></p>
<button onclick="myStopFunction()">停止</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
clearInterval(myVar);
}
</script>
setTimeout()方法
setTimeout()方法会返回某个值，其语法为：
my_var = setTimeout("javascript function", milliseconds);
在上面的语句中，值被存储在名为my_var的变量中，加入我们希望取消这个setTimeout()，可以使用这个变量名来指定它。setTimeout()的第一个参数是含有JavaScript语句的字符串，这个语句可能诸如"alert('5 seconds')"，或对函数的调用，诸如alertMsg。第二个参数指示从当前起多少毫秒后执行第一个参数，提示：1000毫秒等于1秒。
setTimeout(function(){alert("Hello")},3000); // 等待3秒，然后弹出"hello"
如何停止执行?
clearTimeout()方法用于停止执行setTimeout()方法的函数代码，其语法为：
window.clearTimeout(timeoutVariable);
window.clearTimeout()方法可以不使用window前缀，要使用clearTimeout()，必须在创建超时方法中(setTimeout)使用全局变量：
my_var = setTimeout("javascript function", milliseconds);
如果函数还未被执行，我们可以使用clearTimeout()方法来停止执行函数代码。
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}
JavaScript Cookie
Cookie用于存储web页面的用户信息。
**什么是Cookie
Cookie是一些数据，存储在我们电脑上的文本文件中。当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。Cookie的作用就是用于解决"如何记录客户端的用户信息"：
- 当用户访问web页面时，他的名字可以记录在Cookie中；
- 在用户下一次访问该页面时，可以在Cookie中读取用户访问记录；
Cookie以名/值对形式存储，如下所示：
username = eric
当浏览器重服务器上请求web页面时，属于该页面的cookie会被添加到该请求中，服务端通过这种方式来获取用户的信息。
使用JavaScript创建Cookie
JavaScript可以使用document.cookie属性来创建、读取及删除cookie。JavaScript中，创建cookie如下所示：
document.cookie="username=Eric";
还可以为cookie添加一个过期时间(以UTC或GMT时间)，默认情况下cookie在浏览器关闭时删除：
document.cookie="username=Eric;expires=Fri, 1 June 2018 9:00:00 GTM";
还可以使用path参数告诉浏览器cookie的路径，默认情况下cookie属于当前页面：
document.cookie="username=Eric;expires=Fri, 1 June 2018 9:00:00 GTM;path=/";
使用JavaScript读取Cookie
在JavaScript中，可以使用以下代码来读取cookie：
var x = document.cookie;
document.cookie将以字符串的方式返回所有的cookie，类型格式：cookie1=value;cookie2=value;cookie3=value;
使用JavaScript修改Cookie
在JavaScript中，修改cookie类似于创建cookie，如下所示：
document.cookie="username=Eric;expires=Fri, 1 June 2018 9:00:00 GTM;path=/"; // 旧的cookie将被覆盖
使用JavaScript删除Cookie
删除cookie非常简单，只需要设置expires参数为以前的时间即可，设置为Thu, 01 Jan 1970 00:00:00 GMT：
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; // 注意，当删除时不必指定cookie的值
Cookie字符串
document.cookie属性看起来像一个普通的文本字符串，其实它不是。即使在document.cookie中写入一个完整的cookie字符串，当重新读取该cookie信息时，cookie信息是以名/值对的形式展示的。如果设置了新的cookie，旧的cookie不会被覆盖，新cookie将添加到document.cookie中，所以如果重新读取document.cookie，将会获得如下所示数据：
cookie1=value;cookie2=value;
如果需要查找一个指定cookie值，必须创建一个JavaScript函数在cookie字符串中查找cookie值。
JavaScript Cookie实例
在以下实例中，我们将创建cookie来存储访问者名称。首先，访问者访问web页面，他将被要求填写自己的名字，该名字会存储在cookie中，访问者下一次访问页面时，他会看到一个欢迎的消息。在这个实例中我们会创建3个JavaScript函数：
- 1.设置cookie值的函数；
- 2.获取cookie值的函数；
- 3.检测cookie值的函数；
1.设置cookie值的函数
首先，创建一个函数用于存储访问者的名字：
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
函数解析：以上的函数中，cookie的名字为cname，cookie的值为cvalue，并设置了cookie的过期时间expires，该函 数设置了cookie名、>cookie值、cookie过期时间；
2.获取cookie值得函数
然后，创建一个函数用于返回指定cookie的值：
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
函数解析：cookie名的参数为cname，创建一个文本变量用于检索指定cookie：cname + "="。使用分好来分割document.cookie字符串，
并将分割后的字符串数组赋值给ca(ca = document.cookie.split(";"))。循环ca数组(i=0;i<ca.length;i++)，然后读取数组中的每个值，并去除
前后空格(c = ca[i].trim())。如果找到cookie(c.indexOf(name) == 0)，返回cookie的值(c.substring(name.length,c.length)，如果没找到>cookie，返回""。
3.检测cookie值的函数
最后，创建一个检测cookie是否创建的函数。如果设置了cookie，将显示一个问候信息，如果没有设置cookie，将会显示一个弹窗用于询问访问者的名字，并调用setCookie()函数将访问者的名字存储365天：
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);
}
}
}
完整实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript BOM</title>
</head>
<head>
<script>
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("欢迎 " + user + " 再次访问");
}
else {
user = prompt("请输入你的名字:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
浙公网安备 33010602011771号