Javaエンジニアのための「HTML5プロフェッショナル認定試験レベル2解説無料セミナー

(1)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Java

ン

HTML5

認定試験

2 解説無料セ

ー

LPI-Japan

主催

株式会社生形可奈子

(2)

2 ン

ン

ンー

成長牽引

いう

事業コンセ

HTML5

・

JavaScript

等

Web

技術

ー

ー支援事業行

い

開発環境

Monaca

(3)

3 生形可奈子うぶ

・

• 講師・

Monaca

ン

• Java/C#

中心

業務・制御系ン

出身

• 著書：

わ

JavaScript

Monaca

学ぶ

ン

～

入門編～

(4)



HTML5

認定試験

• 概要

• 試験範囲



頻出・難解

ン解説

• JavaScript

ー型

•

• 文字列／配列

• 関数

コー

• prototype

／継承

(5)

5

(6)

• 2014

年

10 月正式勧告

• _{ン・}

_ー

_ン

ー

• _対応・

_対応

• _広義

CSS3

や

JavaScript

3D

WebSocket

セ

ン

ー等含

(7)



特定非営利活動法人

LPI-Japan

実施

HTML5

び周辺技術知識

測認定制度



試験難易度示

2 種類

あ

段階的受験

• Level1

対応

静的

Web

コンン

HTML5

使

ン作

成

• Level2

間連携や最新

術対応

Web

ー

ンや動的

Web

コンン

開発・設計

(8)

出題範囲

重要度

JavaScript

文法

★★★★★★★★★★

10 Web

JavaScript API

ベン

★★★★★★★★

8 キュメンオ

／

DOM

★★★★★★

6 ン

オ

★★★★★★★★

8 Canvas(2D)

★★★★★★

6

(9)



試験方式コン

ー

CBT

試験配信会

社

ソン

VUE

通

受験

問題数

40 〜

45 問

試験時間

90 分

合格

ン

約

7 割

回答方式

殆

選択式複数回答あ

記述式も１問程度

コー

ー

ン問題多い

受験料

¥15,000

税抜

(10)

JavaScript

い

(11)



JavaScript

• 当初

Mocha

LiveScript

いう名前

• 開発元

Netscape

社

Sun

社現

Oracle

提携

JavaScript

改名さ

• 初期

Web

ー

簡単動

付

ー入力補助

目的簡易的言語

(12)



JavaScript

• Gmail

ー

登場

上実現

増え

JavaScript

脚光浴び

う

• 様々

JavaScript

製

ーワー

台頭

大規模

Web

ー

ン構築可能

• 進化系

ー

構築や

ー

ン

制作

用い

ー

増え

(13)



JavaScript

標準仕様

• JavaScript

各

独自実装さ

独自仕様

含

い場合あ

• ActionScript

や

JScript

等

JavaScript

以外言語存在

い

• 上記言語標準化

作

仕様

EcmaScript

• 言語仕様

定義

HTML5 API

や

DOM

含

い

(14)



ー

ン履歴

• 現在主要

完全

ーさ

い

2009

年策定さ

EcmaScript5

試験範囲

EcmaScript5

基準

• 2015

年承認さ

新ー

ン

仕様大幅改定さ

以降毎年改定行う体制変更名称

ES6

ES2015

変更

(15)



JavaScript

影響受

い言語

• コー

記述方法

Java

似い

• 言語仕様

最影響受

い

Scheme

Self



Java

JavaScript

主違い

15 言語

型

指向分類

Java

静的型付

ー

(16)

JavaScript

ー型

(17)



JavaScript

動的型付言語

• ー

型実行時決定さ

変数宣言時型限定

い

変数宣言例

実行時

ー型判定さ

17 var

変数名

;

var x;

x = 10;

(18)



ー型一覧

18 型分類

代表的型

ミ

型

１ 値

を持

数値、文字列、論理値

null

値存在

い

undefined

値定義さ

いい

オ

型

(19)

19 

null

… 値存在

い

意図的示値

• getElementById()

取得よう

要素

HTML

文書内存在

い場合

、メソッ

戻値

返却さ



ウをよらりiをらよ … 値

定義さ

いい

示値

• 初期化さ

いい変数、定義さ

いいロ

、

return

文

(20)

20 

JavaScript

等価演算子

二種類あ

• 値等い

う

比較

緩や

等価演算子

• ー

型

含

等い

う

比較

厳密等価演算子

演算子

説明

例

結果

==

緩や

等価演算子

_{5 == '5'}

_true

===

厳密等価演算子

_{5 === '5'}

_false

!=

緩や

不等価演算子

5 != '5'

false

(21)

21 

算術演算子

演算子

説明

例

結果

+

数値加算

1 + 1

2 +

文字列連結

'Hello' + 'World'

