# 🏅 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