LPI-Japan HTML5 認定教材

HTML5 プロフェッショナル認定資格

レベル２ 教科書

NTT ソフトウェア株式会社［著］

目 次

1.JavaScript ............................................................... - 1 - 1.1 Javascript の文法 ........................................................................... - 2 -

変数 ....................................................................................................................................... - 2 -

型 ........................................................................................................................................... - 4 -

型変換 ................................................................................................................................... - 6 -

変数のスコープ ................................................................................................................... - 8 -

特殊数値 ............................................................................................................................. - 10 -

Strict モード ...................................................................................................................... - 11 -

ガーベージコレクション .................................................................................................. - 13 -

式 ......................................................................................................................................... - 13 -

制御文 ................................................................................................................................. - 24 -

..................................................................................................................................... - 31 -

オブジェクト ..................................................................................................................... - 39 -

関数 ..................................................................................................................................... - 45 -

グローバルオブジェクトと Call オブジェクト ............................................................. - 49 -

変数の探し方(名前解決) .................................................................................................. - 49 -

with 文 ................................................................................................................................ - 51 -

クロージャ ......................................................................................................................... - 52 -

グローバルオブジェクト .................................................................................................. - 53 -

グローバル関数 ................................................................................................................. - 55 -

Math オブジェクト ........................................................................................................... - 58 -

2.Web ブラウザにおける JavaScriptAPI ......................... - 61 -

2.1 イベント ..................................................................................... - 61 -

イベント ............................................................................................................................. - 62 -

2.2 ドキュメントオブジェクト/DOM ...................................................... - 74 -

DOM とは ........................................................................................................................... - 74 -

ノードとは ......................................................................................................................... - 75 -

DOM による操作(取得) .................................................................................................... - 76 -

DOM による操作(生成・追加・削除) ............................................................................ - 84 -

属性の追加・削除・取得 .................................................................................................. - 90 -

2.3 ウィンドウオブジェクト ................................................................. - 95 -

ウィンドウオブジェクトとは .......................................................................................... - 95 -

2.4 セレクタ API(Selectors API) ........................................................ - 101 -

セレクタ(selector)とは ................................................................................................. - 101 -

セレクタ API(selector API)とは ................................................................................. - 102 -

2.5 テスト・デバッグ ........................................................................ - 104 -

3.グラフィックス ....................................................... - 110 -

3.1 Canvas(2D) .............................................................................. - 110 -

3.2 SVG ......................................................................................... - 116 -

4.マルチメディア ....................................................... - 119 -

4.1 audio 要素,video 要素 .................................................................. - 119 -

5.オフラインアプリケーション API ................................ - 125 -

5.1 アプリケーションキャッシュの制御 ................................................. - 125 -

6.Session History and Navigation ............................ - 128 -

6.1 History API ............................................................................... - 128 -

7.表示 ...................................................................... - 131 -

7.1 Page Visibility ........................................................................... - 131 -

7.2 Timing control for script-based animations ................................... - 132 -

8.ストレージ ............................................................. - 135 -

8.1 Web Storage ............................................................................. - 135 -

8.2 Indexed Database API ................................................................ - 138 -

8.3 File API .................................................................................... - 144 -

9.通信 ...................................................................... - 148 -

9.1 WebSocket ............................................................................... - 148 -

WebSocket オブジェクト ............................................................................................. - 148 -

9.2 XMLHttpRequest ....................................................................... - 152 -

10.Geolocation API ................................................. - 158 -

10.1 Geolocation API の基本と位置情報の取得 ....................................... - 158 -

11.Web Workers ..................................................... - 163 -

11.1 の記述 ......................................................................... - 163 -

12.パフォーマンス ..................................................... - 167 -

12.1 Navigation Timing ................................................................... - 167 -

12.2 High Resolution Time ............................................................... - 169 -

問題集 ...................................................................... - 171 -

問題集解答 ................................................................ - 192 -

- 61 -

