BOM

BOM 全称 browser object model 浏览器对象模型

1 常用对象
Window：窗口，浏览器的窗口
我们定义的全局变量和全局函数都是window对象的属性和方法
var a = 1;
function test(){
    var a = 2;
    alert(a);
    alert(window.a)
}
全局变量是window的属性，全局函数是window的方法。
浏览器body的宽度：window.innerWidth
浏览器body的高度：window.innerHeight
常用的方法：
  Open：打开一个新的浏览器，要传三个参数，第一个为将要打开窗口的路径，第二个为打开的方式和第三个为对于新打开的浏览器的描述（宽、高）
<button οnclick="openwin()">打开一个新的浏览器</button>
function openwin(){
     myWindow = window.open("http://www.baidu.com","_blank","width=200; height=300")
}
Close：关闭一个窗口
function closewin(){
    myWindow.close();
}
moveTo：移动一个窗口，以窗口的左上角为坐标起点
function removewin(){
    //一个窗口的左上角为移动窗口的坐标
    myWindow.moveTo(200,200);
    myWindow.focus();//获得焦点
}
Focus：使窗口获得焦点
ResizeTo：改变窗口的大小
function resizewin(){
    myWindow.resizeTo(1000,1500);
    myWindow.focus();
}
Screen：屏幕,也是window下面的一个对象，使用的时候可以用window.screen，也可以吧window省略掉
屏幕的常用属性：宽高；可用宽和可用高（不包括屏幕的任务栏）
var scWidth = window.screen.width;
var scrHeight = screen.height;
document.write("屏幕的宽："+scWidth+"屏幕的高"+scrHeight+"<br>");
var scrAvaWidth = screen.availWidth;
var scrAvaHeight = screen.availHeight;
document.write("屏幕的宽："+scrAvaWidth+"屏幕的高"+scrAvaHeight);
Location：地址
常用属性：href完整路径
port 端口号
Pathname：路径名，Protocol：协议
常用方法：
    打开一个新的路径（窗口）
location.assign("http://www.baidu.com")
刷新：普通刷新和强值刷新
function reloadDoc(){
    location.reload(true)//如果传值为true就是强制刷新，不传就是普通刷新
}
history：历史记录
记录当前窗口的历史，可以进行页面的转换。
back:返回上一页
forward：返回下一页
go：进入确定的一页
    history.back(
history.forward();
2 弹窗
alert("提示内容");
Alert：警告提示框，也是window对象下的方法，window可以省略不写

Prompt：信息提示输入框。里面可以有两个参数，一个是提示内容，一个是默认内容，和alert一样都是是window对象下的方法，window可以省略不写
Prompt可以事先设置一个默认值
var str = prompt("请输入内容","hello word")//提示信息，默认值

当点击确定之后才把之赋给该变量，取消返回null。
Confirm（提示的信息）确认框，也是window对象下的方法，当点击确定的时候，返回true，如果取消返回false
var isRight = confirm("是否确定删除");
document.write(typeof (isRight)+isRight);

3 cookie
Cookie的作用在本地浏览器存储数据，常用于记住账号
Cookie的组成
键值对的形式
存储的数据：“userId = 4567”，psd = 1111
有效期：“expires=今天以后的时间
存储cookie
自己按照cookie的格式写好一个字符串，将他赋值给document.cookie,浏览器就存了这个cookie。可以存储多个键值对，但是键的名字不能重复。
function saveCookie(){
    var userId = document.getElementById("userId").value;
    var psd = document.getElementById("password").value;
    var date = new Date();
    date.setDate(date.getDate()+7);
    var cookieText ="userId="+userId+";"+"expires="+date;
    var cookieText1 = "password=" + psd+";"+"expires="+date;
    document.cookie= cookieText;
    document.cookie= cookieText1;
}
得到cookie
function getCookie(){
    var data = document.cookie;
    var result = [];
    result = data.split("; ") ;
    var userIdData = result[0].split("=")[1];
    var pasData = result[1].split("=")[1];
    var userId = document.getElementById("userId");
    var psd = document.getElementById("password");
    userId.value = userIdData;
    psd.value = pasData;
}
通过document.cookie就能得到浏览器之前存储的cookie，是一个字符串，将这个字符串进行解析，得到想要的内容
清除cookie
将存储的cookie的有效期改为过去的某一天，就清除了cookie。
function removeCookie(){
    date = new Date();
    date.setDate(date.getDate()-7);
    var cookieText = "password=;expires="+date;
    document.cookie = cookieText;
}

4 计时事件
Setinterval（“函数”，毫秒数）；计时器，就是每隔多长时间就调用一次函数，例如时钟
//计时器
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("time");
    p1.innerHTML = hour+":"+minute+":"+second;
}
Clearinterval（计时器）//停止一个计时器
SetTimeout（“函数名”，“毫秒数”）//延时器，就是隔了多长时间后调用一次函数。
<p id="p1">3秒之后消失</p>
</body>
<script language="JavaScript">
    var timer = setTimeout("alarmClock()",3000);
    function alarmClock(){
        var p1 = document.getElementById("p1");
        p1.innerHTML="";
    }