BOM全称 Browser Object Model，浏览器对象模型。
JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。
为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。
1、window对象
Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
/* javascript组成部分：
EMCAScript（基本语法）
BOM( Browser Object Model) 浏览器对象模型.
浏览器对象模型中把浏览器 的各个部分都是用了一个对象进行描述，如果我们要
操作浏览器的一些属性，我就可以通过浏览器对象模型 的对象进行操作。
window 代表了一个新开的窗口
location 代表了地址栏对象。
screen 代表了整个屏幕的对象
window对象常用的方法：
open() 打开一个新的窗口。
resizeTo() 将窗口的大小更改为指定的宽度和高度值。 moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
moveBy() 相对于原来的窗口移动指定的x、y值。
setInterval() 每经过指定毫秒值后就会执行指定的代码。
clearInterval() 根据一个任务的ID取消的定时任务。
setTimeout() 经过指定毫秒值后执行指定 的代码一次。
注意： 使用window对象的任何属性与方法都可以省略window对象不写的。*/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" onclick="showAd()" value="open" /> <input type="button" onclick="resizeToTest()" value="resize" /> <input type="button" onclick="moveToTest()" value="moveTo" /> <input type="button" onclick="moveByTest()" value="moveBy" /> <!--<input type="button" onclick="setIntervalTest()" value="setInterval" />--> <input type="button" onclick="clearIntervalTest()" value="clearInterval" /> </body> <script type="text/javascript"> function showAd(){ window.open("ad.html"); } function resizeToTest(){ window.resizeTo(400,400); } function moveToTest(){ window.moveTo(600,300); } function moveByTest(){ window.moveBy(0,50); } function setIntervalTest(){ window.open("ad.html"); } //var id=window.setInterval("setIntervalTest()",3000); function clearIntervalTest(){ window.clearInterval(id); } window.setTimeout("setIntervalTest()",3000) </script> </html>
2、事件的加载
基本上所有的HTML元素中都可以指定事件属性。
每个元素支持什么样事件应查询文档。
所有的事件属性都是以on开头，后面的是事件的触发方式.
注册事件的方式：
方式一： 直接在html元素上注册
/*<body onload="ready()">
function ready() {
alert("body的元素被加载完毕了..");
}
*/
方式二：可以js代码向找到对应的对象再注册。 推荐使用。
(注：script标签要写在body标签之后)
*/
var bodyNode = document.getElementById("body");
bodyNode.onload = function() {
alert("body的元素被加载完毕");
}
3、事件
鼠标点击相关：
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
鼠标移动相关：
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
焦点相关的：
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
其他：
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="onloadTest()"> <input type="button" value="单击" onclick="onclickTest()" /> <input type="button" value="双击" ondblclick="ondblclickTest()" /> <input type="button" value="点击鼠标" onmousedown="onmousedownTest()" /> <input type="button" value="释放鼠标" onmouseup="onmouseupTest()"/> <input type="button" value="显示时间" onmousemove="showTime()" onmouseout="hiddenTime()" /> <span id="span"></span> 用户名:<input type="text" id="usernName" name="suer" onfocus="infoUser()" onblur="checkUser()"/> <span id="user"></span> 城市：<select name="city" onchange="onchangeTest()"> <option value="zz">-请选择-</option> <option value="zz">郑州</option> <option value="gy">巩义</option> </select> <form action="ad.html" onsubmit="onsubmitTest()"> <input type="submit" /> </form> </body> <script type="text/javascript"> function onloadTest(){ alert("ready"); } function onclickTest(){ alert("单击"); } function ondblclickTest(){ alert("双击"); } function onmousedownTest(){ alert("点击鼠标"); } function onmouseupTest(){ alert("释放鼠标"); } function showTime(){ document.getElementById("span").innerHTML=new Date().toLocaleString(); } function hiddenTime(){ document.getElementById("span").innerHTML=" "; } function infoUser(){ document.getElementById("user").innerHTML="请输入用户名".fontcolor("green"); } function checkUser(){ if (document.getElementById("usernName").value.length<6) { document.getElementById("user").innerHTML="用户名长度必须大于6位".fontcolor("red"); } else{ document.getElementById("user").innerHTML="用户名合法".fontcolor("green"); } } function onchangeTest(){ alert("当前城市也改变"); } function onsubmitTest(){ alert("表单即将要提交"); } </script> </html>
4、location对象
Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。
location中的重要方法：
href属性 设置或获取整个 URL 为字符串。
reload() 重新装入当前页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> function showURL(){ alert(location.href); } function baidu(){ location.href="http://www.baidu.com" } function refresh(){ location.reload(); } window.setInterval("refresh()",3000); </script> <body> <input type="button" onclick="showURL() " value="显示地址栏" /> <span onclick="baidu()">百度一下</span> </body> </html>
5、screen对象
Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。
availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。