JavaScript程序设计基础教程（慕课版）（第2版） 实训指导-3.1 使用条件语句-3.7利用递归函数求阶乘相加_第1页
JavaScript程序设计基础教程（慕课版）（第2版） 实训指导-3.1 使用条件语句-3.7利用递归函数求阶乘相加_第2页
JavaScript程序设计基础教程（慕课版）（第2版） 实训指导-3.1 使用条件语句-3.7利用递归函数求阶乘相加_第3页
JavaScript程序设计基础教程（慕课版）（第2版） 实训指导-3.1 使用条件语句-3.7利用递归函数求阶乘相加_第4页
JavaScript程序设计基础教程（慕课版）（第2版） 实训指导-3.1 使用条件语句-3.7利用递归函数求阶乘相加_第5页
已阅读5页，还剩11页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

实训案例名称：使用条件语句1．任务介绍假设学生A数学考试成绩得了78分，请选择合适的条件语句判断学生A的成绩等级。（60分以下为不及格；60分到70分为及格；70分到80分为良好；80分到100分为优秀）2．任务目标学会JavaScript各种条件语句的使用场景。3．实现思路这里要判断的是学生A的成绩属于哪个等级，很明显不能用循环语句来实现；switch语句也并不太合适，因为要比较的是几个区间值；那么只有用if…else…条件语句才是最恰当的。4．实现代码完整代码如脚本3-1所示。脚本3-1.html<!DOCTYPEHTML><html><head><metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>if...else</title><scripttype="text/JavaScript">varscore=78;//score变量存储成绩，初值为80if(score<60){document.write("成绩不及格。");}elseif(score>=60&&score<=70){document.write("成绩及格。");}elseif(score>70&&score<=80){document.write("成绩良好。");}else{document.write("成绩优秀。");}</script></head><body></body></html>5．运行结果运行结果如图3.5所示。图3.5任务3-1运行结果实训案例名称：定义及调用函数1．任务介绍网页中有一按钮（名字“点击我”），当单击按钮后调用函数contxt()，弹出对话框“调用函数成功!”。2．任务目标学会function函数定义以及函数的调用。3．实现思路首先编写一个函数contxt，函数内容为弹出alert警告框，然后用函数调用的方式在单击按钮时调用即可。4．实现代码完整代码脚本如脚本3-5所示。脚本3-5.html<!DOCTYPEHTML><html><head><metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>函数调用</title><scripttype="text/javascript">functioncontxt(){alert("调用函数成功!");}</script></head><body><form><inputtype="button"value="点击我"onclick="contxt()"></form></body></html>5．运行结果运行结果如图3.17所示。图3.17任务3-2运行结果实训案例名称：使用递归函数1．任务介绍编写程序求100+99+…+2+1的结果。2．任务目标学会JavaScript递归函数的使用。3．实现思路定义一个函数，设置循环变量在函数内部调用自身。4．实现代码完整代码如脚本3-6所示。脚本3-6.html<!DOCTYPEhtml><htmllang="en"><head></head><body><script>varrecursion=function(i){if(i<1)return0;returni+recursion(i-1);}console.log(recursion(100));</script></body></html>5．运行结果运行显示结果如图3.18所示。图3.18任务3-3运行结果实训案例名称：异常捕获与处理1．任务介绍制造一个引用错误并用异常语句进行捕获。2．任务目标学会JavaScript异常捕获处理。3．实现思路设置一个变量引用错误示例，用JavaScript异常捕获语句try…catch…来捕获代码中的错误。4．实现代码完整代码如脚本3-7所示。脚本3-7.html<!DOCTYPEHTML><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>JavaScript异常捕获</title><scripttype="text/javascript">functionfun(){try{t;}catch(error){console.log(error.message);console.log();}}fun();</script></head><body></body></html>5．运行结果运行显示结果如图3.21所示。图3.21任务3-4运行结果实训案例名称：使用JavaScript事件处理程序1．任务介绍给一个dom同时绑定两个单击事件，一个用捕获，一个用冒泡，那么事件的执行顺序是怎么样的？编写代码并分析。2．任务目标学会使用JavaScript事件处理程序，理解捕获事件和冒泡事件执行顺序。3．实现思路定义4个嵌套的div元素，给这4个元素绑定捕获和冒泡事件。JavaScript所有事件的顺序是：其他元素捕获阶段事件>本元素代码顺序事件>其他元素冒泡阶段事件。所以无论是冒泡事件还是捕获事件，元素都会先执行捕获阶段事件。从上往下，如有捕获事件，则先执行捕获事件；一直向下到目标元素后，从目标元素开始向上执行冒泡元素（在向上执行过程中，已经执行过的捕获事件不再执行，只执行冒泡事件）。addEventListener函数的第3个参数设置为false说明不为捕获事件，即为冒泡事件。4．实现代码脚本3-8.html<!DOCTYPEhtml><htmllang="en"><head></head><body><divid='one'><divid='two'><divid='three'><divid='four'></div></div></div></div><scripttype='text/javascript'>varone=document.getElementById('one');vartwo=document.getElementById('two');varthree=document.getElementById('three');varfour=document.getElementById('four');one.addEventListener('click',function(){console.log('one');},true);two.addEventListener('click',function(){console.log('two');},false);three.addEventListener('click',function(){console.log('three');},true);four.addEventListener('click',function(){console.log('four');},false);</script></body></html>5．运行结果单击four元素，four元素为目标元素，one为根元素祖先，所以从one开始向下判断执行。one为捕获事件，输出one；two为冒泡事件，忽略；three为捕获事件，输出three；four为目标元素，开始向上冒泡执行，输出four。three为捕获已执行，忽略；two为冒泡事件，输出two；one为捕获已执行，忽略。最终执行结果为：onethreefourtwo，如图3.28所示。图3.28任务3-5运行结果实训案例名称：用循环实现Bingo卡片游戏1．案例描述Bingo卡片是5*5的方形，5个列上标着B-I-N-G-O，格子里包含1～75的数字。正中间通常是一个空的格子，印着单词free。每列可以包含的数字的范围是：B列包含数字1～15；I列包含数字16～30；N列包含数字31～45；G列包含数字46～60；O列包含数字61～75。2．实现思路Bingo卡片总共有24个空格需要填充数字，且每个数字互不重复；每列数字有固定的取值范围。这样首先需要创建一个for循环，用i作循环变量，循环24次；每次循环调用函数依次往Bingo卡片中的空格插入数字。3．实现代码完整代码如脚本3-29所示。脚本3-29.html<!DOCTYPEhtml><html><head><title>MakeYourOwnBingoCard</title><linkrel="stylesheet"href="css01.css"><scriptsrc="script01.js"></script></head><body><h1>CreateABingoCard</h1><table><tr><th>B</th><th>I</th><th>N</th><th>G</th><th>O</th></tr><tr><tdid="square0"> </td><tdid="square5"> </td><tdid="square10"> </td><tdid="square14"> </td><tdid="square19"> </td></tr><tr><tdid="square1"> </td><tdid="square6"> </td><tdid="square11"> </td><tdid="square15"> </td><tdid="square20"> </td></tr><tr><tdid="square2"> </td><tdid="square7"> </td><tdid="free">Free</td><tdid="square16"> </td><tdid="square21"> </td></tr><tr><tdid="square3"> </td><tdid="square8"> </td><tdid="square12"> </td><tdid="square17"> </td><tdid="square22"> </td></tr><tr><tdid="square4"> </td><tdid="square9"> </td><tdid="square13"> </td><tdid="square18"> </td><tdid="square23"> </td></tr></table><p><ahref="脚本3-29.html"id="reload">Clickhere</a>tocreateanewcard</p></body></html>css01.cssbody{background-color:white;color:black;font-size:20px;font-family:"LucidaGrande",Verdana,Arial,Helvetica,sans-serif;}h1,th{font-family:Georgia,"TimesNewRoman",Times,serif;}h1{font-size:28px;}table{border-collapse:collapse;}th,td{padding:10px;border:2px#666bsolid;text-align:center;width:20%;}#free{background-color:#f66;}script01.jswindow.onload=bingocard;varnums=newArray(76);functionbingocard(){if(document.getElementById){for(vari=0;i<24;i++){setSquare(i);}}else{alert("Sorry,yourbrowserdoesn'tsupportthisscript");}}functionsetSquare(thisSquare){varcurrSquare="square"+thisSquare;varcolPlace=newArray(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);varcolBasis=colPlace[thisSquare]*15;varnewnum; do{newnum=colBasis+getNewNum()+1;}while(nums[newnum]); nums[newnum]=true;document.getElementById(currSquare).innerHTML=newnum;}functiongetNewNum(){returnMath.floor(Math.random()*15);}图3.52图3.52案例3-1运行结果从运行结果看出，最终B列的数值范围为1～15；I列的数值范围为16～30；N列的数值范围为31～45；G列的数值范围为46～60；O列的数值范围为61～75。脚本3-29.html和css01.css搭建Bingo卡片的框架，脚本script01.js最终实现Bingo卡片填充数值。window.onload=bingocard；即当窗口完成加载时调用bingocard函数。varnums=newArray(76)；即将变量nums声明为一个包含76个对象的数组。函数bingocard中，先用if条件语句if(document.getElementById)判断对象是否存在，如果存在则继续脚本的执行。这里定义一个for循环，用i作为循环变量循环24次，目的是调用函数setSquare生成随机数填充Bingo卡片的24个空格。setSquare函数中定义数组colPlace，用来限制哪些随机数可以放在哪一列，定义BINGO列编号分别为01234，这样每一列数字可以这样来计算：（列号*15）+（1～15的随机数）。setSquare函数中do…while循环用来判断生成的随机数是否已经在Bingo卡片中使用过，这里避免生成的Bingo卡片出现重复数字。实训案例名称：利用递归函数求阶乘相加1．案例描述利用递归函数编写求s=1!+2!+3!+…+9!+10!结果的程序。2．实现思路s=1!+2!+3!+…+9!+10!，这里可以用两个递归函数来实现，递归函

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论