JavaScript前端开发程序设计项目式教程（第2版）实训指导书.docx
实训案例名称：事件一、实训目的1 .掌握事件驱动及事件绑定的分类和方法2 .掌握。nload事件的方法及应用3 .掌握EVCnt事件的属性和方法4 .掌握事件流的概念和运用二、实训内容1 .在HTM1.页面上绑定显示问候语的按钮2 .通过OnIoad事件实现在页面中我入函数3 .编写脚本，实现将页面上调用的事件名称显示在状态栏中4 .在页面上实现阻止事件的默认行为三、实训仪器、设各.装有DreainWCaVerCS6软件的电脑，网络畅通。四、实训步骤1 .在Kn（1.页面上绑定显示问候语的按钮<head><metahttp-equiv*Content-TypeCOntenttext/html;CharSet=Utf-8”/><title>动态绑定事件/title）<scriptlype=z,textjavascripl*>functionhello（）alert（"您好!”）：<script><head><body><P><butlonid=*hellobullon"name="Abullonl”>问侯<bulion><p><scripttype=*textjavascript*>hellobutton.onclick=hello;/动态绑定<script><body>2 .通过Onload事件实现在页面中或入函数<head><metahttp-equiv-,Content-TypeContent="texthtml;charset-utf-8,><title>onload事件/title)<scripttype=*textjavascript*>functionhellolOA'alert("您好!")：)functionhello2()(alort("您好!一来自第2个事件处理函数D：)functionhello3()(alert("您好!一来自第3个事件处理函数”)：IfunctionstartO要绑定到onload事件的函数he110J)UttOn.onclick=helIol;绑定第1个函数heIobutton.attachEvent(*onclick*,hello2);绑定第2个函数hellobutton.attachEvent(,onclick*,hello3);绑定第3个函数)<script><head><bodyonload=*start()*><P><buttonid=,hellobutton"name="Abuttonl">问候<button><p><body>3 .编写脚本,实现将页面上调用的事件名称显示在状态栏中<head><melahtIpequiv=*ContenType*content=,lexl/html;charset=uIf8"><title显示事件名称<title><scripttype=textZjavascript*>functionShowEventName()蕾window,status=window,event.type：/将事件名显示在状态栏中)<script><head><body><pOnmOUSedOWn="showEventNamcO"OnlnoUSeUP="ShowEvcntName()”>请对本段文字按下鼠标左键，再松开。期间，状态栏聘依次显示事件名mousedown,mouseupo<p><body>一在页面上实现阻止事件的默认行为<head><metahttp-equiv=*Contont-Type*content=*texthtml：CharSe1.Ulf-8”/><tiIle阻止事件的默认行为<liIle><scripttype-*textZjavascript*>functionprevent1.ink()if(event.SrCEIemenl.IagName.IoUpperCaseO=F"&&event.shiftKey)event.returnValue=false;/取消事件的默认处理动作/returnfalse:<script><head><bodyOneliCk-"returnPreYent1.inkO”<p><ahref="http:Wlra<body>五、实训报告要求写出本项目的实训报告，并附带测试结果。六、实训注意事项注意代码的规范正酹写法和键盘健位的使用。实训案例名称：随机答题一、实训目的1 .掌握消息对话框的用法2 .掌握随机数的取法3 .掌握利用循环语句来解决问题的方法4 .掌握continue语句和break语句在循环结构中的用法二、实训内容1 .利用pr。InPt对话框接收键盘输入的内容2 .循环语句的使用条件运算符的应用3 .continue语句和break语句在循环结构中的使用三、实训仪器、设备装有DreamWeaVer、HBUilder等软件的电脑，网络畅通。四、实训步1 .应用内置函数Nath.randon()方法来得到随机数，并转换成整数.2 .用户的答案是从健盘入的，可以应用PrOiIPt()对话框实现对用户答案的接收.3 .将用户答案同系统进行计算的结果进行比较，得出正确和错误的靖论.可以应用条件表达式来实现输出“正确”或“错误”的结果.4 .通过break语句来实现是否退出.5 .流程图。6 .代码演示<!doctypehtml><html><head><metaCharSel="ulf-8”>title答题小游戏案例示例/title<head><body><pre><scripttype-*textjavascript*>varx,y,result,answer,goon：whiIe(true)(先出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,即结束提问)<script><pre><body><html>六、实训效果JW三:*»*-示:七、实训报告要求按照要求写出本项目的实训报告，规范、完整、表述科学，知识点和技能点以及实训结果都应该具备。实训案例名称：根据输入数值实现不同层数的三角形图案的函数一、实训目的1 .掌握自定义函数的方法2 .掌握自定义函数形参和实参的应用方法3 .掌握自定义函数调用的方法4 .掌握函数中代码写法的规范性以及函数返回值的用法二、实训内容1 .利用循环语句实现项FI2 .定义自定义函数，并将语句嵌入到函数体中3 .实现形参和实参在函数调用中的应用三、实训仪器、设善.装有DreamWeaYcr、HBUiIder等软件的电脑，网络畅通.四、实训步骤1 .使用普通流程语句来编写实现三角形的代码.2 .将代码嵌入到函数体中.3 .设置函数的形介，通过函数形叁来确定三角形图案的层数.4 .通过docueent.write()来输出结果5 .代码演示<!doctypehtnl><htnl><head><metaCharSet="utf-8”><title>利用函数输出：.角形图案示例<litlo><scriptIype=teXI/javaseripI*>functiondraw(n)(Vari,j;document,write(*<pre>*)；输出<pre>标签，使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”);<script><head><body><scripttype=*,tcxtZjavascript*>Varn-PrO<npt("请输入：角形图案的U数"JO"):<iraw(r);<script><body><html>六、实训效果七、实训报告要求按照要求写出本项目的实训报告，规范、完整、表述科学,知识点和技能点以及实训结果都应该具备。实训案例名称：信息提示栏一、实训目的1 .掌握创建对象和对象实例化的方法2 .掌握内置对象属性和方法的的应用3 .掌握数组对象和日期对象的综合应用方法4,单:握在页面中输出结果的方法法二、实训内容1.利用数组对象实现项目中信息提示的栏Fi4 .利用日期对象获取当前日期.并作为数组的索引值5 .实现将数组内容显示在页面中三、实训仪器、设各装有Drean)WeaVer、HBUilder等软件的电脑，网络畅通。四、实训步骤1 .使用Array类创建一个数姐对象实例，数组中的数姐元索个数为31,将每天要进行提示的信息作为数组元素的值.2 .使用Date对象获得当前日期的数字值，从O到303 .使用当前日期的数字值作为数组对象的下标，从而获得当天数组元案值.4 .通过docuaent.write()方法*出结果5 .代码演示<!doctypehtml><html><head><metacharset=*utf-8*>title数组对象的综合案例<7title><head><bodybgcolor="fef4d2"><br><center><fontCOIor="ffaafa”><h2><fontco】or="#OOOOo(TXbXfontCOlOrFFoOOo”>按日期显示提示信<font><b><font><h2><font><hrwidth=300><br><scripttype*textjavascript*>varDayms=newArrayO;MyStamp=newDateO;today=MyStamp.getDateO；DaymSgO="一月之计在于初”DUymSgI=今天应该去出差”DaymSg2/今天别忘了买车票”DaymSg3="今天要去超市购物.DaymSg4="今天去审车"DHymsg5="今天要去银行”DaymSg6="今天是去做调研”DaymSg7="今天要通知领导开金DaymSg8="今天是特殊的节日”Daymsg9=”今天任务开始”DaymSg10
