View
1
Download
0
Category
Preview:
Citation preview
© 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/
HTML5������������� �2 �������
© 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/
1
�� �
���"�,#-,#-
��������������������
������ ��
������(%'+-!�$ )*&����������������������������������
��������
© 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/
2
• - C O e Rgk a
• i H
.2 32
c2 3 3
.2 1522 2 2 2
ETWL SMWH b
© 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/
2
5
© 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/
4
HTML5 M W
HM b T 55
e HM bL T
© 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
����������
,
,
4 ¥5 L V
4 641 4 , C2
E , VC T HL L 4
4 ¥5 L V
4 41 4 , L
L L 4
������
5 5 CT H 2 5 5
BUM9 0 BU
© 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/
6
�����
����
���
���� ����
2
2
© 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/
7
HTML5 2 C
• 0 0ᵒ 4 tᵒ tᵒ Ceg
• gi pᵒ s o rC T4 gi B 5 t tᵒ a a unᵒ t 9
• t 9• m d gi o
© 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/
1.
© 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/
9
e
•ᵒ bMLg L c Tag Hol s S g
ni t
• ᵒ x bgS Tag P d
s Mg
• ᵒ ) H Pd MdDr L W IAF s
© 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/
10
• /41 : 0 4 42:93 3 :9 ( ) iE6 : . 41 : 0 4
ᵒ d R T d h l S doge pn
• c a b :20 : 0 4 - ��������- �� ��������������
• W T d b 4 :9 : 0 4- ��������- ����������������
/41 : 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/
11
ᵒ 5
5M
5M
http://testsv1.com
https://tech-testsv1.com
WebStorage
© 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/
12
• W :L U :SL :
0 3 . 1
L U SL b
. /.
http://testsv1.com/dira/test.html
http://testsv1.com/dirb/appliance.html
Wa
ᵒ 8 W R L
5M
W���� ������ �������
� �������� �������������� ������������
© 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/
13
•
ᵒ•
ᵒ•
S W
window.localStrage
window.sessionStrage
© 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/
14
•
•
sessionStorage.setItem(key,value)
setItem(key,value)
Web����� ���� )key ������(�$'+�value��������(�$'+�
sessionStorage.getItem(key)
getItem(key)
#����������%,*�(��� �&�(
!" #�����WebStorage ����null�*key ������(�$'+�
© 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/
15
•
•
sessionStorage.key = value
sessionStorage[ key ] = value
sessionStorage.key
sessionStorage[ key ]
© 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/
16
•
•
sessionStorage.removeItem(key)removeItem(key)
������������! key ���������"�
sessionStorage.clear()
clear()
Web�������� �����!
© 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/
17
•
•
sessionStorage.lengthlength
Web���� �� ���������"
sessionStorage.key indexkey�index�
����index�����"������������!�index ��#��
© 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/
18
•ᵒ
window.addEventListener(“storage”,StorageChange,false);
function StroageChange( e ){
/* WebStorage */
}
StorageEvent������
© 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/
19
• ᵒ
ᵒ
ᵒ
"date":"2017-03-20","title":“HTML5",
“memo”:“#%� ����"
{"date":"2017-03-20","title":"HTML5","memo":"#%� ����"
}
JavaScript��� �� JSON
JSON.stringify(JavaScript��� ���
JSON.parse(JSON)
JSON.stringify
JSON.parse
JSON�JavaScript ObjectNotation��(�"'+�$+���� ��������"'+������*&���!)������
© 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/
20
/ : 8 0/ t S
/ : 8 0/ v m a B
hnl v W e c w sC
1:: :/ : . 1:: :/ : .Cv W
p o cgr i o b g AE C D
. : 8 0/ v m a B
/ : 8 0/
© 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/
-
.2 - 2 -
© 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/
22
/:: 13 1
• /:: 13 12 91 / 5/:: 13 1
ᵒ h S h S W b• h S W b S eS h
• /:: 13 1ᵒ t e pm ma W
• Tr• mR k 309 5/ c e pm ma W
ᵒ ofsma W• ofs c w
ᵒ g ia pR• g M ia p w
ᵒ / . /• rn w
© 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/
23
/ .4/
• / .4// : .4/ :
ᵒ / .4/ T SE F F RIC W E
ᵒ / /4. T S5: 3/ 65 .
© 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/
24
•ᵒ
•ᵒ 1 H
����
���
������� �������
����
����
© 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/
25
•�����������!�
���������
��������� ����AP
WebSoket���� ���
������#�
�� ����������#�
TCP������ "
TCP������$�
open�����
send�����������! message�����
close�����
© 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/
26
•ᵒ
•ᵒ S
var websocket = new WebSocket(“ws://www.testsv1.com:3000");
WebSocket("url",[protocols]);
WebSocket��������&��"��url �������#���!&�URL
'.(�������ws� ��wss��� �)*��protocol����%��$�-/ �+0,
soketobj.onopen = function(){/* S */
}
© 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/
27
���������
• ����websocket.send(data)
send.(data)������data ��� ��
�����Blob�ArrayBuffer�ArrayBufferView�����true����
false����
© 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/
28
• �����$#ᵒ �����$#" �������������������������� !ᵒ $#����%'websocket.onmessage = function( e ) {
alert(e.data);(&)
};
��������
MessageEvent����
����
�� �� message��� �
message��� �
HTML5� chat HTML5� chat
© 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/
29
��������
• ������!��� "����� "(*
•������"�ᵒ ������!��� "����� "(* ,-�����$%
websocket.close()
close([code],[reason])
������� �������"#code ���������� ��!�reason�������� � ��!�
websocket.onclose=function(e){/* +'�(*�����#�)& */
}
© 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/
30
��������
• ������������ᵒ ������ ��
• ������� ����� �������
perl������������� daemon
© 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/
31
•ᵒ E
ᵒ
HTTP RequestHTTP Response
���� ������� ������� ���
message�� ���message�� ���message�� ���
���� � ���
message�� ��� ���� ���event streams
event streams
event streams
event streams
Content-Type:text/event-streamTransfer-Encoding:chunked
HTTP Response��
© 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/
32
• Uᵒ T F TM M Iᵒ T Eᵒ n T / -ᵒ Uᵒ S E am
/ / -
S e amevent �������! data �� �����id ���ID�lastEventId�retry ��������#$������%�
�����" � ������
© 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/
33
• �������
����������������
data: seman
id:name��data: Osaka
id:address��data: seman@test.com
id:mail��
���������� �id���������� ������
© 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/
34
• Oᵒ O
• Eᵒ
E
var es = new EventSource(“http://www.testsv1.com/event.cgi”)
EventSource(url)
EventSource�� ����������url�������������URL
es.onopen = function(e){/* S */
}
© 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/
35
•ᵒ
ᵒ
es.onmessage = function( e ){alert(e.data);(E)
}
MessageEvent������
© 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/
36
SR E P TH
A. Content-Type:text/event-streamTransfer-Encoding:chunked
B. Content-Type:text/event-streamTransfer-Encoding:compress
C. Content-Type:text/event-sourceTransfer-Encoding:chunked
D. Content-Type:text/event-sourceTransfer-Encoding:compress
© 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/
.
© 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/
38
O M
• O Mᵒ C LM M
Rᵒ M H L S T O M
HTML����
WebAP
����HTML����
WebAP
����
www.testsv1.com
www.testsv2.com
www.testsv1.com
© 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/
39
• RN J LSPᵒ
ᵒ
ᵒ J H C C M CX
• J LSP O
ᵒ
ᵒ
ᵒ
J LSP
© 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/
40
• -/0AA CCC C 1/ 3
ᵒ h ick aed P osᵒ ickp wuTr t
• *33 A * C 4 A 2 A 62- a d ickr l 11. : | ia dg
A n H- �������� 11. : ����������������� ���
• *33 A * C -- if d aedOR ick- O n P R ick if d aed
a d ick S -/0
© 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/
41
Open the Future with HTML5.
Recommended