第04章教案_JavaScript语句与函数.doc

《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(score90){

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：

执行代码块1

break;

case值2：

执行代码块2

break;

……

case值n：

执行代码块n

break;

[default：

以上条件均不符合时的执行代码块]

}

首先在switch后面的小括号中设置一个表达式（通常是一个变量），然后在每一个case语句中给出一个值与变量进行比对，如果不一致则跳过该case语句，继续对比下一个case中给出的值。当变量与对比的值完全一致时执行该case语句分支里面的代码块，然后使用break语句终止其余代码的执行。其中default分支用于执行以上条件均不符合的情况，中括号表示该语句片段为可选内容。

【例4-2】JavaScriptswitch语句的简单应用

使用switch语句改写上一个例题中的if-else语句，并达到同样的最终效果。

4.2JavaScript循环语句

在JavaScript中有四种类型的循环语句。

? for：在指定的次数中循环执行代码块。

? for-in：循环遍历对象的属性。

? while：当条件为true时循环执行代码块。

? do-whil