※回答一覧

 出題者   カテゴリ   作成日

阿部 正幸		 サーバー＆プログラミング 2015-09-29 10:37:14
 問題   ヒント   回答数 
■Googleアナリティクスで、クリックイベント取得などがあるが、そもそもイベントとは何か?

Googleアナリティクスでは、画面のバナークリックを計測しようとした場合、
<a href="http://example.com/" onclick="_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', opt_value, opt_noninteraction]);">
のように、onclick=""という書き方をしたりします。

またユニバーサルアナリティクスの場合は、
<a href=”http://sample.com” onclick=”ga(‘send’, ‘event’, ‘link-sample’, ‘click’, ‘http://example.com’);”>
と記載方法が変わります。

ここで、下記4問にお答えください。

Q1.onclickなどはイベント処理と呼ばれていますが、このイベントとは何を表しているのでしょうか?
Q2.なぜ、onclick="..;"のように、最後にセミコロンが入っているのでしょうか?
Q3.イベント処理は他にも多く存在します。HTML5から追加になったイベントは何があるでしょうか?
Q4.HTML5で追加になったイベントを使用する場合に注意する点はなんでしょうか?		 5

 

メンバーの回答一覧　お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。

なるほど
票数		 回答 講師コメント
1 ツチノコ
◆Q1
onclickにはその要素上でマウスがクリックされたら実行する処理を記述します。
イベントとは、マウスがクリックされた、キーボードが押された、フォームの要素にフォーカスをあてたなどの閲覧者の操作に関連付けて特定の処理を行うことができる仕組みのことです。
キーボードが押された、というイベントの場合、どのキーがおされたのか?といったことも処理の内容で関連付けることができます。

他にも、ページが読み込まれた、画像の読み込みでエラーが発生した、というようにブラウザの状態変化に関連するイベントもあります。

◆Q2
Javascriptの書式として、命令文の区切りという意味を持ちます。
ただし、イベントの処理内容が、今回の例のようにユニバーサルアナリティクスのga関数の実行のみであれば、命令文が1つしかないため、セミコロンはなくても正常に動作すると思います。

命令が複数ある場合、onclick属性内では1行で複数命令を記述するため、区切りとして必要ですが、その場合でも最後の命令だけは省略可能だと思います。

個人的には、ミス予防のためにも省略はせず、常に記述するようにしています。

◆Q3
想像ですが・・・
HTML5から動画や音声ファイルを標準で扱えるようになっているので、動画の再生準備が整った、再生中、再生が停止された、といったイベントがあるのではないでしょうか?

◆Q4
これも想像ですが、ブラウザの対応状況がばらばらなので、重要な処理(その処理が実行されないとページを閲覧できない、手続きを完了できない等)には利用しない。

さすがにそろそろサポートしなくてもいいと思うのですが、IE8などはそもそもHTML5非対応です。
html5shivといった、html5に対応させるJavascirptライブラリはありますが、動画再生などはAPIに依存する機能なのでカバーできない機能かと思います。
また、IE9なども対応が不完全なのではないでしょうか?

それから、HTML5自体が、まだまだ仕様が固まったばかりで枯れた技術ではないため、HTML5.1などで今後仕様が変更になるかもしれない、ということでしょうか。		 金 (阿部 正幸)
Q1、Q2その通りです。 Q3も、その通りでVideoや、Audoioに関連するイベントなども追加となっています。（例えば再生終了など） その他にもエラーが起こった場合、フォーカスがあったた場合などユーザーの操作を必要としないイベントも多く追加となっています。 Q4 もその通りです。 イベントに限らずJavaScriptを使う際に言えることですが、クロスブラウザを気にすることがとても重要となります。
0 丸田
Q1:「○○したとき」というプログラムが動くときのきっかけ(条件)
Q2:そういう決まりだから
Q3:
onformchange:フォームが変更されたときに実行
ondrag:要素をドラッグしたときに実行
Q4:ブラウザに対応しているかどうか確認が必要		 銀 (阿部 正幸)
Q1. 丸田さん仰るとおりです。 Q2. その通りです。言語の決まりで一つ一つの命令の最後に使います。 Q3. onformchange、ondragもそうですね。 その他にもHTML5から、VideoやAudio関連のイベントも追加されています。 下記にHTML5から追加となったイベントが載っております。 http://memopad.bitter.jp/w3c/html5/html5_ref_eventattributes.html Q4. その通りです。
0 yukko
Q1.onclickなどはイベント処理と呼ばれていますが、このイベントとは何を表しているのでしょうか?
マウスボタンをクリックしたこと、ページが読み込まれたこと、ページ上で発生する様々な出来事のこと

