アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

【素朴な疑問解決】JavaScriptのconsole.logとdocument.writeの違いについて。

JavaScriptの文字を表示させる呪文。

console.log とdocument.writeってどうちがうの?同じことでしょう?どっちでもいいんじゃないの?

 

私が以前紹介したJavaScriptの教科書「非エンジニアのためのプログラミング入門」

こちらは

document.writeで

webの練習問題なんかだとconsole.logなんですがこれは一体どういうことなのかなという、素朴な疑問が初心者ながら湧きまして。。調べてみました。

・console.log()

変数の中身を出したり、プログラムのデバッグに便利。

引数をコンソール上に示す。

・document.write()

ブラウザ上に引数を示す

IE11だと正常に動作しない可能性がある(らしい)

 

2文を並べて記述しました。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-20-14-04-47

スクリプトタグの中に

console.log("hello console");

document.write("hello document");

を記述してブラウザ(クローム)で表示してみると。。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-20-17-25-24

ブラウザには document.writeの中身が。

consoleログにはconsole.logの中身が表示されました。

document.writeがデバッグできないというのはコンソールログに表示されないということなんですね。エレメントには出るんですが。

 

そういう意味では開発するのならconsole.log()を使うべきなんでしょう。そういえばdocument.write()て書いてたのは「非エンジニア」向けでしたね。本。

一応、今日は素朴な疑問をググってみました。また新たな情報が発見できたら追記していきます!