项目演练--当当网上书店项目介绍与开发课件备课讲稿

1、丰泽教育java学院3G学院项目演练-当当网上书店项目介绍与开发课件丰泽教育java学院3G学院任务描述1-1v需求概述 开发当当网上书店系统 根据不同分类浏览图书，查看最新上架新书、最近畅销图书 在线购买图书，在购物车中可以改变商品的数量v兼容性 页面的脚本特效和CSS样式要兼容IE8.0和Firefox 3.5丰泽教育java学院3G学院任务描述1-2演示案例：当当网演示案例：当当网v用例图丰泽教育java学院3G学院问题分析：开发和测试工具2-1v开发工具 Dreamweaver CS4v测试工具 IE Collection（多IE版本共存软件）、Firefox 3.5丰泽教育java学

2、院3G学院问题分析：添加脚本特效2-2v项目开发步骤 明确项目需要的技能 在页面上添加脚本特效 页面测试 功能测试 兼容性测试丰泽教育java学院3G学院难点分析：页面特效v表单即时提示错误信息，改变文本框获得焦点和失去焦点时样式，使用onFocus和onBlur事件v使用innerHTML动态改变层中的内容v使用数组、循环实现图书分类显示，以及下拉列表的级联效果和横幅广告的轮换显示v编写JavaScript特效进行调试时，可以使用alert( )方法丰泽教育java学院3G学院开发计划4-1v用例1：树形菜单15分钟 用例2：随滚动条移动的广告图片20分钟 用例3：循环显示的广告图片25分钟

3、 用例4：弹出窗口5分钟 用例5： TAB切换特效10分钟 用例6：循环垂直向上滚动的内容20分钟 用例7：展示图书内容25分钟丰泽教育java学院3G学院开发计划4-2v用例8：商品列表的显示和隐藏10分钟v用例9：计算商品金额等25分钟v用例10：改变商品数量20分钟 用例11：删除商品25分钟v用例12：改变文本框样式 10分钟v用例13：验证表单25分钟v用例14：二级级联下拉列表15分钟v用例15：用户登录20分钟丰泽教育java学院3G学院用例1：树形菜单v需求说明 网站导航“我的当当”实现下拉树形菜单特效v实现思路 使用onmouseover、onmouseout事件实现鼠标的移

4、进、移出效果 使用DIV的display属性实现层的显示和隐藏完成时间：完成时间：15分钟分钟丰泽教育java学院3G学院用例2：随滚动条移动的广告图片v需求说明 页面右侧广告图片带关闭按钮 广告图片随滚动条上下移动v实现思路 在IE下使用currentStyle获取图片所在层的初始位置 在Firefox下使用getComputedStyle获取图片所在层的初始位置 根据滚动条的滚动改变图片所在层的位置 使用DIV的 display属性隐藏图片所在的层完成时间：完成时间：20分钟分钟丰泽教育java学院3G学院用例3：循环显示的广告图片v 实现思路 带数字按钮的图片广告 多幅图片循环显示v 实

5、现思路 图片路径和数字按钮的编号分别保存在两个数组中 使用setInterval或 setTimeout定时显示不同的图片 改变图片的路径，即src属性 使用className属性改变数字按钮的样式完成时间：完成时间：25分钟分钟for(var i=1;i(MaxFrame+1);i+) if(i=NowFrame) document.getElementById(dd_scroll).src =scorll_imgi-1; document.getElementById().className=scroll_number_over; else document.getElementById(

6、).className=scroll_number_out; 显示当前图片显示当前图片设置当前按钮的设置当前按钮的CSS样式样式丰泽教育java学院3G学院用例4：弹出窗口v需求说明 打开首页时弹出固定大小的广告窗口页面v实现思路 使用open实现弹出窗口完成时间：完成时间：5分钟分钟丰泽教育java学院3G学院用例5： TAB切换特效v需求说明 最新上架内容实现TAB切换特效v实现思路 使用DIV的display属性实现层的显示和隐藏完成时间：完成时间：10分钟分钟丰泽教育java学院3G学院用例6：循环垂直向上滚动的内容v需求说明 书讯快递内容实现无缝隙的循环垂直向上滚动特效v实现思路fu

