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

# 網頁 DOM 操作 DOM 結構與樹狀結構基本上我們剛剛撰寫的 HTML 只是純粹的文字瀏覽器為了方便程式計算，會先將 HTML 轉換成一個巨大的 object 這就是 DOM（Document Object Model）可以很好的方便程式操作 DOM 就像是網頁的地圖，讓我們可以找到網頁上的每個元素。可以把 DOM 想像成一棵大樹，每個元素都是這棵樹上的一個節點。

1<!DOCTYPE html>
2<html>
3
4<head>
5  <title>我的網頁</title>
6</head>
7
8<body>
9  <h1>這是一個標題</h1>
10  <div>
11    <h2>這是一個小標題</h2>
12    <p>這是一段文字。</p>
13  </div>
14</body>
15
16</html>

我們先來看一下如何讓 JS 取得某個元素請先替指定元素加上 id 屬性 id，你可以想像就是替元素貼上一張訂製標籤方便程式找到他每個元素的 id 都應該是獨一無二的

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>我的網頁</title>
6</head>
7
8<body>
9    <h1>這是一個標題</h1>
10    <div>
11        <h2 id="smallTitle">這是一個小標題</h2>
12        <p>這是一段文字。</p>
13    </div>
14</body>
15
16</html>

除了在 F12 當中直接運行 JavaScript 你可以透過 <script> 元素插入 JavaScript 程式碼在裏頭他會在網頁打開的瞬間被自動執行

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>我的網頁</title>
6</head>
7
8<body>
9    <h1>這是一個標題</h1>
10    <div>
11        <h2 id="smallTitle">這是一個小標題</h2>
12        <p>這是一段文字。</p>
13    </div>
14    <script>
15    console.log('Hi!')
16    </script>
17</body>
18
19</html>

獲取元素（getElementById）我們可以用 JavaScript 來找到網頁上的元素，就像在樹上找到一片特定的葉子。我們可以用 getElementById 來找元素。

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>我的網頁</title>
6</head>
7
8<body>
9    <h1>這是一個標題</h1>
10    <div>
11        <h2 id="smallTitle">這是一個小標題</h2>
12        <p>這是一段文字。</p>
13    </div>
14    <script>
15        let smallTitleElement = document.getElementById("smallTitle");
16    </script>
17</body>
18
19</html>

接下來就可以很好的去對該元素讀取或操作比如說將他的 style 的 color 直接改成紅色

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>我的網頁</title>
6</head>
7
8<body>
9    <h1>這是一個標題</h1>
10    <div>
11        <h2 id="smallTitle">這是一個小標題</h2>
12        <p>這是一段文字。</p>
13    </div>
14    <script>
15        let smallTitleElement = document.getElementById("smallTitle");
16      smallTitleElement.style.color = "red";
17    </script>
18</body>
19
20</html>

將元素裏頭的文字改變

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>我的網頁</title>
6</head>
7
8<body>
9    <h1>這是一個標題</h1>
10    <div>
11        <h2 id="smallTitle">這是一個小標題</h2>
12        <p>這是一段文字。</p>
13    </div>
14    <script>
15        let smallTitleElement = document.getElementById("smallTitle");
16      smallTitleElement.style.color = "red";
17      smallTitleElement.innerText = "這是一個紅色小標題"
18    </script>
19</body>
20
21</html>

事件也就是使用者可以對這些元素做的事情好比說我們可以"點擊"按鈕、可以"輸入"文字點擊、輸入這些都是一個一個的事件我們先新增一個按鈕元素來教學

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>我的網頁</title>
6</head>
7
8<body>
9    <h1>這是一個標題</h1>
10    <div>
11        <h2 id="smallTitle">這是一個小標題</h2>
12        <p>這是一段文字。</p>
13        <button id="myButton">這是一個按鈕</button>
14    </div>
15    <script>
16        let smallTitleElement = document.getElementById("smallTitle");
17      smallTitleElement.style.color = "red";
18      smallTitleElement.innerText = "這是一個紅色小標題";
19    </script>
20</body>
21
22</html>

