3.4　函数：把有用的代码转换为可复用的命令

假设在工作中你刚刚得到一位新的助理，来帮助你完成每项任务（这时候应该把本书归类为“玄幻小说”了）。假设你饿了想吃披萨饼，但助理是新来到这座大楼和这个区域的，你必须给他清楚的指示：“出门右转，乘电梯到1层，走出大楼……”等。助手按照你的指示并且买来了一块披萨饼。几个小时之后，你又饿了，还想吃更多的披萨饼。现在，你不需要再次复述整个指示（“出门右转，乘电梯到1层，走出大楼……”）。这次，助手知道到哪里去购买披萨饼，所以，你说“买块披萨饼来”，他就会到有披萨饼的地方买来一块。

换句话说，我们只需要提供一次详细指示就够了，助手记住这些步骤，并且只要简单地说“买块披萨饼来”，他立即离开并且稍后带着披萨饼回来。JavaScript也有与此等效的机制，叫做函数。函数是在脚本的开始处设置的一系列的编程步骤，等效于为助手提供的详细指示。当创建函数的时候，这些步骤并没有实际运行；相反，它们存储在Web浏览器的内存中，而在我们需要执行那些步骤的时候可以调用它们。

函数对于高效重复执行多个编程步骤很有价值：例如，假设要创建一个照片集Web页面，其中填满了50幅小的缩略图图像。当某人单击其中一幅小图像时，我们可能希望页面淡出，出现一个标题，并且该图像的一个较大版本填充整个屏幕（将在7.4节学习如何做到这些）。每次某人单击一幅图像，就重复这个过程，因此，在具有50幅较小的照片的Web页面上，脚本可能必须做同样的一系列步骤50次。幸运的是，我们不一定必须编写同样的代码50次才能让照片集工作。相反，可以编写一个具有所有必需步骤的函数，随后，对于缩略图的每次单击，运行这个函数。编写一次代码，但是可以运行它任意多次。

函数的基本结构如下所示：

function functionName（）{

//the JavaScript you want to run

}

关键字function让JavaScript解释器知道我们要创建一个函数，这和使用if开始一条if/else语句或使用var来创建一个变量类似。接下来，我们提供了一个函数名，和变量一样，我们也可以选择自己的函数名。遵守2.4.1节列出的命令变量的规则。此外，在函数名中包含一个动词是很常见的，例如calculateTax、getScreenHeight、updatePage或fadeImage。带有动词的函数名使得人们很清楚这个函数做什么，并且很容易区分函数名和变量名。

紧接着名字，我们添加了一对圆括号，这是函数的另一个特征。在圆括号的后面是一个空格，后面跟着一个花括号、一行或多行JavaScript代码，最后是结束花括号。和if语句一样，花括号表示组成函数的JavaScript代码的开始和结束。

提示：和if/else语句一样，如果缩进了花括号之间的JavaScript代码，函数会更容易阅读。每行开始使用两个空格（或一个制表符）是很常见的。

下面是一个简单的函数，它以"Sun May 12 2008"的格式显示当前日期：

function printToday（）{

var today=new Date（）；

document.write（today.toDateString（））；

}

这个函数名为printToday。它只有两行JavaScript代码，接受当前日期，把日期转换为我们可以理解的一种格式（即toDateString（）部分），然后使用document.write（）命令把结果显示到页面上。现在不必关心所有这些日期内容是如何工作的，我们将在14.4节中找到答案。

程序员通常把他们的函数放在脚本的开始处，在那里设置了各种函数，以供脚本剩下的部分随后使用。别忘了，当初次创建函数的时候，它不会运行，这就好像告诉助手如何到达披萨店，而不是真的让他去那里。JavaScript代码只是存储在浏览器的内存里，等到随后需要的时候才运行。

但是，我们如何运行一个函数呢？用编程的术语来说，在想要函数执行其任务的任何时候调用函数。调用函数只是写下函数名后面跟着一对圆括号就可以了。例如，要让printToday函数运行，直接输入：

printToday（）；

正如你所看到的，让一个函数运行并不需要太多的录入，这就是函数美丽的地方。一旦创建了函数，不需要添加太多的代码就可以得到结果。

注意：当调用一个函数的时候，不要忘了跟在函数后面的圆括号。这是让函数运行起来的部分。例如，printToday不做任何事情，但printToday（）执行该函数。

3.4.1　小教程

因为函数是如此重要的一个概念，所以这里给出一系列的步骤供我们练习在真正的Web页面上创建和使用函数：

1.在文本编辑器中打开print_date.html。

首先在文档的开始处添加一个函数。

2.找到页面＜head＞中的＜script＞标记之间的代码，并且录入如下代码：

function printToday（）{

var today=new Date（）；

document.write（today.toDateString（））；

}

基本的函数准备好了，但它现在还不能做任何事情。

3.保存文件并在Web浏览器中预览。

什么也没发生。好了，实际上有些事情确实发生了，只是我们没有看到。Web浏览器把函数语句读入内存，并且等待真正地调用函数，我们将在下面这么做。

4.返回文本编辑器和print_date.html文件。找到以“Today is”开始的＜p＞标签，并在两个＜strong＞标签之间添加如下粗体所示的代码：

＜p＞Today is＜strong＞

＜script＞printToday（）；＜/script＞

＜/strong＞＜/p＞

保存页面并在Web浏览器中预览。当前的日期显示在页面上。如果想要在Web页面的底部也显示日期，所需要做的只是再次调用函数。