|
JavaScript函数的定义
函数的定义使用关键字 function，语法如下：
function funcName ([parameters]){
statements;
[return表达式;]
}
函数各部分的含义：
•funcName为函数名。函数名可由开发者自行定义，与变量的命名规则相同。
•parameters为函数的参数。在调用函数时，需将实际数据传递给参数列表以完成函数的特定功能。参数列表中可定义一个或多个参数，多个参数用逗号“ , ”分开，当然，参数列表也可为空。这里的参数为“ 形参 ”，即形式参数。
•statements是函数体。函数体规定了函数的功能，是函数的主体部分。
•return指定函数的返回值。一个函数，可以用return语句指定返回值，也可以没有返回值。当函数执行到return语句时，不管后面有无代码，都将结束函数的执行。
JavaScript函数的调用
函数定义完成后，就可以调用了。调用函数时，只需在函数名后加上小括号。
如果定义的函数需要传递参数，则需要在小括号内添加参数，多个参数以逗号“ , ”分开。这里的参数为“ 实参 ”，即真实的参数。
下面定义了一个函数，该函数的功能是使用 document.write() 输出信息。
| 代码如下 |
复制代码 |
|
function print(msg){
document.write(msg);
}
var welcome = "welcome to NowaMagic!www.111cn.net";
print(welcome);
function print(msg){
document.write(msg);
}
var welcome = "welcome to NowaMagic!";
print(welcome);
|
运行演示： welcome to NowaMagic!www.111cn.net
JavaScript 是一门宽松类型的语言，所以不能给函数的参数指定一个数据类型，而且 JavaScript 也不会检测传递的数据是不是那个函数所要求的类型。
再看一个 JavaScript 函数的例子，该函数计算某数的平方。
| 代码如下 |
复制代码 |
|
function square(x){
return x*x;
}
function print(msg){
document.write(msg);
}
var i = 5;
var result = square(i);
print(result);
function square(x){
return x*x;
}
function print(msg){
document.write(msg);
}
var i = 5;
var result = square(i);
print(result);
|
运行演示： 25
在某些风格的编程语言中，或者在某些定义良好的编程中，总是使用短小的函数名是很有用的。例如 JavaScript 中的 Prototype 优雅地使用了一个函数名 $() （是的，只有一个美元符号）来替代很常见但是很难录入的 document.getElementById()。美元符号 $ 和下划线 _ 是除了数字和字母以外，可以合法用于 JavaScript 标志符的符号。
参看以下代码：
| 代码如下 |
复制代码 |
|
<SCRIPT language=javascript>
function $(dom)
{
return document.getElementById(dom);
}
var con = $('listContainer');
</SCRIPT>
|
JavaScript 允许使用函数直接量来定义函数。函数直接量是一个表达式，它可以定义匿名函数。函数直接量的语法和 function 语句非常相似，只不过它被用作表达式，而不是用作语句，而且也无需指定函数名。
以下程序定义并调用了直接量函数。
| 代码如下 |
复制代码 |
|
var f = (function(x) { return x*x; })(10);
document.write(f);
var f = (function(x) { return x*x; })(10);
document.write(f);
|
运行结果： 100
如果函数有返回值，可以用一个变量来接收。
求 m+(m+1)+(m+2)+...+(n-1)+n的值：
| 代码如下 |
复制代码 |
|
<html>
<head>
<title>求 m+(m+1)+(m+2)+...+(n-1)+n的值</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function getTotal(m,n){
var total=0;
if(m>=n){
return false; // n必需大于m，否则无意义
}
for(var i=m;i<=n;i++){
total+=i;
}
return total;
}
</script>
<p onclick="alert( getTotal(1,100) );">显示1+2+3+...+99+100的值</p>
</body>
</html>
|
保存并运行代码，点击文本，显示 5050 。
在应用中我们一般这样做
一、在HTML里可以通过"javascript:"方式调用JavaScript的函数或方法，如下所示：
| 代码如下 |
复制代码 |
<html>
<head>
<title>使用“javascript:”</title>
</head>
<body>
<a href="javascript:alert('您点击了这个超链接')">请点我</a>
</body>
</html> |
二、 "javascript:"不但可以调用JavaScript的方法，也可以调用用户自定义的函数，如下代码所示：
| 代码如下 |
复制代码 |
<html>
<head>
<title>使用“javascript:”</title>
<script language="javascript" type="text/javascript">
<!--
function OnclickLink()
{
alert("您点击了这个按钮");
}
-->
</script>
</head>
<body>
<a href="javascript:OnclickLink()">请点我</a>
</body>
</html> |
三、与事件结合
| 代码如下 |
复制代码 |
<html>
<head>
<title>与事件相结合</title>
<script language="javascript" type="text/javascript">
<!--
function OnMouseOverLink()
{
alert("您的鼠标从第一个超链接上划过");
}
-->
</script>
</head>
<body>
<a href="#" onmouseover="OnMouseOverLink()">请将鼠标放在上面</a><br>
<a href="#" onclick="javascript:alert('您点击了第二个超链接')">请点我</a>
</body>
</html> |
|