Q2.なぜ、onclick="..;"のように、最後にセミコロンが入っているのでしょうか?
文の終了を表すためについている

Q3.イベント処理は他にも多く存在します。HTML5から追加になったイベントは何があるでしょうか?
onerror
onmessage

Q4.HTML5で追加になったイベントを使用する場合に注意する点はなんでしょうか?
随時変更があるので注意する?よくわかりませんのでこれを機会に勉強したいです。		 銀 (阿部 正幸)
Q1. その通りです。 Q2. その通りです。 １つ１つの命令の区切りで使います。 Q3. onerror 、onmessage もそうですね。 その他にもHTML5から、VideoやAudio関連のイベントも追加されています。 下記にHTML5から追加となったイベントが載っております。 http://memopad.bitter.jp/w3c/html5/html5_ref_eventattributes.html Q4. JavaScriptはブラウザにより動作が異なりますので、クロスブラウザの検証がとても重要です。 例えばonclickは全てのブラウザで利用可能です。 http://www.w3schools.com/jsref/event_onclick.asp onprogressは、IE9以上から利用可能です。 http://www.w3schools.com/jsref/event_onprogress.asp
0 kamino
Q1.
なんらかのアクションがあったとき
はじまり
きっかけ
開始

Q2.
命令文の区切り
セミコロンで処理が終了
セミコロンが無いと継続

Q3.
ondrag
ondragend
ondragenter
など?

Q4.
数値を鵜呑みにしてはいけないということ(?)
自分が何を知りたいのかを明確にして使用すること(?)
わかりません!		 銅 (阿部 正幸)
Q1. その通りです。 何かの動作をイベントで、そのイベントをもとにに何らかのJavaScriptを実行することができます。 Q2. １つ１つの命令の終わりにセミコロンを入れます。 kaminoさんが仰る「セミコロンで処理が終了 」ですが、セミコロンで処理は終了いたしません。 例えば下記は処理はセミコロンで終わらずに最後の出力まで進みます。 var hoge = 100; var hoge2 = 200; var result = hoge hoge2; console.log(result); JavaScriptは途中で処理を止めることが他の言語よりも、複雑ですが、例えば Try Catch でエラーの場合に処理を飛ばすことが可能です。 Q3. ondrag、ondragend、ondragenter もそうですね。 その他にもHTML5から、VideoやAudio関連のイベントも追加されています。 下記にHTML5から追加となったイベントが載っております。 http://memopad.bitter.jp/w3c/html5/html5_ref_eventattributes.html Q4. JavaScriptはブラウザにより動作が異なりますので、クロスブラウザの検証がとても重要です。 例えばonclickは全てのブラウザで利用可能です。 http://www.w3schools.com/jsref/event_onclick.asp onprogressは、IE9以上から利用可能です。 http://www.w3schools.com/jsref/event_onprogress.asp

0 鷲尾
Q1.ユーザーの反応(onclickはリンクのクリック数)

Q2.jsの文章の区切りのため

Q3.分からない

Q4.		 なし (阿部 正幸)
Q1. なんらかの動作がイベントです。例えば鷲尾さんが仰るユーザーの何らかの動作もイベントです。（例えばクリックなど） その他にもユーザーの動作が関係ないところで、例えばページ内でエラーが発生したときや、動画の再生が終了したときなどもイベントの一つです。 Q2. その通りです。