JavaScript程序设计基础教程-第3章-JavaScript程序构成课件

JavaScript程序设计JavaScript程序设计1第3章JavaScript程序构成3.1程序控制流3.2函数3.3事件及事件处理3.4实战：Bingo卡片游戏JavaScript程序设计第3章JavaScript程序构成3.1程序控制流3.2

if条件语句

if(condition)statement1elsestatement2;if(i>30) {alert("i大于30");}elseif(i<0) {alert("i小于0");}else {alert("i在0到30之间");}3.1程序控制流第3章JavaScript程序构成JavaScript程序设计if条件语句3.1程序控制流第3章JavaScript3

for循环语句

for(initialization;expression;post-loop-expression)statement;varcount=10;for(vari=0;i<count;i++){ alert(i);}3.1程序控制流第3章JavaScript程序构成JavaScript程序设计for循环语句3.1程序控制流第3章JavaScrip4

for...in循环语句

for(propertyinexpression)statement;for(varpropNameinwindow){ document.write(propName);}3.1程序控制流第3章JavaScript程序构成JavaScript程序设计for...in循环语句3.1程序控制流第3章Java5

while循环语句

while(expression)statement;vari=0;while(i<10){ alert(i); i+=2;}3.1程序控制流第3章JavaScript程序构成JavaScript程序设计while循环语句3.1程序控制流第3章JavaScr6

label语句

label:statementstarti:53.1程序控制流第3章JavaScript程序构成JavaScript程序设计label语句3.1程序控制流第3章JavaScrip7

break和continue语句

break和continue语句用于循环中精确地控制代码的执行。break语句可以立即退出循环，阻止再次反复执行任何代码。而continue语句只是退出当前循环，根据控制表达式还允许继续进行下一次循环。3.1程序控制流第3章JavaScript程序构成JavaScript程序设计break和continue语句3.1程序控制流第3章8

do...while语句

do{statements;}while(condition)do{x=x+"Thenumberis"+i+"<br>";i++;}while(i<5);3.1程序控制流第3章JavaScript程序构成JavaScript程序设计do...while语句3.1程序控制流第3章Java9

switch语句

switch(expression)casevalue:statement;break;default:statement;3.1程序控制流第3章JavaScript程序构成JavaScript程序设计switch语句3.1程序控制流第3章JavaScri10

函数表达式及语法

