Hello HTML5

Blue
Ocean
BO3702

HTML5
(CIP)
HTML5: /
. -- . -- : , 2013.09
;

ISBN 978-986-6432-68-2

1.HTML() 2. 3.

23441

(02)2922-2396

(02)2922-0464

(07)2265267 236

312.1695

102015952

20139

Tel : (02)2965-8212

Copyright 2013 by Blue Ocean Educational Service INC.

HTML5 Web 2012 5 HTML5

HTML5 HTML5
2012 12
HTML5 2013.1
HTML5
Web HTML5

HTML
HTML5 HTML
HTMLCSS JavaScript HTML5
HTML5
Bootstrap
jQuery jQuery
jQuery Mobile
HTML5
HTML
HTML5 HTML5

sean@kangting.tw
2013.9

 contentes

Hello HTML5
1.1
1.2
1.3
1.4
1.5
1.6

HTML............................................................................. 1-2
............ 1-4
Document Object Model
HTML JavaScript ....................................................... 1-6
CSS................................................................................ 1-8
HTML HTML5........................................................ 1-11
............................................................................... 1-12
SUMMARY......................................................................... 1-13
........................................................................................ 1-14

HTML CSS
2.1
2.2
2.3
2.4
2.5
2.6
2.7
2.8
2.9
2.10
2.11

............................................................... 2-2
.................................................................................. 2-4
HTML ............................................................................. 2-9
............................................................................... 2-20
CSS............................................................................. 2-25
............................................................................... 2-35
. ............................................................... 2-39
....................................................... 2-42
CSS .............................................................. 2-52
..................................................................... 2-58
iframe......................................................................... 2-62
SUMMARY......................................................................... 2-63
........................................................................................ 2-64

3.1
3.2
3.3
3.4
3.5
3.6
3.7
3.8
3.9

............................................................... 3-2
HTML5 ...................................................... 3-5
....................................................... 3-13
............................................. 3-16
. ............................................................... 3-20
............................................................ 3-25
IE . .............................................................. 3-26
Bootstrap. ................................................. 3-28
BootStrap ............................................ 3-33
SUMMARY......................................................................... 3-37
........................................................................................ 3-38

JavaScript
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
4.10
4.11
4.12

JavaScript.................................................................. 4-2
.................................................................................. 4-4
........................................................................................... 4-5
.................................................................................. 4-7
............................................................ 4-13
. .................................................................................. 4-20
........................................................................................ 4-29
............................................................................... 4-33
........................................................................................ 4-38
..................................................................... 4-42
. ............................................................... 4-46
Window ..................................................................... 4-48

SUMMARY........................................................................ 4-51
........................................................................................ 4-52

5.1
5.2
5.3
5.4
5.5

........................................................................ 5-2
............................................................... 5-4

5.6
5.7
5.8
5.9

CSS............................................................... 5-25
..................................................................... 5-28

............................. 5-6
............................................. 5-17
getElementsByXxx()
........................................................................ 5-23

.................................... 5-30
JavaScript...................................................... 5-36
SUMMARY......................................................................... 5-38
........................................................................................ 5-39

6.1
6.2
6.3
6.4
6.5

.......................................................... 6-2
window ...................................................................... 6-12
............................................................................... 6-19
............................................................................... 6-25
............................................................................... 6-28
SUMMARY......................................................................... 6-30
........................................................................................ 6-31

Canvas
7.1
7.2
7.3
7.4

.................................................................................. 7-2
.................................................................................. 7-2
............................................................................... 7-15
............................................................................... 7-19

7.5
7.6
7.7

............................................................................... 7-24
............................................................................... 7-25
.......................................................................... 7-28
SUMMARY......................................................................... 7-32
........................................................................................ 7-33

8.1
8.2
8.3
8.4
8.5

........................................................................ 8-2
..................................................... 8-6
video ................................................................. 8-12
audio. ........................................................ 8-15
..................................................................... 8-16
SUMMARY ........................................................................ 8-18
........................................................................................ 8-19

9.1
9.2
9.3
9.4
9.5
9.6
9.7
9.8
9.9
9.10
9.11

