JavaScript: DOMを活用しよう

consoleオブジェクトの応用的メソッド

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
consoleオブジェクトの応用的なメソッドを使ってみます。
講師:
06:42

字幕

このレッスンでは Console オブジェクトの応用的なメソッドをご紹介します。まず Google Chrome で JavaScriptコンソールを表示しておきましょう。ちょっとここで一旦試しておきます。確かめたいのは例としてですけれどもdocument の querySelectorで a 要素を調べましょうか。a 要素がありますかということで調べてみます。そうするとその中の最初の a 要素が表示されます。ではこれをコピーしておいてHTML ドキュメントを Dreamweaver のコードビューで開きました。すでに script のタグだけは入っているのでここに JavaScript コードを書いてみたいと思います。今コピーしたものを console のでは dirで確認してみましょう。今コピーしたものをペーストします。一旦保存しまして Google Chrome をリロードします。そうすると console.dir でオブジェクトとしてa 要素が表示されました。プロパティがこれだけありますということですね。kの表示の仕方いきなり a 要素がポンと出てますね。この表示をちょっと段階的なインデントみたいな感じにグループ化してみたいと思います。 ではクリアをしといて Dreamweaver のコードビューの方でこの console.dir はそのまま取っときます。その前後にもう1行ずつ書き加えます。まず前には console.group です。そして group に何か名前を付けます。これは自由に付けていいんですけれでも ではa 要素なので「 links 」としましょう。そして group のスタートがこのconsole.group なんですが終わりもあります。console の groupEnd 。こちらの方は特に名前を付ける必要はありません。ここで group おしまいということです。では改行しまして少しパターンを変えます。まずはこれを基本的にはコピーをして必要なところを書き加えたいと思いますけれども。ペーストですね。そして group にちょっとオプションが加わったような形です。Collapsed 。折りたたんだっていうことですね。ではここは a ではなくて a でも構わないんですけどちょっと変えましょう。p にして paragraphs と。そして End は一緒です。違うのは group にするかgroupCollapsed にするか。 でまあ出す要素を変えるのでgroup の名前も変えてあります。これで確認してみましょう。ファイルを保存します。Chrome をリロードします。そうすると先ほどとは違っていきなり a が出てこないですね。group の名前が出てきます。その中に a 要素が表示されると。console.dir の内容がここに表示されるんですね。ですから group 化してその中にインデントをかけたような感じですね。で Collapsed というのはどういうことかというと畳まれてるんです。上は a 要素がすぐ出てるんですが下の方はCollapsed 畳んで出せということなんで三角をクリックして表示するまでは中身が出てこないですね。開いてしまえばあとは中は一緒ということになります。まあ a と p 入れるものは違っているんで表示は違っていますけれどもgroup それから groupCollapsedこれは機能的には畳むか畳まないかというだけの違いになっています。Console は一旦クリアしておきましょう。もう1つご紹介します。Dreamweaver に切り換えまして今さっき書いた JavaScript コードはコメントにしておきましょう。 そしてこの上にもう1つご紹介したものを記入していきます。console の time と。これ時間を計測するんですね。やはり名前を付けます。ちょっと loop 時間をカウントしたいのでloop という名前にして。そしてここは普通に JavaScript コードで結構です。for 文で i = 0 から1000000 。1000000 回ループするということですね。で i を毎回カウントアップする。これはカウントアップ for 文のお決まりの書き方です。特に何もしないので中括弧は空っぽのままです。そして console で timeEnd で終わります。ただしこの timeEnd の中は名前をちゃんと書いてください。time というのはタイマーを複数動かすこともできるので必ずどのタイマーを終了するのかということで名前を書いておく必要があります。1000000 回ループするのにどれくらい時間がかかるかということを計測してくれます。ではファイルを保存してブラウザをリロードします。そうすると loop という名前が出てきて1000000 回のループで 2.591 ミリセコンドですね。ミリ秒経過しましたということがカウントされました。 このレッスンでは Console オブジェクトの応用的なメソッドとしてconsole.group その亜流ですけれでもconsole.groupCollapsed 。それから時間を計測する console.timeこの3つをご紹介しました。

JavaScript: DOMを活用しよう

DOM(Document Object Model)はHTMLの中の要素とそのツリー構造を扱うための仕組みです。このコースではJavaScriptの基礎を学んだ方を対象に、DOMの基本的な操作方法について解説します。具体的にはDOMの要素やノードの調べ方、要素の属性の変更、ノードの追加方法などについて説明し、実際にインタラクティブに対応するページを作ります。

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

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

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

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