1.概念
BOM: Browser Object Model，浏览器对象模型，将浏览器的各个组成部分装成对象
组成
window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象
2.Window：窗口对象
1.为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。
Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
2.与弹出框有关的方法：
alert()
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
返回值:获取用户输入的值
3.与打开或关闭有关的方法
open() 打开一个新的窗口，返回新的window对象
//隐藏地址栏与工具栏location = no,toolbal = no //_self当前页面，_blank,新页面 window.open("new_file.html", "_blank", "location = no,toolbal = no");
close() 关闭浏览器窗口，谁调用，就关谁
resizeTo() 将窗口的大小更改为指定的宽度和高度值
moveTO() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
moveBy() 相对于原来的窗口移动指定的x、y值。
4.与定时器有关的方法：
setInterval() 每经过指定毫秒值后就会执行指定的代码，有返回值。
clearInterval() 根据一个任务的ID取消的定时任务。
setTimeout() 经过指定毫秒值后执行指定 的代码一次。
使用window对象的任何属性与方法都可以省略window对象不写的。但不建议省略
// 定时器返回值是当前的id 可以根据id来清除定时器
var id = window.setInterval("Testopen()",3000);
function TestclearInterval(){
window.clearInterval(id);
}3.常用的事件
1.鼠标点击相关：
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
2.鼠标移动相关：
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
3.焦点相关的：
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
4.其他：
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用的事件</title>
</head>
<body onload="showPage()">
<input type="button" value="单击" onclick="Testonclick()" />
<input type="button" value="双击" ondblclick="Testondblclick()" />
<input type="button" value="按下鼠标" onmousedown="Testonmousedown()" />
<input type="button" value="释放鼠标" onmouseup="Testonmouseup()" />
<input type="button" value="显示时间" onmousemove="Testonmousemove()" onmouseout="Testonmouseout()" />
<span id="time"></span>
<hr>
用户名:<input type="text" id="username" name="username" onfocus="Testonfocus()" onblur="Testonblur()" />
<span id="user"></span>
密码:<input type="password" name="password" />
<select onchange="Testonchange()">
<option>上海</option>
<option>北京</option>
<option>深圳</option>
</select>
<form action="new_file.html" onsubmit="Testonsubmit()">
<input type="submit" />
</form>
<script type="text/javascript">
function Testonclick() {
alert("鼠标单击");
}
function Testondblclick() {
alert("鼠标双击");
}
function Testonmousedown() {
alert("鼠标按下");
}
function Testonmouseup() {
alert("鼠标松开");
}
var spanNode = document.getElementById("time");
function Testonmouseout() {
var date = new Date();
//无日期，只有时间
spanNode.innerHTML = "鼠标出去了" + date.toLocaleTimeString();
}
function Testonmousemove() {
var date = new Date();
//显示日期+时间
spanNode.innerHTML = "鼠标进来了" + date.toLocaleString();
}
var userSpan = document.getElementById("user");
function Testonfocus() {
userSpan.innerHTML = "请输入用户名，不能小于6位".fontcolor("yellow");
}
function Testonblur() {
userSpan.innerHTML = "非常棒，格式正确".fontcolor("green");
}
function Testonchange() {
alert("内容改变了");
}
function Testonsubmit() {
alert("提交内容");
}
function showPage() {
window.open("new_file.html", "_blank", "location=no,toolbar=no");
}
</script>
</body>
</html>4.location：地址栏对象
创建(获取)：
window.location
location
方法
href属性设置或获取整个URL为字符串
reload() 重新装入当前页面，即刷新
<body>
<input type="button" value="新浪网" onclick="writeSina()" />
<input type="button" value="刷新" onclick="refresh()" />
</body>
<script type = "text/javascript">
document.write("<br />");
document.write(location.href + "<br />");//http://127.0.0.1:8848/testBOM/test3.html
document.write(location.host + "<br />");//127.0.0.1:8848
document.write(location.hostname + "<br />");//127.0.0.1
document.write(location.port + "<br />");//8848
document.write(location.protocol + "<br />");//http:
//英 /ˈprəʊtəkɒl/ n. 协议；草案；礼仪
function writeSina(){
location.href = "http://www.sina.com";
}
function refresh(){
location.reload();
}
</script>5.Screen：屏幕对象
availHeight 获取系统屏幕的工作区域高度，排除 Windows 任务栏。 availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。 height 获取屏幕的垂直分辨率。 width 获取屏幕的水平分辨率。
<script type = "text/javascript">
document.write("获取系统屏幕的工作区域高度,不含任务栏:" + screen.availHeight + "<br />");
document.write("获取系统屏幕的工作区域宽度:" + screen.availWidth + "<br/>");
document.write("获取屏幕的垂直分辨率,包含任务栏:" + screen.height + "<br/>");
document.write("获取屏幕的水平分辨率:" + screen.width + "<br/>");
</script>6.History: 历史记录对象
1.创建(获取)：
1.window.history
2.history
2.方法：
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go(参数) 加载 history 列表中的某个具体页面。
参数：
正数：前进几个历史记录
负数：后退几个历史记录
属性：
length 返回当前窗口历史列表中的 URL 数量。
随机点餐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机点餐</title>
</head>
<!-- onload，加载完就直接执行的方法 -->
<body onload="getFood()">
<center>
<span id="food"></span>
<hr />
<input type="button" style="font-size: 50px;" value="暂停" onclick="stop()" />
<input type="button" style="font-size: 50px;" value="继续" onclick="start()" />
</center>
<script type="text/javascript">
function getFood(){
var foods = ["大盘鸡","炒年糕","烤包子","烤全羊","兰州拉面","黄焖鸡","小鸡炖蘑菇"];
var index = parseInt(Math.random()*foods.length);
var spanNode = document.getElementById("food");
spanNode.style.backgroundColor = "yellow";
spanNode.style.fontSize = "120px";
spanNode.style.color = "red";
spanNode.innerHTML = foods[index];
}
var id = window.setInterval("getFood()",100);
function stop(){
window.clearInterval(id);
}
function start(){
//这里不能设置定时器，因为原来的定时器已被杀死，再次启动的是新的，将无法清除此定时器，即不能停止
//window.setInterval("getFood()",100);
location.reload();
}
</script>
</body>
</html>
每日问题：
1.dom和bom的区别
dom是指当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
bom BOM是browser object model的缩写，简bai称浏览器对象模型
2.设置定时器方法以及参数
setInterval('调用函数',毫秒时间)：每间隔固定毫秒值就执行一次函数
setTimeout('调用函数',毫秒时间)：在固定时间之后执行一次调用函数
3.清除定时器方法以及参数
clearInterval(定时器名称)
clearTimeout(定时器名称)
4.单击事件
onclick:点击事件
5.获得焦点事件
onfocus：失去焦点
6.失去焦点事件
onblur：失去焦点
7.页面加载完毕事件
window.οnlοad=function(){
alert("页面加载完成！");
}
8.表单提交事件
onsubmi：当submit按钮提交表单时触发
9.内容发生改变事件
onchange：当容发生改变时
10.location的href属性作用
可以获取当前窗口的url
让当前窗口加载对应url
11.刷新的方法
location.reload()
