《JavaScript和jQuery实战手册（原书第2版）》——3.2节教程：使用条件语句

2022-02-08 03:39:26

3.2 教程：使用条件语句
条件语句将会成为我们日常的JavaScript工具箱的一部分。在这个教程里，我们将尝试使用条件语句来控制脚本如何运行。
注意：请参考1.3节中的“注意”部分了解如何下载教程文件。

在文本编辑器中打开chapter03目录下的文件conditional.html。
首先直接提示用户输入一个数值。这个文件已经在头部和正文区域都包含了< script>标签。
在第一对< script>标签之间，即页面的< head>部分中，输入粗体所示的代码：

    <script>
    var luckyNumber = prompt('What is your lucky number?','');
    </script>

这行代码打开了一个JavaScript提示框，询问一个问题，并且把访问者输入的内容存储到luckyNumber变量中。接下来将添加一个条件语句来查看访问者在提示对话框中输入了什么。

在页面正文的下方找到第二对< script>标签，并且添加粗体所示的代码：

    <script>
    if (luckyNumber == 7 ) {
    </script>

这里是条件语句的开始，它直接检查访问者是否输入了7。

按下回车键两次，并结束花括号，代码如下所示：

    <script>
    if (luckyNumber == 7 ) {
    }
    </script>

结束的花括号完成了条件语句。在两个花括号之间添加的任何JavaScript代码都只能够在条件为true的时候运行。
提示：正如3.2节所介绍的，在编写作为条件语句的一部分运行的代码之前先添加结束花括号，这是个好办法。

单击上面的结束花括号之上的空行。按下空格键两次，并输入：

    document.write("<p>Hey, 7 is my lucky number too!</p>");

代码前的两个空格缩进了这行，以方便看到这行代码是条件语句的一部分。这里实际的JavaScript代码，我们现在应该很熟悉了，它只是向页面显示一条消息。

保存文件并在Web浏览器中预览。当提示对话框出现的时候，输入7。
当页面载入的时候，应该会在标题栏下看到“Hey, that's my lucky number too!”这条消息。如果没有看到，检查一下代码确认自己输入正确（参见1.6关于处理无效脚本的技巧）。重新载入页面，但是这次输入不同的数值。这次可以看到标题栏下面什么也没有。我们将添加一个else子句来显示其他信息。

注意：为什么需要两组script标签呢？当使用document.write()方法把内容添加到页面上的时候，我们必须把document.write()代码放在页面上想要让消息出现的具体位置，在这个例子中，就是< h1>标签之下的正文中。第一组script标签出现在头部，因为我们想要提示窗口早点出现。如果将prompt()向下移动到正文中（继续并尝试一下），你将会看到，当页面载入，提示窗口出现的时候，页面只有一部分会显示。因为在页面的任何其他部分显示之前，该处的JavaScript立刻执行，Web浏览器必须等到访问者在提示窗口中输入数值，然后才能够显示页面的其他部分。换句话说，页面看上去很奇怪。然而，通过将提示窗口放在< head>部分，页面一开始是空白的，然后提示窗口出现，这看上去要好一些。在第4章中，我们将学习如何不使用document.write()方法而把内容添加到页面的任何位置。一旦了解了这一项技术，可以将自己的所有JavaScript代码放在页面的同一个位置。

返回文本编辑器，并且向页面添加如下粗体所示的内容：

    <script>
    if (luckyNumber == 7 ) {
     document.write("<p>Hey, 7 is my lucky number too!</p>");
    } else {
     document.write("<p>The number " + luckyNumber + " is lucky for you!</p>");
    }
    </script>

这个else子句提供了一条备用消息，这样，如果访问者没有输入7，他会看到一条包含自己的幸运数字的不同消息。为了让这个练习更完美，可以添加另一个else if语句来测试更多的值并提供其他的消息。

在脚本中添加如下两行粗体显示的代码：

    <script>
    if (luckyNumber == 7 ) {
     document.write("<p>Hey, 7 is my lucky number too!</p>");
    } else if (luckyNumber == 13 || luckyNumber == 24) {
     document.write("<p>Wooh. " + luckyNumber + "? That's an unlucky number!</p>");
    } else {
     document.write("<p>The number " + luckyNumber + " is lucky for you!</p>");
    }
    </script>

此时，脚本首先检查变量luckyNumber中存储的值是否是7。如果luckyNumber存储的值不是7，那么，else if开始执行。这个条件语句由两个条件组成，luckyNumber == 13和lucky Number == 24。||叫做逻辑OR操作符，如果条件中的任何一个为true，这个条件语句结果就是true。因此，如果访问者输入13或24，页面上将会显示一条“That's an unlucky number”消息。
提示：可以通过两次按下Shift-得到||，从而添加逻辑OR操作符。
在Web浏览器中预览页面，并且当提示对话框出现的时候输入13。按下浏览器的刷新按钮，并且再次尝试不同的数值，包括字母和其他字符。你将会注意到，如果输入一个单词或者其他的非数值字符，最终的else子句将执行，显示一条这样的消息：“The number asdfg is lucky for you!”。既然这没有太多的意义，当访问者第一次输入一个非数值时，应该弹出另一个提示对话框。

返回文本编辑器，并且找到页面的部分的第一个组

    <script>
    var luckyNumber = prompt('What is your lucky number?','');
    luckyNumber = parseInt(luckyNumber, 10);
    </script>

这行代码把luckyNumber的值放入一个名为parseInt()的函数。这条JavaScript命令接受一个值并且尝试把它转换为一个整数，即像1、5或100这样的完整的数值。我们将在14.3.1节中学习这条命令，但是现在，只需要知道如果访问者输入“ha ha,”这样的文本，parseInt()命令不能将其转换为数值；相反，该命令会提供一个特殊的JavaScript值，即NaN，它表示“不是一个数字”。如果访问者第一次输入的不是一个数值，我们可以使用这一信息弹出另外的对话框。

把如下粗体所示的代码添加到脚本中：

    <script>
    var luckyNumber = prompt('What is your lucky number?','');
    luckyNumber = parseInt(luckyNumber);
    if (isNaN(luckyNumber)) {
     luckyNumber = prompt('Please, tell me your lucky number.','');
    }
    </script>

这次，条件语句再次发挥作用。条件isNaN(luckyNumber)使用另一条JavaScript语句来检查内容是否是数值。它特别检查luckyNumber中的值是否是一个数值。如果这个值不是一个数值（例如，访问者输入asklsdkl），又弹出一个提示框并再次询问一个问题。如果访问者确实输入了一个数值，第二个提示框略过。
保存页面并在Web浏览器中预览。这次，在提示框出现的时候，输入一个单词并单击OK按钮。然后应该看到另一个提示框。然后输入一个数值。当然，这段脚本假设访问者第一次输入一个单词时候不小心犯了一个错误，但是，不会第二次犯同样的错误。遗憾的是，如果访问者在第二个提示框中输入一个单词，最终会遇到同样的问题，我们将在3.3节学习如何修正这个问题。
提示：在chapter03目录中可以找到这个教程的完整版本：complete_conditional.html。

码农公寓

相关文章