天天看點

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>