JavaScript函数调用

JavaScript函数调用,在页面加载时,包含在函数定义区域内的代码不会执行,而是静静地等待,直到“调用”的时候才会执行。

调用函数只需要使用函数名称(以及一对括号),就可以在需要的地方执行函数的代码:

sayHello();

举例来说,可以在按钮的onClick事件处理器中调用函数sayHello()

<input type="button" value="Say Hello" onclick="sayHello()" />

提示:函数名称
函数名称与变量名称一样,是区分大小写的,如函数MyFunc()与myFunc()是不同的。与变量名称一样,使用含义明确的函数名称可以提高代码的易读性。

提示:关于方法
前面给出了不少使用JavaScript对象的相关方法的代码,比如document. write()window.alert()。“方法”实际上就是“属于”特定对象的函数。

把JavaScript代码放置到页面的<head>区域

前面所用的范例都把JavaScript代码放置到HTML页面的<body>区域。为了更好地发挥函数的作用,我们要采取更适当的方式,也就是把JavaScript代码放置到页面的<head>区域。当函数位于页面<head>区域的<script>元素里,或是位于页面<head>区域的<script>元素的src属性所指向的外部文件时,我们就可以从页面的任何位置调用它了。把函数放到文档的头部,就能够确保它们在被调用前已经被定义了。

注意:统计参数数目
请注意,不能多次定义JavaScript函数。当你在一个页面中包含多个脚本元素时,特别是当一个或多个这样的元素引用JavaScript命令的一个外部文件时,这种情况就会发生。
如果我们调用一个定义了多次的函数,JavaScript不会产生一条错误消息。它将直接使用该函数的最新定义,因此,这将导致很难发现的bug。

如下程序所示的是一个在页面的头部定义的一个函数的范例,位于页面<head>区域的函数。

<!DOCTYPE html>
<html>
<head>
    <title>Calling Functions</title>
    <script>
        function sayHello() {
              alert("Hello");
        }
    </script>
</head>
<body>
    <input type="button" value="Say Hello" onclick="sayHello()" />
</body>
</html>

在上述代码里,函数定义位于页面<head>区域的<script>元素里,而函数的调用位于完全不同的位置,在本例中,是页面<body>区域里按钮的onClick事件处理程序。

单击按钮后的效果如图所示:

JavaScript函数调用

酷客网相关文章:

赞(0)

评论 抢沙发

评论前必须登录!