一篇文章帶你了解JavaScript輸出

作者：前端進階者 2021-02-02 18:39:05

開發前端

在某些情況下，您可能需要從JavaScript代碼生成輸出。例如，您可能想查看變量的值，或向瀏覽器控制臺寫一條消息，以幫助您調試正在運行的JavaScript代碼中的問題，等等。

[[380089]]

一、JavaScript顯示能力

JavaScript可以使用不同的方法“顯示”數據。

寫入警報框, 使用 window.alert()。寫入HTML輸出使用 document.write()。寫在HTML元素, 使用 innerHTML。寫入瀏覽器控制臺, 使用 console.log()。

二、分析方法

1. 使用 window.alert()

可以使用警報框來顯示數據。

例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>項目</title> 
</head> 
<body style="background-color: aqua;"> 
 
  <h1>我的第一個Web頁面</h1> 
  <p>我的第一個段落.</p> 
 
  <script> 
    window.alert(5 + 6); 
</script> 
 
</body> 
</html>

顯示結果：

2. 使用 document.write()

出于測試目的，使用document.write()更方便。

例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>項目</title> 
</head> 
<body style="background-color: aqua;"> 
 
  <h1>我的第一個Web頁面</h1> 
  <p>我的第一個段落.</p> 
 
  <script> 
    document.write(5 + 6); 
</script> 
 
</body> 
</html>

使用document.write()后， HTML文檔完全加載，將刪除所有現有的HTML。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>項目</title> 
</head> 
<body style="background-color: aqua;"> 
 
  <h1>我的第一個Web頁面</h1> 
  <p>我的第一個段落</p> 
 
  <button type="button" onclick="document.write(5 + 6)">試試</button> 
 
</body> 
</html>

圖片注：

document.write()方法只用于測試。

3. 使用 innerHTML

訪問一個HTML元素, JavaScript可以使用 document.getElementById(id) 方法。

id屬性定義HTML元素. innerHTML 屬性定義HTML內容。

例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>項目</title> 
</head> 
<body style="background-color: aqua;"> 
 
  <p>我的第二個段落.</p> 
 
  <p id="demo">結果：：</p> 
 
  <script> 
  document.getElementById("demo").innerHTML = 50 + 6; 
</script> 
 
</body> 
</html>

為了在HTML中"顯示數據", (多數情況下) 你可以設置 innerHTML 屬性。

4. 使用 console.log()

在你的瀏覽器，你可以使用console.log()方法顯示數據。

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=640, user-scalable=no"> 
        <title>項目</title> 
 
    </head> 
<body style="background-color: aqua;"> 
 
  <p>我的第一個段落.</p> 
 
  <p> 
  在你的瀏覽器中打開調試窗口，使用F12，然后選擇"Console"菜單項 
  </p> 
  <p>再點擊運行(run).</p> 
 
  <script> 
    console.log(5 + 6); 
</script> 
 
</body> 
</html>

要訪問Web瀏覽器的控制臺，請先按F12鍵盤上的鍵以打開開發人員工具，然后單擊控制臺選項卡。

三、總結

本文基于JavaScript，介紹了常見4種的輸出， “顯示的方法” 。對每一種在實際應用的時候，需要注意什么，應該怎么去運用，做了詳細的講解。用豐富的效果圖能夠讓讀者更好的理解。更直觀，更明朗。

希望大家可以根據文章的內容，積極嘗試，有時候看到別人實現起來很簡單。但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

代碼很簡單，希望能夠幫助你。

本文轉載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關注。轉載本文請聯系前端進階學習交流公眾號。

責任編輯：武曉燕來源：前端進階學習交流

JavaScript