函数的引入与调用

最新推荐文章于 2023-05-30 10:45:37 发布

日服第一狐闹

最新推荐文章于 2023-05-30 10:45:37 发布

阅读量467

点赞数 1

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_56976215/article/details/126184105

版权

本文介绍了JavaScript中的函数概念，包括其作为代码块的可重复使用性。通过示例展示了如何创建和调用函数，特别是通过事件驱动的方式，如按钮点击触发函数执行。文章还提及了函数的三种调用方式：直接调用、通过事件调用和其他函数调用，并提供了具体的HTML和JS代码片段进行解释。

摘要由CSDN通过智能技术生成

引入函数

1、首先要知道函数是什么：
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
示例：
比如写一个：点击按钮输出三个hello world！；
点击按钮时，输出三遍hello world！

首先是点击按钮的html部分

<body>
	<!--
		    onclick:单击
		    ondblclick:双击 
		    οnclick=test（）
			点击出现就是一个点击事件
			点击发生的事件就可以使用函数来完成
	-->
	<button type="button" onclick="test()">点击显示3遍hello world</button>
</body>

js部分

<script>
	//点击按钮时，输出三遍hello
		/*
		函数(方法):
				function  函数名(){
					函数体；
				} 
			    函数的作用:代码封装(打包盒)，代码重用
				函数分类:
				 	系统函数:alert()  promt()  confirm()
					自定义函数:自己写的
		*/
		   function test(){  //function() 打包盒子
			   for (var i=1; i<=3; i++){
				   document.write("hello world！<br>")
			   }
		   }
		   //直接调用
		   test();
</script>

函数的调用

函数的调用有三种方法：

直接调用
通过过方法调用
被其他函数调用
示例：

<body>
		<!-- 第二种:通过事件调用 -->
		<button onclick="test()">点击</button>
		<button onclick="test2()">点击2</button>
</body>
```html

```javascript
		<script>
		  //函数一定被调用才能执行
		  function test(){
			 for (var x = 0; x <= 35; x++) {
			 	if (2 * x + 4 * (35 - x) == 94) {
			 		document.write("鸡:" + x + ",");
			 		document.write("兔:" + (35 - x));
			 	}
			 } 
		  }
		// 第一种:直接调用
			test();
			
		// 第三种:被其他函数调用
		function test2(){
			test();  //调用test
			document.write("666666");
		}
		</script>

日服第一狐闹

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
函数的引入与调用

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。比如写一个：点击按钮输出三个hello world！点击按钮时，输出三遍hello world！首先是点击按钮的html部分。// 第三种:被其他函数调用。//函数一定被调用才能执行。// 第一种:直接调用。...
复制链接

扫一扫