3
章節3
使用 JavaScript 更新 UI
在本章節中，我們將開始建構我們的專案，使用 JavaScript 和 DOM 方法來將 h1 標籤添加到您的專案中。
開啟您的程式碼編輯器並建立一個新的 index.html 檔案。在 HTML 檔案中，新增以下程式碼
<html>
<body>
<div></div>
</body>
</html>然後給 div 一個唯一的 id，以便您之後可以選取它。
<html>
<body>
<div id="app"></div>
</body>
</html>要在 HTML 檔案中編寫 JavaScript，請新增一個 script 標籤
<html>
<body>
<div id="app"></div>
<script type="text/javascript"></script>
</body>
</html>現在，在 script 標籤內，您可以使用 DOM 方法 getElementById()，透過其 id 選取 <div> 元素
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = document.getElementById('app');
</script>
</body>
</html>您可以繼續使用 DOM 方法來建立一個新的 <h1> 元素
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
// Select the div element with 'app' id
const app = document.getElementById('app');
// Create a new H1 element
const header = document.createElement('h1');
// Create a new text node for the H1 element
const text = 'Develop. Preview. Ship.';
const headerContent = document.createTextNode(text);
// Append the text to the H1 element
header.appendChild(headerContent);
// Place the H1 element inside the div
app.appendChild(header);
</script>
</body>
</html>為了確保一切正常運作，請在您選擇的瀏覽器中開啟您的 HTML 檔案。您應該會看到一個顯示「Develop. Preview. Ship.」的 h1 標籤。
HTML 與 DOM 的比較
如果您查看瀏覽器開發者工具中的 DOM 元素，您會注意到 DOM 包含了 <h1> 元素。頁面的 DOM 與原始程式碼（換句話說，就是您建立的原始 HTML 檔案）不同。
這是因為 HTML 代表的是**初始頁面內容**，而 DOM 代表的是經您編寫的 JavaScript 程式碼更改後的**更新頁面內容**。
使用純 JavaScript 更新 DOM 非常強大，但也很繁瑣。您編寫了所有這些程式碼來添加一個包含一些文字的 <h1> 元素。
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const text = 'Develop. Preview. Ship.';
const headerContent = document.createTextNode(text);
header.appendChild(headerContent);
app.appendChild(header);
</script>隨著應用程式或團隊規模的增長，以這種方式構建應用程式會變得越來越具有挑戰性。
使用這種方法，開發人員需要花費大量時間編寫指令來告訴電腦**如何**執行操作。但如果能描述您想要**顯示什麼**，然後讓電腦自行判斷**如何**更新 DOM，這樣不是更好嗎？
指令式程式設計 vs. 宣告式程式設計
上面的程式碼是**指令式程式設計**的一個很好的例子。您正在編寫使用者介面**如何**更新的步驟。但是，在構建使用者介面時，通常更傾向於使用宣告式方法，因為它可以加快開發過程。開發人員不必編寫 DOM 方法，而是能夠宣告他們想要**顯示什麼**（在這種情況下，是一個帶有一些文字的 h1 標籤），這會很有幫助。
換句話說，**指令式程式設計**就像一步一步地指示廚師如何製作披薩。**宣告式程式設計**就像點披薩而不關心製作披薩的步驟。🍕
React 是一個流行的宣告式程式庫，您可以使用它來構建使用者介面。
React：一個宣告式 UI 程式庫
作為開發人員，您可以告訴 React 您希望使用者介面發生什麼變化，React 會替您找出**如何**更新 DOM 的步驟。
在下一節中，我們將探討如何開始使用 React。
額外資源
這有幫助嗎？