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