1.7.1　JavaScript函数

函数用于隔离一组语句，以便程序的其他部分能够使用这些代码。函数通常是方法的同义词，这两个术语可以交换使用。它们之间有些不同，但其区别在本书中不重要。JavaScript使用两类函数：一类是已定义好的函数，另一类是自己定义的函数。

要定义自己的函数，需要输入function关键字，后跟函数名和开始、结束圆括号。函数中的语句包含在花括号（{}）内。下面是定义函数的语法：

要使用一个预定义的JavaScript函数，只需要使用函数名，后跟开始和结束圆括号。例如，本章前面已经使用了write()方法、getElementById()方法、open()方法和close()方法，这些都是JavaScript函数的例子。

例1.18使用了自定义函数和预定义函数。为了方便，例1.19再次使用了这些代码，并讨论每类函数的不同特征。

例1.19　两类函数

我们从函数（或方法）的角度讨论这个例子。第17行通过代码onclick="openWin()"调用第一个函数，即用户定义的函数openWin()。控制流跳至第5行，即定义函数openWin()的位置。当openWin()被调用时将执行两条语句，它们分别在第6行和第9行花括号之间的第7行和第8行。第7行的第1条语句调用预定义JavaScript函数open()，在圆括号里的内容定义将传递给函数open()的参数（本节稍后将更详细地讨论参数）。函数open()收集的信息存储在变量smallWindow中，以便可以在程序的其他地方使用。第8行的第2条语句调用预定义JavaScript函数write()，其圆括号里有一些内容。write()函数（或方法）包含程序员不需要看到的指令，这些指令告诉计算机显示在圆括号里的任何内容。这些信息成为函数open()创建的新窗口内容。

在这两条语句执行之后，函数openWin()就完成了任务。控制流现在返回到调用函数openWin()的地方，也就是第17行。由于它是第17行的末尾，因此控制流现在前往第18行。

当单击第二个按钮时，执行第18行。此时将调用自定义函数closeWin()，控制流前往定义函数closeWin()的第10行。该函数只有一条语句，即调用函数close()简单地关闭这个小窗口。

JavaScript的预定义函数非常多，这里难以全部列出。随着本书的进展，我们将使用更多的预定义函数，此外也会学习如何定义自己的函数。Web设计者与Web程序员的主要不同在于：Web设计者可以使用预定义的JavaScript函数，而Web程序员要实际编写自己的函数代码！

1.7.1.1　参数

如果从未编写过任何程序，那么你会对函数名字后面的圆括号感到奇怪。圆括号起什么作用呢？应当放入什么？为什么一些函数在圆括号内有东西，而另一些没有？放入圆括号内的“东西”称为参数。这里对这些问题的回答是一般化的，以后要编写更复杂的函数时再深入讨论参数。

一般来说，参数是传递给函数的值。函数会做某些事情，可能是做简单的事情（如例1.19所示的一条关闭窗口的语句），也可能是做许多事情。例如，我们可能编写一个函数，为用户的购物车商品计算销售税。在这种情况下，这个函数可能将购买总额乘以用户所在州的销售税率。这个函数将对购买了$25.67商品且所在州销售税率为4.25%的用户和购买了$1348.97商品且所在州销售税率为7.5%的用户做相同的事情。当然最后的结果会非常不同，但是使用的程序代码完全相同。不同在于购买总额和使用的销售税率。在伪代码中，这样一个函数可能看起来像这样：

注意这些只是最基本的代码，实际的程序将输出货币格式并显示说明。但是重点在于只要知道购买额和销售税率，这个函数就能计算出正确的结果。当程序调用这个函数时，它有两个参数，分别表示用户的购买额和所在州的销售税率。在调用这个函数的语句中，程序员必须把两个值放入圆括号内。

当调用函数时不仅要包含参数值，还要按正确的次序包含参数值。在这个伪代码例子中，第一个值必须是购买额，第二个值必须是税率。如果按错误的次序传递参数值，那么函数仍然会工作但结果将是不正确的，如例1.20所示。

例1.20　含参数的函数

当执行这个程序时，输出看起来像这样：

这个用户的实际购买总额应该是$100.00*1.065，即$106.50。当按下“Button 1”按钮时，传递给函数的第1个值是100，第2个值是0.065。这个100将存储在这个函数的变量purchaseAmt中，而0.065存储在变量taxRate中。第7行计算销售税，将100（purchaseAmt）乘以0.065（taxRate）得到tax=6.5。第8行计算总额，把6.5（tax）加上100（purchaseAmt）得到total=106.5。结果是

然而，当按下“Button 2”按钮时，传递给函数的第1个值是0.065，第2个值是100。这个0.065将存储在这个函数的变量purchaseAmt中，100存储在变量taxRate中。第7行计算销售税，将0.065（purchaseAmt）乘以100（taxRate）得到tax=6.5。但是第8行计算总额时，把6.5（tax）加上0.065（purchaseAmt）得到total=6.565。结果是

这个例子演示了参数的两个特性，一是使用参数能够使函数更为通用，二是为函数传递多个参数时必须按照正确的次序。例1.20也展示了函数的无效调用方式，它只能计算$100.00购买额在6.5%税率情况下的总计费用。若想要这个函数计算任何购买额在任何税率情况下的总计费用，其中一种做法是使用非常有用的JavaScript预定义函数prompt()。

1.7.1.2　prompt()函数

prompt()方法（或函数）提示用户录入程序员可以任意处理的值。它显示一个对话框提示访客录入，然后返回string类型的值。这意味着如果用户录入一个数字，那么这个数字首先存储为文本。第2章将学习如何确保用户能够录入适于计算的数字。现在，我们使用prompt()函数得到用户输入的文本。prompt()函数的语法如下：

参数message是程序员想要在对话框中显示的任何信息，而第2个参数是可选的。这个方法执行时将要求用户输入回答。例如，可能要求用户输入他的名字，从而提示信息可能是"Please enter your name"，并且可能将默认文本区域设置为空白或者"John Doe"。例1.21使用prompt()函数获得一些用户信息。

例1.21　使用prompt()方法　下面将结合之前所学的知识，使用prompt()方法让用户输入一种喜爱的食物，并且据此在网页上显示一条新信息。

当用户按下按钮（第12行)时，将调用自定义函数showPrompt()。然后控制前往定义函数showPrompt()的第4行，而第6行调用函数prompt()。该提示对话框上的信息是“What’s your favorite food?”，并且包含默认答案“carrots and celery”。然而，当用户输入新的喜爱食物时，将存储在变量food中。第7行通过使用document对象、一个点和write()方法在网页上显示新信息。新信息的内容是文本和变量值的组合。开始时这个页面看起来像这样：

然后在按下按钮之后，提示如下：

如果用户在提示中录入pizza，页面将会显示

但是如果用户录入cake，页面将会显示