HTML5プロフェッショナル認定試験
レベル2ポイント解説無料セミナー
株式会社クリーク・アンド・リバー社 認定講師
高井 歩

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

本日の内容• 試験概要• JavaScriptの基本

2.2.2ドキュメントオブジェクト/DOM
2.2.1 イベント
•イベントの発生順• 要素の親、子要素•フォームイベント• 要素の表示/非表示•キーボードイベント• 要素の上書き•マウスイベント• 要素の挿入/削除•タッチイベント• 属性の追加、取得、削除•その他のイベント• フォームのデータ、検証•イベントリスナ•
2

フォームのサブミット中止
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

HTML5プロフェッショナル認定資格とは•次世代のWebプロフェッショナルのスキルの向上に貢献するために、
HTML5を活用したWebページやWebアプリケーションなどのデザイン、設計、構築に関する体系だった知識とスキルを備えたHTML5のプロフェッ
ショナルを中立的な立場で公平かつ厳正に認定する資格制度です。

•

Webデザイナー、Webプログラマー、スマートフォンアプリ開発者、
サーバーサイドエンジニアなどの、Web開発プロジェクトやWebサービスに関わるあらゆるプロフェッショナルが対象です。

•

多くの企業が推進する次世代Web言語の認定資格として、
HTML5のプロフェッショナルのスキルの向上に役立ちます。
また、企業内や研修機関での『技術力を担保する客観的基準』としても活用できます。

3

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

二つのレベル
対象
Webデザイナー

マルチデバイスに対応したWebコンテンツをHTML5を使ってデザイン・作成できる。

グラフィックフロントエンド

デザイナー

プログラマーHTMLコーダー

Webディレクター

スマートフォン
アプリ開発者

サーバーサイド
エンジニア

Webシステム
開発者

対象
フロントエンド

Webデザイナー

プログラマー

最新のAPIを駆使したWebアプリケーションを設計・開発できる。

HTMLコーダー

Webディレクター

スマートフォン

サーバーサイドエンジニア

アプリ開発者

4

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Webシステム
開発者

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

レベル1とレベル2の資格体系
HTML/HTML5マークアップ
HTML5に関するタグの用途、構造の組み立て方に関する技術
グラフィックス
JavascriptやCSSなどを用いて、動的にグラフィックスを生成したりアニメーションを実現したりする技術
レスポンシブWebデザイン
一つのソースで、スマートフォンなどの様々なデバイスの画面サイズに対応させるための技術
通信・デバイスアクセス系APIJavaScriptからクラウドと通信をして情報の送受信を行った
り、センサーなどのデバイスにアクセスしたりする技術
Javascriptプログラミング
Javascriptを使って、動的なWebコンテンツを作成する技術
マルチメディア
３D・動画・音声ファイルなどのマルチメディアコンテンツの表示・再生に関する技術
ユーザビリティJavaScriptやCSSなどを用いて、デザイン仕様に沿った見やす
い表示や操作しやすいコンテンツを作成するための技術
パフォーマンス
ストレージや並列処理を使ってコンテンツを効率良く高速に動作させたり、オフラインでも動作する仕組みを作るための技術

5

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

レベル1とレベル2の資格体系
ベーシックレベル認定名： HTML5 Level1 (Markup Professional)

HTML5プロフェッショナル向け

試験名： HTML5 Level1 Exam

この資格の認定者は、下記のスキルと知識を持つWebプロフェッショナルであること
所要時間：90分を証明できます。

試験問題数：約60問"HTML5を使ってWebコンテンツを作成することができる。

受験料：￥15,000 （税別）

"ユーザー体験を考慮したWEBコンテンツを設計・作成することができる。

認定条件： HTML5 レベル1試験に合格す"スマートフォンや組み込み機器など、ブラウザが利用可能な様々なデバイスに対応ることしたコンテンツを制作できる。

