JavaScript函数

最新推荐文章于 2023-10-05 11:41:05 发布

可爱的小笼包

最新推荐文章于 2023-10-05 11:41:05 发布

阅读量616

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_48864837/article/details/127658477

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

项目四：JavaScript函数的代码和报告
项目四：JavaScript函数

设备仪器/软件环境
1.Windows 10系统
2.HBuilder

实验(实训)/目标
1.掌握函数的概念
2.掌握预定义函数调用的方法
3.掌握自定义函数的方法
4.掌握自定义函数调用的方法
5.掌握函数参数和函数返回值的使用方法

实验(实训)
过程/步骤
1.同步案例4-1：isNaN()函数应用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script type="text/javascript">
	
	document.writeln(isNaN(123));
	document.writeln(isNaN(123.45));
	document.writeln(isNaN(-123+123));
	document.writeln(isNaN("1234"));
	document.writeln(isNaN("Hello"));
	document.writeln(isNaN("2018/2/28"));
	</script>		
	</body>
</html>

2.同步案例4-2：parseFloat()和parseInt()函数应用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>	
	<script type="text/javascript">	
	 var num="123.5";
	 var num_float=parseFloat(num);
	 var num_int=parseInt(num);
	 document.write(num_float);
	 document.write("</br>");
	 document.write(num_int);
	</script>		
	</body>
</html>

3.同步案例4-3：定义一个函数，能够在页面上输出字符串。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script type="text/javascript">
	function PrintStr(){
		document.write("正确使用语法是学习好函数的基础!");		
	}
	 PrintStr();
	</script>	
	</body>
</html>

4.同步案例4-4：定义函数，实现计算商品总价。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script type="text/javascript">
	function Total(){
		var price,num,total;	
		price=prompt("请输入单价");
	 	num=prompt("请输入数量");
		total=price*num;
		alert("商品的总价为："+total);		
	}
	 Total();
	</script>		
	</body>
</html>

5.同步案例4-5：通过函数名直接调用同步案例4-4中的函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script type="text/javascript">
	function PrintStr(){
		document.write("正确使用好语法是学习好函数的基础！");		
	}	
	PrintStr();	
	</script> 	
	</body>
</html>

6.同步案例4-6：通过超链接调用同步案例4-4中的函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<script type="text/javascript">
	function PrintStr(){
		document.write("正确使用好语法是学习好函数的基础！");		
	}	
	</script>
	</head>
	<body>	
	<a href="javascript:PrintStr()">要调用函数，请单击</a>		
	</body>
</html>

7.同步案例4-7：通过函数统计商品的总价。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script type="text/javascript">
	function total(price,num){
		var total=price*num;
		document.write("商品的总价为："+total+("<br />"));		
	}total(2,3);
	total(6,20);
	</script>
	</body>
</html>

8.同步案例4-8：通过函数返回值求出两个数中最大数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		function Min(x,y){
			var min;
			/*if(x>y) max=x;
			else max=y;
			return max;*/
			x>=y?min=y:min=x
			return min;
		}
		var x,y,m;
		x=parseFloat(prompt("请输入第一个数"));
		y=parseFloat(prompt("请输入第二个数"));	
		m=Min(x,y);
		alert("这两个数中最小的数为"+m);
		</script>
	</body>
</html>

9.同步案例4-9：函数的变量作用域练习。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script type="text/javascript">
	var a=100;
	function send(){
		var a=10;
		document.write("局部变量的值是"+a+"<br> ");		
	}
	send(a);
	document.write("全局变量的值是"+a);	
	</script>	
	</body>
</html>

10.同步案例4-10：求1+（1+2）+（1+2+3）+…+（1+2+3+…+n）的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>		
	</head>
	<body>
	<script type="text/javascript">
	function Sum(n){
		var sum=0,i;
		for(i=1;i<=n;i++)sum+=i;
		return sum;		
	}
	function Sum_all(n){
		var sum=0,i;
		for(i=1;i<=n;i++){
			sum+=Sum(i);
			}
			return sum;		
		}		
	var n=parseInt(prompt("n="));
	alert("该算式的值为："+Sum_all(n));
	</script>
	</body>
