Sign in Subscribe

第四部分：進階 JavaScript 與網頁視覺動畫教學大綱

Ray 貓

• 8 min read
第四部分：進階 JavaScript 與網頁視覺動畫教學大綱
📅 發布時間: 2024-06-24 🏷️ 標籤: JavaScript, DOM 操作, 事件監聽, Canvas 動畫

在這個章節中，我們將介紹如何讓 JS 操作網頁的資料，比如說取得使用者讀取的資料、送出文件、修改文字之類的。

💻 網頁 DOM 操作

🎯 學習目標:理解 DOM 樹狀結構，並用 getElementById 取得元素修改元素樣式（如顏色）和內容（如 innerText）處理使用者事件（如按鈕點擊 addEventListener）讀取和清空輸入框值（value）

步驟 1: DOM 結構與樹狀結構

<!DOCTYPE html>
<html>

<head>
  <title>我的網頁</title>
</head>

<body>
  <h1>這是一個標題</h1>
  <div>
    <h2>這是一個小標題</h2>
    <p>這是一段文字。</p>
  </div>
</body>

</html>
DOM 樹狀結構

圖: DOM 就像是網頁的地圖，讓我們可以找到網頁上的每個元素。可以把 DOM 想像成一棵大樹，每個元素都是這棵樹上的一個節點。

步驟 2: 為元素加上 id 屬性

// ... (前面的程式碼保持不變)

<div>
    <h2 id="smallTitle">這是一個小標題</h2>  // [新增] id 屬性，讓 JS 可以精準定位元素，因為 id 是元素的唯一標識
    <p>這是一段文字。</p>
</div>

// ... (後面保持不變)

步驟 3: 插入 <script> 標籤執行 JS

// ... (前面的程式碼保持不變)

<div>
    <h2 id="smallTitle">這是一個小標題</h2>
    <p>這是一段文字。</p>
</div>
<script>  // [新增] <script> 標籤，讓 JS 在網頁載入時自動執行
console.log('Hi!');  // [新增] 在控制台輸出訊息，確認 JS 已運行
</script>

// ... (後面保持不變)
控制台輸出

圖: 透過 F12 查看 console.log 輸出。

步驟 4: 使用 getElementById 取得元素

<script>
    let smallTitleElement = document.getElementById("smallTitle");  // [新增] document.getElementById 用 id 精準找到元素，建立參考變數以便後續操作
</script>
取得元素

圖: JS 已定位到小標題元素。

步驟 5: 修改元素樣式

<script>
    let smallTitleElement = document.getElementById("smallTitle");
    smallTitleElement.style.color = "red";  // [新增] 透過 style 屬性直接修改 CSS 顏色，讓元素視覺變化
</script>
顏色變紅

圖: 小標題變成紅色。

步驟 6: 修改元素文字內容

<script>
    let smallTitleElement = document.getElementById("smallTitle");
    smallTitleElement.style.color = "red";
    smallTitleElement.innerText = "這是一個紅色小標題";  // [新增] innerText 修改元素的文字內容，讓使用者看到即時變化
</script>
文字更新

圖: 文字變成「這是一個紅色小標題」。

步驟 7: 新增按鈕元素處理事件

<div>
    <h2 id="smallTitle">這是一個小標題</h2>
    <p>這是一段文字。</p>
    <button id="myButton">這是一個按鈕</button>  // [新增] button 元素，用來捕捉使用者點擊事件
</div>
新增按鈕

圖: 頁面新增按鈕。

步驟 8: 取得按鈕元素

<script>
    // ... (smallTitleElement 相關程式碼保持不變)

    let button = document.getElementById('myButton');  // [新增] 同樣用 getElementById 定位按鈕，為事件監聽做準備
</script>
取得按鈕

圖: JS 已定位按鈕。

步驟 9: 新增點擊事件監聽

<script>
    // ... (前面的程式碼保持不變)

    let button = document.getElementById("myButton");
    button.addEventListener("click", () => {  // [新增] addEventListener 監聽 "click" 事件，當使用者點擊時執行回調函式
        smallTitleElement.style.color = "blue";  // [新增] 在事件中修改顏色為藍色，實現互動
        smallTitleElement.innerText = "這是一個藍色小標題";  // [新增] 在事件中更新文字，展示事件觸發效果
    });
