JavaScript前端开发程序设计项目式教程（第2版）实训指导书.docx

《JavaScript前端开发程序设计项目式教程（第2版）实训指导书.docx》由会员分享，可在线阅读，更多相关《JavaScript前端开发程序设计项目式教程（第2版）实训指导书.docx（22页珍藏版）》请在优知文库上搜索。

1、实训案例名称：事件一、实训目的1 .掌握事件驱动及事件绑定的分类和方法2 .掌握。nload事件的方法及应用3 .掌握EVCnt事件的属性和方法4 .掌握事件流的概念和运用二、实训内容1 .在HTM1.页面上绑定显示问候语的按钮2 .通过OnIoad事件实现在页面中我入函数3 .编写脚本，实现将页面上调用的事件名称显示在状态栏中4 .在页面上实现阻止事件的默认行为三、实训仪器、设各.装有DreainWCaVerCS6软件的电脑，网络畅通。四、实训步骤1 .在Kn（1.页面上绑定显示问候语的按钮动态绑定事件/title）functionhello（）alert（您好!”）：问侯hellobutt

2、on.onclick=hello;/动态绑定2 .通过Onload事件实现在页面中或入函数onload事件/title)functionhellolOAalert(您好!)：)functionhello2()(alort(您好!一来自第2个事件处理函数D：)functionhello3()(alert(您好!一来自第3个事件处理函数”)：IfunctionstartO要绑定到onload事件的函数he110J)UttOn.onclick=helIol;绑定第1个函数heIobutton.attachEvent(*onclick*,hello2);绑定第2个函数hellobutton.attac

3、hEvent(,onclick*,hello3);绑定第3个函数)问候3 .编写脚本,实现将页面上调用的事件名称显示在状态栏中title显示事件名称functionShowEventName()蕾window,status=window,event.type：/将事件名显示在状态栏中)请对本段文字按下鼠标左键，再松开。期间，状态栏聘依次显示事件名mousedown,mouseupo一在页面上实现阻止事件的默认行为tiIle阻止事件的默认行为functionprevent1.ink()if(event.SrCEIemenl.IagName.IoUpperCaseO=F&event.shiftKe

4、y)event.returnValue=false;/取消事件的默认处理动作/returnfalse:bodyOneliCk-returnPreYent1.inkO”ahref=http:Wlra五、实训报告要求写出本项目的实训报告，并附带测试结果。六、实训注意事项注意代码的规范正酹写法和键盘健位的使用。实训案例名称：随机答题一、实训目的1 .掌握消息对话框的用法2 .掌握随机数的取法3 .掌握利用循环语句来解决问题的方法4 .掌握continue语句和break语句在循环结构中的用法二、实训内容1 .利用pr。InPt对话框接收键盘输入的内容2 .循环语句的使用条件运算符的应用3 .cont

5、inue语句和break语句在循环结构中的使用三、实训仪器、设备装有DreamWeaVer、HBUilder等软件的电脑，网络畅通。四、实训步1 .应用内置函数Nath.randon()方法来得到随机数，并转换成整数.2 .用户的答案是从健盘入的，可以应用PrOiIPt()对话框实现对用户答案的接收.3 .将用户答案同系统进行计算的结果进行比较，得出正确和错误的靖论.可以应用条件表达式来实现输出“正确”或“错误”的结果.4 .通过break语句来实现是否退出.5 .流程图。6 .代码演示title答题小游戏案例示例/titlevarx,y,result,answer,goon：whiIe(tr

6、ue)(先出Sg,再答牌x=Math,floor(Math,random()*90)+10;随机生成两个二位整数y=Math,floor(Math,random()*90)+10:result-x+y;计算标准答案answer=parseFloat(prompt(x+y+=,0):接收用户答案go_on=COnfirIn(ansRcr=result?答对：答错)+!t继续测试吗?”)；if(!goon)break;若单击“取消”按钮则返回false,即结束提问)六、实训效果JW三:*-示:七、实训报告要求按照要求写出本项目的实训报告，规范、完整、表述科学，知识点和技能点以及实训结果都应该具备。

7、实训案例名称：根据输入数值实现不同层数的三角形图案的函数一、实训目的1 .掌握自定义函数的方法2 .掌握自定义函数形参和实参的应用方法3 .掌握自定义函数调用的方法4 .掌握函数中代码写法的规范性以及函数返回值的用法二、实训内容1 .利用循环语句实现项FI2 .定义自定义函数，并将语句嵌入到函数体中3 .实现形参和实参在函数调用中的应用三、实训仪器、设善.装有DreamWeaYcr、HBUiIder等软件的电脑，网络畅通.四、实训步骤1 .使用普通流程语句来编写实现三角形的代码.2 .将代码嵌入到函数体中.3 .设置函数的形介，通过函数形叁来确定三角形图案的层数.4 .通过docueent.w

8、rite()来输出结果5 .代码演示利用函数输出：.角形图案示例functiondraw(n)(Vari,j;document,write(*)；输出标签，使document.Writeo格式有效for(i=l;i=n;i+)for(j=l：j=n-i：j+)document,write(,*)：for(j=l：j=i;j+)document,write(*);document,writeln()：,，document.Write(/pre”);Varn-PrOnpt(请输入：角形图案的U数JO):iraw(r);六、实训效果七、实训报告要求按照要求写出本项目的实训报告，规范、完整、表述科学,

9、知识点和技能点以及实训结果都应该具备。实训案例名称：信息提示栏一、实训目的1 .掌握创建对象和对象实例化的方法2 .掌握内置对象属性和方法的的应用3 .掌握数组对象和日期对象的综合应用方法4,单:握在页面中输出结果的方法法二、实训内容1.利用数组对象实现项目中信息提示的栏Fi4 .利用日期对象获取当前日期.并作为数组的索引值5 .实现将数组内容显示在页面中三、实训仪器、设各装有Drean)WeaVer、HBUilder等软件的电脑，网络畅通。四、实训步骤1 .使用Array类创建一个数姐对象实例，数组中的数姐元索个数为31,将每天要进行提示的信息作为数组元素的值.2 .使用Date对象获得当前

10、日期的数字值，从O到303 .使用当前日期的数字值作为数组对象的下标，从而获得当天数组元案值.4 .通过docuaent.write()方法*出结果5 .代码演示title数组对象的综合案例按日期显示提示信varDayms=newArrayO;MyStamp=newDateO;today=MyStamp.getDateO；DaymSgO=一月之计在于初”DUymSgI=今天应该去出差”DaymSg2/今天别忘了买车票”DaymSg3=今天要去超市购物.DaymSg4=今天去审车DHymsg5=今天要去银行”DaymSg6=今天是去做调研”DaymSg7=今天要通知领导开金DaymSg8=今天是特殊的节日”Daymsg9=”今天任务开始”DaymSg10