[JavaScript] Function介紹。
Function語法
JavaScript的Function是一個可以編寫執行特定功能程式碼的區塊，並由呼叫時執行。
利用Function計算數字相加:
<!DOCTYPE html>
<html>
<body>
<p id="sum"></p>
<script>
function SumFunction (a, b) {
return a + b;
}
document.getElementById("sum").innerHTML = "10+15="+Sum(10,5);
</script>
</body>
</html>
function 關鍵字，用來定義一個JavaScript的function。
SumFunction 為function的名稱，Function的名稱可以為字母、數字、下底線、$符號，規則與變數的命名相同。
括號( ) 可以包含參數名稱並以逗號區隔每個參數，如 (參數1, 參數2, 參數3,...)，若沒參數時()裡可以為空。
括號{ } 裡為function所要執行的程式碼，當有return的聲明時，function執行到return行便會停止，並回傳要return的值。
document.getElementById("sum").innerHTML = "10+15="+Sum(10,5) 這行程式碼中，呼叫function時的( )為必要的，若沒有括號表示function物件。
如下呼叫時，去除括號( ):
document.getElementById("sum").innerHTML = "10+15="+Sum;
呼叫Function
function{ }裡的程式會在以下情況被呼叫，並執行程式:
-
HTML的事件呼叫
-
在JavaScript中呼叫
-
自動呼叫
HTML 事件
當一個HTML事件發生時，JavaScript可以在偵測到事件並執行。
如下範例，在<button>中加入onclick屬性:
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('time').innerHTML = Date()">按鈕</button>
<p id="time"></p>
<script>
</script>
</body>
</html>
<button>標籤中加入HTML的onclick=" "事件。
document.getElementById('time').innerHTML 表示id="time"的HTML內容
Date() 為內建的function，顯示目前的日期與時間。
按下按鈕後的畫面:
由於function的程式碼通常會有很多段，因此通常會將function寫在<script>中，並由HTML事件呼叫:
<!DOCTYPE html>
<html>
<body>
<button onclick="Datefunction()">按鈕</button>
<p id="time"></p>
<script>
function Datefunction() {
document.getElementById("time").innerHTML = Date();
}
</script>
</body>
</html>
其它的HTML事件: HTML DOM 事件
function自動呼叫
function可以在script中，自動呼叫自己，如下:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello World!";
})();
</script>
</body>
</html>
在function( ) { }的前後加上括號( )指示為表達式。
並於最後加上( )，來自動執行表達式。