........................................................................ 9-2
.......................................... 9-6
cache manifest
.................................................................................. 9-8
............................................................................... 9-10
Cookies............................................................................... 9-13
Web ............................................................................. 9-15
localStorage sessionStorage ............ 9-21
.......................................................................... 9-24
..................................................................... 9-29
..................................................................... 9-33
............................................................................... 9-35
SUMMARY......................................................................... 9-37
........................................................................................ 9-38


1010.1
10.2
10.3
10.4
10.5
10.6
10.7

..................................................................... 10-2
. ............................................................... 10-5
............................................................................ 10-13
iframe ............................................................ 10-16
......................................................... 10-18
................................. 10-21
Server Sent Events. ........... 10-24
SUMMARY...................................................................... 10-28
..................................................................................... 10-29

jQuery
11 11.1

jQuery.......................................................... 11-2
jQuery ......................................................... 11-4

11.2
11.3 $() jQuery. ................................................ 11-5
11.4 ............................................................ 11-7
11.5 ready() ...........................................................11-10
11.6 .......................................................... 11-11
11.7 ...................................................................11-14
11.8 ...................................................................11-15
11.9 ...................................................................11-22
11.10 ........................................................................11-27
11.11 jQuery . ................................................................11-39
SUMMARY................................................................... 11-45
.................................................................................. 11-46

jQuery Mobile
1212.1

....................................................... 12-2
jQueryMobile ........................................................ 12-5

12.2
12.3 HTML5 .................................................... 12-8
12.4 data-role ....................................... 12-10
12.5 ..........................................................12-11
12.6 ......................................................... 12-13
12.7 ............................................................................ 12-15
12.8 ............................................................. 12-22
12.9 .................................................................. 12-28
12.10 ................................. 12-33
SUMMARY.................................................................. 12-37
................................................................................. 12-38

 Example of an index

Hello HTML5

HTML CSS

Hello

input
input / HTML5 type
style

box-sizing
overow

iframe

JavaScript

BootStrap

1-7

2-3
2-5
2-21
2-23
2-27
2-28
2-30
2-36
2-37
2-46
2-51
2-53
2-54
2-55
2-56
2-59
2-62

3-3
3-4
3-34

4-8

isNaN
typeof()

if
if-else
switch
for
while
do/while
break
continue

return

for

4-9
4-12
4-14
4-14
4-16
4-20
4-21
4-22
4-24
4-25
4-26
4-27
4-28
4-28
4-30
4-31
4-34
4-35
4-41
4-47
4-49
4-50

querySelector
getElementsByXxx()

setAttribute()

insertBefore() appendChild()

5-2
5-17
5-24
5-26
5-27
5-29
5-31
5-32
5-34

JavaScript

Canvas

bubble

this
load
unload
beforeunload
DOMContentLoaded
resize

keydown
input

canvas

stoke() ll()

5-35
5-37

6-4
6-5
6-7
6-9
6-11
6-12
6-13
6-15
6-16
6-17
6-18
6-19
6-21
6-22
6-24
6-26
6-27
6-29

7-4
7-6
7-7
7-10
7-14
7-16
7-17
7-20
7-23

setInterval() canvas

10

video
source viode

CACHE NETWORK
FALLBACK
Cookies
Storage

sessonStorage localStorage
File

targetOrigin
iframe

7-24
7-26
7-27

8-3
8-6
8-7
8-9
8-11
8-14

9-2
9-4
9-10
9-12
9-14
9-17
9-20
9-22
9-30
9-32
9-33
9-35

10-7
10-9
10-11
10-14
10-17

11

Web Workers
Web Workers
Worker
EventSource

jQuery
$

ready()

toggleClass
CSS

bind()
unbind()

delegate()

12 Query Mobile

10-20
10-22
10-23
10-27

jQuery Mobile
data-*

11-6
11-8
11-10
11-12
11-14
11-16
11-18
11-20
11-21
11-25
11-27
11-29
11-31
11-33
11-34
11-36
11-37
11-40
11-42
11-44

12-6
12-9
12-12
12-14
12-16

jQuery Mobile

12-19
12-29
12-30
12-32