1、JavaScript程序设计程序设计第第3章章 JavaScript程序构成程序构成3.1 程序控制流3.2 函数3.3 事件及事件处理3.4 实战：Bingo卡片游戏JavaScript程序设计程序设计 if条件语句 if(condition)statement1 else statement2;if(i 30)alert(i大于30);else if(i 0)alert(i小于0);else alert(i在0到30之间);3 3.1.1 程序控制流程序控制流第3章 JavaScript程序构成JavaScript程序设计程序设计 for循环语句 for(initialization;ex
2、pression;post-loop-expression)statement;var count=10;for(var i=0;i count;i+)alert(i);3 3.1.1 程序控制流程序控制流第3章 JavaScript程序构成JavaScript程序设计程序设计 for.in循环语句 for(property in expression)statement;for(var propName in window)document.write(propName);3 3.1.1 程序控制流程序控制流第3章 JavaScript程序构成JavaScript程序设计程序设计 while
3、循环语句 while(expression)statement;var i=0;while(i 10)alert(i);i+=2;3 3.1.1 程序控制流程序控制流第3章 JavaScript程序构成JavaScript程序设计程序设计 label语句 label:statementstart i:53 3.1.1 程序控制流程序控制流第3章 JavaScript程序构成JavaScript程序设计程序设计 break和continue语句 break和continue语句用于循环中精确地控制代码的执行。break语句可以立即退出循环，阻止再次反复执行任何代码。而continue语句只是退出
4、当前循环，根据控制表达式还允许继续进行下一次循环。3 3.1.1 程序控制流程序控制流第3章 JavaScript程序构成JavaScript程序设计程序设计 do.while语句 dostatements;while(condition)do x=x+The number is +i+;i+;while(i5);3 3.1.1 程序控制流程序控制流第3章 JavaScript程序构成JavaScript程序设计程序设计 switch语句 switch(expression)case value:statement;break;default:statement;3 3.1.1 程序控制流程序
5、控制流第3章 JavaScript程序构成JavaScript程序设计程序设计 函数表达式及语法 两种常用的定义函数方式：第一种：使用函数声明语法，第二种：使用函数表达式定义。function sum(num1,num2)/函数体var sum=function(num1,num2)/函数体;3.2 3.2 函数函数第3章 JavaScript程序构成JavaScript程序设计程序设计 函数参数 JavaScript函数的参数与大多数其他语言的函数参数有所不同。函数不介意传递进来多少个参数，也不在乎传进来的参数是什么数据类型。甚至可以不传参数。3.2 3.2 函数函数第3章 JavaScri
6、pt程序构成JavaScript程序设计程序设计 函数返回值 JavaScript函数返回值关键字是return。一个函数内处理的结果可以使用return 返回，这样在调用函数的地方就可以用变量接收返回结果。3.2 3.2 函数函数第3章 JavaScript程序构成JavaScript程序设计程序设计 函数4种调用模式 （1）函数调用模式；（2）方法调用模式；（3）构造器调用模式；（4）Apply调用模式；3.2 3.2 函数函数第3章 JavaScript程序构成JavaScript程序设计程序设计 apply和call的区别 call方法：方法：语法定义为：call(thisObj,ar
7、g1,arg2,.argN)参数thisObj为可选项。将被用作当前对象的对象。arg1，arg2，argN也为可选项，传递的参数序列；apply方法：方法：语法定义为：apply(thisObj,argArray)；3.2 3.2 函数函数第3章 JavaScript程序构成JavaScript程序设计程序设计 递归调用 递归函数：就是在函数体内调用函数本身。function factorial(num)if(num=1)return 1;else return num*factorial(num-1);3.2 3.2 函数函数第3章 JavaScript程序构成JavaScript程序设计
8、程序设计 函数作用域var scope=global;function fun()console.log(scope);var scope=local;console.log(scope);fun();3.2 3.2 函数函数第3章 JavaScript程序构成JavaScript程序设计程序设计 异常处理 try /可能发生错误的代码catch(error)/发生错误时处理方式3.2 3.2 函数函数第3章 JavaScript程序构成JavaScript程序设计程序设计 闭包 闭包就是能够读取其他函数内部变量的函数；function fun1()var n=999;nAdd=functio
9、n()n+=1 function fun2()console.log(n);return fun2;var result=fun1();result();nAdd();result();3.2 3.2 函数函数第3章 JavaScript程序构成JavaScript程序设计程序设计 事件 JavaScript与HTML之间的交互是通过事件来实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。3.3 3.3 事件及事件处理事件及事件处理第3章 JavaScript程序构成JavaScript程序设计程序设计 常用事件 （1）窗口事件：onLoad、onUnload、onResize、o
10、nMove、onAbort、onError、onFocus、onBlur；（2）鼠标事件：onClick、onDbClick、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove；（3）表单事件：onBlur、onChange、onFocus、onReset、onSubmit；（4）键盘事件：onKeyPress、onKeyDown、onKeyUp；3.3 3.3 事件及事件处理事件及事件处理第3章 JavaScript程序构成JavaScript程序设计程序设计 实战 （1）案例）案例描述描述 用JavaScript循环实现Bing
11、o卡片游戏。Bingo卡片是5*5的方形，5个列上标着B-I-N-G-O，格子里包含175的数字。正中间通常是一个空的格子，印着单词free。每列可以包含的数字的范围是：B列包含数字115；I列包含数字1630；N列包含数字3145；G列包含数字4660；O列包含数字6175。（2）实现）实现思路思路 Bingo卡片总共有24个空格需要填充数字，且每个数字互不重复；每列数字有固定的取值范围。这样首先需要创建一个for循环，用i作循环变量，循环24次；每次循环调用函数依次往Bingo卡片中的空格插入数字。3 3.4.4 实战：实战：BingoBingo卡片卡片游戏游戏第3章 JavaScript程序构成JavaScript程序设计程序设计 程序控制流 函数 事件及事件处理总结总结第3章 JavaScript程序构成JavaScript程序设计程序设计
