JavaScript API

(1)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

) Z 9

(0 LSKA PI

M N TH a I

00 S

121 ) 5

U

(2)

2

•

ᵒ NTT

ᵒ 1,2

• 1

• VR

(3)

3

HTML5

1

&

1

Ver2.0

(4)

4

•

• JavaScript API

• API

ᵒ API Video, Canvas

ᵒ API Web Storage

(5)

5

(6)

6

• JavaScript API JavaScript

• API

(7)

7

JavaScript API

(8)

8

• Web

ᵒ Web

• ECMAScript JavaS

cript

• ES5 ES6 ES2018 ECMAScript +

JavaScript

(9)

9

•

JavaScript

(10)

10

• script

JavaScript 1

/

(11)

11

• script src

JavaScript 2

- / < . - /! . = . - / .- .". - /! . ". - /

(12)

12

• Application Programming Interface

•

API

(13)

13

• Web JavaScript

Web

•

API W eb

ᵒ

JavaScript API

(14)

14

• CodePen

ᵒ Web HTML/CSS/JavaScript

ᵒ [Create]→[Pen]

ᵒ ᵒ

(15)

15

Video

video

(16)

16

• video

•

• JavaScript API

• ( )

video

(17)

17

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

• [ ] [ ]

(18)

18

HTML

% 1 / 1 0 - - => %" 1 /

% 1 - - /

% < / - < %"

% < / - / %"

%" 1

(19)

19

• "var "

ᵒ let const var

•

L . B ,; . ;. = . ., E

. ,; . ;. = . ., .

= ( . ) . . , , " /; ,

B L . S

. =

(20)

20

• API

• "document.querySelector( )"

. E L . S

. ,; . ;. = . ., .

= ( . ) . . , , " /; , B L . E

. =

(21)

21

• API

• “ .addEventListener()”

) B L E B .

) ) , (. , , . / " . . , )

;

(22)

22

click

mouseenter mouseleave focus

keydown keyup

change input

DOMContentLoaded HTML load

(23)

23

• video API

video

B

) ) , (. , , . / " . )

. , )

;

E B

) , ) , (. , , . / " . ) , E

. , ) ,

;

(24)

24

•

• | MDN

• HTMLMediaElement | MDN

video

(25)

25

Web Storage

(26)

26

• API

•

ᵒ " " " "

•

Web Storage API

(27)

27

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

•

(28)

28

HTML

" "

(29)

29

• "document.getElementsByTagName( )"

• 1 [0]

. 0 =

; . 0 ( 0 / ( ' ) . 0

(30)

30

• 2

ᵒ localStorage

ᵒ sessionStorage (

)

/

(31)

31

• " .setItem( , )"

• bgcolor

; ( ) .

' / ( ) . , '.

(32)

32

• " .value"

P I E C E L

. , ,//( ; . , = .

P I

/ ( ; ,. = /' ; , =

P I .

; , ; ) . ; , =

(33)

33

• "if( ) { }"

'. ./

) ./ ( ( ( '. ./

'. ./ I

(34)

34

• " .getItem( )"

( ). ./ ;

'/ ). ./ ./' ( ). ./

(35)

35

• " .style. "

; / -

-. - / - -

(36)

36

• " .value"

; / . = =

(37)

37

•

ᵒ Web Storage API | MDN

Web Storage

(38)

38

Canvas

(39)

39

• canvas JavaScript

•

Canvas

(40)

40

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

•

(41)

41

HTML

" "

(42)

42

• " canvas .getContext('2d')"

2 ;CE

2 .2 "/. ) . .2 2

B= ;CE

2 "/. ( 2 .

(43)

43

• " .beginPath()"

/ . ()

(44)

44

• “ .moveTo( )”

ᵒ (0,0)

• " .lineTo( )"

; 13 .02 )0 (

13 ,/ )0 (

(45)

45

• " .closePath()"

• " .stroke()"

./ .(

./ . )

(46)

46

•

ᵒ canvas | MDN

Canvas

(47)

47

(48)

48

• level1

• CodePen

ᵒ

• Mozilla Developer Network

(49)

49

• 7

•

ᵒ

•

• 7

(50)

50

Open the Future with HTML5.

@

. -