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

Java

ン

HTML5

認定試験

2

解説無料セ

ー

LPI-Japan

主催

株式会社 生形可奈子

ン

ン

ン ーネ

成長 牽引

いう

事業コンセ

HTML5

・

JavaScript

等

Web

技術

ー

ー支援事業 行

い

生形 可奈子 うぶ

・

•

講師・

Monaca

ン

•

Java/C#

中心

業務・制御系 ン

出身

•

_著書：

_わ

JavaScript

Monaca

学ぶ

ン



HTML5

認定試験

•

概要

•

試験範囲



頻出・難解

ン 解説

•

JavaScript

ー 型

•

•

文字列／配列

•

2014

年

10

月正式勧告

•

_{ン ・}

_ー

_ン

ー

•

_対応・

_対応



特定非営利活動法人

LPI-Japan

実施

HTML5

び周辺技術 知識

測 認定制度



試験 難易度 示

2

種類

あ

段階的 受験

•

Level1

対応

静的

Web

コン ン

HTML5

使

ン 作

成

•

Level2

出題範囲

重要度

JavaScript

JavaScript

文法

★★★★★★★★★★

10

Web

JavaScript API

ベン

★★★★★★★★

8

キュメン オ

／

DOM

★★★★★★

6

ン

オ

★★★★★★★★

8



試験方式 コン

ー

ー

CBT

試験配信会

社

ソン

VUE

通

受験

問題数

40

〜

45

問

試験時間

90

分

合格

ン

約

7

割

回答方式

殆

選択式 複数回答あ

記述式も１問程度

コー

ー

ン 問題 多い



JavaScript

•

当初

Mocha

LiveScript

いう名前

•

開発元

Netscape

社

Sun

社 現

Oracle

提携

JavaScript

改名さ

•

初期

Web

ー

簡単 動

付

ー 入力 補助



JavaScript

最新動向

•

Gmail

ー

登場

上 実現

増え

JavaScript

脚光 浴び

う

•

様々

JavaScript

製

ー ワー

台頭

大規模

Web

ー

ン 構築 可能

•

進化系

ー

構築や

ー

ン



JavaScript

標準仕様

•

JavaScript

各

独自 実装さ

独自仕様

含

い 場合 あ

•

ActionScript

や

JScript

等

JavaScript

以外 言語 存在

•

上記言語 標準化

作

仕様

EcmaScript

•

言語仕様

定義

HTML5 API

や

DOM

含

い



JavaScript

影響 受

い 言語

•

コー

記述方法

Java

似 い

•

言語仕様

最 影響 受

い

Scheme

Self



Java

JavaScript

主 違い

言語

型

指向分類



JavaScript

動的型付 言語

•

ー

型 実行時 決定さ

変数宣言時 型 限定

い

変数宣言 例

実行時

ー 型 判定さ

var

変数名

;

console.log(1 + 1);

// 2



ー 型一覧

型 分類

代表的 型

ミ

型

１

値

を持

数値、文字列、論理値

null

値 存在

い

undefined

値 定義さ

い い

オ

型



null

… 値 存在

い

意図的 示 値

•

getElementById()

取得 よう

要素

HTML

文書内 存在

い場合

、メソッ

戻 値

返却さ



ウをよらりiをらよ … 値

定義さ

い い

示 値

•

初期化さ

い い変数、定義さ

い い ロ

、

return

文



JavaScript

等価演算子

二種類あ

•

値 等 い

う

比較

緩や

等価演算子

•

ー

型

含

等 い

う

比較

厳密 等価演算子

演算子

説明

例

結果

==

緩や

等価演算子

_{5 == '5'}

_true

===

厳密 等価演算子

5 === '5'

false



条件式

値 評価

•

論理値以外 値

if

文

条件式

指定

以下

う

判定さ

true

false

0

以外 数値

1

文字以上 文字列

中身 空

0



引数 省略

用い

