【小ネタ】JS 結果の出力方法

はじめに

JavaScript で結果の出力方法を整理しました。
なんてことはない小ネタです。

更新履歴

2017-12-22 document.getElementById('id名').innerHTML について追加 2018-01-17 document.write() と どういうときに使っているか の部分を修正

結果を出力する方法

console.log()

DevTool の Console で表示される

document.getElementById('id名').innerHTML

html 上に用意してある id 属性付きの要素に表示する。ただし for で書き込みだと上書きされる。

document.write()

ブラウザのページ上に表示される。学習時に練習に使うと便利。

例

codepen.io

console.log の出力は「edit on codepen」のリンクに飛んで、console ボタンを押すと表示されます。

どういうときに使っているか

• console.log：ページ上で表示させたいものがあるけど意図しない表示になるとき
• document.getElementById('id名').innerHTML：HTML 要素を動的に読み書きする
• document.write：JS 勉強中の表示出力でブラウザ上にすぐ表示させたい

オブジェクト

console も document も「オブジェクト」という仲間。

console オブジェクト

• console - Web API インターフェイス | MDN
• 「コンソール周りの機能」
• console.log は「デバッガの Web コンソールにメッセージを出力する」メソッドという意味

document オブジェクト

• document - Web API インターフェイス | MDN
• 「ドキュメント全体に関わる機能」
• document.write は「ドキュメントにテキストを書き込む」メソッド

おわりに

この本に書かれたコードの写経をしています。

徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく (Informatics&IDEA)