今回はコンソールログ関数を使用します。
下記の内容をhtmlファイルに記述してみてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScript練習</title> </head> <body> <script> //ここにJavaScript </script> </body> </html>
コンソールログ関数はブラウザのコンソールにメッセージを出力できる関数です。
コンソールログ関数もアラート関数と同じでデバッグをする際に使用がされる、使用頻度が多い関数となります。
JavaScript開発をするうえで必須というくらいに利便性のある関数です。
コンソールログ関数でHello worldを作る
Hello worldはプログラミングをする人ならだれもが通る文字になりますね
Hello worldを出力するコンソールログ関数はアラート関数とほぼ同じ方法となります。
()の中に文字列をいれれば完成です。
下記に例を記載します。
<script>
console.log("Hello world");
</script>
※全角と半角を注意、基本的に半角文字で入力します
完成したらブラウザで開いてみてください。このままだと何も表示がされません。
コンソールログ関数はブラウザのコンソールにメッセージを出力する関数となるので表示を確認するためにはコンソールを開きます。
コンソールはブラウザの開発ツールから確認ができ、Google Chromeを活用する場合『F12』キーを押せば開きます。Macの場合はoption』+『command』+『i』と同時にキーを押せば開くことができます。
開くとconsoleと書いてある箇所があるのでそこをクリックしてください。
クリックするとコンソール画面になるので、先ほどのコンソールログ関数はここへメッセージを出力する関数なのでここを確認します。
そうするとHello worldが表示されているはずです。
このようにコンソールログ関数は開発ツールのコンソール画面にメッセージを送る関数となります。
今後変数や関数、オブジェクトなどを活用し始めると中を確認したいということが多々発生すると思います。
そのような時にこのコンソールタグ関数を使用することで解決をすることができます
アラート関数との違いは、アラートダイアログが出ないのでいちいちOKボタンをクリックしなくて済む事と、アラート関数よりももっと細かく中身が表示することができたりします。
コメント