JavaScript函数

最新推荐文章于 2025-02-13 21:06:43 发布

原创最新推荐文章于 2025-02-13 21:06:43 发布 · 249 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript函数的使用

JavaScript笔记专栏收录该内容

4 篇文章

订阅专栏

函数是由时间驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词function：

function functionname()
{
	执行代码
}

上面这个例子，函数名为functionname，花括号中放的是需要执行的代码。当我们调用functionname这个函数时，就会去执行它里面的代码语句，现在我们没有向functionname函数中写入实际的执行语句。

我们可以在某事件发生时直接调用函数（比如点击按钮事件），并且可由JavaScript在任何位置进行调用。

<!DOCTYPE html>
<html>
	<head>
		<script>
			function firstFunction()
			{
				alert("我是弹窗！");
			}
		</script>
	</head>
	<body>
		<button type="button" onclick="firstFunction()">点击我会出现弹窗</button>
	</body>
</html>

结果：

注意：JavaScript对大小写敏感。关键词function必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

调用带参数的函数

在函数调用时，可以向其传递值，这些值被称为参数。这些传进来的参数可以在方法中使用。（参数之间用,分隔）

function firstFunction(var1,var2)
{
	代码
}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数给定的值，以此类推。

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<p id="st">现在有一名学生，点击按钮可以看到他的信息</p>
		<button type="button" onclick="student('张三',18,13540213)">按钮</button>
		<script>
			function student(name,age,examid)
			{
				var show="姓名："+name+" 年龄："+age+" 考生号："+examid;
				document.getElementById("st").innerHTML=show;
			}
		</script>
	</body>
</html>

带有返回值得函数

通过使用return语句就可以实现。在使用return语句时，函数会停止执行，并返回指定的值。要注意的是只是停止执行return语句所在的函数，并不会停止执行script。

function myFunction()
{
	var x=5;
	return x;
}

上面的函数执行到return后，会返回值5.

<!DOCTYPE html>
<html>
	<body>
		<p>本例调用的函数会执行一个计算，然后返回结果：</p>
		<p id="demo"></p>
		<script>
			function myFunction(a,b){
				return a*b;
			}
			document.getElementById("demo").innerHTML=myFunction(4,3);
		</script>
</body>
</html>