JavaScript 輸出

2022-05-18 13:58 更新

JavaScript 可以通過不同的方式來輸出數(shù)據(jù):

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

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


使用 window.alert()

你可以彈出警告框來顯示數(shù)據(jù):

實(shí)例

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

嘗試一下 ?

操作 HTML 元素

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

請使用 "id" 屬性來標(biāo)識 HTML 元素,并 innerHTML 來獲取或插入元素內(nèi)容:

實(shí)例

<!DOCTYPE html>

<html>

<body>

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

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

<script>

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

</script>

</body>

</html>


嘗試一下 ?

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

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

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


在本教程中

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

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


寫到 HTML 文檔

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

出于測試目的,您可以將JavaScript直接寫在HTML 文檔中:

實(shí)例

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

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

</head>

<body>

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

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

<script>

document.write(Date());

</script>

</body>

</html>


嘗試一下 ?
Note

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

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

實(shí)例

<!DOCTYPE html>

<html>

<body>

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

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

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

<script>

function myFunction() {

    document.write(Date());

}

</script>

</body>

</html>


嘗試一下 ?


寫到控制臺

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

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

實(shí)例

<!DOCTYPE html>

<html>

<body>

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

<script>

a = 5;

b = 6;

c = a + b;

console.log(c);

</script>

</body>

</html>


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

您知道嗎?

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


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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號