WebデザイナーのためのjQuery実践講座

コンソールにログを出力してみよう

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Chromeブラウザのデベロッパーツールを使って、コンソールにログを出力する方法について、解説致します。
講師:
04:34

字幕

このレッスンでは クロームブラウザの デベロッパーツールを使って― コンソールにログを出力する 方法について解説していきます まずは ダウンロードしてきた こちらの console ― というフォルダーの中に入っている― こちらの index.html ファイルと― この js フォルダーの 中に入っている― この javascript.js ファイルをエディッターで開いてください そして これがそれらのファイルを 開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう JavaScript には主に 動作確認を行うための― console.log という 命令があります この命令を使うことによって 各ブラウザに搭載されている― デベロッパーツールなどといった物に対して メッセージや変数の内容などといった物を― 表示させることができます それでは その console.log― という命令の使い方について みていきたいと思います では こちらの javascript.js ファイルを― エディッターで開きます すると このような画面が出てきましたね この画面の中の ちょうど こちらの部分が console.log― の命令となっています まず 上から順番に見ていきます こちらの部分ですね こちらの部分で console.log と書いてー 括弧 括弧閉じるの セミコロン そして この括弧の中 この括弧の中は引数と呼びますが― そこに表示させたいメッセージを 記入しています 今回は Hello jQuery! と 書いていますね 次に こちらの下の部分を見てみましょう こちらの下の部分では 変数の値を console.log の命令で― 表示させるサンプルとなります まず 変数を定義しています var と書いて message と書きます そして = そして こんにちはと書いて― 最後 こちらの部分で セミコロンを書いて文章を閉じます こうすることによって 名前が message という変数に対して― こんにちは という文字列を代入しています そして 次の文章で先ほどと同じように console.log と書いて― その引き数にこの変数 message を入れています こうすることによって コンソールに対して― こんにちは という メッセージを 表示させることができます それではこの状態で こちらの index.html ファイルを― ブラウザで開いて どのように表示されてくるのか― 確認してみたいと思います こちらが その index.html ファイルをブラウザで表示させている状態です それではまず ブラウザの デベロッパーツールを― 起動してみたいと思います クロームブラウザの場合 デベロッパーツールはこちらの― ボタンから起動していきます まずは その他のツールを クリックして そして こちらの― デベロッパーツールを選択します すると このような画面が出てきましたね こちらの部分が デベロッパーツールとなっています このデベロッパーツールですが この様にウェサイトを制作するに当たっての― 様々な便利な機能が搭載されています 今回は この中でも こちらの Console― というボタンをクリックします すると このような画面に切り替わります この画面がいわゆるコンソール画面となります そして 見ていただいて分かるとおり― こちらの部分にこのように 文字列が出力されていますね まずは Hello jQuery!― そしてもう一つは こんにちは! と書かれています このように先ほどJavaScript の 中で記述したコンソールログ― Hello jQuery! という メッセージのものと― そして 変数に入れた こんにちは!というメッセージが― 表示されてきているわけですね この console.log という 命令を使えば― 不具合などといったバグに対しても― 簡単にその原因を見つけることが できるようになります 使用頻度としては かなり多くなってきますので しっかりと覚えて活用していきましょう 以上でレッスンは終了です 今回は クロームブラウザの デベロッパーツールを使ってー コンソールにログを出力する 方法について解説いたしました 以降のレッスンでは jQuery で マウスイベントを利用するにあたり― その種類のご紹介と使い方について 解説していきますので― そちらも合わせてご覧ください

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

2時間04分 (34 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。