JavaScript 基礎教學 - 四種輸出方法
練習目標
在本次練習中，你將學習 JavaScript 的四種主要輸出方法，並創建一個展示這些方法的網頁。
目標成果示意圖
JavaScript 四種輸出方法示範
1. 寫入 HTML 元素
[空白段落]
2. 直接寫入網頁 (document.write)
[空白段落]
3. 警報框 alert()
[空白段落]
4. 控制台 console.log()
[空白段落]
JavaScript 輸出方法概念解析
什麼是 JavaScript 輸出？
JavaScript 可以通過以下方式顯示數據：
- 寫入 HTML 元素
- 寫入整個頁面
- 顯示警告框
- 寫入瀏覽器控制台
四種 JavaScript 輸出方法
1. innerHTML
修改 HTML 元素內容。
document.getElementById("elementId").innerHTML = "新的內容";
2. document.write()
直接寫入 HTML 輸出流。
document.write("直接寫入網頁的內容");
3. alert()
彈出警告框。
alert("這是一個警告訊息！");
4. console.log()
輸出到瀏覽器控制台。
console.log("這會顯示在瀏覽器控制台");
逐步練習指導
步驟 1：建立基本 HTML
<!DOCTYPE html>
<html lang="zh-HK">
<head>
<meta charset="UTF-8">
<title>JavaScript Output Buttons</title>
</head>
<body>
<!-- 頁面內容將在這裡加入 -->
<script>
<!-- JavaScript 程式碼將放這裡 -->
</script>
</body>
</html>
步驟 2：加入標題
<body>
<h2>JavaScript 四種輸出方法示範</h2>
<!-- 示範內容將加入於此 -->
</body>
步驟 3：第一種輸出方法
<!-- 1. 寫入 HTML 元素 -->
<h3>1. 寫入 HTML 元素</h3>
<p id="demo1"></p>
<button onclick="writeToElement()">寫入 HTML 元素</button>
步驟 4：第二種輸出方法
<!-- 2. 直接寫入網頁 -->
<h3>2. 直接寫入網頁 (document.write)</h3>
<p id="demo2"></p>
<button onclick="writeToPage()">document.write()</button>
步驟 5：第三種輸出方法
<!-- 3. 警報框 -->
<h3>3. 警報框 alert()</h3>
<p id="demo3"></p>
<button onclick="showAlert()">alert()</button>
步驟 6：第四種輸出方法
<!-- 4. 控制台 console.log -->
<h3>4. 控制台 console.log()</h3>
<p id="demo4"></p>
<button onclick="writeToConsole()">console.log()</button>
步驟 7：加入 JavaScript
<script>
// 1. 寫入 HTML 元素
function writeToElement() {
document.getElementById("demo1").innerHTML =
"這是寫入到 HTML 元素的內容。";
}
</script>
<script>
// 2. 直接寫入網頁
function writeToPage() {
document.write("<h2>你剛執行了 document.write()！</h2>");
document.write("⚠ 注意：document.write() 會覆蓋整個頁面內容。");
}
</script>
<script>
// 3. 警報框 alert()
function showAlert() {
alert("這是 alert() 彈出的訊息！");
document.getElementById("demo3").innerHTML =
"alert() 已經顯示。";
}
</script>
<script>
// 4. 控制台 console.log()
function writeToConsole() {
console.log("這是在 console.log() 顯示的訊息！");
document.getElementById("demo4").innerHTML =
"請打開開發者工具查看 console.log 的輸出。";
}
</script>
完整代碼預覽
<!DOCTYPE html>
<html lang="zh-HK">
<head>
<meta charset="UTF-8">
<title>JavaScript Output Buttons</title>
</head>
<body>
<h2>JavaScript 四種輸出方法示範</h2>
<!-- 1. 寫入 HTML 元素 -->
<h3>1. 寫入 HTML 元素</h3>
<p id="demo1"></p>
<button onclick="writeToElement()">寫入 HTML 元素</button>
<!-- 2. 直接寫入網頁 -->
<h3>2. 直接寫入網頁 (document.write)</h3>
<p id="demo2"></p>
<button onclick="writeToPage()">document.write()</button>
<!-- 3. 警報框 -->
<h3>3. 警報框 alert()</h3>
<p id="demo3"></p>
<button onclick="showAlert()">alert()</button>
<!-- 4. 控制台 console.log -->
<h3>4. 控制台 console.log()</h3>
<p id="demo4"></p>
<button onclick="writeToConsole()">console.log()</button>
<script>
// 1. 寫入 HTML 元素
function writeToElement() {
document.getElementById("demo1").innerHTML =
"這是寫入到 HTML 元素的內容。";
}
// 2. 直接寫入網頁
function writeToPage() {
document.write("<h2>你剛執行了 document.write()！</h2>");
document.write("⚠ 注意：document.write() 會覆蓋整個頁面內容。");
}
// 3. 警報框 alert()
function showAlert() {
alert("這是 alert() 彈出的訊息！");
document.getElementById("demo3").innerHTML =
"alert() 已經顯示。";
}
// 4. 控制台 console.log()
function writeToConsole() {
console.log("這是在 console.log() 顯示的訊息！");
document.getElementById("demo4").innerHTML =
"請打開開發者工具查看 console.log 的輸出。";
}
</script>
</body>
</html>
測試與驗證
完成編碼後，請在瀏覽器中打開文件並測試每個按鈕的功能：
- innerHTML 按鈕：點擊後應在對應段落顯示文字
- document.write() 按鈕：點擊後會覆蓋整個頁面
- alert() 按鈕：點擊後會彈出警告框
- console.log() 按鈕：點擊後需打開開發者工具查看控制台輸出
打開開發者工具的方法：按下 F12 鍵或右鍵點擊頁面選擇「檢查」
練習任務
現在請按照上述步驟，在你的練習文件中實現完整的頁面。
你可以參考已完成的版本：Exercise JS 1-1 Output Methods
也可以打開完成練習總覽：完成練習總覽
完成後，請嘗試修改輸出的文字內容，體驗 JavaScript 的動態特性。