JavaScript前端开发程序设计项目式教程（第2版） 实训指导书项目1--8 事件--在线调查问卷.docx

《JavaScript前端开发程序设计项目式教程（第2版） 实训指导书项目1--8 事件--在线调查问卷.docx》由会员分享，可在线阅读，更多相关《JavaScript前端开发程序设计项目式教程（第2版） 实训指导书项目1--8 事件--在线调查问卷.docx（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实训案例名称：事件一、实训目的1 .掌握事件驱动及事件绑定的分类和方法2 .掌握onload事件的方法及应用3 .掌握Event事件的属性和方法4 .掌握事件流的概念和运用二、实训内容1 .在HTML页面上绑定显示问候语的按钮2 .通过onload事件实现在页面中载入函数3 .编写脚本，实现将页面上调用的事件名称显示在状态栏中4 .在页面上实现阻止事件的默认行为三、实训仪器、设备装有Dreamweaver CS6软件的电脑，网络畅通。四、实训步骤1.在HTML页面上绑定显示问候语的按钮title动态绑定事件function hello()(alert (您好！)；)问侯/buttonscrip

2、t type二text/javascript”hello_button. onclick = hello; 动态绑定实训案例名称：不同内容的欢迎栏信息提示栏一、实训目的1 .掌握prompt对话框的应用2 .掌握B0M对象属性和方法的应用3 .掌握B0M对象中函数和表单的综合应用 二、实训内容1 .利用prompt对话框实现接收键盘输入的信息2 .利用window对象的setTimeOut ()方法实现延时输出3 .实现将获取内容显示在页面中三、实训仪器、设备装有Dreamweaver、HBuilder等软件的电脑，网络畅通。四、实训步骤1 .通过提示对话框prompt,实现输入来访者的信息。

3、2 .创立一个可以滚动显示的函数，通过window. setTimeOut ()延时执行滚 动的效果。3 .创立一个表单，实现一个不断滚动的文本框来显示欢迎信息。4 .代码演示title根据不同的用户显示欢迎登录信息/title欢迎登录var yourname二prompt (请输入您的名字：，朋友)function scrollmsg(index)var ml =(欢迎您， + yourname+，z,希望在此能够有所收获！)； var m2 = 请多提珍贵意见！ ！ ；var msg=ml+m2; var out 二 ;var c = 0;if(index 0 ) for (c=0 ; c

4、 index ; c+) out+= ；)out+=msg;index一;var cmd=/scrollmsg(z/ + index + )；document, display, box. value=out;window. setTimeout(cmd, 150) ; else if (index = 0) if (-index msg. length)out+=msg. substring(-index, msg. length);index一一;var cmd二scrollmsgC + index + )； document, display, box. value=out;window

5、. setTimeout(cmd, 150);)else document, display, box. value= ;window. setTimeout (/zscrollmsg(20)z/, 150) ; )六、实训效果七、实训报告要求按照要求写出本工程的实训报告，规范、完整、表述科学，知识点和技能点以及实训结果都应该具备。实训案例名称：按钮的说明性文字一、实训目的1 .掌握事件、事件驱动以及事件绑定的概念及方法2 .掌握Event事件对象的属性和方法3 .掌握键盘事件和鼠标事件的用法二、实训内容1 .在页面上创立按钮2 .数组和函数在实际中的综合应用3 .鼠标事件onmouseove

6、r和onmouseout功能的实现三、实训仪器、设备装有Dreamweaver、HBuilder等软件的电脑，网络畅通。四、实训步骤1 .在body标签内建立两个按钮“本书宗旨”“关于本书”，用于鼠标指 向的测试按钮。2 .分别创立函数，实现当鼠标经过按钮和离开按钮实现的效果。3.在按钮上设:）事件属性onmouseover和onmouseout,分别实现显示文字和隐藏文字的功能。4 .代码演示!doctype htmltitle按钮的说明性文字/titlefunction linkOn (x) with(linklx) linkmessage. innerHTML=msg;linkmessa

7、ge, style. top=dtop;linkmessage, style. left=dleft;linkmessage. style. background=bgcolor;linkmessage, style, visibility=visible”;function linkOff()linkmessage, style, visibility=hidden”;function Display(msg, bgcolor, dtop, delft) this. msg=msg;this. bgcolor=bgcolor;this. dtop=dtop;this. dleft=delft

8、;var link=new Array();link0=new Display (努力使每个人都成为JavaScript开发的高手。,bisque5, 150,430)linkl=new Display (5 JavaScript 技术普及丛书，bisque, 190, 430) 本书 href=#input type=button value= 本书 宗旨 href=# onmouseover=/linkOn (0) onmouseout=/link0ff () input type=button value=关于onmouseover二linkOn onmouseout=/link0ff