7、nction moveTop() if(dome2.offsetTop-dome.scrollTop=0) dome.scrollTop-=dome1.offsetHeight; else dome.scrollTop+ var MyMar=setInterval(moveTop,speed) dome.onmouseover=function() clearInterval(MyMar) dome.onmouseout=function() MyMar=setInterval(moveTop,speed)当滚动至当滚动至dome1与与dome2交界时交界时dome跳到最顶端跳到最顶端设置定时

8、器设置定时器鼠标移上时清除定时器达鼠标移上时清除定时器达到滚动停止的目的到滚动停止的目的鼠标移开时重设定时器，继续滚动鼠标移开时重设定时器，继续滚动完成时间：完成时间：20分钟分钟丰泽教育java学院3G学院首页测试功能测试功能测试测试弹出固定大小窗口，书讯快递向上循环滚动测试弹出固定大小窗口，书讯快递向上循环滚动图片广告轮换显示，单击数字按钮显示当前图片图片广告轮换显示，单击数字按钮显示当前图片“我的当当我的当当”实现下拉列表菜单实现下拉列表菜单最新上架实现最新上架实现TAB切换切换在在IE和和FireFox浏览器下测试所有特效实现是否一致浏览器下测试所有特效实现是否一致互相测试完成的特效功

9、能互相测试完成的特效功能测试出的测试出的bug记录在记录在“常见问题列表中常见问题列表中”页面测试页面测试丰泽教育java学院3G学院演示首页特效v结果演示演示案例：演示首页特效演示案例：演示首页特效 丰泽教育java学院3G学院用例7：展示图书内容v需求说明 “浏览同级分类” 内容使用JavaScript编写代码，自动产生分类列表v实现思路 把所有的图书分类内容存放在数组中 使用循环语句依次读取出数组中的内容，然后显示在页面中完成时间：完成时间：25分钟分钟var bookSort=new Array(中国当代小说中国当代小说(13880),“中国中国近现代小近现代小.(640);funct

10、ion productList() bookList=document.getElementById(product_catList_class); for(var i in bookSort) var bookTitle= +bookSorti+; bookList.innerHTML+=bookTitle; 使用数组存储图书分类使用数组存储图书分类循环读取分类循环读取分类显示分类显示分类丰泽教育java学院3G学院展示图书分类页面v结果演示演示案例：演示图书分类页面演示案例：演示图书分类页面丰泽教育java学院3G学院图书分类页面测试功能测试功能测试测试所有的特效是否正确运行测试所有的特效

11、是否正确运行在在IE和和FireFox浏览器下测试所有特效实现是否一致浏览器下测试所有特效实现是否一致检查代码是否规则检查代码是否规则互相测试完成的特效功能互相测试完成的特效功能测试出的测试出的bug记录在记录在“常见问题列表中常见问题列表中”页面测试页面测试丰泽教育java学院3G学院用例8：商品列表的显示和隐藏v需求说明 单击箭头图标，可以隐藏或显示商品列表 商品列表显示时，图标箭头向上，商品列表隐藏时，图标箭头向下v实现思路 使用display属性显示或隐藏层 使用“HTML对象.src=图片路径”的方式改变图片完成时间：完成时间：10分钟分钟丰泽教育java学院3G学院用例9：计算商品

12、金额等v需求说明 计算所有商品金额总计、积分和节省金额v实现思路 商品的单品积分、市场价、数量放在特定的标签中 使用getElement方法读取商品列表中所有商品 计算每行的商品积分、节省的金额和金额总计 累计每行的积分、节省金额和金额总计function productCount().var myTableTr=document.getElementById().getElementsByTagName(tr); for(var i=0;imyTableTr.length;i+)point=myTableTrigetElementsByTagName()0.innerHTML; integr

13、al+=point*number; document.getElementById(product_total).innerHTML=total;获取商品的单品积分获取商品的单品积分计算每行商品的总积分并进行累加计算每行商品的总积分并进行累加显示商品总价在页面上显示商品总价在页面上完成时间：完成时间：25分钟分钟丰泽教育java学院3G学院用例10：改变商品数量v需求说明 根据需要可以修改商品数量 修改商品数量后，商品的金额、积分也要随着更改v实现思路 鼠标离开文本框时(onBlur)，累计计算所有商品的金额、积分和节省金额完成时间：完成时间：20分钟分钟丰泽教育java学院3G学院用例11：

14、删除商品v需求说明 可以删除已选购商品，删除商品时要进行确认 删除商品后，商品金额等会随着改变v实现思路 使用getElementById( )获取要删除商品的行 删除商品使用removeChild( )或deleteRow( )function deleteProduct(elementId) var delElement=document.getElementById(elementId); var flag=confirm(你确定要删除此商品吗？你确定要删除此商品吗？); if(flag=true)delElement.parentNode.removeChild(delElement)

15、; 删除商品所在行的删除商品所在行的id删除商品所在行删除商品所在行确认是否删除商品确认是否删除商品完成时间：完成时间：25分钟分钟丰泽教育java学院3G学院展示购物车页面v结果演示演示案例：演示购物车页面演示案例：演示购物车页面丰泽教育java学院3G学院购物车页面测试功能测试功能测试能正确删除商品和修改商品数量，并且同时改变商品能正确删除商品和修改商品数量，并且同时改变商品金额、积分和节省金额金额、积分和节省金额在在IE和和FireFox浏览器下测试所有特效实现是否一致浏览器下测试所有特效实现是否一致检查代码是否规则检查代码是否规则互相测试完成的特效功能互相测试完成的特效功能测试出的测试

16、出的bug记录在记录在“常见问题列表中常见问题列表中”页面测试页面测试丰泽教育java学院3G学院用例12：改变文本框样式v需求说明 鼠标进入文本框时，文本框背景颜色变为浅绿色，并且提示需要输入的内容v实现思路 文本框获得焦点(onFocus)时改变其背景，并提示输入内容function emailFocus() var email=document.getElementById(email); var promptId=document.getElementById(email_prompt); email.className=register_input register_input_Fo

17、cus; promptId.innerHTML=此邮箱将此邮箱将; promptId.className=register_prompt;完成时间：完成时间：10分钟分钟丰泽教育java学院3G学院用例13：验证表单v需求说明 使用正则表达式验证Email地址、昵称、密码的有效性 鼠标离开文本框时对输入的内容进行验证并提示v实现思路 文本框失去焦点(onBlur)时验证文本框中的内容，并且进行提示输入正确格式提示输入正确格式提示输入错误格式提示输入错误格式提示function emailBlur() var email=document.getElementById(email); var r

18、eg=/w+w+(.a-zA-Z2,3)1,2$/; if(email.value=) promptId.innerHTML=电子邮件是必填项，请输入您的电子邮件是必填项，请输入您的Email地址地址; if(reg.test(email.value)=false) 验证邮箱的正则表达式验证邮箱的正则表达式完成时间：完成时间：25分钟分钟丰泽教育java学院3G学院用例14：二级级联下拉列表v需求说明 所在地的两个下拉列表实现级联效果v实现思路 改变选项使用onchange事件触发，选择二级列表 使用数组保存所在地的省份和城市完成时间：完成时间：15分钟分钟丰泽教育java学院3G学院展示用户注册页面v结果演示演示案例：演示用户注册页面演示案例：演示用户注册页面丰泽教育java学院3G学院用例15：用户登录v需求说明 验证Email地址或昵称输入框不能为空 验证密码输入框不能为空 鼠标停在文本框上时，背景显示浅绿色，离开文本框恢复为原来的背景颜色v思路分析 使用onFocus实现文本