function check(x) {

//

引数

x

が空 っ

ラーにす

if(!x) {

console.log("

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

");

return;

}

//

以降、省略



0

や空文字

false

判定さ

注意

function check(x) {

//

引数

x

が空 っ

ラーにす

if(!x) {

console.log("

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

");

return;

}

//

以降、省略



ソ

•

複数

ー

集合体 あ

•

内

ー

属性値 保持

何

操作 行う

ソ

あ



Object

親

い

Object

String

文字列

Array

配列

Function

関数

・

toString()

・

valueOf()

・

hasOwnProperty()

_…



生成方法

•

Object

オ

生成 、オ

{}

代用

こ

可能

•

Array

生成 、配列

[]

代用

こ

可能



生成 例

var

変数名

= new

オブジェ ト 型名

(

引数

);



生成時 流

生成時

コン

いう関数 実行さ

コン

新 く

生成

戻 値

返却

ン

ン

呼ぶ

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



typeof

演算子

•

ー

型 調

演算子

String

や

Array

object

判定さ

※ 関数

function

判定さ

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



instanceof

演算子

•

コン

生成さ

ン

ン

判定

種類 調

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



ー ー定義

作成

•

new

使用

•

使用

var

オ

クト名

= new Object();



セ

•

_使用

•

角

使用

変数名

.

ロパテ 名



生成

セ

var obj = {

name: "

生形

"

};

//

ロパテ へ

クセ

console.log(obj.name);

//

以下

うに記述す ことも可能



文字列

以下 二種類

•

ン

ー ・

ー

可



文字列

型

型 二種類 あ

•

文字列

型

'

こんに

'

"

こんに

"

var str1 = "

こんに

";

//

ミテ

型

型 文字列

"hoge"

型

String

・

length

・

replace()

・

substr()

"hoge"

…



型

値

型 複数

ソ



ー

…

型 対応

型

ー

数値

Number

文字列

String



以下 実行結果 ？

問題：

型 対

指定

console.log("hoge".length);

A)

4

B)

null

C)

undefined



呼び出

場合

値

対応

ー

暗黙的 変換 行わ

"hoge".length

"hoge"

・

length

・

replace()

・

substr()

"hoge"

…

型

ー



以下 実行結果 ？

true / false

問題：

型

ー

比較

var a = "hoge";

var b = new String("hoge");

console.log(a ==

b);



以下 実行結果 ？

true / false

var a = "hoge";



以下 実行結果 ？

true / false

問題：値 比較 参照 比較

var a = "hoge";

var b = "hoge";

console.log(a == b);



以下 実行結果 ？

true / false



型 値

比較



型 参照

い

同

う

比較

a

b

a

b

"hoge"

"hoge"

var a = new String("hoge");

var b = a;

console.log(a == b);

こ 場合 同 オ

を



配列 作成

•

new

使用

•

配列

使用

var

配列名

= new Array(1, 2, 3);

var list = [];

//

空の配列を作成

list[0] = "AAA";

list[1] = "BBB";

list[2] = "CCC";



以下 実行結果 ？

var array = [10, 20, 30];

array[9] = 99;

console.log(array.length);

A)

3

B)

4

C)

10

0

1

2

10

20

30

9

99



ン

連番

く

割 振



関数

一種

•

関数

Function

いう名前

あ

•

一種

変数 値

代入

可能

ソ

Fuction

代入

実現

い

var obj = {

method1: function (message) {

alert(message);



関数宣言

func("hello");

function func(message) {

alert(message);

}

•

関数

func

いう名前

い



関数式

var func = function(message) {

alert(message);

};

func("hello");

•

func

いう変数 関数 代入

い



即時関数

(function(message) {

alert(message);

})

(

"hello"

)

;

•

(

関数 定義

)(

引数

)

;

定義 呼び出

同時 行う



引数



可変長引数



引数

function f(x, y=20){

console.log(x); // 10

console.log(y); // 20

}

f(10);



可変長引数

function f(...args) {

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

console.log(args[i]);

}

}

f(10, 20);



従来 記法

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

•

function

キーワー

省略

•

引数

場合

()

省略



ー記法



変数

コー

有効範囲 内

参照

var a

= 10;

// a

ローバル変数

で こからでも参照可

function func1() {

var b

= 20;

function func2()

{

var c

= 30;

}

}



コー 外 変数 参照

場合

ReferenceError

発生

var a

= 10;

function func1() {

var b

= 20;

function func2()

{

var c

= 30;

}

}



var

い い場合

変数

ー

コー

var a

= 10;

function func1() {

b

= 20;

function func2()

{

var c

= 30;

}

}

func1();

console.log(

a

); // 10

var

付 忘

い



use strict

厳格 ー

宣言

var

付 忘

推奨さ

い記述 対

警告 表示さ

function func() {

"use strict";



内 値や

全

暗黙的 一番外側 存

在

い

ー

含

い

ー

<script>

var a = 10;

var obj = {



環境

ー

Window

あ

Window

alert()

document



ー

変数＝

ー

<script>

var a = 10;

console.log(a);

// 10

console.log(window.a);

// 10



複数

JS

読 込

い 場合

ー

変数 競

合

う場合 あ

利用 必要最小限

lib1.js

…

<script src="lib1.js">

<script src="lib2.js">

…

var x = 10;

var x = 20;



ー ン

コー

重複

許可さ

い

var

x

= 10;

//

ローバ

コー

function func1() {

var

x

= 20;

//

ロー

コー

console.log(x);

// 20

}

•

上記 場合

ー

コー

ー

コー

同名 変数 宣言



以下 実行結果 ？

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

var a

= "hoge";

}

console.log(a);

A)

ー

B)