認定の有意性の期限：5年間"HTML5で何ができるか、どういった技術を使うべきかの広範囲の基礎知識を有する。

アドバンストレベル

認定名： HTML5 Level2 (Application Development Professional)

HTML5プロフェッショナル向け

試験名： HTML5 Level2 Exam
この資格の認定者は、下記のスキルと知識を持つWebプロフェッショナルであることを証明

所要時間：90分
試験問題数：40〜45問
受験料：￥15,000(税別)
認定条件：HTML5 レベル2試験に合格できます。
"動的に動作させて高いユーザビリティを実現するリッチユーザインターフェイスアプリケーショ
ンを作成することができる。
"マルチデバイスに対応し高パフォーマンスで動作する動的コンテンツを作成することができる。
"システム間連携を行いリアルタイムな情報を提供するアプリケーションを作成することがでる。

し、かつ有意なHTML5レベル1認定を保有"スマートフォンなどでネイティブアプリに近い機能を組み込んだ先端のWebアプリケーションにしていること。

近い機能を組み込んだ先端のWebアプリケーションを開発することができる。

認定の有意性の期限：5年間"APIのセキュリティモデルを理解したうえで開発することができる。

6

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

レベル2の出題構成(1)
主題

重要度

項目

JavaScript

JavaScript文法

10

WebブラウザにおけるJavaScript API

イベント

8

ドキュメントオブジェクト/DOM
ウィンドウオブジェクト

6
8

Selectors API

7

History API
テスト・デバッグ

7

Canvas(2D)

8

SVG

2

マルチメディア

Timing control for script-based animation
メディア要素のAPI

2
5

ストレージ

Web Storage

7

Indexed Database API

5

File API

5

バイナリーデータ

4

グラフィックス・アニメーション

7

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

6Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

レベル2の出題構成(2)主題

通信デバイスアクセス
パフォーマンスとオフライン

セキュリティモデル

8

項目

重要度

Web Socket

5

XMLHttpRequest

5

Server-Sent Event1

Geolocation API
Device Orientation
Web Workers
High Resolution Time
オフラインアプリケーションAPI
Page Visibility
Navigation Timing
クロスオリジン制約とCORS
セキュリティモデルとSSLの関係

5
1
5
2
3
2
1
4
4

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

学習方法
•

参考書

•

サンプル問題•出題範囲を確認••9

説明できない用語が無いようにする。

自分でサンプルを作って確かめる。
•

処理の順番などを確認する。(初期化->処理->後片付け)•

Webブラウザ毎に動作が異なることがあるので注意。

•

Webサーバの有無で動作が異なることがあるので注意。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

JavaScriptの基本

10

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

JavaScriptとは

11•

Webブラウザ内で動くプログラム言語•

主にオブジェクトという部品を操作する命令を記述してプログラムを作成する。

•

Webドキュメント内の要素を動かしたり、スタイルを変更させることができる•

他にも入力フォームの入力値の検証や、サーバとの非同期通信などを行なえる•

HTML5で追加されたGPSやCanvasなどの新機能を使用するためには必須
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

JavaScriptの記述方法•

HTMLファイル内の<script>タグ<script type="text/javascript">type属性はHTML5で省略可能に。

alert('サンプルプログラム');</script>•

外部ファイルを<script>タグで読み込み<script src="sample.js"></script>•

イベント属性に指定(イベントハンドラ)<a href="#" onclick="alert('click');">スクリプト</a>

12

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

JavaScriptの例<a href="#" onclick="clicked();">クリックして下さい</a><p id="msg">まだクリックされていません。</p><script type="javascript">function clicked() {var elm = document.getElementById('msg');
elm.innerHTML = 'クリックされました';}</script>

13

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

JavaScriptの例
a要素がクリックされたらclicked関数を呼び出し<a href="#" onclick="clicked();">クリックして下さい</a><p id="msg">まだクリックされていません。</p><script type="javascript">

clickedという名前の関数(ファンクション)を定義

