JavaScript出力
JavaScript表示の可能性
JavaScriptは、さまざまな方法でデータを「表示」できます。
- を使用してHTML要素に書き込む
innerHTML
。 - を使用してHTML出力に書き込みます
document.write()
。 - を使用してアラートボックスに書き込む
window.alert()
。 - を使用して、ブラウザコンソールに書き込み
console.log()
ます。
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プロパティを変更することは、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>
HTMLドキュメントがロードされた後にdocument.write()を使用すると、既存のすべてのHTMLが削除されます。
例
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
document.write()メソッドは、テストにのみ使用する必要があります。
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>
window
キーワードをスキップできます。
JavaScriptでは、ウィンドウオブジェクトはグローバルスコープオブジェクトです。つまり、変数、プロパティ、およびメソッドはデフォルトでウィンドウオブジェクトに属します。window
これは、キーワードの指定がオプションであることも意味します。
例
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
console.log()の使用
デバッグの目的でconsole.log()
、ブラウザでメソッドを呼び出してデータを表示できます。
デバッグについては、後の章で詳しく説明します。
例
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript印刷
JavaScriptにはprintオブジェクトやprintメソッドはありません。
JavaScriptから出力デバイスにアクセスすることはできません。
唯一の例外はwindow.print()
、ブラウザでメソッドを呼び出して、現在のウィンドウのコンテンツを印刷できることです。
例
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>