'HelloWorld'

-

数値減算

2 –

1

1 *

数値乗算

2 * 2

4 /

数値除算

10 / 2

5

(22)

22 

+

演算子挙動

演算対象

ー型

変わ

100 + 'px'

// '100px'

文字列型

(23)



条件式

値評価

• 論理値以外値

if

文

条件式

指定

以下

う

判定さ

23 true

false

0 以外数値

1 文字以上文字列

中身空

0 空文字

""

undefined

(24)

24 

引数省略

用い

function check(x) {

//

引数

x

が空っ

ラーにす

if(!x) {

console.log("

ラー：値が入っていません

");

return;

}

(25)

25 

0 や空文字

false

判定さ

注意

function check(x) {

//

引数

x

が空っ

ラーにす

if(!x) {

console.log("

ラー：値が入っていません

");

return;

}

//

以降、省略

}

check();

//

想定通

ラー

(26)

基本

(27)

27 

ソ

• 複数

ー

集合体あ

• 内

ー

属性値保持

何

操作行う

ソ

あ

(28)

28 

Object

親

い

Object

String

文字列

Array

配列

Function

関数

・

toString()

・

valueOf()

・

hasOwnProperty()

_…

(29)

29 

生成方法

• Object

オ

生成、オ

{}

代用

こ

可能

• Array

生成、配列

[]

代用

こ

可能



生成例

var

変数名

= new

オブジェトの型名

(

引数

);

(30)

30 

生成時流

生成時

コン

いう関数実行さ

コン

新く

生成

戻値

返却

ン

呼ぶ

var list = new Array(1,2,3);

(31)

31 

typeof

演算子

• ー

型調

演算子

String

や

Array

object

判定さ

※ 関数

function

判定さ

var list = new Array(1,2,3);

(32)

32 

instanceof

演算子

• コン

生成さ

ン

判定

種類調

var list = new Array(1,2,3);

(33)

ーー定義

(34)

34 

ーー定義

作成

• new

使用

• 使用

var

オ

クト名

= new Object();

(35)

35 

セ

• _使用

• 角

使用

変数名

.

ロパテ名

(36)

36 

生成

セ

var obj = {

name: "

生形

"

};

//

ロパテへ

クセ

console.log(obj.name);

//

以下

うに記述すことも可能

var propertyName = "name"

(37)

文字列

(38)

38 

文字列

以下二種類

• ン

ー・

ー

可



文字列

型

型二種類あ

• 文字列

型

'

こんに

'

"

こんに

"

var str1 = "

こんに

";

//

ミテブ型

(39)

39 型文字列

"hoge"

型

String

・

length

・

replace()

・

substr()

"hoge"

…



型

値

型複数

ソ

(40)



ー

…

型対応

40 型

ー

数値

Number

文字列

String

(41)



以下実行結果？

問題：

型対

指定

41 console.log("hoge".length);

A)

4 B)

null

C)

undefined

(42)



呼び出

場合

値

対応

ー

暗黙的変換行わ

42 "hoge".length

"hoge"

・

length

・

replace()

・

substr()

"hoge"

…

型

ー

(43)



以下実行結果？

true / false

問題：

型

ー

比較

43 var a = "hoge";

var b = new String("hoge");

console.log(a

==

b);



以下実行結果？

true / false

var a = "hoge";

(44)



以下実行結果？

true / false

問題：値比較参照比較

44 var a =

"hoge"

;

var b =

"hoge"

;

console.log(a == b);



以下実行結果？

true / false

(45)



型値

比較

45 

型参照

い

同

う

比較

a

b

(46)

46 a

b

"hoge"

var a = new String("hoge");

var b = a;

console.log(a == b);

こ場合同オ

を

(47)

配列

(48)

48 

配列作成

• new

使用

• 配列

使用

var

配列名

= new Array(1, 2, 3);

(49)

49 var list = [];

//

空の配列を作成

list[0] = "AAA";

list[1] = "BBB";

list[2] = "CCC";

(50)



以下実行結果？

50 var array = [10, 20, 30];

array[

9 ] = 99;

console.log(array.length);

A)

3 B)

4 C)

10

(51)

51

0

1

2

10

20

30

9

99 

ン

連番

く

割振

(52)

関数

(53)



関数

一種

• 関数

Function

いう名前

あ

• 一種

変数値

代入

可能

ソ

Fuction

代入

実現

い