2.Web ブラウザにおけるJavaScriptAPI

JavaScript の主要な用途となる Web ブラウザ上での JavaScript 用について取り上 ます。

JavaScript を用いることで、Web ブラウザに かを表示したり、 用 のクリック操作に

するなど、Web ブラウザと 用 のインタラクションを記述することが可能になります。

2.1 イベント 【 要 :8】 【出題種別】 - 知 問題 - コードリーティング問題 - 記述問題 Web ブラウザと 用 のインタラクションの には以下の要素があります。 • イベント • イベントハンドラ • イベントリスナ イベントとはキーが押された、フォームの内容が変 された、スクロールされた等、ブラウザ

上での契機(イベント)のことです。 イベントに して実 される をイベントハンドラといいます。イベントハンドラは一つのイベントに複数定義することはできません。 イベントリスナもイベントハンドラと同様に、イベントに して実 される です。イベントハンドラと

なり、一つのイベントに複数定義することができます。 階層構造を持つ HTML では、下位の要素(タグ)で発生したイベントは上位の要素にも伝搬され

ます。 これらの要素が関 し、イベントに して が実 される 態をイベントドリブンモデル

といいます。

題では DOM やウィンドウオブジェクトが出てきます。DOM とは HTML や XML 等を操作するための API です。詳しくは「2.2 ドキュメントオブジェクト/DOM」で説明します。また、ウィンドウオブジェクトはブラウザで表示されるウィンドウのオブジェクトです。こちらも詳しくは 「2.3 ウィンドウオブジェクト」で説明します。

- 62 -

｜イベント イベントには扱われるオブジェクトにより以下のものがあります。

• ウィンドウイベント • フォームイベント • キーボードイベント • マウスイベント • タッチイベント

ウィンドウイベント(Window オブジェクト) ウィンドウイベントとはブラウザのボタンが押された、ページが遷移した等、ウィンドウの状

態が変化した場合に発生します。 ウィンドウイベントを表 2.1-1 に示します。 表 2.1-1 ウィンドウイベント

イベント名 意味

onafterprint 印刷直後

onbeforeprint 印刷直前

onbeforeunload Web ページ遷移直前

onblur フォーカスが外れた

onerror JavaScript エラーが発生

onfocus フォーカスされた

