HTML5プロフェッショナル認定試験 レベル2ポイント解説無料セミナー

HTML5

ョ

認定試験

ベ

2

ポ ン 解説無料セミ ー

株式会社富士通 ー ン メ

抜山雄一

設立

1977

年

6

月

30

日

資本金

3

億円 全額

富士通株式会社

売上高

81

億円

2014

年度

従業員

427

名

2016

年

3

月末現在

事業内容

人材育成・研修 ー

(

公開 ー

1,250

ー

年間

80,000

名受講

個人

客様向

ン教室 富士通 ー ン

関係会社

株式会社富士通 ー ン

沖縄 研修 ー

・研修 ー

ー

株式会社富士通 ー ン

・ タ

人材派遣

出資会社

株式会社

・

ーン・

開発

事業所

関連施設

東京・名古屋・大阪・沖縄

5

拠点 約

40

教室

900

名以上 定員数

富士通 ー ン メ

紹介

．会社概要

関西事業所

/LC

品川

LC

名古屋事業所

/LC

品川本社

沖縄事業所

/LC

．富士通 ー ン メ

が目指す

ICT

人材を支え 人材育成

ー

ー あ

け

JavaScript



Ecma International

び

W3C

標準化

JavaScript

基本文法

Ecma International

標準化

い

ECMA-262

DOM API

Web API

W3C

標準化 担当

間 互換性 あ 程度

保

い



動的型付

言語

言語 あ

ン

不要

ー

言語

PHP

同様 動的

型付

あ



ン

ー

実行可能

JavaScript

Web

ー

閲覧

い

上

ン

実行

Node.js

実行 ン ン 使用

Web

ー 上

ー

実

行可能

JavaScript

ー ョン



ECMAScript 3

1999

年

12

月公開

try-catch

例外処理 正規表現

追加



ECMAScript 5

2009

年

12

月公開

2011

年

改訂版

5.1

公開

strict

ー

JSON

追加



ECMAScript 6

2015

2015

年

6

月公開

ー

ー演算子

追加 本 ー

ン以降

ー

ン名

公開時 西暦 採用

1

年

新 ー

ン 公開

予定

試験範囲

ECMAScript 5.1

追加

文法

!!

ECMAScript2015

使う時

対応状況 注意

参考 最新技術を使うため

1

Can I use

<<http://caniuse.com/>>

参考 最新技術を使うため

2

Mozilla Developer Network

<<https://developer.mozilla.org/ja/>>

参考 最新技術を使うため

3

TypeScript

<<http://www.typescriptlang.org/>>

JavaScript

ンタ

ー

ECMAScript2015

記述

ー

ー

開発 ー

タ編

Atom

<<https://atom.io/>>

Brackets

<<http://brackets.io/>>

Visual Studio Code

開発 ー

編

各種

F12

ー 押

開発 ー

開

2.1.1 JavaScript

文法

2.1.1 JavaScript

文法

重要度

★★★★★★★★★★

10

出題種別

•

知識問題

•

ー

ー

ン 問題

•

記述問題

説明 望

•

JavaScript

概要

•

演算子

•

配列

•

制御文

•

関数

•

型・

•

型

分類

型

値例

ネ

string

'LPI', "FLM"

number

10, 20

boolean

true, false

object

new String("")

1.

var str1 = "FLM";

//

型

2. var str2 = new String("LPI");

//

型

ミ

オ

1.

var str1 = "FLM";

//

型

2. var str2 = new String("LPI");

//

型

3.

4. console.log(str1);

5. console.log(str2);

6. console.log(str1.substring(0, 1));

7. console.log(str2.substring(0, 1));

型

型 暗黙的 変換

演算子

演算子

説明

<

左辺 右辺

小 い

<=

左辺 右辺以下 あ

>

左辺 右辺

大 い

>=

左辺 右辺以上 あ

==

左辺 右辺 値 等 い

!=

左辺 右辺 値 等

い

===

左辺 右辺

ータ型 値 等 い

!==

左辺 右辺

ータ型

値 等

い

1.

var num1 = 10;

2. var num2 = "10";

3.

4. console.log(num1 == num2);

// true

5. console.log(num1 === num2);

// false

ン

問題

1

1.

var str1 = "FLM";

2.

var str2 = new String("FLM");



以下 変数

str1

str2

宣言

い

選択肢

ー

ー

実行結果

true

表示

すべ

選び

い

A) console.log(str1 == str2);

