) Z9(0LSKAPIMN THaU00S121 )I

5The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.

+1)• -0*ᵒ NTT



 #$ᵒ 1,2 !

• 1%(/.
• 2&'VR",The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

2© LPI-Japan / EDUCO all rights reserved.

Ver2.0"%

HTML5
 #$ 1&!
&1

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

3© LPI-Japan / EDUCO all rights reserved.

$#&

• *+.-('• JavaScript API/%• ),API*ᵒ APIVideo, Canvas

ᵒ "!APIWeb Storage

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

4© LPI-Japan / EDUCO all rights reserved.

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

5© LPI-Japan / EDUCO all rights reserved.

58<;• JavaScript API)6JavaScript#'!&$(!
)6/• API9.

• ,+API4#'!&$(!17)6/• -04 API   %" 3: 
*2 
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

6© LPI-Japan / EDUCO all rights reserved.

JavaScript API

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/7© LPI-Japan / EDUCO all rights reserved.

JavaScript

• Web!3.1-;%=2$"'/4ᵒ ,Web$(• ECMAScript cript 8+2&76*

• ES5ES6ES201859):0>JavaS

ECMAScript<+#'The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

8© LPI-Japan / EDUCO all rights reserved.

 JavaScript• $1#!*• %)• "&0,'.• +2(!*/"•%)The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

9© LPI-Japan / EDUCO all rights reserved.

 JavaScript 1• script
/The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

10© LPI-Japan / EDUCO all rights reserved.

JavaScript!2

• script"src$
#- /. - / ..". - /! .





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

11© LPI-Japan / EDUCO all rights reserved.

API 

• Application Programming Interface*• 
%" 

& !(#')%" "$

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

12© LPI-Japan / EDUCO all rights reserved.

JavaScript API• Web47$(AN*,#8OF JavaScript
PQE?Web47$(;?B  • CKAN*,#8OF 58-60"!':/:.OF02#*!&+*=D%37#:<*19)OF @GAPIWeb47$(>M ᵒ JIL

H The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

13© LPI-Japan / EDUCO all rights reserved.

#"6&87• CodePen2'ᵒ Web!$HTML/CSS/JavaScript14ᵒ 9[Create]→[Pen]%5/*ᵒ 1

-3(0ᵒ ;),

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

14© LPI-Japan / EDUCO all rights reserved.

Videovideo

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

15© LPI-Japan / EDUCO all rights reserved.

video"23)• video"2•-*.+

*3)

&'

• JavaScript API,&'%$#1.+•-*/0( *)!(.+The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

16© LPI-Japan / EDUCO all rights reserved.

• https://codepen.io/suzukima/pen/qmzRby• [ ]

[]

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

17© LPI-Japan / EDUCO all rights reserved.

HTML% 1 /% 1 %%%" 11 0
< /< /--=>%" 1 //-</%"%"The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

18© LPI-Japan / EDUCO all rights reserved.

• "var " ᵒ let  const •  var



L .
.

=B,; .

,; .
;. = . .,;. = . .,.

E( . ) . . , , " /; ,BL .
S.

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

19© LPI-Japan / EDUCO all rights reserved.

• API• "document.querySelector(.
,; .

.

=E;. = . .,

L.

)"

S.

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

=The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/20© LPI-Japan / EDUCO all rights reserved.

•API • “.addEventListener()”
   ))). ,), (. , ,B
L. / ".

EB.

;

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/21© LPI-Japan / EDUCO all rights reserved.


clickmouseentermouseleavefocus
keydown
keyupchange
DOMContentLoadedload
*  * %*&
%
input( $#)
HTML +   -"
!,( +  ' "
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

22© LPI-Japan / EDUCO all rights reserved.

video• video ))B, (. , ,API

. / ".

). ,)

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

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

23© LPI-Japan / EDUCO all rights reserved.

video

• • 
| MDN• HTMLMediaElement | MDN

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

24© LPI-Japan / EDUCO all rights reserved.

Web Storage
 

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

25© LPI-Japan / EDUCO all rights reserved.

Web Storage API• !$-'%• 

$-,APIᵒ +")"" ,"/(0."• &#$-*The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

26© LPI-Japan / EDUCO all rights reserved.

• https://codepen.io/suzukima/pen/QvXvZw• •  

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

27© LPI-Japan / EDUCO all rights reserved.

HTML""The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/28© LPI-Japan / EDUCO all rights reserved.



• "document.getElementsByTagName( • !




. 0 =; . 0 (0 /)"

1 [0]

(')

. 0

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/29© LPI-Japan / EDUCO all rights reserved.

/$• 2,-/$

ᵒ localStorage0(%"# )ᵒ sessionStorage#&+)!*)('.

/The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/30© LPI-Japan / EDUCO all rights reserved.



• ".setItem(, )"   • 

bgcolor;'( ) .
/ ( ) .

,







'.

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/31© LPI-Japan / EDUCO all rights reserved.





• " .value"  P.

I,,//(P/ ( ;P; , ; )E;

C. ,I,.
= /'I.
; ,=E



L= .
; ,=.

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

32© LPI-Japan / EDUCO all rights reserved.

 

• "if() {   }" )./'. ./( ( ('. ./'. ./





I

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

33© LPI-Japan / EDUCO all rights reserved.

 • ".getItem()"  ( ). ./'/ ). ././'





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

34© LPI-Japan / EDUCO all rights reserved.





• " .style."    ;-.

-//-






-

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/35© LPI-Japan / EDUCO all rights reserved.



• ".value"  ;/.

=

=The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/36© LPI-Japan / EDUCO all rights reserved.

Web Storage• 

ᵒ Web Storage API




| MDN

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/37© LPI-Japan / EDUCO all rights reserved.

Canvas 

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

38© LPI-Japan / EDUCO all rights reserved.

Canvas• canvas"/*JavaScript-,

1'• '0,(•1'+%.)!'#$&

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

39© LPI-Japan / EDUCO all rights reserved.

• https://codepen.io/suzukima/pen/owxNMg• The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

40© LPI-Japan / EDUCO all rights reserved.

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

41© LPI-Japan / EDUCO all rights reserved.

 • "canvas.getContext('2d')"
  
22B=;CE.2 "/. ) . .2;CE2"/. ( 2 .

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

42© LPI-Japan / EDUCO all rights reserved.



• "



 .beginPath()"



/. ()

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

43© LPI-Japan / EDUCO all rights reserved.

#• “.moveTo("!)”"!
ᵒ "!



(0,0)• ".lineTo("!)""!

"!

;
13 .02 )0(13 ,/ )0(The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

44© LPI-Japan / EDUCO all rights reserved.

• ".closePath()"• "

.stroke()"./

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

45© LPI-Japan / EDUCO all rights reserved.

Canvas• ᵒ canvas  | MDN

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

46© LPI-Japan / EDUCO all rights reserved.The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/47© LPI-Japan / EDUCO all rights reserved.

$J• level1+/).,0)5A8
(-*%" I'

• CodePen!4G? #EC#$&97 > ? #ᵒ @D36

• Mozilla Developer Network 12B;=H<:F

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/48© LPI-Japan / EDUCO all rights reserved.

-/(* $ 

• 7,
• &%1
4"#ᵒ "#0

2
 



+3• -/!.2)'• 7,The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/49© LPI-Japan / EDUCO all rights reserved.

Open the Future with HTML5.

@.

-The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/50© LPI-Japan / EDUCO all rights reserved.