</script>
事件觸發

圖: 點擊按鈕後小標題變藍。

步驟 10: 新增輸入框

<div>
    // ... (前面的元素保持不變)
    <input id="myInput" type="text" placeholder="這是一個輸入框" />  // [新增] input 元素，讓使用者輸入文字
</div>
新增輸入框

圖: 頁面新增輸入框。

步驟 11: 取得輸入框元素

<script>
    // ... (前面的程式碼保持不變)

    let myInputElement = document.getElementById("myInput");  // [新增] 定位輸入框，為讀取值做準備
</script>
取得輸入框

圖: JS 已定位輸入框。

步驟 12: 讀取輸入值並更新顯示

<script>
    // ... (前面的程式碼保持不變)

    button.addEventListener("click", () => {
        let inputValue = myInputElement.value;  // [新增] .value 讀取輸入框內容，讓 JS 取得使用者資料
        smallTitleElement.innerText = inputValue;  // [新增] 將輸入值顯示到小標題，实现資料綁定
    });
</script>
讀取輸入

圖: 點擊後顯示輸入文字。

步驟 13: 清空輸入框

<script>
    // ... (前面的程式碼保持不變)

    button.addEventListener("click", () => {
        let inputValue = myInputElement.value;
        smallTitleElement.innerText = inputValue;
        myInputElement.value = "";  // [新增] 設定 .value 為空字串，清空輸入框，提供更好使用者體驗
    });
</script>
清空輸入

圖: 點擊後輸入框清空。

作業時間

試試看搭配 if else 語法做一個成績驗證系統

如果使用者輸入 大於等於 60 ，按下按鈕後會顯示文字 及格

如果使用者輸入 小於 60 ，按下按鈕後會顯示文字 不及格

💻 作業時間答案

步驟 1: 成績驗證系統完整範例

<!DOCTYPE html>
<html>

<head>
    <title>我的網頁</title>
</head>

<body>
    <input id="scoreInput" type="text" placeholder="輸入成績" />
    <button id="checkButton">檢查分數</button>
    <div id="myScoreState"></div>

    <script>
        let scoreInput = document.getElementById("scoreInput");
        let checkButton = document.getElementById("checkButton");
        let myScoreState = document.getElementById("myScoreState");

        checkButton.addEventListener("click", function () {
            let score = parseInt(scoreInput.value);
            if (score >= 60) {
                myScoreState.textContent = "恭喜你及格了！";
            } else {
                myScoreState.textContent = "抱歉你不及格！";
            }
        });
    </script>
</body>

</html>

Canvas

Canvas 是 Html 的元素 <canvas>

我們可以用 Canvas 來繪製圖形，就像用畫筆在畫布上畫畫一樣。

💻 Canvas 動畫入門

🎯 學習目標:新增 <canvas> 元素並取得 context設定畫筆顏色並繪製矩形

步驟 1: 新增 Canvas 元素

<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>  // [新增] <canvas> 元素，指定寬高作為繪圖畫布
</body>
空白 Canvas

圖: 400x400 空白畫布。

步驟 2: 取得 Canvas 元素

<script>
    const canvas = document.getElementById("myCanvas");  // [新增] 用 getElementById 定位 canvas，為後續繪圖準備
</script>
取得 Canvas

圖: JS 已連結畫布。

步驟 3: 取得 2D 繪圖上下文

<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");  // [新增] getContext("2d") 取得 2D 畫筆，所有繪圖操作都透過 ctx 進行
</script>
取得上下文

圖: 畫筆已就緒。

步驟 4: 設定畫筆顏色

<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    ctx.fillStyle = "blue";  // [新增] fillStyle 設定填充顏色，為後續形狀上色
</script>
設定顏色

圖: 畫筆顏色設為藍色。

步驟 5: 繪製矩形

<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    ctx.fillStyle = "blue";
    ctx.fillRect(50, 50, 150, 150);  // [新增] fillRect(x, y, width, height) 從指定座標填充繪製矩形
</script>
繪製矩形

圖: 藍色矩形出現在畫布上。

Sign up for more like this.

Enter your email
Subscribe