B) console.log(str1 === str2);

C) console.log(typeof str1 == typeof str2);

D) console.log(str1 instanceof String);

解答

1

1.

var str1 = "FLM";

2. var str2 = new String("FLM");



以下 変数

str1

str2

宣言

い

選択肢

ー

ー

実行結果

true

表示

すべ

選び

い

A) console.log(str1 == str2);

B) console.log(str1 === str2);

C) console.log(typeof str1 == typeof str2);

D) console.log(str1 instanceof String);

E) console.log(str2 instanceof String);

typeof

演算子 変数 型 返

str1

string

str2

object

instanceof

演算子

型

boolean

判定

特殊数値

値

説明

Infinity

number

型 無限 表

-Infinity

あ

NaN

number

型 非数

Not-A-Number

表

null

型 空 表

undefined

型 未定義 表

1.

var nan = NaN;

2. console.log(typeof nan);

// number

3.

console.log(nan + 10);

// NaN

4.

console.log(nan.hoge);

// undefined

5. console.log(parseInt("a"));

// NaN

NaN

Infinity

typeof

使う

number

返

!

ン

問題

2

1.try {

2. console.log(5 / 0);

3.} catch (e) {

4. console.log("catch");

5.} finally {

6. console.log("finally");

7.}



以下

ー

ー

実行結果

表示

すべ

選

び

い

A)

ー 発生

何 表示

い

解答

2

1.try {

2. console.log(5 / 0);

3.} catch (e) {

4. console.log("catch");

5.} finally {

6. console.log("finally");

7.}



以下

ー

ー

実行結果

表示

すべ

選

び

い

A)

ー 発生

何 表示

い

B) NaN

C) Infinity

D) catch

E) finally

除算

ー

Infinity

返

タ

ベー

オ

ン タン 生成

違

拡張可能

ン タン

タ

ータ

処理

引 継

String

タ

new

ン タン 生成

LPI-Japan

オ

動的 拡張

1. Date.prototype.getJaFullYear = function () {

2. return this.getFullYear() + "

年

";

3. }

4. var now = new Date();

5. console.log(now.getJaFullYear());

ン

拡張可能

仕様 分

ン

prototype

タ

追加

い

ン タン

greet

ー

う

Person

タ

new

ン タン 生成

Yuichi

Nukiyama

ン タン

タ

greet

追加

い

greet

使用

場合

オ

1. function Person(x, y) {

2. this.name = x;

3. this.age = y

4. }

5. Person.prototype.greet = function() {

6. console.log("I'm " + this.name + this.age + " years old");

7. }

8.

9. var me = new Person("Yuichi", 10);

10. me.greet();

ン

タ 関数

定義

参考

ECMAScript2015

class

作成

1. class Person2 {

2. constructor(x, y) {

3. this.name = x;

4. this.age = y;

5. }

6. greet() {

7. console.log("I'm " + this.name + this.age + " years old.");

8. }

9.}

ー

意味

function

使用

定義 同

OO

言語経験者

ン

問題

3

1.function Employee() {

2. this.name = "foge";

3. this.dept = "Development";

4. this.work = function() {

5. console.log("do test");

6. }

7.}

8.Employee.prototype.manage = function() {

9. console.log("manage");

10.}

11.var e = new Employee();



以下

ー

ー

実行

際

e

オ

自体 定義

い

すべ

選択

い

A) name

B) dept

解答

3

