第3章　为程序添加逻辑和控制

到目前为止，我们已经学习了一些基本的JavaScript构建模块。但是，只是创建一个变量并在其中存储字符串或数值还远远不够。并且，用一个长长的列表项构建一个数组也并不是很有用，除非有简单的方法可以遍历数组中的项目。在本章中，我们将学习如何使用条件语句、循环和函数使得程序智能地响应并更高效地工作。

3.1　使程序智能地响应

我们的生活充满了选择：“我今天穿什么”、“午餐吃什么”、“星期五晚上该干什么”等。我们所做的很多选择取决于某个条件。例如，假设确定想要在星期五晚上看电影，我们可能会问自己一堆问题，例如，“有什么好的电影上映吗”、“电影能够准时开演吗”、“我带了足够的钱去电影院吗”（买一袋爆米花要17块钱）。

假设有一场电影刚好在我们去的时候上映。我们就会问自己一个简单的问题“我身上的钱够吗”。如果回答是够，我们就向电影院出发。如果回答是不够，我们就不去。但是在另一个星期五，我们可能有足够的钱，那就去电影院。对于条件是如何影响我们做出决定，电影院只是一个简单的例子。

JavaScript具有同样的判断功能，叫做条件语句。基本上，条件语句就是一个简单的是或非的问题。如果回答是，程序就会做一件事情；如果回答否，它就做其他的事情。条件语句是最重要的编程概念之一：它允许程序对不同的情况做出反应并智能地操作。我们将会在编程中无数次地用到它们，而这里只是给出如何使用它们的几个例子，以使你对其用法有一个清晰了解。

·表单验证。当想要确定某个人填写了一个表单中所有必需的字段（“Name，”、“Address，”、“E-mail，”等）的时候，我们将使用条件语句。例如，如果Name字段为空，就不提交该表单。

·拖拽。如果添加了在Web页面中拖动元素的功能，可能要检查访问者把元素放在页面的什么位置。例如，如果拖动一幅图片到一个垃圾箱图像上，我们就要让照片在页面上消失。

·评估输入。如果弹出一个窗口来询问访问者类似这样的问题：“您愿意回答几个针对这个Web站点的评价的问题吗？”我们可能希望脚本能够根据访问者如何回答这个问题而做出不同的反应。

图3-1给出了使用条件语句的应用程序的一个例子。

图　3-1　享受乐趣也要做很多工作。像Solitaire（http：//worldofsolitaire.com）这样的一个基于JavaScript的游戏展示了一个程序如何根据程序的条件做出不同的响应。例如，当一个玩家拖拽纸牌时，程序必须确定玩家是否把纸牌拖拽到了有效的位置，然后在每种情况下执行不同的操作

3.1.1　条件语句基础

条件语句也叫做“if/then”语句，因为只有在问题的答案为真的时候，它们才执行一项任务：“如果我有足够的钱，就去看电影。”条件语句的基本结构如下所示：

if（condition）{

//some action happens here

}

这条语句有三个部分：if表示接下来的程序是一个条件语句；圆括号包括了答案为是或否的问题，叫做条件（稍后会更详细地介绍它）；花括号（{}）表示如果条件为真所应该执行的JavaScript代码的开始和结束。

注意：在上面列出的代码中，“//some action happens here”是一条JavaScript注释。它不是实际运行的代码，只是在程序中保留的一个提示；并且，在这个例子中它指出，你作为代码的阅读者应该期待代码的这部分是什么内容。参见2.11节对于注释的更多介绍。

在很多情况下，条件是两个值之间的比较。例如，假设创建了一个游戏，当分数超过100的时候，玩家胜出。在这个程序中，我们需要通过一个变量来记录玩家的分数，并且，在某个时刻，我们需要检查这个分数是否超过100分。JavaScript检查玩家是否胜出的代码如下所示：

if（score＞100）{

alert（'You won！'）；

}

重要的部分是score＞100。这条语句是一个条件，并且，它直接测试存储在score变量中的值是否大于100。如果是，那么就会显示一个“You won！”的对话框；如果玩家的分数小于或等于100，那么JavaScript解释器就跳过警告框并直接到程序的下一部分。图3-2给出了这一过程的一个图示。

图　3-2　使用一条基本的条件语句，如果条件为真，则只运行花括号中的代码。如果条件为假，则略过这段代码并且程序继续运行

除了＞（大于），还有其他几种操作符用来比较数值（参见表3-1）。

