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

(1)

HTML5

ョ

認定試験

1 ン解説無料セ

ー

NTT

ノ

株式会社

鈴木雅貴

LPI-Japan

主催

(2)

• _鈴木雅貴

ᵒ

NTT

ノ

株式会社

ᵒ

1 認定取得

•

1 試験対策本執筆

• _弊社技術

VR

記事連載

(3)

3

HTML5

ョ

認定試験

1 対策キ

&

問題集

著者

1 人

(4)

• _{試験範囲確認}

• JavaScript API

概要

• _各種

API

試

う

ᵒ

チ

API

Video, Canvas

ᵒ

_セ

API

Geolocaiton

ᵒ

_ン

_ー

API

Web Storage

(5)

5

(6)

• JavaScript API

対象

、

JavaScript

ン

対象外

• API

何

問わ

• _今回

_ン

_解説

_対象外

、中身あ程度わ

、

API

こ

ー

やく

思

い

、そ助け

う内容

い

(7)

7

JavaScript API

概要

(8)

• Web

ー

構成物要素やタ

操作

ン言語

ᵒ

_主

Web

上動作

• ECMAScript

仕様化

い実装

総称

JavaScript

呼ぶ

• ES5

や

ES6

ECMAScript

略

+

ー

ョン番号

(9)

9

• _{ー入力内容チ}

• _表示

• _タン

_{新い要素追加・削除}

• 再読込

ー内容更新

• _{ーョン表示}

(10)

• script

要素内容

記述

(11)

11

• script

要素

src

属性外部

指定

読込

(12)

• Application Programming Interface

略

• ーョン作

あ

、対象

機能利用

、そ

楽

利用

う用意

(13)

13

• Web

要素やタ

操作

Ja

vaScript

簡潔利用

う、

Web

上用意

• _{現在、要素やタ}

_操作

、

チ

コンン

操作、

へ

セ、通信、

ン時

ー操作い

機能

び

API

Web

実装

い

ᵒ

、い

使うこ

(14)

• CodePen

使用

ᵒ

Web

上

HTML/CSS/JavaScript

書い確

こ

ᵒ

_右上

[Create]

→

[New Pen]

新規作成

ᵒ

_あ

_{書くけ結果表示}

_いく

ᵒ

勉強際

確認便利

(15)

15

Video

(16)

• video

要素動画再生可能

• そ

再生

け

、

組

込

ヤー

操作

• JavaScript API

使え、組込

ヤー以外

制御可能

• _{動画再生状況}

(

こ

再生

)

取得可能

(17)

17

• https://codepen.io/suzukima/pen/qmzRb

y

(18)

(19)

19

• "var

変数名

"

変数宣言

• 変数

宣言

、あ

利用

可能

(20)

• _制御

_{要素取得}

API

使用

• "document.querySelector(

セ

タ

)"

セ

タ使

要素取得可能

(21)

21

• _{ン制御}

API

使用

• "

取得

要素

.addEventListener()"

、

取得

要素指定

ン

発生

際実行

内容指定

(22)

ン名

概要

click

クックされたと

mouseenter

マウスカーソ

要素重ったと

mouseleave

マウスカーソ

要素ら離れたと

focus

要素フォーカスされたと

keydown

キー押されたと

keyup

キー離されたと

change

input

等の値変更されたと

DOMContentLoaded

HTML

の読み込みと解析終わったと

load

画像等の読み込み完全終わったと

(23)

23

• _取得

video

要素使い、

API

制御

(24)

• _{以下参考}

• HTML5

audio

要素

video

要素使用

- HTML | MDN

• HTMLMediaElement - Web API

ンター

| MDN

(25)

25

Geolocation

(26)

• Web

位置情報利用可能

• _{近く店舗表示}

_{、現在位置情}

報

提示

う

ービ

実現

こ

(27)

27

(28)

• "onclick=

関数

"

、

実行

関数指定

• こ場合、

geoDisp()

実行

• "id="out""

表示結果出力場所

(29)

29

• "document.getElementById(ID

名

)"

、指

定

ID

名要素取得

(30)

• "

取得

要素

.innerHTML=

表示内容

"

、

取得

要素表示、指定

表示内容

書換えこ

(31)

31

• API

"navigator.geolocation.getCurrent

Position(success, error)"

、位置情報

取得、成功

success

処理、失敗

error

処理実行

こ

(32)

• _{成功時実施}

_{処理中、緯度や経度}

情報取得

利用可能

(33)

33

• "new Image()"

img

要素作

• _作

_要素

src

属性指定

画像読

込

う

• 作