1.function Employee() {

2. this.name = "foge";

3. this.dept = "Development";

4. this.work = function() {

5. console.log("do test");

6. }

7.}

8.Employee.prototype.manage = function() {

9. console.log("manage");

10.}

11.var e = new Employee();



以下

ー

ー

実行

際

e

オ

自体 定義

い

すべ

選択

い

A) dept

B) name

C) work

D) manage

manage

e

タ

定義

い

Object.getOwnPropertyNames()

for/in

1.

var nums = [10, 20, 30];

2. for (var num in nums) {

3. console.log(num);

// 0

1

2

出力

4.

}

for/in

配列 使用

配列 要素 対

処理 繰 返

上述 例

配列 要素番号 出力

!!

ン

問題

4

1.var nums = [10, 20, 30];

2.nums.foge = "hogehoge";

3.for (var num in nums) {

4. console.log(num);

5.}



以下

ー

ー

実行

結果 表示

正 い

選び

い

A) 10 20 30

B) 10 20 30 fogefoge

C) 0 1 2

解答

4

1.var nums = [10, 20, 30];

2.nums.foge = "hogehoge";

3.for (var num in nums) {

4. console.log(num);

5.}



以下

ー

ー

実行

結果 表示

正 い

選び

い

A) 10 20 30

B) 10 20 30 fogefoge

C) 0 1 2

D) 0 1 2 foge

自作

実行

ECMAScript2015

追加

for/of

使う

2.2.1

ベン

2.2.1

ベン

重要度

★★★★★★★★

8

出題種別

•

知識問題

•

ー

ー

ン 問題

•

記述問題

説明 望

•

JavaScript

ー 読

込

ー 操作

発生

ン

発生タ

ン

理解

ン 処理

行う ー

記述

事

ベン

ー ー

ネ

表示

ネ

非表示

ー ー 動作

ン

ベン 処理 登録

1. <button id="btn" onclick="alert('FLM')"></button>

2.

3. var btn = document.getElementById("btn");

4. btn.onclick = function(){};

5. btn.addEventListener("click", function(){}, false);

JavaScript

ン 登録 方法

3

一般的

addEventListener

使わ



ン

1

以上

ン

追加

!



チ

ン

ン

制御

!

IE6-8

対応

い

ベン

発生タ ミン

window

document

html

：

body

table

：

tbody

tr th td

tr th td

：

：

：

チ ー

ー

ー

ン

ター

ー

document

html

body

table

tbody

tr

tr

th

td

th

td

～

～

DOM

ー

ン

問題

5



以下

ー

ー

あ

Web

ー 上

click me

タン

際 表示

文字列

正 い

1

選び

い

→

表示順 表

A) button click

→

div click

B) div click

→

button click

C) button click

1. <div onclick="alert('div click')">

2. <button id="btn">click me</button>

3. </div>

4. <script>

5. var btn = document.getElementById("btn");

6. btn.addEventListener("click", function(){

7. alert("button click");

8. });

解答

5

button

要素

ン

伝

播

ン

ー

div

要

素

click

ン

発生

A) button click

→

div click

B) div click

→

button click

C) button click

1. <div onclick="alert('div click')">

2. <button id="btn">click me</button>

3. </div>

4. <script>

5. var btn = document.getElementById("btn");

6. btn.addEventListener("click", function(){

7. alert("button click");

8. });

9. </script>



以下

ー

ー

あ

Web

ー 上

click me

タン

際 表示

文字列

正 い

1

選び

2.2.2

キュメン オ

／

DOM

2.2.2

キュメン オ

／

DOM

重要度

★★★★★★

6

出題種別

•

知識問題

•

ー

ー

ン 問題

説明 望

•

ン 発生時

D

OM

利用

HTML

内容 読 込

書

換え 処理 行う ー

記述方法

い 理解

要素

h1

DOM

Document Object Model

document

/

要素

html

要素

head

要素

body

要素

meta

要素

section

DOM

ー

属性

id

属性

charset

