JavaScript知识第四讲之函数

JavaScript函数

一、函数的定义?
函数是定义一次,可以调用或执行多次的一段JavaScript代码。
语法格式:

function 函数名(参数1…){
[return 返回值]
}

1、无参函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
		function hello(){
			document.write("你好,JavaScript");
		}
		hello();
 </script>
</body>
</html>

输出结果:
你好,JavaScript

2、有参函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
				
		function account(a,b){
			var sum=a*b;
			return sum;
		}
	document.write(account(4,4));
 </script>
</body>
</html>

输出结果:
16

二、函数的调用
1、函数的简单调用
语法格式:

函数名(传递的参数1,传递的参数2…);

2、在事件响应中调用函数
事件处理过程:
触发事件—>调用和执行函数—>在页面中产生响应

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
				function  test(){
					alert("拨开云雾见青天");
				}
				 </script>
	<form action="***" method="post"  name="表单">
	<input type="button" value="提交"  onclick="test();"/>
	</form>
</body>
</html>

在这里插入图片描述
3、通过链接调用函数
在< a >标签中的href属性中使用“Javascript:函数名()”格式来调用函数,当用户单击这个链接时,相关函数将被执行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
				function  test(){
					alert("拨开云雾见青天");
				}
				 </script>
	<a href="javascript:test();">test</a>
</body>
</html>

在这里插入图片描述

三、函数的参数
1、形参:定义函数时指定的参数

语法格式:
function 函数名(形式参数1…)
函数体
}

2、实参:调用函数时实际传递的值

语法格式:
函数名(实际参数1…)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
				function  show( content){//形参:content
					alert("功夫JavaScript作者:"+content)
				}
				show("明日科技");//实参:明日科技
       </script>
</body>
</html>

在这里插入图片描述

四、函数的返回值
在JavaScript的函数中,可以使用return语句为一个函数返回一个值。
语法格式: return 表达式;

通过返回值判断两个数的大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
				function  show(a,b){
					if(a<b)
					return "第一个数小于第二个数";
					else if(a==b)
					return "第一个数和第二个数相等";
					 else
					 return "第一个数大于第二个数";
				}
				document.write(show(4,5));
       </script>
</body>
</html>

输出结果:
第一个数小于第二个数

五、嵌套函数

1、函数的嵌套定义
函数的嵌套定义就是在函数的内部再定义一个其它的函数。
虽然在JavaScript中允许函数的嵌套定义,但它会使程序的可读性降低

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
				function outShow(){
					function inShow(x,y){
						alert(x+y);
					}
					inShow(4,5);
				}
				outShow();
       </script>
</body>
</html>

输出结果是:
9

2、函数的嵌套调用
在JavaScript中,允许在一个函数的函数体中对另一个函数进行调用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
				function show(){
					alert("Hello World");
				}
				function b(){
					show();
				}
				b();
       </script>
</body>
</html>

输出结果:
Hello World

计算三个数的平均数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			function  math(x,y,z){
				document.write("参数分别是:"+x+"、"+y+"、"+z);
				document.write('<br/>'+"参数的平均值为:"+(x+y+z)/3)
			}
			function average(){
				math(60,59,61);
			}
			average();
       </script>
</body>
</html>

输出结果:
参数分别是:60、59、61
参数的平均值为:60

六、递归函数
所谓递归函数就是函数在自身的函数体内调用自身。
语法格式:

function 函数名(参数1){
函数名 (参数2);
}
递归函数只有在特定的情况下使用,比如处理阶乘问题。

计算10!的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			function  math(x){
				if(x==0)
				return 1;
				return x*math(x-1);
			}
			alert("10!的结果为:"+math(10));
       </script>
</body>
</html>

在这里插入图片描述

七、变量的作用域
1、全局变量与局部变量
全局变量:定义在所有函数之外的变量,作用范围是该变量定义后的所有代码。
局部变量:定义在函数体内的变量,只有在该函数中,且该变量定义后的代码中才可以使用这个变量。

2、函数的优先级
如果在函数体中定义了一个与全局变量同名的局部变量,那么该全局变量在函数体中将不起作用。

3、嵌套函数中变量的作用范围
在嵌套函数中,外部函数中的变量可以在该函数体以及嵌套函数体中起作用,而嵌套函数中的变量不能在父级或父级以上的函数体中起作用。

八、内置函数
在这里插入图片描述
1、数值处理函数
parseInt()函数
该函数主要将首位为数字的字符串转换为数字,如果字符串不是以数字开头,那么将返回NaN。
语法格式:parseInt(string,[n])

parseFloat()函数
该函数主要将首位为数字的字符串转换为浮点型数字,如果字符串不是以数字开头,那么将返回NaN。
语法格式:parseFloat(string)

isNaN()函数
该函数主要用于检验某个值是否为NaN。
语法格式:isNaN(num)
如果参数num为NaN,函数返回值为true
如果参数num不是NaN,函数返回值为false

isFinite()函数
该函数主要用于检验其函数是否有限
语法格式:isFinite(num)
如果参数num 是有限数字,函数返回值为true
如果参数num是NaN或无穷大,函数返回值为false

2、字符串处理函数
eval()函数
该函数的功能是计算字符串表达式的值,并执行其中的JavaScript代码。
语法格式:eval(string)

escape()函数
该函数用于将一些特殊字符(不包括字母和数字字符以及*、@、-、_、+、和/)进行编码,它可以将这些特殊字符转换为“%XX”格式的数字。
语法格式:escape(string)

unescape()函数
该函数主要用于对应用escape()函数编码后的字符串进行编码,它可以将字符串中的“&XX”格式的数字转换为字符。
语法格式:unescape(string)

encodeURL()函数
该函数主要用于将URL字符串进行编码
语法格式:encodeURI(url)

decodeURL()函数
该函数只要用于对已编码的URL字符串进行解码。
语法格式:decodeURL(url)

九、定义函数的其它方法
1、定义匿名函数
语法格式:

var 变量名=function(参数1,参数2…){
函数体
}

计算1到20之间所有的3的倍数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			document.write("1到20之间所有的3的倍数:")
			var test=function(x=1,y=20){
				while(x<=y){
					if(x%3==0){
					document.write(x+" ");
					}
					x++;
				}
			}
			test();
				   </script>
</body>
</html>

输出结果:
1到20之间所有的3的倍数:3 6 9 12 15 18

2、Function()构造函数
语法格式:

var 变量名=new Function(“参数1”、“参数2”…,“函数体”);
Function()构造函数中的所有参数和函数体都必须是字符串类型,因此一定要用双引号或单引号引起来

发布了45 篇原创文章 · 获赞 38 · 访问量 2149

猜你喜欢

转载自blog.csdn.net/qq_44830627/article/details/105033593