JavaScriptのイベントを理解する

子要素の数を調べる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
親要素の中に含まれる子要素の数により処理を分け、テキストを書き替えてみます。
講師:
06:32

字幕

このレッスンでは 親の要素の中に含まれた 子供の要素の数を調べ あるいは要素の中に含まれている テキストの書き換えということを 行ってみたいと思います 今ここに並んでいるサムネールなんですが クリックしたものがどんどん消えていきます そして 最後の1個 全部消えるのではなくて この1個になったらもう消えないと そしてこの1個をクリックすると このテキストなんですが 選択決定ということで 書き変わります このような処理について ご説明したいと思います 今ドリームウィーバーで開いている htmlドキュメントは 要素を削除するという 処理は書かれていますけれども その数を調べたり あるいはテキストを書き換えるということは していません どうしているかというと まずは ul要素の中にli要素として IMGが含まれているんですけども このul要素を取り出して gridというクラス名がついているんですが そこに対してクリックしたらという アドイベントリスナーです この処理を行いましょう、ということで クリックした エレメントを調べて それがIMGの要素であることを 確認したうえで その親li要素 を取り出して ul要素から削除するという ことになっています 全然数は調べていませんし テキストの書き換えの処理もありません まずここで確認しておきましょう どんな動きになるか ファイルで ブラウザーでプレビューです もうどんどんクリックしちゃいますね 最後の1個です 何も変わらずクリックすると 消えてしまうということなんで この最後の1個であることを確認する それから最後の1個をクリックしたら このテキストを書き換えるという 処理を加えていきましょう まずは数を調べましょう IMG要素であることを確認したうえで 子要素がいくつ残っているか 変数はカウントとします いくつかということですね そして ul要素、コンテナーという変数 入れてあるんですけれども その子要素を調べます クエリ セレクターオールというメソッドです そうするとその中にある これから指定する要素をすべて 調べてくれます それが配列に入るんですが リストの要素を知りたいんですよね ですから リストと のliという風にすれば すべてのli要素を調べます その配列が変えるんですが 知りたいのは数なので lengsというプロパティがあります これを使いましょう そしてそれを if条件で 調べて 複数残ってればいいんですよね 1個だったら もう消さないっていうことなんで 1個より多いかどうか if条件を設定します そして複数ある場合にはこの 削除をするという処理が行われますので これで確認しましょう ファイルを保存して ブラウザーでプレビューします またどんどん消していきますね 2つ 最後の1つ これ以上は今クリックしています クリックしてますが消えません 今度はこの1個になったら テキストを書き換える という部分の処理になります li要素が1個より多かったら 複数だったら削除するんですね そうでなかったら つまり1個になってしまったらだけですから elseということになります そして書き換える テキストなんですが このp要素のテキストにしましょう p要素の中に入っているテキストです これはどっから取ってくればいいかというと div要素ですね そしてIDにartが入っていますけれども ここから調べればいい ということになります では ドキュメントの クエリ セレクターです そして IDとしてartがあるわけですね その中にあるp要素 を取り出したいわけなんで これでp要素が取り出されます つまりこの要素ですね 取り出されますので その中のテキスト innerHTMLと いうプロパティなんですが ここに文字列を設定してあげればいい ということになります この文字列に書き換えます ダブルクオーテーション2つ 空っぽですと消えてしまうと いうことになりますので消してはまずいので この中に書き加えたい文字を p要素も含めて 入れていきます そして 選択決定にしましょうか コロンの どれが選択されたかということは このAlt属性に入れた文字列 を取り出したいと思いますので 今度はクリックされたIMGですよね ですからターゲットになります ターゲットのルート要素 そして pタグは閉じないといけませんので pを閉じる ということです では確認してみましょう ファイルを 保存して ブラウザーでプレビューです またどんどん消していきます 2つになりました 1つになりました そしてここでクリックすると 文字列が変わって この画像に設定されている Altのテキストですね 代替テキストが表示されました このレッスンでは 2つのことをご説明しました まず親要素の中の 子要素すべてを取り出す そして数を調べる そしてその数によって 処理を分岐しました 次に数が1個になってしまった時は 今度はその中から p要素を取り出して innerHTML プロパティによって テキストを書き換えるという 以上2つの 処理についてご説明しました

JavaScriptのイベントを理解する

あらかじめ決められた出来事が起こったときに発生するメッセージをJavaScriptでは「イベント」と言います。このコースではJavaScriptの基礎を学んだ方を対象に、マウス操作やデータの読み込みなどよく使われるイベントについて解説します。また関数の定義や処理の仕方などを実際にスクリプトを書きながら説明します。

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

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

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

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