JavaScript 輸出

2022-05-18 13:58 更新

JavaScript 可以通過(guò)不同的方式來(lái)輸出數(shù)據(jù)：

  • 使用 window.alert() 彈出警告框。
  • 使用 document.write() 方法將內(nèi)容寫(xiě)到 HTML 文檔中。
  • 使用 innerHTML 寫(xiě)入到 HTML 元素。
  • 使用 console.log() 寫(xiě)入到瀏覽器的控制臺(tái)。

 嚴(yán)格來(lái)說(shuō)，JavaScript 沒(méi)有任何打印或者輸出的函數(shù)，以上幾種方式都只不過(guò)是一種數(shù)據(jù)展示的方法，最接近輸出的方法應(yīng)該是console，但這種方法只是一種調(diào)試輔助工具。

使用 window.alert()

你可以彈出警告框來(lái)顯示數(shù)據(jù)：

實(shí)例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一個(gè)頁(yè)面</h1>
<p>我的第一個(gè)段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

嘗試一下 ?

操作 HTML 元素

如需從 JavaScript 訪問(wèn)某個(gè) HTML 元素，您可以使用 document.getElementById(id) 方法。

請(qǐng)使用 "id" 屬性來(lái)標(biāo)識(shí) HTML 元素，并 innerHTML 來(lái)獲取或插入元素內(nèi)容：

實(shí)例

<!DOCTYPE html>

<html>

<body>

<h1>我的第一個(gè) Web 頁(yè)面</h1>

<p id="demo">我的第一個(gè)段落</p>

<script>

document.getElementById("demo").innerHTML = "段落已修改。";

</script>

</body>

</html>


嘗試一下 ?

以上 JavaScript 語(yǔ)句（在 <script> 標(biāo)簽中）可以在 web 瀏覽器中執(zhí)行：

document.getElementById("demo") 是使用 id 屬性來(lái)查找 HTML 元素的 JavaScript 代碼 。該方法是 HTML DOM 中定義的。

innerHTML = "Paragraph changed." 是用于修改元素的 HTML 內(nèi)容(innerHTML)的 JavaScript 代碼。

在本教程中

在大多數(shù)情況下，在本教程中，我們將使用上面描述的方法來(lái)輸出：

下面的例子直接把 id="demo" 的 <p> 元素寫(xiě)到 HTML 文檔輸出中：

寫(xiě)到 HTML 文檔

使用 document.write() 方法將內(nèi)容寫(xiě)到 HTML 文檔中。此功能可用于寫(xiě)入文本和HTML。

出于測(cè)試目的，您可以將JavaScript直接寫(xiě)在HTML 文檔中：

實(shí)例

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>W3Cschool教程(w3cschool.cn)</title> 

</head>

<body>

<h1>我的第一個(gè) Web 頁(yè)面</h1>

<p>我的第一個(gè)段落。</p>

<script>

document.write(Date());

</script>

</body>

</html>


嘗試一下 ?
Note

請(qǐng)使用 document.write() 僅僅向文檔輸出寫(xiě)內(nèi)容。

如果在文檔已完成加載后執(zhí)行 document.write，整個(gè) HTML 頁(yè)面將被覆蓋。

實(shí)例

<!DOCTYPE html>

<html>

<body>

<h1>我的第一個(gè) Web 頁(yè)面</h1>

<p>我的第一個(gè)段落。</p>

<button onclick="myFunction()">點(diǎn)我</button >

<script>

function myFunction() {

    document.write(Date());

}

</script>

</body>

</html>


嘗試一下 ?

寫(xiě)到控制臺(tái)

如果您的瀏覽器支持調(diào)試，你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。

瀏覽器中使用 F12 來(lái)啟用調(diào)試模式， 在調(diào)試窗口中點(diǎn)擊 "Console" 菜單。

實(shí)例

<!DOCTYPE html>

<html>

<body>

<h1>我的第一個(gè) Web 頁(yè)面</h1>

<script>

a = 5;

b = 6;

c = a + b;

console.log(c);

</script>

</body>

</html>


嘗試一下 ?
提示：console.log() 方法能夠讓你看到你在頁(yè)面中的輸出內(nèi)容，讓你更容易調(diào)試javascript；與alert相比，console不會(huì)打斷你頁(yè)面的操作，console里面的內(nèi)容非常豐富，你可以在控制臺(tái)輸入 console。

您知道嗎?

Note 程序中調(diào)試是測(cè)試，查找及減少bug(錯(cuò)誤)的過(guò)程。


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)