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

HTML5

認定試験

2

ン 解説無料

ー

LPI-Japan

主催

株式会社 生形可奈子

事業内容

生形 可奈子 うぶ

・

•

講師・

Monaca

ン



HTML5

認定試験

•

概要

•

試験範囲



頻出・難解

ン 解説

•

JavaScript

ータ型

•

•

関数

コー



特定非営利活動法人

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

標準仕様

•

JavaScript

各

独自 実装さ

独自仕様

含

い 場合 あ

•

ActionScript

や

JScript

等

JavaScript

以外 言語 存在

•

上記言語 標準化

作

仕様

EcmaScript

•

言語仕様

定義

HTML5 API

や

DOM

含

い



最新 ー

ン

6



代表的

ータ型

型 分類

代表的 型

型

値

持

数値 文字列 論理値

型

集合体

関数 配列

特殊 型

null

undefined

値 存在

値 定義さ

い

い い



•

_要素

_{数値や文字列}

_値

_く

関数 代入

•

_値

_関数

_いう



生成時 流

生成時

コン

タ いう関数 実行さ

コン

タ

新 く

生成

戻 値

返却

ン タン

呼ぶ



作成

•

new

使用

•

使用

var

オブ ェクト名

= new Object();



生成

var obj = {

name: "hoge"

show: function() {

console.log(this.name);

// hoge

}

};

//

メソッ

呼び出



delete

演算子

定義済

削除

var obj = {

name: "hoge"

};



以下 実行結果 ？

var obj = {

name: "hoge"

};

delete

obj.name;

console.log(obj.name);

•

null

•

undefined

型 文字列

"hoge"

型

String

・

length

・

replace()

・

substr()

"hoge"

…



型

値

型 複数



以下 実行結果 ？

問題：

型 対

指定

console.log("hoge".length);

•

4

•

null

•

undefined



ー

…

型 対応

"hoge".length

型

ー

数値

Number

文字列

String

論理値

Boolean



以下 実行結果 ？

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);



特殊数値

種類

代表的 型

Number.MAX_VALUE

Number.MIN_VALUE

正 最大値

正 最小値 負 最大値

い

Infinity

無限大

除算

ー ー

ー



isNaN

関数

数値

解釈

い値 場合

true

返

以

下 う

true

返

？

問題：

isNaN

関数

•

isNaN(null)

•

isNaN(undefined)

•

isNaN("10")

•

isNaN(true)

•

isNaN(Infinity)



Object

ー

い

Object

String

文字列

Array

配列

Function



typeof

演算子

•

ータ 型 調

演算子

String

や

Array

object

判定さ

※ 関数

function

判定さ

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



instanceof

演算子

•

コン

タ

生成さ

ン タン

判定

種類 調

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



配列 作成

•

new

使用

•

配列

使用

var

配列名

= new Array(1, 2, 3);



以下 実行結果 ？

var array = [10, 20, 30];

array[

9

] = 99;

console.log(array.length);

•

3

•

4

•

10

0

1

2

10

20

30

9

99



ン

連番

く

割 振



function

命令文

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;

}

}

console.log(

a

); // 10

？

var

付 忘

い



var

い い場合

変数

ー

コー

var a

= 10;

function func1()

{

b

= 20;

function func2()

{

var c

= 30;

}

}

func1(); //

関数 実行

func1

関数 実行さ



use strict

厳格 ー

宣言

var

付 忘

推奨さ

い記述 対

警告 表示さ

function func() {

"use strict";

b = 20;

//

ー

}

•

厳格 ー

全体 適用

関数内



以下 実行結果 ？

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

var a

= "hoge";

}

console.log(

a

);

•

ー

•

undefined

•

null



JavaScript

コー

い

if(true) {

let a

= "hoge";

}

console.log(

a

);

// a is not defined

•

コー

発生

関数内



内 値や

全

暗黙的 一番外側 存

在

い

ー

含

い

ー

<script>

var a = 10;

var obj = {



環境

ー

Window

あ

Window

alert()

document

open()

setInterval()

location



ー

変数＝

ー

<script>

var a = 10;



複数

JS

読 込

い 場合

ー

変数 競

合

う場合 あ

利用 必要最小限

lib1.js

…

<script src="lib1.js">

<script src="lib2.js">

…

index.html

var x = 10;

var x = 20;



以下 実行結果 ？

var a

= "global";

function func() {

console.log(

a

);

var a

= "func";

}

func();

•

ー

•

undefined



ン

変数 巻 上

var a = "global";

function func() {

var a;

console.log(a);

a = "func";

}

•

関数 途中 宣言さ

変数

関数 先頭 巻 上

宣言さ

•

初期値

代入さ

い 値 巻 上

い



JavaScript

タ

ー

指向言語

•

あ

基礎

新 い

生成

仕組

•

新 く作

ン タン

呼

ー

タ

ー

タ

オ

(

ン タン

)

オ

オ

(

ン タン

)



タ

＝関数

•

基礎

ー 言語

役割

関数

あ

•

上記

元

ン タン

生成

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("

ポチ

");



コン

タ 暗黙的処理

•

ン タン

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);

};

};



