開始今天的JS教學吧
上一篇教大家什麼是變數
這一篇要開始為大家解說什麼是函式
函式也可以稱作"方法"
就如同字面上的意思是用來完成事情的流程
拿料理來比喻的話
變數是食材，方法是步驟
照著步驟把食材加工完畢，就完成一道料理
JS的基本方法如下
function 函式名稱(參數1,參數2....){
程式撰寫區
}
寫在函式中的程式除非呼叫函式，否則不會被執行
function 是一個關鍵字
參數是在呼叫這個函式時傳遞進去的
跟變數相同的是,因為JS是弱型別,所以函式也不需要指定回傳值
如果是強行別的語言,會強制要求這個函式的回傳值是甚麼
那我們就來寫個範例吧
<html>
<head>
<title>第一隻JS</title>
</head>
<body>
</body>
<script type="text/javascript">
function F1(){
alert(1);
alert(2);
alert(3);
alert(4);
}
</script>
</html>
相信運行完後什麼都沒有發生
因為我們只是撰寫了函式卻沒有去呼叫(執行)函式
如果把程式碼改成這樣
<html>
<head>
<title>第一隻JS</title>
</head>
<body>
</body>
<script type="text/javascript">
function F1(){
alert(1);
alert(2);
alert(3);
alert(4);
}
F1();
</script>
</html>
再次運行後,畫面上會跳出四個小視窗
因為我們有做呼叫的動作
剛剛示範的叫做無回傳值函式
接下來我們來寫一隻有回傳值的函式吧
回傳使用的是一個叫做 return 的關鍵字
<html>
<head>
<title>第一隻JS</title>
</head>
<body>
</body>
<script type="text/javascript">
function F1(){
return 1+1;
}
var x1 = F1();
alert(x1);
</script>
</html>
通常有回傳值得函式在執行時,都會用一個變數去承接
不然回傳值等於沒有用
在F1這個函式中,回傳了一個 1+1
然後宣告了一個x1的變數把F1的回傳值放入
再用alert把x1顯示出來
執行後會發現x1的值是2
這個2就是F1回傳的1+1
要特別注意的是一旦函式中執行到了return,往後的程式碼一概不執行
<html>
<head>
<title>第一隻JS</title>
</head>
<body>
</body>
<script type="text/javascript">
function F1(){
return 1+1;
alert(1);
alert(2);
alert(3);
alert(4);
}
var x1 = F1();
alert(x1);
</script>
</html>
向上方的範例,return後面的所有alert完全不會被執行到
接下來我們來寫一個有帶參數的函式
<html>
<head>
<title>第一隻JS</title>
</head>
<body>
</body>
<script type="text/javascript">
var x = 20;
var y = 40;
function F1(a,b){
return a+b;
}
var x1 = F1(x,y);
alert(x1);
</script>
</html>
我們先宣告了x y 兩個變數
然後在F1的參數區一樣寫了兩個參數
之後在呼叫F1時把x y 傳進去,兩個參數之間用逗點區隔
大家會疑惑的是為什麼F1的參數是a b
但是我們傳進去的是x y 呢??
其實對於F1這個函式而言,a b 只是個名稱
a b的值是由外部傳入的
如果要用話語來形容
我們是把x的值複製給a,把y的值複製給b
複製過後不管a b怎麼變,x y 都永遠不會受到影響
執行後x1的值會是20+40=60
那麼~在函式中可不可以宣告變數呢??
這就留給大家去玩~
老話一句,只有動手去寫、去玩,才能把東西變成自己的
今天教的都是最最基礎的運用
請大家要熟記於心
往後的教學是少不了這些的
下一篇要教大家的是陣列,請大家期待吧