3.2 条件判断语句

所谓条件判断语句，就是对语句中不同条件的值进行判断，进而根据判断结果执行不同的操作。条件判断语句主要包括两类：一类是if判断语句，另一类是switch多分支语句。下面对这两种类型的语句进行详细的讲解。

3.2.1 简单if语句

if条件判断语句是最基本、最常用的流程控制语句，可以根据条件表达式的值执行相应的处理。简单if语句的语法格式如下：

    if(expression){
          statement 1
    }

参数说明：

expression：必选项，用于指定条件表达式，可以使用逻辑运算符。

statement 1：待执行的语句序列。当expression的值为true时，执行该语句块。

简单if语句的执行流程如图3.1所示。

图3.1 简单if语句的执行流程

例如，根据比较两个变量的值，判断是否输出内容。代码如下：

运行结果：

    a大于b

3.2.2 if…else语句

if…else语句是if语句的标准形式，在简单if语句的基础之上增加了一个else从句。当expression的值是false时，执行else从句中的内容。

if…else语句的语法格式如下：

    if(expression){
          statement1
    }else{
          statement2
    }

在if语句的标准形式中，首先对expression的值进行判断，如果它的值是true，则执行statement 1语句块中的内容，否则执行statement 2语句块中的内容。

if…else语句的执行流程如图3.2所示。

图3.2 if…else语句的执行流程

例如，根据变量值的不同，输出不同的内容。代码如下：

运行结果：

    form!=1

3.2.3 if…else if语句

if语句是一种很灵活的语句，除了可以使用if...else语句形式外，还可以使用if...else if语句形式。if...else if语句的语法格式如下：

if...else if语句的执行流程如图3.3所示。

图3.3 if...else if语句的执行流程

例如，应用if…else if语句对多条件进行判断。首先判断m的值是否小于或等于1，如果是，则执行“alert("m<=1");”；否则将继续判断m的值是否大于1并小于或等于10，如果是，则执行“alert(m>1&&m<=10);”；否则将继续判断m的值是否大于10并且小于或等于100，如果是，则执行“alert("m>10&&m<=100");”；如果上述的条件都不满足，则执行“alert("m>100");”。代码如下：

运行结果：

    m>10&&m<=100

【例3.1】 判断用户是否输入用户名与密码。（实例位置：资源包\TM\sl\3\01）

（1）在页面中添加用户登录表单及表单元素。代码如下：

（2）编写自定义的JavaScript函数check()，用于通过if语句验证登录信息是否为空。check()函数的具体代码如下：

运行程序，如果没有添加用户名信息，单击“登录”按钮时将显示如图3.4所示的提示对话框。

图3.4 提示对话框

【例3.2】 应用if…else if语句输出问候语。（实例位置：资源包\TM\sl\3\02）

if…else if语句在实际中的应用也是十分广泛的。例如，可以通过该语句来实现一个时间问候语的功能，即获取系统当前时间，根据不同的时间段输出不同的问候内容。

首先定义一个变量，以获取当前时间，然后应用getHours()方法获取系统当前时间的小时值，最后应用if…else if语句判断在不同的时间段内输出不同的问候语。代码如下：

运行结果如图3.5所示。

图3.5 应用if…else if语句输出问候语

3.2.4 if语句的嵌套

if语句不但可以单独使用，而且可以嵌套使用，即在if语句的从句部分嵌套另外一个完整的if语句。在嵌套使用if语句时，其外层if语句从句部分的大括号“{}”可以省略。但本书建议读者使用大括号“{}”来确定相互之间的层次关系。这是因为由于大括号“{}”使用位置的不同，可能导致程序代码的含义完全不同，从而输出不同的内容。例如，在下面的两个实例中由于大括号“{}”的位置不同，导致程序的输出结果完全不同。

示例一

在外层if语句中应用大括号“{}”。首先判断外层if语句中m的值是否小于1，如果m小于1，在嵌套的if…else语中判断n的值是否等于1；当外层if语句中m的值大于10时，继续在嵌套的if…else语句中判断n的值是否等于1。代码如下：

运行结果：

    判断m大于10，n不等于1

示例二

更改示例一代码中大括号“{}”的位置，将“}”放置在else语句之前，这时程序代码的含义就发生了变化。代码如下：

此时的大括号“}”被放置在else语句之前，else语句表达的含义也发生了变化（当嵌套语句中n的值不等于1时将没有任何输出），它不再是嵌套语句中不满足条件时要执行的内容，而是外层语句中的内容，表达的是当外层if语句不满足给出的条件时执行的内容。

由于大括号“}”位置的变化，相同的程序代码有了不同的含义，从而导致该示例没有任何内容输出。

3.2.5 switch语句

switch语句是典型的多路分支语句，其作用与嵌套if语句基本相同。switch语句比if语句更具有可读性，而且允许在找不到匹配条件的情况下执行默认的一组语句。

switch语句的语法格式如下：

参数说明：

expression：任意的表达式或变量。

judgement：任意的常数表达式。当expression的值与某个judgement的值相等时，就执行此case后的statement语句；如果expression的值与所有的judgement的值都不相等，则执行default后面的statement语句。

break：用于结束switch语句，从而使JavaScript只执行匹配的分支。如果没有break语句，则该switch语句的所有分支都将被执行一遍，switch语句也就失去了使用的意义。

switch语句的执行流程如图3.6所示。

图3.6 switch语句的执行流程

【例3.3】 应用switch语句判断当前是星期几。（实例位置：资源包\TM\sl\3\03）

运行本实例，在页面中将会显示当前是星期几，运行结果如图3.7所示。

图3.7 显示当前是星期几