【小ネタ】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()
ブラウザのページ上に表示される。学習時に練習に使うと便利。
例
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)
- 作者: 磯博
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2017/03/18
- メディア: 単行本
- この商品を含むブログを見る