TP10JavaScript对象

JavaScript对象第十章回顾与作业点评在HTML页面中如何引用JavaScript？简述prompt()和alert()方法的区别及应用场合。如何定义和使用函数？2/45本章任务制作简易购物车页面查看一年四季的变化制作复选框的全选/全不选效果制作12进制的时钟特效3/45本章目标会使用window对象的open()方法制作广告窗口会使用getElement系列方法访问DOM元素会使用定时函数和Date对象制作时钟特效4/45模型浏览器对象模型(BrowserObjectModel(BOM))使JavaScript有能力与浏览器对话BOM模型BOM可实现功能弹出新的浏览器窗口移动、关闭浏览器窗口以及调整窗口的大小页面的前进、后退整个BOM的核心6/45Window对象常用属性常用方法常用事件7/45Window对象的常用属性属性名称说明history有关客户访问过的URL的信息location有关当前URL的信息常用的属性语法window.属性名=属性值window.location=示例表示跳转到搜狐主页8/45Window对象的常用方法常用的方法方法名称说明prompt()显示可提示用户输入的对话框alert()显示带有一个提示信息和一个确定按钮的警示框confirm()显示一个带有提示信息、确定和取消按钮的对话框close()关闭浏览器窗口open()打开一个新的浏览器窗口，加载给定URL所指定的文档setTimeout()在指定的毫秒数后调用函数或计算表达式setInterval()间隔指定的毫秒数不停地执行指定的代码9/45confirm()方法confirm()与alert()、prompt()区别confirm(对话框中显示的纯文本)语法示例scripttype=text/javascriptvarflag=confirm(确认要删除此条信息吗？);if(flag==true)alert(删除成功！);elsealert(你取消了删除);/script10/45open()方法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.open(adv.html,,height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0);弹出固定大小窗口,并且无菜单栏等11/45Window对象的常用事件常用的事件名称说明onload一个页面或一幅图像完成加载onmouseover鼠标移到某元素之上onlick当用户单击某个对象时调用的事件句柄onkeydown某个键盘按键被按下onchange域的内容被改变12/45如何使用window对象弹出窗口、弹出固定大小且无菜单栏的窗口当前页面全屏显示弹出确认窗口关闭窗口演示示例1：window对象操作窗口示例13/45学员操作——模拟简易购物车页面需求说明打开页面时，弹出广告页面，并且此页面可实现关闭窗口功能购物车页面可实现全屏显示提交订单页面时，弹出确认窗口练习完成时间：20分钟14/45共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解15/45history对象常用方法名称说明back()加载history对象列表中的前一个URLforward()加载history对象列表中的下一个URLgo()加载history对象列表中的某个具体URLhistory.back()history.forward()history.go(-1)history.go(1)等价浏览器中的“前进”浏览器中的“后退”等价16/45location对象常用属性名称说明host设置或返回主机名和当前URL的端口号hostname设置或返回当前URL的主机名href设置或返回完整的URL常用方法名称说明reload()重新加载当前文档replace()用新的文档替换当前文档17/45location和history对象的应用主页面使用href实现跳转和刷新本页ahref=javascript:location.href='flower.html'查看鲜花详情/aahref=javascript:location.reload()刷新本页/aahref=javascript:history.back()返回主页面/a演示示例2：location和history对象18/45学员操作——查看一年四季变化需求说明制作查看一年四季变化的主页面主页面实现链接到其他页面及刷新本页功能其他页面实现前进、后退和链接到其他页面功能练习完成时间：20分钟19/45共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解20/45Document对象常用属性名称说明referrer返回载入当前文档的文档的URLURL返回当前文档的URL语法document.referrerdocument.URL21/45Document对象应用2-1praise.html页面login.html页面22/45Document对象应用2-2判断页面是否是链接进入自动跳转到登录页面演示示例3：判断页面来源并跳转varpreUrl=document.referrer;//载入本页面文档的地址if(preUrl==){document.write(h2您不是从领奖页面进入，5秒后将自动跳转到登录页面/h2);setTimeout(javascript:location.href='login.html',5000);}23/45Document对象的常用方法2-1Document对象的常用方法名称说明getElementById()返回对拥有指定id的第一个对象的引用getElementsByName()返回带有指定名称的对象的集合getElementsByTagName()返回带有指定标签名的对象的集合write()向文档写文本、HTML表达式或JavaScript代码对象的id唯一相同name属性相同的元素24/45Document对象访问页面元素动态改变层、标签中的内容访问相同name的元素访问相同标签的元素演示示例4：Document方法25/45Document对象的常用方法2-2动态改变层、标签中的内容访问相同name的元素访问相同标签的元素document.getElementById(node).innerHTML=搜狐;varaInput=document.getElementsByName(season);varsStr=;for(vari=0;iaInput.length;i++){sStr+=aInput[i].value+br/;}document.getElementById(s).innerHTML=sStr;varaInput=document.getElementsByTagName(input);varsStr=;for(vari=0;iaInput.length;i++){sStr+=aInput[i].value+br/;}document.getElementById(s).innerHTML=sStr;经验document对象常应用于复选框全选效果26/45如何实现复选框的全选效果问题如何实现全选/全不选效果？27/45复选框的属性checked属性值选中：true未选中：false相同name的复选框全部被同时选中，如何设置？提问分析使用getElementsByName()方法访问同名复选框将“全选”复选框的checked属性值赋值给每个复选框的checked属性演示示例5：实现全选/全不选效果28/45学员操作——制作复选框的全选/全不选效果需求说明“全选”选中时，所有复选框被选中“全选”取消选中时，所有复选框也取消选中练习完成时间：20分钟29/45共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解30/45JavaScript内置对象Array：用于在单独的变量名中存储一系列的值。String：用于支持对字符串的处理。Math：用于执行常用的数学任务，它包含了若干个数字常量和函数。Date：用于操作日期和时间。31/45Math对象常用方法方法说明示例ceil()对数进行上舍入Math.ceil(25.5);返回26Math.ceil(-25.5);返回-25floor()对数进行下舍入Math.floor(25.5);返回25Math.floor(-25.5);返回-26round()把数四舍五入为最接近的数Math.round(25.5);返回26Math.round(-25.5);返回-26random()返回0~1之间的随机数Math.random();例如：0.6273608814137365variNum=Math.floor(Math.random()*98+2);提问如何实现返回的整数范围为2~99？32/45Date对象如何在页面中显示当前时间的小时、分钟和秒？问题分析使用Date对象获得时、分、秒33/45Date对象var日期对象=newDate(参数)参数格式：MMDD,YYYY,hh:mm:ssvartoday=newDate();//返回当前日期和时间vartdate=newDate(september1,2013,14:58:12);语法示例34/45Date对象的方法常用方法方法说明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日）以来的毫秒数35/45functiondisptime(){vartoday=newDate();//获得当前时间varhh=today.getHours();varmm=today.getMinutes();varss=today.getSeconds();document.getElementById(myclock).innerHTML=hh+:+mm+:+ss;}制作时钟特效示例使用Date对象的方法显示当前时间的小时、分钟和秒。bodyonload=disptime()divid=myclock/div获得小时、分钟、秒数