JavaScript には、組み込みの印刷機能や表示機能はありません。

JavaScript 表示スキーム

JavaScript はさまざまな方法でデータを「表示」できます。

  • window.alert() を使用してアラート ボックスを作成します
  • document.write() を使用して HTML 出力を書き込みます
  • innerHTML を使用して HTML 要素を記述する
  • console.log() を使用してブラウザ コンソールに書き込みます

innerHTML を使用する

HTML 要素にアクセスするために、JavaScript は document.getElementById(id) メソッドを使用できます。

id 属性は HTML 要素を定義します。 innerHTML 属性は HTML コンテンツを定義します。

<!DOCTYPE html>
<html>
<body>

<h1>私の最初のウェブページ</h1>

<p>私の最初の段落</p>

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

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

</body>
</html> 

自分で試してみてください

ヒント: HTML 要素の innerHTML 属性を変更することは、HTML でデータを表示する一般的な方法です。

document.write() の使用

テスト目的の場合は、document.write() を使用すると便利です。

<!DOCTYPE html>
<html>
<body>

<h1>私の最初のウェブページ</h1>

<p>私の最初の段落</p>

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

</body>
</html> 

自分で試してみてください

注:HTML ドキュメントが完全に読み込まれた後で document.write() を使用すると、既存の HTML がすべて削除されます

<!DOCTYPE html>
<html>
<body>

<h1>私の最初のウェブページ</h1>

<p>私の最初の段落</p>

<button onclick="document.write(5 + 6)">试一试</button>

</body>
</html>

自分で試してみてください

ヒント:document.write() メソッドはテスト専用です。

window.alert() の使用

アラート ボックスを使用してデータを表示できます。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>私の最初の段落</p>

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

</body>
</html> 

自分で試してみてください

console.log() の使用

ブラウザでは、console.log() メソッドを使用してデータを表示できます。

F12 を使用してブラウザ コンソールをアクティブ化し、メニューから [コンソール] を選択してください。

<!DOCTYPE html>
<html>
<body>

<h1>私の最初のウェブページ</h1>

<p>私の最初の段落</p>

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

</body>
</html>

自分で試してみてください