# [JavaScript] function函式 ###### tags: `JavaScript` ### 1. 函式寫法 函式宣告範例 ``` function greet(){ alert('你好') } //執行函數 greet(); ``` 帶入參數範例 ``` function cokeprice(num){ var coke = 30; var total = coke* num; console.log(total) } //執行函數 cokeprice(4); 120 ``` ### 2. 觀念：變數區別 * 全域變數 var total放外側，系統便會紀錄，在console.log(total)宣告中便會顯現出結果(左側顯示數字80) ![](https://i.imgur.com/BIUHUGm.png) * 區域變數 var total寫在function內，系統會不紀錄以釋放空間，則無法顯現出呼叫結果(左側顯示undefined)。這是因為，我們雖然有宣告變數 total ，但是是在 function 內，作用域也只在 fucntion 內，這就是所謂的區域變數 ![](https://i.imgur.com/O4oHBnw.png) #### 結論 而之所以會有全域變數跟區域變數區別外，除了作用域的不同，跟記憶體也有關。 當我們變數宣告在 function 內為區域變數，我們呼叫 function 時，此時變數才會被建立佔用記憶體，而當 function 執行完畢時，就會被刪除，記憶體空間也會被釋放 反之，全域變數是只要宣告之後就會佔用記憶體空間，而佔用記憶體空間會影響到使用者的電腦效能問題，所以當我們在宣告變數時，要思考這個變數的作用，是可以放在全域，還是宣告在 function 內即可。 ### 3. 宣告順序 * function在js列為優先執行的宣告，因此顯示的順序不會受影響，稱為Hoisting。而變數的宣告就不同，會依照呼叫的順序所影響，變數必須要先宣告才能顯示出結果，因此建議將呼叫顯示的項目放在最尾端就能避免此問題出現。 ### 4. 點餐系統實作 web ![](https://i.imgur.com/Cl5q6UX.png) html ``` <body> <div class="wrap"> <div class="wrap-inner"> <h1>西餐廳 - 顧客點餐篇</h1> <p>服務生：Hello，請問您想要點什麼？</p> <p>　顧客：給我 <input type="text" id="hamNumId" > 個漢堡，再 <input type="text" id="cokeNumId"> 杯可樂吧！</p> <p>服務生：<input type="button" Id="countId" value="計算中">，好的，總計是<em id="totalId" class="tag"></em>元</p> </div> </div> <script src="js/all.js"></script> </body> ``` js ``` document.getElementById('countId').onclick = function(){ var hamPrice = 50; var cokePrice = 20; var hamNum = parseInt(document.getElementById('hamNumId').value)*hamPrice; var cokeNum = parseInt(document.getElementById('cokeNumId').value)*cokePrice; document.getElementById('totalId').textContent = hamNum + cokeNum } ``` - 第一行：onclick 點擊後代入函式function - 第二三行：變數宣告xy的原價格 - 第四五行：1.帶入計算公式，2.使用parseInt()將字串轉換成數字，3.可以使用console.log(typeof(變數))測試是否是字串還是數值，4.為了取得id的值，在後方增加.value即可 - 第六行：輸出結果 - document.getElementById('html的id命名名稱')為前置的宣告語法，後方輸入onclick點擊後的行為，後方輸入value/text數值，後方輸入textContent帶出結果。 - console log()可在網頁上顯示結果，確認語法是否正確 ### 執行步驟 #### 目的 要使用點餐系統計算 輸入項目：漢堡幾個，可樂幾個，確認按鈕 得出結果：總共多少錢 #### 綁定 漢堡掛一個id 可樂掛一個id 確認鈕掛一個id 總共多少錢掛一個id #### 執行程序 函式掛在確認鈕上，點擊後便會進行運算， 漢堡及可樂的價錢放在函式內 運算值內的定義同樣放在函式內，並產出基本公式 運算結果也就是總共多少錢，也放在函式內得出結果 再使用顯示的語法 document.getElementById(‘按鈕id’)，並使用.onclick=function() #### 總結 定義價格 計算公式：同樣是使用get公式，因為要取用欄位上的值，後方需增加.value 顯示價格：document.getElementById(‘總共多少錢’).textcontent = ### 5. return回傳用法 * 參考一 console.log(tom)是指定一個人名，而此人名是經由var所定義，在前面的函數運算的結果，就必須經由return來做回傳特定的數值 ![](https://i.imgur.com/vltL27R.png) * 參考二 ``` function getHamburger(Num){ var hamburgerPrice = 10; var total = hamburgerPrice * Num; return total; } var tom = getHamburger(35); // 回傳 350 var jerry = getHamburger(40); // 回傳 400 ``` 上述的程式碼，除了計算的方式都寫在 function 內，最後還有一行 return total; 是回傳函式內的變數 total 的值，而變數 total 是計算的總結果。所以當我們要計算總價格時，僅需要針對呼叫函式且帶進去參數即可。 結論：如果得出來的答案非直接的，而是有很多的命名如(人名)並需要Var代入另一個函式(含參數)的話，函式內就可以用return回傳數值，如 var [Ａ命名] = [函式]（變換數值） 使用return回傳特定的值如return total;代表之後套用此函數都會回傳total這個值，除了方便我們做一次性的運算，也能帶入不同的數值得出結果。