• 検索結果がありません。

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

N/A
N/A
Protected

Academic year: 2018

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

Copied!
60
0
0

読み込み中.... (全文を見る)

全文

(1)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ Copyright© 2017 NTT TechnoCross Corporation

HTML5

認定試験

1

ン 解説無料セ

NTT

株式会社

鈴木雅貴

LPI-Japan

主催

(2)

鈴木雅貴

NTT

株式会社

1

認定取得

1

試験対策本執筆

弊社技術

VR

記事連載

(3)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

3

HTML5

認定試験

1

対策 キ

&

問題集

著者

1

(4)

試験範囲 確認

JavaScript API

概要

各種

API

API

Video, Canvas

API

Geolocaiton

API

Web Storage

(5)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

5

(6)

JavaScript API

対象

JavaScript

対象外

API

問わ

今回

解説

対象外

、中身 あ 程度わ

API

や く

、そ 助け

う 内容

(7)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

7

JavaScript API

概要

(8)

Web

構成物 要素や タ

操作

ン 言語

Web

上 動作

ECMAScript

仕様化

い 実装

総称

JavaScript

呼ぶ

ES5

ES6

ECMAScript

+

ョン番号

(9)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

9

ー 入力内容チ

表示

タン

新 い要素追加・削除

再読込

ー 内容更新

ー ョン表示

(10)

script

要素 内容

記述

(11)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

11

script

要素

src

属性 外部

指定

読 込

(12)

Application Programming Interface

ー ョン 作

、対象

機能 利用

、そ

利用

う 用意

(13)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

13

Web

要素や タ

操作

Ja

vaScript

簡潔 利用

う、

Web

上 用意

現在 、要素や タ

操作

コン ン

操作、

セ 、通信、

ン時

ー 操作 い

機能

API

Web

実装

、い

使うこ

(14)

CodePen

使用

Web

HTML/CSS/JavaScript

書い 確

右上

[Create]

[New Pen]

新規作成

書く け 結果 表示

いく

勉強 際

確認 便利

(15)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

15

Video

(16)

video

要素 動画 再生可能

再生

ヤー

操作

JavaScript API

使え 、組 込

ヤー以外

制御可能

動画 再生状況

(

再生

)

取得可能

(17)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

17

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

y

(18)
(19)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

19

"var

変数名

"

変数宣言

変数

宣言

、あ

利用

可能

(20)

制御

要素 取得

API

使用

"document.querySelector(

)"

タ 使

要素取得 可能

(21)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

21

ン 制御

API

使用

"

取得

要素

.addEventListener()"

取得

要素 指定

発生

際 実行

内容 指定

(22)

ン 名

概要

click

ク ックされたと

mouseenter

マウスカーソ

要素 重 ったと

mouseleave

マウスカーソ

要素 ら離れたと

focus

要素 フォーカスされたと

keydown

キー 押されたと

keyup

キー 離されたと

change

input

等の値 変更されたと

DOMContentLoaded

HTML

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

load

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

(23)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

23

取得

video

要素 使い、

API

制御

(24)

以下 参考

HTML5

audio

要素

video

要素 使用

- HTML | MDN

HTMLMediaElement - Web API

ンター

| MDN

(25)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

25

Geolocation

(26)

Web

位置情報 利用可能

近く 店舗 表示

、現在 位置 情

提示

ービ

実現

(27)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

27

(28)

"onclick=

関数

"

実行

関数 指定

こ 場合 、

geoDisp()

実行

"id="out""

表示結果出力場所

(29)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

29

"document.getElementById(ID

)"

、指

ID

名 要素 取得

(30)

"

取得

要素

.innerHTML=

表示内容

"

取得

要素 表示 、指定

表示内容

書 換え こ

(31)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

31

API

"navigator.geolocation.getCurrent

Position(success, error)"

、位置情報

取得 、成功

success

処理、失敗

error

処理 実行

(32)

成功時 実施

処理 中 、緯度や経度

情報 取得

利用可能

(33)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

33

"new Image()"

img

要素 作

要素

src

属性 指定

画像 読

要素

"

取得要素

.appendChild(

要素

)"

HTML

追加

(34)

以下 参考

Geolocation

利用

- Web API

ンター

| MD

N

(35)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

35

Web Storage

(36)

ータ 保存 、利用

API

ータ キー 値

保存

例え キー

"

名前

"

、値

"

鈴木雅貴

"

設定 保存

使わ

(37)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

37

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

w

指定

色 背景色

(38)
(39)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

39

"document.getElementsByTagName(

素名

)"

指定

要素 取得

複数取得

、そ

1

目 いう意味

[0]

(40)

2

種類あ

う 、

使

指定

宣言

localStorage

開い

ータ 残

sessionStorage

開い い 間 限

タ 残

(

再読込 含

)

(41)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

41

"

.setItem(

キー

,

)"

値 保存

今回 キー

bgcolor

(42)

"

指定

ー 入力要素要素

.value"

入力

値 取得

(43)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

43

"if(

条件

) {

特定 処理

}"

、条件

特定 処理 実施

(44)

"

.getItem(

キー

)"

、キー 対

値 取得

(45)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

45

"

取得

要素

.style.

"

指定

、指定

変更

(46)

"

指定

要素

.value"

値 指定

値 外

変更可能

(47)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

47

以下 参考

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

Storage_API/Using_the_Web_Storage_API

(48)

Canvas

(49)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

49

canvas

要素 対象 、

JavaScript

図形

描画

画像 ビ

形式

ー ョン、

描画、写真編集、

動画

加工

使わ

(50)

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

g

(51)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

51

(52)

"

取得

canvas

要素

.getContext('2d')"

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

作成

(53)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

53

"

コン キ

.beginPath()"

初期

化 、新規作成

(54)

"

コン キ

.moveTo(

座標

)"

、指定

座標へ

移動

座標 コン キ

左上

(0,0)

"

コン キ

.lineTo(

座標

)"

、現座標

指定

座標へ移動

引く

(55)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

55

"

コン キ

.closePath()"

現在

"

コン キ

.stroke()"

描画

(56)

以下 参考

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

ML/Canvas_tutorial

(57)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

57

(58)

level1

対象外

CodePen

う 手軽 試

環境 あ

、そ

利用

そ ほう 技術者

Mozilla Developer Network

日本語 多

(59)

Copyright© 2017 NTT TechnoCross Corporation The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

59

7

全部覚え う

焦 く い

、 く

使いそう

時間

時間 あ

そ 他 浅く

試験本番 わ

いこ

先へ進

7

(60)

参照

関連したドキュメント

In section 2 we present the model in its original form and establish an equivalent formulation using boundary integrals. This is then used to devise a semi-implicit algorithm

Kilbas; Conditions of the existence of a classical solution of a Cauchy type problem for the diffusion equation with the Riemann-Liouville partial derivative, Differential Equations,

This paper develops a recursion formula for the conditional moments of the area under the absolute value of Brownian bridge given the local time at 0.. The method of power series

We will study the spreading of a charged microdroplet using the lubrication approximation which assumes that the fluid spreads over a solid surface and that the droplet is thin so

(b) 肯定的な製品試験結果で認証が見込まれる場合、TRNA は試験試 料を標準試料として顧客のために TRNA

Taking care of all above mentioned dates we want to create a discrete model of the evolution in time of the forest.. We denote by x 0 1 , x 0 2 and x 0 3 the initial number of

(2)

2.-liability of Agro-K Corporation under this warranty or otherwise shall be limited to refund of the purchase price and such refund is expressly agreed by the buyer to be