《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH04 JavaScript语句和函数

JavaScript与jQuery

网页前端开发与设计-第2版学校名称：XXXX主讲教师：XXXX第4章JavaScript语句和函数本章学习目标 掌握JavaScript条件语句的用法； 掌握JavaScript循环语句的用法； 掌握JavaScript函数的使用。目录4.1JavaScript条件语句4.2JavaScript循环语句4.3JavaScript函数4.4阶段案例：猜数字小游戏4.1JavaScript条件语句4.1.1if语句4.1.2switch语句4.1.1if语句在各类计算机程序语言中，最常见的条件语句就是if语句。1.if语句2.ifelse语句3.ifelse-ifelse语句4.1.1if语句1.if语句最简单的if语句由单个条件组成，语法规则如下：例如判断成绩等级，如果高于90分弹出对话框提示为Excellent，代码如下：if(条件){

条件为真（true）时执行的代码}varscore=99;if(score>90){alert("Excellent!");}4.1.1if语句2.ifelse语句当判断条件成立与否都需要有对应的处理时可以使用if-else语句。其语法格式如下：if(条件){

条件为真（true）时执行的代码}else{

条件为假（false）时执行的代码}如果条件成立则执行紧跟if语句的代码部分，否则执行跟在else语句后面的代码部分。这些代码均可以是单行语句，也可以是一段代码块。4.1.1if语句2.ifelse语句例如同样是判断成绩等级，如果大于等于60分则提示弹出对话框提示“考试通过！”，否则提示“不及格！”。修改后的代码如下：varscore=99;if(score>=60){alert("考试通过!");}else{alert("不及格!");}4.1.1if语句3.ifelse-ifelse语句当有多个条件分支需要分别判断时，可以使用elseif语句。if(条件1){

条件1为真（true）时执行的代码}elseif(条件2){

条件2为真（true）时执行的代码}else{

所有条件都为假（false）时执行的代码}其中的elseif语句可以根据实际需要有一个或多个。4.1.1if语句【例4-1】JavaScriptif-else语句的简单应用

4.1.2switch语句当对于同一个变量需要进行多次条件判断时，也可以使用switch语句代替多重if-elseif-else语句。4.1.2switch语句语法格式如下：switch(变量){case值1：

执行代码块1break;case值2：

执行代码块2break;

……case值n：

执行代码块nbreak;[default：

以上条件均不符合时的执行代码块]}4.1.2switch语句【例4-2】JavaScriptswitch语句的简单应用4.2JavaScript循环语句4.2.1for循环4.2.2for-in循环4.2.3while循环4.2.4do-while循环4.2.5break和continue4.2JavaScript循环语句

在JavaScript中有四种类型的循环语句。for：在指定的次数中循环执行代码块。for-in：循环遍历对象的属性。while：当条件为true时循环执行代码块。do-while：与while循环类似，只不过是先执行代码块再检测条件是否为true。4.2.1for循环for循环的语法结构如下：for(语句1;语句2;语句3){

代码块}

其中:语句1在循环开始之前执行；语句2为循环的条件；语句3为代码块被执行后需要执行的内容。4.2.1for循环例如：varmsg="";for(vari=0;i<10;i++){msg+="第"+i+"行\n";}alert(msg);上述代码表示从变量i=0开始执行for循环，每次执行前判断变量i是否小于10，如果满足条件则执行for循环内部的代码块，然后令变量i自增1。直到变量i不再小于10则终止该循环语句。4.2.1for循环通常情况下语句1都是用于声明循环所需使用的变量初始值，例如i=0。该语句也可以在for循环之前就声明完成，并在for循环条件中省略语句1的内容。例如：vari=0;for(;i<10;i++){msg+="第"+i+"行\n";}alert(msg);上述代码的运行效果与前一段示例完全相同。4.2.1for循环【例4-3】JavaScriptfor循环的简单应用

4.2.2for-in循环在JavaScript中，for-in循环可以用于遍历对象的所有属性和方法。其语法结构如下：for(xinobject){

代码块}其中x是变量，每次循环将按照顺序获取对象中的一个属性或方法名；object指的是被遍历的对象。4.2.2for-in循环例如：varpeople=newObject();="Mary";people.age=20;people.major="ComputerScience";for(xinpeople){msg+=people[x];}alert(msg);其中变量x指的是people对象中的属性名称，而people[x]指的是对应的属性值。4.2.2for-in循环【例4-4】JavaScriptfor-in循环的简单应用

