WebデザイナーのためのJavaScript & jQuery入門

イベントを使ってみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
イベントを使うことで、インタラクティブな機能を実現できます。クリックなどの代表的なイベントを使ってプログラミングしてみましょう。
講師:
07:38

字幕

このレッスンでは JavaScript によるイベントについて学びます。それでは Chapter02 Lesson12のフォルダを開いてbegin のファイルと final のファイルを両方選んでブラウザで開いてみましょう。begin のファイルがこちらそして final のファイルがこちらです。final のファイルの CLICK というボタンをクリックしてみましょう。クリックすると、このウィンドウを閉じますかというダイアログがでます。一度キャンセルを押してもう1度クリックします。そしてこの窓を OK とするとfinal のファイルが閉じました。この様なイベントを作っていきましょう。それでは begin のファイルをSublime Text にドラッグ&ドロップして編集をしていきます。ウィンドウを並べましたらSublime Text のコメントがある所を見てみましょう。今回はこのイベントを作るにあたりID を取得してくるメソッドを使ってクリックイベントを実装して確認画面を出すという所までをやっていきます。ではまず変数名です。ボタンという変数名を btn で変数を宣言します。そしてその中にはdocument.getelement の e は大文字でElementそして b が大文字で Byそして I が大文字で dそして ()そしてシングルクォテーションでclick と宣言をします。 この内容は今ウィンドウに表示されているドキュメントがこのブラウザで表示されているものの中から、要素をとってきたいその要素は Id 属性によって持ってきたいということで実はここにボタンを表示するHTML があるのですがここに Id click とId 属性が設定されています。この click を、この様にclick と Id の中身と指定してあげることでこのボタンを特定することが可能になります。つまり、このボタンというものはこのクリックボタンという風にId から取得できたということになっています。そしてイベントを記述しましょう。イベントとはユーザーのアクションとも言えます。今回はユーザーが onclickつまりユーザーがクリックしたというイベントを定義します。そして = このボタンをクリックしたら何々するという中身を今回は function で記述をしていきます。function ( ) の引数は空っぽにして{ } で中身を書いていきます。そしてこの中でもう一度変数を定義します。この関数の中で flg という変数を宣言してその中身に confirm というものを入れます。そして confirm というのは確認のダイアログを出すメソッドになりますがこの ( ) の中に入れた文章がそのまま表示されるようになっていますのでこの様に文字列を入れるためにクォテーションを入れてから「このウインドウを閉じますか?」と質問文を入れてあげておきます。 そしてもしも if( ) の中に条件です。この flg が =そして等価であるという演算子にしたいので= を2つ繋げてtrue であれば半角スペース close()そして行末にセミコロンこれは確認ウィンドウがでたらキャンセルか OK というメッセージがでますがキャンセルが falseOK が true になります。なので、もし確認画面を OK と押したらウィンドウが閉じるという命令を記述しました。この close もメソッドです。ウィンドウを閉じるという機能を持っています。それでは一度、この状態で上書き保存をしてブラウザにフォーカスしてCommand+R もしくは Ctrl+R で更新をしておきましょう。そしてボタンにカーソルを合わせてクリック無事にこの画面がでたら一度キャンセルしておきましょう。それでは今度は、このイベントを他のイベントに変えてみましょう。onclick ではなくてonmouseover としてみました。そして保存をします。そしてブラウザにフォーカスして更新そしてマウスをクリックに重ねてみましょう。そうすると、クリックをしなくてもこの様に確認のダイアログがでました。つまり onmouseover というイベントのハンドラこれはイベントハンドラと言いますがイベントハンドラはマウスがかぶさった時というイベントになります。 そしてまたキャンセルを押して今度は mouseover ではなくてmouseout と書いて上書き保存をしてブラウザを更新今度はマウスを重ねても、クリックしても何も反応がありませんがこのボタンの外にマウスを外すとこの様にウィンドウがでてきます。つまりマウスが特定の要素今回はボタンですがボタンから外れたらイベントを実行するというような意味になります。そして OK を押すとclose メソッドが実行されてウィンドウが閉じます。この様にイベントを使うことでインタラクティブな機能をWeb サイトに持たせることができます。このレッスンでは JavaScript のイベントを学びました。

WebデザイナーのためのJavaScript & jQuery入門

jQueryはJavaScriptをあまりよく知らない人でも効率良く記述できるように作られたライブラリです。jQueryを使用すると、インタラクティブな演出や仕掛けを効率良くウェブサイトに実装することができます。このコースではJavaScriptとjQueryの基本を学んだうえで、それぞれの実際の応用の仕方について学んでいきます。

2時間49分 (27 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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