要素

title

属性

id

HTML

文書

ー構造

上 展開

集合体

要素

p

DOM

ー

属性

lang

HTML

要素

ー構造

DOM

DOM

操作

1. <div id="message">

2. </div>

3. <script>

4. var mess = document.getElementById("message");

5. mess.innerHTML = "<p>Fujitsu Learning Media.</p>";

6. </script>

DOM (Document Object Model)

HTML

操作

!!

ン

問題

6

1. <div id="target">

2. <button id="yes">yes</button><button>no</button>

3. </div>



JavaScript

使用

実行前

HTML

実行後

う 書 換え

い 正

変更

1

選び

い

target

div

要

素

yesButton

button

要素 参照

い

A)

target.innerHTML = "<button>no</button>";

B)

var noButton = document.createElement("button");

noButton.innerHTML = "no";

target.insertBefore(noButton, yesButton);

C)

target.hasAttribute("<button>no</button>");

D)

var noButton = document.createElement("button");



実行前



実行後

1. <div id="target">

解答

6

1. <div id="target">

2. <button id="yes">yes</button><button>no</button>

3. </div>



JavaScript

使用

実行前

HTML

実行後

う 書 換え

い 正

変更

1

選び

い

target

div

要

素

yesButton

button

要素 参照

い

A)

target.innerHTML = "<button>no</button>";

B)

var noButton = document.createElement("button");

noButton.innerHTML = "no";

target.insertBefore(noButton, yesButton);

C)

target.hasAttribute("<button>no</button>");

D)

var noButton = document.createElement("button");

noButton.innerHTML = "no";



実行前



実行後

1. <div id="target">

2.8.1 Web Storage

2.8.1 Web Storage

重要度

★★★★

4

出題種別

•

知識問題

•

ー

ー

ン 問題

説明 望

•

Web Storage

特徴 仕

様 理解

読 込 ・

書 込

行う ー

Web Storage

特徴



へ

ータ 保存 取得

ータ 保存

機能

閉

閉

後

ータ 残



Key-Value

配列 形式 複数

ータ 保存

ータ

Key-Value

配列 保存

ー 指定

値 格納



大

ータ 保存

ータ 保存容量

ン

5MB

程度あ

ータ件数 多い

JSON

大 い

ータ

格納

保存容量 異



ン

制限

い

同一

ン

Web

ー

保存

ータ

取得

誤

異

ン

Web

ー

保存

ータ 変更

参照

ータ保存系

API

比較

Cookie

Web Storage

Indexed Database

WebSQL

保存容量

4KB

5MB-10MB

5MB-10MB

5MB-10MB

保存期間

有期限

無期限

/

ン

無期限

無期限

送受信

JS

操作時

JS

操作時

JS

操作時

ータ形式

文字列

文字列

ネ

/

ネ

/

非同期

×

×

○

○

特徴

設定

HTTP

通信

送受信

ン

API

大容量 ータ 保

存

複雑

ータ 扱え

API

複雑

実装 少々難 い

SQL

文

文法

ータ

操作

Web Storage

を使用した ータ保存

1. sessionStorage.setItem("Item", "Book");

2. // sessionStorage.Iem = "Book";

同 動作

3. var storage = sessionStorage.getItem("Item");

4. console.log(storage);

5. sessionStorage.removeItem("Item");

sessionStorage

localStorage

違い 保存期間

!!

sessionStorage

ン 終了

削除

ン

問題

7



Web Storage

説明

正 い

1

選び

い

A) key-value

形式

ータ 保存

B) string

Blob

格納

C)

非同期 動作

ー ン

優

い

解答

7

Web Storage

ン

API

使い

い

同期処理

ー ン

い

文

字列

格納

い仕様

い



Web Storage

説明

正 い

1

選び

い

A) key-value

形式

ータ 保存

B) string

Blob

格納

C)

非同期 動作

ー ン

優

い

2.9.1 WebSocket

2.9.1 WebSocket