两种常用的定义函数方式：第一种：使用函数声明语法，第二种：使用函数表达式定义。functionsum(num1,num2){//函数体}varsum=function(num1,num2){//函数体};3.2函数第3章JavaScript程序构成JavaScript程序设计函数表达式及语法3.2函数第3章JavaScript程11

函数参数

JavaScript函数的参数与大多数其他语言的函数参数有所不同。函数不介意传递进来多少个参数，也不在乎传进来的参数是什么数据类型。甚至可以不传参数。3.2函数第3章JavaScript程序构成JavaScript程序设计函数参数3.2函数第3章JavaScript程序构成J12

函数返回值

JavaScript函数返回值关键字是return。一个函数内处理的结果可以使用return返回，这样在调用函数的地方就可以用变量接收返回结果。3.2函数第3章JavaScript程序构成JavaScript程序设计函数返回值3.2函数第3章JavaScript程序构成13

函数4种调用模式

（1）函数调用模式；

（2）方法调用模式；

（3）构造器调用模式；

（4）Apply调用模式；3.2函数第3章JavaScript程序构成JavaScript程序设计函数4种调用模式3.2函数第3章JavaScript程14apply和call的区别

call方法：语法定义为：call([thisObj[,arg1[,arg2[,[,.argN]]]]])参数thisObj为可选项。将被用作当前对象的对象。arg1，arg2，argN也为可选项，传递的参数序列；apply方法：语法定义为：apply([thisObj[,argArray]])；3.2函数第3章JavaScript程序构成JavaScript程序设计apply和call的区别3.2函数第3章JavaSc15

递归调用

递归函数：就是在函数体内调用函数本身。functionfactorial(num){if(num<=1){return1;}else{returnnum*factorial(num-1);}}3.2函数第3章JavaScript程序构成JavaScript程序设计递归调用3.2函数第3章JavaScript程序构成J16

函数作用域varscope="global";functionfun(){console.log(scope);varscope="local";console.log(scope);}fun();3.2函数第3章JavaScript程序构成JavaScript程序设计函数作用域3.2函数第3章JavaScript程序构成17

异常处理try{//可能发生错误的代码}catch(error){//发生错误时处理方式}3.2函数第3章JavaScript程序构成JavaScript程序设计异常处理3.2函数第3章JavaScript程序构成J18

闭包闭包就是能够读取其他函数内部变量的函数；functionfun1(){varn=999;nAdd=function(){n+=1}functionfun2(){console.log(n);}returnfun2;}varresult=fun1();result();nAdd();result();3.2函数第3章JavaScript程序构成JavaScript程序设计闭包3.2函数第3章JavaScript程序构成Jav19

事件

JavaScript与HTML之间的交互是通过事件来实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。<inputtype="button"value="clickme"onclick="alert('clicked')">3.3事件及事件处理第3章JavaScript程序构成JavaScript程序设计事件3.3事件及事件处理第3章JavaScript程序20

常用事件

（1）窗口事件：onLoad、onUnload、onResize、onMove、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章JavaScript程序构成JavaScript程序设计常用事件3.3事件及事件处理第3章JavaScript21

实战

（1）案例描述用JavaScript循环实现Bingo卡片游戏。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.4实战：Bingo卡片游戏第3章JavaScript程序构成JavaScript程序设计实战3.4实战：Bingo卡片游戏第3章JavaScr22

程序控制流

函数

事件及事件处理总结第3章JavaScript程序构成JavaScript程序设计程序控制流总结第3章JavaScript程序构成Java23谢谢观看谢谢观看24JavaScript程序设计JavaScript程序设计25第3章JavaScript程序构成3.1程序控制流3.2函数3.3事件及事件处理3.4实战：Bingo卡片游戏JavaScript程序设计第3章JavaScript程序构成3.1程序控制流3.26

if条件语句

if(condition)statement1elsestatement2;if(i>30) {alert("i大于30");}elseif(i<0) {alert("i小于0");}else {alert("i在0到30之间");}3.1程序控制流第3章JavaScript程序构成JavaScript程序设计if条件语句3.1程序控制流第3章JavaScript27

for循环语句

for(initialization;expression;post-loop-expression)statement;varcount=10;for(vari=0;i<count;i++){ alert(i);}3.1程序控制流第3章JavaScript程序构成JavaScript程序设计for循环语句3.1程序控制流第3章JavaScrip28

for...in循环语句

for(propertyinexpression)statement;for(varpropNameinwindow){ document.write(propName);}3.1程序控制流第3章JavaScript程序构成JavaScript程序设计for...in循环语句3.1程序控制流第3章Java29

while循环语句

while(expression)statement;vari=0;while(i<10){ alert(i); i+=2;}3.1程序控制流第3章JavaScript程序构成JavaScript程序设计while循环语句3.1程序控制流第3章JavaScr30

label语句

label:statementstarti:53.1程序控制流第3章JavaScript程序构成JavaScript程序设计label语句3.1程序控制流第3章JavaScrip31

break和continue语句

break和continue语句用于循环中精确地控制代码的执行。break语句可以立即退出循环，阻止再次反复执行任何代码。而continue语句只是退出当前循环，根据控制表达式还允许继续进行下一次循环。3.1程序控制流第3章JavaScript程序构成JavaScript程序设计break和continue语句3.1程序控制流第3章32

do...while语句

do{statements;}while(condition)do{x=x+"Thenumberis"+i+"<br>";i++;}while(i<5);3.1程序控制流第3章JavaScript程序构成JavaScript程序设计do...while语句3.1程序控制流第3章Java33

switch语句

switch(expression)casevalue:statement;break;default:statement;3.1程序控制流第3章JavaScript程序构成JavaScript程序设计switch语句3.1程序控制流第3章JavaScri34

函数表达式及语法

两种常用的定义函数方式：第一种：使用函数声明语法，第二种：使用函数表达式定义。functionsum(num1,num2){//函数体}varsum=function(num1,num2){//函数体};3.2函数第3章JavaScript程序构成JavaScript程序设计函数表达式及语法3.2函数第3章JavaScript程35

函数参数

JavaScript函数的参数与大多数其他语言的函数参数有所不同。函数不介意传递进来多少个参数，也不在乎传进来的参数是什么数据类型。甚至可以不传参数。3.2函数第3章JavaScript程序构成JavaScript程序设计函数参数3.2函数第3章JavaScript程序构成J36

函数返回值

JavaScript函数返回值关键字是return。一个函数内处理的结果可以使用return返回，这样在调用函数的地方就可以用变量接收返回结果。3.2函数第3章JavaScript程序构成JavaScript程序设计函数返回值3.2函数第3章JavaScript程序构成37

函数4种调用模式

（1）函数调用模式；

（2）方法调用模式；

（3）构造器调用模式；

（4）Apply调用模式；3.2函数第3章JavaScript程序构成JavaScript程序设计函数4种调用模式3.2函数第3章JavaScript程38apply和call的区别

call方法：语法定义为：call([thisObj[,arg1[,arg2[,[,.argN]]]]])参数thisObj为可选项。将被用作当前对象的对象。arg1，arg2，argN也为可选项，传递的参数序列；apply方法：语法定义为：apply([thisObj[,argArray]])；3.2函数第3章JavaScript程序构成JavaScript程序设计apply和call的区别3.2函数第3章JavaSc39

递归调用

递归函数：就是在函数体内调用函数本身。functionfactorial(num){if(num<=1){return1;}else{returnnum*factorial(num-1);}}3.2函数第3章JavaScript程序构成JavaScript程序设计递归调用3.2函数第3章JavaScript程序构成J40

函数作用域varscope="global";functionfun(){console.log(scope);varscope="local";console.log(scope);}fun();3.2函数第3章JavaScript程序构成JavaScript程序设计函数作用域3.2函数第3章JavaScript程序构成41

异常处理try{//可能发生错误的代码}catch(error){//发生错误时处理方式}3.2函数第3章JavaScript程序构成JavaScript程序设计异常处理3.2函数第3章JavaScript程序构成J42

闭包闭包就是能够读取其他函数内部变量的函数；functionfun1(){varn=999;nAdd=function(){n+=1}functionfun2(){console.log(n);}returnfun2;}varresult=fun1();result();nAdd();result();3.2函数第3章JavaScript程序构成JavaScript程序设计闭包3.2函数第3章JavaScript程序构成Jav43

事件

JavaScript与HTML之间的交互是通过事件来实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。<inputtype="button"value="clickme"onclick="alert('clicked')">3.3事件及事件处理第3章JavaScript程序构成JavaScript程序设计事件3.3事件及事件处理第3章JavaScript程序44

常用事件