项目案例:当当网上书店第二十一章训练的技能点使用CoreDOM的标准方法访问节点动态的改变页面元素的样式动态获取或改变页面的内容使用正则表达式验证表单内容掌握解决浏览器的兼容性办法任务描述1-1需求概述开发当当网上书店系统根据不同分类浏览图书,查看最新上架新书、最近畅销图书在线购买图书,在购物车中可以改变商品的数量兼容性页面的脚本特效和CSS样式要兼容IE8.0和Firefox3.5任务描述1-2演示案例:当当网用例图问题分析:开发和测试工具2-1开发工具DreamweaverCS4测试工具IECollection(多IE版本共存软件)、Firefox3.5(需安装插件firebug和HTMLValidator)问题分析:添加脚本特效2-2项目开发步骤明确项目需要的技能在页面上添加脚本特效页面测试功能测试兼容性测试问题分析:页面调试2-3调试方法使用alert()方法使用Firebug工具调试结果功能正常实现在IE和FireFox中显示效果相同难点分析:页面特效表单即时提示错误信息,改变文本框获得焦点和失去焦点时样式,使用onFocus和onBlur事件使用innerHTML动态改变层中的内容使用数组、循环实现图书分类显示,以及下拉列表的级联效果和横幅广告的轮换显示编写JavaScript特效进行调试时,可以使用alert()方法和Firebug工具两种方法调试开发计划4-1用例1:树形菜单[15分钟]用例2:随滚动条移动的广告图片[20分钟]用例3:循环显示的广告图片[25分钟]用例4:弹出窗口[5分钟]用例5:TAB切换特效[10分钟]用例6:循环垂直向上滚动的内容[20分钟]用例7:展示图书内容[25分钟]开发计划4-2用例8:商品列表的显示和隐藏[10分钟]用例9:计算商品金额等[25分钟]用例10:改变商品数量[20分钟]用例11:删除商品[25分钟]用例12:改变文本框样式[10分钟]用例13:验证表单[25分钟]用例14:二级级联下拉列表[15分钟]用例15:用户登录[20分钟]用例1:树形菜单需求说明网站导航“我的当当”实现下拉树形菜单特效实现思路使用onmouseover、onmouseout事件实现鼠标的移进、移出效果使用DIV的display属性实现层的显示和隐藏完成时间:15分钟用例2:随滚动条移动的广告图片需求说明页面右侧广告图片带关闭按钮广告图片随滚动条上下移动实现思路在IE下使用currentStyle获取图片所在层的初始位置在Firefox下使用getComputedStyle获取图片所在层的初始位置根据滚动条的滚动改变图片所在层的位置使用DIV的display属性隐藏图片所在的层完成时间:20分钟用例3:循环显示的广告图片实现思路带数字按钮的图片广告多幅图片循环显示实现思路图片路径和数字按钮的编号分别保存在两个数组中使用setInterval或setTimeout定时显示不同的图片改变图片的路径,即src属性使用className属性改变数字按钮的样式完成时间:25分钟for(vari=1;i(MaxFrame+1);i++){if(i==NowFrame){document.getElementById(dd_scroll).src=scorll_img[i-1];document.getElementById(…).className=scroll_number_over;}else{document.getElementById(…).className=scroll_number_out;}}显示当前图片设置当前按钮的CSS样式用例4:弹出窗口需求说明打开首页时弹出固定大小的广告窗口页面实现思路使用open实现弹出窗口完成时间:5分钟用例5:TAB切换特效需求说明最新上架内容实现TAB切换特效实现思路使用DIV的display属性实现层的显示和隐藏完成时间:10分钟用例6:循环垂直向上滚动的内容需求说明书讯快递内容实现无缝隙的循环垂直向上滚动特效实现思路functionmoveTop(){if(dome2.offsetTop-dome.scrollTop=0){dome.scrollTop-=dome1.offsetHeight;}else{dome.scrollTop++}}varMyMar=setInterval(moveTop,speed)dome.onmouseover=function(){clearInterval(MyMar)}dome.onmouseout=function(){MyMar=setInterval(moveTop,speed)}当滚动至dome1与dome2交界时dome跳到最顶端设置定时器鼠标移上时清除定时器达到滚动停止的目的鼠标移开时重设定时器,继续滚动完成时间:20分钟首页测试功能测试测试弹出固定大小窗口,书讯快递向上循环滚动图片广告轮换显示,单击数字按钮显示当前图片“我的当当”实现下拉列表菜单最新上架实现TAB切换在IE和FireFox浏览器下测试所有特效实现是否一致互相测试完成的特效功能测试出的bug记录在“常见问题列表中”页面测试演示首页特效结果演示演示案例:演示首页特效用例7:展示图书内容需求说明“浏览同级分类”内容使用JavaScript编写代码,自动产生分类列表实现思路把所有的图书分类内容存放在数组中使用循环语句依次读取出数组中的内容,然后显示在页面中完成时间:25分钟varbookSort=newArray(中国当代小说(13880),“中国近现代小...(640)…);functionproductList(){bookList=document.getElementById(product_catList_class);for(variinbookSort){varbookTitle=li·ahref='#'class='blue'+bookSort[i]+/a/li;bookList.innerHTML+=bookTitle;}}使用数组存储图书分类循环读取分类显示分类展示图书分类页面结果演示演示案例:演示图书分类页面图书分类页面测试功能测试测试所有的特效是否正确运行在IE和FireFox浏览器下测试所有特效实现是否一致检查代码是否规则互相测试完成的特效功能测试出的bug记录在“常见问题列表中”页面测试用例8:商品列表的显示和隐藏需求说明单击箭头图标,可以隐藏或显示商品列表商品列表显示时,图标箭头向上,商品列表隐藏时,图标箭头向下实现思路使用display属性显示或隐藏层使用“HTML对象.src=图片路径”的方式改变图片完成时间:10分钟用例9:计算商品金额等需求说明计算所有商品金额总计、积分和节省金额实现思路商品的单品积分、市场价、数量放在特定的标签中使用getElement方法读取商品列表中所有商品计算每行的商品积分、节省的金额和金额总计累计每行的积分、节省金额和金额总计functionproductCount(){…….varmyTableTr=document.getElementById(…).getElementsByTagName(tr);for(vari=0;imyTableTr.length;i++){point=myTableTr[i]…getElementsByTagName(…)[0].innerHTML;……integral+=point*number;……}document.getElementById(product_total).innerHTML=total;……获取商品的单品积分计算每行商品的总积分并进行累加显示商品总价在页面上完成时间:25分钟用例10:改变商品数量需求说明根据需要可以修改商品数量修改商品数量后,商品的金额、积分也要随着更改实现思路鼠标离开文本框时(onBlur),累计计算所有商品的金额、积分和节省金额inputtype=textvalue=2onBlur=productCount()完成时间:20分钟用例11:删除商品需求说明可以删除已选购商品,删除商品时要进行确认删除商品后,商品金额等会随着改变实现思路使用getElementById()获取要删除商品的行删除商品使用removeChild()或deleteRow()functiondeleteProduct(elementId){vardelElement=document.getElementById(elementId);varflag=confirm(你确定要删除此商品吗?);if(flag==true){delElement.parentNode.removeChild(delElement);}}删除商品所在行的id删除商品所在行确认是否删除商品完成时间:25分钟展示购物车页面结果演示演示案例:演示购物车页面购物车页面测试功能测试能正确删除商品和修改商品数量,并且同时改变商品金额、积分和节省金额在IE和FireFox浏览器下测试所有特效实现是否一致检查代码是否规则互相测试完成的特效功能测试出的bug记录在“常见问题列表中”页面测试用例12:改变文本框样式需求说明鼠标进入文本框时,文本框背景颜色变为浅绿色,并且提示需要输入的内容实现思路文本框获得焦点(onFocus)时改变其背景,并提示输入内容inputid=emailtype=textclass=register_inputonFocus=emailFocus()functionemailFocus(){varemail=document.getElementById(email);varpromptId=document.getElementById(email_prompt);email.className=register_inputregister_input_Focus;promptId.innerHTML=此邮箱将……;promptId.className=register_prompt;}完成时间:10分钟用例13:验证表单需求说明使用正则表达式验证Email地址、昵称、密码的有效性鼠标离开文本框时对输入的内容进行验证并提示实现思路文本框失去焦点(onBlur)时验证文本框中的内容,并且进行提示输入正确格式提示输入错误格式提示inputid=emailtype=textclass=register_inputonBlur=emailBlur()functionemailBlur(){varemail=document.getElementById(email);……varreg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;if(email.value==){promptId.innerHTML=电子邮件是必填项,请输入您的Email地址;……}if(reg.test(email.value)==false){……}……}验证邮箱的正则表达式完成时间:25分钟用例14:二级级联下拉列表需求说明所在地的两个下拉列表实现级联效果实现思路改变选项使用onchange事件触发,选择二级列表使用数组保存所在地的省份和城市完成时间:15分钟展示用户注册页面结果演示演示案例:演示用户注册页面用例15:用户登录需求说明验证Email地址或昵称输入框不能为空验证密码输入框不能为空鼠标停在文本框上时,背景显示浅绿色,离开文本框恢复为原来的背景颜色思路分析使用onFocus实现文本框获得焦点时,改变背景颜色使用onBlur实现文本框失去焦点时,恢复背景颜色使用className属性改变文本框样式完成时间:20分钟展示用户登录页面结果演示演示案例:演示用户登录页面页面测试页面测试完成时间:15分钟页面开发完成后,重新测试页面所有功能和浏览器的兼容性测试出的缺陷记录在“常见问题列表中”修正缺陷后返测,并更新“常见问题列表中”项目总结项目展示讲解要点:完成情况、技能总结、经验分享