函式(Function)

# 函式(Function) ###### tags: `NKFW 網頁設計入門` ## 介紹假設我們需要寫一段程式碼輸出三次"Hello"，按照前面學過的內容，應該會寫出類似底下的程式： ```javascript! alert("Hello"); alert("Hello"); alert("Hello"); ``` 但在借助函式的幫助下，我們可以將其改為底下的這個程式： ```javascript! function hello() { alert("Hello"); } hello(); hello(); hello(); ``` 上方的程式可以達到同樣的目標。 * alert()其實就是一個Javascript內建的函式！ ![](https://hackmd.io/_uploads/Byp8aaerh.png) ## 優點 * 減少寫作功能相同或相似的程式。 * 增加主要程式的易讀性。 * 易於除錯及修改程式。 ## 定義(Define)及呼叫(Call) 使用一個函式前必須先將其定義，定義函式的基本語法如下： ```javascript! function 函式名稱() { //執行動作/程式 } ``` 在程式中輸入"函式名稱();"即可呼叫函式，並執行函式中所撰寫的程式。 ```javascript! 函式名稱(); ``` ## 參數(Parameter) * 呼叫函式時，同時提供資料給函式以執行所需功能。 ```htmlembedded function hello(name) { alert("Hello, " + name + "."); } ``` 在撰寫上方函式後，即可透過給予函式資料來達到想要的效果，例如： ```htmlembedded hello("John"); hello("Mark"); ``` 執行程式後得到底下兩張圖的結果： ![](https://i.imgur.com/pSdrmdx.png) ![](https://i.imgur.com/Va6gmHa.png) 函式的參數可超過一個，例如下方程式： ```htmlembedded! function hello2(name1, name2) { alert("Hello, " + name1 + " and " + name2 + "."); } hello2("John", "Mark"); ``` 可得下圖結果： ![](https://i.imgur.com/tBuZTa8.png) ## Project1：單位轉換 :::info 單位轉換在物理計算中相當重要，透過適當的單位轉換才能夠符合公式的單位要求。請設計一個函式centiToMeter，可以接收1個數字，其單位視為公分，在將單位轉為公尺後輸出其數字部分。主要程式的部分則是以跳出視窗(prompt)讓使用者輸入數字，並將數字遞給函式輸出結果。 ::: :::spoiler 參考答案 ```htmlembedded! function centiToMeter(centimeter) { alert("長度為" + centimeter/100 + "m"); } length = prompt("請輸入長度(cm):") centiToMeter(length); ``` ::: ## 回傳(Return) 函式的功能並不只有執行動作(如alert)，我們也可以透過將函式的運算結果回傳主要程式並儲存下來，更方便的做單次或多次的運用。例如，我們可以將Project1的程式重寫為底下的形式，並保留原本執行效果： ```htmlembedded! function centiToMeter(centimeter) { return centimeter/100; } meter = centiToMeter(150); alert(meter); ``` ## Project2：圓形面積 :::info 一般在計算圓形面積時，我們需要用到pi值及圓的半徑，並可透過「PI * 半徑^2」的公式計算。請用函式的寫法設計一段程式，可透過給予函式圓形半徑，計算出圓形面積並回傳結果至主程式。 (PI使用3.14替代即可) ::: :::spoiler 參考答案 ```htmlembedded! function circleArea(radius) { PI = 3.14; return PI * radius**2; } ``` ::: ## Project3：計算BMI :::info 透過prompt()讓使用者輸入兩個數字，分別是身高和體重，並將他們傳入函式中，並在計算後回傳相應的BMI值，輸出給使用者觀看。 ::: :::spoiler an5w3r :::spoiler 參考答案 ```javascript! function calculateBMI (h, w) { return w / (h / 100) ** 2; } let height = prompt("Please enter your height(cm): "); let weight = prompt("Please enter your weight(kg): "); alert(calculateBMI(height, weight)); ``` ::: ## setTimeOut函式 * setTimeOut是一個Javascript內建的function，可以使程式在等待特定毫秒數後，執行指令。 * setTimeOut一共接受兩個輸入，依次分別是1個函式及1個數字。範例如下： ```htmlembedded! setTimeout(function() { alert("hello"); },3000); ``` ![](https://i.imgur.com/bkArGmD.png) 此程式執行3秒後才會得到圖中結果。 * 範例中「function() {......}」的使用法稱為anonymous function(匿名函式)，通常用於只執行一次的function，因此不必給予函式名稱。  * 範例中，我們將匿名函式做為setTimeOut()函式的輸入，此時我們將此匿名函式稱作callback function。 > [[參考說明](https://www.w3schools.com/js/js_callback.asp)] :::info 進階寫法：運用Arrow function(箭頭函式)的方式撰寫輸入setTimeOut()的函式(Arrow function也屬於anonymous function)。 ``` setTimeout( () => {alert(10)}, 3000 ); ``` ::: # setInterval,clearInterval函式 ### 基本語法: ```javascript= setInterval(function,delay); ``` * function:要重複執行的功能 * delay:每次執行的間隔時間 ```javascript= clearInterval(Interval variable) ``` * 停止迴圈 ### 範例說明: ```htmlembedded! <body> <p id="text">過五秒跳轉</p> <script> setInterval(redirect,1000*5) function redirect(){ location.href='https://www.youtube.com/' } </script> </body> ```