Javascript if 语句使用详解

118次阅读
没有评论

共计 1767 个字符,预计需要花费 5 分钟才能阅读完成。


if 语句是使用最为普遍的条件选择语句,每一种编程语言的 if 语句都差不多。if 语句类型共有 3 种:

  • (1)if 语句(单向选择);
  • (2)if……else 语句(双向选择);
  • (3)if……else if 语句(多向选择);

下面我们一一为大家详细介绍这 3 种 if 语句。

 

一、if 语句

单一的 if 语句是“单分支选择结构语句”。

Javascript if 语句使用详解

图 1 单向选择

语法:

if(条件语句)
{执行语句;}

说明:

其中“条件语句”可以是任何一种逻辑表达式,如果“条件语句”的返回结果为 true,则程序先执行大括号“{}”中的“执行语句”,然后接着执行 if 后面的其他语句。

如果“条件语句”的返回结果为 false,则程序跳过“{}”的“执行语句”,直接执行程序后面的其他语句。

举例:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var score=90;
        if(score>60)
        {alert("19WEB 开发教程是一个不错的网站!");
        }
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果

分析:我们之前学会用“document.write()”来输出结果,这次我们给大家介绍一种对话框的方式,那就是使用 alert() 函数来弹出对话框。大家先接触一下,我们在后面会给大家详细介绍。

 

二、if……else 语句

“if……else”语句是“双向分支选择结构语句”,通常用于需要用两个程序分支来执行的情况(双向选择),也就是在 if 语句基础上多了一个分支。

Javascript if 语句使用详解

图 2 双向选择

语法:

if(条件)
{当条件为 true 时执行的代码}
else
{当条件为 false 时执行的代码}

举例:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var score=90;
        if(score<60)
        {alert("19WEB 开发教程?额,不敢恭维呀~~");
        }
        else
        {document.write("<strong style=' color:red;'>19WEB 开发教程是一个不错的网站!</strong>");
        }
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果

分析:document.write() 方法不仅仅可以输出文字或字符,还可以输出 HTML 代码,这是小技巧,大家记下哈。

 

三、if……else if 语句

“if……else if”语句是“多分支选择结构语句”,用于选择多个代码块之一来执行。

语法:

if(条件 1)
{当条件 1 为 true 时执行的代码}
else if(条件 2)
{当条件 2 为 true 时执行的代码}
else
{当条件 1 和条件 2 都为 false 时执行的代码;}

举例:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var d = new Date();
        var time = d.getHours();
        if(time<12)
        {document.write("早上好!");    // 如果小时数小于 12 则输出“早上好!”}
        else if(time>12&&time<18)
        {document.write("下午好!");// 如果小时数大于 12 并且小于 18,输入“下午好!”}
        else
        {document.write("晚上好!");// 如果上面两个条件都不符合,则输出“晚上好!”}
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果

分析:

“var d = new Date();”是创建一个 Date 对象,“var time = d.getHours();”是获取 Date 对象中的小时数。这些内容我们会在 JavaScript 日期对象 Date 这一章详细讲解。

上面输出结果未必是“早上好”,这是根据你当前系统时间来判断的。由于站长测试的时候是 11:00,所以输出的是“早上好”。


正文完