JavaScript: DOMを活用しよう

img要素のクリックを捉える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
addEventListener()メソッドでクリックのリスナーを加え、その対象が画像かどうかを調べます。
講師:
06:24

字幕

このレッスンでは画像はクリックされたかどうか調べる方法についてご説明をします。今練習用のドキュメントを開いているんですが現在はこれはトップページです。今回使うのはこの「 ARTISTS 」というページの HTML ドキュメントを扱うことにしましょう。画像はここにあります。これをクリックしたかどうかを調べたいと思うんですがまずデベロッパーツールで確認しておきましょう。画面を少しスクロールします。そしてデベロッパーツールの左上のアイコンでこの領域ですね。div 要素でクラス pixgrid という設定がされています。その中に ul 要素があってそして li 要素があるということですね。HTML ドキュメントを Dreamweaver で開きました。そして script 要素、一応パスだけ取ってあるんですが、コード全体に見える様にコードビューにしておきます。ではまず先程調べた pixgrid ですね。これを変数に取りたいと思います。「 var myNode 」として「 document.querySelector 」ですね。そして先程調べた通りクラスは pixgrid でした。その中の ul 要素を取りたいと思います。 これで取り出せたはずです。そしてこの ul 要素をクリックした時に何かを起こしたいというときには「 addEventListener 」というメソッドを使って何が起きた時どうすると2つの引数を指定します。最初はまずクリックしたときですね。なのでクリックに対してカンマで何をしなさいというのは関数で書きます。今回は関数を直接ここに書いてしまいましょう。「 function 」ですね、そして引数を受け取ります。引数のことをイベントオブジェクトという風によく呼ぶのでそのままイベントオブジェクトという引数にしましょう。そしてイベントオブジェクトという名前の通りイベントに関する色んな情報を持っています。コンソールで確認しましょう。今回はちょっと dir の形、つまりオブジェクトとしてコンソールに出すことにします。イベントオブジェクトの中にはコピーを持っていきますけれども、プロパティがいろいろあります。その中でクリックした相手に関わるものは「 target 」というプロパティになっていますのでこれでちょっと確認してみましょう。一回保存をします。Chrome をリロードします。そしてこの画像をクリックするとimg と出てきました。 これはイメージのオブジェクトだからです。関係ないとこをクリックしても何も起こりません。けれども、この間をクリックすると今度はli と出てきます。つまり、 ul 要素の中に li 要素があって画像でない部分だと li 要素という風に認識されるわけです。画像ですと img になります。dir で取っていますのでこの中のプロパティを確認することが出来ます。Ctrl もしくは Command F で検索状態にして「 tagName 」というプロパティがあることを確認します。そして img の要素の場合には大文字で IMG という値が収められています。これで画像かどうかを確認出来るということですね。では Dreamweaver でクリックされたのがimg 要素かどうか確認する為にif 条件を入れることにしましょう。この「 console 」をコメントにします。そして if ですね。丸かっこの部分をこれコピーしちゃいましょう。選んでコピーします。その中の「 tagName 」というプロパティでしたね。これが大文字の「 IMG 」だったらと。今回のレッスンでは確認だでのでコンソールでメッセージを出すことにしましょう。 「 console.log 」です。そして文字で「 IMG がクリックされました 」ということで。保存をします。Chrome をリロードします。そして先程この辺クリックしてもEventListener のメッセージが出てきたんですけど、出てこないですね。そして画像をクリックすれば出てきます。こちらもう一度クリックして確認してみましょう。「 IMG がクリックされました 」ということになっていてこのスキマの所では何も起こりません。このレッスンではクリックしたものが画像かどうかを確かめるという処理についてご説明しました。クリックしたらというのは addEventListenerで第一引数を文字列をクリックとします。そして第二引数はやりたいことを funtction関数として定めます。そして img 要素がどうかというのは引数のイベントオブジェクトのtarget プロパティから tagName を調べimg の場合には処理をするという書く方をご説明しました。

JavaScript: DOMを活用しよう

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

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

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

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

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