JavaScript对象
本章目标
(1) . 会使用getElementById( )方法访问DOM元素
(2) . 会使用getElementsByName( )方法访问DOM元素
(3) . 会使用getElementsByTagName( )方法访问DOM元素
(4) . 会使用定时函数和Date对象制作时钟特效
一、 window对象
(一) BOM对象
描述
浏览器对象模型（Browser Object Model），它提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象可以实现HTML的交互，它的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。-
BOM的分层结构
window对象是整个BOM的核心，在浏览器中打开网页，首先看到的浏览器窗口，即顶层的windows对象，其次是document，它里面包括超链接、表单、锚等。
除了document对象以外，windows下还有二个重要对象：地址对象（location）和历史对象（history） BOM可实现的功能
(1) . 弹出新的浏览器窗口
(2) . 移动、关闭浏览器窗口以及调整窗口的大小
(3) . 页面的前进、后退
(二) windows对象的常用属性属性列表
属性名称 说 明
history 有关客户访问过的URL的信息
location 有关当前 URL 的信息语法
window.属性名= "属性值"案例演示:常见属性
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页</a>
<a href="javascript:history.back()">返回主页面</a>
(三) Winows对象的常用方法方法列表
方法名称 说 明
prompt( ) 显示可提示用户输入的对话框
alert( ) 显示带有一个提示信息和一个确定按钮的警示框
confirm( ) 显示一个带有提示信息、确定和取消按钮的对话框
close( ) 关闭浏览器窗口
open( ) 打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( ) 在指定的毫秒数后调用函数或计算表达式
setInterval( ) 按照指定的周期（以毫秒计）来调用函数或表达式语法
window.方法名
说明：
因为window对象是全局对象，所以在使用window对象的属性和方法，window可以省略。confirm()方法：弹出一个对象框
语法
confirm("对话框中显示的纯文本")
confirm()与alert ()、 prompt()区别
alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
演示案例
<script type="text/javascript">
var flag=confirm("确认要删除此条信息吗？");
if(flag==true)
alert("删除成功！");
else
alert("你取消了删除");
</script>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。处于全屏模式的窗口必须同时处于剧院模式
案例演示：window对象操作窗口
window.open("adv.html",""," height=380,width=320,toolbar=0, scrollbars=0, location=0,status=0,menubar=0,resizable=0 ");
(四) 常用的事件事件列表
名称 说 明
onload 一个页面或一幅图像完成加载
onmouseover 鼠标移到某元素之上
onlick 当用户单击某个对象时调用的事件句柄
onkeydown 某个键盘按键被 按下
onchange 域的内容被改变
(五) 课堂练习：模拟简易购物车页面需求说明
(1) . 打开页面时，弹出广告页面，并且此页面可实现关闭窗口功能
(2) . 购物车页面可实现全屏显示
(3) . 提交订单页面时，弹出确认窗口效果图
(六) 课后练习：制作简易的当当购物车页面
- 需求说明
单击“半闭”按钮时，关闭当前页面购物车页面
单击“移入收藏”弹出收藏提示
单击“删除”弹出确认删除提示
单击“结算”按钮，弹出结算信息页面窗口 - 效果
二、 History对象与location对象
(一) history对象
- 描述
history对象提供用户最浏览过的URL列表。但出于隐私的原因，history对象不再允许脚本访问已经访问过的实际URL，可以使用history对象提供的、逐个返回访问过的页面的方法。 - history对象的方法
名称 说 明
back() 加载 history 对象列表中的前一个URL
forward() 加载 history 对象列表中的下一个URL
go() 加载 history 对象列表中的某个具体URL
(二) location对象
- 描述
location对象提供当前页面的URL信息，并且可以重新装载当前页面或载入新页面。 - 方法和属性
常用属性
名称 说 明
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回当前URL的主机名
href 设置或返回完整的URL
常用方法
名称 说 明
Reload 重新加载当前文档
Replace 用新的文档替换当前文档
(三) 教学案例演示：鲜花 - 效果展示
- 核心代码
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页</a>
<a href="javascript:history.back()">返回主页面</a>
(四) 课后练习 - 查看一年四季的变化
需求说明
(1) . 制作查看一年四季变化的主页面
(2) . 主页面实现链接到其他页面及刷新本页功能
(3) . 其他页面实现前进、后退和链接到其他页面功能
效果
三、 document对象
document对象既是window对象的一部分，又代表了整个HTML文档，可用来访问页面中的所有元素。
本节主要学习document对象的常用属性和方法。
(一) document对象的常用属性
- 常用属性
名称 说 明
referrer 返回载入当前文档的URL
URL 返回当前文档的URL - 语法
document.referrer
document.URL - 语法说明
document.referre:当前文档如果不是通过超链接访问，则document.referrer的值为null. - 教学案例演示：领奖【判断页面来源并跳转】
需求说明
(1) . 页面是否是链接进入
(2) . 自动跳转到登录页面
效果图
核心代码
var preUrl=document.referrer; //载入本页面文档的地址
if(preUrl==""){
document.write("<h2>您不是从领奖页面进入，5秒后将自动
跳转到登录页面</h2>");
setTimeout("javascript:location.href='login.html'",5000);
}
(二) document对象的常用方法
- 常用方法
名称 说 明
getElementById() 返回对拥有指定id的第一个对象的引用
getElementsByName() 返回带有指定名称的对象的集合
getElementsByTagName() 返回带有指定标签名的对象的集合
write() 向文档写文本、HTML表达式或JavaScript代码 - 方法说明
getElementById()
一般用于访问Div、图片、表单元素、网页标签等。但要求访问对象的ID是唯一的。
getElementByName()
此方法与上个方法类似，但它访问元素name属性，由于一个文档中的name属性可能不唯一，因此getElementByName()方法一般用于访问一组相同name属性的元素，如具胡相同name属性的单选按钮、复选框等。
getElementByTagName
上方法是按标签来访问页面元素的，一般用于访问一组相同的元素，如一组<input>、一组图片等。 - 教学案例演示：document对象常用方法的使用
演示内容
(1) . 动态改变层、标签中的内容
(2) . 访问相同name的元素
(3) . 访问相同标签的元素
效果
说明
innerHTML是几科所有HTML元素都有的属性，它是一个字符串，用来设置或获取当前对象的开始标签和结束标签之间的HTML。
(三) 课后练习：复选框的全选/全不选的效果
分析
(1) . 使用getElementsByName()方法访问同名复选框
(2) . 将“全选”复选框的checked属性值赋值给每个复选框的checked属性
效果
参考代码
function check(){
var oInput=document.getElementsByName("product");
for (var i=0;i<oInput.length;i++)
oInput[i].checked=document.getElementById("all").checked;
}
四、 JavaScript内置对象
在JS中，系统的内容对象有很多，比如String对象、Array对象、Date对象、Math对象等。
Array：用于在单独的变量名中存储一系列的值
String：用于支持对字符串的处理
Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
Date：用于操作日期和时间
在这一节，我们重点介绍Date对象和Math对象.
(一) Date对象
- 创建日期对象语法
var 日期实例 = new 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 对象的年份，其值为4位数
getTime() 返回自某一时刻（1970年1月1日）以来的毫秒数 - 教学案例演示：时钟特效
实现效果
核心代码
function disptime(){
var today = new Date(); //获得当前时间
var hh = today.getHours(); //获得小时、分钟、秒
var mm = today.getMinutes();//获得分钟
var ss = today.getSeconds();//获得秒
/设置div的内容为当前时间/
document.getElementById("myclock").innerHTML="<h1>现在是:"+hh +":"+mm+": "+ss+"</h1>";
}
问题
制作的时钟特效示例中，时间为什么不改变？
(二) Math对象
- 描述
Math对象提供了许多与数学相关的功能，它是js的全局对象，不需要创建，直接作象使用就可以调用其属性和方法。 - 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.6273608814137365 - 教学案例演示
如何实现返回的整数范围为2~99？
效果图
核心代码
var iNum = Math.floor(Math.random()*98+2);
选择颜色
效果图
核心代码
function selColor(){
var color=Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
var num=Math.ceil(Math.random()*7)-1;
document.getElementById("color").innerHTML=color[num];
}
五、 定时函数
在前面的演示案例中，时间是静止的，不能动态更新，若要像电子表一样不停地动态改变时间，则需要使用将要学习的定时函数。
js中提供了两个定时函数setTimeout()和setInterval()
清除timeout的两个函数：clearTimeut和clearInterval()
(一) setTimeOut
- 描述
用于在指定睥毫秒后调用函数或计算表达式。 - 语法
setTimeout(“调用的函数名称”,等待的毫秒数); - 教学案例演示：每隔3秒弹出一个对话框
需求说明
点击按钮后，需要等待三秒后，才弹出对话框。
实现效果
核心代码
function timer(){
var t =setTimeout("alert('3 seconds')",3000);
}
(二) setInterval()
- 描述
此函数可以按照指定的周期（以毫秒为计）来调用函数或计算表达式。 - 语法格式
setInterval(“调用的函数名称”，周期性调用函数之间间隔的毫秒数) - setInterval()和setTimeout()的区别
setTimeout()只执行一次函数，如果要多次调用函数，则需要使用setInterval()或者让被调用的函数再调用setTimeout(). - 教学案例演示：让时钟动起来
核心代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时钟动起来</title>
<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="<h1>现在是:"+hh +":"+mm+": "+ss+"</h1>";
}
var myTime=setInterval("disptime()",1000);
</script>
</head>
<body onload="disptime()">
<div id="myclock"></div>
</body>
</html>
(三) clearTimeout()和clearInterval() - 描述及语法
clearTimeout()函数用来清除由setTimeout函数设置的timeout.
clearTimeout(setTimeOut()返回的ID值)
示例
var myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；
clearInterval()函数用来清除由setInterval()函数设置的timeout
clearInterval(setInterval()返回的ID值)
示例
var myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)； - 教学案例演示：清除时钟特效
参考代码
function stop(){
clearInterval(myTime);
}
<input type="button" value="停止" onclick="stop()" />
(四) 课堂训练：模拟病毒效果
(五) 课后作业：制作12进制的时钟特效
