JavaScriptのイベントを理解する

jQueryのon()メソッドでイベントを扱う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryではon()メソッドでイベントを扱うことができます。
講師:
06:41

字幕

このレッスンでは jQueryを使った イベントの扱い方についてご説明します 今開いているのは jQueryのサイト jQuery.comです そして ダウンロードのページに行くんですけども 現在1のバージョンと 2のバージョンが公開されています 2のバーションというのは 比較的新しいブラウザー モダンブラウザーと言いますけども それが対象になっています ということは古いブラウザーには対応できない ということなんですが jQueryを使う意味として やはりまだ古いブラウザーでの 対応が大きいでしょうから 今回は1のバージョン 1.11ですね これを使うことにします ではダウンロードぺージに行きましょう そしてダウンロードして使っても いいんですが 今回は手軽に使える CDNと これは ネット上でコンテンツから jQueryの ライブラリーを読んできます コンテンツデリバリーネットワーク という頭文字なんですけども そうすると ライブラリーを ダウンロードして あるいはサーバーに上げなくても 使うことができます またこの CDNで読み込んだものから 他のページに写っても 改めてまた読み込みなおす という必要がないので CDNを使うと結構便利です もちろんネットにつながってなくては いけないということはありますけども では jQueryの 1.11のバージョンですね これをこのままコピーすればいいので このスクリプト要素をコピーします ドリームウィーバーCCで htmlドキュメントを開いていますけども ここに今コピーしたものを ヘッドの中にですね ペーストします そしてローカルで試したい場合には ダブルスラッシュの前に http;と入れておく 必要があります 今のところ スクリプトは書かれてません ここにオンクリックがありますけれども これは気にしないでください で今回は IDブルーという属性が指定されている イメージの要素 IMGの要素がありますけども ここに jQueryで この要素をクリックしたら というスクリプトを書き加えたいと思います 今この LI要素が どんな風に配置されているかというと こんな感じですね 念のためブラウザーでも確認してみましょう ファイルから ブラウザーでプレビューです 一旦保存しておきましょう 先ほど確認したのと同じように 9つの画像が 四角い画像が並んでいます ではjQueryの javascriptコードを 書き加えていきたいと思います jQueryは スクリプト要素に javascriptコードを 書きますのでここに スクリプト要素を加えます そして閉じると jQueryで このドキュメントが読み込み終わったら 実行したいというのは これはもうお決まりの書き方がありまして $のカッコカッコ この中に ファンクションを定義します ファンクション 丸カッコ丸カッコ 中カッコ始まり 中カッコ閉じですね そしてこの カッコの中には $サイン $マークを書きます そうすると この中に書き加えた javascriptコードは ドキュメントの読み込みが 終わったら実行されます ではここに書きたいことを 書くわけなんですけども まずはセレクターですね IDのブルーと これを持ってきたいわけですから このカッコの中には ブルーという風にいれます そしてこのブルーの要素に対して イベントを 扱う関数を設定したいと思います この時イベントリスナーという javascriptコードが あるんですが書き方は 似てますけれども キーワードは単にオンです 楽ですね オン、カッコカッコと そしてここは アドイベントリスナーと とても似ているんですけども まず最初に何をした時に 処理を実行したいのかと いうことで イベントを設定します クリックです そしてやりたいことは 関数として定義します ファンクションの カッコの中カッコ始まり 中カッコ閉じと いうことで ではここからはまた普通に書きますけども 変数として エレメントを取り出します ドキュメントの get element by ID ということで ブルーという ID属性をつけた IMG要素を選びます そしてアラートで 警告のダイアログを出します その中でエレメントの 情報を 呼び出したいと思うんですが コピーを持ってきます そして Altという風にすると このAlt属性 やはりブルーという文字なんですが これが表示されることになります では保存して確認しましょう ファイルを保存して ブラウザーでプレビューします このブルーのタイルですね クリックをします そうすると警告のダイアログが 表示されて Alt属性に指定したブルー という文字が表示されました このレッスンでは jQueryを使った イベントの扱い方についてご説明をしました まずドキュメントが 読み込まれた時ということで $カッコファンクションですね その中に やりたいことを書くわけなんですが 今回はブルーという ID属性をつけたものを セレクターで取り出して イベントの設定は オンです そして何をした時というイベント 今回はクリック やりたいことをファンクション として定義すると この2つの 引数を指定して 丸カッコを閉じればOKと いうことですね あ、あと ここは一応念のため セミコロンをつけておいたほうが いいでしょう セミコロンをつけます 保存しときましょう

JavaScriptのイベントを理解する

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

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

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

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

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