最新的Web開發教程
 

JavaScript輸出


JavaScript沒有任何內置的打印或顯示功能。


JavaScript的顯示可能性

JavaScript可以“顯示”的數據以不同的方式:

  • 寫入一個警告框,使用window.alert()
  • 使用寫入HTML輸出document.write()
  • 寫入到一個HTML元素,使用innerHTML
  • 寫入瀏覽器控制台,使用console.log()

使用window.alert()

您可以使用一個提示框來顯示數據:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

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

</body>
</html>
試一試»

使用document.write()

為測試目的,方便的是使用document.write()

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>
試一試»

使用document.write() HTML文檔滿載後,將刪除所有現有的HTML:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<button onclick="document.write(5 + 6)">Try it</button>

</body>
</html>
試一試»

document.write()方法僅用於測試。


使用innerHTML

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

id屬性定義的HTML元素。 該innerHTML屬性定義HTML內容:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>
試一試»

為了“顯示數據”在HTML中,(在大多數情況下),你會設置一個值innerHTML屬性。


使用console.log()

在瀏覽器中,您可以使用console.log()方法來顯示數據。

激活與F12瀏覽器控制台,並在菜單中選擇“控制台”。

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>
試一試»