JavaScriptのイベントを理解する

onclickでイベントを扱う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
イベントハンドラonclickを使って、要素がクリックされたときにJavaScriptコードを実行します。
講師:
06:09

字幕

このレッスンでは イベントの 扱い方についてご説明します javascriptでは 何か意味のある処理が行われる あるいはユーザーインタラクションがあると そういったことが起こりましたよと いうことを イベントという形で扱います そのイベントをどのように javascriptの中で 扱うかということをご説明するわけですが 例えばクリックした時という場合は 今が画面でお見せしているのは MDN モジラデベロッパーネットワークの サイトなんですがそのリファレンスの中の クリックした時のイベントを扱う オンクリックという ハンドラーが紹介されています このオンクリックを使って ドキュメントの中の 何かをクリックした時 エレメント要素ですね それをクリックした時に 何かを起こすという 処理を書いてみましょう を今ドリームウィーバーCCで htmlドキュメントを開いています コードが書いてあるんですけども 分割というボタンを押すと 今画面がどんなレイアウトになっているか ということがわかるわけですけれども 下をご覧になるとわかる通り UL要素の中に LI要素、リストですね、が 含まれていてそれぞれに gifの画像で 四角い色の違った タイルのようなものが置かれています まだこの段階では特に インタラクション、クリックしたら という処理は行われていません いちおう今どうなっているか ブラウザーの方で確認してみましょう ファイルからブラウザーでプレビュー グーグルクロームで見てみましょう タイルが並んでいるという状態です 特にクリックしても何も起こりません ではクリックをしたら何かが起こるように javascriptを書いていきましょう もう画面の上の方を 見なくてもいいと思いますので コードだけの表示にします そしてさらに 横のパネル、これも邪魔ですので コードだけが見えるように パネルは非表示にしましょう さて真ん中にピンクがあるんですけども このピンクをクリックしたら という設定にしたいと思います 先ほどご紹介した オンクリックですね この中にjavascriptコードを 書いてしまいます では警告のダイアログボックスを出します アラートですね そしてこの中に出したいものを 書けばいいわけなんですが ここでピュア ピンクですからピンクと 言う文字を出しましょう ダブルコーテンションの中ですから シングルコーテンションにして ピンクという風にします そして 保存をして ブラウザーで確認をしましょう 先ほどと同じ状態の画面です けれどここでクリックをすると このピンクですね ピンクという文字が出てきました これはピンクの要素 エラー要素にだけ設定していますので 他はクリックしても何も起こりません あのオンクリックという イベントハンドラーなんですが ほかの書き方もできます 次にそちらをご紹介します javascriptを書き加えますので ボディの中に スクリプト要素を加えましょう そして閉じます ではピンクの左側に ブルーがあるんですけども このブルーをクリックしたいと思います このブルーを指定するためには ID属性を加えます まあ名前は文字通りブルーにしましょう さてそうしたらブルーのまず要素を javascriptコードで取り出します 変数はエレメントとしましょう そして ドキュメントの get element by ID IDからエレメントを取り出そうという メソッドなんですがここで 先ほどIDとして付け加えたブルーですね これをコピーで持ってきちゃいましょう コピーして間違いのないように そうしたらこの取り出したエレメントに対して オンクリックと 言う風に プロパティとして設定します そしてここには ファンクションを設定するんでうが ここに直接ファンクションを 書いてしまいましょう ファンクションと 直接書いた場合には 名前をつける必要がありません 名前のない関数 匿名関数などという言い方をしますけども ではここにやりたいことを書きます やはりアラートにしましょう そして今回エレメントを取ってきてますから ここでコピーで持ってきました そしてAlt Alt何かというと このリスト要素の中に IMGの要素がありますね そのIMGにAltとしてブルーと 名前が書いてありますから いちいちこの中にブルーと タイプするんじゃなくて Alt属性を持ってきてしまおう ということです ではファイルを保存しまして 改めて確認します ブラウザーでプレビューです もちろんピンクは先ほどのまま クリックするとピンクと出てきますね 今度はその左のブルーです クリックをすると ブルーという風に出てきました このレッスンでは イベントハンドラーとして クリックした時のイベントを捕らえる オンクリックという ハンドラーについてご説明しました 使い方としては 属性として 直接javascriptコードを イコールで設定してしまう という方法とそれから スクリプト、 javascriptコードとして エレメントを取り出してその プロパティとして イベントハンドラーを設定し そこにファンクションを定める という2つの方法について ご説明しました

JavaScriptのイベントを理解する

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

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

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

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

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