9、() 六、实训效果/ Bx / Bx 七、实训报告要求按照要求写出本工程的实训报告，规范、完整、表述科学，知识点和技能点 以及实训结果都应该具备。实训案例名称：返回首页、后退和前进按钮一、实训目的1 .掌握事件、事件驱动以及事件绑定的概念及方法2 .掌握Event事件对象的属性和方法3 .掌握键盘事件和鼠标事件的用法4 . BOM对象中Location和History对象的用法 二、实训内容1 .在页面上创立按钮2 . Location对象和History对象的属性3 .鼠标事件。nClick事件功能的实现三、实训仪器、设备装有Dreamweaver、HBuilder等软件的电脑，网络畅通。四

10、、实训步骤1 .在页面实现前进、后退等按钮的显示2 .使用B0M中History对象中的方法来实现，返回首页，使用Location对 象中的方法实现定位。3 .创立相应功能的函数，并在按钮上绑定事件处理函数。4 .代码演示1；“13无标题文档function GoForward()forml. Button2. value二前进中history, go(1)function GoBack()forml. Buttonl. value二后退中history, go(-1)function ReturnHomePage()if (document, layers) window, home ()e

11、lse window, location= :/ rjjiaoyu. com/ )inputtype二button“name二Buttonlvalue=六、实训效果七、实训报告要求按照要求写出本工程的实训报告，规范、完整、表述科学，知识点和技能点 以及实训结果都应该具备。实训案例名称：在线调查问卷一、实训目的1 .掌握表单、表单控件以及表单对象的使用方法2 .掌握访问表单以及表单元素的方法3 .掌握操作表单对象的方法4 .掌握操作表单事件的用法二、实训内容1 .在页面上创立表单2 .访问表单元素3 .获取表单元素的值并在页面上显示出来三、实训仪器、设备装有Dreamweaver、HBuilde

12、r等软件的电脑，网络畅通。四、实训步骤1 .设计一个表单，实现对问卷各个工程的列表。2 .创立函数，实现对选择结果的统计。3 .统计结果，并使用alert ()对话框进行输出显示。4 .代码演示title调查问卷案例-对学历和爱好的调查/title=0)return edu_level. optionsedu_level. selectedlndex.text;elsereturn 没有选择)function getLikes (likes) 爱好调查工程var i, resulti”；for(i=0;ilikes. length;i+)(if(likes, optionsi. selecte

13、d)result+=+likes optionsi. text+;return result;) 一function showResult () 显示调查结果var msg =您的学历是:+getEdu_level (document, inyform. edu_level);msg += n 您爱好:+getLikes (document, niyform. likes);alert (msg);)h2调查问卷/h2学历：select name=z/ e du_ 1 eve 1z/ 小学/optionoption value=2中学/option大学/option大学以上/option爱好:

14、select name二likes“ size=6 multiple=multiple”游泳/optionoption value=2蓝球/option画画/optionoption value=4登山/option音乐/optionoption value=6唱歌/option六、实训效果谑萱可卷案例-对学历和x/谑查闻艳案例对学历和 xC file:/D:/教材/第8章/例如代码/综合套例8-l.htmlC file:/D:/教材/第8章/例如代码/综合套例8-l.htmlC Q file:/D:/教材/第8章/例如代售偿合套例8-l.html调查问卷调查问卷此网页显示学历:大字爰好:泳球

15、画山东游篮亘登台蹄学历是:大学您爱好:废球音乐育乐一学历:大字 爰好:二昌软提交七、实训报告要求按照要求写出本工程的实训报告，规范、完整、表述科学，知识点和技能点以及实训结果都应该具备。2 .通过。nload事件实现在页面中载入函数onload 事件/titlescript type=text/javascript”function hellol ()(alert (您好！)；)function hello2()(alert (您好!一来自第2个事件处理函数);)function hello3()alert (您好!一来自第3个事件处理函数);function start()要绑定到onloa

16、d事件的函数hello_button. onclick二hellol ;绑定第 1 个函数hello_button. attachEvent (onclick”, hello2);绑定第 2 个函数hello_button. attachEvent (onclick，hello3); 绑定第 3 个函数) 问侯/button3 .编写脚本，实现将页面上调用的事件名称显示在状态栏中显示事件名称script type=text/javascript”function showEventName() _window, status = window, event. type; 将事件名显示在状态栏中

