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("這會顯示在瀏覽器控制台");

學生參考重點

JavaScript 在網站中的角色

HTML 負責內容和結構，CSS 負責樣式和版面，JavaScript 則負責行為和互動。

你現在學的內容，正是把原本靜態的網頁「變得會回應使用者」的第一步。

靜態與動態網站

靜態網站的內容通常固定，所有人看到的頁面差不多；動態網站則可以按使用者、時間或資料變化而更新內容。

JavaScript 讓前端頁面加入互動效果，例如按鈕回應、內容更新、表單驗證和資料顯示。

script 應放在哪裡？

在初學階段，你可以把 JavaScript 直接寫在 HTML 內的 <script> 標籤中。

較常見的做法，是把 <script> 放在 <body> 接近結尾的位置，讓頁面內容先載入，再執行程式。

內部與外部 JavaScript

學習和簡單練習時，直接把 JavaScript 寫在 HTML 檔內會較方便。

當程式碼變多時，改用外部 .js 檔會更易讀、更易改，也較接近真實開發做法。

四種輸出方法比較

方法	用途	學生要記住的重點
`innerHTML`	修改頁面上現有元素的內容	最常用，適合把結果顯示在頁面指定位置。
`document.write()`	直接把內容寫到頁面	多用於示範或測試；頁面載入後再用，可能會覆蓋整頁內容。
`alert()`	彈出警告框	適合簡單提示，但會中斷使用者操作，所以不應濫用。
`console.log()`	把資料輸出到瀏覽器控制台	主要用於除錯，使用者不會直接在頁面上看到。

常見錯誤與考試提示

getElementById 要注意大小寫，唔好寫錯成 getElementByID。
console.log() 才是正確寫法，不是 console.alert()。
字串要用成對引號包住，例如 "Hello" 或 'Hello'。
如果題目要求「顯示在頁面上」，通常較適合用 innerHTML；如果要求「顯示在控制台」，就應用 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 的動態特性。