重要度

★★

2

出題種別

•

知識問題

説明 望

•

WebSocket

特徴 理

解

通信 行う あ

必要 知識

い

WebSocket

特徴



双方向通信 実装

ン

WebSocket

ー 間 接続 維持

双方向通信 実装

XMLHttpRequest

Server-Sent Events

一回 通信

ン

行う

HTTP

ー

通信 比較

常時接続

双方向通信 行う

WebSocket

送受信処理 効率 高い



WebSocket

ー

使用

通信方式

HTTP

WebSocket Protocol

使用

ー

側

WebSocket Protocol

対応

WebSocket

ー

使用

必要 あ

WebSocket

対応

い い従来

Web

ー

使用

ー

DB

WebSocket

ー

/Web

ー

ータ ネ

ン ー ン

WebSocket

ータ受信時 ン 処理 ータ取得

WebSocket

双方向通信

WebSocket ー

通信系

API

比較

Server-Sent Events

WebSocket

XMLHttpRequest

HTTP

WebSocket Protocol

HTTP

非同期通信

○

○

○

双方向通信

×

○

○

通知

○

○

×

通信効率

△

WebSocket

ー

△

特徴

Web

_{通信 特化}

ー

一方向

双方向

_通信

タ

ン

ー ン

タ

通信

実現

備考

IE/Edge

未実装

チ

広 使

WebSocket

を使用した通信処理

1. var socket = new WebSocket("ws://localhost:8888/");

2. socket.send("Hello, World");

3. socket.onmessage = function (e) {

4. console.log(e.data);

5. }

WebSocket

使用

URL

ー

ws

wss

ー

情報 送信

send

ン

問題

8



WebSocket

説明

正 い

1

選び

い

A)

タ

通信 実現

場合

1

ン

終了

再接続 必要

B)

ー

ン

対

情報送信

ン

ー

ータ送信

い

C)

ー

介

ン 同士

P2P

Peer to Peer

通信 実

現

解答

8

A)

XMLHttpRequest

B)

Server-Sent

Events

C)

WebRTC

説明



WebSocket

説明

正 い

1

選び

い

A)

タ

通信 実現

場合

1

ン

終了

再接続 必要

B)

ー

ン

対

情報送信

ン

ー

ータ送信

い

C)

ー

介

ン 同士

P2P

Peer to Peer

通信 実

現

2.10.1 Geolocation API

基本 位置情報 取得

2.10.1 Geolocation API

基本 位置情報 取得

重要度

★★

2

出題種別

•

知識問題

説明 望

•

Geolocation API

概要

利用時 注意点

い

Geolocation API

特徴



GPS

使用

位置情報取得

端末

搭載

い

GPS

受信機

経由

正確 位

置情報 取得

GPS

受信機 使用

い場合

ネ

ワー 装置 連携

大

位置情報 取得



ー ー

使用可否 設定

位置情報

ー ー

ー

わ 情報

ー ー 位置情

報 使用可否 設定

必

位置情報 取得

わ

あ



地図 ー

連携

既存 地図 ー

中

Geolocation API

使用

ー

連携 可能

Geolocation API

を使用した位置情報取得

1. navigator.geolocation.getCurrentPosition(

2. function (position) {

3. //Position

取得

4. var latitude = position.coords.latitude; //

緯度

5. var longitude = position.coords.longitude; //

経度

6. var accuracy = position.coords.accuracy; //

誤差

7. var altitude = position.coords.altitude; //

高度

8. },

9. function (err) {

10. console.error(err.message);

11.});

getCurrentPosition

替わ

watchPosition

使う

ン

問題

9



Geolocation API

説明

正 い

1

選び

い

A) GPS

受信機 存在

い端末

Web

ー

閲覧

場合 位置情報

取得

い

B)

ー ー 情報提供 拒否

場合

特権設定

位置

情報 取得

C)

タ

ー 発生

場合

getCurrentPosition

第

1

引数 指定