提示：在包含在一对花括号中的JavaScript代码的每一行前面输入两个空格。空格（或制表符）缩进了这些行，使得人们更容易看到开始和结束的花括号，并且很容易看清楚哪些代码属于条件语句。常用两个空格，但是，如果4个空格使得你的代码更容易阅读，那就用4个空格。本书中的例子总是缩进花括号中的代码。

更为常见的是，我们将测试两个值是否相等。例如，假设我们创建了一个基于JavaScript的测验，并且其中的一个问题是“土星有多少颗卫星？”人们的答案将存储在一个名为answer的变量中。可以编写如下所示的一条条件语句：

if（answer==31）{

alert（'Correct.Saturn has 31 moons.'）；

}

这里的一对等号（==）并不是输入错误，它们让JavaScript解释器比较两个值并且判断二者是否相等。别忘了，在JavaScript中，单个等号是赋值操作符，通过它可以把一个值存储到变量中：

var score=0；//stores 0 into the variable score

由于JavaScript解释器已经给单个等号赋予了特殊的含义，当要比较两个值来判断它们是否相等的时候，我们需要使用两个等号符号。

我们也可以使用==（叫做相等性操作符）来查看两个字符串是否相同。例如，假设我们想让用户在表单中输入一个表示颜色的单词，并且如果他们输入“red”，就把页面的背景颜色改为红色。为此我们使用条件操作符：

if（enteredColor=='red'）{

document.body.style.backgroundColor='red'；

}

注意：在上面的代码中，现在先不要关心如何改变页面颜色。我们将在本书4.8.2节学习如何使用JavaScript来动态控制CSS属性。

也可以使用不相等操作符来测试两个值是否不同：

if（answer！=31）{

alert（"Wrong！That's not how many moons Saturn has."）；

}

惊叹号翻译为“不”，因此，！=意味着“不相等”。在这个例子中，如果存储在answer中的值不是31，那么可怜的测验参与者将看到一条错误警告消息。

条件为真才运行的代码，并不像前面的例子那样仅限于单行代码。只要愿意，可以在开始花括号和结束花括号之间使用多行JavaScript代码。例如，作为JavaScript测验示例的一部分，我们可以保持一个记分牌，记录测验参与者答对了多少道题。因此，当土星问题的回答正确，我们就给测验参与者的总分加1。可以通过如下的条件测试做到这点：

if（answer==31）{

alert（'Correct.Saturn has 31 moons.'）；

numCorrect+=1；

}

注意：正如本书2.5.5节所介绍的，上面的代码行（numCorrect+=1）直接给变量numCorrect中当前的值加上1。

并且也可以在花括号之间添加额外的JavaScript代码行，可以添加条件为真时运行的任何代码。

高级用户提示

Boolean返回值

在本书2.3.3节，我们认识了布尔值：true和false。布尔乍一看好像不是非常有用，但是，当我们开始使用条件语句的时候，会发现它们是必需的。实际上，既然条件确实是一个非真即假的问题，那么这个问题的答案就是一个布尔值。例如，查看如下代码：

var x=4；

if（x==4）{

//do something

}

代码的第一行把数值4存储到变量x中。下一行中的条件是一个简单的问题：存储在x中的值是4吗？在这个例子中，它是，因此，花括号之间的JavaScript代码运行。但是，圆括号之间真正发生的事情是：JavaScript解释器把条件转换为一个布尔值，用编程的术语来说，解释器计算了条件。如果条件计算为真（意味着问题的答案是yes），那么，花括号之间的代码运行。然而，如果条件计算为false，那么，花括号之间的代码将会略过。

布尔的一种常见用法是创建一个所谓的标志，这是表示某件事是否为真的一个变量。例如，当验证填满了访问者提交的信息的一个页面的时候，我们可能首先创建一个带有布尔值为true的valid变量，这意味着，首先，假设访问者正确地填写了表单。然后，依次查看每个表单字段，如果任何字段遗漏了信息或者信息的类型不对，可以把valid的值改为false。在检查了所有的表单字段字后，测试valid中存储的内容，如果仍然是true，就提交表单。如果不是true（以为这一个或多个表单字段为空），则显示某些错误消息并防止表单提交：

var valid=true；

//lot of other programming gunk happens in

here

//if a field has a problem then you set

valid to false

if（valid）{

//submit form

}else{

//print lots of error messages

}