HTML5权威指南
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

5.3 定义和使用函数

如果像代码清单5-2中那样在script元素中直接定义语句，那么浏览器一遇到这些语句就会执行它们。也可以把几条语句包装在一个函数中，浏览器只有在遇到一条调用该函数的语句时才会执行它。如代码清单5-3所示。

代码清单5-3 定义JavaScript函数

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
function myFunc() {
document.writeln("This is a statement");
};
                  myFunc();
              </script>
            </body>
        </html>

函数所含语句被包围在一对大括号（{和}）之间，称为代码块。这个代码清单定义了一个名为myFunc的函数，其代码块中只含有一条语句。JavaScript是区分大小写的语言，因此function这个关键字必须小写。只有在浏览器遇到下面这样一条调用myFunc函数的语句时，该函数中的语句才会执行。

        myFunc();

这个例子没什么特别的用处，因为在函数定义之后就立即调用了它。本章后面讲到事件的时候，所用例子中的函数要有用得多。

5.3.1 定义带参数的函数

与大多数语言一样，JavaScript中也可以为函数定义参数，如代码清单5-4所示。

代码清单5-4 定义带参数的函数

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
function myFunc(name, weather) {
document.writeln("Hello " + name + ".");
document.writeln("It is " + weather + " today");
};
                  myFunc("Adam", "sunny");
              </script>
            </body>
        </html>

这里为myFunc函数添加了两个参数：name和weather。JavaScript是门弱类型语言，所以定义函数的时候不必声明参数的数据类型。本章稍后讲JavaScript变量的时候会回头解释弱类型的事情。调用带参数的函数时要像这样提供相应的值作为参数：

        myFunc("Adam", "sunny");

这个代码清单的输出结果如下：

        Hello Adam. It is sunny today

调用函数时提供的参数数目不必与函数定义中的参数数目相同。如果提供的参数值更少，那么所有未提供值的参数的值均为undefined。如果提供的参数值更多，那么多出的值会被忽略。其结果是，要想定义两个同名但参数数目不同的函数，然后让JavaScript根据调用函数时提供的参数值数目确定所调用的函数是不可能的。要是定义了两个同名的函数，那么第二个定义将会取代第一个。

5.3.2 定义会返回结果的函数

可以用return关键字从函数中返回结果，代码清单5-5示范了一个这样的函数。

代码清单5-5 从函数中返回结果

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
function myFunc(name) {
return ("Hello " + name + ".");
};
                  document.writeln(myFunc("Adam"));
              </script>
          </body>
        </html>

本例中的函数定义了一个参数并用它生成一个简单的结果。脚本中的最后一条语句调用了这个函数并将结果作为参数传递给document.writeln函数。如下所示：

        document.writeln(myFunc("Adam"));

注意，定义这个函数时不用声明它会返回结果，也不用声明结果的数据类型。代码清单的输出结果如下所示：

        Hello Adam.
上一章目录下一章