関数 実行

解答

9

Geolocation API

特権設定

設定 使用

い



Geolocation API

説明

正 い

1

選び

い

A) GPS

受信機 存在

い端末

Web

ー

閲覧

場合 位置情報

取得

い

B)

ー ー 情報提供 拒否

場合

特権設定

位置

情報 取得

C)

タ

ー 発生

場合

getCurrentPosition

第

1

引数 指定

関数 実行

2.11.1

並列処理 記述

2.11.1

並列処理 記述

重要度

★★★★

4

出題種別

•

知識問題

•

ー

ー

ン 問題

説明 望

•

Web Workers

特徴

理解

並列処理

ー 検出 行う ー

読

う 動作

Web Workers

ン

ワー ー

実行

ワー ー

ン

Web

ー

描画処理

2.

Web

ー

CSS

HTML

JavaScript

分離

JavaScript

処理

JavaScript

処理

ン

実行

Web

ー 上 処理 ワー

Web Workers

特徴



ワー ー 分離

JavaScript

処理 並列 処理

JavaScript

処理単位 あ ワー ー

ン

Web

ー

処理

分離

複数 ワー ー 実行

JavaScript

同時実行制御 行え



ワー ー 処理

JS

記述

_並列処理

_{呼び出 元}

_別

JS

記述

必要 あ

Web Workers

書

ン タン 生成

タ

ン

読 込



ー

使用

ワー ー間

ータ 交換

ン

ワー ー間 別

ータ 共有

い

DOM

へ

window

XHR

一部

可能

直接

ータ 送受信

postMessage

Web Workers

1. var work = new Worker("worker.js");

2. work.postMessage(100);

3. work.onmessage = function(e) {

4. console.log(e.data);

5. }



index.html

1. self.onmessage = function(e) {

2. var data =e.data;

3. for (var i = 0; i < 10000; i++) {

4. data += i;

5. }

6. self.postMessage(data);

7.}

ン

問題

10

1. var work = new Worker("worker.js");

2. work.postMessage(100);

3. work.onmessage = function(e) {

4. console.log(e.data);

5. }



以下

ー

ー

実行

ー

行

1

選び

い

A) 1

行目

B) 2

行目

C)

行目

I.

self.onmessage = function(e) {

II. var data =e.data;

III. document.getElementById("message").innerHTML = data;

IV. postMessage(true);

V. }



index.html

解答

10

Web Workers

document

い

postMessage

ー

関数

self

大丈夫

!

1. var work = new Worker("worker.js");

2. work.postMessage(100);

3. work.onmessage = function(e) {

4. console.log(e.data);

5. }



以下

ー

ー

実行

ー

行

1

選び

い

A) 1

行目

B) 2

行目

C)

行目

I.

self.onmessage = function(e) {

II. var data =e.data;

III. document.getElementById("message").innerHTML = data;

IV. postMessage(true);

V. }



index.html

参考

ECMAScript2015

非同期処理

1/2

1.var data = 10;

2.var p1 = new Promise(function (resolve, reject) {

3. for (var i = 0; i < 10000; i++) {

4. data += i;

5. }

6. if(data >= 0){

7. resolve(data);

8. }

9. reject(Error("data is negative."))

10. });

Promise

ECMAScript2016

追加

非同期処理

!!

成功時 呼び出 値

resolve

失敗時 呼び出 値

reject

登録

Battery Status API

う 比較的新 目

API

Promise

参考

ECMAScript2015

非同期処理

2/2

1.p1.then(function (data) {

2. alert(data);

3.})

4. .catch(function (err) {

5. alert(err.message);

6. });

Promise

処理 成功

then

実行

失敗

catch

方 実行

参考

ECMAScript2015

ー関数

1. var p1 = new Promise((resolve, reject) => { });

2. p1.then(data => { })

3. .catch(err => { });

ー関数 使う

関数定義

(

引数

) => {}

書式 書

引数

1

場合

( )

省略