コ

•

タ

持

•

各 ン タン

タ

prototype

参照

•

prototype

各 ン タン

共通 機能 格納

オ

(

ン タン

)

オ

ロ タ

オ



ン タン 化

元

定義さ

各 ン タン

コ ーさ

var Dog = function(_name) {

this.name = _name;

this.show = function() {

alert(this.name);

};

};

var dog1 = new Dog("

ポチ

");

ロ

name

ロパ

show

メソッ

name

ロパ

show

メソッ

name

ロパ

show

メソッ

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 =

new Array('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

メソッ

…

子

・機能

C



継承

•

_あ

_拡張

_別

_{作 仕組}

親

・機能

A

・機能

B

親

・機能

A

・機能

B



最 単純 継承関係

•

子

prototype

親

ン タン

代入

//

親

var Parent = function() {

this.x = 10;

};

Parent.prototype.show =

function() {

console.log(this.x);

};

//

子

var Child = function() {

this.y = 20;

};

//

継承

Child.prototype = new Parent();



探索

順序

自身

ン タン 内に該当 ロパ

あ

う を調べ

ロ タ

オ

prototype

内を調べ



class

構文

ー 言語

う 扱う

class Parent {

show(text) {

console.log(text);

}

};

class Child

extends

Parent {

show() {

super

.show("child");

}

};

キーワー



this

所属

い

指 キーワー

var

obj1

= {

name: "hoge",

func: function() {

console.log(

this

.name);

// hoge

}

};



以下

this

何 指 ？

<script>

console.log(

this

);

</script>

•

null

•

undefined

•

Function

1.

関数呼び出

2.

呼び出



関数 呼び出

場合

Window

function func() {

console.log(

this

);

}

func();



呼び出

場合 自分自身

var

myObj

= {

show: function() {

console.log(

this

);

}

};



以下

う

コー

関数

渡

場合

this

コー

関数 実行

依存

var myObj = {

show: function() {

console.log(

this

);

}

};

window.setInterval(myObj.show, 1000);

this = Window



以下

this

ン 発生元

HTML

要素 指

<button id="btn">

ボタン

</button>

<script>

function func() {

console.log(

this

);

}

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

btn.addEventListener("click", func);

</script>



this

指

文脈

異

記述さ

い

く



call/apply

this

指

変更

var obj1 = {

name: "

わ

",

show: function() {

console.log(

this

.name);

//

ぼく

}

};

var

obj2

= {

name: "

く

"

};



call()

ン 区切

apply()

配列

引数 渡

var obj1 = {

name: "

わたし

",

showName: function(

msg1, msg2

) {

console.log(this.name + msg1 + msg2);

}

};

var obj2 = {

name: "

ぼく

"

};



配列

う 構造

Array

い

Array

持

join

利用

例

var obj = {

"0": "aaa",

"1": "bbb",

"2": "ccc",

length: 3

};

ン

発生タ

ン

input

文字 入力さ

keydown

キー 押さ

keypress

キー 押さ

離

ン

発生タ

ン

mousedown

ン

ン

タン 押

mouseup

ン

ン

タン 離

mousemove

ー

移動

mouseover

ー

要素 上 乗

mouseout

ー

要素

外

mousewheel

ー

回転させ

ン

発生タ

ン

drag

い 間

dragstart

開始さ

dragend

終了

dragenter

中 要素

可能領域 入

dragleave

中 要素

可能領域

外

ン

発生タ

ン

touchstart

画面 指 触

touchmove

画面上 指 動

い 間



<input>

要素 付与

submit

時 チ

行

く

•

required

必須

•

pattern

正規表現

•

min

最小値

•

max

最大値

•

maxlength

最長文字数

名前：

<input type="text" required>

invalid

ン



ー

ン属性

invalid

ン

組 合わせ

<form>

郵便番号：

<input id="zipcode" type="text"

pattern="^[0-9]{3}-[0-9]{4}$"

>

<input type="submit" value="

送信

">

</form>

<script>

var zipcode = document.getElementById("zipcode");

zipcode.addEventListener("

invalid

", changeStyle);

function changeStyle(e) {

HTML5 Web

標準

API

コ ・

JavaScript

HTML5 API

対策本

HTML5