53 var obj = {

method1: function (message) {

alert(message);

(54)



関数宣言

54 func("hello");

function func(message) {

alert(message);

}

• 関数

func

いう名前

い

(55)



関数式

55 var func =

function(message) {

alert(message);

};

func("hello");

• func

いう変数関数代入

い

(56)



即時関数

56 (

function(message) {

alert(message);

}

)

(

"hello"

)

;

• (

関数定義

)

(

引数

)

;

定義呼び出

同時行う

(57)



引数



可変長引数



ー記法

(58)



引数

58 function f(x,

y=20

){

console.log(x); // 10

console.log(y); // 20

}

f(10);

(59)



可変長引数

59 function f(

...args

) {

for(var i=0; i<args.length; i++) {

console.log(args[i]);

}

f(10, 20);

f(10, 20, 30, 40);

(60)



従来記法

60 **var f = function(x) { return x * 2; };**

• function

キーワー

省略

• 引数

場合

()

省略

• 処理

return

文

場合

{}

return

キーワー

省略



ー記法

(61)

変数

コー

(62)



変数

コー

有効範囲内

参照



コー

関数単位作

62 var a

= 10;

// a

ローバル変数のでこからでも参照可

function func1()

{

var b

= 20;

function func2(

c

)

{

c

= 30;

}

(63)



コー外変数参照

場合

ReferenceError

発生

63 var a

= 10;

function func1()

{

var b

= 20;

function func2(

c

)

{

c

= 30;

}

func1();

console.log(

a

); // 10

(64)



var

いい場合

変数

ー

コー

64 var a

= 10;

function func1()

{

b

= 20;

function func2(

c

)

{

c

= 30;

}

func1();

console.log(

a

); // 10

console.log(

b

); // 20

(65)



use strict

厳格ー

宣言

var

付忘

推奨さ

い記述対

警告表示さ

65 function func() {

"use strict";

b = 20;

//

ー

(66)

66 

内値や

全

暗黙的一番外側存

在

い

ー

含

い

ー

<script>

var a = 10;

var obj = {

prop: "hoge"

};

</script>

a

obj

(67)

67 

環境

ー

Window

あ

Window

alert()

document

open()

setInterval()

location

(68)

68 

ー

変数＝

ー

<script>

var a = 10;

console.log(a);

// 10

console.log(window.a);

// 10

(69)

69 

複数

JS

読込

い場合

ー

変数競

合

う場合あ

利用必要最小限

lib1.js

…

<script src="lib1.js">

<script src="lib2.js">

…

index.html

lib2.js

var x = 10;

var x = 20;

(70)



ーン

コー

重複

許可さ

い

70 var

x

= 10;

//

ローバルコー

function func1() {

var

x

= 20;

//

ロールコー

console.log(

x

);

// 20

}

• 上記場合

ー

コー

ー

コー

同名変数宣言

(71)



以下実行結果？

71 if(1 == 1) {

var a

= "hoge";

}

console.log(

a

);

A)

ー

B)

undefined

C)

null

(72)



JavaScript

コー

い

• コー

発生

関数内

• EcmaScript2015

コー

有効

let

キーワー

追加さ

い

72 if(true) {

let a

= "hoge";

}

(73)



以下実行結果？

73 var a

= "global";

function func() {

console.log(

a

);

var a

= "func";

}

func();

A)

ー

B)

undefined

C)

"global"

(74)



ン

変数巻上

74 var a = "global";

function func() {

var a;

console.log(a);

a = "func";

}

func();

• 関数途中宣言さ

変数

関数先頭巻上

宣言さ

• 初期値

代入さ

い値巻上

い

• 先

コー

以下

う解釈さ

(75)

prototype

(76)

76 

JavaScript

ー

指向言語

• あ

基礎

新い

生成

仕組

• 新く作

ン

呼

ー

オ

(

ン

)

オ

(

ン

)

オ

(

ン

)

オ

(77)

77 

組込

ー

作

い

[0]

[1]

[2]

Array

10

20

30 [0]

[1]

[2]

'A'

'B'

'C'

ンタン

ロタ

オ

(78)

78 

＝関数

• 基礎

ー言語

役割

関数

あ

• 元

ン

生成

new

演算子使う

var Dog = function() { };

(79)

79 

コン

＝関数処理

• 関数内処理

ン

生成

new

時

コン

実行さ

var Dog = function(_name) {

this.name = _name;

this.show = function() {

alert(this.name);

};

var dog1 = new Dog("

ポチ

");

//

コン

タを実行

(80)

80 

ン

ン＝

Object

• Function

型

ン

Object

型

var Dog = function(_name) {

//

省略

};

var dog1 = new Dog("

ポチ

");

console.log(

typeof Dog

);

//

function

(81)

81 

コン

暗黙的処理

• ン

ン

Object

型

コン

暗黙的新い

Object

生成

い

あ

var Dog = function(_name) {

var this = {};

this.name = _name;

this.show = function() {

alert(this.name);

};

return this;

};

var Dog = function(_name) {

this.name = _name;

this.show = function() {

alert(this.name);

};

(82)

82 

コ

• 持

• 各ン

ン

prototype

参照

• prototype

各ン

ン

共通機能格納

オ

(

ン

)

オ

(

ン

)

ロタ

オ

(83)

83 

ン

ン化

元

定義さ

ソ

各ン

ン

コーさ

var Dog = function(_name) {

this.name = _name;

this.show = function() {

alert(this.name);

};

var dog1 = new Dog("

ポチ

");

var dog2 = new Dog("

ロ

");

name

show()

name:

ポチ

show()

name:

ロ

show()

Dog

dog2

dog1

(84)

84 

各ン

ン

内部的持

proto

元

prototype

参照

var Dog = function(_name) {

this.name = _name;

};

Dog.prototype.show =

function() {

alert(this.name);

};

var dog1 = new Dog("

ポチ

");

var dog2 = new Dog("

ロ

");

name

name:

ポチ

proto

name:

ロ

proto

Dog

dog2

dog1

参照

show()

(85)

85 

以下

Array

ン

prototype

定義さ

い

join

ソ

呼び出

い例

var list = ['a', 'b', 'c'];

var str = list.join('+');

console.log(str);

//a+b+c

[0]: a

[1]: b

[2]: c

proto

Array

list

参照

join

メソッ

pop

メソッ

sort

メソッ

…

(86)

継承

(87)

87 子

・機能

C



継承

• _あ

_拡張

_別

_{作仕組}

親

・機能

A

・機能

B

親

・機能

A

・機能

B

(88)

88 

最単純継承関係

• 子

prototype

親

ン

代入

//

親

var Parent = function() {

this.x = 10;

};

Parent.prototype.show =

function() { alert(this.x); };

//

子

var Child = function() {

this.y = 20;

};

//

継承

Child.prototype = new Parent();

(89)

89 

探索

順序

自身

ンタン内該当ロ

あ

うを調べ

ロタ

オ

prototype

内を調べ

(90)

90

(91)

91 

子

prototype

親持

ソ

同名

ソ

定義

//

親

var Parent = function() {

this.x = 10;

};

Parent.prototype.show =

function() { alert(this.x); };

//

子

var Child = function() {

this.y = 20;

};

//

継承

Child.prototype = new Parent();

//

メソッのオーバー

Child.prototype.show =

function() {

alert(this.x + this.y);

};

(92)

92 x

ロ

y

ロ

proto

Parent

Child

ンタン

参照

y

ロ

Child

prototype

new

①

参照

show

メソッ

new

prototype

③

x

ロ

show

ソ

proto

Parent

ンタン

➁

show

メソッ

た

、

見い

オーー

た

show

メソッ

(93)

93 

for/in

文

• ー定義

走査

• ーン遡

走査さ

var child = new Child();

for(var key

in

child){

(94)

94 

hasOwnProperty

• 自身持

う

調

論理値返

var child = new Child();

for(var key in child){

if(child.hasOwnProperty(key)) {

console.log(key + ':' + child[key]);

}

(95)

95 

class

構文

ー言語

う扱う

class Parent {

show(text) {

console.log(text);

}

};

class Child

extends

Parent {

show() {

super

.show("child");

}

};

キーワー

継承関係実現

ソ

prototype

内

定義さ

親

(96)

受験対策

(97)

HTML5 Web

標準

API

コ・

JavaScript

HTML5 API

97 対策本

HTML5

認定

(98)

(99)

99

(100)

Javaエンジニアのための「HTML5プロフェッショナル認定試験 レベル2解説無料セミナー

Java

ン

HTML5

認定試験

2

解説無料セ

ー

LPI-Japan

主催

株式会社 生形可奈子

2

ン

ン

ン ー

成長 牽引

いう

事業コンセ

HTML5

・

JavaScript

等

Web

技術

ー

ー支援事業 行

い

開発環境

Monaca

3

生形 可奈子 うぶ

・

•

講師・

Monaca

ン

•

Java/C#

中心

業務・制御系 ン

出身

•

著書：

わ

JavaScript

Monaca

学ぶ

ン

～

入門編～



HTML5

認定試験

•

概要

•

試験範囲



頻出・難解

ン 解説

•

JavaScript

ー 型

•

•

文字列／配列

•

関数

コー

•

prototype

／継承

5

•

2014

年

10

月正式勧告

•

ン ・

Javaエンジニアのための「HTML5プロフェッショナル認定試験レベル2解説無料セミナー

株式会社生形可奈子

ンー

成長牽引

ー支援事業行

生形可奈子うぶ

業務・制御系ン

ン解説

ー型

_{ン・}

_ー

_ン

_対応・

_対応

_広義

ー等含

び周辺技術知識

測認定制度

試験難易度示

段階的受験

コンン

ン作

術対応

コンン

キュメンオ