JavaScript進階之函式
1.什麼是函式
函式的作用,可以寫一次程式碼,然後反覆地重用這個程式碼。
如:我們要完成多組數和的功能。
var sum;
sum = 3+2;
alert(sum);
sum=7+8 ;
alert(sum);
…. //不停重複兩行程式碼
如果要實現8組數的和,就需要16行程式碼,實現的越多,程式碼行也就越多。所以我們可以把完成特定功能的程式碼塊放到一個函式裡,直接呼叫這個函式,就省去重複輸入大量程式碼的麻煩。
使用函式完成:
function add2(a,b){
sum = a + b;
alert(sum);
} // 只需寫一次就可以
add2(3,2);
add2(7,8);
…. //只需呼叫函式就可以
2.定義函式
如何定義一個函式呢?看看下面的格式:
function 函式名( )
{
函式體;
}
function定義函式的關鍵字,“函式名”你為函式取的名字,“函式體”替換為完成特定功能的程式碼。
我們完成對兩個數求和並顯示結果的功能。並給函式起個有意義的名字:“add2”,程式碼如下:
<script type="text/javascript">
function add2(){
sum = 3 + 2;
alert(sum);
}
add2();
</script>
3.函式呼叫
函式定義好後,是不能自動執行的,需要呼叫它,直接在需要的位置寫函式名。
第一種情況:在<script>
標籤內呼叫。
<script type="text/javascript">
function add2()
{
sum = 1 + 1;
alert(sum);
}
add2();//呼叫函式,直接寫函式名。
</script>
第二種情況:在HTML檔案中呼叫,如通過點選按鈕後呼叫定義好的函式。
<html>
<head>
<script type="text/javascript">
function add2 ()
{
sum = 5 + 6;
alert(sum);
}
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()"> //按鈕,onclick點選事件,直接寫函式名
</form>
</body>
</html>
注意:滑鼠事件會在後面講解。
4.有引數的函式
上節中add2()函式不能實現任意指定兩數相加。其實,定義函式還可以如下格式:
function 函式名(引數1,引數2)
{
函式程式碼
}
注意:引數可以多個,根據需要增減引數個數。引數之間用(逗號,)隔開。
按照這個格式,函式實現任意兩個數的和應該寫成:
function add2(x,y)
{
sum = x + y;
document.write(sum);
}
x和y則是函式的兩個引數,呼叫函式的時候,我們可通過這兩個引數把兩個實際的加數傳遞給函數了。
例如,add2(3,4)會求3+4的和,add2(60,20)則會求出60和20的和。
5.返回值的函式
思考:上一節函式中,通過”document.write”把結果輸出來,如果想對函式的結果進行處理怎麼辦呢?
我們只要把”document.write(sum)”這行改成如下程式碼:
function add2(x,y)
{
sum = x + y;
return sum; //返回函式值,return後面的值叫做返回值。
}
還可以通過變數儲存呼叫函式的返回值,程式碼如下:
result = add2(3,4);//語句執行後,result變數中的值為7。
注意:函式中引數和返回值不只是數字,還可以是字串等其它型別。