function clicked() {var elm = document.getElementById('msg');
elm.innerHTML = 'クリックされました';}</script>14

取得した要素の内容を上書きする'msg'というid属性をもつ
HTML要素のオブジェクトを取得して変数elmに代入

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

2.2.2 ドキュメントオブジェクト
DOM
知識問題 コードリーティング問題

15

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

DOM•

Document Object Model•

WebブラウザのJavaScriptでは、HTMLドキュメント内のHTML
要素をオブジェクトとして扱い、操作することができる。

•

ユーザがページ上で入力(操作)した内容もDOMを通じて取得できる

JavaScript
document.style.color = "blue";実行
color:blue

Webブラウザの表示内容<body style="color:blue;"><h1>サンプル</h1></body>documentオブジェクト
16

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

DOMオブジェクトの使い方
1. DOMオブジェクトを取得する•

var elm = document.getElementById('sample');// HTML要素のIDを指定して取得

2. DOMオブジェクトを操作する•

17

メソッドを呼び出す• elm.click( );// 要素をクリックする•

プロパティを参照する• alert ( elm.style.color ); // 要素に設定されている文字色を表示する•

プロパティに値を設定する• elm.style.color = 'red'; // 要素のスタイルに指定した文字色を設定する
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

要素を選択する方法1•

getElementById … 要素のIDを指定して選択•

getElementsByTagName … 要素名(タグ名)を指定して選択。結果をコレクションとして取得。

•

getElementsByClassName … 要素のクラス名を指定して選択。結果をコレクションとして取得。

•

getElementsByName … 要素のname属性を指定して選択。結果をコレクションとして取得。

18

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

要素を選択する方法2
HTML5で追加されたAPI (出題範囲2.2.4 Selectors API)•

querySelector … CSSと同様のセレクタを指定して選択。該当する文書内の先頭の要素を取得。

•

querySelectorAll … CSSと同様のセレクタを指定して選択。結果をコレクションとして取得。

•

querySelectorの例
WBSFMNEPDVNFOURVFSZ4FMFDUPS UFTUQTBNQMFB 

19

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

DOMオブジェクトのコレクション•

getElementById,querySelector以外の方法で要素を取得した場合、結果が複数になる場合は当然のこと、0個または1個の場合でもコレクションになる•

コレクション内の要素に対してはまとめてメソッドを呼び出すことができないためループ文などを使用する•

コレクションに対する操作の例
WBSFMNTEPDVNFOUHFU&MFNFOUT#Z5BH/BNF MJ 
GPS WBSJJFMNTMFOHUIJ\FMNT<J>TUZMFDPMPSSFE^20

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

要素の親、子要素•

ドキュメント全体から要素を取得する
document.getElementById('sample');documentオブジェクトに対してgetElement*メソッドを呼び出す•取得したDOMオブジェクトの親の要素を取得する
var elm = document.getElementById('sample');var parent = elm.parent;•取得したDOMオブジェクトの子の要素を取得する
var elm = document.getElementById('sample');var children = elm.children;•

DOMオブジェクトの子孫要素を条件を指定して選択することもできる
var elm = document.getElementById('sample');elm.getElementsByTagName( 'li' );21

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

問題1
以下のJavaScriptを実行した際に、変数testsに含まれる要素として正しいものを選択しなさい。
HTML
<div>
<p id="elm"><span class="test">span.test</span></p><a href="#" class="test">p.test</a></div>JavaScript
var elm = document.getElementById('elm');
var tests = elm.parent.getElementsByClassName('test');A. span要素とp要素
B. span要素
C. a要素D. span要素とa要素
22

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

要素の表示/非表示•

displayプロパティを使う方法 (elmは対象の要素のオブジェクト)
非表示にする
elm.style.display = 'none';• 表示する (displayプロパティの値を"none"以外にする)
elm.style.display = 'block';••visibilityプロパティを使う方法• 非表示にする
elm.style.visibility = 'hidden';
•

