JavaScriptのイベントを理解する

ドキュメントを読み込み終えたときのイベント

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
イベントハンドラonloadを使うと、要素の読み込みが終わったときにJavaSCriptコードを実行できます。
講師:
05:23

字幕

このレッスンでは ドキュメントを読み込み終わった時の― イベントを使って javascript コードを書いてみたいと思います 今画面には html ドキュメントが開いていますが タイルのように gif の画像なんですが 9 つ並べてあります そしてこのブルーなんですが ブルーをクリックすると javascript が実行されて 警告のダイアログボックスが出て blue と文字が表示されます この設定は既にできているんですけども 少し手を加えてみたいと思います Dreamweaver CC で html ドキュメントを開きました 今の組み立てなんですけども UL 要素の中に タイルのような画像が入っていて これは li 要素の中に入っているんですが そんな中の blue には ID 属性としてblue と いう名前が定められています そして スクリプト は script 要素の中に書いてあるんですが body の中に script 要素があり ブルーのエレメントを取ってこいという― get element by ID ですね エレメントをとってきたら そのブルーのエレメントが クリックされた時の処理を function 名前のない関数で指定しています そして警告のダイアログの中に 表示された blue というのは 要素の alt 特性を持ってこいと いうことなので このブルーの要素の alt 属性である― blue という文字が表示されました script 要素なんですが body に書いてしまうようりも head の中に書いてしまった方が まとまって見やすい あるいは管理がしやすいことがあります そこでこの script 要素を そっくりそのまま head 要素の中に移します 後は何も変えていません では確認してみましょう ファイルを保存して ブラウザーでプレビューします Google Chrome で見てみましょう ブルーをクリックしても 何も起こりません 実はこれエラーが起こっているんですが エラーを見てみましょう Chrome の場合には 「表示」>「開発管理」で 「 javascript コンソール 」を 開いてみますと 赤字でエラーが出てきました onclick というものを プロパティで指定しましたね それが null っていうのは 空っぽということです 何だかわかんないものに onclick が設定されていますよ あれは確かブルーのエレメント イメージですね イメージ要素に対して設定したはずですが javascript コードの方では その onclick を設定するものが見つかりません という意味のエラーを吐いています ではもう一度 html ドキュメントの方に 戻ってみましょう なにしろ script 要素が body 要素の中にあった時は ちゃんと動いてましたね それが head の方に持って来たら動かない そして先ほどのエラーの内容は この onclick を設定している エレメントがNULL 空っぽです 見つかりませんと いうことです なぜかというと こちらの script 要素の方が body 要素の中身よりも 先に読み込まれてしまっているからです ですから get element by ID で blue を探しなさいと言っても 見つからないわけですね 先ほど body 要素の時は この UL 要素の後に script 要素が置いてあったんで 読み込み終わってから実行されたわけです ではどうしたらいいでしょうか この body 要素が読み込み終わったら 実行すればいいです 但しこの書き場所は移しません ということでこの body 要素に 属性として 読み込み終わったらと いうイベントを加えます イベントハンドラーですね onLoad というのがありまして この中にスクリプトを書くわけですが initイニシャライズの意味なんですが 初期化ですね この関数を実行しなさいと今書きました 関数ないです これから定義しましょう この script 要素の中で function init そして やりたり処理を全部この― init の関数の中に 入れてしまえばいいんですね こうすると script 要素そのものは body 要素よりも先に読み込まれます けれどもこの init は body 要素の読み込みが済んだら 実行するとなっているので その時に初めて実行されて この中身が処理されると いうことになりますので 今度は問題がないはずです ではファイルを保存して ブラウザーでプレビューしましょう まず念のため 開発管理で javascript のコンソールを見てみます エラーがないですね 赤字がありませんので大丈夫です ではブルーをクリックすると ちゃんと blue という文字が 警告のダイアログに出てきました ですからこれできちんと body 要素が読み込まれた後に init という関数が呼び出されて javascript の処理が行われた ということになります このレッスンでは 「要素が読み込み終わった時」という 属性として onLoad というイベントを設定する 方法についてご紹介しました その中に関数名を書いてあげて 関数を定義し やりたいことをコードとして書き込めば 読み込み終わった時に実行される ということです

JavaScriptのイベントを理解する

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

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

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

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

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