4.2.3while循环while循环又称为前测试循环，必须先检测表达式的条件是否满足，如果符合条件才开始执行循环内部的代码块。其语法结构如下：while(条件表达式){

代码块}4.2.3while循环例如：vari=1;while(i<10){i++;}上述代码表示将初始值为1的变量i进行自增，在没有超过10的情况下每次自增1。4.2.3while循环【例4-5】JavaScriptwhile循环的简单应用4.2.4do-while循环do-while循环又称为后测试循环，不论是否符合条件都先执行一次循环内的代码块，然后再判断是否满足表达式的条件，如果符合条件则进入下一次循环，否则将终止循环。其语法结构如下：do{

代码块}while(条件表达式)4.2.4do-while循环例如：vari=1;do{i++;}while(i<10)4.2.4do-while循环【例4-6】JavaScriptdo-while循环的简单应用4.2.5break和continuebreak语句可以用于终止全部循环，continue语句用于中断本次循环，但是会继续运行下一次循环语句。4.2.5break和continue【例4-7】JavaScriptbreak的简单应用4.2.5break和continue【例4-8】JavaScriptcontinue的简单应用4.3JavaScript函数4.3.1函数的基本结构4.3.2函数的调用4.3.3函数的返回值4.3.1函数的基本结构函数是在调用时才会执行的一段代码块，可以重复使用。其基本语法结构如下：function函数名称(参数0,参数1,……参数N){

待执行代码块}上述语法结构是由关键词function、函数名称、小括号内的一组可选参数以及大括号内的待执行代码块组成的。其中函数名称和参数个数均可以自定义，待执行的代码块可以是一句或多句JavaScript代码组成。4.3.1函数的基本结构例如：functionwelcome(){alert("WelcometoJavaScriptWorld");}上述代码定义了一个名称为welcome的函数，该函数的参数个数为0。在待执行的代码部分只有一句alert()方法，用于在浏览器上弹出对话框并显示双引号内的文本内容。4.3.1函数的基本结构如果需要弹出的对话框每次显示的文本内容不同，可以使用参数传递的形式：functionwelcome(msg){alert(msg);}此时为之前的welcome函数方法传递了一个参数msg，在待执行的代码部分修改原先的alert()方法，用于在浏览器上弹出对话框并动态显示msg传递的文本内容。4.3.2函数的调用函数可以通过使用函数名称的方法进行调用。例如：如果该函数存在参数，则调用时必须在函数的小括号内传递对应的参数值。welcome();welcome("HelloJavaScript!");4.3.2函数的调用函数可以在JavaScript代码的任意位置进行调用，也可以在指定的事件发生时调用。例如在按钮的点击事件中调用函数：<buttononclick="welcome()">点击此处调用函数</button>上述代码中的onclick属性表示元素被鼠标点击的状态触发等号右边的内容。4.3.2函数的调用【例4-9】JavaScript函数的简单调用4.3.3函数的返回值相比Java而言，JavaScript函数更加简便，无需特别声明返回值类型。JavaScript函数如果存在返回值，直接在大括号内的代码块中使用return关键词后面紧跟需要返回的值即可。4.3.3函数的返回值例如：functiontotal(num1,num2){returnnum1+num2;}varresult=total(8,10);//返回值是18alert(result);上述代码对两个数字进行了求和运算，使用自定义变量result获取total函数的返回值。此时在total函数的参数位置填入了两个测试数据，得到了正确的计算结果。4.3.3函数的返回值函数也可以带有多个return语句：functionmaxNum(num1,num2){if(num1>num2)returnnum1;elsereturnnum2;}varresult=maxNum(99,100);//返回值是100alert(result);上述代码对两个数字进行了比大小运算，然后返回其中较大的数值。使用自定义变量result获取maxNum函数的返回值。此时在maxNum函数的参数位置填入了两个测试数据，得到了正确的计算结果。4.3.3函数的返回值单独使用return语句可随时终止函数代码的运行。例如测试数值是否为偶数，如果是奇数则不提示，如果是偶数则弹出对话框：functiontestEven(num){if(num%2!=0)return;alert(num+"是偶数！");}testEven(99);//不会弹出对话框testEven(100);//会弹出对话框显示"100是偶数！"函数在执行到return语句时就直接退出了代码块，即使后续还有代码也不会被执行。本例中如果参数为奇数才能符合if条件然后触发return语句，因此后续的alert()方法不会被执行到，从而做到只有在参数为偶数时才显示对话框。4.3.3函数的返回值【例4-10】JavaScript带有返回值函数的应用4.4

阶段案例：猜数字小游戏4.4.1案例需求 4.4.2案例分析 4.4.3案例制作 4.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);4.4.2案例分析1. 生成随机数cont.稍加修改，想随机生成一个0和N之间的整数（既包含0，也包含N），js代码如下：进阶思考，想随机生成一个M和N之间的整数（既包含M，也包含N），js代码如下：这里的随机数其实是0和N-M之间的一个数字，再加上至少要生成的最小底数M。varx=Math.floor(Math.random()*(N+1));varx=Math.floor(Math.random()*(N-M+1))+M;4.4.2案例分析1. 生成随机数cont.不妨封装一个自定义函数用于随机生成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(1,100)来获取1-100之间的随机整数（包含1和100本身）。4.4.2案例分析2. 判断数字有效性本次案例要求玩家输入的必须是数字，否则无法进行比大小操作，判断变量是否是数字的参考js代码如下：varx1=99;varx2=3.14;varx3=“Hello!”;isNaN(x1)//返回值是falseisNaN(x2)//返回值是falseisNaN(x3)//返回值是true4.4.2案例分析2. 判断数字有效性cont.在确定是数字后还需要判断是否为整数，可以求数字与1的余数，参考js代码如下：varx=99;vary=3.14;x%1//整数的返回值是0y%1//小数返回值不是0提示：以上内容掌握之后也可用到第3章阶段案例中来确保输入数字的有效性。4.4.2案例分析2. 判断数字有效性cont.最后就是确认是整数后还得看下是否在游戏要求的0-100之间，参考js代码如下：varx1=99;varx2=128;

x1<1||x1>100//返回false，未超出范围x2<1||x2>100//返回true，超出范围4.4.2案例分析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.4.4.3案例制作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. //请玩家输入数字varmyNum=prompt("请输入您要猜的数字（1-100之间，包含1和100本身）");29. 4.4.3案例制作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. }4.4.3案例制作43. /