第三章 JavaScript操作BOM对象
一.window对象
浏览器对象模型（BOM）是javascript的组成之一，它提供了独立与浏览器窗口进行交换的对象，使用浏览器对象模型可以实现与HTML的交互。
他的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。
BOM是一个分层结构：
Window对象是整个BOM的核心，在浏览器中打开网页后，首先看到是浏览器窗口，即顶层的window对象；其次是网页内容，即document(文档)。
Window对象也称为浏览器对象。当浏览器打开HTML文档时，通常会创建一个window对象，如果文档定义了一个或多个框架，浏览器将为原始文档创建一个window对象，同时为每个框架另外创建一个window对象。
1. BOM的作用
1）.弹出的浏览器窗口。
2）.移动、关闭浏览器窗口及调整窗口的大小。
3）.在浏览器窗口中实现页面的前进、后退功能。
2.window常用的属性
|
名称 |
说明 |
|
history |
有关客户访问过的URL的信息 |
|
location |
有关当前的URL的信息 |
|
Screen |
只读属性，包含有关客户端显示屏幕的信息 |
语法： windoe.属性名=”属性值”；
例：window.location=”http//www.baidu.com”,表示跳转到百度的官方主页。
screen.height返回显示浏览器的屏幕的高度，单位为像素。
3.window常用的方法
|
名称 |
说明 |
|
prompt() |
显示一个可提示并且用户可以输入的对话框，取消返回null,确定返回用户输入的值 |
|
alert() |
显示一个带有提示信息和一个“确定”按钮的警示对话框,无返回值 |
|
confrim() |
显示一个带有提示信息、“确定”和“取消”按钮的对话框，返回true或false |
|
colse() |
关闭浏览器窗口 |
|
open() |
打开一个新的浏览器窗口，加载给定的URL所指定的稳定 |
|
setTimeout() |
在指定的毫秒数后调用函数或计算表达式 |
|
setInterval() |
按照指定的周期（单位毫秒）来调用函数或表达式 |
弹出窗口语法：
Window.open(“弹出窗口的URL”,”窗口的名称”,”窗口特征”);
1. 窗口的特征属性
|
名称 |
说明 |
|
height、width |
窗口文档显示区的高度、宽度、单位是像素 |
|
left、top |
窗口的x坐标、y坐标，单位是像素 |
|
toolbar=yes|no|1|0 |
是否显示浏览器的工具栏，默认是yes |
|
scrollbars=yes|no|1|0 |
是否显示滚动条，默认是yes |
|
loaction= 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 |
二.history对象和location对象
1. history对象
history对象提供用户最近浏览过的URL列表，即浏览历史。出于隐私方面的考虑，history对象不再允许脚本访问已经访问过的实际URL
|
History对象的方法 |
|
|
名称 |
描述 |
|
back() |
加载history对象列表中的前一个URL |
|
forward() |
加载history对象列表中的后一个URL |
|
go() |
加载history对象列表中的某个位置的URL,参数为正负整数 |
go(n)方法中的n是一个具体的数字，当n>0时，进入历史列表中前进的第几个页面。
当n<0时，进入历史列表中后退的第几个页面。
A） history.go(1)代表前进一页，等价于forward()方法。
B） History.go(-1)代表后退一页，等价于back()方法。
2. location对象
laction对象提供当前页面的URL信息，并且可以重新装载当前页面（刷新）或装入新页面。
|
Location对象的属性 |
|
|
名称 |
描述 |
|
Host |
设置或返回主机名和当前URL的端口号 |
|
Hostname |
设置或返回当前URL的主机名 |
|
href |
设置或返回完整的URL |
|
loaction对象的方法 |
|
|
reload() |
重新加载(刷新)当前文档 |
|
replace() |
用新的文档替换当前文档 |
例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>主页面</title>
</head>
<body>
<img src="flow.jpg" alt="鲜花"/><br/>
<!--跳转到鲜花页面-->
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页</a>
</body>
</html>
一.document对象
document对象即是window对象的一部分，又代表了整个HTML文档，可以用来访问页面中的所有元素。所以在使用document对象时，除了要适用于各个浏览器外，也要符合W3C的标准。
|
Document对象的常用属性 |
|
|
referrer |
返回当前文档的URL |
|
URL |
返回当前文档的URL |
1.referrer的语法格式如下：
document.referrer;
当前文档如果不是通过超连接访问的，则document.referrer的值为null
例：通过跳转地址判断用户是否从指定的页面登录的。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var preUrl=document.referer;//载入跳转到当前文档的地址
if(preUrl==""){
document.write("<h2>您不是从领奖的登录页面进入，五秒后将自动跳入到领奖页面</h2>")
setTimeout("location.href='login.html'",3000);//使用setTimeout延迟5秒后跳转到领奖页面的登录页面
}else{
document.write("<h2>大奖赶快拿！笔记本！数码相机！</h2>")
}
</script>
</body>
</html>
2.URL的语法：
document.URL;
|
Document对象的常用方法 |
|
|
方法 |
描述 |
|
getElementByID() |
返回对拥有指定id的第一个对象的引用 |
|
getElementsByName() |
返回带有指定名称的对象的集合 |
|
getElementsByTagName() |
返回指定带有表签名的对象的集合 |
|
write() |
向文档写入文本，HTML表达式或JavaScript代码 |
二.javascript的内置对象
在javaScript中，系统的内置对象有Date对象、Array对象、String对象和Math对象等。
A） Date对象：用于操作日期和事件。
B） Array对象：用于在单独的变量名中存储一系列的值。
C） String对象：用于支持对字符串的处理。
D） Math对象：执行常用的数学任务，它包含了若干个数字常量和函数。
1.Date对象
语法：var 日期实例=new Date(参数)；
例：var today=new Date(); //将当前的时间存储在变量today中
var tdate=new Date(“July 15,2013,16:10:12”);//以字符串格式传入值
|
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对象中年份，其值为4位数 |
|
getTime() |
返回来自某一刻（1970年1月1日）以来的毫秒数 |
例：显示时间
<!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.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(); |
三.定时函数
JavaScript中提供了两个定时函数setTimeout()和setInterval().
此外，还提供了用于清除定时器的两个函数clearTimeout()和clearInterval()。
1. setTimeout
setTimeout()用于在指定的毫秒后调用函数或计算表达式，语法：
setTimeout(“调用的函数名称”，等待的毫秒数)；
2. setInterval
按照指定的周期（单位毫秒）来调用函数或表达式。语法：
setInterval(“调用的函数名称”,周期性调用函数之间间隔的毫秒数)；
setInterval()会不停的调用函数，知道窗口关闭或被其他方法强制停止。