你的第一行 JavaScript

一行程式碼就能改變網頁。

JavaScript 寫在一個 .js 檔案裡。

然後用一行 HTML 把它「接上」網頁：

<script src="main.js"></script>

就像插電一樣。插上去，網頁就有電了（JavaScript 就開始運作了）。

一行 JavaScript 能做什麼？

下面是一個網頁的 HTML、一段 JavaScript、和瀏覽器預覽。按下「執行 JavaScript」，看看會發生什麼。

index.html
<!DOCTYPE html> <html> <head> <title>My Site</title> </head> <body> <h1>My Website</h1> <script src="main.js"></script> </body> </html>
main.js
document .querySelector("h1") .textContent = "哈囉！";

My Website

這就是 JavaScript 做的事：找到 HTML 裡的某個元素，然後改掉它的內容。

來拆解這行程式碼：

document 代表整個網頁。JavaScript 透過它來存取 HTML 裡的所有東西。

.querySelector("h1") 是「搜尋」的動作——在整份 HTML 裡找到第一個 <h1> 標籤。就像你在 Word 裡按 Ctrl+F 搜尋一樣，只不過搜尋的對象是 HTML 標籤。

.textContent 是那個元素的「文字內容」。找到 <h1> 之後，用 .textContent 就能讀取或修改它裡面的文字。

= "哈囉！" 把原本的文字換成新的值。等號在程式裡不是「等於」，而是「設定成」。

左邊的 HTML 是骨架，JavaScript 在背後偷偷把骨架的內容換掉了，瀏覽器就顯示新的結果。

用 JavaScript 改網頁文字

在輸入框打字，然後按「執行」。JavaScript 會把你輸入的文字寫進 HTML 的 <h1> 裡。

index.html
<body> <h1>Hello World</h1> <input id="msg" /> </body>
main.js
const input = document.querySelector("#msg") document .querySelector("h1") .textContent = input.value;

Hello World

document.querySelector()在網頁上找東西（像用 Ctrl+F 搜尋）
.textContent那個東西的文字
input.value輸入框裡的文字（input 是用 querySelector 找到的 <input> 元素）
=改成

這就是 JavaScript 最基本的能力：找到東西，然後改它。

下一課