23

表示する
elm.style.visibility = 'visible';
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

displayとvisibilityの例
display='none'は要素のスペースごと非表示にする
ため、他の要素のレイアウトに影響を与える• visibility='hidden' は要素のスペースは残し、表示だけ見えないようにする
•

elm

初期状態
24

elm.style.display='none' elm.style.visibility='hidden'
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

要素の上書き•

HTML要素のコンテンツ部分を上書きするには、
innerHTMLプロパティを使用する
開始タグと終了タグの間がinnerHTML•

タグまで含むouterHTMLもある

innerHTMLの例<p id="sample">ここが上書きされる</p><script type="text/javascript">
var elm = document.getElementById('sample');elm.innerHTML = '上書き';</script>※上書きする内容がユーザが入力したものならtextContentプロパティを使用するほうが安全。
タグやスクリプトを動作しない形式に自動的に変換してくれる。
25

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

要素の挿入/削除•

26

HTML要素を新しく生成しHTMLドキュメントに追加、または削除するには以下のメソッドを使用する

メソッド

概要

createElement
appendChild

新しくHTML要素を生成する
DOMオブジェクトを指定された要素の子の最後に追加する

insertBefore

DOMオブジェクトを指定された要素の子の指定された位置に挿入する

removeChild

親要素から指定された子要素を削除する

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

要素の挿入/削除の例
VMJEMJTUMJJESFNPWFSFNPWFNFMJVMTDSJQUUZQFUFYUKBWBTDSJQU

結果

MJ⺙✛Ӽ⇰ᘻMJJUFNMJ
WBSMJEPDVNFOUDSFBUF&MFNFOU MJ 
MJBQQFOE$IJME EPDVNFOUDSFBUF5FYU/PEF JUFNMJ⺙✛Ӽ⇰ᘻMJJUFNMJ
WBSMJEPDVNFOUDSFBUF&MFNFOU MJ 
MJBQQFOE$IJME EPDVNFOUDSFBUF5FYU/PEF JUFN

WBSMJTUEPDVNFOUHFU&MFNFOU#Z*E MJTU 
MJTUBQQFOE$IJME MJ VMӘᆵӕMJӼ㈲ౢ
MJTUJOTFSU#FGPSF MJ MJ MJӘనӕMJӼᜀ୾
WBSMJEPDVNFOUHFU&MFNFOU#Z*E SFNPWF 
MJTUSFNPWF$IJME MJ ⺴⺙✛ҵӳᆵ⺙✛Ӽథ㖭ӃӵTDSJQU
27

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

属性の追加、取得、削除•

HTML要素のオブジェクトに対し、属性の追加、削
除と値の取得が行なえる•

id属性やclass属性などを変更した場合、変更後に該当するスタイルがあれば適用される

メソッド
概要
createAttribute 新しく属性を生成する
setAttribute
属性をオブジェクトに追加する
getAttribute
指定した属性の値を取得する
hasAttribute
対象が指定した属性を持つか判別
removeAttribute 対象から指定した属性を削除する

28

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

属性の追加、取得、削除の例
EJWJEUBSHFUTUZMFDPMPSSFE5BSHFUEJWTDSJQUUZQFUFYUKBWBTDSJQUWBSUBSHFUEPDVNFOUHFU&MFNFOU#Z*E UBSHFU ኃᓬӘ⇰ᘻ
WBSBUUSEPDVNFOUDSFBUF"UUSJCVUF DMBTT ኃᓬઙӘ⼀ᇰ
BUUSWBMVFCMVFኃᓬӘ㈲ౢ
UBSHFUTFU"UUSJCVUF/PEF BUUS ኃᓬӘ൐ᒉ
DPOTPMFMPH UBSHFUHFU"UUSJCVUF DMBTTCMVF

