本章學習重點
在這個實作專案中，我們將會把前幾章學到的知識全部融合在一起，從無到有建立一個美觀且功能齊全的網頁計算機。這是一個絕佳的練習，能幫助你深入理解程式如何與使用者互動。
- HTML 結構佈局: 學習如何使用 `div` 和 `button` 元素來搭建計算機的骨架，並給予它們適當的 `id` 與 `class` 以便後續操作。
- CSS 樣式美化: 運用 Flexbox 或 Grid 系統來做按鈕的精準排版，並學習如何美化按鈕的外觀、滑鼠懸停效果(`:hover`)與點擊效果(`:active`)。
- JavaScript 核心邏輯:
- DOM 操作: 學習如何使用 `document.getElementById` 來選取網頁元素，並用 `.innerText` 來更新螢幕上顯示的數字。
- 事件監聽: 透過 `onclick` 屬性，我們將學會如何讓按鈕在被點擊時，去觸發對應的 JavaScript 函式。
- 變數與狀態管理: 這是本章的靈魂！我們將用變數來儲存使用者當前輸入的數字、選擇的運算符號以及上一個數字，這就是「狀態管理」的基礎概念。
- 函式化程式碼: 我們會將不同的功能（如：輸入數字、選擇運算符、計算結果）拆分成獨立的函式，讓程式碼更清晰、更易於維護。
準備好了嗎？讓我們一起來看看完成後的計算機長什麼樣子，並挑戰自己動手做一個吧！