undefined



JavaScript

コー

い

•

コー

発生

関数内

•

ES6

コー

有効

let

キーワー

追加

さ

い

if(true) {

let a

= "hoge";

}



以下 実行結果 ？

var a = "global";

function func() {

console.log(a);

var a

= "func";

}

func();

A)

ー



ン

変数 巻 上

var a = "global";

function func() {

var a;

console.log(a);

a = "func";

}

•

関数 途中 宣言さ

変数

関数 先頭 巻 上

宣言さ

•

初期値

代入さ

い 値 巻 上

い

•

先

コー

以下

う 解釈さ



JavaScript

ー

指向言語

•

あ

基礎

新 い

生成

仕組

•

新 く作

ン

ン

呼

ー

ー

オ

(

ン

ン

)

オ

オ

(

ン

ン

)



組 込

ー

作

い

[0]

[1]

[2]

Array

10

20

30

'A'

'B'

'C'

ン タン



＝関数

•

基礎

ー 言語

役割

関数

あ

•

元

ン

ン

生成

new

演算子 使う

var Dog = function() { };



コン

＝関数 処理

•

関数内 処理

ン

ン

生成

new

時

コン

実行さ

var Dog = function(_name) {

this.name = _name;

this.show = function() {

alert(this.name);

};

};



ン

ン ＝

Object

•

Function

型

ン

ン

Object

型

var Dog = function(_name) {

//

省略

};

var dog1 = new Dog("

ポチ

");

console.log(typeof Dog);

//

function



コン

暗黙的処理

•

ン

ン

Object

型

コン

暗黙的 新 い

Object

生成

い

あ

var Dog = function(_name) {

var this = {};

this.name = _name;

this.show = function() {

alert(this.name);

};

var Dog = function(_name) {

this.name = _name;

this.show = function() {

alert(this.name);

};

};



コ

•

持

•

各 ン

ン

prototype

参照

•

prototype

各 ン

ン

共通 機能 格納

オ

(

ン

ン

)

オ

ロ タ

オ



ン

ン 化

元

定義さ

ソ

各 ン

ン

コ ーさ

var Dog = function(_name) {

this.name = _name;

this.show = function() {

alert(this.name);

};

};

var dog1 = new Dog("

ポチ

");

name

show()

name:

ポチ

show()

name:

ロ

Dog

dog2

dog1



各 ン

ン

内部的 持

__proto__

元

prototype

参照

var Dog = function(_name) {

this.name = _name;

};

Dog.prototype.show =

function() {

alert(this.name);

};

var dog1 = new Dog("

ポチ

");

name

name:

ポチ

__proto__

name:

ロ

__proto__

Dog

dog2

dog1

参照

show()



以下

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

メソッ

子



継承

•

_あ

_拡張

_別

_{作 仕組}

親

・機能

A

・機能

B

親

・機能

A

・機能

B



最 単純 継承関係

•

子

prototype

親

ン

ン

代入

//

親

var Parent = function() {

this.x = 10;

};

Parent.prototype.show =

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

//

子

var Child = function() {

this.y = 20;

//

継承

Child.prototype = new Parent();



探索

順序

自身

ン タン 内 該当 ロ

あ

う を調べ

ロ タ

オ

prototype

内を調べ



子

prototype

親 持

ソ

同名

ソ

定義

//

親

var Parent = function() {

this.x = 10;

};

Parent.prototype.show =

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

//

子

var Child = function() {

//

継承

Child.prototype = new Parent();

//

メソッ の ーバー

Child.prototype.show =

function() {

x

ロ

y

ロ

__proto__

Parent

Child

ン タン

参照

y

ロ

Child

prototype

new

①

参照

show

メソッ

new

prototype

③

x

ロ

show

ソ

__proto__

Parent

ン タン

➁

➁

show

メソッ

た

、

見 い

オー ー

た

show

メソッ



for/in

文

•

ー 定義

走査

•

ーン 遡

走査さ

var child = new Child();

for(var key in

child){



hasOwnProperty

•

自身 持

う

調

論理値 返

var child = new Child();

for(var key in child){

if(child.hasOwnProperty(key)) {

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

}



class

構文

ー 言語

う 扱う

class Parent {

show(text) {

console.log(text);

}

};

class Child

extends

Parent {

show() {

super

.show("child");

}

キーワー

継承関係 実現

ソ

prototype

内

HTML5 Web

標準

API

コ ・

JavaScript

HTML5 API

対策本

HTML5