HTML中的函数使用基础（函数定义，函数调用，函数参数，函数返回值，嵌套函数，递归函数，变量作用域，内置函数，其他定义函数的方法）

时间：2025-01-15 11:39:39

HTML中的函数使用基础

函数实质上是一个类似于单独的逻辑单元的JavaScript代码，使用函数可以使代码更为简洁，提供重用性，在JavaScript中，大约有95以上的代码是包含在函数中的，由此可见，函数在JavaScript中地位相当重要。

1、函数定义

在JavaScript中函数是由关键字function、函数名加一组参数以及置于大括号中的需要执行的一段代码定义的。定义函数的基本语法如下：

function 函数名([参数1，参数2，....]){
    语句
    [return 返回值]
}

参数说明：

函数名：必选，用于执行函数名，在同一个页面中函数名必须是唯一的，并且区分大小写

参数：可选，用于指定参数列表。当使用多个参数时，参数间使用逗号进行分隔。一个函数最多可以有255各参数（不过我想信大部分场景用不到这么多参数的）。

语句：必选，是函数体，用于实现函数功能的语句。

返回值：可选，用于返回函数值。返回值可以是任意的表达式、变量或常量

例如，定义一个不带参数的函数hello()，在函数体中输出“你好”的字符串，具体代码如下：

function hello(){
    ('你好')
}

例如，定义一个计算商品金额的函数account()，该函数有两个参数，用户指定单价和数量，返回值为计算后的金额总数，具体代码如下：

function account(price, number){
    var sum = price * number;
    return sum；
}

2、函数调用

函数定义之后并不会自动执行，要执行一个函数，需要在特定的位置调用函数，调用函数需要创建调用语句，调用语句也包括函数名称、参数和具体值。

2.1函数的简单调用

函数调用的语法如下。

函数名（传递给函数的参数1，传递给函数的参数2，....)

函数的定义语句通常放在HTML文件的<head>段中，而调用的调用语句可以放在html文件的任何位置。（最好定义语句放在一个全新的文件中）

例如，定义一个函数test()，这个函数的功能是在页面弹出“我喜欢林嘉怡小仙女”然后通过函数调用是他执行，能够在页面输出“我喜欢林嘉怡小仙女”，代码如下：

<!DOCTYPE html>
<html>
    <head>
	    <meta charset="UTF-8">
		<title>函数定义</title>
		<script>
			function test(){
				alert('我喜欢林嘉怡小仙女');
			}
		</script>
	</head>
	<body>
		<script>
			test();
		</script>
	</body>
</html>

 

2.2在事件响应中调用函数

当用户单击某个按钮或某个复选框时都将触发事件，通过编写程序对事件做出反应的行为称为响应事件，在JavaScript语言中，将函数于事件相关联就完成了响应事件的过程。例如当用户单击某个按钮时执行相应的函数。

可以使用如下代码实现以尚功能：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数定义</title>
		<script>
			function test(){
				alert('我喜欢林嘉怡小仙女');
			}
		</script>
	</head>
	<body>
		<form action="" method="post" name="form1">
			<input type="button" value="提交" onclick="test()" />
		</form>
	</body>
</html>

2.3通过链接调用函数

在JavaScript语句中除了通过使用事件调用函数以外，我们也可以通过使用链接的方式进行函数调用，在<a>标签中的href属性中使用“javascript：函数名()”格式来调用函数，当用户点击这个链接的时候，相关函数被执行。下面的代码实现了通过链接调用函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数定义</title>
		<script>
			function test(){
				alert('我喜欢林嘉怡小仙女');
			}
		</script>
	</head>
	<body>
		<!--通过链接调用函数-->
		<a href="javascript:test()">单击链接调用函数test</a>
	</body>
</html>

3、函数参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数参数的使用</title>
		<script type="text/javascript">
			function show(bookname, author, name){
				alert(bookname + author + name); //页面中弹出对话框，显示书名等信息
			}
			
//			function 函数名(形参1, 形参2,...){
//				函数体
//			}
		</script>
	</head>
	<body>
		<p>我们把定义函数时指定的参数称为形式参数，简称形参；而把调用函数时的参数称为实际参数，简称实参</p>
		<p>在JavaScript中定义函数的格式如上方的定义方法。</p>
		<p>定义函数时，其中的参数可以为一个也可以是多个（参数之间通过逗号分割）指定参数的作用在于当调用函数时，可以为函数传递一个或多个值</p>
		<p>通常，在定义函数时用了多少个形参，在调用函数的时候就要传递多少个实参，需要注意，形参和实参均通过逗号分割</p>
		<script type="text/javascript">
			show('功夫Javascript', '作者', '明日科技');
//			函数名(实参1,实参2,...)
		</script>
	</body>
</html>

4、函数返回值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数的返回值</title>
		<script type="application/javascript">
//			function sum(x,y){
//				var z = x +y;
//				return z;
//			}
//			alert(sum(2,4));
//			或者是
//			var result = sum(2,4);
//			alert(result);
			
			function compare(x, y){
				if(x>y){
					return true;
				}else{
					return false;
				}
			}
			
		</script>
	</head>
	<body>
		<p>对于函数调用，一方面可以通过函数向函数传递数据，另一方面也可以从函数获取数据，也就是函数可以返回值。在JavaScript函数中，可以使用return语句为函数返回一个值</p>
		<p>其语法格式如下： return 表达式；</p>
		<p>这条语句的作用是结束函数，并把其后表达式的值作为函数的返回值。例如，定义一个计算两个数的和的函数，并将计算结果作为函数的返回值。</p>
		<p>函数的返回值可以直接赋给变量或用户表达式中，也就是说函数调用可以出现在表达式中。例如，将上例中的函数返回值赋给变量result，然后进行输出，代码见上方</p>
		<script type="application/javascript">
			var result = compare(10,20);
			if(result){
				alert('第一个数大于第二个数')
			}else{
				alert('第2个数大于第一个数')
			}
		</script>
	</body>
</html>

 

相关文章