17、 请对 本 段文字按下鼠标左键，再松开。期间，状态栏将依次显示事件名mousedown, mouseupo4 .在页面上实现阻止事件的默认行为 阻止事件的默认行为script type=text/javascript”function preventLink()(if(event. srcElement. tagName. toUpperCase()二=A&event.shiftKey)(event. returnValue = false; 取消事件的默认处理动作 /return false;)/p五、实训报告要求写出本工程的实训报告，并附带测试结果。六、实训考前须知注意代码的规范正确写法和

18、键盘键位的使用O实训案例名称：随机答题一、实训目的1 .掌握消息对话框的用法2 .掌握随机数的取法3 .掌握利用循环语句来解决问题的方法4 .掌握continue语句和break语句在循环结构中的用法 二、实训内容1 .利用prompt对话框接收键盘输入的内容2 .循环语句的使用条件运算符的应用3 . continue语句和break语句在循环结构中的使用三、实训仪器、设备装有Dreamweaver、HBuilder等软件的电脑，网络畅通。四、实训步骤1 .应用内置函数Math. random。方法来得到随机数，并转换成整数。2 .用户的答案是从键盘输入的，可以应用prompt。对话框实现对用

19、户答案的接收。3 .将用户答案同系统进行计算的结果进行比拟，得出正确和错误的结论。可以应用条件表达式来实现输出“正确”或“错误”的结果。4 .通过break语句来实现是否退出。5 .流程图。6 .代码演示title答题小游戏案例例如 var x, y, result, answer, go_on;while (true)先出题，再答题Math, floor (Math, random () *90)+10; 随机生成两个二位整数 Math, floor(Math, random() *90)+10;resultanswerx+y; 计算标准答案parseFloat (prompt (x + +

20、 + y +0)； 接收用户答 案go on 二 confinn(answer二二result?答对：答错)+ ！ t 继续测试 吗?)；if(!go_on) break; /假设单击“取消”按钮那么返回false,即结束提问六、实训效果此网页显示：无”此网页显示：答对！继续测试吗?确定取消129七、实训报告要求按照要求写出本工程的实训报告，规范、完整、表述科学，知识点和技能点 以及实训结果都应该具备。实训案例名称:根据输入数值实现不同层数的三角形图案的函数一、实训目的1 .掌握自定义函数的方法2 .掌握自定义函数形参和实参的应用方法3 .掌握自定义函数调用的方法4 .掌握函数中代码写法的规范

21、性以及函数返回值的用法二、实训内容1 .利用循环语句实现工程2 .定义自定义函数，并将语句嵌入到函数体中3 .实现形参和实参在函数调用中的应用三、实训仪器、设备装有Dreamweaver、HBuilder等软件的电脑，网络畅通。四、实训步骤1 .使用普通流程语句来编写实现三角形的代码。2 .将代码嵌入到函数体中。3 .设置函数的形参，通过函数形参来确定三角形图案的层数。4 .通过document, write。来输出结果。5 .代码演示title利用函数输出三角形图案例如/titlescript type=text/javascript”function draw(n)var i, j;doc

22、ument, write (z/zz);输出标签，使 document, write ()格式有效for (i=l;i=n;i+)for (j=l; j=n-i; j+) document, write (z/ )； for (j=l; j=i; j+) document, write (/z* )； document, writein ();document, write (/z/z);script type=text/javascript”var n二prompt （请输入三角形图案的层数，0）;draw (n);六、实训效果七、实训报告要求按照要求写出本工程的实训报告，规范、完整、表述科

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

24、字值，从0到30。3 .使用当前日期的数字值作为数组对象的下标，从而获得当天数组元素值。4 .通过document, write。方法输出结果。5 .代码演示title数组对象的综合案例/title按日期显示提示信息 script type=text/javascript”var Daymsg = new Array();MyStamp = new Date();today = MyStamp. getDate();Daymsg 0二一月之计在于初Daymsgl=今天应该去出差Daymsg 2=今天别忘了买车票Daymsg3=今天要去超市购物Daymsg 4二今天去审车Daymsg 5二今天要

25、去银行Daymsg6=今天是去做调研Daymsg 7二今天要通知领导开会Daymsg 8=今天是特殊的节日Daymsg 9二今天任务开始Daymsg10=今天是妈妈生日，早点回家做饭吧！Daymsgn=今天是任务的最后期限Daymsg12=今天有六节课Daymsg13=今天要上 JavaScriptDaymsg14=今天要进行 JavaScript 实训Daymsg15=今天交 JavaScript 报告Daymsg16=今天要学 JavaScript 对象Daymsg17=今天要学 JavaScript 数组Daymsg18=今天的专业课程考试Daymsg 19=今天休息Daymsg20二今

26、天是个特殊的日子Daymsg21二今天要进行JavaScript数组实训，别忘了带电脑！Daymsg22二今天要学习JavaScript数组对象Daymsg23=今天要出去，注意准备好Daymsg24=今天天气预报有雨，别忘了带伞Daymsg 25二今天要去旅游Daymsg 26二今天要去开会Daymsg27二今天要去参加生日Party”Daymsg28=今天的会议要注意带笔记Daymsg 29=今天要进行思政学习Daymsg30=今天是最后一天，天气很好 document, write(Daymsgtoday-1); 六、实训效果J / D xp.x台重与 x、二 C 帙/D；/rr材/*5富行潮代卬旨台例5hun1 力 I I按日期显示攥示信息今天交JavaSaiptia告七、实训报告要求按照要求写出本工程的实训报告，规范、完整、表述科学，知识点和技能点 以及实训结果都应该具备。