JavaScript函数

最新推荐文章于 2024-08-15 20:42:01 发布

clqxmt

最新推荐文章于 2024-08-15 20:42:01 发布

阅读量91

点赞数

文章标签： JavaScript函数

本文链接：https://blog.csdn.net/weixin_43755513/article/details/84329150

版权

JavaScript函数

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

4.1 无参函数

函数的语法格式如下:

function functionname(){
     这里是要执行的代码
}

[例4.1] 简单的函数定义和调用示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
   <script>
      function myFunction(){
      	alert("Hello World!");
      }
   </script>
   <button onclick="myFunction()">点击这里</button>
</body>
</html>

结果如下:
在这里插入图片描述

4.2 带参数的函数

在调用函数时,可以向其传递值,这些值被称为参数.这些参数可以在函数中使用.,可以发送任意多的参数,由逗号(,)分隔.
语法格式如下:

myFunction(argument1参数值1,argument2参数值2)
当你声明函数时,请把参数作为变量来声明.
function myFunction(var1变量1,var2变量2)
{
  这里是要执行的代码
}

变量和参数必须以一致的顺序出现.第一个变量就是第一个被传递的参数的给定值,以此类推.
[例 4.2]

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
   <script>
      function myFunction(name,job){
      	alert("Welcome "+name+",the "+job+".");
      }
   </script>
   <p>点击这个按钮,来调用带参数的函数</p>
   <button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
</body>
</html>

结果如下:
在这里插入图片描述

4.3 带有返回值的函数

有时,我们会希望函数将值返回调用它的地方,这可以通过使用return语句来实现.在使用return语句时,函数会停止执行,并返回指定的值.
语法格式如下:

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

上面的函数会返回值5
注意: 整个JavaScript并不会停止执行,仅仅是函数.JavaScript将从调用函数的地方继续执行代码.
函数调用将被返回值取代:
var myVar = myFunction();
myVar变量的值是5,也就是函数"myFunction()"所返回的值.
即使不把它保存为变量,也可以使用返回值:
document.getElementById(“demo”).innerHTML=myFunction();
"demo"元素的innerHTML将变成5,也就是函数"myFunction()"所返回的值.
可以使返回值基于传递到函数中的参数.
[例 4.3] 计算两个数字的乘积,并返回结果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
   <script>
      function myFunction(x,y){
      	return x*y;
      }
      document.getElementById("demo").innerHTML=myFunction(4,3);
   </script>
   <p>本例调用的函数会执行一个计算,然后返回结果:</p>
   <p id="demo"></p>
</body>
</html>

输出值:12;