</html>

11.综合案例4：编写可以根据输入数值实现不同层数的三角形“*”图案的函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<script type="text/javascript">
	function draw(n){
		var i,j;
		document.write("<pre>");
		for(i=1;i<=n;i++){
			for(j=1;j<=n-i;j++)document.write(" ");
			for(j=1;j<=i;j++)document.write("* ");
			document.writeln();
		}
		document.write("<pre>");
	}
	</script>	
	</head>
	<body>
	<script type="text/javascript">
	var n=prompt("请输入三角形图案的层数");
	draw(n);
	</script>	
	</body>
</html>

结果记录
与分析总结
1.同步案例4-1：isNaN()函数应用的截图。
在这里插入图片描述

2.同步案例4-2：parseFloat()和parseInt()函数应用的截图。
在这里插入图片描述

3.同步案例4-3：定义一个函数，能够在页面上输出字符串的截图。
在这里插入图片描述

4.同步案例4-4：定义函数，实现计算商品总价的截图。
在这里插入图片描述

5.同步案例4-5：通过函数名直接调用同步案例4-4中的函数的截图。
在这里插入图片描述

6.同步案例4-6：通过超链接调用同步案例4-4中的函数的截图。
在这里插入图片描述

7.同步案例4-7：通过函数统计商品的总价的截图。
在这里插入图片描述

8.同步案例4-8：通过函数返回值求出两个数中最大数的截图。
在这里插入图片描述

9.同步案例4-9：函数的变量作用域练习的截图。
在这里插入图片描述

10.同步案例4-10：求1+（1+2）+（1+2+3）+…+（1+2+3+…+n）的值的截图。
在这里插入图片描述

11.综合案例4：编写可以根据输入数值实现不同层数的三角形“*”图案的函数的截图。
在这里插入图片描述

二、总结。
JavaScript函数分为内置函数和自定义函数。内置函数是系统与定义好的，可以直接调用，自定义函数可以根据自己的需要去创建，创建自定义函数要遵循定义函数的格式。
在JavaScript中调用函数有3中方法，一是直接用函数名来调用，二是通过超链接“JavaScript：函数名（）”的方式来调用，三是通过事件来调用。
JavaScript函数可以有参数和返回值。函数的参数可以有1个或多个参数，多个参数之间要用逗号隔开，在定义函数时的参数，称为形参；在调用函数时输入的参数值，称为实参。参数的个数、顺序、类型须同形参一致。
JavaScript函数变量按作用域来分为全局变量和局部变量。全局变量是指在函数体外定义的变量，对整个程序起作用。局部变量是指在循环体内定义的变量，只对本函数起作用。不同函数的局部变量是可以同名的。
JavaScript中常用的自定义函数分别是eval()、escape()、unescape()、isNaN()、isFinite()、parseFloat()、parseInt()。eval()函数可以用来计算字符串中的表达式，返回表达式的值。escape()函数和unescape()函数是一对互逆函数，escape()函数用于将字符串（除字母和数字）进行编码转换，转换为%AA或者%UUUU的形式。AA指的是该字符的ASCII码的十六制数的形式，UUUU指的是非ASCII字符（如汉字）的Unicode码的形式。isNaN()函数用来确定一个变量是否是NaN,如果是非数字返回true，否则返回false。isFinite()函数用来确定一个变量是否有限，如果这个变量不是NaN、负无穷和正无穷，返回true，否则返回false。parseFloat()函数用来将数字或数字与字母混合的字符串转换成浮点型。由数字和字母组成的字符串，如果开头不是数字，则返回NaN；如果是则将第一个字母前面的数字转换成浮点数。