iT邦幫忙

2025 iThome 鐵人賽

DAY 24
0
Modern Web

從骨架到靈魂:網頁構成三部曲系列 第 24

Day - 24 JavaScript函數說明

  • 分享至 

  • xImage
  •  

1.認識函式

隨著程式開發的內容越來越多,在操作時常會有許多相同的程式動作與判斷,不免會產生許多相似或重複的內容。若將這些經常使用或重複的程式碼整理成一個程式區段,在程式中可以隨時呼叫使用,這樣的程式區段就叫做 函式。

函式的使用有以下優點:

1.函式具有重複使用性,程式可以在任何地方呼叫並使用,不必重複撰寫相同的程式碼

2.函式的加入會讓程式碼更為精簡,結構更為清楚,在維護上會更加輕鬆。

3.若是函式中的程式產生錯誤,在修正時只要針對函式內容進行修改,所有程式中呼叫的地方即可正確執行。

2.JavaScript函式基本語法

function 函式名稱([第一個參數,第二個參數...第N個參數]) {
    // 需要執行程式的內容;
    ......
    return 傳回值;
}

3.實際案例

第1步:先定義一個函式

我們使用 function 關鍵字來定義一個名為 addNumbers 的函式。它有兩個參數 num1 和 num2,用來接收要相加的數字。函式內部會將這兩個數字相加,並使用 return 將計算結果傳回。

function addNumbers(num1, num2) {
    let sum = num1 + num2;
    return sum; // 將計算結果傳回
}

return sum會將計算結果傳回
第2步:呼叫剛剛定義的函式

定義好函式後,它還不會自己執行。我們需要「呼叫」(Call) 它,並傳入實際的數值 (例如 5 和 10)。函式會回傳計算結果,我們可以宣告一個新的變數 (如 result) 來接收這個結果。

let result = addNumbers(5, 10);
document.write("計算結果是:" + result);  

最後會在網頁上會顯示 "計算結果是:15"


上一篇
Day - 23 JavaScript變數說明
系列文
從骨架到靈魂:網頁構成三部曲24
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言