《JavaScript与jQuery网页前端开发与设计-第2版》 第04章教案-JavaScript语句与函数

《JavaScript与jQuery网页前端开发与设计-第2版》教案第4章JavaScript入门一、教学目标：掌握JavaScript条件语句的用法；掌握JavaScript循环语句的用法；掌握JavaScript函数的使用。二、教学重点和难点：重点：JavaScript语句；难点：JavaScript函数的使用。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要内容是JavaScript语句与函数，包括JavaScript的条件语句、循环语句的使用，以及JavaScript函数的应用。五、教学基本内容：4.1JavaScript条件语句4.1.1if语句在各类计算机程序语言中，最常见的条件语句就是if语句。1. if语句最简单的if语句由单个条件组成，语法规则如下：if(条件){条件为真（true）时执行的代码}在if后面的括号中填入一个判断条件，一般来说要求填入条件的运算结果应该为布尔值。如果填入其他数据类型的内容，系统也会先将其转换为布尔值再执行后续操作。如果该条件的结果为真（true）则执行大括号内部的代码，可以是单行代码也可以是代码块；如果条件判断结果为假（false）则直接跳过此段代码不作任何操作。例如判断成绩等级，如果高于90分弹出对话框提示为Excellent，代码如下：varscore=99;if(score>90){alert("Excellent!");}2. if-else语句当判断条件成立与否都需要有对应的处理时可以使用if-else语句。其语法格式如下：if(条件){条件为真（true）时执行的代码}else{条件为假（false）时执行的代码}如果条件成立则执行紧跟if语句的代码部分，否则执行跟在else语句后面的代码部分。这些代码均可以是单行语句，也可以是一段代码块。例如同样是判断成绩等级，如果大于等于60分则提示弹出对话框提示“考试通过！”，否则提示“不及格！”。修改后的代码如下：varscore=99;if(score>=60){alert("考试通过!");}else{alert("不及格!");}3. if-elseif-else语句当有多个条件分支需要分别判断时，可以使用elseif语句。if(条件1){条件1为真（true）时执行的代码}elseif(条件2){条件2为真（true）时执行的代码}else{所有条件都为假（false）时执行的代码}如果条件成立则执行紧跟if语句的代码部分，否则执行elseif对应的条件判断，如果前面所有条件都不符合再执行最后一个else条件对应的代码。其中的elseif语句可以根据实际需要有一个或多个。【例4-1】JavaScriptif-else语句的简单应用【代码说明】本示例使用了if-elseif-else语句判断当前日期为星期几。首先创建Date对象，然后使用getDay()方法获取当前日期为一周内的第几天，最后使用if语句分别判断返回值为0-6的每一种情况，并使用alert()方法输出提示语句。4.1.2switch语句当对于同一个变量需要进行多次条件判断时，也可以使用switch语句代替多重if-elseif-else语句。语法格式如下：switch(变量){case值1：执行代码块1break;case值2：执行代码块2break;……case值n：执行代码块nbreak;[default：以上条件均不符合时的执行代码块]}首先在switch后面的小括号中设置一个表达式（通常是一个变量），然后在每一个case语句中给出一个值与变量进行比对，如果不一致则跳过该case语句，继续对比下一个case中给出的值。当变量与对比的值完全一致时执行该case语句分支里面的代码块，然后使用break语句终止其余代码的执行。其中default分支用于执行以上条件均不符合的情况，中括号表示该语句片段为可选内容。【例4-2】JavaScriptswitch语句的简单应用使用switch语句改写上一个例题中的if-else语句，并达到同样的最终效果。4.2JavaScript循环语句在JavaScript中有四种类型的循环语句。 for：在指定的次数中循环执行代码块。 for-in：循环遍历对象的属性。 while：当条件为true时循环执行代码块。 do-while：与while循环类似，只不过是先执行代码块再检测条件是否为true。4.2.1for循环for循环的语法结构如下：for(语句1;语句2;语句3){代码块}其中语句1在循环开始之前执行；语句2为循环的条件；语句3为代码块被执行后需要执行的内容。例如：varmsg="";for(vari=0;i<10;i++){msg+="第"+i+"行\n";}alert(msg);上述代码表示从变量i=0开始执行for循环，每次执行前判断变量i是否小于10，如果满足条件则执行for循环内部的代码块，然后令变量i自增1。直到变量i不再小于10则终止该循环语句。通常情况下语句1都是用于声明循环所需使用的变量初始值，例如i=0。该语句也可以在for循环之前就声明完成，并在for循环条件中省略语句1的内容。例如：vari=0;for(;i<10;i++){msg+="第"+i+"行\n";}alert(msg);上述代码的运行效果与前一段示例完全相同。【例4-3】JavaScriptfor循环的简单应用4.2.2for-in循环在JavaScript中，for-in循环可以用于遍历对象的所有属性和方法。其语法结构如下：for(xinobject){代码块}其中x是变量，每次循环将按照顺序获取对象中的一个属性或方法名；object指的是被遍历的对象。例如：varpeople=newObject();="Mary";people.age=20;people.major="ComputerScience";for(xinpeople){msg+=people[x];}alert(msg);其中变量x指的是people对象中的属性名称，而people[x]指的是对应的属性值。【例4-4】JavaScriptfor-in循环的简单应用4.2.3while循环while循环又称为前测试循环，必须先检测表达式的条件是否满足，如果符合条件才开始执行循环内部的代码块。其语法结构如下：while(条件表达式){代码块}例如：vari=1;while(i<10){i++;}上述代码表示将初始值为1的变量i进行自增，在没有超过10的情况下每次自增1。【例4-5】JavaScriptwhile循环的简单应用【代码说明】本示例在JavaScript中使用while循环进行1-100的数字求和。首先声明变量i从1开始，只要变量i没有超过100就将其与求和变量sum相加，然后自增1进行下一次循环。直到变量i已经增长到100了停止循环语句，此时的变量sum返回值5050便是计算结果。4.2.4do-while循环do-while循环又称为后测试循环，不论是否符合条件都先执行一次循环内的代码块，然后再判断是否满足表达式的条件，如果符合条件则进入下一次循环，否则将终止循环。其语法结构如下：do{代码块}while(条件表达式)例如：vari=1;do{i++;}while(i<10)【例4-6】JavaScriptdo-while循环的简单应用【代码说明】本示例在JavaScript中声明了变量i的初始值为10，并在do-while循环的条件表达式中故意声明了一个不符合的条件（i<10）以检测运行效果。由于do-while循环会在查看条件之前就先运行一次，因此最终仍然会弹出提示框并显示变量i的当前值为10。4.2.5break和continuebreak语句可以用于终止全部循环，continue语句用于中断本次循环，但是会继续运行下一次循环语句。【例4-7】JavaScriptbreak的简单应用【代码说明】本示例包含了一个for循环语句：从变量i=1开始执行循环，每次i自增1直到取值变成10停止循环。当符合if条件执行到break语句时，会直接终止整个循环语句并忽略后面的代码。因此在页面输出的内容中只能显示变量值为1-4的情况，当变量i的值自增到5时符合if条件从而触发break语句终止了整个循环。【例4-8】JavaScriptcontinue的简单应用修改例4-7的内容，将其中JavaScript代码部分的break语句改为continue并查看效果。【代码说明】本示例是将上一个示例中的break语句修改为continue语句的对比版本。当符合if条件执行到continue语句时，会直接跳过后续的代码并跳转到下一次循环。因此在页面输出的内容中缺少了变量值为5的情况，但是后续变量值6-10均正常输出，不会受到影响。4.3JavaScript函数4.3.1函数的基本结构函数是在调用时才会执行的一段代码块，可以重复使用。其基本语法结构如下：function函数名称(参数0,参数1,……参数N){待执行代码块}上述语法结构是由关键词function、函数名称、小括号内的一组可选参数以及大括号内的待执行代码块组成的。其中函数名称和参数个数均可以自定义，待执行的代码块可以是一句或多句JavaScript代码组成。例如：functionwelcome(){alert("WelcometoJavaScriptWorld");}上述代码定义了一个名称为welcome的函数，该函数的参数个数为0。在待执行的代码部分只有一句alert()方法，用于在浏览器上弹出对话框并显示双引号内的文本内容。如果需要弹出的对话框每次显示的文本内容不同，可以使用参数传递的形式：functionwelcome(msg){alert(msg);}此时为之前的welcome函数方法传递了一个参数msg，在待执行的代码部分修改原先的alert()方法，用于在浏览器上弹出对话框并动态显示msg传递的文本内容。4.3.2函数的调用函数可以通过使用函数名称的方法进行调用。例如：welcome();如果该函数存在参数，则调用时必须在函数的小括号内传递对应的参数值。welcome("HelloJavaScript!");函数可以在JavaScript代码的任意位置进行调用，也可以在指定的事件发生时调用。例如在按钮的点击事件中调用函数：<buttononclick="welcome()">点击此处调用函数</button>上述代码中的onclick属性表示元素被鼠标点击的状态触发等号右边的内容。【例4-9】JavaScript函数的简单调用4.3.3函数的返回值相比Java而言，JavaScript函数更加简便，无需特别声明返回值类型。在Java语言中如果函数存在返回值则需要在函数名称前面注明类型（例如int、String、double等），即使无返回值也需要在函数名称前面加上void字样，表示返回值为空值。JavaScript函数如果存在返回值，直接在大括号内的代码块中使用return关键词后面紧跟需要返回的值即可。例如：functiontotal(num1,num2){returnnum1+num2;}varresult=total(8,10);//返回值是18alert(result);上述代码对两个数字进行了求和运算，使用自定义变量result获取total函数的返回值。此时在total函数的参数位置填入了两个测试数据，得到了正确的计算结果。函数也可以带有多个return语句：functionmaxNum(num1,num2){if(num1>num2)returnnum1;elsereturnnum2;}varresult=maxNum(99,100);//返回值是100alert(result);上述代码对两个数字进行了比大小运算，然后返回其中较大的数值。使用自定义变量result获取maxNum函数的返回值。此时在maxNum函数的参数位置填入了两个测试数据，得到了正确的计算结果。单独使用return语句可随时终止函数代码的运行。例如测试数值是否为偶数，如果是奇数则不提示，如果是偶数则弹出对话框：functiontestEven(num){if(num%2!=0)return;alert(num+"是偶数！");}testEven(99);//不会弹出对话框testEven(100);//会弹出对话框显示"100是偶数！"函数在执行到return语句时就直接退出了代码块，即使后续还有代码也不会被执行。本例中如果参数为奇数才能符合if条件然后触发return语句，因此后续的alert()方法不会被执行到，从而做到只有在参数为偶数时才显示对话框。【例4-10】JavaScript带有返回值函数的应用在JavaScript中创建自定义名称的函数用于比较两个数字之间的大小，并返回较大值。4.4阶段案例：猜数字小游戏4.4.1案例需求制作一款猜数字小游戏，每轮游戏系统都随机生成一个1-100之间的整数（包含1和100本身）让玩家猜，玩家输入猜的数字后系统会提示猜大了、小了或者猜中了，如果已经猜了8个回合仍未猜对则强制结束游戏。刷新网页后可以重新开始下一轮游戏。4.4.2案例分析1. 生成随机数JavaScript中有一个Math.random()函数用于生成[0,1)之间的小数（即该数字大于等于0.0，但是小于1.0），并且可以通过Math.floor()函数向下取整。那么如果想随机生成一个0和N之间的整数（包含0，但不包含N），js代码如下：varx=Math.floor(Math.random()*N);稍加修改，想随机生成一个0和N之间的整数（既包含0，也包含N），js代码如下：varx=Math.floor(Math.random()*(N+1));进阶思考，想随机生成一个M和N之间的整数（既包含M，也包含N），js代码如下：varx=Math.floor(Math.random()*(N-M+1))+M;这里的随机数其实是0和N-M之间的一个数字，再加上至少要生成的最小底数M。不妨封装一个自定义函数用于随机生成a-b之间的数字，参考js代码如下：//随机生成一个a-b之间的数字（包含a和b本身）functiongetRandomNum(a,b){returnMath.floor(Math.random()*(b-a+1))+a;}代入数字进行尝试，例如直接调用varx=getRandomNum(5,10)就可以随机获得5-10之间的整数（包含5和10本身），那么本题就应该是调用getRandomNum(0,100)来获取0-100之间的随机整数（包含0和100本身）。2. 判断数字有效性本次案例要求玩家输入的必须是数字，否则无法进行比大小操作，判断变量是否是数字的参考js代码如下：varx1=99;varx2=3.14;varx3=“Hello!”;isNaN(x1)//返回值是falseisNaN(x2)//返回值是falseisNaN(x3)//返回值是true在确定是数字后还需要判断是否为整数，可以求数字与1的余数，参考js代码如下：varx=99;vary=3.14;x%1//整数的返回值是0y%1//小数返回值不是0提示：以上内容掌握之后也可用到第3章阶段案例中来确保输入数字的有效性。最后就是确认是整数后还得看下是否在游戏要求的0-100之间，参考js代码如下：varx1=99;varx2=128;x1<0||x1>100//返回false，未超出范围x2<0||x2>100//返回true，超出范围3. 循环游戏回合这里不妨试试使用while(true)来制作一个永久循环，直到判断出回合数超过8次再使用break强势停止循环，参考js代码如下：1. varcurrentRound=1;//当前回合数2. varmaxRound=8;//允许猜的总回合数3. 4. while(true){5. //游戏过程（待补充）6. 7. //回合数增加18. currentRound++;9. //如果回合用光10. if(currentRound>maxRound){11. alert("机会已用光！请刷新后重新开始。");//提示游戏结束12. break;//强制停止游戏13. }14. }4.4.3案例制作创建一个HTML文件，文件名可自定义，例如GuessGame.html。相关代码如下：1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="utf-8">5. <title>猜数字小游戏</title>6. </head>7. <body>8. <!--标题-->9. <h3>猜数字小游戏</h3>10. <!--水平线-->11. <hr>12. <script>13. varminNum=1;//允许猜的最小数14. varmaxNum=100;//允许猜的最大数15. varmaxRound=8;//允许猜的总回合数16. varcurrentRound=1;//当前回合数17. 18. //随机生成一个a-b之间的数字（包含a和b本身）19. functiongetRandomNum(a,b){20. returnMath.floor(Math.random()*(b-a+1))+a;21. }22. 23. //随机生成一个1到100之间的数字（包含1和100本身）24. varx=getRandomNum(minNum,maxNum);25. 26. while(true){27. //请玩家输入数字28. varmyNum=prompt("请输入您要猜的数字（1-100之间，包含1和100本身）");29. 30. //判断数字有效性31. if(isNaN(myNum)){//如果不是数字32. alert("您输入的不是数字，请重新输入！");33. continue;34. }35. elseif(myNum%1!==0){//如果不是整数36. alert("您输入的不是整数，请重新输入！");37. continue;38. }39. elseif(myNum<minNum||myNum>maxNum){//如果数字超出范围40. alert("您输入的数字超出范围了，请重新输入！");41. continue;42. }43. //正式比大小44. else{45. if(myNum>x){46. alert("猜大了！");//提示猜大了47. }48. elseif(myNum<x){49. alert("猜小了！");//提示猜小了50. }51. elseif(myNum==x){52. alert("猜对了！您一共用了"+currentRound+"回合。");53. break;//猜对了则停止游戏54. }55. }56. 57. //回合数增加158. currentRound++;59. //如果回合用光60. if(currentRound>maxRound){61. alert("机会已用光！请刷新后重新开始。");//提示游戏结束62. break;//强制停止游戏63. }64. }65. </script>66. </body>67. </html>4.4.4案例思考【拓展练习】可否改成猜0-1000之间的随机数字？能否修改游戏回合数为10回合？【进阶改造】请在学习了本书第5章中JavaScriptDOM技术或第10章jQueryHTMLDOM技术后，分别用这两种方式将每回合猜的数字以及提示大小的提示语句显示到页面上方便玩家查看。4.5本章小结本章主要介绍了JavaScript的基础知识，包括JavaScript的语法规则、变量声明和数据类型等内容，并介绍了JavaScript不同类型之间的转换方法。在JavaScript运算符部分，根据运算符的功能不同分别介绍了赋值运算符、算术运算符、逻辑运算符、关系运算符、相等性运算符以及条件运算符。在JavaScript条件语句部分介绍了if和switch语句的用法；在JavaScript循环语句部分介绍了for、for-in、while、do-while循环的用法。在JavaScript函数部分主要介绍了函数的基本结构、调用方法与返回值处理。最后还介绍了JavaScript对于文档对象模型DOM以及浏览器对象模型BOM的使用方法。其中DOM部分主要介绍了如何查找、添加、删除HTML元素、修改元素的内容或属性、改变元素的CSS样式、以及元素事件处理；BOM部分主要介绍了Window、Screen、Location、History和Navigator对象的用法。本章阶段案例介绍了猜数字小游戏，系统随机生成一个1-100之间的整数让玩家猜，共计8个回合，系统会根据玩家输入的数字提示猜大了、小了、猜中了或游戏回合用光。六、课后习题1.已知学生成绩60分及以上为及格，试用if语句判断某学生成绩是否及格。答：varscore=99;//以99分为例，也可更换为其他分数进行测试if(score>=60)alert("及格！");elsealert("不及格！");2.已知1900年为鼠年，试用switch语句判断1900-2017年之间的任意年份是十二生肖中的哪一年。答：已知1900年为鼠年，那么每过12年就都还是鼠年。