2.1 window对象
浏览器对象模型(BOM)是JavaScript的组成之一，它提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。
BOM的分层结构：
window：history document location
document：link form anchor
form：button checkbox text …… textarea radio select
window对象是整个BOM的核心，在浏览器中打开网页后，首先看到的是浏览器窗口，即顶层的window对象；其次是网页文档内容，即document(文档)。它的内容包括一些超链接(link)、表单(form)、锚(anchor)等，表单由文本框(text)、单选按钮(radio)、按钮(button)等表单元素组成。在浏览器对象结构中，除了document对象外，window对象之下还有两个对象：地址对象(location)和历史对象(history)，它们对应于浏览器地址栏和前进/后退按钮。
使用BOM可以实现的功能：
→ 弹出新的浏览器窗口
→ 移动、关闭浏览器窗口及调整窗口的大小
→ 在浏览器窗口中实现页面的前进、后退功能
window对象也称为浏览器对象。当浏览器打开HTML文档时，通常会创建一个window对象，如果文档定义了一个或多个框架时，浏览器将为原始文档创建一个window对象，同时为每个框架另外创建一个window对象。
2.1.1 常用的属性
window对象的常用属性
| 名称 |
说明 |
| history |
有关客户访问过的URL的信息 |
| location |
有关当前URL的信息 |
| screen |
只读属性，包含有关客户端显示屏幕的信息 |
语法：
window.属性名=”属性值”
例：window.location=”http://www.baidu.com”，表示跳转到百度搜索页面；screen.height返回显示浏览器的屏幕的高度，单位为像素。
2.1.2 常用的方法
window对象的常用方法
| 名称 |
说明 |
| prompt() |
显示可提示用户输入的对话框 |
| alert() |
显示一个带有提示信息和一个“确定”按钮的警示对话框 |
| confirm() |
显示一个带有提示信息、“确定”和“取消”按钮的对话框 |
| close() |
关闭浏览器窗口 |
| open() |
打开一个新的浏览器窗口，加载给定URL所指定的文档 |
| setTimeout() |
在指定的毫秒数后调用函数或计算表达式 |
| setInterval() |
按照指定的周期(以毫秒计)来调用函数或表达式 |
语法：
window.方法名();
window对象是全局对象，所以在使用window对象的属性和方法时，window可以省略。例：使用的alert()，相当于写成了window.alert()。
1、 confirm()
confirm()将弹出一个确认对话框。
语法：
window.confirm(“对话框中显示的纯文本”);
在confirm()弹出的确认对话框中，有一条提示信息、一个“确定”按钮和一个“取消”按钮。如果用户单击“确定”按钮，则confirm()返回true；如果单击“取消”按钮，则confirm()返回false。
在用户单击“确定”按钮或“取消”按钮将对话框关闭之前，它将阻止用户对浏览器的所有操作，也就是说，当调用confirm()时，在用户做出应答（单击按钮或关闭对话框）之前，不会执行下一条语句。
☆示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>确认对话框</title>
</head>
<body>
<script type="text/javascript">
var flag=confirm("确认要删除此条信息吗？");
if(flag==true){
alert("删除成功！");
}else{
alert("你取消了删除");
}
</script>
</body>
</html>
在浏览器中运行
如果单击“确定”按钮
如果单击“取消”按钮
prompt()方法、alert()方法和confirm()方法的异同：
相同处：它们都是在页面上弹出对话框
不同处：作用不相同。
→ alert()只要一个参数，仅显示警告对话框的信息，无返回值，不能对脚本产生任何改变。
→ prompt()有两个参数，是输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息。
→ confirm()只有一个参数，是确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用。
2、 close()
close()方法用于关闭浏览器窗口。
语法：
window.close();
close()方法可用在网站页面中可以对当前窗口进行关闭的按钮。
3、 open()
在页面上弹出一个新的浏览器窗口。
语法：
window.open(“弹出窗口的url”,”窗口名称”,”窗口特征”)
窗口的特征属性
| 名称 |
说明 |
| height、width |
窗口文档显示区的高度、宽度，以像素计 |
| left、top |
窗口的x坐标、y坐标，以像素计 |
| toolbar=yes|no|1|0 |
是否显示浏览器的工具栏，默认是yes |
| scrollbars=yes|no|1|0 |
是否显示滚动条，默认是yes |
| location=yes|no|1|0 |
是否显示地址栏，默认是yes |
| status=yes|no|1|0 |
是否添加状态栏，默认是yes |
| menubar=yes|no|1|0 |
是否显示菜单栏，默认是yes |
| resizable=yes|no|1|0 |
窗口是否可调节尺寸，默认是yes |
| titlebar=yes|no|1|0 |
是否显示标题栏，默认是yes |
| fullscreen=yes|no|1|0 |
是否使用全屏模式显示浏览器，默认是no |
open()方法通常用在打开一个网页弹出广告页面或网站的信息声明页面等。
2.2 history对象与location对象
2.2.1 history对象
history对象提供用户最近浏览过的URL列表。但出于隐私方面的原因，history对象不再允许脚本访问已经访问过的实际URL，可以使用history对象提供的逐个返回访问过的页面方法。
history对象的方法
| 名称 |
描述 |
| back() |
加载history对象列表中的前一个URL |
| forward() |
加载history对象列表中的后一个URL |
| go() |
加载history对象列表中的某个具体URL |
→ back()方法会让浏览器加载前一个浏览过的文档，history.back()等效于浏览器中的“后退”按钮。
→ forward()方法会让浏览器加载后一个浏览过的文档，history.forward()等效于浏览器中的“前进”按钮。
→ go(n)方法中的n是一个具体的数字，当n>0时，装入历史列表中往前数的第n个页面；当n=0时，装入当前页面；当n<0时，装入历史列表中往后数的第n个页面。
◇history.go(1)代表前进1页，相当于浏览器中的“前进”按钮，等价于forward()方法。
◇history.go(-1)代表后退1页，相当于浏览器中的“后退”按钮，等价于back()方法。
2.2.2 location对象
location对象提供当前页面的URL信息，并且可以重新装载当前页面或装入新页面。
location对象的属性
| 名称 |
描述 |
| host |
设置或返回主机名和当前URL的端口号 |
| hostname |
设置或返回当前URL的主机名 |
| href |
设置或返回完整的URL |
location对象的方法
| 名称 |
描述 |
| reload() |
重新加载当前文档 |
| replace() |
用新的文档替换当前文档 |
location对象常用的属性是href，通过对此属性设置不同的网址，可以实现跳转功能。也可以直接写成location=”url”来实现页面跳转，省略了href。
使用<a href=”url”>的方法实现页面跳转，是固定页面；location对象的href属性可以动态地改变链接的页面。
2.3 document对象
document对象既是window对象的一部分，又代表了整个HTML文档，可用来访问页面中的所有元素。所以在使用document对象时，除了要适用于各浏览器外，也要符合W3C（万维网联盟）的标准。
2.3.1 document对象的常用属性
document对象的常用属性
| 属性 |
描述 |
| referrer |
返回载入当前文档的URL |
| URL |
返回当前文档的URL |
referrer语法：
document.referrer
当前文档如果不是通过超链接访问的，则document.referrer的值为null。
URL语法：
document.URL
上网浏览某个页面时，由于不是由指定的页面进入的，因此系统将会提醒不能浏览本页面或者直接跳转到其他页面，这样的功能实际上就是通过referrer属性来实现的。
☆示例
index.html页面关键代码：
<body>
<h1><a href="示例4-praise.html">马上去领奖啦！</a></h1>
</body>
</html>
在index.html中单击“马上去领奖啦！”链接，进入praise.html页面，在praise.html页面中使用referrer属性获得链接进入本页的页面地址，然后判断是否从领奖页面进入，如果不是，则页面自动跳转到登录页面(login.html)，praise.html页面关键代码：
<body>
<script type="text/javascript">
var preUrl = document.referrer;//载入本页面文档的地址
if(preUrl==""){
document.write("<h2>您不是从领奖页面进入，5秒后将自动跳转到登录页面</h2>")
setTimeout("location.href='示例4-login.html'",5000);//使用setTimeout延迟5秒后自动跳转
}else{
document.write("<h2>大奖赶快拿啦！笔记本！数码相机！</h2>");
}
</script>
</body>
注意：praise.html页面的关键代码中使用setTimeout()是定时函数，作用是延迟5秒后自动跳转到login.html。
如果HTML页面直接在本地运行，则无论是否从本页面进入，referrer获取的地址都将是一个空字符串，因此需要在服务器环境下打开HTML页面。
提示：由于webStorm具有模拟网站服务器的功能，因此使用webStorm打开index.html页面，单击“马上去领奖啦！”链接，进入praise.html页面，才能够获取当前文档的url。
2.3.2 document对象的常用方法
document对象的常用方法
| 方法 |
描述 |
| getElementById() |
返回对拥有指定id的第一个对象的引用 |
| getElementsByName() |
返回带有指定名称的对象的集合 |
| getElementsByTagName() |
返回带有指定标签名的对象的集合 |
| write() |
向文档写文本、HTML表达式或JavaScript代码 |
→ getElementById()方法一般用于访问div、图片、表单元素、网页标签等，但要求访问对象的id是唯一的。
→ getElementsByName()方法与getElementById()方法相似，但它访问的是具体name属性的元素，由于一个文档中的name属性可能不唯一，因此getElementsByName()方法一般用于访问一组相同name属性的元素，如具有相同name属性的单选按钮、复选框等。
→ getElementsByTagName()方法是按标签来访问页面元素的，一般用于访问一组相同的元素，如一组<input>、一组图片等。
☆示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>岛上书店</title>
</head>
<body>
<div class="content">
<div id="book">书名：岛上书店</div>
<input type="button" name="changeBox" value="换换名称" onclick="alterBook()";/>
<br/>四季名称：
<input type="text" name="season" value="春"/>
<input type="text" name="season" value="夏"/>
<input type="text" name="season" value="秋"/>
<input type="text" name="season" value="冬"/><br/><br/>
<input name="b2" type="button" value="input内容" onclick="all_input()"/>
<input name="b3" type="button" value="四季名称" onclick="s_input()"/>
<input name="b4" type="button" value="清空页面内容" onclick="clearAll()"/>
<p id="replace"></p>
</div>
<script type="text/javascript">
function alterBook(){
document.getElementById("book").innerHTML="现象级全球畅销书";
}
function all_input(){
var aInput = document.getElementsByTagName("input");
var sStr = "";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" ";
}
document.getElementById("replace").innerHTML=sStr;
}
function s_input(){
var aInput = document.getElementsByName("season");
var sStr = "";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" ";
}
document.getElementById("replace").innerHTML=sStr;
}
function clearAll(){
document.write("");
}
</script>
</body>
</html>
提示：innerHTML是几乎所有的HTML元素都有的属性。它是一个字符串，用来设置或获取当前对象的开始标签和结束标签之间的HTML。
2.4 JavaScript内置对象
在JavaScript中，系统的内置对象有Date对象、Array对象、String对象和Math对象等。
→ Date：用于操作日期和时间。
→ Array：用于在单独的变量名中存储一系列的值。
→ String：用于支持对字符串的处理。
→ Math：使我们有能力执行常用的数学任务，它包含了若干个数字常量和函数。
2.4.1 Date对象
语法：
var 日期实例 = new Date(参数);
→ 日期实例是存储Date对象的变量。可以省略参数，如果没有参数，则表示当前日期和时间，例：var today = new Date();//将当前日期和时间存储在变量today中。
→ 参数是字符串格式“MM DD, YYYY, hh:mm:ss”，表示日期和时间，例：var tdate = new Date(“July 15, 2013,16:34:28”);。
Date对象有大量用于设置、获取和操作日期的方法，从而实现在页面中显示不同类型的日期时间。其中最常用的是获取日期的方法。
Date对象的常用方法
| 方法 |
说明 |
| getDate() |
返回Date对象的一个月中的每一天，其值为1~31 |
| getDay() |
返回Date对象的星期中的每一天，其值为0~6 |
| getHours() |
返回Date对象的小时数，其值为0~23 |
| getMinutes() |
返回Date对象的分钟数，其值为0~59 |
| getSeconds() |
返回Date对象的秒数，其值为0~59 |
| getMonth() |
返回Date对象的月份，其值为0~11 |
| getFullYear() |
返回Date对象的年份，其值为四位数 |
| getTime() |
返回自某一时刻（1970年1月1日）以来的毫秒数 |
→ getFullYear()返回四位数的年份，getYear()返回二位或四位的年份，常用于获取年份getFullYear()。
→ 获取星期几使用getDay()：0表示周日，1表示周一，6表示周六。
→ 各部分时间表示的范围：除号数（一个月中的每一天）外，其他均从0开始计时。例如，月份0~11,0表示1月份，11表示12月份。
☆示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>时钟特效</title>
</head>
<body>
<div id="myclock"></div>
<script type="text/javascript">
function disptime(){
var today = new Date();//获得当前时间
var hh = today.getHours();//获得小时
var mm = today.getMinutes();//获得分钟
var ss = today.getSeconds();//获得秒
//设置div的内容为当前时间
document.getElementById("myclock").innerHTML="现在是："+hh+":"+mm+":"+ss;
}
disptime();
</script>
</body>
</html>
2.4.2 Math对象
Math对象提供了许多与数学相关的功能，它是JavaScript的一个全局对象，不需要创建，直接作为对象使用就可以调用其属性和方法。
Math对象的常用方法
| 方法 |
说明 |
示例 |
| ceil() |
对数进行上舍入 |
Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25 |
| floor() |
对数进行下舍入 |
Math.floor(25.5);返回25 Math.floor(-25.5);返回-26 |
| round() |
把数四舍五入为最接近的数 |
Math.round(25.5);返回26 Math.round(-25.5);返回-26 |
| random() |
返回0~1中的随机数 |
Math.random();例如，0.627360881412312 |
random()方法返回的随机数包括0，不包含1，且都是小数，如果想选择一个1~100中的整数（包括1和100），则代码如下：
var iNum = Math.floor(Math.random()*100+1);
如果希望返回的整数为2~99，只有98个数字，第一个值为2，则代码如下：
var iNum = Math.floor(Math.random()*98+2);
☆示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用ceil()和random()随机选择颜色</title>
</head>
<body>
<div>
本次选择的颜色是：<span id="color"></span>
<input type="button" value="选择颜色" onclick="selColor();"/>
</div>
<script type="text/javascript">
function selColor(){
var color = new Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
var num = Math.ceil(Math.random()*7)-1;
document.getElementById("color").innerHTML=color[num];
}
</script>
</body>
2.5 定时函数
2.5.1 常用定时函数
1、setTimeout()
setTimeout()用于在指定的毫秒后调用函数或计算表达式。
语法：
setTimeout(“调用的函数名称”,等待的毫秒数);
☆示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定时函数</title>
</head>
<body>
<input name="s" type="button" value="显示提示消息" onclick="timer()"/>
<script type="text/javascript">
function timer(){
setTimeout("alert('3 seconds')",3000);
}
</script>
</body>
</html>
→ 3000表示3000毫秒，即3秒。
→ 单击“显示提示消息”按钮调用timer()函数时，弹出一个警示对话框，由于使用了setTimeout()函数，因此调用函数timer()后，需要等待3秒，才能弹出警示对话框。
2、setInterval()
setInterval()可按照指定的周期（以毫秒计）来调用函数或计算表达式。
语法：
setInterval(“调用的函数名称”，周期性调用函数之间间隔的毫秒数);
setInterval()会不停地调用函数，直到窗口被关闭或被其他方法强制停止。
经验：setTimeout()只执行一次函数，如果要多次调用函数，则需要使用setInterval()或者让被调用的函数再次调用setTimeout()。
3、clearTimeout()和clearInterval()
clearTimeout()函数用来清除由setTimeout()函数设置的定时器。
语法：
clearTimeout(setTimeout()返回的ID值);
clearInterval ()函数用来清除由setInterval()函数设置的定时器。
语法：
clearInterval(setInterval()返回的ID值);
补充：
1、 URL 统一资源定位符
2、 open(“弹出窗口的url”,”窗口名称”,”窗口特征”)
特征以“,”分隔
例：open(“http://www.baidu.com”,”百度搜索”,” width=250,height=250,left=250,top=250”);
3、 对话框使用“\n”进行换行。
4、 属性cursor
值：pointer:IE6.0和hand一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
5、 表单元素，value，代表取值，value=内容，代表赋值。
普通元素，innerHTML可以用于赋值和取值操作。
赋值，例如：元素.innerHTML=内容，HTML标签会被自动解析；
取值，例如：元素.innerHTML，会将该元素的内容全部获取，HTML标签页会获取展示。