JavaScript: DOMを活用しよう

alert()とconsoleオブジェクトのメソッドを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
alert()とconsoleオブジェクトの基本的なメソッドの使い方をご紹介します。
講師:
07:39

字幕

このレッスンでは Alert メソッドとConsole オブジェクトの基本的なメソッドの使い方をご紹介します。現在 Google Chrome で HTML ドキュメントを開いています。これはサンプルですけれどもでは JavaScriptコンソールを出しておきましょう。「表示」から「開発/管理」で「 JavaScript コンソール」です。ここで確認で JavaScript を試しに入れてみます。「 document.body 」の中に子どものNodes はいくつあるか。「 .childNodes 」ですね。今メニューが出てきてその上から2番目がchildNodes になっていますので矢印キーで下を選んでそして Enter を押すと子どもの Nodes の数が配列に入って出てきますね。数を確認したいというときにはこれ配列ですのでlength というプロパティで確かめることができます。今入力した「 document.body.childNodes 」この Console で上向き矢印をクリックすれば前に入力したものを出すことができますのでここで「.length 」と le でもlength 出てしまいますね。 そうると全部で7と。数えれば分かることなんですがこれを HTML ドキュメントの中にscript 要素を設定してそこから実行してみたいと思います。ではコピーをしてここは一旦クリアしましょう。Dreamweaver で HTML ドキュメントを開きました。コードを全体で見たいのでビューはコードビューにしましょう。そして script 要素を body を閉じる直前に入れることにします。script ですね。そしてタグを閉じます。今 JavaScript コンソールからコピーした命令があります。この「 document.body.childNodes.length 」長いですがこの内容をHTML ドキュメントの中に JavaScript 書いてブラウザの方で確認したいといったときに方法がいくつかあるんですが、最も単純なのはalert メソッドを使うことです。) を先に書いてしまいますけどそして「 window.alert 」というのがメソッドなんですけれども「 window. 」は除いても平気です。ですので削ってしまいましょう。こうすると警告のダイアログが開いてその中にこの JavaScript の命令文ですね、の結果を表示してくれます。 一旦保存しましょう。Google Chrome でリロードします。そうするとダイアログが開いて全部で8、要素が8個あるということなんですが表示されました。OKということなんですがこの alert というダイアログは一度に1つしか出せません。また閉じるまで処理が進まないんですね。ですから alert よりももうちょっと便利なConsole のオブジェクトのメソッドを使いたいと思います。1つ補足しておきますけれどもアラートで出したときに数字が増えているじゃないかと思ったかも知ません。これは Script 要素を書き加えたからですね。ですから8で結構です。さて Dreamweaver CC の方に戻りました。この HTML ドキュメントでScript 要素ですね。JavaScript のコードを書き換えます。alert ではなはく console のオブジェクトのメソッドを使います。最もよく使うのが log です。Console の中にメッセージとかデータを情報を表示してくれるというメソッドです。ではこれを一旦保存しまして。またブラウザをリロードします。そうすると Console の方に数字が出てきました。 この console.log であれば処理が止まってしまうこともありませんしデータを複数出すということもできるんです。console.log で表示するデータ内容なんですが単純な数字ではおもしろくないのでちょっと変えましょう。document は良いとしてdocument.querySelector 。Dreamweaver の場合もこのメニューから選べますので「 querySelector 」にして CSS の形で表示したいデータを指定することができます。では class group とその内容を示しなさいということですね。ではこれで保存をします。ブラウザをリロードしましょう。そうすると単純な数値でなくてこの group という名前の付いた要素の中身がちゃんと階層構造で示されるようになっています。この console.log はもう少しバリエーション、ちょっと名前を変えてバリエーションがありますのでそれも紹介しておきます。console.log この log の部分をdir とします。こうすると情報としては同じ内容なんですが少し違った形式で表示をしてくれます。やはり保存をしましょう。ブラウザをリロードします。 やはり nav.group が出てくるんですが表示の仕方がこれはオブジェクトとして表しているのでオブジェクトの中のプロパティを表示して見ることができます。あともういくつかだけご紹介しましょう。この console の命令文を1回コピーをしてそして2つペーストします。ペーストとペーストして。dir を info に変えてみます。これが1つ目。次に warn 。注意ですね、警告です。それから error と。3種類内容は同じなんですけれども3種類の出し方を試してみます。ファイルを保存します。ブラウザをリロードします。3つ出てくるんですがマークが付いてますね。info の場合。warn の場合。error の場合です。内容自体は変わりません。ただこの console のメソッドというのはデバッグで使われますのでそのデバッグで表示するときにこの console.log があるいは console.errorwarn が実行されたときはどういう内容なんだということを明らかに表示できるようにということですね。これはエラーだと。これはちょっと注意。単にインフォメーションですよということが表示できるようになったということですねこのレッスンでは単純な alert 以外にconsole オブジェクトのメソッドをご紹介しました。 よく使われるのが console.log 。ちょっと表示の仕方を変えたのが dir 。それから少し表示の仕方をアレンジしたものとしてinfo warn error をご紹介しました。

JavaScript: DOMを活用しよう

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

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

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

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

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