BOM
BOM
概念：BOM（browser object model）窗口对象模型浏览器
一、经常使用对象
window：窗口，浏览器的窗口cookie
咱们定义的全局变量和全局函授都是window对象的属性和方法函数
例子：.net
var a = 1;
function test(){
var a = 2;
alert(a);
alert(window.a);
}orm
全局变量是window的属性，全局函数是window的方法
窗口body是宽度：window.innerWidth对象
窗口body的高度：window.innerHeightblog
var p1 = document.getElementById("p1");
var width = window.innerWidth;
var height = window.innerHeight;
p1.innerHTML = "窗口的宽度为：" + width + "窗口的高度为：" + height;事件
经常使用的方法：
（1）open：打开一个新的窗口。要传三个参数：第一个参数为将要打开窗口的路径；第二个参数为打开的方式；第三个参数为对于新打开浏览器的描述（宽和高等）。ip
（2）close：关闭一个窗口rem
（3）moveTo：移动一个窗口。以窗口的左上角为坐标起点
（4）focus：是窗口获取焦点
（5）resizeTo：改变新窗口的大小
例子：包含的上面的5个方法
<body>
<p id="p1">窗口的宽度</p>
<button onclick="openWin()">打开一个新的窗口</button>
<button onclick="closeWin()">关闭新的窗口</button>
<button onclick="removeWin()">移动新的窗口</button>
<button onclick="resizeWin()">改变新窗口的大小</button>
</body>
<script>
//当前窗口的宽度和高度
var p1 = document.getElementById("p1");
var width = window.innerWidth;
var height = window.innerHeight;
p1.innerHTML = "窗口的宽度为：" + width + "窗口的高度为：" + height;
function openWin(){//打开一个新的窗口
myWindow = window.open("","","width=200,height=300");
}
function closeWin(){//关闭一个窗口
myWindow.close();
}
function removeWin(){//移动新的窗口
//一个窗口的左上角为移动窗口的坐标
myWindow.moveTo(200,200);
//获取焦点
myWindow.focus();
}
function resizeWin(){//改变窗口的大小
myWindow.resizeTo(500,500);
//获取焦点
myWindow.focus();
}
</script>
（6）screen：屏幕，也是window下面的一个对象，在使用的时候能够用window.screen，也能够把window省略掉。
屏幕的经常使用属性：宽、高、可用宽和可用高（可用高不包括任务栏）
<script>
var scrWidth = window.screen.width;
var scrHeight = screen.height;
document.write("屏幕的宽：" +scrWidth + "屏幕的高：" + scrHeight);
var scrAvaWidth = screen.availWidth;
var scrAvaHeight = screen.availHeight;
document.write("屏幕的宽：" +scrAvaWidth + "屏幕的高：" + scrAvaHeight);
</script>
（7）location：地址
经常使用属性：href：完整路径；port：端口号；pathname：路径名；protocol协议
经常使用方法：
①打开一个新的路径（窗口）
function newLocation(){
location.assign("http://www.runoob.com");
}
②刷新：普通刷新和强制刷新
function reloadDoc(){
//若是传值为true那么就是强制刷新，若是不传，就是普通刷新
location.reload();
}
③history：历史记录
记录窗口的历史，能够进行页面的转换。
④back：返回上一页
⑤forward：进入下一页
⑥go：进入肯定的哪一页（须要传参数，-1时回到上一页
例子：包含③-⑥四个方法
function goBack(){
history.back();
}
function newDoc(){
location.assign("http://www.runoob.com");
}
function goForward(){
history.forward();
}
function goTo(){
history.go(-1);
}
二、弹窗
（1）alert()：警告提示框。也是window对象下的方法，window能够省略不写。
alert("提示的内容");//警告提示框
（2）prompt(“提示的信息”,”默认值”)：信息提示输入框。也是window对象下的方法，window也能够省略不写。当点击了肯定后才把值返回不然返回为null。
var str = prompt("请输入的内容","hello world");//请输入内容就是提示的信息，后面的hello world是默认值
（3）confirm(“提示的信息”)：确认框。也是window对象下的方法，window能够省略不写，当点击“肯定”的时候，返回true，若是点击“取消”返回false
var isRight = confirm("是否肯定删除！");
alert(typeof (isRight) + isRight);
三、cookie
（1）cookie的做用：在本地浏览器存储数据。经常使用语记住帐号等。
（2）cookie的组成：键值对的形式
（3）存储的数据：“userId=12324；psd=1324；”
有效期：“expires=今天之后的时间”
（4）存储cookie：
按照cookie的格式写好一个字符串，而后将它赋值给document.cookie，浏览器就存了这个cookie。能够存储多个键值对，可是键的名字不能重复。新的值替换旧的值。
function saveCookie(){
var pad = document.getElementById("pad").value;
//日期的应用
var date = new Date();
date.setDate(date.getDate() + 7);
var cookieText = "pad=" +pad +";" + "expires=" + date;
document.cookie = cookieText;
}
（5）获取cookie：
经过document.cookie就能获得浏览器以前存储的cookie。是一个字符串。将这个字符串进行解析，获得仔细想要的内容。
function getCookie(){
var data = document.cookie;
var result = [];
result= data.split("; ");
var userIdData = result[1].split("=")[1];
var padData = result[1].split("=")[1];
var userId = document.getElementById("userId");
userId.value = userIdData;
var pad = document.getElementById("pad");
pad.value = padData;
}
（6）清除cookie：
将存储的cookie的有效期改成过去的某一天，就清除了cookie。
function removeCookie(){
var date = new Date();
date.setDate(date.getDate()-7);
var cookieText = "pad=;expires=" + date;
document.cookie = cookieText;
}
案例：cookie方法的总体代码
<body onload="getCookie()">
<form action="">
<label for="userId">帐号：</label>
<input type="text" id="userId"/><br><br>
<label for="pad">密码：</label>
<input type="text" id="pad"/><br><br>
<label for="rememberUser">记住帐号</label>
<input type="checkbox" id="rememberUser"/><br><br>
<input type="submit" value="登陆" onclick="saveCookie()"/>
<button onclick="getCookie()">获得cookie</button>
<button onclick="removeCookie()">清除cookie</button>
</form>
</body>
<script>
function saveCookie(){
//存储
var pad = document.getElementById("pad").value;
//日期的应用
var date = new Date();
date.setDate(date.getDate() + 7);
var cookieText = "pad=" +pad +";" + "expires=" + date;
document.cookie = cookieText;
}
function getCookie(){
//获取
var data = document.cookie;
var result = [];
result= data.split("; ");
var userIdData = result[1].split("=")[1];
var padData = result[1].split("=")[1];
var userId = document.getElementById("userId");
userId.value = userIdData;
var pad = document.getElementById("pad");
pad.value = padData;
}
function removeCookie(){
//清除
var date = new Date();
date.setDate(date.getDate()-7);
var cookieText = "pad=;expires=" + date;
document.cookie = cookieText;
}
</script>
四、计时事件
（1）setInterval(“函数”,”毫秒数”)：计时器。每隔多长时间就调用一次函数。
执行周期性的任务。
例如：时钟的演示
<body>
<p id="p1">时间</p>
</body>
<script>
var timer = setInterval("getTime()",1000);
function getTime(){
var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
var p1 = document.getElementById("p1");
p1.innerHTML = hour +":" + minute + ":" + second;
}
</script>
（2）clearInterval(计时器)：中止一个计时器
var timer = setInterval("countDown()",1000);
var i = 10;
function countDown(){
if(i == 0){
clearInterval(timer);
}else{
var id1 = document.getElementById("id1");
id1.innerHTML = i;
}
i--;
}
（3）setTimeout(“函数名”,”毫秒数”)：延时器，就是隔了多长时间调用一次函数。
<body> <p id="p1">您的电话已欠费（3秒以后消失）</p></body><script> var timer = setTimeout("alarmClock()",3000); function alarmClock(){ var p1 = document.getElementById("p1"); p1.innerHTML = ""; }</script>
-
每一个你不满意的现在，都有一个你没有努力的曾经。