TP10JavaScript对象

1、JavaScript对象第十章回顾与作业点评回顾与作业点评在在HTML页面中如何引用页面中如何引用JavaScript？简述简述prompt() 和和alert()方法的区别及应用场合。方法的区别及应用场合。如何定义和使用函数？如何定义和使用函数？2/45本章任务本章任务制作简易购物车页面制作简易购物车页面查看一年四季的变化查看一年四季的变化制作复选框的全选制作复选框的全选/全不选效果全不选效果制作制作12进制的时钟特效进制的时钟特效3/45本章目标本章目标会使用会使用window对象的对象的open()方法制作广告窗方法制作广告窗口口会使用会使用getElement系列方法访问系列方法访问D

2、OM元素元素会使用定时函数和会使用定时函数和Date对象制作时钟特效对象制作时钟特效4/45http:/window 窗口对象窗口对象location地址对象地址对象FORM表单对象表单对象浏览器对象的分层结构浏览器对象的分层结构window.document.myform.text1 document文档对象文档对象BOM模型模型浏览器对象模型浏览器对象模型 (Browser Object Model (BOM) 使使 JavaScript 有能力与浏览有能力与浏览器对话器对话BOM模型模型BOM可实现功能可实现功能弹出新的浏览器窗口弹出新的浏览器窗口移动、关闭浏览器窗口以及调整窗口的大小移

3、动、关闭浏览器窗口以及调整窗口的大小页面的前进、后退页面的前进、后退整个整个BOM的核心的核心6/45Window对象对象常用属性常用属性常用方法常用方法常用事件常用事件7/45Window对象的对象的常用属性常用属性属性名称属性名称说说 明明history 有关客户访问过的有关客户访问过的URL的信息的信息location有关当前有关当前 URL 的信息的信息常用的属性常用的属性语法语法window.属性名属性名= 属性值属性值 window.location=http:/ ; 示例示例表示跳转到搜狐主页表示跳转到搜狐主页8/45Window对象的对象的常用方法常用方法常用的方法常用的方法方

4、法名称方法名称说说 明明prompt( )显示可提示用户输入的对话框显示可提示用户输入的对话框alert( )显示带有一个提示信息和显示带有一个提示信息和一个一个确定按钮的警示框确定按钮的警示框 confirm( )显示一个显示一个带有提示信息、确定和取消按钮的对话框带有提示信息、确定和取消按钮的对话框 close( )关闭浏览器窗口关闭浏览器窗口open( )打开一个新的浏览器窗口，加载给定打开一个新的浏览器窗口，加载给定 URL 所指定的所指定的文档文档setTimeout( )在指定的毫秒数后调用函数或计算表达式在指定的毫秒数后调用函数或计算表达式setInterval( )间隔指定的毫

5、秒数不停地执行指定的代码间隔指定的毫秒数不停地执行指定的代码9/45confirm()方法方法confirm()与与alert ()、 prompt()区别区别confirm( 对话框对话框中显示的纯中显示的纯文本文本 )语法语法示例示例 var flag=confirm(确认要删除此条信息吗？确认要删除此条信息吗？); if(flag=true) alert(删除成功！删除成功！); else alert(你取消了删除你取消了删除);10/45open()方法方法 window.open(弹出窗口的弹出窗口的url,窗口名称窗口名称,窗口特征窗口特征”)窗口特征窗口特征语法语法属性名称属性名

6、称说说 明明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。

7、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.open(adv.html, height=380,width=320,t

8、oolbar=0,scrollbars=0, location=0,status=0,menubar=0,resizable=0 );弹出固定大小窗口弹出固定大小窗口,并且无菜单栏等并且无菜单栏等11/45Window对象的对象的常用事件常用事件常用的事件常用的事件名称名称说说 明明onload一个页面或一幅图像完成加载一个页面或一幅图像完成加载onmouseover鼠标移到某元素之上鼠标移到某元素之上onlick当用户单击某个对象时调用的事件句柄当用户单击某个对象时调用的事件句柄onkeydown某个键盘按键被某个键盘按键被 按下按下onchange域的内容被改变域的内容被改变12/45如何

9、使用如何使用window对象对象弹出窗口、弹出固定大小且无菜单栏的窗口弹出窗口、弹出固定大小且无菜单栏的窗口当前页面全屏显示当前页面全屏显示弹出确认窗口弹出确认窗口关闭窗口关闭窗口演示演示示例示例1： window对象操作窗口对象操作窗口示例示例13/45学员操作学员操作模拟简易购物车页面模拟简易购物车页面需求说明需求说明打开页面时，弹出广告页面，并且此页面可实现关打开页面时，弹出广告页面，并且此页面可实现关闭窗口功能闭窗口功能购物车页面可实现全屏显示购物车页面可实现全屏显示提交订单页面时，弹出确认窗口提交订单页面时，弹出确认窗口练习练习完成时间：完成时间：20分钟分钟14/45共性问题集中讲

10、解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码规范问题代码规范问题调试技巧调试技巧15/45history对象对象常用方法常用方法名称名称说说 明明back()加载加载 history 对象列表中的前一个对象列表中的前一个URLforward()加载加载 history 对象列表中的下一个对象列表中的下一个URL go()加载加载 history 对象列表中的某个具体对象列表中的某个具体URLhistory.back()history.forward() history.go(-1)history.go(1) 等价等价浏览器中的浏览器中的“前进前进”浏览器中的浏览器中的“后退后退”

11、等价等价16/45location对象对象常用属性常用属性名称名称说说 明明host设置或返回主机名和当前设置或返回主机名和当前URL的端口号的端口号hostname设置或返回当前设置或返回当前URL的主机名的主机名href设置或返回完整的设置或返回完整的URL 常用方法常用方法名称名称说说 明明reload()重新加载当前文档重新加载当前文档replace()用新的文档替换当前文档用新的文档替换当前文档17/45location和和history对象对象的应用的应用主页面使用主页面使用href实现跳转和刷新本页实现跳转和刷新本页查看鲜花详情查看鲜花详情 刷新本页刷新本页返回主页面返回主页面演

12、示演示示例示例2：location和和history对象对象18/45学员操作学员操作查看一年四季变化查看一年四季变化需求说明需求说明制作查看一年四季变化的主页面制作查看一年四季变化的主页面主页面实现链接到其他页面及刷新本页功能主页面实现链接到其他页面及刷新本页功能其他页面实现前进、后退和链接到其他页面功能其他页面实现前进、后退和链接到其他页面功能练习练习完成时间：完成时间：20分钟分钟19/45共性问题集中讲解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码规范问题代码规范问题调试技巧调试技巧20/45Document对象对象常用属性常用属性名称名称说说 明明referrer返回载入

13、当前文档返回载入当前文档的文档的的文档的URLURL返回当前文档的返回当前文档的URL语法语法document.referrerdocument.URL21/45Document对象应用对象应用2-1praise.html页面页面login.html页面页面22/45Document对象应用对象应用2-2判断页面是否是链接进入判断页面是否是链接进入自动跳转到登录页面自动跳转到登录页面演示演示示例示例3：判断页面来源并跳转：判断页面来源并跳转var preUrl=document.referrer; /载入本页面文档的地址载入本页面文档的地址if(preUrl=) document.write(

14、您不是从领奖页面进入，您不是从领奖页面进入，5秒后将自动秒后将自动 跳转到登录页面跳转到登录页面); setTimeout(javascript:location.href=login.html,5000);23/45Document对象的常用方法对象的常用方法2-1Document对象的常用方法对象的常用方法名称名称说说 明明getElementById()返回对拥有指定返回对拥有指定idid的第一的第一个对象的引用个对象的引用getElementsByName()返回带有指定名称的对象返回带有指定名称的对象的集合的集合getElementsByTagName()返回带有指定标签名的对返回带

15、有指定标签名的对象的集合象的集合write()向文档写文本、向文档写文本、HTML表表达式或达式或JavaScript代码代码对象的对象的id唯一唯一相同相同name属性属性相同的元素相同的元素24/45Document对象对象访问页面元素访问页面元素动态改变层、标签中的内容动态改变层、标签中的内容访问相同访问相同name的元素的元素访问相同标签的元素访问相同标签的元素演示演示示例示例4：Document方法方法25/45Document对象的常用方法对象的常用方法2-2动态改变层、标签中的内容动态改变层、标签中的内容访问相同访问相同name的元素的元素访问相同标签的元素访问相同标签的元素do

16、cument.getElementById(node).innerHTML=搜狐搜狐;var aInput=document.getElementsByName(season); var sStr=; for(var i=0;iaInput.length;i+) sStr+=aInputi.value+;document.getElementById(s).innerHTML=sStr;var aInput=document.getElementsByTagName(input);var sStr=;for(var i=0;iaInput.length;i+) sStr+=aInputi.va

17、lue+;document.getElementById(s).innerHTML=sStr;经验经验 document 对象常应用于复选框全选效果对象常应用于复选框全选效果26/45如何实现复选框的全选效果如何实现复选框的全选效果问题问题如何实现全选如何实现全选/全不选效果？全不选效果？27/45复选框的属性复选框的属性checked属性值属性值选中：选中：true未选中：未选中：false相同相同namename的复选框全部被同时的复选框全部被同时选中，选中，如何设置？如何设置？提问提问分析分析使用使用getElementsByName()getElementsByName()方法访问同名

18、复选框方法访问同名复选框将将“全选全选”复选框的复选框的checkedchecked属性属性值赋值给每个复值赋值给每个复 选框的选框的checkedchecked属性属性演示演示示例示例5：实现全选：实现全选/全不选效果全不选效果28/45学员操作学员操作制作复选框的全选制作复选框的全选/全不选效果全不选效果需求说明需求说明“全选全选”选中时，所有复选框被选中选中时，所有复选框被选中“全选全选”取消选中时，所有复选框也取消选中取消选中时，所有复选框也取消选中练习练习完成时间：完成时间：20分钟分钟29/45共性问题集中讲解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码规范问题代码规范

19、问题调试技巧调试技巧30/45JavaScript内置对象内置对象Array：用于在单独的变量名中存储一系列的：用于在单独的变量名中存储一系列的值。值。String：用于支持对字符串的处理。：用于支持对字符串的处理。Math：用于执行常用的数学任务，它包含了：用于执行常用的数学任务，它包含了若干个数字常量和函数。若干个数字常量和函数。Date：用于操作日期和时间。：用于操作日期和时间。31/45Math对象对象常用方法常用方法方法方法说说 明明 示例示例ceil()对数进行上舍入对数进行上舍入Math.ceil(25.5);返回返回26Math.ceil(-25.5);返回返回-25floor

20、()对数进行下舍入对数进行下舍入Math.floor(25.5);返回返回25Math.floor(-25.5);返回返回-26round()把数四舍五入为最接近的数把数四舍五入为最接近的数Math.round(25.5);返回返回26Math.round(-25.5);返回返回-26random()返回返回01之间的随机数之间的随机数Math.random();例如：例如：0.6273608814137365var iNum=Math.floor(Math.random()*98+2);提问提问如何实现返回的整数范围为如何实现返回的整数范围为299？32/45Date对象对象如何在页面中显示

21、当前时间的小时、分钟和如何在页面中显示当前时间的小时、分钟和秒？秒？问题问题分析分析使用使用Date对象获得时、分、秒对象获得时、分、秒33/45Date对象对象 var 日期对象日期对象=new Date(参数参数) 参数格式：参数格式：MM DD,YYYY,hh:mm:ssvar today=new Date(); /返回当前日期和时间返回当前日期和时间var tdate=new Date(september 1,2013,14:58:12);语法语法示例示例34/45Date对象的方法对象的方法常用方法常用方法方法方法说说 明明 getDate()返回返回 Date 对象的一个月中的每一

22、天，其值介于对象的一个月中的每一天，其值介于131之间之间getDay()返回返回 Date 对象的星期中的每一天，其值介于对象的星期中的每一天，其值介于06之间之间getHours()返回返回 Date 对象的小时数，其值介于对象的小时数，其值介于023之间之间getMinutes()返回返回 Date 对象的分钟数，其值介于对象的分钟数，其值介于059之间之间getSeconds()返回返回 Date 对象的秒数，其值介于对象的秒数，其值介于059之间之间getMonth()返回返回 Date 对象的月份，其值介于对象的月份，其值介于011之间之间getFullYear()返回返回 Dat

23、e 对象的年份，其值为对象的年份，其值为4位数位数getTime()返回自某一时刻（返回自某一时刻（1970年年1月月1日）以来的毫秒日）以来的毫秒数数35/45function disptime() var today = new Date(); /获得当前时间获得当前时间var hh = today.getHours(); var mm = today.getMinutes();var ss = today.getSeconds();document.getElementById(myclock).innerHTML= hh+:+mm+:+ss;制作时钟特效制作时钟特效示例示例使用使用Da

24、te对象的方法显示当前时间的小时、对象的方法显示当前时间的小时、分钟和秒。分钟和秒。获得小时、分钟、秒数获得小时、分钟、秒数36/45Date对象对象制作的时钟特效示例中，时间为什么不改变？制作的时钟特效示例中，时间为什么不改变？问题问题分析分析由于时间在不停地走，所以应该每隔由于时间在不停地走，所以应该每隔1秒调用秒调用显示时间的方法显示时间的方法，如何解决？如何解决？使用使用setTimeout( )方法或方法或setInterval( )37/45定时函数定时函数setTimeout()setTimeout(调用的函数调用的函数,等待的毫秒数等待的毫秒数)如果如果要多次要多次调用，使用调

25、用，使用setInterval()或者或者让让disptime()自身再次调自身再次调用用setTimeout()var myTimesetTimeout(disptime() , 1000 );var myTimesetInterval(disptime() , 1000 );1秒秒(1000毫秒毫秒)之后执之后执行行函数函数disptime()一次一次每隔每隔1秒秒(1000毫秒毫秒)执执行函数行函数disptime()一次一次setInterval()setInterval(调用的函数调用的函数,间隔的毫秒数间隔的毫秒数)语法语法语法语法38/45清除函数清除函数clearTimeout()clearTimeout(setTimeOut()返回的返回的ID值值)var myTimesetTimeout(disptime() , 1000 );clearTimeout(myTime)；