天天看点

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明 三、函数的调用

目录

一、函数是什么?

二、函数的声明

1.有名函数

2.匿名函数

3.命名规则

三、函数的调用

有名函数的调用

一、函数是什么?

可重复使用的代码块,为解决大量的冗余代码,当多个元素所处引起的事件是一样时,可以定义一个函数,这几个元素分别调用这个函数,大大的节省了代码量。

二、函数的声明

1.有名函数

代码如下(示例):

function+函数名(){ ............}

<script type="text/javascript">
		function fun() {
             //函数体的编写	
		}
	</script>
           

2.匿名函数

代码如下(示例):

与有名函数不同的是,匿名函数不可以直接被创建,否则会报错

<script type="text/javascript">
		function (){	
		}
	</script>
           
JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明 三、函数的调用

3.命名规则

原则上与变量命名一致

三、函数的调用

有名函数的调用

代码如下(示例):

函数名();

<script type="text/javascript">
		function f1(){
			alert('有名函数');
		}
		f1();
	</script>
           
JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明 三、函数的调用

 获取元素并给元素创建事件来调用函数(创建一个div 使用按钮来修改div的长宽)

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				height: 200px;
				width: 200px;
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<button type="button" id="btn">按钮</button>
	</body>
	<script type="text/javascript">
		function fun() { //函数体的编写
			obox.style.height = '100px';
			obox.style.width = '100px';
		}
		var obtn = document.getElementById('btn');
		var obox = document.getElementById('box'); //获取元素  获取之后要进行控制台检查
		obtn.onclick = fun;
	</script>
</html>