昨天我們學了 迴圈，能讓程式自動重複做事情。
但有時候我們想要「打包一段程式」，以後要用的時候只要叫它名字，它就會乖乖跑。

這個「魔法咒語」就是 —— 函式 (function)。

1. 函式是什麼？

函式就像一個小工具箱 🧰：

•你把一段程式碼收進去

•給它一個名字

•以後只要呼叫這個名字，就能重複使用

2. 函式的基本語法

function 函式名稱() {
  // 要執行的程式
}

呼叫函式：

函式名稱();

範例

function sayHello() {
  console.log("哈囉，我是函式！");
}

sayHello(); // 呼叫 → 印出「哈囉，我是函式！」

3. 帶參數的函式

有時候我們希望函式更靈活，可以傳進去不同的值。

function greet(name) {
  console.log(`哈囉，${name}！`);
}

greet("小明");
greet("小華");

4. 有回傳值的函式

函式也可以「計算結果」後，把答案傳回來。
用 return 關鍵字。

function add(a, b) {
  return a + b;
}

let result = add(5, 3);
console.log("結果 =", result); // 8

5. 箭頭函式（ES6 語法）

簡短版的函式寫法。

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

今日實戰

(1) 計算 BMI

<script>
  function bmi(weight, height) {
    return weight / (height * height);
  }

  console.log("BMI =", bmi(60, 1.65).toFixed(2));
</script>

(2) 改字串大小寫

<script>
  function shout(text) {
    return text.toUpperCase();
  }

  console.log(shout("hello js")); // HELLO JS
</script>

(3) 點按鈕計算平方

<input id="num" type="number" placeholder="輸入數字">
<button onclick="calcSquare()">計算平方</button>
<p id="result"></p>

<script>
  function calcSquare() {
    let n = document.getElementById("num").value;
    document.getElementById("result").textContent = `平方 = ${n * n}`;
  }
</script>

今日小結

•函式就是「打包一段程式」的魔法咒語，想用的時候直接呼叫。

•學會了三種情境：

• 基本函式

• 帶參數

• 有回傳值

•也認識了現代寫法 箭頭函式。

今天之後，我們就能把程式拆成小模組，靈活又乾淨 ✨。
明天（Day 20）要進入 事件 (Event)，讓網頁「更有互動感」，點擊、輸入、滑鼠移動都能觸發程式 🎮。