onhashchang URL のハッシュ('#"以降)が変更

onload Web ページ読み込み完了(キャッシュの場合は対象外)

onmessage メッセージを受信

onoffline ネットワーク環境がオンラインからオフラインに変更

ononline ネットワーク環境がオフラインからオンラインに変更

onpagehide 他のページへの遷移などで元のページが隠された

onpageshow Web ページ読み込み完了(キャッシュの場合も対象)

onpopstate 戻る・進むボタンで URL 履歴(state)から履歴が取り出された

onredo やり直す(redo)ボタンが押された

- 63 -

onresize Window のサイズが変更された

onstorage ローカルストレージもしくはセッションストレージが変更された

onundo やり直す(undo)ボタンが押された

onunload 他ページに移動した(キャッシュの場合は対象外)

フォームイベント(フォームオブジェクト) フォームイベントとは、フォーム上にマウスポインタを せた、フォームに された等、ブ

ラウザ上のフォームの状態が変化した場合に発生します。 フォームイベントを表 2.1-2 に示します。

表 2.1-2 フォームイベント

イベント名 意味

onblur フォーカスが外れた

onchange 変更された

onfocus フォーカスされた

onformchange フォームの値が変更された

onforminput フォームの値が入力された

oninput テキスト要素に入力された

oninvalid 要素の無効な値が入力された

onselect 要素が選択された

onsubmit 送信(submit)ボタンが押された

onsubmit イベントを契機にフォームの をチェックし、 が い場合は送信を中止するを示します。 <html>

<head>

<script type="text/javascript">

function validForm() {

// 入力をチェック

if(document.form1.name.value == "") {

- 64 -

alert("no name!");

return false; // false を返却し送信を中止させる

} else {

return true;

}

}

</script>

</head>

<body>

<form name="form1" action="dummy" onsubmit="return validForm();">

<input type="text" name="name">

<input type="submit">

</form>

</body>

</html>

form タグ中の onsubmit="return validForm()がポイントとなります。 ハンドラからの戻り

値が false の場合は submit を中止します。true の場合は submit を実 して存在しないURL(dummy)に送信しようとして失敗します。

キーボードイベント キーボードイベントとは、キーを押す等、キーボードの状態が変化した場合に発生します。 キーボードイベントを表 2.1-3 に示します。 表 2.1-3 キーボードイベント イベント名 意味

onkeydown キーが押された

onkeypress キーが押して離された

onkeyup キーが離された

- 65 -

マウスイベント マウスイベントとは、マウスのボタンを押す、マウスでドラッグする等、マウスの状態が変化

した場合に発生します。 マウスイベントを表 2.1-4 に示します。 表 2.1-4 マウスイベント

イベント名 意味

onclick ボタンがクリックされた

oncontextmenu マウスの右ボタンが押された

ondblclick ボタンがダブルクリックされた

ondrag ドラッグされた

ondragend ドラッグが終わった

ondragenter ドロップ目標にドラッグされた

ondragleave ドロップ目標からドラッグが外れた

ondragover ドロップ目標上にドラッグされている

ondragstart ドラッグが開始された

ondrop ドロップ目標にドラッグがドロップされた

onmousedown ボタンが押された

onmousemove マウスポインタが移動された

onmouseout マウスポインタが要素から外れた

onmouseover マウスポインタが要素上に入った

onmouseup ボタンを離した

onmousewheel マウスホイールを回転させた

onscroll スクロールバーを操作した

タッチイベント タッチイベントとは、タッチパネルの画面を触る等、タッチパネルの状態が変化した場合に発

生します。 タッチイベントを表 2.1-5 に示します。

- 66 -

表 2.1-5 タッチイベント イベント名 意味

touchstart 指が置かれた

touchmove 指がドラッグされた

touchend 指が離れた

ドラッグ&ドロップイベントの の

のポイントは以下となります。 � ドラッグする要素に draggable 属性を設定 � ドラッグする要素にドラッグ開始時のハンドラを設定 � ハンドラにドラッグに した を記述

以下にドラッグ＆ドロップのサンプルコードを示します。 【COIN】と表示された文字をドラッグ、■BOX■と表示された文字上にドロップすると、ド

ラッグ時のデータの 別 がハンドラ間で引き がれ、Status という文字 が変化します。 <!DOCTYPE html>

<html lang="ja">

<head>

<meta charset=utf-8>

<title>ドラッグ＆ドロップのサンプル</title>

<script>

function dragHandler(event){ // ドラッグ時のハンドラ

// 動作結果表示用のオブジェクトを取得

var pElement = document.getElementById("disp");

// ドラッグするデータの識別子を DataTransfer オブジェクトにセット

event.dataTransfer.setData("text", "COIN");

// 動作結果を表示

- 67 -

pElement.innerHTML = "dragged !";

}

function dropHandler(event){ //ドロップ時のハンドラ

// 動作結果表示用のオブジェクトを取得

var pElement = document.getElementById("disp");

// ドロップされたデータの識別子("COIN")を取得

id = event.dataTransfer.getData('text');

// 動作結果表示

pElement.innerHTML = id + " dropped !";

// イベントをキャンセルしてハンドラを終了

event.preventDefault();

}

</script>

</head>

<body>

<!-- ドラッグ元のフォームにドラッグに対するハンドラを定義 -->

<div id="from" draggable="true" ondragstart = "dragHandler(event);">

<p>【COIN】</p>

</div>

<p>

<!-- ドラッグ先のフォームにドラッグに対するハンドラを定義 -->

<div id="to" ondragover="event.preventDefault();" ondrop="dropHandler(event);">

<p>■BOX■</p>

</div>

<p id = "disp"> status </p>

</body>

</html>

- 148 -

9.通信

9.1 WebSocket 【 要 :2】 【出題種別】- 知 問題 従来の HTTP 通信が苦手とするサーバ・クライアント間での双方向通信を WebSocket では実

現しています(従来の HTTP 通信を 用しての双方向通信は 可能ではありませんが複 であったり、オーバヘッドが大きかったりします)。WebSocket プロトコルは RFC6455 で標準化されています。

図 9.1-1 従来の HTTP 通信と WebSocket 通信の違い

WebSocket のクライアント側 API は以下のようになります。

｜WebSocket オブジェクト WebSocket を表すオブジェクト。 以下のコンストラクタで作成されます。 WebSocket(url, protocols)

- 149 -

なお、オブジェクト生成のタイミングでリモートの WebSocket サーバとのコネクションを開始します。 第 1 引数である url では接続するサーバの URL を指定します(必須パラメタ)。第 2 引数である protocols(オプションパラメタ)はクライアント側から送る WebSocket サブプロトコルであり、サーバとの間での通信内容を通信開始前に交換する目的を持っています。

図 9.1-2 WebSocket 通信の詳細

表 9.1-1 WebSocket のプロパティ

プロパティ 説明

url WebSocket オブジェクトが接続している URL を示します。

readyState コネクション状態を示します。取りうる状態を表 9.1-2 に示します。

bufferedAmount WebSocket オブジェクト内にバッファされているデータのサイズを示しま

す。この値が０である場合にはプログラムから送信指示があったデータは

ネットワークに送信されている状態であることを示します。

以下の では、WebSocket コネクションを 後、50ms 周期で bufferedAmount の値をチ

ェックし、その値が 0(送信データがバッファされていない)の場合に、新たなデータ送信を試み

- 150 -

ています。 var socket = new WebSocket('ws://game.example.com:12010/updates');

socket.onopen = function () {

setInterval(function() {

if (socket.bufferedAmount == 0)

socket.send(getUpdateData());

}, 50);

};

表 9.1-2 readyState の詳細 readyState 説明

CONNECTING コネクション確立中です。

OPEN WebSocket コネクションが確立済みであり、サーバとの通信が可能です。

CLOSING コネクションが切断中あるいは close()メソッドがコールされました。

CLOSED コネクション切断済みです。あるいはコネクション確立しようとして失敗し

ました。

表 9.1-3 WebSocket のメソッド

メソッド 説明

send() サーバとの間で確立したコネクションにデータを送信します。

close() サーバと確立したコネクションを切断します。

表 9.1-4 WebSocket のイベント イベント 説明

onopen サーバとの間でコネクション確立成功時にコールバックされます。

onmessage サーバから新たなメッセージが届いた時にコールバックされます。

onerror エラー発生時にコールバックされます。

onclose コネクションがクローズされた場合にコールバックされます。

上記をまとめると、サンプルコードとしては以下のようになります。(注：現状適当なサイトか

らコピー。 修正必要)

- 151 -

// WebSocket オブジェクトの生成(WebSocket サーバの URL を指定)

var ws;

ws = new WebSocket(url);

// コネクションオープン時のコールバック関数登録

ws.onopen = function(){

console.log("コネクションオープン");

}

// エラー発生時のコールバック関数登録

ws.onerror() = function(error){

console.log("エラー発生": + error);

}

// コネクションクローズ時のコールバック関数登録

ws.onclose() = function(event){

// 切断が完全に完了したかどうか

if(event.wasClean){

var closed = "完了";

} else {

var closed = "未完了";

}

console.log("切断処理："+ closed);

console.log("コード："+ event.code);

console.log("理由："+ event.reason);

}

// メッセージ受信時のコールバック関数登録

ws.onmessage = function(evt){

console.log("受信メッセージ:" + evt.data);

}

// メッセージ送信

function Send(message){

ws.send(message.value);

console.log("送信メッセージ:" + message.value);

}

// 終了時に明示的に接続を閉じる

window.onunload = function(){

var code = 4000;

var reason = "クライアントが閉じられました。";

- 152 -

ws.close(code,reason);

}

WebSocket の詳細な仕様は以下を参照して下さい。 「The WebSocket API」 http://www.w3.org/TR/websockets/

9.2 XMLHttpRequest 【 要 :4】 【出題種別】- 知 問題 - コードリーティング問題 XMLHttpRequest は、Web ブラウザ搭載のスクリプト言語( 、JavaScript)から呼び出し可

能な HTTP 通信を提供する API です。本オブジェクトを 用することにより、スクリプトがHTTP サーバと通信を うことが可能となります。すでに み ん ページから画面遷移をともなわずに、さらに HTTP リクエストを送信することができます。この を 用したものをAjax と呼ぶこともあり、Single Page Application(SPA)の実現に 用されたりもしています。 XMLHttpRequest には歴史的に LEVEL1 と呼ばれるものと LEVEL2 と呼ばれるものが存在し

ます。LEVEL2 は LEVEL1 と後方互換するように設計・実装されています。大きな機能の違いとしては LEVEL2 ではクロスドメイン間通信が えることが られます。

- 153 -

図 9.2-1 XMLHttpRequest を 用した通信の れ

表 9.2-1 XMLHttpRequest のプロパティ(リクエスト／レスポンスで共通) プロパティ 説明

readyState コネクション状態を示します。取りうる状態を次の表に示します。

表 9.2-2 readyState の詳細(リクエスト／レスポンスで共通)

readyState 説明

UNSENT XMLHttpRequest オブジェクトが正常に生成されました。

OPENED open()メソッドが成功しました。この状態では setRequestHeader()メ

ソッドで追加ヘッダを設定できます。また、send()オブジェクトにより

HTTP リクエストをサーバに送信することができます。

HEADERS_RECEIVED すべてのリダイレクションが終了し、最終応答に関するヘッダを受信し

ました。オブジェクトのいくつかのメンバについてはアクセス可能な状

態になっています。

LOADING レスポンスボディを受信しました。

- 154 -

DONE データ転送が完了しました。あるいは転送中に異常状態(例.無限リダイ

レクト)に遭遇して中止しました。

表 9.2-3 XMLHttpRequest のイベント(リクエスト／レスポンスで共通)

イベント 説明

onreadystatechange コネクション状態に変化が生じたことを示すコールバック。

表 9.2-4 XMLHttpRequest のプロパティ(リクエスト)

プロパティ 説明

timeout

(LEVEL2 以降)

リクエストのタイムアウト時間(ミリ秒)。デフォルト値は 0。この場

合、タイムアウトしません。

withCredentials

(LEVEL2 以降)

true/false の 2 値をとります。デフォルト値は false。クロスドメイン

通信時にユーザの認証情報を含める場合には true を設定します。

upload

(LEVEL2 以降)

この XMLHttpRequest オブジェクトに関連付けられた

XMLHttpRequestUpload オブジェクトを返します。このオブジェクトはク

ライアントからサーバ方向へのデータ送信(POST メソッドで大きなデー

タを送信する)等の場合に利用します。

表 9.2-5 XMLHttpRequest のメソッド(リクエスト)

メソッド 説明

open() リクエストメソッド(GET,POST 等)、リクエスト URL(例

http://www.foo.com)、非同期フラグ、ユーザ名、ユーザパスワード

を設定します。

setRequestHeader() リクエストヘッダを追加します。

send() リクエストをサーバに送信します。オプションパラメタとしてサー

バに送信するボディを引数として指定することが可能です。

abort() 通信を中止(アボート)します。

表 9.2-6 XMLHttpRequest のプロパティ(レスポンス)

プロパティ 説明

status HTTP レスポンスのステータスコード(200,401 等)を返します。

statusText HTTP レスポンスのステータステキスト(OK,Not Found 等)を返します。

- 155 -

responseType

(LEVEL2 以降)

レスポンスタイプを返します。

response

(LEVEL2 以降)

HTTP レスポンスに含まれるレスポンスボディを返します。

responseText レスポンスボディをテキスト形式で返します。

responseXML レスポンスボディを XML 形式で返します。

表 9.2-7 XMLHttpRequest のメソッド(レスポンス)

メソッド 説明

getResponseHeader() Cookie 関連以外で、HTTP レスポンスヘッダ内で、引数で指定さ

れた名前を持つヘッダの値を返します。

getAllResponseHeaders() Cookie 関連以外のすべてのヘッダを返却します。

overrideMimeType()

(LEVEL2 以降)

Content-Type ヘッダを上書きします。

以下は LEVEL2 で追加されたイベントです。LEVLE1 では onstatechange のみ提供されてい

ましたが、より細かい状態の取得が可能となりました。また、クライアントからサーバ方向のデータ送信の状態についても、イベント通知が われるようになりました(LEVEL1 ではサーバからクライアント方向への情報伝達のみがイベントとして通知される仕様でした)。 表 9.2-8 XMLHttpRequest Level2 で追加されたイベント

イベント 説明

loadstart リクエストを開始しました。

progress データを送信(あるいは受信)中です。

abort リクエストが中止されました。例えば、abort()メソッドにより明示的にリク

エストを中止した場合にもこのイベントが通知されます。

error リクエストがエラーとなりました。

load リクエストが正常に完了しました。

timeout リクエストがタイムアウトしました。

loadend リクエストが(正常・異常を問わず)完了しました。

上記を踏まえたサンプルコードを以下に示します。

- 156 -

function processData(data) {

// 受信したデータの中身の処理(割愛)

}

function handler() {

if(this.readyState == this.DONE) {

if(this.status == 200 &&

this.responseXML != null &&

this.responseXML.getElementById('test').textContent) {

// readyState が DONE(転送完了)で status が 200(成功)で responseXML が

// null でなく、responseXML の中に test という名の要素を含み、そのテキスト表現が

// null でない場合に成功とみなす。

processData(this.responseXML.getElementById('test').textContent);

return;

// responseXML の中の test 要素のテキスト表現を引数に processData 関数を呼び出し、関数

を return する。

}

// something went wrong

// このルートに入っている場合には処理結果が異常となっている

processData(null);

// processData 関数は引数を null として呼び出す。

}

}

// XMLHttpRequest オブジェクトの生成

var client = new XMLHttpRequest();

// onreadystatechange(状態変更)イベント発生時のハンドラを設定

client.onreadystatechange = handler;

// 利用メソッド(GET)の設定、リクエスト URL の設定

client.open("GET", "unicorn.xml");

// リクエストの送信

client.send();

// もしもサーバにログを送信する目的だけの場合は以下のようなサンプルとなる(上記サンプル

とは独立)

function log(message) {

var client = new XMLHttpRequest();

client.open("POST", "/log");

- 157 -

client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");

client.send(message);

}

// あるいはサーバ上のドキュメント状態を知りたいだけの場合は以下のようなサンプルとなる

(上記サンプルとは独立)

function fetchStatus(address) {

var client = new XMLHttpRequest();

client.onreadystatechange = function() {

if(this.readyState == this.DONE)

returnStatus(this.status);

}

client.open("HEAD", address);

client.send();

}

XMLHttpRequest(Level1)の詳細な仕様は以下を参照して下さい。 「XMLHttpRequest」 http://www.w3.org/TR/XMLHttpRequest1/

XMLHttpRequest(Level2)の詳細な仕様は以下を参照して下さい。 「XMLHttpRequest Level 2」 http://www.w3.org/TR/XMLHttpRequest2/