如何知道使用者有沒有點擊這個按鈕呢？第一步，仍然是讓程式碼找到這個按鈕的存在

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>我的網頁</title>
6</head>
7
8<body>
9    <h1>這是一個標題</h1>
10    <div>
11        <h2 id="smallTitle">這是一個小標題</h2>
12        <p>這是一段文字。</p>
13        <button id="myButton">這是一個按鈕</button>
14    </div>
15    <script>
16        let smallTitleElement = document.getElementById("smallTitle");
17      smallTitleElement.style.color = "red";
18      smallTitleElement.innerText = "這是一個紅色小標題";
19
20      let button = document.getElementById('myButton'); 
21    </script>
22</body>
23
24</html>

第二步，創建事件 addEventListener 我們可以設定按鈕，當什麼動作發生時，就執行什麼指令以旁邊的例子來說變是，當點擊動作發生時就執行將小標題元素顏色改成藍色，並改變文字 "click" 便是指點擊動作動作都是規範好的，每一個都是關鍵字不能自己蝦打，需要實際去搜尋看什麼動作對應什麼關鍵字

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>我的網頁</title>
6</head>
7
8<body>
9    <h1>這是一個標題</h1>
10    <div>
11        <h2 id="smallTitle">這是一個小標題</h2>
12        <p>這是一段文字。</p>
13        <button id="myButton">這是一個按鈕</button>
14    </div>
15    <script>
16        let smallTitleElement = document.getElementById("smallTitle");
17      smallTitleElement.style.color = "red";
18      smallTitleElement.innerText = "這是一個紅色小標題";
19
20      let button = document.getElementById("myButton");
21      button.addEventListener("click", () => {
22        smallTitleElement.style.color = "blue";
23        smallTitleElement.innerText = "這是一個藍色小標題";
24      });
25    </script>
26</body>
27
28</html>

最後來講一下讀取輸入框好了我們創建一個輸入框

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>我的網頁</title>
6</head>
7
8<body>
9    <h1>這是一個標題</h1>
10    <div>
11        <h2 id="smallTitle">這是一個小標題</h2>
12        <p>這是一段文字。</p>
13        <button id="myButton">這是一個按鈕</button>
14        <input id="myInput" type="text" placeholder="這是一個輸入框" />
15    </div>
16    <script>
17        let smallTitleElement = document.getElementById("smallTitle");
18      smallTitleElement.style.color = "red";
19      smallTitleElement.innerText = "這是一個紅色小標題";
20
21      let button = document.getElementById("myButton");
22      button.addEventListener("click", () => {
23        smallTitleElement.style.color = "blue";
24        smallTitleElement.innerText = "這是一個藍色小標題";
25      });
26    </script>
27</body>
28
29</html>

一樣先讓程式碼能抓取該輸入框元素

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>我的網頁</title>
6</head>
7
8<body>
9    <h1>這是一個標題</h1>
10    <div>
11        <h2 id="smallTitle">這是一個小標題</h2>
12        <p>這是一段文字。</p>
13        <button id="myButton">這是一個按鈕</button>
14        <input id="myInput" type="text" placeholder="這是一個輸入框" />
15    </div>
16    <script>
17        let smallTitleElement = document.getElementById("smallTitle");
18      smallTitleElement.style.color = "red";
19      smallTitleElement.innerText = "這是一個紅色小標題";
20
21      let myInputElement = document.getElementById("myInput");
22
23      let button = document.getElementById("myButton");
24      button.addEventListener("click", () => {
25        smallTitleElement.style.color = "blue";
26        smallTitleElement.innerText = "這是一個藍色小標題";
27      });
28    </script>
29</body>
30
31</html>

我們修改一下剛剛按鈕的點擊命令把它改成，如果被點擊時 1. 取得使用者的輸入數值 2. 把 smallTitleElement 顯示的文字變成該數值

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>我的網頁</title>
6</head>
7
8<body>
9    <h1>這是一個標題</h1>
10    <div>
11        <h2 id="smallTitle">這是一個小標題</h2>
12        <p>這是一段文字。</p>
13        <button id="myButton">這是一個按鈕</button>
14        <input id="myInput" type="text" placeholder="這是一個輸入框" />
15    </div>
16    <script>
17        let smallTitleElement = document.getElementById("smallTitle");
18      smallTitleElement.style.color = "red";
19      smallTitleElement.innerText = "這是一個紅色小標題";
20
21      let myInputElement = document.getElementById("myInput");
22
23      let button = document.getElementById("myButton");
24      button.addEventListener("click", () => {
25        let inputValue = myInputElement.value;
26        smallTitleElement.innerText = inputValue;
27      });
28    </script>
29</body>
30
31</html>