ኃᓬӘథ㖭
UBSHFUSFNPWF"UUSJCVUF TUZMF ኃᓬӘ᥶ᾩӘ␼⽇
DPOTPMFMPH UBSHFUIBT"UUSJCVUF TUZMF

GBMTF

TDSJQU29

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

問題2
以下のスクリプトを実行したところエラーが発生した。エラーが発生した
行はどれか。必要なHTML要素は存在するものとする。
WBSUBSHFUEPDVNFOUHFU&MFNFOU#Z*E UBSHFU 
WBSBUUSUBSHFUDSFBUF"UUSJCVUF DMBTT 
BUUSWBMVFCMVFUBSHFUTFU"UUSJCVUF/PEF BUUS "WBSUBSHFUEPDVNFOUHFU&MFNFOU#Z*E UBSHFU #WBSBUUSUBSHFUDSFBUF"UUSJCVUF DMBTT $BUUSWBMVFCMVF%UBSHFUTFU"UUSJCVUF/PEF BUUS 

30

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

フォームの選択

31•

HTMLドキュメント中のform要素は、他の要素と同じく、geteElement
系メソッドの他に、document.forms[n] という記述でも取得できる(※nはform要素の登場順。最初のform要素なら0)•または、form要素にname属性がある場合は、document.forms.属性
値 もしくはdocument.forms[属性値]という記述で取得することもできる•

フォームの選択例<form name="contact"></form><script type="text/javascript">// 以下の結果は同じ
var f1 = document.forms[0];var f2 = document.forms.contact;</script>
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

フォームのデータへのアクセス•

form要素内の入力項目の値にアクセスするには、
formオブジェクトに対して、各入力項目のname属
性の値のプロパティにアクセスする。

•

フォームのデータへのアクセスの例
GPSNOBNFDPOUBDUJOQVUUZQFFNBJMOBNFNBJM
GPSNTDSJQUUZQFUFYUKBWBTDSJQUEPDVNFOUGPSNTDPOUBDUNBJMWBMVFTBNQMFTDSJQU

32

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

フォームデータの検証•

HTML5ではrequired,patternなどの属性による検証も出来るがカス
タマイズ性が乏しい•

HTML5では、JavaScriptを使って簡単にフォームの入力値を検証することができる(制約検証 API)•

要素のvalidityプロパティに入力値の検証結果がセットされている•

setCustomValidityメソッドで独自エラーメッセージを設定できる•

検証の例
GPSNBEE&WFOU-JTUFOFS TVCNJU GVODUJPO FWFOU \JG FNBJMWBMJEJUZWBMJEGBMTF \FNBJMTFU$VTUPN7BMJEJUZ ᱒ӁҮԊԱՔԡӼ୾౟ӁӐҹӊҿҮ ^FMFT\FNBJMTFU$VTUPN7BMJEJUZ  ԐՑդՉԫԣդԠӼԗՒԊ
^
^ 

33

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

サブミットの中止•

フォームに対してonSubmitイベントのイベントリスナを設定することで、フォームのSubmitを中断することができる•

サブミットの中止の例
document.forms[0].addEventListener('submit',function(event){
event.preventDefault(); // デフォルト動作を中止させるメソッド
});

•

34

addEventListenerを使用する場合、return false;で中止する手法は使えない
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

問題3
HTML中に以下の2つのフォームがあるとき、問い合わせフォー
ムを取得しないスクリプトを選びなさい<form name="search" id="search">
サイト検索</form><form name="contact" id="contact">
問い合わせフォーム</form>A. document.forms.contact
B. document.forms[0]C. document.forms[1]D. document.getElementById('contact')
35

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

2.2.1イベント
知識問題 コードリーティング問題 記述問題

36

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

イベントとは

37•

JavaScriptの実行の切っ掛けになるもの•

イベントが発生すると、事前に設定していた
JavaScriptのプログラムを実行させることができる•

