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

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

N/A
N/A
Info
ダウンロード
Protected

Academic year: 2018

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

Copied!
44
0
0

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

今ダウンロードする ( 44 ページ )

全文

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

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/

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

•

JavaScript

概要

•

各種

API

試

う

ᵒ

チ

ッ

API

Video

、

Canvas

ᵒ

セ

API

Geolocaiton

ᵒ

ン

ー

API

Web Storage

(4)

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/

4

JavaScript

概要

(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

•

Web

ー

構成物 操作

こ

ン 言語

ᵒ

主

Web

上 動作

•

ECMAScript

呼

仕様 実装 総称

•

ES5

や

ES6

い

表記

ECMAScript

略

+

ー ョン番号

(6)

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/

6

•

ー 入力内容チ ッ

•

特定要素

ッ

新 く要素 表示

•

再読込

ー

情報 更新

(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

•

script

要素 内容

記述

(8)

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/

8

•

script

要素

src

属性 外部

指定

読 込

(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

•

CodePen

使用

ᵒ

Web

上

HTML/CSS/JavaScript

書い 確

こ

ᵒ

右上

[Create]

→

[New Pen]

新規作成

ᵒ

あ

書く け 結果 表示さ

いく

ᵒ

勉強 際

確認 便利

(10)

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/

10

video

(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

•

video

要素 動画 再生可能

•

普通 使

場合

組 込

ヤー 操作

•

JavaScript

使え 組 込

ヤー以

(12)

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/

12

•

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

y

(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

(14)

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/

14

•

"var

変数名

"

変数宣言

•

変数

宣言

、あ

利用

可能

(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

•

制御

要素 取得

•

"document.querySelector(

セ

タ

)"

セ

タ

要素取得 可能

(16)

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/

16

•

"

取得

要素

.addEventListener()"

、取

得

要素 指定

ン

発生

際 実行

内容 指定

こ

(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

ン 名

概要

click

ク ックされたと

mouseenter

マウ カーソ

要素 重 ったと

mouseleave

マウ カーソ

要素 ら離れたと

focus

要素 フォーカ されたと

keydown

キー 押されたと

keyup

キー 離されたと

change

input

等の値 変更されたと

DOMContentLoaded

HTML

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

load

画像等ペー

完全 読み込み終わったと

(18)

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/

18

•

取得

video

要素 使い ソッ 実行

(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

•

以下 参考

ᵒ

HTML5

audio

要素

video

要素 使用

- HTML |

MDN

ᵒ

HTMLMediaElement - Web API

ンター

|

MDN

(20)

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/

20

Geolocation

(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

•

Web

位置情報 利用可能

•

近く 店舗 表示

、現在 位置 情

報

提示

う

ービ

実現

こ

(22)

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/

22

(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

•

"onclick=

関数

"

、

ッ さ

実行

関数 指定

•

こ 場合

geoDisp()

書

処理 実

(24)

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/

24

•

"document.getElementById(ID

名

)"

、指

定

ID

名 要素 取得

(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

•

"

取得

要素

.innerHTML=

表示内容

"

、

取得

要素 表示 、指定

表示内容

書 換え こ

(26)

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/

26

•

"

navigator.geolocation.getCurrentPosition(s

uccess, error)

"

、位置情報 取得 、成

功

success

処理、失敗

error

処理 実行さ

こ

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

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/

28

•

"new Image()"

img

要素 作

•

作

要素

src

属性 指定

画像 読

込

う

•

作

要素

"

取得要素

.appendChild(

作

要素

)"

HTML

追加

(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

•

以下 参考

ᵒ

Geolocation

利用

- Web API

ンター

|

MDN

(30)

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/

30

Web Storage

(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

•

ータ 保存可能

•

ータ キー 値

保存さ

ᵒ

例え キー

"

名前

"

、値

"

鈴木雅貴

"

•

設定 保存

使わ

(32)

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/

32

•

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

w

•

指定

色 背景色

(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

(34)

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/

34

•

"

document.getElementsByTagName(

要素名

)

"

指定

要素 取得

•

複数取得

、そ

1

目 いう意味

後

[0]

け

(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

•

2

種類あ

ー

う 、

使

う

指定

宣言

ᵒ

localStorage

閉

開い

ータ 残

い

ᵒ

sessionStorage

開い い 間 限

ー

タ 残

い

再読込 含

(36)

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/

36

•

"

ー

.setItem(

キー

,

値

)"

、

ー

値 保存

こ

•

今回 キー

bgcolor

い

(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

•

"if(

条件

) {

特定 処理

}"

、条件

特定 処理 実施さ

(38)

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/

38

•

"

ー

.getItem(

キー

)"

、キー 対応

値 取得

こ

(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

•

"

取得

要素

.style.

名

"

値

指定

こ

、指定

値

変更

こ

(40)

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/

40

•

"

指定

要素

.value"

値 指定

こ

、

ー

値 外

変更可能

(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

•

以下 参考

ᵒ

Web Storage API

使用

- Web API

ンター

| MDN

(42)

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/

42

(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

•

level1

ン

対象外

、

読

け

ー

わ

い

•

CodePen

う 手軽 試

環境 あ

、そ

利用

少

試

ᵒ

そ ほう 技術者

力

く

•

Mozilla Developer Network

日本語 多

く情報源

優秀

(44)

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/

44

参照

今ダウンロードする ( PDF - 44 ページ - 1.67 MB )

関連したドキュメント

(CO)HOMOLOGY OF TRIASSOCIATIVE ALGEBRAS DONALD YAU Received 24 October 2005; Revised 28 March 2006; Accepted 6 April 2006

The cohomology theory is applied to study algebraic deformations of triassociative algebras.. Copyright © 2006 Hindawi

The unique solvability of the problem is established

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,

THE MOMENTS OF THE AREA UNDER REFLECTED

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

1, and ∂ν∂ is the outer normal derivative

The study of the eigenvalue problem when the nonlinear term is placed in the equation, that is when one considers a quasilinear problem of the form −∆ p u = λ|u| p−2 u with

スターターローラ 取扱説明書第 4 版 1-21 SUS Corporation

■■ １．１ 梱包内容について ■

2050年カーボンニュートラルに向けた自動車業界の課題と取組

1 Copyright© Japan Automobile Manufacturers Association,

日本のピアノ曲 作曲家・作品解説 2017

In 1894, Taki was admitted to Tokyo Higher Normal Music School which eventually became independent as Tokyo Ongaku Gakkō (Tokyo Acad- emy of Music, now the Faculty of

Helping Nature Work 3-15 -13 Ferti-Kin

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