函式-JavaScript入門基礎（006）
技術標籤：JavaScriptjavascriptjquerycsscss3html
很多時候，我們需要程式執行相同和類似的任務。為了避免程式碼重複和冗餘，我們會把相似的功能縮寫在一個模組中，這個模組我們稱為函式。
使用函式可以讓程式碼的維護更方便。
如何建立函式呢？
函式的語法：
function函式名稱(){......程式碼}
首先是關鍵字function，接著是函式的名稱，後面緊跟一對圓括號，最後是一對花括號。圓括號中是可以帶引數的。這裡要注意一下，function是必須全部小寫的。
示例程式碼：
<script>function doThis(){.......做什麼}function doThat(){......做哪些}</script>
呼叫函式：
函式被宣告出來後，是不會自動執行的，需要明確的呼叫它，才會執行。呼叫函式時，只要寫出函式名，後帶一對圓括號即可。
示例程式碼：
<script>function doThis(){......做什麼}dothis();</script>
但是一般情況下，我們的函式都是給事件處理器寫的，所以在事件處理器中呼叫函式，如下：
<inputtype="button"name="btn"value="按鈕"onclick="dothis()">
JavaScript程式碼放置在頁面head區域：
之前的程式碼，我們基本都放在頁面的body區域，為了更好的發揮函式的作用呢，我們儘量把<script>程式碼放置在head區域，這個是因為head部分會在頁面載入順序中靠前執行。
示例程式碼：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>function sayHello() {alert("Hello");}</script></head><body><input type="button" value="Say Hello" onclick="sayHello()"></body></html>
以上程式碼，函式位於head部分，當單擊按鈕時，在事件中呼叫函式，函式體內部只有一行程式碼，功能是顯示一個提示框。
帶引數的函式：
無參函式，執行的程式基本是固定動作，如果需要根據一些條件值發生變換，那麼就需要給函式傳遞引數。
語法：
function 函式名（引數）示例函式
functioncube(x){alert(x * x * x);}
這個函式的作用是，計算一個數值x的立方，比如我們計算3的立方，
cube(3); //結果27當然，我們也可以傳入一個變數，
varnum = 3;cube(3); // 27
多引數函式：
function times(a,b){alert(a * b);}
當圓括號中需要多個引數時，我們可以用逗號進行分隔開。
呼叫時，
times(3,4) // 結果12在呼叫多引數函式時，需要傳遞的引數數量，一定要和宣告函式的引數數量一致，否則會報錯。另外需要注意一點，函式宣告中的引數名稱，和呼叫函式時的引數名稱，不需要一致，可以是不同的。比如：
宣告函式：
functiongetArea(length,width,height){alert(length * width * height);}
呼叫函式：
vara = 10;varb=10;var c = 10;getArea(a,b,c);
這樣是符合程式規則的，我們可以理解為，引數列表中的名稱就是佔位符，只要按照引數型別和值傳遞進去就可以了。
下面我們看一個示例程式碼：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>呼叫函式獲取按鈕資訊</title><script>function buttonReport(buttonId, buttonName, buttonValue) {var message1 = "Button id: " + buttonId + "\n";var message2 = "Button Name: " + buttonName + "\n";var message3 = "Button Value: " + buttonValue + "\n";alert(message1 + message2 + message3);}</script></head><body><input type="button" id="id1" name="left_button" value="Left Button" onclick="buttonReport(this.id,this.name,this.value)"><input type="button" id="id2" name="center_button" value="Center Button" onclick="buttonReport(this.id,this.name,this.value)"><input type="button" id="id3" name="right_button" value="Right Button" onclick="buttonReport(this.id,this.name,this.value)"></body></html>
上面的程式碼，函式buttonReport的作用是對傳入的三個引數，分別代表控制元件的id，name，value，進行顯示。而呼叫函式時，我們使用了this物件，在按鈕的事件中的this就表示按鈕自己，所以可以提取出按鈕自己的屬性，分別是id，name，value。
函式返回值：
有些時候，我們的函式需要計算後，返回一定的值，我們就可以return來進行返回值。
語法：
function函式名稱（引數1，引數2）{return 引數1與引數2運算}
舉例：
functiontimes(a,b){return a * b;}
上面函式的作用是兩數乘積，傳入引數a和引數b，計算出兩數之和，然後通過return，進行返回。
如果有返回值時，我們必須使用變數將返回值進行儲存的。
varget=times(3,4); // get = 12;下節我們接著分享關於函式的內容。
