---
# System prepended metadata

title: "\U0001F3C5 Day 08 - 除了 HTML、CSS，還有 JS！"
tags: [2025 VibeCoding 體驗營]

---

# 🏅 Day 08 - 除了 HTML、CSS，還有 JS！

校長的話：


hi 提醒同學們，每日任務不一定當天做完才能打卡

你也可以在期限內在討論串先留言，並說明當天你有什麼計畫、之後會再來編輯你的解答，這樣也是可以的

畢竟每個學生的背景都不一樣，但都會有適合自己的時間進修，希望讓學生在過程中都可以學到東西 :D

像是下圖這樣子是允許的 🙌
![截圖 2025-11-12 下午2.35.42](https://hackmd.io/_uploads/BkoT9s-eWg.png)

## 任務關卡：學 JS，替家裡的寵物做一個寵物年齡計算年齡

![截圖 2025-11-12 下午2.24.26](https://hackmd.io/_uploads/Hyc4usZlWe.png)


這是校長家的寵物狗，因為我和太太都很喜歡哈利波特，所以取名為「妙麗」

我和太太每過一陣子都會有個困擾，那就是：

1. 忘了他幾年出生的
2. 換算人類年齡大概是幾歲

所以我們很常會有這樣的對話：

「... 所以妙麗現在換算人類年紀有比我大嗎？」
「哪有@@，他應該才 30 幾歲吧」

「他現在幾歲啊？2 歲還是 3 歲？？」
「我記得他是 228 出生的..大概兩歲半吧？」


為了幫助健忘的校長，**請做出一個網頁版的狗狗年齡計算機**


## 進入正題，開始學 JS


在網頁的世界裡：
1. HTML 是網頁中的骨幹
2. CSS 可以美化網頁中各個元素
3. JS  像是讓網頁動起來的「大腦」，負責所有互動和邏輯，例如彈出視窗、按鈕點擊、表單計算等等


學生們藉由 Vibe Coding 來解決生活、工作上的問題

所以校長並不會讓你們重新學習 JavaScript

這裡直接提供程式碼，讓你們體驗 JS 可以做到什麼事情

還請將下列的 Code 貼到 Codepen 或 VSCode 觀看效果如何」


## 範例一：打開頁面就跳出 Hello World

你會發現一個`<script></script>`標籤，裡面就是專門來操控網頁能夠動起來

以範例一來說，就會彈跳視窗出來，顯示文字


```HTML=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>範例 1：Hello JavaScript</title>
</head>
<body>
  <h1>範例 1：打開這個頁面就會跳出訊息</h1>

  <script>
    alert('Hello JavaScript！');
  </script>
</body>
</html>
```
![截圖 2025-11-12 下午2.34.24](https://hackmd.io/_uploads/Byxt9iWgWe.png)

## 範例二：按鈕被點擊，也能偵測並回饋

甚至也能在使用者點擊網頁元素時，也可以被偵測，並提供想回饋的資訊動作

```HTML=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>範例 2：按鈕點擊</title>
</head>
<body>
  <h1>範例 2：點擊按鈕</h1>

  <button id="click-btn">點我一下</button>

  <script>
    const btn = document.getElementById('click-btn');

    btn.addEventListener('click', function () {
      alert('我被點擊了！');
    });
  </script>
</body>
</html>
```
![截圖 2025-11-12 下午2.38.11](https://hackmd.io/_uploads/HkXFoiWgZl.png)


### 範例三：加法產生器

甚至也能填寫數字後，JS 擷取數字進行運算


```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>範例 3：兩數相加</title>
</head>
<body>

  <label>
    數字一：
    <input type="number" id="num1">
  </label>
  <br>

  <label>
    數字二：
    <input type="number" id="num2">
  </label>
  <br>

  <button id="add-btn">計算結果</button>

  <p>答案：<span id="result">尚未計算</span></p>

  <script>
    const num1Input = document.getElementById('num1');
    const num2Input = document.getElementById('num2');
    const addBtn = document.getElementById('add-btn');
    const resultSpan = document.getElementById('result');

    addBtn.addEventListener('click', function () {
      const a = Number(num1Input.value);
      const b = Number(num2Input.value);
      const sum = a + b;

      resultSpan.textContent = sum;
    });
  </script>
</body>
</html>
```

![截圖 2025-11-12 下午2.42.34](https://hackmd.io/_uploads/BJsD3j-gbl.png)






### 總結本日知識點

* JS 是讓網頁動起來的「大腦」，負責所有互動和邏輯，例如彈出視窗、按鈕點擊、表單計算等等
* 本日教導的 JS  知識有
    * 彈跳視窗
    * 點擊可互動
    * 表單元素可擷取出來進行加減乘除



## 題目：妙麗歲數計算機

妙麗的出生年月日是：**2023/2/28**

他希望輸入出生年月日後，就能顯示
1. 他狗的年齡是幾歲
2. 換算人類的年齡是幾歲

我們有問了下妙麗，他期望的介面如下圖，一塊來幫幫健忘的校長吧！

![未命名設計 (15)](https://hackmd.io/_uploads/SkLW13-lbe.png)


## 回報格式


1. 請提供您的人狗換算歲數文獻來源
2. 您的 Codepen、GitHub Pages 網址操作
3. 您設計的 prompt

