JavaScript勉強会

JavaScriptの学習日記

2.1 コンソールにアウトプット 【JavaScript超入門】

JavaScriptの学習メモ。

今日は『確かな力が身につくJavaScript「超」入門』の第2章を読んでみます。

 

jsstudy.hatenablog.com

 

 

2.1 コンソールにアウトプット

(p.32)

JavaScriptからテキストなどをアウトプットできる場所の1つに「コンソール」があります。

コンソールはJavaScriptのプログラムがうまく動いているかどうかを確かめるための道具です。

 

コンソール(console)は、手動でデータを入力したり出力したりできる画面です。

コンソールは、プログラムの動作確認などで使われる便利な機能です。

 

(参考)

JavaScriptプログラミング講座【開発に便利な JavaScript について】

コンソールとは?

ブラウザには、コンソールと呼ばれる、入出力ウィンドウが実装されています。

コンソールに文字列を出力して、動作確認やデバッグに活用することができます。

 

ウェブコンソール - 開発ツール | MDN

ウェブコンソールでは次のようなことが行えます:

ウェブページに関する情報を記録する: ネットワークリクエスト、JavaScriptCSS、セキュリティのエラーや警告のほか、ページの JavaScript によって記録されたエラー、警告、情報メッセージを記録できます。

ページコンテンツ内で JavaScript の式を実行することにより、ウェブページと対話できます。

 

Chromeのコンソール

(p.33)

Google Chromeの[設定] → [その他のツール] → [デベロッパーツール] → [Console]を選ぶと、Chromeのコンソール画面が出てきます。

 

f:id:jsstudy:20170223221042p:plain

 

f:id:jsstudy:20170223221058p:plain

 

Google Chromeのコンソール画面を開き、「console.log('test')」と入力してエンターキーを押したところ。

こんなかんじで、JavaScriptのプログラムを実行させてみることができる。

 

3種類のアウトプット

(p.35)

JavaScriptからテキストなどをアウトプットできる場所は、特殊なものを除くと、大きく分けて次の3種類があります。

 

  1. コンソールへのアウトプット
  2. ダイアログボックスへのアウトプット
  3. HTMLやCSSへのアウトプット

 

console.log()

(p.38)

console.logは、()内に指定したテキストや、数式の計算結果などをコンソールにアウトプットする機能です。

テキストをそのままコンソールに出力する場合は、そのテキストをシングルクォート(')またはダブルクォート(")で囲みます。

 

JavaScript構文の名称

(p.40)

JavaScriptのプログラムで、各部にそれぞれ呼名、役割があります。

 

console.log('test')

というJavaScriptプログラムは、

「consoleは」「'test'を」「logしなさい」

という内容を意味しています。

 

  • 「○○は」にあたる部分をオブジェクト
  • 「××しなさい」にあたる部分をメソッド
  • 「△△を」にあたる部分をパラメーター

といいます。

 

上記の例では、

  • console → オブジェクト
  • log → メソッド
  • 'test' → パラメーター

に該当します。

 

行末のセミコロン

(p.43)

セミコロン(;)は、プログラムの文章の終わりを示します。

日本語の「。」と同じです。

 

まとめ

ブラウザーのコンソール画面を出して、JavaScriptプログラムの動作確認を行えます。

1行のプログラム(ワンライナー)を実行したりできます。