當然你也可以把輸入框給清空，或修改成你想要的數值

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>我的網頁</title>
6</head>
7
8<body>
9    <h1>這是一個標題</h1>
10    <div>
11        <h2 id="smallTitle">這是一個小標題</h2>
12        <p>這是一段文字。</p>
13        <button id="myButton">這是一個按鈕</button>
14        <input id="myInput" type="text" placeholder="這是一個輸入框" />
15    </div>
16    <script>
17        let smallTitleElement = document.getElementById("smallTitle");
18      smallTitleElement.style.color = "red";
19      smallTitleElement.innerText = "這是一個紅色小標題";
20
21      let myInputElement = document.getElementById("myInput");
22
23      let button = document.getElementById("myButton");
24      button.addEventListener("click", () => {
25        let inputValue = myInputElement.value;
26        smallTitleElement.innerText = inputValue;
27        myInputElement.value = "";
28      });
29    </script>
30</body>
31
32</html>

作業時間

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

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

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

作業時間答案

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>我的網頁</title>
6</head>
7
8<body>
9    <input id="scoreInput" type="text" placeholder="輸入成績" />
10    <button id="checkButton">檢查分數</button>
11    <div id="myScoreState"></div>
12
13    <script>
14        let scoreInput = document.getElementById("scoreInput");
15      let checkButton = document.getElementById("checkButton");
16      let myScoreState = document.getElementById("myScoreState");
17
18      checkButton.addEventListener("click", function () {
19        let score = parseInt(scoreInput.value);
20        if (score >= 60) {
21          myScoreState.textContent = "恭喜你及格了！";
22        } else {
23          myScoreState.textContent = "抱歉你不及格！";
24        }
25      });
26    </script>
27</body>
28
29</html>

Canvas

Canvas 是 Html 的元素 <canvas>

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

先替 Html 加上 canvas 你可以指定他的寬度跟高度

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>Canvas 動畫</title>
6</head>
7
8<body>
9    <canvas id="myCanvas" width="400" height="400"></canvas>
10</body>
11
12</html>

先透過 getElementById 取得該元素

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Canvas 動畫</title>
5  </head>
6  <body>
7    <canvas id="myCanvas" width="400" height="400"></canvas>
8    <script>
9      const canvas = document.getElementById("myCanvas");
10    </script>
11  </body>
12</html>
13

再來第二步，canvas 提供了一種名為 getContext('2d') 的方法，可以讓我們取得他的畫筆如果要繪製這個畫布都必須透過這個畫筆

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>Canvas 動畫</title>
6</head>
7
8<body>
9    <canvas id="myCanvas" width="400" height="400"></canvas>
10    <script>
11        const canvas = document.getElementById("myCanvas");
12      const ctx = canvas.getContext("2d");
13    </script>
14</body>
15
16</html>

畫筆的操作就如同小畫家一樣只是把所有的動作用一行一行的程式碼表示出來首先先將畫筆的顏色變成藍色

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>Canvas 動畫</title>
6</head>
7
8<body>
9    <canvas id="myCanvas" width="400" height="400"></canvas>
10    <script>
11        const canvas = document.getElementById("myCanvas");
12      const ctx = canvas.getContext("2d");
13
14      ctx.fillStyle = "blue";
15    </script>
16</body>
17
18</html>

再來，繪製一個正方形他的格式長這樣 ctx.fillRect(x, y, width, height) 也就是從 (x,y) 這個座標點繪製一個寬 width 高 height 的正方形

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>Canvas 動畫</title>
6</head>
7
8<body>
9    <canvas id="myCanvas" width="400" height="400"></canvas>
10    <script>
11        const canvas = document.getElementById("myCanvas");
12      const ctx = canvas.getContext("2d");
13
14      ctx.fillStyle = "blue";
15      ctx.fillRect(50, 50, 150, 150);
16    </script>
17</body>
18
19</html>

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

作業時間

Canvas

喜歡這篇文章嗎？
歡迎給我一點支持！

贊助我一杯咖啡

追蹤我的 Threads

訂閱電子報

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

作業時間

Canvas

喜歡這篇文章嗎？歡迎給我一點支持！

贊助我一杯咖啡

追蹤我的 Threads

訂閱電子報

喜歡這篇文章嗎？
歡迎給我一點支持！