要素

"

取得要素

.appendChild(

作

要素

)"

HTML

追加

(34)

• _{以下参考}

ᵒ

Geolocation

利用

- Web API

ンター

| MD

N

(35)

35

Web Storage

(36)

• _{ータ保存、利用}

_こ

API

• _{ータキー値}

_保存

ᵒ

例えキー

"

名前

"

、値

"

鈴木雅貴

"

• _{設定保存}

_使わ

(37)

37

• https://codepen.io/suzukima/pen/QvXvZ

w

• _指定

_{色背景色}

(38)

(39)

39

• "document.getElementsByTagName(

要

素名

)"

指定

要素取得

• _複数取得

_、そ

1 目いう意味

後

[0]

け

(40)

•

2 種類あ

ー

う、

使

う

指定

宣言

ᵒ

localStorage

閉

開い

ータ残

い

ᵒ

sessionStorage

開いい間限

ー

タ残

い

(

再読込含

)

(41)

41

• "

ー

.setItem(

キー

,

値

)"

、

ー

値保存

こ

• _{今回キー}

bgcolor

い

(42)

• "

指定

ー入力要素要素

.value"

、

ー

入力

値取得

(43)

43

• "if(

条件

) {

特定処理

}"

、条件

特定処理実施

(44)

• "

ー

.getItem(

キー

)"

、キー対

応

値取得

こ

(45)

45

• "

取得

要素

.style.

名

"

値

指定

こ

、指定

値

変更

こ

(46)

• "

指定

要素

.value"

値指定

こ

、

ー

値外

変更可能

(47)

47

• _{以下参考}

ᵒ

https://developer.mozilla.org/ja/docs/Web/API/Web_

Storage_API/Using_the_Web_Storage_API

(48)

Canvas

(49)

49

• canvas

要素対象、

JavaScript

図形

描画

• _{画像ビ}

_形式

• _{ーョン、}

_{描画、写真編集、}

動画

タ

加工

使わ

(50)

• https://codepen.io/suzukima/pen/owxNM

g

(51)

51

(52)

• "

取得

canvas

要素

.getContext('2d')"

、描画可能領域描画コンキ

作成

(53)

53

• "

コンキ

.beginPath()"

初期

化、新規作成

(54)

• "

コンキ

.moveTo(

座標

)"

、指定

座標へ

移動

ᵒ

_{座標コンキ}

_左上

(0,0)

• "

コンキ

.lineTo(

座標

)"

、現座標

指定

座標へ移動

引く

(55)

55

• "

コンキ

.closePath()"

現在

閉

• "

コンキ

.stroke()"

現

描画

(56)

• _{以下参考}

ᵒ

https://developer.mozilla.org/ja/docs/Web/Guide/HT

ML/Canvas_tutorial

(57)

57

(58)

• level1

ン

対象外

、

読

け

ー

わ

い

• CodePen

う手軽試

環境あ

、そ

利用

少

試

ᵒ

_{そほう技術者}

_力

_く

• Mozilla Developer Network

日本語多

(59)

59

•

7 割

い

• 全部覚えう

焦くい

、く

使いそう

こ

絞

時間

け

ᵒ

時間あ

そ他浅く

• _{試験本番わ}

_いこ

_あ

_焦

先へ進

•

7 割

い

(60)

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

HTML5

ョ

認定試験

1

ン 解説無料セ

ー

NTT

ノ

株式会社

鈴木雅貴

LPI-Japan

主催

•

鈴木雅貴

ᵒ

NTT

ノ

株式会社

ᵒ

1

認定取得

•

1

試験対策本執筆

•

弊社技術

VR

記事連載

3

HTML5

ョ

認定試験

1

対策 キ

&

問題集

著者

1

人

•

試験範囲 確認

•

JavaScript API

概要

•

各種

API

試

う

ᵒ

チ

API

Video, Canvas

ᵒ

セ

API

Geolocaiton

ᵒ

ン

ー

API

Web Storage

5

•

JavaScript API

対象

、

JavaScript

ン

対象外

•

API

何

問わ

•

今回

ン

解説

対象外

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

ン解説無料セ

_鈴木雅貴

_弊社技術

対策キ

_{試験範囲確認}

_各種

_セ

_ン

_ー

_今回

_ン

_解説

_対象外

、中身あ程度わ

やく

、そ助け

う内容

構成物要素やタ

ン言語

_主

上動作

い実装

_{ー入力内容チ}

_表示

_タン

_{新い要素追加・削除}

ー内容更新

_{ーョン表示}

要素内容

属性外部

読込

ーョン作