マウスでボタンがクリックされた、キー入力された、
スマートフォンの画面がタッチされた、などユーザーの操作によるイベントの他、HTMLファイルが読み込まれて表示の準備が出来たというようなイベントも用意されている
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

イベントリスナ•

HTML要素でイベントが発生した際に、プログラムが呼び出される仕組みのひとつをイベントリスナと言う•ひとつのイベントに複数のイベントリスナを同時に設定できる•

イベントリスナは追加 (addEventListenerメソッド),削除(removeEventListenerメソッド)をプログラムから行なう•

追加したイベントリスナをクリックなどのユーザ操作を必要とせずにdispatchEventメソッドでプログラムから実行させることができる

38

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

イベントリスナの例ԌՁ՛԰ՒԡԲӼ⼀ᇰӃӵ)5.-⺙✛ӘԒԾԠԏԗ԰Ӽ൐ᒉ
WBSUBSHFUEPDVNFOUHFU&MFNFOU#Z*E UBSHFU ԌՁ՛԰ՒԡԲҵӳහӝ௲ҿӶӵ㕉ᡔ
GVODUJPODMJDLFE FWFOU \DPOTPMFMPH DMJDL 
イベント名
^

関数

ԒԾԠԏԗ԰ӕԌՁ՛԰ՒԡԲӼ㈲ౢ
UBSHFUBEE&WFOU-JTUFOFS DMJDL DMJDLFE ԌՁ՛԰Ӽᐽఙ⋵ӕ⋬⇰ҿӅӵ
UBSHFUEJTQBUDI&WFOU OFX&WFOU DMJDL

新しいclickイベントを作るԒԾԠԏԗ԰ҵӳԌՁ՛԰ՒԡԲӼథ㖭
UBSHFUSFNPWF&WFOU-JTUFOFS DMJDL DMJDLFE 

イベント名
39

関数
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

イベントの発生順

40•

WebブラウザがHTMLファイルを読み込む際にもイベントが発生する•

DOMContentLoaded … HTMLの読み込みと解析が完了したら発生する。画像やスタイルシートな
どの読み込みは待たない•

load … HTML解析後に画像などのリソースが読み込み終わったら発生する•

DOMContentLoadedの後、loadイベントが発生する
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

問題4以下のa要素がクリックされたらスクリプトを実行したい。正しい記述を選択しな
さい。
<a href="#" id="btn">ボタン</a>A.
document.getElementById('btn').addEventListener('click',function(event){/* スクリプトを記述 */});B.
document.getElementById('a').addEventListener('click',function(event){/* スクリプトを記述 */});C.
document.getElementById('btn').addEventListener('onclick',function(event){/* スクリプトを記述 */});41

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

マウスイベント•

マウスイベントでは、マウスの位置、ボタンの情報などを取得できるイベント
onclick
ondblclick

要素がクリックされた要素がダブルクリックされた

onmousedown

要素の上でマウスのボタンが押された

onmousemove

要素の上でマウスカーソルが移動した

onmouseout

要素の上からマウスカーソルが外れた

onmouseover

要素の上にマウスカーソルが入った

onmouseup

要素の上でマウスのボタンが離された

onmousewheel
onscroll
42

概要

要素の上でマウスのホイールが操作された要素がスクロールした
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

マウスイベントの例
WBSUBSHFUEPDVNFOUHFU&MFNFOU#Z*E UBSHFU ⺙✛ҶԗՒԫԗҿӶӉӳᇴ⷗ҿӶӵ
UBSHFUBEE&WFOU-JTUFOFS DMJDL GVODUJPO FWFOU \ՕդԓՓᏍᮏӑӘՆԎԡԓդԥՓӘ৴⡕DPOTPMFMPH FWFOUDMJFOU9  FWFOUDMJFOU: ԱԕՍՉ՛԰஁৺ӑӘՆԎԡԓդԥՓӘ৴⡕DPOTPMFMPH FWFOUQBHF9  FWFOUQBHF: ^ ӇӘতӕӬՄԧ՛Ӯ੫㝉ԕդӘ⁾ᖸӔӓӬ൐ᒉӑҷӵ43

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

