JavaScript輸出

2025 iThome 鐵人賽

DAY 3

Modern Web

30天絕望倒數JavaScript系列第 3 篇

17th鐵人賽

ysljs

團隊nutc imac

2025-09-17 12:08:12

17 瀏覽

分享至

JavaScript 可以用不同的方式來顯示資料

使用 innerHTML 或 innerText 屬性可將內容寫入 HTML 元素
使用 document.write() 方法可將 HTML 內容直接寫入網頁文件中
使用 window.alert() 方法可在瀏覽器中顯示一個警告對話框，並輸出指定訊息
使用 console.log() 方法將訊息輸出至瀏覽器的控制台

範例

使用 innerHTM

若要存取 HTML 元素，可以使用 document.getElementById(id) 方法，透過元素的 id 屬性來進行識別。
取得元素後，可使用其 innerHTML 屬性來讀取或修改該元素的 HTML 內容
例如span，b等標籤

<!DOCTYPE html>
<html>
<head>
  <title>修改 HTML 內容</title>
</head>
<body>
  <div id="info">原始內容</div>
  <button onclick="updateContent()">更新內容</button>

  <script>
    function updateContent() {
      // 取得 id 為 info 的元素
      var element = document.getElementById("info");
      // 修改該元素的 HTML 內容
      element.innerHTML = "<strong>內容已更新！</strong>";
    }
  </script>
</body>
</html>

錄製內容 2025-08-29 144950 (1)

使用 innerText

也是用document.getElementById(id) 方法，透過元素的 id 屬性來進行識別。
取得元素後，可使用其 innerText 屬性來讀取或修改該元素的純文字內容

<!DOCTYPE html>
<html>
<head>
  <title>修改文字內容</title>
</head>
<body>
  <p id="greeting">早安！</p>
  <button onclick="changeText()">改成晚安</button>

  <script>
    function changeText() {
      // 取得 id 為 greeting 的元素
      var element = document.getElementById("greeting");
      // 修改該元素的純文字內容
      element.innerText = "晚安！";
    }
  </script>
</body>
</html>

錄製內容 2025-08-29 144950
使用 document.write()

在測試階段，document.write() 是一個簡單且方便的方式，可快速將內容輸出至網頁

// 在測試階段使用 document.write()，可快速輸出內容到網頁
document.write("<h1>測試成功！</h1>");

image

<!DOCTYPE html>
<html>
<body>

<h2>Hello</h2>
<p>Hello</p>

<button type="button" onclick="document.write('測試成功')">清除整個 DOM 並重新寫入內容</button>

</body>
</html>

Adobe Express - 錄製內容 2025-08-29 144950 (1)
使用 window.alert()

使用 window.alert() 方法可以在瀏覽器中顯示一個警告對話框，用來提示使用者特定訊息

<!DOCTYPE html>
<html>
<body>

<button onclick="showAlert()">點我顯示警告</button>

<script>
  function showAlert() {
    window.alert("這是一個警告訊息！");
  }
</script>

</body>
</html>

錄製內容 2025-08-29 144950 (2)
使用 console.log()

為了除錯或觀察程式執行狀況，可以在瀏覽器中使用 console.log() 方法，將資料輸出到開發者工具的主控台

<!DOCTYPE html>
<html>
<head>
  <title>Console.log 範例</title>
</head>
<body>
  <script>
    let name = "小明";
    let age = 25;
    console.log("使用者名稱：", name);
    console.log(`年齡是：${age}`);
  </script>
</body>
</html>

image
JavaScript 列印

JavaScript 本身不具備列印物件或列印方法，也無法直接存取輸出裝置。
不過，唯一的例外是可以透過 window.print() 方法，在瀏覽器中呼叫列印功能，將目前視窗的內容送出列印。

<!DOCTYPE html>
<html>
<body>

<h2>window.print()方法</h2>

<p>列應這個網頁</p>

<button onclick="window.print()">列應</button>

</body>
</html>

錄製內容 2025-08-29 144950 (3)

JavaScript 該放在哪裡

JavaScript語法

系列文

30天絕望倒數JavaScript 共 4 篇

RSS系列文訂閱系列文

0 人訂閱

完整目錄

熱門推薦

{{ item.channelVendor }} | {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

902 組

團體組數

37 組

累計文章數

7703 篇

完賽人數

90 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 17th鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react

IT邦幫忙

30天絕望倒數JavaScript系列 第 3 篇

JavaScript輸出

JavaScript 可以用不同的方式來顯示資料

範例

尚未有邦友留言

標記使用者

30天絕望倒數JavaScript系列第 3 篇