JavaScript 出力

JavaScript 表示の可能性

JavaScript は、データを様々な方法で「表示」できます：

window.alert() を使用してアラートボックスに書き込む。
document.write() を使用して HTML 出力に書き込む。
innerHTML を使用して HTML 要素に書き込む。
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>

Try it Yourself »

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>

Try it Yourself »

HTML 文書が完全に読み込まれた後に document.write() を使用すると、既存の 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>

Try it Yourself »

document.write() メソッドは、テストにのみ使用する必要があります。

innerHTML を使用する

id innerHTMLプロパティはHTMLコンテンツを定義します：

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>

Try it Yourself »

HTML で「データを表示」するには、（ほとんどの場合）innerHTML プロパティに値を設定します。

console.log() を使用する

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

例

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Try it Yourself »

❮ 前章へ次章へ ❯