キーボードイベント•

キーボードイベントはinput要素やtextarea要素以外にも設定できる•

キーを押して離した場合、onkeydown,
onkeypress, onkeyupの順に発生する•

どのキーが押されたかはKeyboardEventオブジェクトのkeyプロパティで取得できる•修飾キーの状態は、metaKeyプロパティ、shiftKey
プロパティ、ctrlKeyプロパティから取得できる

44

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

フォームイベント•

form要素とinput,textarea,select要素に関するイベント

イベント
概要
onfocus
要素が入力を受けとる状態(フォーカス)になった
onblur
要素がフォーカスを失なった
onchange
input,textarea,select要素の値が変化した
oninput
テキストフィールドに入力があった
onselect
テキストフィールドのテキストが選択された
onformchange フォームの内容が変更された(現行規格では削除)
onforminput
フォームの内容が入力された(現行規格では削除)
onsubmit
送信ボタン(type="submit")が押された
oninvalid
入力欄に不正な値があり送信に失敗した
oncontextmenu マウスの右ボタンが押された
45

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

問題5
マウスの左ボタンを押した際に発生するイ
ベントとして正しいものを選択しなさい。
A. onmouseup
B. onmouseleft
C. onmousedown
D. onclick46

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

ドラッグ&ドロップイベント
ドラッグされる要素のイベント
イベント

概要

ondragstart

ドラッグ開始ondragドラッグ中ondragend

ドラッグ終了

ドロップされる領域の要素のイベント
イベント
ondragenter

ドラッグしている要素がドロップ領域に入った

ondragleave

ドラッグしている要素がドロップ領域から出た

ondragover

ドラッグしている要素がドロップ領域にある

ondrop47

概要

ドラッグしている要素がドロップ領域にドロップされた
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

ドラッグ&ドロップの例1
ԱՑԫԘҿӶӵ⺙✛ӕ㕉ӃӵԌՁ՛԰WBSCPYEPDVNFOUHFU&MFNFOU#Z*E CPY 
CPYBEE&WFOU-JTUFOFS ESBHTUBSU GVODUJPO FWFOU \DPOTPMFMPH ESBHTUBSU FWFOUEBUB5SBOTGFSTFU%BUB UFYUQMBJO ԯդԧ ^ 
CPYBEE&WFOU-JTUFOFS ESBH GVODUJPO FWFOU \DPOTPMFMPH ESBH ^ 
CPYBEE&WFOU-JTUFOFS ESBHFOE GVODUJPO FWFOU \DPOTPMFMPH ESBHFOE ^ 

48

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

ドラッグ&ドロップの例2
ԱՕԫԿҿӶӵ㛗࿋ӕ㕉ӃӵԌՁ՛԰
WBSBSFBEPDVNFOUHFU&MFNFOU#Z*E ESPQBSFB 
BSFBBEE&WFOU-JTUFOFS ESBHFOUFS GVODUJPO FWFOU \DPOTPMFMPH ESBHFOUFS ^ 
BSFBBEE&WFOU-JTUFOFS ESBHPWFS GVODUJPO FWFOU \FWFOUQSFWFOU%FGBVMU ᒁӘ௡ⅈӼԕՋ՛ԣՓӁӔҮӒPOESPQҶ⋬⇰ӁӔҮDPOTPMFMPH ESBHPWFS ^ 
BSFBBEE&WFOU-JTUFOFS ESBHMFBWF GVODUJPO FWFOU \DPOTPMFMPH ESBHMFBWF ^ 
BSFBBEE&WFOU-JTUFOFS ESPQ GVODUJPO FWFOU \FWFOUQSFWFOU%FGBVMU ᒁӘ௡ⅈӼԕՋ՛ԣՓӁӔҮӒఌՂդԠӕ┅ಌӃӵDPOTPMFMPH ESPQ ^ 

49

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

タッチイベント•

スマートフォン、タブレットやタッチ対応PCなど
では、タッチイベントを使用することができる•

マウスイベントと異なり、マルチタッチ対応のため、複数のタッチ情報を扱う
イベント

50

概要

touchstart

指が画面にタッチした(開始)

touchmove

タッチしている場所の移動

touchend

指が離れた(終了)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

タッチイベントの例
ӜӒӎӫӘԧԫԩ৴⡕ӘөӼ ҰਦXJOEPXBEE&WFOU-JTUFOFS UPVDITUBSU GVODUJPO FWFOU \WBSUPVDIFWFOUDIBOHFE5PVDIFT<>
DPOTPMFMPH TUBSU UPVDIQBHF9  UPVDIQBHF: ^ 
XJOEPXBEE&WFOU-JTUFOFS UPVDINPWF GVODUJPO FWFOU \WBSUPVDIFWFOUDIBOHFE5PVDIFT<>
DPOTPMFMPH NPWF UPVDIQBHF9  UPVDIQBHF: ^ 
XJOEPXBEE&WFOU-JTUFOFS UPVDIFOE GVODUJPO FWFOU \DPOTPMFMPH FOE ^ 

51

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

マウスイベントとタッチイベント•

マウスイベントとタッチイベントの両方に対応する
場合、イベント発生の順番が問題になる
1. touchstart
2. touchmove(移動していれば)
3. touchend
4. mousemove(移動していれば)
5. mousedown
6. mouseup
7. click•touchイベントが動作中にキャンセルされた場合、続くmosue
イベントおよびclickイベントは発生しない

52

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

スマートフォンの回転イベント•

Screen Orientation API(2018.10.12時点でドラフト)によってデバイスの向きを取得できる•デバイスの向きが変化した際にscreen.orientation.onchange
イベントが発生する•

screen.orientation.typeで向きを表わす文字列、screen.orientation.angleで角度を取得できるtype portrait-primary
0
angle
53

landscape-primarylandscape-primary90

270
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

カスタムイベント•

カスタムイベントを使うとイベントを自分で定義するこ
とができる

•

通常の関数呼び出しと異なり、イベント処理として管理を一元化できる(ひとつのイベントに簡単に複数のイベントリスナを設定できるなど)•

54

var event = new Event('custom');
elm.addEventListener('custom',function( ){ alert('custom'); });elm.dispatchEvent(event); // イベントを発生させる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

問題6
ひとつの操作に対するイベントの発生順として正しいものを選択しなさい
A. mousedown - touchstart - click
B. click - mouseup - touchend
C. touchend - mouseup - click
D. mouseup - mousedown - click55

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

本日の内容• 試験概要• JavaScriptの基本

2.2.2ドキュメントオブジェクト/DOM
2.2.1 イベント
•イベントの発生順• 要素の親、子要素•フォームイベント• 要素の表示/非表示•キーボードイベント• 要素の上書き•マウスイベント• 要素の挿入/削除•タッチイベント• 属性の追加、取得、削除•その他のイベント• フォームのデータ、検証•イベントリスナ•
56

フォームのサブミットの中止
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.

問題の解答57•

問題1: D / idが"elm"であるp要素の親の子孫のうち、classが"test"の要素はspanとa。

•

問題2: B / createAttributeメソッドやcreateElementメソッドは
documentオブジェクトにしかない。

•

問題3: B / フォームの取得は登場順にインデックスを0から数える。

•

問題4: A / getElementByIdには'btn',イベント名はonを取り払った'click'を指定する。

•

問題5: C / ボタンの左右に係わらず、onmousedownイベントが発生する。ounmouseup,clickはボタンを離したときに発生する。

•

問題6: C / touch系、mouse系、clickの順で発生する。Dはdown,upの順が正しい。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/©LPI-Japan 2018. All rights reserved.