Вы находитесь на странице: 1из 480

-

-
-
2012

681.3.068
32.973.26-018.1
15
- .

15

HTML5. : . . .:
-, 2012. 480 .: .
ISBN 978-5-9775-0805-6
, HTML
HTML5. . ,
-, -,
, ,
- CSS3. -, , . , -, ,
, HTML5.

-
681.3.068
32.973.26-018.1

:

.
.

Authorized translation of the English edition of HTML5: The Missing Manual by Matthew MacDonald, ISBN: 978-1-44930239-9, Copyright 2011 O'Reilly Media, Inc. This translation is published and sold by permission of O'Reilly Media,
Inc., the owner of all rights to publish and sell the same.
: ISBN: 978-1-449-30239-9, Copyright 2011 O'Reilly Media,
Inc. O'Reilly Media, Inc.,
.
30.04.12.
70 1001/16. . . . . 38,7.
2000 .
"-", 190005, -, ., 29.
""
199034, -, 9 , 12/28

ISBN 978-1-449-30239-9 (.)


ISBN 978-5-9775-0805-6 (.)

2011 O'Reilly Media, Inc.


"-", 2012

........................................................................................................................ 13
............................................................................................................... 13
.......................................................................................................................... 15
? .............................................................................. 16
HTML5 ....................................................................................................... 17
HTML5 ................................................................................................ 18
HTML5 ?.......................................................................................................... 18
?............................................................................................................................ 19
.................................................................................................................... 21
CD .................................................................................................................. 21
.............................................................................. 21

I. ................................................. 23
1. HTML5 ................................................................................. 25
HTML5 ................................................................................................................. 25
XHTML 1.0: ............................................................................... 26
XHTML 2: ......................................................................................... 27
HTML5: ............................................................................................. 27
HTML: ............................................................................................................... 29
HTML5................................................................................................. 30
1. ............................................................................................. 30
2. ................................................................................. 32
3. ......................................................................................... 32
HTML5 .................................................................................... 33
HTML5 ...................................................................................... 35
............................................................................................................. 37
........................................................................................................................................ 37
................................................................................................. 38
JavaScript- .................................................................................................. 38
.............................................................................................................. 39

HTML5......................................................................... 40
........................................................................................................... 40
HTML5 ......................................................................................................... 41
XHTML........................................................................................................... 44
HTML5 ..................................................................................................... 46
........................................................................................................ 46
............................................................................................................ 47
.................................................................................................. 47
............................................................... 48
......................................................................................... 49
......................................................................................... 50
HTML5 .......................................................................................... 51
? ......................................................................... 52
................................................................................... 55
Modernizr ........................................................... 57
..................................................... 60

2. .............................................. 62
? ........................................................................................... 63
HTML- ................................................................. 65
................................................................. 66
HTML5 ............................................................. 69
, <hgroup> ................................................................ 72
<figure> .............................................................. 73
<aside> ............................................. 76
........................................................ 77
................................................ 80
........................................................................................................... 80
<nav>........................................ 83
............................................................................................................ 88
...................................................................................................................................... 91
HTML5 ...................................................................... 92
-? ............................................................................... 93
....................................................................................................................... 94
............................................................................................ 96
.............................................................................................. 98

3. ................................................................................. 102
..................................................................................... 103
<time> .............................................. 104
JavaScript- <output> ...................................................................... 106
<mark> ................................................ 107
, ............................................................................. 109
Accessible Rich Internet Applications .................................................................. 110
Resource Description Framework ........................................................................ 111
.................................................................................................................... 111
hCard ............ 112
hCalendar ................................. 117
...................................................................................................................... 118

.......................................................................................... 121
....................................................................................... 122
........................................................................ 126

II. - ............................. 131


4. - .......................................................................... 133
? ........................................................................................................................ 134
HTML- ........................................................................... 136
........................................................................................................ 140
: ................................................................................................. 142
: ! ........................................................................................................ 142
HTML5? ........................................................................................ 143
........................................................................................................ 145
................................................................................... 146
................................................................. 147
.......................................................................................... 149
...................................................................................... 150
<input>................................................................................................... 154
................................................................................................ 156
URL- .......................................................................................................................... 157
......................................................................................................................... 157
............................................................................................................ 158
.................................................................................................................................... 158
.............................................................................................................................. 159
........................................................................................................................ 160
...................................................................................................................................... 161
.......................................................................................................................... 162
<datalist> ................................................................................................ 162
<progress> <meter>.................................................. 165
<command> <menu> ....................... 168
- HTML- ............................................................................................ 168
contentEditable................................... 169
designMode ......................................... 171

5. ............................................................................................... 174
.......................... 175
HTML5........................................................................................ 176
<audio> .................................................. 177
<video>................................................... 179
.................................................................................... 181
................................................................................................... 182
.............................................................. 184
: ................................................. 186
<source> ............................................................................................................... 187
Flash .................................................................................................... 188
JavaScript ........................................................................... 193
........................................................................................ 193
.............................................................................. 197

JavaScript.............................................................................................. 201
..................................................................................................... 203

6. .................................................................... 205
..................................................................................................... 206
..................................................................................................................... 208
..................................................................................................................... 211
...................................................................................................................... 214
................................................................................................................... 217
....................................................................................................................... 220
................................................................................. 223
.................................................................................................... 223
............................................................................................................ 225
....................................................................................... 227
......................................................................................... 231
......................................................................................................... 231
........................................ 233

7. ................................................ 235
? ......................................................................................... 235
............................................................................................ 236
, ................................................... 238
........................................................................................................ 240
.......................................................................................................... 241
.................................................................................................................... 242
.................................................................................... 244
................................................................................................ 245
: .................................................................................. 249
? ..................................................................................... 254
.................................................................... 255
...................................... 259
.................................................................................................................... 261
............................................................................................................... 262
........................................................................................ 263
: "" .................................................................................. 268
................................................................................................. 270
................................................................................................................. 272
........................................ 274

8. CSS3....................................... 278
CSS3 ............................................................................................ 279
1: , ........................................................................... 279
2: CSS3 ................. 280
3: Modernizr ............................. 281
, ............................................................. 284
........................................................................................................ 286
- ....................................................................................................... 287
................................................................................................................. 289
- Google ............................................................................................................ 292

.......................................................................................... 295
.......................................................................... 296
............................................................................................. 298
............................................................................. 299
............................................................................ 303
.......................................................................................... 305
................................................................................ 306
..................................................................................................... 308
....................................................................................................................... 308
................................................................................................................ 310
....................................................................................................................................... 311
...................................................................................................................................... 313
............................................................................................................................ 314
..................................................................................................... 316
................................................................................................. 317
.................................................................................... 319
................................................................................................................... 320

III. - ..... 325


9. ........................................................................................ 327
- .............................................................................................................. 328
............................................................................................................. 329
: ....................................... 331
- ............................................................................ 334
- .................................................................... 334
............................................................................................................ 334
.................................................................................. 335
...................................................................................................... 336
.......................................................................................................... 337
......................................................................... 339
............................................................................................................................. 341
................................................................................................................. 342
File API .................................................................... 342
.................................................................................................... 343
<input>.................................................................................................... 345
............................................................. 346
................................................................................................ 346

10. ........................................................................ 351


........................................................................... 352
........................................................................................................... 353
.................................................................................................. 356
- ............................................................................... 356
............................................................................................ 359
............................................................. 362
......................................................................................... 362
........................................................................................... 363
........................................................................................ 364

10

...................................................................................................... 366
JavaScript ............................................... 368

11. - ............................................................. 371


- .......................................................................................... 372
XMLHttpRequest ..................................................................................................... 373
- ........................................................................................... 374
..................................................................................................... 374
- .......................................................................................... 376
........................................................................................ 378
.............................................................................................. 382
............................................................................................................. 383
.................................................. 384
- .............................................................................. 387
........................................................................... 388
-................................................................................................................................... 390
- ..................................................................................... 391
- .............................................................................................. 393
- .............................................................................................. 394

12. JavaScript ............................. 396


.................................................................................................................................. 397
.............................................................................................. 398
.................................................................................. 401
.............................................................................................................. 403
.................................................................................... 405
............................................................................................................ 406
.......................................................................... 410
.................................................................................................................. 411
.............................................................................................................. 413
................................................................... 415
- ................................................................................... 419
................................................................................. 419
.............................................................................. 420
............................................................................................ 423
URL.................................................................................................................... 424
: hashbang URL ............................................................................ 425
HTML5-: .................................................................................... 426
.......................................................................... 429

IV. ..................................................................................... 433


1. CSS ..................................................... 435
-............................................................................................ 435
.......................................................................................................... 436
CSS....................................................................................................................... 437
........................................................... 438
........................................................................................ 439

11

.................................................................................................... 439
<div> ............................................ 439
................................................................................................ 440
...................................................................................................... 441
................................................................................................................. 442
.................................................................................................. 443
.......................................................................................................... 444
..................................................................................................... 445

2. JavaScript ......................................... 450


JavaScript - ........................................................................... 451
..................................................................................................... 451
..................................................................................................... 453
JavaScript .............................................................. 455
................................................................................................... 456
JavaScript....................................................................... 458
......................................................................................................................... 458
null........................................................................................................................ 459
........................................................................................ 459
.................................................................................................. 460
................................................................................................. 461
............................................................................................................ 462
................................................................................................................................... 464
............................................................................................................................... 465
, ........................................................ 466
................................................................................................... 467
.......................................................................................... 468
........................................................................... 470
..................................................................................... 472

.............................................................................................. 475

12


- (Matthew MacDonald)
, -
. - " -.
"1 (Creating a Website: The Missing Manual).
, , "Excel 2007.
"2 (Excel 2010: The Missing Manual).

, , " . " (Your Brain: The Missing Manual) " .
" (Your Body: The Missing Manual).

. "Missing Manual",
, HTML5,
,
. , ,
, , ,
.
, , ,
. , ,
, (Razia Hamid), (Faria)
(Maya Brenna). !
-
1

- . Web-. . .: , 2010.
- . Excel 2007. . .: -, ,
2008.
2

14


, HTML5
HTML -. .
HTML5 . ,
, HTML. HTML5 , . ,
, ,
. , , , , , , Flash.
, JavaScript,
- , , .
HTML5 .
, "HTML5" . ( ,
HTML5, ,
.) , "HTML5" "HTML5 " , ,
" -".
HTML5 : HTML5
, HTML5,
.
HTML5 . HTML5; ,
, .
, , HTML5
-. , Apple Google; W3C
(World Wide Web Consortium, )
XHTML,
HTML5; ,

16

. ,
- -,
. 1.

. 1. ( , - )
- , ,
, Flash. HTML5, (
), JavaScript
. HTML5 "",
7

?
HTML5
HTML. ,
- -. .

17

-. ,

- , , ,
HTML , . -,
- .
. -

CSS (Cascading Style Sheet, ),


- . , , ,
-. , 1. 1
, , - .
JavaScript. , - JavaScript

. HTML5,
-, JavaScript
. - ,
JavaScript, 2
- .
, .

JavaScript .
, , .
-.

HTML5
HTML5 ,
HTML. , ( Windows) TextEdit (
Mac). ( Adobe Dreamweaver
Microsoft Expression Web) ,
HTML5. HTML5 , -,
- HTML5.

, , , -, Windows Mac
OS X HTML5 .

18

HTML5
HTML5 :
? , .
, HTML5 .
,
( -, , ). . ,
HTML5 .
, HTML5, :
Internet Explorer 9 ;
Firefox 3.5 ;
Google Chrome 8 ;
Safari 4 ;
Opera 10.5 .
HTML5 .
, HTML5 Firefox 5 , Firefox 3.5.
HTML5
. , ,
, .
- http://caniuse.com,
. (
. " ?" 1.)

, ,
. .
, HTML5, ,
. ""
, .

HTML5 ?
: . Internet
Explorer 6, 10
-, ,
HTML5. , HTML5
,
HTML.

19

, HTML5 . , HTML5 ( , Google, YouTube Wikipedia, ), ,


HTML5 . ,
- .

,
. ,
. - , , ,
.

, ,
,
. , HTML5
, , ,
. , -
, . , ,

.
, HTML5
W3C (working draft). ,
, ,
(candidate recommendation),
- 2012 .
(recommendation) , . .
. , . .
, , HTML5,
.

?
HTML5.
I. .
1 " HTML5" , HTML

HTML5. HTML5, , , .
2 " " -

HTML5 ,

20

. , ,
- .
3 " "

, .
, -, , ,
, Google.
II. -.
4 " -" ,

HTML5 - , , , . HTML5 .
5 " " -

HTML5 . , , , ,
.
6 " " -

. ,
, ( JavaScript).
7 " "

, , , , .
8 " CSS3" -

CSS, HTML5. ,
.
III. -.
9 " " -

,
. ( cookies, .)

JavaScript- -, .
10 " "

, -
.

21

11 " -" -

-. XMLHttpRequest, JavaScript - . :
, , -.
12 " JavaScript"

, . , , . . ,
, URL
.
, ,
HTML5. 1 CSS, 2 JavaScript.


, , .
, ,
- .

CD
-, , . http://missingmanuals.com/cds/html5mm. ,
, URL -,
-.

,
. . , . 1.1 c:\HTML5\Chapter01\
SuperSimpleHTML5.html, ,
SuperSimpleHTML5.html.



http://www.prosetech.com/html5/.
, .
, . . HTML5 -

22

,
-. ( ,
.) -,
, , , .

, - .


1.

HTML5

2.

3.

HTML5

HTML ,
, HTML5.
, HTML , XXI .
W3C (World Wide Web Consortium, ),

, HTML 1998 .,
. W3C
HTML XHTML. HTML .
"" -
, , .
, HTML
.
HTML5,
. ,
HTML5, , ,
-.

HTML5
, HTML -.
HTML . ,
- ( , ,
Firefox Chrome).

. HTML 1988 . W3C

26

I.

XML
XHTML 1.0.

XHTML 1.0:
XHTML ,
HTML, .
, HTML, XHTML.
, ,
:
<hl> <i></i></h1>

:
<hl> <i></h1></i>

,
"", ,
. XHTML. XHTML (
- -,
Dreamweaver), , . - , . .
, - ,
.
XHTML . ,
-, XHTML.

, HTML. XHTML XML, , ,
XHTML .
XHTML . , , :
XHTML, , . , XHTML, . ,
- HTML-
XHTML.

1. HTML5

27

. , XHTML, .

XHTML 2:
, ,
XHTML 2. ,
, XHTML 2.
XHTML 2 , HTML. , (<hl>, <h2>, <h3> . .)
<h> , -.
<a> , - , alt <img>
.
XHTML 2.
, . , ( -),
, .
XHTML 2 , -, <b> (
), <i> ( ) <iframe> ( - ).
, , . XHTML 2 ,
.

HTML5:
( 2004 .) .
, ( ""
) HTML, ,
, - .
, HTML .
JavaScript HTML
-, , ,
, . - , . JavaScript, JavaScript, -,
-.

I.

28

.
, " ", .
, Opera Software
( Opera) Mozilla Foundation (
Firefox) XHTML , . ,
Opera, Mozilla Apple WHATWG (Web Hypertext Application
Technology Working Group, ) .
HTML,
, , . , Web Applications 1.0 Web Forms 2.0.
HTML5.

, 5 HTML5 :
HTML ( HTML XHTML
4.01). , , , . . HTML5
, -
HTML 4.01, XHTML ( ), JavaScript.
: HTML5 XHTML, HTML.

2000 . WHATWG. W3C XHTML 2 HTML5. HTML5


,
(. . " .
HTML5?" ).

HTML5 W3C
- : www.w3.org/TR/html5.


HTML5?
, "" HTML5, . ,
HTML5.
, . ,
HTML5, . , -
, , . (
.)

1. HTML5

29


, HTML5.
HTML5. HTML5
W3C. (. 2 3),
- (. 4),
(. 5),
JavaScript (. 6 7).
, .
HTML5. ,
HTML5, WHATWG. , JavaScript
-. (. 9), ,
(. 10), (. 11),
, .
, HTML5. , HTML5,
HTML5. CSS3 (. 8)
(. 12).
. W3C "" HTML5 ( ) ""
( ). , - W3C (www.w3.org/html/logo)
HTML5, CSS3
SVG-2, HTML5.

HTML:
HTML W3C
WHATWG, , .
W3C , HTML5,
. WHATWG ,
HTML.
HTML5, HTML, , HTML , .
HTML , HTML-
. HTML-
( <doctype>), -
,
.
HTML , ( )
HTML . -, - . - .

I.

30

, - , . , , ,
? , - : ,
.
, . , XHTML ,
, <marquee> (
" "), .
.
, CSS3,
CSS2, CSS2
. , HTML , , .

, , HTML,
, HTML5, , , , http://whatwg.org/html. ,
HTML WHATWG http://blog.whatwg.org.

HTML5
, , ,
HTML5. ,
HTML5. , , ,
, .

1.
" " , , - .
.
" " ,
( ). , XHTML 2 ,
. . . ,
.

1. HTML5

31

-, , XHTML 2 "".
HTML5 . , HTML5, HTML5. , ,
HTML 4.01, HTML5.

, HTML5
, ,
, . HTML5 , ,
-, - .


HTML5
HTML5 HTML ,
, . , <font>, , <blink> <marquee>,
HTML-.
HTML5.
, HTML5 , . , , HTML5 ,
-. ?
HTML5
. , , . .
HTML5
HTML5.
( ) . , - HTML, ,
.
, HTML5 ,
. ,
,
, .
, HTML5 (, ).
, . .
, , 1
DOM ( ,
, JavaScript). ,

Document Object Model .

I.

32

HTML5 ,
. , .

2.
, ,
. , . . .
,
.
HTML5 , , . , , , . ,
- . ,
, -. XHTML 2
, .

: , . , ,
, ,
70% .

. , . drag and
drop ( ) (. . " " 9), , Microsoft IE 5. " "
, - . HTML5 - , "HTML5
, ".

3.
: .
, .
- , , ,
, .

1. HTML5

33

, - , . , - .
, - (
) YouTube. HTML5 HTML
, Flash-.
, . . Flash- , ,
.
:
Flash-, Apple ( iPhone iPad) . ,
Flash-, HTML,
.
HTML5
" " , HTML-, . . , -, .
Adobe Flash Microsoft Silverlight, JavaScript
( ) JavaScript.
HTML ?

Flash ( ). , HTML5 , (., ,
www.flasharcade.com). HTML5 : , ,
, .

HTML5
HTML5.
(
), , .
.
<!DOCTYPE html>
<title>A Tiny HTML Document</title>
<p>Let's rock the browser, HTML5 style.</p>

I.

34

, 1:
<!DOCTYPE html>
<title> HTML</title>
<p> HTML5.</p>

. 1.1.

. 1.1. HTML5

. , </p> - HTML5, . . , (
HTML5 ).
.
HTML5 <title>,
- .
, HTML-
,
. , ,
.
HTML5-. - ,
<head> <body> , . .
( )
( ). ,
, ,
:
<!DOCTYPE html>
<head>
<title> HTML</title>
</head>
<body>
<p> HTML5.</p>
</body>
1

. .

1. HTML5

35

, ( ) . .
, ( doctype) <html>, :
<!DOCTYPE html>
<html>
<head>
<title> HTML</title>
</head>
<body>
<p> HTML5.</p>
</body>
</html>

HTML5 HTML <html>, ,


.
HTML5 .

<html>, <head> <body> .

, HTML5. ,
. ,
DOM ( , )
JavaScript, <html>,
<head> <body>, .

-
HTML5- HTML5. .

HTML5
HTML5- . , HTML5-, :
<!DOCTYPE html>

, HTML5, . , , , -
XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

I.

36

- XHTML . HTML5 , .
HTML5 ,
HTML (5 HTML5). ,
HTML-. HTML5,
. HTML ,
.
: HTML5 ,
?
:
.
( Internet Explorer Firefox) (quirks mode). ,
. ,
,
, , , , , ,
. .
, ,
,
(standards mode), .
, ,
. , -
. HTML5 , .

HTML5 ,
, , HTML5. HTML5
, HTML5 .

, ,
. HTML5-,
, , (
, ).

1. HTML5

37


, , ( ,
). . - UTF-8,
, -
.
- , ,
.
, -, -,
( ).
, - . .
HTML5 . <meta>
<head> (, <head> ,
). <meta>:
<head>
<meta charset="utf-8">
<title> HTML</title>
</head>

-, Dreamweaver Expression Web,


.
UTF. , , . , HTML-,
( Windows),
UTF-8
. TextEdit ( Ma OS) | ,
Unicode (UTF-8).

-. , ,
, .
- , lang
.

38

I.

ru, en. http://people.w3.org/rishida/utils/subtags.


- <html>:
<html lang="en">

,
,
. lang
, , <div>,
. , , .


- .
<link> <head> HTML5:
<head>
<meta charset="utf-8">
<title> HTML</title>
<link href="styles.css" rel="stylesheet">
</head>

HTML-,
. CSS, type="text/css", ,
.

JavaScript-
JavaScript
-.
JavaScript -, ,
, .
JavaScript HTML5 , HTML-.
- JavaScript :
<head>
<meta charset="utf-8">
<title> HTML</title>
<script src="scripts.js"></script>
</head>

1. HTML5

39

language="JavaScript" , . . - ( JavaScript HTML, ), , JavaScript.


JavaScript,
</script>. , ,
.
JavaScript Internet
Explorer, MOTW (Mark of the Web,
) <head> .
:
<head>
<meta charset="utf-8">
<!-- saved from url=(0014)about:internet -->
<title> HTML</title>
<script src="scripts.js"></script>
</head>

Internet Explorer ,
-. IE
, JavaScript ,
.
MOTW
, , HTML.


, HTML5
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> HTML</title>
<link href="styles.css" rel="stylesheet">
<script src="scripts.js"></script>
</head>
<body>
<p> HTML5.</p>
</body>
</html>

I.

40

HTML5,
-.
, , . .
,
, .

HTML5,
, , ,
JavaScript , . , , .

HTML5
, HTML5 . , HTML5 , -. ,
" -" "-,
". .

, , ,
HTML5.
HTML5 (. . " HTML5"
).


HTML5 ,
<html>, <head> <body> .
HTML5 .
, , :
<P> <EM> </eM> ,
.</p>.

, . . , <img> (), <br> ( ) <hr> ( ).


:
<br />
,<br>
.<br/>
.

1. HTML5

41

HTML5 . , , ( >, = ). <img> :


<img alt=" " src=Horsehead01.jpg>

. ,
XHTML :
<input type="checkbox" checked="checked" />

HTML5 HTML 4.01, :


<input type="checkbox" checked>

, HTML5, ,

, , .
XHTML.
-, . .
, .

HTML5. ,
, .
<html>, <body> <head>. <html>
(. . ""
), <head> <body>
.
. , ,
(. . <Shift>), ,
.
.
, , . .
, ,
( ). , . . HTML5 (/). .

HTML5
HTML5
-. , -

I.

42

, ,
, .
, , , , , HTML5,
.
, , :
(, <title>);
;
;
, (,
src <img>);

(,

<head>).
-, Dreamweaver Expression
Web, ,
HTML5. . W3C:
1. http://validator.w3.org (. 1.2).
, :
Validate by URI ( , ), Validate by
File Upload ( , )
Validate by Direct Input ( , ).
2. HTML-.
Validate by URI URL
Address (, http://www.MySloppySite.com/FlawedPage.html).
Validate by File Upload .
Choose ( ) File ( Chrome ). HTML-
.
Validate by Direct Input , Enter the Markup to validate.
.
, More
Options, , . -

1. HTML5

43

, . , -.
, ,
.

. 1.2. - http://validator.w3.org HTML


3. Check.
,
. ,
(. 1.3).

HTML- ( ), ,
HTML5 .

. 1.3,
HTML5, .
<title>. <p>
<strong>. , </p></strong> </strong> </p>. , , , .

I.

44

. 1.3.

XHTML
, HTML5 , ,
XHTML. , XHTML ,
.
, , XHTML . XHTML
(, ), (, ).
XHTML- ? , , ( )
HTML. , XHTML5;
, , , HTML5, , XML.
HTML5 XHTML, XHTML <html>, ,
. .
, :

1. HTML5

45

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3-org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title> HTML</title>
<link href="styles.css" rel="stylesheet"/>
<script src="scripts.js"></script>
</head>
<body>
<p> XHTML5.</p>
</body>
</html>

XHTML, XHTML. W3C , http://validator.nu,


(. . XHTML) Preset.
Be lax about HTTP Content-Type,
.
, XHTML . ,
HTML5, XML-.

.
, XHTML, -
MIME- application/xhtml+xml application/xml,
text/html. ( MIME- . " . MIME-" 5.)
- ,
, Internet Explorer , IE 9. XHTML
- .
, , XHTML5, , HTML5. XML, ( ), .
? -,
, XHTML
. , ,
XML-, , , XQuery
XPath.

I.

46


,
XHTML. xhtml xht,
.
( Firefox, Chrome IE 9) ,
- MIME XML.
, (IE 9), XML (Firefox) (Chrome).

HTML5
HTML5. , HTML . .


,
- , . , ,
, . 1.1.
1.1. HTML5

<article>, <aside>, <figcaption>, <figure>,


<footer>, <header>, <hgroup>, <nav>,
<section>, <details>, <summary>

<mark>, <time>, <wbr> ( ,


)

<input> ( ,
), <datalist>, <keygen>, <meter>,
<progress>, <command>, <menu>, <output>

<audio>, <video>, <source>, <embed> ( ,


)

<canvas>

<bdo>, <rp>, <rt>, <ruby>

HTML5
http://dev.w3.org/
html5/markup

1. HTML5

47


HTML5 ,
.
,
HTML5 (. . " HTML5" ) .
, HTML5 ( XHTML): . ,
-, "" - ,
. , , ,
- ,
<big>, <center>, <font>, <tt> <strike>. HTML
, .
, HTML5 - . HTML , -
. -, , . , , <iframe>, ,
. , , YouTube, Google.
- ,

. , <acronym>
<abbr>, <applet> <object>.
HTML HTML5.

, HTML5 100 .
30 10 . ( , ) -
http://dev.w3.org/html5/markup.


HTML5 . , , <small>,
. , ,
-. -

I.

48

<big>, <small> HTML5,


. <small> " " , ,
- . ,
, ,
:
<small>
,
.</small>

, <small> ,
.


<small> . , , . . <small>
HTML5. , ,
<small> , "
".

, , , <hr>,
. HTML5 <hr> , , . , ,
.
<s>
, "" .
,
<small>, . . HTML.



.
HTML <b> ( . bold
) <i> ( . italics ) XHTML <strong> <em>,
. , , . , <strong> , (strong)
, <em> (stress emphasis) -

1. HTML5

49

. , <b> <i>
XHTML .
HTML5 .
<b> <i>, . HTML5. , ,
.
<strong> , -

, .
<b> , ,

, - .
, , ,
, .
<em> ,

; , ,
.
<i> ,

,
. , , , , .
,
:
<strong> !</strong> <b></b>
<i> </i>. ,
<em></em>.

:
!
. ,
.
, -
HTML5 .


HTML5 . ,
HTML, . ,
, <address>, ,
, . -

50

I.


HTML, -,
:
- :
<address>
<a href="mailto:jsolo@mysite.com">John Solo</a>,
<a href="mailto:icheng@mysite.com">Lisa Cheng</a>, and
<a href="mailto:rpavane@mysite.com">Ryan Pavane</a>.
</address>

<cite>.
- , , , . ., :
<p> <cite> </cite>.</p>

<cite> , . , . . . - .
, . . -, , <cite>.
<a>,
. HTML <a>
. HTML5 , , , ,
. . ,
, . -
, HTML5 , ,
, .
. , <ol> ( . ordered list )
reversed (), (
, , start).
.
.


HTML5 , HTML XHTML, . <embed>,
.

1. HTML5

51

<wbr>>,
, . . ,
, :
<p>Many linguists remain unconvinced that
<b>supercali<wbr>fragilistic<wbr>expialidocious</b> is indeed a word.</p>

<wbr> , (
) , .
<wbr>, ,
. ,
, . 1.4.

. 1.4.

<wbr <nobr>,
,
. HTML5
.

HTML5
, HTML5 . ( ) HTML , .
, HTML5
.
, . , ,

52

I.

HTML (, drag and drop). , , ,


, 2.
. ,

<video>, - ,
, Flash. , ,
.
,
, (, ), CSS3 (, ).
, JavaScript. -

HTML5 , , , .
, HTML5 JavaScript (, ,
JavaScript).
JavaScript ,
, , JavaScript,
HTML5 .
, HTML5 , . . ( ),
, , , . JavaScript,
.
.

?
, HTML5,
. - ,
, , .
(
,
iPad). -
,

1. HTML5

53

,
.
, - http://caniuse.com,
. HTML5
. , , , . - :
1. Tables, Compatibility tables ( ),
(. 1.5)1.

. 1.5. HTML5,

,
Search, .
,
Caterogy . ( .) ,
, HTML5, 1

- . . 1.5 . - . ,
Show options -. ( . 1.5 Hide
options.) , .
.

I.

54

HTML5.
JavaScript, HTML5, , JS API.
CSS3
CSS.
2. , , .
, . ,
, ,
. , . . .
3. , (. 1.6).

( ),


IE
IE

. 1.6. HTML5
20 .
HTML5- <audio>


20 . 20 Show next 20 .
,
.

1. HTML5

55

. , - ; , . ,
, ,
.


. ,
, , , . GlobalStats
(http://gs.statcounter.com). Statistic
Browser. Browser Version , .
,
Country/Region.

Internet Explorer ?
HTML5 ,
HTML5 (
).
Internet Explorer. IE 9 Microsoft , HTML5 IE ,
.
Microsoft
HTML5, , . Microsoft
IE ( "" HTML5),
http://html5labs.interoperabilitybridges.com/. ,
HTML5,
. -, . ( ,
,
.)
, HTML5 IT .
, IE 9 IE, HTML5.
IE 9 Windows 7 Vista. Windows XP
(, ,

, , Window 7),
IE 9 , ,
HTML5. Microsoft
-
, -
HTML5, .

56

I.

,
. .
Bar. . Line.
,
(. 1.7). , Time Period.

. 1.7. , HTML5

GlobalStats , -.
, . ,
, -
.
,
-. , Firefox, 60% ,
Opera 49% . - TechCrunch
( ) 16% , Internet Explorer.
, - , -

1. HTML5

57

-. ( , Google Analytics.
. www. google.com/analytics.)


Modernizr
, - ,
HTML5.
, .
, , JavaScript.
:
, ,
.
, . . HTML5 ,
. ,
, ,
, .

. ,
, . . . ,
. , Modernizr (www.modernizr.com), HTML5 .
CSS3 (. . " 3: Modernizr" 8).
- Modernizr :
1. JavaScript- Modernizr. Download Modernizr Development.
, modernizr-2.0.6.js. .
, , modernizr.js.
Modernizr , , .

I.

58


Modernizr . -.
, , Modernizr, . Production,
Download Modernizr. , , ( ),
Modernizr, Generate
.

2. , -, . JavaScript (. ).
3. <head> -
Modernizr. :
<head>
<meta charset="utf-8">
<title>HTML5 Feature Detection</title>
<script src="modernizr-2.0.6.js"></script>
...
</head>

,
Modernizr. , JavaScript, ,
, Modernizr .
,
.

Modernizr ,
JavaScript , .
www.modernizr.com/docs.

4. , , . ,
HTML5- drag and drop,
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTMI_5 Feature Detection</title>
<script src="modernizr-2.0.6.js"></script>
</head>
<body>
<p>The verdict is... <span id = "result"x/span></p>

1. HTML5

59

<script>
// ( result),
// .
var result = document.getElementById("result");
if (Modernizr.draganddrop) {
result.innerHTML = "Rejoice! Your browser supports" +
"drag-and-drop.".
}
else {
result.innerHTML = "Your feeble browser doesn't " +
"support drag-and-drop.";
}
</script>
</body>
</html>

. 1.8.

. 1.8.
drag and drop

,
. ( ) - , , - ,
HTML5.
, - , ,
.

, , JavaScript
ID . , , 2.

60

I.


Modernizr , .
. 1 (polyfills, ). , HTML5.
polyfill polyfiller,
, . .
. HTML5 , .

, HTML5,
- .
.
, . , HTML5
<canvas> Internet Explorer
Silverlight. , - . ,
, - . , HTML5,
.

IE Google Chrome Frame
Google Chrome Frame, Internet Explorer 6, 7, 8 9. Chrome IE
HTML5. Chrome Frame HTML5-, ,
, .
Chrome Frame , ,
- ,
. , Chrome? ,
Google Chrome Frame, http://code.google.com/
chrome/chromeframe.

. HTML5 - GitHub (https://github.com/


Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills).
, .
1

. ,
. .

1. HTML5

61


, , HTML5- .
, -.

, ,
HTML5
-. ,
HTML5, , .

- . ,
, HTML. , -, , .
<div> ( . division ,
) -. <div> HTML , , .
CSS-, .
<div>
, . . ,
, <div> .
, ,
.
- - , , ,
-.
,
<div> - ? -, <div>,
. -, ,
. HTML5 , .

CSS , , -
, . , 1 CSS, HTML5.

2.

63

?
HTML5 , .
, <time> . :
<time>2012-ll-25</time>.

:
2012-11-25.

, <time>
. , - , . <time> ,
.
, <time> . HTML5 :
. , <nav> , <footer>
. . ( ) .


HTML5, . ,
HTML5 .

:
. , <video>, ,
- (. . "
<video>" 5). ,
-?
.
.
HTML- .
, . HTML5 . , , ,
- .
. - , . . ,

I.

64

-1
. ,
, HTML5.
, , , - . ( , , (-) <nav>, .)

2
- WAI (www.w3.org/WAI).
, ( ,
),
YouTube (http://tinyurl.com/6bu4pe).

. Google -

, ,
-
. Google -, , , , - - .
HTML5,
.
. -
. , , , Microsoft Word
2010. ( , Chrome , , . . 2.10.)
- , , <nav>.
: , -, -.
HTML,
.
1
2

- . screen reader. .
Web Accessibility Initiative .

2.

65

HTML-
, HTML HTML5.
. 2.1 , .

. 2.1. HTML- , .

I.

66

, -, ,
(, , ) .

. 2.1,
http://www.prosetech.com/html5/.
HTML- , ApocalypsePage_
Origmal.html, HTML5-, ApocalypsePage_Revised.html.


, . 2.1,
. ,
HTML, .
, , <font>. .
. ,
:
<div class="Header">
<hl>How the World Could End</hl>
<p class="Teaser">Scenarios that spell the end of life as we know</p>
<p class="Byline">by Ray N. Carnation</p>
</div>
<div class="Content">
<p><span class="LeadIn">Right now</span>, you're probably...</p>
<p>...</p>
<h2>Mayan Doomsday</h2>
<p>Skeptics suggest ...</p>
...
</div>
<div class="Footer">
<p class="Disclaimer">These apocalyptic predictions
<p>
<a href="AboutUs.html">About Us</a>
...
</p>
<p>Copyright 2011</p>
</div>

...</p>

2.

67


?
,
, 12 . , .
. , (...).
.
. 2.2 ,
, , "Mayan Doomsday",
. , , ,
www.prosetech.com/html5.

, HTML- ( ) -

. 2.2. <div> : ,

68

I.

<div> <span>. <span>


. <div> , (. 2.2).
.
800 ,
. ,
, .
<div> . , , :
/* <div>,
( ). */
.Header {
background-color: #7695FE;
border:
thin #336699 solid;
padding:
10px;
margin:
10px;
text-align: center;
}
/* <h1> <div>
( ). */
.Header h1 {
margin:
0px;
color:
white;
font-size: xx-large;
}
/* <div> . */
.Header .Teaser {
margin:
0px;
font-weight: bold;
}
/* <div>. */
.Header .Byline {
font-style: italic;
font-size: small;
margin:
0px;
}


(. . " " 1). , .Header h1 <hl> .

2.

69


CSS 1.
,
, . . " " 1.

HTML5
<div> -. , . <div> , . <div>, ( ,
, -, . .) ,
, .
, HTML5 <div> .
, <div>-: ,
; " ", . ,
.
, . 2.1,
. , <div> HTML5-
<header> <footer>.
<header class="Header">
<h1>How the World Could End</h1>
<p class="Teaser">Scenarios that spell the end of life as we know</p>
<p class="Byline">by Ray N. Carnation</p>
</header>
<div class="Content">
<p><span class="LeadIn">Right
<p>...</p>

now</span>, you're probably ...</p>

<h2>Mayan Doomsday</h2>
<p>Skeptics suggest ...</p>
...
</div>
<footer class="Footer">
<p class="Disclaimer">These apocalyptic predictions
<p> <a href="AboutUs.html">About Us</a>
...
</p>
<p>Copyright 2011</p>
</footer>

...</p>

70

I.

<div> <header> <footer>. - <div>


HTML5.
, <header> <footer>
. ,
. , :
<header>
<h1>How the World Could End</h1>
<p class="Teaser">Scenarios that spell the end of life as we know</p>
<p class="Byline">by Ray N. Carnation</p>
</header>

,
. ,
<header>:
/* <header> ( .) */
header {
...
}
/* <h1> <header>
( ). */
header h1 {
...
}
/* <header>. */
header .Teaser {
...
}
/* <header>. */
header .Byline {
...
}

. ,
, HTML5 .
<div>, . , . . HTML5-
<div>. HTML5
, , , <content>,
<div> .

2.

71


-
Internet Explorer , IE 9. ,
, . " " . ,
.

, , . <article>, ,
, . <article>
, .
<article> , :
<article>
<header>
<h1>How the World Could End</h1>
...
</header>
<div class="Content">
<p><span class="LeadIn">Right now</span>, you're probably ...</p>
<p>...</p>
<h2>Mayan Doomsday</h2>
<p>Skeptics suggest ...</p>
...
</div>
</article>
<footer>
<p class="Disclaimer">These apocalyptic predictions
...
</footer>

...</p>

. 2.3.

<article>
<header>

<footer>

. 2.3.

HTML5.
: " ,
", :
" ,
"

I.

72

, , . , <article> , , <header> . <footer> .



-. , ,
<article>, . ,
, , .

, <hgroup>
<header>.
HTML5 : <hgroup>.
.
, , , <h1>, <h2>, <h3> . . :
<h1>How the World Could End</h1>

<hgroup>. (
- ,
, . . <h1>, <h2>, <h3> . .) :
<hgroup>
<h1>How the World Could End</h1>
<h2>Scenarios that spell the end of life as we know</h2>
</hgroup>

, . ., -
(, , , ,
), <header>:
<header>
<h1>How the World Could End</h1>
<p class="Byline">by Ray N. Carnation</p>
</header>

, , , <hgroup>
<header>:
<header>
<hgroup>
<h1>How the World Could

End</h1>

2.

73

<h2>Scenarios that spell the end of life as we know</h2>


</hgroup>
<p class="Byline">by Ray N. Carnation</p>
</header>

, , : <p> <h2>.

. , , , . , , ?
,
(. . " HTML5
" ).
, <hgroup>. (
<h1>). ,
. , . . , .

<figure>
- . , . HTML5
, , ,
, .
, , . . ,
. ,
.
HTML, . ( , ,
.)
<p><span class="LeadIn">Right now</span>, you're probably ...</p>
<div class="FloatFigure">
<img src="human_skull.jpg" alt="Human skull">
<p>Will you be the last person standing if one of these
apocalyptic scenarios plays out?</p>
</div>
<p>But don't get too smug ...</p>

74

I.

,
, ,
, , . :
/* . */
.FloatFigure {
float:
left;
margin-left:
0px;
margin-top:
0px;
margin-right: 20px;
margin-bottom: 0px;
}
/* */
.FloatFigure p {
max-width:
200px;
font-size:
small;
font-style:
italic;
margin-bottom: 5px;
}

. 2.4 .

. 2.4. .
, . ,
, ,

2.

75

,
, , , HTML5 , .
, <div> <figure>. <figcaption> <figure> :
<figure class="FloatFigure">
<img src="human_skull.jpg" alt="Human skull">
<figcaption>Will you be the last person standing if one of
these apocalyptic scenarios plays out?</figcaption>
</figure>

, . ( , , .) .FloatFigure p, .FloatFigure figcaption.



, <figure>
(FloatFigure), . , , , , . , , , , . . .

.
, . (, <figcaption> ,
HTML, .)
, , , alt .
alt <img>,
:
<figure class="FloatFigure">
<img src="human_skull.jpg">
<figcaption>A human skull lies on the sand</figcaption>
</figure>

,
, . . ,
.

I.

76


<aside>
<aside> , . ,
, ,
. <aside> , ,
, . 2.5.

. 2.5. .

<div>, <aside>
:
<p>...(in a suitably robotic voice) "Who's your daddy now?"</p>
<aside class="PullQuote">
<img src="quotes_start.png" alt="Quote">
We don't know how the universe started, so we can't be sure it
won't just end, maybe today.
<img src="quotes_end.png" alt="End quote">
</aside>
<h2>Unexplained Singularity</h2>

2.

77

:
.PullQuote {
float:
max-width:
border-top:
border-bottom:
font-size:
line-height:
font-style:
padding-top:
padding-bottom:
margin-left:
margin-bottom:
}
.PullQuote img {
vertical-align:
}

right;
300;
thin black solid;
thick black solid;
30;
130%;
italic;
5px;
5px;
15px;
10px;

bottom;



HTML5 . ,
. ,
,
. . 2.1.
2.1.

IE

Firefox

Chrome

Safari

Opera

Safari iOS

Android

11.1

2.1

, . , .
. , ,
<div>. .


HTML5, -. , Google
-. (
http://code.google.com/websstats. Internet

78

I.
Explorer, . .
.)
Google , - .
, , . , <div>,
header, , - .
, Google , ,
( ) .
. , , footer,
header, menu, nav,
HTML5 <footer>, <header> <nav>.
search copyright .
, , ,
, ,
. -
. , HTML ,
.
HTML5.

, .
HTML5 ( , , <time>) . ,
, .
, HTML5, ,
, , ,
. ,
.
, HTML5:
article, aside, figure, figcaption, footer, header, hgroup,
nav, section, summary {
display: block;
}

, HTML5, . . display block.


, , . .
.
, Internet Explorer 8

2.

79

. , ,
IE ,
. , : IE
, JavaScript. , JavaScript- IE <header>:
<script>
document.createElement('header')
</script>

,
,
http://tinyurl.com/nlcjxm. ,
<head> :
<head>
<title>...</title>
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
...
<head>

- html5shim.googlecode.com
, .
JavaScript-
<header>, , HTML5, .
,
, .

.
, html5.js , ,
Internet Explorer. , JavaScript,
, :
<!--[if lt IE 9]>
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

, (IE 9 )
, .
, , Internet Explorer . , -

I.

80

IE ,
. ,
.
-,
, , .
MOTW ,
. " JavaScript-" 1.


Modernizr (. . " Modernizr"
1). ,
html5.js . , Modernizr
,
.



, ,
. - ,
. HTML5 , , , (
). , ,
HTML5, ,
.
, . 2.6 , .
-, . , . ,
(About Us) .


<header> . ,
- , , -. , , . 2.1.
-, ,
.
. 2.6.

2.

81

. 2.6. HTML5

, <header> . , , , - .
, ,
"" , . . ,
. , <h1>.
, <hgroup>. ,
"" <header>, . "
HTML5" . , -, <header>,
, CSS-.
, -, ,
, - - .
: <header> (
), .

82

I.


- -
. 2.6 -.
-, , .
, .
HTML5 - - . , HTML.
. .
, - ,
( ) .
, , -.
,
- ( ASP.NET
PHP) ( Drupal
WordPress).
. , Dreamweaver Expression Web, . , -, ,
, .
. , . . - .
, ,
: , , .

. 2.6 . -,
. <header> :
<header class="SiteHeader">
<img src="site_logo.png" alt="Apocalypse Today">
<h1 style="display:none">Apocalypse Today</h1>
</header>

, , : , . .
: ,
? , . -, , <header> , HTML5. -,
, , . . -

2.

83

, . -,
, . , <h1> -, (
"Articles" "About Us" ) <h2>. "
. " .

, , . ( , CSS3 , . " " 8.) -,
, .


<nav>
-
, ,
. ( JavaScript, , , , Google AdSense.
.)
-, HTML, <div>. HTML5 : <aside> <nav>.
<aside> <header> ,
, . ,
. " <aside>"
(. . 2.5). , . . .


?
?
HTML,
. -
, . . .
( , ,
,
- .) -

84

I.
-,
, - , .
. 2.6 . "Apocalypse Today"
<h1> .
, "Articles" "About Us" ,
. . ( ,
. ,
,
, Google.)
, . ,
,
, . . -
, ,
. HTML5
.
. "" , , <article>,
,
. ,
<h1>. ( HTML5 .)
, ,
-. ,
HTML5. - , .

<nav> ,
-. <nav>.
<nav>; . , ( . 2.6) <nav>. , , <nav> .

.
. 2.6. .
, .
, ,
, . 2.7.
. 2.7 , , .
<nav>, <aside> (. . , ).

2.
<nav>

85

<aside>

<nav>
[
]

<aside>
<section>
<aside>
<div>

. 2.7.

, . 2.7 , -, . <aside>, <nav>.


. 2.6
. , , . ( )
.
, :
<aside class = "NavSidebar">
<nav>
<h2>Articles</h2>
<ul>
<li><a href="...">How The World Could End</a></li>
<li><a href="...">Would Aliens Enslave or Eradicate Us?</a></li>
...
</ul>
</nav>
<section>
<h2>About Us</h2>
<p>Apocalypse Today is a world leader in conspiracy theories ...
</p>
</section>
<div>
<img src="ad.jpg" alt="Luckies cigarette ad: it's toasted">
</div>
</aside>

I.

86

.
("Articles" "About Us")
. , , - , .

<ul> <li>. - ,
. ,
( )
( ).
"About Us" <section>.
- , . <section> ,
<div>; , .
, <about>, , <section>, .
<div>. <section> , , . ( , "
", <section> .) - ,
<div>
, , , JavaScript .
,
. ,
<header> <footer>. <nav>, , , ,
. .
, , .
, <aside>,
, , <div>. ,
, . :
aside.NavSidebar
{
position:
top:

absolute;
179px;

2.
left:
padding:
width:
min-height:
background-color:
font-size:

87

0px;
5px 15px 0px 15px;
203px;
1500px;
#eee;
small;

, ,
<h2>, <ul>, <li> <img> . ( , www.prosetech.com/html5 , .)
, , , , (. 2.8).

, <nav> , <aside>. , : <header> -.

-
<header>

<aside>

<article>
<nav>

<header>

<section>

<div>

<figure>

<aside>

<footer>

. 2.8. (. . 2.6)



<details> <summary>
, - : , , . -,

I.

88

JavaScript. , .
:
var box = document.getElementById("myBox");
box.style.display = "none";
. , :
var box = document.getElementById("myBox");
box.style.display = "block";
, HTML5
, .
,
<details>, <summary>.
:
<details>
<summary> 1</summary>
<p> , </p>
</details>
, ( Chrome), ,
, -
. , , . <details>
<summary> ,
.
- <details> <summary> . , , . .
, .
<details> <summary> -
. JavaScript- , ,
, JavaScript
/
.


HTML5 . ,
, (
<nav>) , , .
, HTML5 .
, , , ,
.
, -

2.

89

, , -.
: , -
? , (. . 2.9 ).

. 2.9. ,
.
, , .
: ,

, .
,

, .
. 2.9 .
, -

(. . 2.9).
JavaScript, , . .
,

. , -

I.

90

,
.
,
. ., , ,
www.nytimes.com.
- , . . ,
, . . -
, ,
.
, . ,
.
, .
, <footer>.
, . 2.9:
<div id="FatFooter">
<!-- . -->
<img onclick="CloseBox()" src="close_icon.png" class="CloseButton">
...
<footer>
<!-- . -->
<p>The views expressed on this site do not ... </p>
</footer>
</div>

<div> . , , ""
.
,
:
#FatFooter {
position: fixed;
bottom:
0px;
height:
145px;
width:
100%;
background: #ECD672;
border-top: thin solid black;
font-size: small;
}


( #FatFooter),

2.

91

(, , .FatFooter). ,
, JavaScript
. , .

, <aside> ,
, ,
.
:
<div id="FatFooter">
<aside>
<!--
. -->
<img onclick="CloseBox()" src="close_icon.png" class="CloseButton">
...
</aside>
<footer>
<!-- . -->
<p>The views expressed on this site do not... </p>
</footer>
</div>

, <footer>
<aside> , <footer>
<aside>, -. - <footer> , ,
.


HTML5 . ,
HTML-.
: , - ,
. - ,
HTML-. ,
, http://html5doctor.com,
.

, <section> . , , , <section>, <div>.


<section>?
, <section>
, ,

92

I.

, . ,
- <section> . :
, , -

"About Us" - ;
, , , , -

;
, ;
. ,

. <section> , (. ).
. - ,
. ,
HTML5 , ,
. HTML5 , , .
, . <section> -,
.

HTML5

HTML5 , -. . , . - ,
. ,
. ,
,
, .
, . . . ,
.

2.

93


,
. - (, ,
), HTML5.

-?
, .
HTML5 .
.
HTML-. http://gsnedders.
html5.org/outliner .
HTML5 (. . " HTML5" 1),
:
, URL
.
Outline this! .
Chrome. Chrome h5o.
http://code.google.com/p/h5o . , -, ,
, , ,
.
,

. 2.10. -
,

I.

94

(. 2.10). h5o
JavaScript- bookmarklet Firefox Internet Explorer.
, .
Opera.

h5o Opera. ,
Chrome, http://tinyurl.com/3k3ecdy.


-,
, (<h1>, <h2>, <h3> . .). ,
. , , .
,
HTML5:
<body>
<div class="Header">
<h1>How the World Could End</h1>
...
</div>
...
<h2>Mayan Doomsday</h2>
...
<h2>Robot Takeover</h2>
...
<h2>Unexplained Singularity</h2>
...
<h2>Runaway Climate Change</h2>
...
<h2>Global Epidemic</h2>
...
<div class="Footer">
...
</div>
</body>

:
1. How
1.
2.
3.
4.
5.

the World Could End


Mayan Doomsday
Robot Takeover
Unexplained Singularity
Runaway Climate Change
Global Epidemic

2.

95

(<h1> <h2>)
. , , MS Word 2010.
:
<h1>
<h2>
<h2>
<h3>
<h2>

1</h1>
2</h2>
2</h2>
3</h3>
2</h2>

:
1. 1
1. 2
2. 2
1. 3
3. 2

, .
. , , ,

:
<h1>
<h2>
<h1>
<h3>
<h2>

1</h1>
2</h2>
1</h1>
3</h3>
2</h2>

:
1. 1
1. 2
2. 1
1. 3
2. 2

,
.
, ,
. - , , , - .
-.
, , , .

I.

96


,
. <article>, <aside>, <nav> <section>.
, , ,
<article>. <article>
, , , :
.
, HTML5:
<body>
<article>
<header>
<h1>How the World Could End</h1>
...
</header>
<div class="Content">
...
<h2>Mayan Doomsday</h2>
...
<h2>Robot Takeover</h2>
...
<h2>Unexplained Singularity</h2>
...
<h2>Runaway Climate Change</h2>
...
<h2>Global Epidemic</h2>
...
</div>
</article>
<footer>
...
</footer>
</body>

- ,
http://gsnedders.html5.org/outliner, :
1. Untitled Section
1. How the World Could End
1. Mayan Doomsday
2. Robot Takeover
3. Unexplained Singularity
4. Runaway Climate Change
5. Global Epidemic

2.

97

, <body>. <article> , ,
<h1> <h2>.
"Untitled Section" .
<aside> <nav> , <article> <section>. ,
<body>. , ,
.
, , - . 2.6.
:
1. Apocalypse Today
1. Untitled Section
1. Articles
2. About Us
2. How the World Could End
1. Mayan Doomsday
2. Robot Takeover
3. Untitled Section
4. Unexplained Singularity
5. Runaway Climate Change
6. Global Epidemic


: , .
, . <aside>
, <aside>
.

,
. - , ,
, , .
<body>, -,
, . HTML5
<blockquote>, <td>, <fieldset>, <figure> <details>.



?
-
-.
, , -, , . ,

I.

98

- , <h4>, , .
HTML , <h5>, . . <h4>.
, , , , <h2>
<h1>. ,
, , ,
.
HTML5 .
<article>, .
, . .
, <article> <h4>,

<h5>, <h6>, . .
: HTML5
, .
, , , . . <h1>, <h2>, <h3> . . .


- . ,
. , , :
<body>
<article>
<h1> , </h1>
...
<h2> </h2>
...
<h3> </h3>
...
<h3> </h3>
...
<h2> </h2>
...
<aside>...</aside>
...
<h3> </h3>
...
<h3> </h3>
...
</article>
</body>

2.

99

, , :
1. Untitled Section for the <body>
1. ,
1.
1.
2.
2.
3. Untitled Section for the <aside>
1.
2.

:
1. Untitled Section for the <body>
1. ,
1.
1.
2.
2.
3. Untitled Section for the <aside>
4.
5.

- <aside> <h2>
<h3>, ,
<h2>. , , , .
, , HTML5
(. . <h1>, <h2>, <h3> . .), ,
.
<h1>, . . <article>.
<h2> <h3> . ,
:
<body>
<article>
<h1> , </h1>
...
<section>
<h2> </h2>
...
<section>
<h3> </h3>
...
</section>

I.

100

<section>
<h3> </h3>
...
</section>
</section>
<section>
<h2> </h2>
...
</section>
<aside>...</aside>
...
<section>
<h3> </h3>
...
</section>
<section>
<h3> </h3>
...
</section>
</article>
</body>

. , , . .
(.
" .
?" ). , .
, , . <h1> (. . <article>),
<h2>, <h3> . .
, <aside>.
, ,
<h3>, ,
<h2>.
, , . <h2>. , :
<body>
<article>
<h1> , </h1>
...
<h2> </h2>
...

2.

101

<h3> </h3>
...
<h3> </h3>
...
<section>
<h2> </h2>
...
<aside>...</aside>
...
<h3> </h3>
...
<h3> </h3>
...
</section>
</article>
</body>

<h2>, , ,
<aside>. , , . .
.

<aside> <div>.
<div> , .

<aside> .
,
, . . <h2>.

, .

, -
. , , - ( , ). HTML5
. , . " -"
, , , .

HTML5.
- ,
.
-.
- . 2
,
. , , . , ,
-.
, , , , , . . ,
.

, HTML5, . , . , HTML5, ,
, W3C. "" , .

3.

103


, .
, -
, . . 3.1.
3.1.

<article>

, ,

, (
, )

<aside>

,
. ,
<aside>, ,

<figure>
<figcaption>

. <figcaption>
, <figure> <figcaption> <img>,
.

<footer>

. , " ", (, " "


"")

<header>

,
HTML . ,

<hgroup>

, (. . <h1>, <h2>, <h3> . .),


.

<nav>

,
-.
<nav>

<section>

. <section>
, : . , ( , ,
<article> <aside>)


. HTML5 -

I.

104

, -, , , . ,
,
. ,
( <address>, <name>, <street>,
<postalcode>, <country> . .), .
HTML5 . -, .
-, , HTML5 ,
, . . : <time>,
<output> <mark>.


<time>
- . ,
. ,
, (, ) -
. <time>,
, . :
<time>2012-03-21/time>.


, <time> ( ), , HTML5.
<datetime>, - .

<time> . -, . -,
, .
, ,
, . ,
:
::

, -, . , -

3.

105

,
datetime, :
<time datetime="2012-03-21">21- </time>.

:
21- .

, :
:+00:00

, ( 24- ),
. "" ( "")
.
. - http://en.wikipedia.org/wiki/Time_zone. , ,
UTC+4:001, . . .
16:30 :
<time datetime="16:30+4:0">16:30</time>.

, -
, datetime, .
,
. , T,
:
<time datetime="2012-03-21T16:30+4:00">
21- 16:30</time>.

<time> pubdate. ,
(, , <time>).
:
<time datetime="2011-03-21" pubdate>21- 2011 .</time>


<time>
, ,
. Internet Explorer, . " " 2.

UTC (Universal Time, Coordinated) .

I.

106

JavaScript- <output>
<output> , JavaScript.
,
.
, , . 3.1.

. 3.1. .
, ,

. 3.1.
. Calculate
JavaScript,
.

. <span>, , :
<p>Your BMI: <span id="result"></span></p>

<output> :
<p>Your BMI: <output id="result"></output></p>

3.

107

JavaScript , . .
, :
var resultElement = document.getElementById("result");


<output> Internet Explorer,
, . " " 2. , IT JavaScript.

<form>. , :
<form action="#" id="bmiCalculator">
<label for="feet inches">Height:</label>
<input name="feet"> feet<br>
<input name="inches"> inches<br>
<label for="pounds">Weight:</label>
<input name="pounds"> pounds<br><br>
...
</form>

<output> ,
form ( ,
) for (
, ). :
<p>Your EMI: <output id="result" form="bmiCalculator"
for="feet inches pounds"></output></p>

, , <output> .
. ,
- , -,
, .

, . 4.
, JavaScript,
, 2. ,
, http://rebootme.com/prosetech/html5.


<mark>
<mark> , .
, :

108

I.

<p>In = 2009, Facebook made a bold grab to own everyone's


content, <em>forever</em>. This is the text they put in their
terms of service:</p> <blockquote>You hereby grant Facebook an
<mark>irrevocable, perpetual, non-exclusive, transferable,
fully paid, worldwide license</mark> (with the right to
sublicense) to <mark>use, copy, publish</mark>, stream, store,
retain, publicly perform or display, transmit, scan, reformat,
modify, edit, frame, translate, excerpt, adapt, create
derivative works and distribute (through multiple tiers),
<mark>any user content you post</mark>
...
</blockquote>

, <mark>, ,
. 3.2.

. 3.2. <mark>

<mark> ( , , ,
, )
<del> () <ins> () .
, <mark> . HTML5
, , , , . , <mark>, , -
.

3.

109


, <mark> .
, -.
<mark> ( CSS, ), . <mark>
, - , -
, , - .

(
),
, HTML5.
:
mark {
background-color: yellow;
color:
black;
}

<mark> Internet Explorer, , . " " 2.

,
, , , - , HTML5 . ,
,
, , , . .? HTML5
, . . , , .
- ,
HTML5 , -.
. ,
-, HTML5 (Ian
Hickson), WHATWG, - .
: -, , . ,
HTML, , .
.
ARIA,

110

I.

- . ,
, , HTML-.

Accessible Rich Internet Applications


Accessible Rich Internet Applications (ARIA,
-)
HTML.
, role, . ,
<div>:
<div class="header">

, role banner:
<div class="header" role="banner">

, , 2, HTML5
. - :
<header role="banner">

. : ARIA
.
( .
www.w3.org/TR/wai-aria/roles#landmark_roles.) : ARIA HTML5, , . .
ARIA HTML5. . ,
HTML5 (, banner article),
(, toolbar search).
ARIA HTML-.
aria-required , . aria-invalid
. ,
,
, ,
.
ARIA,
. ,
ARIA HTML5 , , - -

3.

111

. - ,
, . . ARIA, HTML5 .

ARIA ( WAIARIA, . . WAI) .
www.w3.org/TR/wai-aria.

Resource Description Framework


Resource Description Framework (RDFa, ) - . RDFa , :
, . . . RDFa ,
HTML-.
XHTML, HTML5.
- RDFa HTML5. , , RDFa HTML5, . .
XML.
RDFa .
, http://en.wikipedia.org/wiki/RDFa.
- Google Rich Snippets (. . " " ) RDFa
Google.

, -, - . , - , ,
RDFa.
; , Google, ,
94% , - , .

, ,
. . , . -

I.

112

-, , : . , , HTML5 . ,
,
.

, , .
, . - http://microformats.org/wiki/Main_Page-ru.
:
hCard hCalender, .


hCard
hCard
, . 2 hCard,
.
class, . , ,
. ,
.
hCard , class
vcard. , , . class
fn. :
<div class="vcard">
<div class="fn">Mike Rowe Formatte</div>
</div>

class , , , , . class , ,
.
hCard
, ,
, URL -, ,
, , , . .

3.

113

, vcard. hCard, :
<div class="vcard">
<div class="fn">Mike Rowe Formatte</div>
<img class="photo" src="face.jpg" alt="Mike's Face">
<div class="title">Web Developer</div>
<div class="org">The Magic Semantic Company</div>
<a class="url" href="http://www.magicsemantics.com">
www.magicsemantics.com</a>
<div class="tel">641-545-0234</div>
</div>


hCard . -
http://microformats.org/wiki/hcard-ru.

, hCard ,
. , hCard
-, , . , .
, . , . <div>, <span>.
. , .

<img>, <a>. , , .
. , "About Me",
- (. 3.3).
HTML- :
<h1>About Me</h1>
<img src="face.jpg" alt="Mike's Face">
<p>This website is the work of <b>Mike Rowe Formatte</b>.
His friends know him as <b>The Big M</b>.</p>
<p>You can contact him where he works, at
The Magic Semantic Company (phone
641-545-0234 and ask for Mike).</p>

114

I.

<p>0r, visit him there at:<br>


42 Jordan Gordon Street, 6th Floor<br>
San Francisco, CA 94105<br>
USA<br>
<a href="http://www.magicsemantics.com">www.magicsemantics.com</a>

. 3.3. "About
Me"

-

, :
<h1>About Me</h1>
<div class="vcard">
<img class="photo" src="face.jpg" alt="Mike's Face">
<p>This website is the work of
<span class="title" style="display:none">Web Developer</span>
<b class="fn">Mike Rowe Formatte</b>.
His friends know him as <b class="nickname">The Big M</b>.</p>

3.

115

<p>You can contact him where he works, at


<span class="org">The Magic Semantic Company</span> (phone
<span class="tel">641-545-0234</span> and ask for Mike).</p>
<p>0r, visit him there at:<br>
<span class="street-address">42 Jordan Gordon Street,
6th Floor</span><br>
<span class="locality">San Francisco</span>,
<span class="region">CA</span>
<span class="postal-code">94105</span><br>
<span class="country-name">USA</span><br>
<a class="url" href="http://www.magicsemantics.com">
www.magicsemantics.com</ a>
</div>


.
<span> -

, vcard.
, , <span> class

. ,
<b>, <span>. ( , . , , , - <b class="Keyword Emphasis"><spanclass="fn">Mike Rows
Formatte</span></b>. .)
(Web Developer)
. , . .
"This website is the work of..." (" -
"). , . . (,
Google) , .
, , .
( , ),
, . . ,
hCard ,
,
,
. - http://microformats.org/
wiki/browsers.

116

I.

Oomph Internet Explorer,


- http://oomph.codeplex.com. - : hCard ( ), hCalendar ( ) hMedia ( , ).
, ,
Oomp (. 3.4, .)
,
(. 3.4, ).

. 3.4. : , Oomph , ,
, . : ,

. ,
, hCard, hCalendar hMedia

,
JavaScript.
:
<head>
<meta charset="utf-8">
<title>hCard Example</title>

3.

117

<script src="jquery-1.3.2.min.js"></script>
<script src="oomph.min.js"></script>
...
</head>

, . , , . 3.4, Chrome.
, http://www.prosetech.com/html5/
Microformats.html Chapter 3. Meaningful Markup.

Oomph , , .
, Internet
Explorer, Firefox Safari RSS . ,
- Firefox RSS "" .
.

hCalendar
hCalendar, . , , , , , . .
, hCalendar.
. 3.5.
, hCard,
hCalendar. vevent.
, , : ( dtstart) ( summary).
( . http://microformats.org/wiki/hcalendar-ru),
, , URL ,
. :
<div class="vevent">
<h2 class="summary">Web Developer Clam Bake</h2>
<p>I'm hosting a party!</p>
<p>It's
<span class="dtstart" title="2011-10-25T13:30">Tuesday,
October 25, l:30PM</span>

118

I.

at the <span class="location">Deep Sea Hotel, San


Francisco, CA</span></p>
</div>

(. . " <time>"
).
title, , . , datetime
HTML5- <time>. ,
.

. 3.5. Facebook hCalendar,


hCard. ,
. ( Firefox
Operator,
http://addons.mozilla.org/firefox/addon/operator.)


- .
HTML5, (. http://dev.w3.org/html5/md). , RDFa, . ,
,

3.

119

( -,
). ,
, -.
, , .

, ,
, (, -
RDFa ). , . ,
Google. , RDF ,
, , .

, itemscope itemtype
( <div>, ).
itemscope , itemtype , :
<div itemscope itemtype="http://data-vocabulary.org/Person">
...
</div>

, , XML.
XML http://datavocabulary.org/Person.
XML URL. URL
, .
XML
-, URL. , ( ) . URL
, , . ,
. .
.
-
itemprop, .
,
itemprop, . ,

itemprop, class, .

120

I.

<div itemscope itemtype="http://data-vocabulary.org/Person">


<span itemprop="name">Mike Rowe Formatte</span>.
...
</div>

, . , . ,
. , ,
XML. <div> <span> itemscope itemtype, :
<div itemscope itenrtype="http://data-vocabulary.org/Person">
...
<span itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">42 Jordan Gordon Street,
6th Floor</span><br>
<span itemprop="locality">San Francisco</span>,
<span itemprop="region">CA</span>
</span>
</div>

, "About Me" (.
. " hCard"
) .
, ,
:
<h1>About Me</h1>
<div itemscope itenrtype="http://data-vocabulary.org/Person">
<img itemprop="photo" src="face.jpg" alt="Mike's Face">
<p>This website is the work of
<span itemprop="title" style="display:none">Web Developer</span>
<b itemprop="name">Mike Rowe Formatte</b>.
His friends know him as <b itemprop="nickname">The Big M</b>.</p>
<p>You can contact him where he works, at
<span itemprop="affillation">The Magic Semantic Company</span> (phone
<span itemprop="tel">641-545-0234</span> and ask for Mike).</p>
<p>Or, visit him there at:<br>
<span itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">42 Jordan Gordon Street,
6th Floor</span><br>

3.

121

<span itemprop="locality">San Francisco</span>,


<span itemprop="region">CA</span>
<span itemprop="postal-code">94105</span><br>
<span itemprop="country-name">USA</span><br>
</span>
<a itemprop="url" href="http://www.magicsemantics.com">
www.magicsemantics.com</a>
</div>

, , , hCard (. . " hCard" ).


class itemprop,
( fn
org, name affiliation ). RDFa, , , RDFa http://
data-vocabulury.org/Person.

RDFa,
. , , , , ,
.

: , JavaScript-,
. , .


- ,
-.
- - ,
( , ). , , , , .
,
- . . -

I.

122

. , - , ,
,
- . , Google (rich snippets).
, Google , , -
.
,
.
Google , RDFa, . , . Google
, ,
. (
,
HTML5.)
,
, Google http://
tinyurl.com/GoogleRichSnippets.
RDFa, ,
(, , , ,
, . .). RDFa, , , .


, , Rich Snippets Testing Tool (RSTT, ). -, , Google
, , Google
,
- .

RSTT . : . ( Google , , , , - .) : ,
Google.

3.

123

RSTT :
1. www.google.com/webmasters/tools/richsnippets.
(. 3.6).
2. URL , . , RSTT , -, ,
.

Google

Google
,

Google

. 3.6. Google
(. . "" ).
, Google
,

I.

124

3. Preview.
(. . 3.6). .
Google search preview ,
. Extracted rich snippet data from the page , Google .

Google "Insufficient data to generate the preview",
. : . Google ,
. , , ,
, Google ,
, Google. , Google http://
tinyurl.com/GoogleRichSnippets.

Google . ,
Google. . "
hCalendar" , ,
.
Google (. 3.7).

. 3.7. . URL
( ), Google
URL

Google ( ), (
) (
).
, . http://datavocabulary.org/Review. ( ), . ( summary), , ( dtreviewed, <time>
HTML5), 0 5 ( rating).

3.

125

, , :
<div itemscope itemtype="http://data-vocabulary.org/Review">
<h1 itemprop="itemreviewed">Jan's Pizza House</h1>
<p>Reviewed by <span itemprop="reviewer">Jared Elberadi</span> on
<time temprop="dtreviewed" datetime='2011-01-26">January 26</time>.<p>
<p itemprop="summary">Pretty bad, and then the
Health Department showed up.</p>
<p itemprop="description">I had an urge to mack on some pizza, and this
place was the only joint around. It looked like a bit of a dive,
but I went in hoping to find an undiscovered gem. Instead, I watched a
Health Department inspector closing the place down. Verdict? I didn't
get to finish my pizza, and the inspector recommends a Hep-C shot.</p>
<p>Rating: <span itemprop="rating">0.5</span></p>
</div>

Google (. 3.8).

. 3.8. - .


, Google
?
, Google , , . , , .
, Google , ,
.
. ,
, Google, , . ( , , , -
, .) , , .
. Google ,
CSS.
- . , Google
.
, .

126

I.


, , ,
-.
- ,
. ,
Google ,
.

, , , . , RDFa,
, Google , , - -.

, , , , .
Google ,
- , ,
: .
, , ,
, . , (
http://data-vocabulary.org/Recipe). , .

.
:
<div itemscope itemtype="http://data-vocabulary.org/Recipe">
<h1 itemprop="name">Elegant Tomato Soup</h1>
<img itemprop="photo" src="soup.jpg" alt="A bowl of tomato soup">
<p>By <span itemprop="author">Michael Chiarello</spanx/p>
<p itemprop="summary">Roasted tomatoes are the key to
developing the rich flavor of this tomato soup.</p>
...

,
, .
( ,
, . .):
...
<p>Prep time: <time itemprop="prepTime" datetime="PT30M">30 min</time></p>
<p>Cook time: <time itemprop="cookTime" datetime="PT1H">40 min</time></p>

3.

127

<p>Yield: <span itemprop="yield">4 servings</span></p>


<div itemprop="nutrition" itemscope
itemtype="http://data-vocabulary.org/Nutrition">
Serving size: <span itemprop="servingSize">1 large bowl</span>
Calories per serving: <span itemprop="calories">250</span>
Fat per serving: <span itemprop="fat">3g</span>
</div>
...


prepTime prepTime , ,
, HTML5 <time>.
ISO,
http://en.wikipedia.org/wiki/ISO_8601#Durations http://ru.wikipedia.org/wiki/
ISO_8601.

. , ,
:
...
<ul>
<li itemprop="ingredient" itemscope
itemtype="http://data-vocabulary.org/RecipeIngredient">
<span itemprop="amount">1</span>
<span itemprop="name">yellow onion</span> (diced)
</li>
<li itemprop="ingredient" itemscope
itemtype="http://data-vocabulary.org/RecipeIngredient">
<span itemprop="amount">14-ounce can</span>
<span itemprop="name">diced tomatoes</span>
</li>
...
</ul>
...

,
, . . .
, .
:
...
<div itemprop="instructions">
<ol>
<li>Preheat oven to 450 degrees F.</li>
<li>Strain the chopped canned tomatoes, reserving the juices.</li>
...
</ol>
...
</div>

I.

128

:
http://support.google.com/webmasters/bin/answer.py?hl=ru&answer=173379
( http://tinyurl.com/RichSnippetsRecipe).

, . ,
. ,

, ,
.

Google ,
Google -

. 3.9. Google
, ,
. , ,

3.

129

. www.google.com/landing/recipes, ( ) ,
Search (). . Google
, , , (. 3.9).
,

-.

130

I.

II

II

-
4.

5.

6.

7.

8.

CSS3

HTML- HTML,
-.
, ,
. .
HTML-, , , , -
-.
HTML- HTML,
, . - XForms,
HTML-, ,
XHTML 2 (. . "XHTML 2: " 1).
XForms , . , XForms ,
XML. , XForms HTML-
. , ,
. XForms
, .
HTML5 . ,
XForms, HTML-.
, HTML5- , . HTML5- , .
, JavaScript
JavaScript .

II. -

134

HTML5- ,
, , ,
. ,
HTML5, - HTML- -.

?
, .
,
-.
- , , , .

, -, . , Google (. 4.1).

. 4.1. Google HTML-

- .
, ,
-. - -

4. -

135

,
. ,
, .
,
,
. , ,
. , , , , - ,
.

.
, . .
, , HTML5.


JavaScript
, ( ). - - , XMLHttpRequest (. . " XMLHttpRequest" 11)
JavaScript. , Google
.
, , . ( Google Instant
.)
,
,
Google Instant.
, , JavaScript . , . , , , JavaScript
.
, , , . , , ,
. , . .
JavaScript, .
HTML5, ,
JavaScript XMLHttpRequest
.
HTML-.

136

II. -

HTML-
HTML5 . . 4.2 ,
.
.
, . , <form>:
<form id="zooKeeperForm" action="processApplication.cgi">
<p><i>Please complete the form. Mandatory fields are marked
with a </i><em>*</em></p>
...

. 4.2. , , ,
, ,

4. -

137

<form> , . , ,
, URL action.
JavaScript, action #.

HTML5 . form
(, form="zooForm"). , , ,

-.

, . 4.2, <fieldset>.
, <legend>. Contact Details (
. 4.3):
...
<fieldset>
<legend>Contact Details</legend>
<label for="name">Name <em>*</em></label>
<input id="name"><br>
<label for="telephone">Telephone</label>
<input id="telephone"><br>
<label for="email">Email <em>*</em></label>
<input id="email"><br>
</fieldset>
...
<legend>

<label>

<fieldset>

<input>

. 4.3. <fieldset> : ,
. :
<label> <input>, <textarea>
<select>

II. -

138

, <input>, , . <input>,
<textarea>; <select>
.
. 4.1.
4.1.

HTML-

<input type="text">


.
type password, (*)
- ()

<textarea>...</textarea>

<input type="checkbox">

<input type="radio">


,
.
name,

<input type="submit">

, .
submit
.
image ,

.
reset .
button
.
- ,
JavaScript

<input type="password">

<input type="image">
<input type="reset">
<input type="button">

<select>... </select>

, .

<option>

, <select>, :

4. -

139

...
<fieldset>
<legend>Personal Information</legend>
<label for="age"><em>*</em>Age</label>
<input id = "age"><br>
<label for="gender">Gender</label>
<select id="gender">
<option value="female">Female</option>
<option value="male">Male</option>
</select><br>
<label for="comments">When did you first know you wanted
to be a zoo-keeper?</label>
<textarea id="comments"></textarea>
</fieldset>
<fieldset>
<legend>Pick Your Favorite Animals</legend>
<label for="zebra"><input id="zebra" type="checkbox">Zebra</label>
<label for="cat"><input id="cat" type="checkbox">Cat</label>
<label for="anaconda"><input id="anaconda" type="checkbox">
Anaconda </label>
<label for="human"><input id="human" type="checkbox">Human</label>
<label for="elephant"><input id="elephant" type="checkbox">
Elephant </label>
<label for="wildebeest"><input id="wildebeest" type="checkbox">
Wildebeest</label>
<label for="pigeon"><input id="pigeon" type="checkbox">Pigeon</label>
<label for="crab"><input id="crab" type="checkbox">Crab</label>
</fieldset>
<p><input type="submit" value="Submit Application"></p>
</form>

,
, (www.prosetech.com/html5).
Zookeper-Form_Original.html ,
ZookeperForm_Revised.html HTML5.

HTML- , , . ,
-
, . (
JavaScript , , , , .)
HTML5
, . , ,
.

II. -

140

, , ,
HTML5. .


. , , .
, .
" ", -
, , .
. 4.4.

. 4.4. : , ,
Name Telephone. : ( ),
. , ,

placeholder:
<label
<input
<label
<input

for="name">Name <em>*</em></label>
id="name" placeholder="Jane Smith"><br>
for="telephone">Telephone</label>
id="telephone" placeholder="(xxx) xxx-xxxx"><br>

, , placeholder; Internet Explorer. ,


, . . , .
, http://tinyurl.com/polyfills
JavaScript-, IE .

4. -

141

,
, ,
. .
( -webkit-input-placeholder -moz-placeholder),
. (
. " " 1.)
focus , , . , , ,
:
input:focus {
background: #eaeaea;
}



, ,
. , , " ",
- , "",
Name . 4.4, . ,
, .
. , Google
(http://www.google.com/landing/recipes) "chicken pasta", , , , , , .

. , Telephone . 4.4 () xxx-xxxx
,
,
. , , .
,
. , .
, , .
, . "
" .
, , .
title, , :
<label for="promoCode">Promotion Code</label>
<input id="promoCode" placeholder="QRB001"
title="Your promotion code is three letters
followed by three numbers">

II. -

142

, . , [ ]
, , , ,
. , , ,
.

:
, . ,
,
<Tab>, , , .
,
. JavaScript, focus()
<input>.
. , focus(), -
, , , , , .
, ,
.
HTML5- autofocus,
<input> <textarea> ( ),
:
<label for="name">Name<em>*</em></label>
<input id="name" placeholder="Dane Smith" autofocus><br>

autofocus , placeholder, , ,
Internet Explorer. , . autofocus Modernizr (. . " Modernizr"
1) , , . JavaScript-
(http://tinyurl.com/polyfills).
,
IE ,
, .

: !
.
,
.

4. -

143

, ,
. ,
, ,
, .
- , . . - , ,
. - JavaScript JavaScript. ,
. , , (
)
(, ), , (, ,
,
), .
HTML5
, - . HTML5 (. . " . "
),
<input>. : ,
, .

HTML5?
HTML5 ,
, . - ,
, , .
, , , -. HTML5
required :
<label for="name">Name <em>*</em></label>
<input id="name" placeholder="Jane Smith" autofocus required><br>



- ,
. , .
.
. .
,
, -

144

II. -
,
. ,
, ,
.
. .
, , .
, .
,
. , .
, (
HTML5)
-,
. , ,
,
, .

required
. - ,
, (
. 4.2).
, .
HTML5,
, (. 4.5).
, .
, <input>,
<textarea>. , .
: , , , ?
, , . . , , ,
. ( ,
, ,
.)
, ,
.

4. -

145

. 4.5. Firefox (),


Chrome ( ) Opera ().
,
. , - ,


,
. , .
-
(
<Tab> ).
, ,
. , HTML5
, ,
. ,
JavaScript-
JavaScript.


. ,
. ,
<form> novalidate:
<form id="zooKeeperForm" action="processApplication.cgi" novalidate>

II. -

146

.
-. , , ,
. , <input> formnovalidate:
<input type="submit" value="Save for Later" formnovalidate>

. .

?
, number, . "" . , .


- ,
.
,
, .
, ,
(. . " " 1). :
required optional,

, required ;
valid invalid,

. ,
,
, ;
in-range out-of-range, ,

min max,
(. . "" ).
, <input>, , CSS required:
input:required {
background-color: lightyellow;
}

, ,
required invalid :

4. -

147

input:required:invalid {
background-color: lightyellow;
}

, . . required .
, , focus . -, . , ,
, . .
.


( ) HTML5
. JavaScript
,
HTML .
, .
, . , ,
, @, , , .
, , :
[A-Z]{3}-[0-9]{3}

.
, [A-Z] A Z. , . . {3} ,
. , . . ,
. , [0-9] 0 9, {3}
.
, , , ,
. HTML5 .

: ^ $, , . HTML5 . ,
, .

II. -

148

, [A-Z]{3}-[0-9]{3}, :
QRB-001
TTT-952
LAA-000

:
qrb-001
TTT-0952
LA5-000

, . , ,
.
.

www.w3schools.com/
js/js_obj_regexp.asp http://tinyurl.com/jsregex.
http://regexlib.com.
, " 1
" .

<input> <textarea>,
pattern:
<label for="promoCode">Promotion Code</label>
<input id="promoCode" placeholder="QRB-001" title=
"Your promotion code is three uppercase letters, a dash,
then three numbers"
pattern="[A-Z]{3}-[0-9]{3}">

. 4.6 , .

. . 4.6
. ,
pattern required.



. , , . -

. . .: -, 2008.

4. -

149

, . . HTML5

(. . " " ).

. 4.6. (, Chrome, )
, title,
,


HTML5 JavaScript, ( ). setCustomValidity(),

, HTML5.
. , .
oninput:
<label for="comments">When did you first know you wanted to
be a zookeeper?</label>
<textarea id="comments" oninput="validateComments(this)"></textarea>

oninput validateComments(). ,
<input> setCustomValidity() .
,
setCustomValidity() . , , , .
,
20 :
function validateComments(input) {
if (input.value.length < 20) {
input.setCustomValidity("You need to comment in more detail.");
}

II. -

150

else {
// .
// .
input.setCustomValidity("");
}
}

. 4.7
.

. 4.7. setCustomValidity() ,
,

, , .
,
, ,
-.

, JavaScript-,
. , , , ,
12. JavaScript, . . , , ,
. -.


, , . . 4.2 -

4. -

151

,
, .
4.2.

IE

Firefox

Chrome

Safari

Opera

Safari iOS

Android

10*

10

5 (
Windows)

10

* - .

HTML5 , ,
, - . ,
, IE 9, ,
, .
, - , ,
IE-, . : JavaScript,
IE.
, .
,
, . Modernizr
(. . " Modernizr" 1) HTML5-. , , pattern Modernizr.input.pattern :
if (!Modernizr.input.pattern) {
// .
// JavaScript.
...
}


pattern ,
Modernizr.input. ,
, placeholder, autofocus, required, max, min
step.

, ,
. , HTML5, ,

II. -

152

. onSubmit, true (, ) false (, ):


<form id="zooKeeperForm" action="processApplication.cgi"
onsubmit="return validateForm()">


, :
function validateForm() {
if (!Modernizr.input.required) {
// ;
// .
// , , .
var inputElements = document.getElementById("zooKeeperForm").elements;
// .
for(var i = 0; i < inputElements.length; i++) {
// , .
if (inputElements[i].hasAttribute("required")) {
// , ,
// .
// , ,
// false.
if (inputElements[i].value == "") return false;
}
}
// , ,
// .
return true;
}
}


JavaScript, , .
. 2.

( ), , ,
JavaScript . ,
, ,
. , JavaScript
.

4. -

153

http://tinyurl.com/polyfills
JavaScript, , , .
webforms2; https://
github.com/westonruter/webforms2.
webforms2 .
-
( -) -
:
<head>
<title>...</title>
<script src="webforms2.js"></script>
...
<head>

webforms2 JavaScript, html5Widgets. ,


, .
. -
www.useragentman.com/tests/html5Widgets.
-,
. .

<input>
HTML5 ,
, . .
, .
spellcheck. , . , ,
. , spellcheck false, a true. ( -
, spellcheck
.)
autocomplete. , ,
. HTML5, (, ) (, ).
autocomplete off, . , autocomplete on.

154

II. -
autocorrect autocapitalize.
, Safari iPad iPhone.
multiple. - multiple <select>
.
<input>, file ( ) email (.
. " " ). , ,

.

<input>
HTML- <input>
, .
type <input>.
<input>, -
. ,
:
<input type="text">
<input type="---input">
<input>

HTML5 . , <input> , -
, . ,
<input> email:
<label for="email">Email <em>*</em></label>
<input id = "email" type="email"><br>

,
email <input> (, Internet Explorer), . , HTML5,
.
. ,

.
. ,

number, ,
-,
.
. -

, . , -

4. -

155


.
HTML5 . ,
. ,
, (. 4.8).

. 4.8.
. iPod ,
. ,
(),
<@> ()

.
, HTML5-
, , .
,
( ),
, (
).
, . -
, . ,
.
,
.

II. -

156

. 4.3 . ,
.
4.3.

IE

Firefox

Chrome

Safari

Opera

Safari
iOS**

Android

email

10

5 (

Windows)

10.6

url

10

5 (

Windows)

10.6

search*

tel*

number

10

5 (

Windows)

range

11

datetime,
date,
month,
week, time

10

11

color

11

** HTML5 .
** iOS , (. . 4.8) ,
- .


,
Modernizr.inputtypes Modernizr. , range, Modernizr.inputtypes.range true.


email ,
. , ( ). @ ,
, . ,

4. -

157


, -. , email (. 4.9).

. 4.9. Firefox ,

email multiple,
. , , .

, .
, required (. . " HTML5" ).

URL-
URL URL-. , URL, .
. ( , http://, , bonk//)
, (:).
URL
, .


search .
, - .
( Google . 4.1),
, .
,
.

158

II. -

, Safari, -
. , Safari Chrome,
, . , ,
. .
, search , .
, ,
.


tel
, .
, , ,
"" . , , HTML5 . , , tel ,
, .
tel
, ,
.

HTML5 . number
.
. : , , , , . , .
number , .
:
<label for="age">Age<em>*</em></label>
<input id="age" type="number"><br>

, ,
. ,
43 000 6 , . min max. 0 120 :
<input id="age" type="number" min="0" max="l20"><br>

4. -

159

number , , 30,5,
. ( , .) step,
( ). , step 0.1, , 0,1, 0,2
0,3 . . 0,15, . 1.
<label for="weight">Weight (in pounds)</label>
<input id="weight" type="number" min="50" max="1000" step="0.1"
value="160"><br>

step (. 4.10).

. 4.10. number .
,

HTML5 range. number,


. min
max .
:
<label for="weight">Weight (in pounds)</label>
<input id="weight" type="range" min="50" max="1000" value="160"><br>

, range . , number,
(. 4.11).

. 4.11. , , range
, .
,
,

range, . ,
,

II. -

160

. , JavaScript,
(, onChange), . , ( Modernizr), range, ,
, . .
.


HTML5 , . , , , / .
,
( ) . , .
, , . Opera ,
(. 4.12). Chrome
:
.

. 4.12. <input> - ().


( , Opera)
, ,
,



(polyfills) , ,

4. -

161

html5Widgets (www.useragentman.com/tests/html5Widgets), . " " . ,


, . ( , JavaScript .)

. 4.4 ,
.
4.4.

date

--

25 2012 .:
2012-01-25

time

24- , ::.

14:35 ( 50,2 ):
14:35 14:35:50.2

datetime-local

,
(
--T::)

25 2012 ., 14:35:
2012-01-25T14:35

datetime

, datetimelocal, .

(--T::-: ),
<time>,
. "
<time>" 3

25 2012 ., 14:35
-:
2012-01-25T14:35-05:00

month

2012 .:
2012-01

week

-W.
,
52 53

2012 .:
2012-W02


, , min max , . , 2012 : <input type="date"
min="2012-01-01" max="2012-12-31">.

color , .
color , , - , MS Paint.
Opera.

II. -

162

(
html5Widgets (www.useragentman.com/tests/html5Widgets).


, HTML5- .
, HTML5 .
. , , . , , ,
. , , . , ,
,
, .

<datalist>
<datalist> .
, (. 4.13).

. 4.13. .
, "ca" ,
( )

4. -

163

datalist,
. , <input>:
<legend>What's Your Favorite Animal?</legend>
<input id="favoriteAnimal">

,
<datalist>.
, . . , .
<input>, , .
<datalist>:
<datalist id="animalChoices">
<option label="Alpaca"
<option label="Zebra"
<option label="Cat"
<option label="Caribou"
<option label="Caterpillar"
<option label="Anaconda"
<option label="Human"
<option label="Elephant"
<option label="Wildebeest"
<option label="Pigeon"
<option label="Crab"
</datalist>

value="alpaca">
value="zebra">
value="cat">
value="caribou">
value="caterpillar">
value="anaconda">
value="human">
value="elephant">
value="wildebeest">
value="pigeon">
value="crab">

<select>, <datalist>
<option>. <option> , . label , ,
value , , . <datalist> .
,
list id <datalist>:
<input id="favoriteAnimal" list="animalChoices">

, <datalist> (
Opera 10 Firefox 4 ), ,
. 4.13. list
<datalist>, .
, . ,
<datalist>. , , <datalist>, <option> . -

II. -

164

, . ( , , <datalist>.)
<legend>What's Your Favorite Animal?</legend>
<datalist id="animalChoices">
<span class="Label">Pick an option:</span>
<select id="favoriteAnimalPreset">
<option label="Alpaca"
value="alpaca">
<option label="Zebra"
value="zebra">
<option label="Cat"
value="cat">
<option label="Caribou"
value="caribou">
<option label="Caterpillar" value="caterpillar">
<option label="Anaconda"
value="anaconda">
<option label="Human"
value="human">
<option label="Elephant"
value="elephant">
<option label="Wildebeest" value="wildebeest">
<option label="Pigeon"
value="pigeon">
<option label="Crab"
value="crab">
</select>
<br>
<span class="Label">Or type it in:</span>
</datalist>
<input list="animalChoices" name="list">

, , , . , , <datalist>, , . 4.13.
<select>,
(. 4.14).
.
<select>
(favoriteAnimalPreset) <datalist> (animalChoices).
, .

<datalist> , - , ,
-,
. , ,
HTML, JavaScript, XMLHttpRequest
(. . " XMLHttpRequest" 11) .

4. -

165

. 4.14. ,
<datalist>, <select>

<progress> <meter>
<progress> <meter> (. 4.15)
, .

. 4.15. , <progress> <meter>,


().
()

<progress>
. <progress>
, , , -

II. -

166

(,
Windows), , .
<meter> .
<progress>, . <meter>
, " "
" ". , Chrome .
<progress> <meter>
.

<meter> <progress> .
, , . . -. HTML5
,
, , - .

<progress> <meter>
Chrome 9, Opera 11 Safari 5.1 ( ).
Firefox Internet Explorer .
<progress> <meter> .
<progress>. value,
0 1. . , , 25%, value 0,25:
<progress value="0.25"></progress>

, max,
. , max,
200, value 0 200. value 50, 25% ,
:
<progress value="50" max="200"></progress>

, . . .

<progress>
. . ,

(, , . "
" 12), JavaScript value <progress> -.

4. -

167

, <progress>,
. , <progress> :
<progress value="0.25">25%</progress>

,
, .
, , ,
. ( " ".) , .
, value:
<progress>Task in progress...</progress>

<meter> , .
. value
- ,
, , . .
min max:
Your suitcase weighs: <meter min="5" max="70" value="28">
28 pounds</meter>

<progress>, <meter>
, .
<meter> .
;
. .
, <meter>
:
<p>Our goal is to raise $50,000 for SLF (Save the
Lemmings Foundation).</p>
<p>So far we've raised $14,000. <meter max="50000" value="l4000"></meter>

<meter> ,
. low high. , value,
high, max, - , .
value low, min,
- , .

168

II. -

high:
Your suitcase weighs:
<meter min="5" max="100" high="70" value="79">79 pounds</meter>*
<p><small>* A surcharge applies to suitcases heavier than 70 pounds.
</small></p>

low
high. , Chrome ( ) , low .
, optimum ,
.
, <progress> <meter> ,
,
.

<command> <menu>

, . , , (. . <command>), (. . <menu>). <menu>
, , ,
, - .
, , , .

- HTML-
1, HTML5
, , , -.
contentEditable designMode, HTML-.
. , Internet
Explorer 5 .
,
Windows . IE ,
HTML-. , .

4. -

169


contentEditable

HTML-
, :
contentEditable.

<div id="editableElement" contentEditable>You can edit this text,


if you'd like.</div>

,
. -
(. 4.16).

. 4.16. ,
,
(). , , ().
,
, <div>,


HTML-?
HTML-,
, - .
, HTML- , . ,
HTML-, ,
, ,
.
, , contentEditable
designMode . -,
, HTML-, . .
HTML-
, .
, , -

II. -

170

- ,
. .
http://ajaxian.com/archives/richtexteditors-compared.

<div>
. . , <div> -,
. , contentEditable , .

. , Internet Explorer , <Ctrl>+<B>, <Ctrl>+<I> <Ctrl>+<U> . Firefox
<Ctrl>+<Z>. "" Chrome.
,
, .
Opera: http://tinyurl.com/htmlEdit
http://tinyurl.com/htmlEdit2.

contentEditable . JavaScript- .
:
function startEdit() {
// .
var element = document.getElementById("editableElement");
element.contentEditable = true;
}
function stopEdit() {
// .
var element = document.getElementById("editableElement");
element.contentEditable = false;
// .
alert("Your edited content: " + element.innerHTML);
}

:
<button onclick="startEdit()">Start Editing</button>
<button onclick="stopEdit()">Stop Editing</button>

,
. . ,
.
. 4.17 ,
"YES" ""
<Ctrl>+<B>.

4. -

171

. 4.17. ,
.
, -,
, XMLHttpRequest


HTML- - . ,
Chrome <Ctrl>+<B> <b>,
IE <strong>. <Enter> <Backspace>
. HTML- HTML5, .


designMode
designMode contentEditable, , -. , . , ?

<iframe>, ,
(. 4.18).
.
<body> .
<h1>Editable Page</h1>
<iframe id="pageEditor" src="ApocalypsePage_Revised.html"></iframe>
<div>
<button onclick="startEdit()">Start Editing</button>

172

II. -

<button onclick="stopEdit()">Stop Editing</button>


</div>
<h1>Edited HTML</h1>
<div id = "editedHTML"></div>

. 4.18. . <iframe>
2.
<div> HTML- .
,
designMode <iframe>

, , ,
startEdit() stopEdit(). , designMode, contentEditable:
function startEdit() {
// designMode <iframe>.
var editor = document.getElementById("pageEditor");
editor.contentWindow.document.designMode = "on";
}

4. -

173

function stopEdit() {
// designMode <iframe>.
var editor = document.getElementById("pageEditor");
editor.contentWindow.document.designMode = "off";
//
// ( , ).
var htmlDisplay = document.getElementById("editedHTML");
htmlDisplay.textContent = editor.contentWindow.document.body.innerHTML;
}

HTML-. , , . ,
. , .
, - ,
.
.
, Opera
(. http://tinyurl.com/htmlEditl http://tinyurl.com/htmlEdit2).
- , ,
, XMLHttpRequest (. . "
XMLHttpRequest" 11).
. . Internet Explorer Chrome , Firefox . , : www.prosetech.com/html5.

, . ,
. ,
, ,


.
. , 2005 .
" ",
YouTube. 34 .
, Cisco,
, , , 2013 . 90%
- .
, , HTML
.
, Flash,
. HTML , , iPad
Apple, Flash.
HTML5 <audio>
<video>, HTML . , , , . .
- , ,
Blu-Ray HD-DVD. - ,
, HTML,
- . ,
.

5.

175

, , , ,
HTML5.



HTML5, - .
<embed>.
Windows Media Player, Apple QuickTime .
,
.
, ,
, ,
.
, Silverlight
Microsoft Flash Adobe. Flash
. Flash , Flash,
90% . Flash
. , , Flash .
Flash . Flash
-, ,
<object> <embed>. ,
,
Flash- ,
.
Apple iPhone iPad. Flash ,
.

.
. , ,
Flash, Flash - . ,
, , , - , , .

II. -

176

, ( iPhone iPad), , , -
Flash. , .
Adobe Flash Player 10,
Flash.
HTML5 , , Flash -, , ,
, Internet Explorer 8.

2010 . YouTube HTML- . ,
www.youtube.com/html5. YouTube Flash.

HTML5
HTML5 . ,
<img> - ,
<audio>
<video>. , HTML5
.

, ...
, - HTML5.
/ Flash ( , ).
. HTML5 . , HTML5-
,
.
. HTML5 . ,
-, - /
-, Flash. HTML5 <device>, ,
HTML5
.
. - , YouTube,
. , , - .
HTML5 ,
HTML5 , Flash .

5.

177

.
.
, . HTML5, .
. , ,
?
, Audio Data API,
Firefox, HTML5-,
.


<audio>
<audio>:
<p>Hear us rock out with our new song,
<cite>Death to Rubber Duckies</cite>:</p>
<audio src="rubberduckies.mp3" controls></audio>

src , controls
, .
, : ,
(. 5.1).

<audio> <video> ,
. (, <audio/>) .

controls <audio> : preload,


auotoplay loop. preload .
auto ,
, .
, , , .
preload . metadata
, , (, ).
none .
,
, ,

II. -

178
<audio>,

:
<audio src="rubberduckies.mp3" controls preload="metadata"></audio>

preload none metadata,


, .
, ,
, -
.

. 5.1. :
Internet Explorer (), Google Chrome ( ) Firefox ().
, ,

preload ,
. auto , Firefox metadata. , , preload ,
,
.
preload.

<audio>, .
- .

autoplay :
<audio src="rubberduckies.mp3" controls autoplay></audio>

5.

179

, ,
.
<audio> , .
controls autoplay ( JavaScript,
. " JavaScript" ).
,
- .
!
, , .
<audio> controls, ,
JavaScript .

, loop :
<audio src="rubberduckies.mp3" controls loop></audio>

, .
, , . www.flashkit.com/loops . ( Flash-,
MP3 WAV.)
<audio> , , ,
. . " "
, HTML5- .
<audio> <video>.


<video>
<audio> <video>.
src, controls, autoplay loop. :
<p>A butterfly from my vacation in Switzerland!</p>
<video src="butterfly.mp4" controls></video>

<audio>, controls
(. 5.2). - .

180

II. -

. 5.2. <video> Flash.


,
, .
,
, ,

<audio> , <video> : height, width poster.


height width
, .
400 300 :
<video src="butterfly.mp4" controls width= "400" height="300"></video>

,
, , ( ).
, poster , :
<video src="butterfly.mp4" controls poster="swiss_alps.jpg"></video>

:
, preload none
.
, - ,
JavaScript.

5.

181

<video>, - .
<audio>


<audio> <video> . muted
.
. mediagroup ,
. ,
. .


: MP3
H.264 . Internet Explorer Safari,
(. 5.3).

. 5.3. MP3- Firefox ()


Internet Explorer ()

HTML5 -
. ,
HTML5
? . , . ( Mozilla, Firefox) , MP3
H.264 . ,
.

II. -

182

( Microsoft Apple) ,
. ,
( ) ,
, , , H.264, , Blu-Ray .
, - , - . , , ,
Microsoft Apple,
, .

H.264
H.264 .
?
H.264 (,
, H.264),
. , .
. H.264 , .
,
(, ),
.
- H.264, ,
, MPEG-LA ,
. .
100 , , 100 250 , $25 000 . ,
, , , .
2016 . , -, ,
- , Theora WebM.
H.264
www.mpegla.com/main/programs/AVC/Pages/Intro.aspx.


HTML5 , - . (
, .) ,
, , . , , . 5.1.

5.

183
5.1. - ,
HTML5-

MIME

.

,
Firefox Opera

mp3

audio/mp3

Ogg Vorbis

, , ,
MP3

ogg

audio/ogg

WAV


. ,

-

wav

audio/wav

H.264

, . ( Blu-Ray),
( YouTube
Vimeo)
( Flash Silverlight)

mp4

video/mp4

Ogg Theora

, ,

Vorbis. , H.264, ,

ogv

video/ogg

WebM

, Google VP8.
,
H.264 , .
, WemM

webm

video/webm

MP3

. 5.1 .
, , ,
. , , , . , H.264, Theora WebM.
, . , H.264
MP3, Theora Vorbis. ,
, , .
, . . mp4
MPEG-4, ogv Ogg . .

II. -

184

, . .
- . , Matroska (mkv)
H.264 Theora. , . 5.1
,
.
. 5.1 MIME, -. MIME,

. ( , MIME , .
" . MIME-"
.)


- , ,
.
. 5.2, ,
. 5.3 .
5.2. HTML5
IE

Firefox

Chrome

Safari

Opera

Safari
iOS

Android

MP3

3.1

Ogg
Vorbis

3.6

10.5

WAV

3.6

3.1

10.5

5.3. HTML5
IE

Firefox

Chrome

Safari

Opera

Safari
iOS

Android

H.264

3.1

4**

2.3

Ogg
Theora

3.5

10.5

WebM

***

10.6

2.3

*** Chrome ,
WebM.

*** iOS 3.x , Safari

. , poster (. . " <video>"


).
*** Internet Explorer WebM, ,
.

5.

185

. , . ,
, ,
, -.
.

, ,
H.264 Baseline Profile ( High Profile).
iPhone Android 640 480, BlackBerry 480 360. (. " . "
) ,
, .


MIME-
MIME- ( ) , -. , MIME- text/html.
, - MIME- . , SuperVideoPlayerPage.html,
- MIME- text/html,
, . MIME- ,
. ,
- .
MIME- , HTML-
, , . . -
. - MIME-
. , . . MIME-, ,
, .
-
MIME-, . 5.1,
- . ( MIME-, , . . . , - MIME- video/mp4 mp4-,
mpFour, - ,
.)
MIME- , - ( -, ). -
cPanel. ,
MIME Types. , . 5.4, . , .

186

II. -

. 5.4. MIME- H.264. -


,

:

- ?
, - . , , . , , , Flash
, , HTML5,
, , IE 8.
, <audio> <video> , -. , , ,
, , , , .
,
, HTML5. , -
.
Flash , HTML5-

. , Flash, , -

5.

187

. ,
Flash,
iPad iPhone.
HTML5 , Flash-

. , HTML5-
/ , , , Flash-. , HTML5. , HTML5-, , Flash-.
, , HTML5 (. " . , ..." ) .
. , HTML5- ,
.

<source>
src <video> <audio> <source>. :
<audio controls>
<source src="rubberduckies.mp3" type="audio/mp3">
<source src="rubberduckies.ogg" type="audio/ogg">
</audio>

<audio> <source>, .
, . , Firefox Opera
rubberduckies.ogg, Internet Explorer, Safari Chrome
rubberduckies.mp3.
, ,
, . type, MIME- (.
" . MIME-"
). , , ,
, . ( MIME-,
. . 5.1.)
<video>.
H.264 Theora:
<video controls width="700" height="400">
<source src="beach.mp4" type="video/mp4">
<source src="beach.ogv" type="video/ogg">
</video>

II. -

188

.
H.264 .
iPad
iOS 3.x. ( iOS 4,
H.264 .)

, ,
, , . ,
,
. , type, .

? ,
H.264 Theora HTML5
Flash ( ). Theora WebM.
Firefox Opera, .
H.264, Theora WebM . WebM
Theora , ,
, .
, -
, .
H.264 Theora,
, - . , ,
(media
queries), " . " 8.

Flash

. , Internet Explorer 8
<video>, , src . , ,
. , :
<video controls width="400" height="300">
<source src="discoParty.mp4" type="video/mp4">
<source src="discoParty.ogv" type="video/ogg">

5.

189

<p>We like disco dancing.</p>


</video>

, HTML5, ,
:
<p>We like disco dancing.</p>


.


, , ,
, .
- , . .
. ,

( ), -,
. ,
, . .
. WAV MP3 Vorbis
- . Audacity
Ma Windows,
http://audacity.sourceforge.net. MP3
LAME MP3,
http://lame.buanzo.com.ar. Goldwave (www.goldwave.com) . , .
Miro Video Converter. Windows Mac
OS X. WebM,
Theora H.264.
, iPad, iPhone
Android.
.
www.mirovideoconverter.com.
Firefogg. Firefox
Theora WebM, , Miro Video Converter.
,
-. http://firefogg.org.
HandBrake. H.264,
. http://handbrake.fr.
Zencoder. ,
-. ,
, .
, , , ,
.
http://zencoder.com.

II. -

190


, HTML5-, ,
. , Firefox
<video>, H.264, Theora, ,
(. . 5.3), .

, , , .
, " HTML5-, ". - , ,
, .

, , , , . . HTTP5.
YouTube.
YouTube
15 ,
.
YouTube, , .
http://upload.youtube.com/my_videos_upload.
Flash ( Flash ). , Flash, , , . H.264,
, , HTML5-.

<video> Flowplayer (http://flowplayer.org):
<video controls width="700" height="400">
<source src="beach.mp4" type="video/mp4">
<source src="beach.ogv" type="video/ogg">
<object id="flowplayer" width="700" height="400"
data="flowplayer-3.2.7.swf"
type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3.2.7.swf">
<param name="flashvars" value='config={"clip":"beach.mp4"}'>
</object>
</video>

, Flowplayer.
HTML5- H.264, HTML5-

5.

191

. 5.5. : Internet Explorer 9 (),


Firefox ( ) Internet Explorer 7 ()

II. -

192

Theora Flash- H.264, ,


.
. 5.5.

H.264 Flash , .
Flash 9.0.115.0. ,
Flash,
H.264 . Flash Video
Format (flv), Flash,
.

, - , Flash HTML5. , , ,
.
Flash, <object>
:
<video controls width="700" height="400">
<source src="beach.mp4" type="video/mp4">
<source src="beach.ogv" type="video/ogg">
<object id="flowplayer" width="700" height="400"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf"
type="application/x-shockwave-flash">
<param name="movie" value="beach.mp4">
<img src="beach_thumbnail.jpg" alt="A lazy day at the beach">
<p>Your browser does not support HTML5 video or Flash.</p>
<p>You can download the video in <a href="beach.mp4">MP4 H.264</a>
or <a href="beach.ogv">Ogg Theora</a> format.</p>
</object>
</video>

, , Flash, HTML, .
<object>, <video> </object>. <source>:
<object id="flowplayer" width="700" height="400"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf"
type="application/x-shockwave-flash">
<param name="movie" value="butterfly.mp4">
<video controls width="700" height="400">
<source src="beach.mp4" type="video/mp4">
<source src="beach.ogv" type="video/ogg">

5.

193

<img src="beach_thumbnail.jpg" alt="A lazy day at the beach">


<p>Your browser does not support HTML5 video or Flash.</p>
<p>You can download the video in <a href="beach.mp4">MP4 H.264</a>
or <a href="beach.ogv">Ogg Theora</a> format.</p>
</video>
</object>

, - Flash Apple, iPad. , JavaScript


HTML5. JW
Player, www.longtailvideo.com/players/jwflv-player.


JavaScript
. ,
<audio> <video> , , Flash. !
HTML-, , , , <audio> <video>.
JavaScript, . , , , , , ,
- .
JavaScript, . , , . ,
HTML5 JavaScript,
.


<audio> , -.
. , .
. 5.6 ,
.

194

II. -

. 5.6. - , ,
( ).
, , , ,

6
<canvas>. , .

.
.
<audio>:
<audio id="backgroundMusic" loop>
<source src="TheOwlNamedOrion.mp3" type="audio/mp3">
<source src="TheOwlNamedOrion.ogg" type="audio/ogg">
</audio>

autoplay controls,
. loop ,
, .
( ): play() pause(). , stop() ,

pause(), currentTime 0, .

5.

195

,
:
var audioElement = document.getElementById("backgroundMusic");
audioElement.play();

:
var audioElement = document.getElementById("backgroundMusic");
audioElement.pause();
audioElement.currentTime = 0;

, <audio> . , , .
, , "" "",
""1.
"". , , , .
,
. , <audio>
.
( src)
. . : <audio> . ,
, , , ,
. , src .
( ),
Internet Explorer . , , "" .
<audio>, . :
<audio id="audio1">
<source src="boing1.mp3"
<source src="boing1.wav"
</audio>
<audio id="audio2">
<source src="boing2.mp3"
<source src="boing2.wav"
</audio>

type="audio/mp3">
type="audio/wav">

type="audio/mp3">
type="audio/wav">

. .

II. -

196

<audio id="audio3">
<source src="boing3.mp3" type="audio/mp3">
<source src="boing3.wav" type="audio/wav">
</audio>


, <audio> .
, , ,
.

, JavaScript boing(). <audio> .


:
// <audio>.
var audioElementCount = 3;
// <audio>, .
var audioElementIndex = 1;
function boing() {
// <audio>.
var audioElementName = "audio" + audioElementIndex;
var audio = document.getElementById(audioElementName);
// .
audio.currentTime = 0;
audio.play();
// <audio>.
if (audioElementIndex == audioElementCount) {
audioElementIndex = 1;
}
else {
audioElementIndex += 1;
}
}



http://www.prosetech.com/html5/.

.
? ,
<audio> . - ,

5.

197

<audio>.
<audio>, :
src

var audio = document.createElement("audio");


audio.src = "newsound.mp3";

:
var audio = new Audio("newsound.mp3");

. :
. , Internet Explorer. : ,
,
. canPlayType(). MIME- , , . , "" . canPlayType() : , ; probably, ,
; maybe, , , , ,
. ,
, .
,
, , canPlayType()
, :
if (audio.canPlayType("audio/ogg")) {
audio.src = "newsound.ogg";
}
else if (audio.canPlayType("audio/mp3")) {
audio.src = "newsound.mp3";
}



<audio> <video> JavaScript . controls,
,
. ,
JavaScript-. . 5.7.
.
. 5.7 :

198

II. -

<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
<button onclick="stop()">Stop</button>

:
function play() {
video.play();
}
function pause() {
video.pause();
}
function stop() {
video.pause();
video.currentTime = 0;
}

. 5.7. HTML5
( ).
, ,
, ,
<video> JavaScript



playbackRate. , playbackRate 2 -

5.

199

,
, , .
. , playbackRate 0.5
, .
playbackRate -1 ,
, . :
function speedUp() {
video.play();
video.playbackRate = 2;
}
function slowDown() {
video.play();
video.playbackRate = 0.5;
}
function normalSpeed() {
video.play();
video.playbackRate = 1;
}

. <div>,
:
<div id="durationBar">
<div id="positionBar"><span id="displayStatus">Idle.</span></div>
</div>


, <progress> (. . "
<progress> <meter>" 4).
<progress> , , HTML5.

<div>.

<div> ( durationBar) , . <div> ( positionBar) , . , <span>


<div> , .

II. -

200

, :
#durationBar {
border:
solid 1px black;
width:
100%;
margin-bottom: 5px;
}
#positionBar {
height:
color:
font-weight:
background:
text-align:
}

30px;
white;
bold;
steelblue;
center;

<video>
onTimeUpdate. , :
<video id="videoPlayer" ontimeupdate="progressUpdate()">
<source src="butterfly.mp4" type="video/mp4">
<source src="butterfly.ogv" type="video/ogg">
</video>

currentTime ,
( duration) , <div>-
postitionBar:
function progressUpdate() {
// <div>- positionBar, 0 100%.
var positionBar = document.getElementById("positionBar");
positionBar.style.width = (video.currentTime /
video.duration * 100) + "%";
// .
displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) +
" sec";
}


, , ,
. ,
. , onProgress
seekable. , <video> . Microsoft
http://msdn.microsoft.com/ru-ru/library/ff975073.aspx.

5.

201

JavaScript
,
- .
, , . ,
, ,
.
, -, HTML5, . , , JavaScript . VideoJS
(http://videojs.com) , jQuery, jPlayer (www.jplayer.org).
, ,
(. 5.8).

. 5.8. VideoJS ,
-, YouTube, Vimeo Hulu.

JavaScript (
VideoJS jPlayer) Flash,
Flash. jPlayer
, (. 5.9).
VideoJS , JavaScript - . , :

II. -

202
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>

<script src="video.js"></script>
<link rel="stylesheet" href="video-js.css">
</head>
...

. 5.9. jPlayer
.
, .

<video> <source>
Flash. ( Flash-
VideoJS Flowplayer,
Flash-.) ,
HTML5 VideoJS ,
<div>, :

5.

203

<div class="video-js-box">
<video class="video-js" width="640" height="264" controls ...>
...
</video>
</div>

, HTML5
.


, HTML5
-, , -.
. alt. <alt> ? , . .
, . , . .
, .
, , (
, , , , ).
, ,
, , ,
. HTML5 <track>,
, ,
WebSRT WebVTT.

, . , .
JavaScript
. <span>,
. , - www.storiesinflight.com/
js_videosub JavaScript- VideoSub,
WebSRT
(. 5.10).
VideoSub , . ( ,

204

II. -


. 5.10. JavaScript WebSRT , ,

, . . .)
JavaScript LeanBack Player, (http://dev.mennerich.name/showroom/html5_video). , , ,
. , ,
JavaScript
HTML.

1, HTML5 -.
" " , , ,
.

,
.
HTML, . . JavaScript.
. , , , , , ,
.

MS Paint, . , ,
, , , , , , , ,
, , - . , Flash, .
, , , .
,
.
, . , ,
, (. . " " ),
, HTML5.

II. -

206


,
. ( , , ,
Flash.) :
,
.


<canvas> . , id, width
height:
<canvas id="drawingCanvas" width="500" height="300"></canvas>

id , JavaScript. width height


, .

width
height <canvas>, width height . , " . !" 7.

, . .
. , , :
canvas {
border: 1px dashed black;
}

, ,
. 6.1.
, JavaScript.
.
, document.getElementById():
var canvas = document.getElementById("drawingCanvas");

, . . getElementById()
, .

JavaScript, .
JavaScript,
2. ,
.

6.

207

. 6.1. -.
,
JavaScript

,
getContext():
var context = canvas.getContext("2d");

,
, , , . . - .

, ( "2d"),
, : ? , , HTML5
.

, ,
, , . . ,
, ,
.
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ut-f-8">
<title>Canvas Test</title>

II. -

208
<style>
canvas {
border: 1px dashed black;
}
</style>

<script>
window.onload = function() {
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
// ( )
};
</script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="300"></canvas>
</body>
</html>

<style> , . <script> window.onload,


.
, .
.

, -
, JavaScript
. , . . " JavaScript
" 2. ,
. , CanvasTemplate.html
(www.pmsetech.com/html5).


. ? . . 6.2.
, , . .
moveTo().
lineTo() . , stroke()
:

6.

209

context.moveTo(10,10);
context.lineTo(400,40);
context.stroke();

: ( moveTo()),
( lineTo()) , , , ( stroke()).
(10, 10) (400, 40) .

(0, 0)
150

250

(250, 150)

. 6.2. , , (0, 0).


(. . x-) ,
(. . y-) . ,
500 300 ( )
(500, 300)

, . ,
stroke(), : lineWidth, strokeStyle lineCap. , .
lineWidth . ,
10 :
context.lineWidth = 10;

strokeStyle .
HTML, HTML CSS- rgb(), , . ( , . .

II. -

210

.) , , :
// - HTML:
context.strokeStyle = "#cd2S2S";
// - rgb():
function: context.strokeStyle = "rgb(205,40,40)";


strokeStyle , strokeColor, . .
. ,
(. . " " 7)
(. . " " 7).

, lineCap .
butt (
), round, ,
squre. , butt, .
round.
,
(. 6.3).
, JavaScript,
. , window.onload (.
. " "
).
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
// .
context.lineWidth = 20;
context.strokeStyle = "rgb(205,40,40)";
// butt.
context.moveTo(10,50);
context.lineTo(400,50);
context.lineCap = "butt";
context.stroke();
// round.
context.beginPath();
context.moveTo(10,120);
context.lineTo(400,120);
context.lineCap = "round";
context.stroke();

6.

211

// square.
context.beginPath();
context.moveTo(10,190);
context.lineTo(400,190);
context.lineCap = "square";
context.stroke();

. 6.3. butt,
( ),

: beginPath() .
beginPath() , . , stroke() . ( ,
, , .)

, beginPath(), , . , .


, ,
. ,
. ,
. , :

212

II. -

context.moveTo(250,50);
context.lineTo(50,250);
context.lineTo(450,250);
context.lineTo(250,50);
context.lineWidth = 10;
context.strokeStyle = "red";
context.stroke();

,
stroke() . closePath(), ,
fillStyle, fill(), :
context.closePath();
context.fillStyle = "blue";
context.fill();

. : , . . closePath() .
:
.
.
:
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
context.moveTo(250,50);
context.lineTo(50,250);
context.lineTo(450,250);
context.closePath();
// .
context.fillStyle = "blue";
context.fill();
// .
context.lineWidth = 10;
context.strokeStyle = "red";
context.stroke();

, beginPath() , . .
. beginPath() ,
,
. . 6.4.

6.

213

. 6.4. ,
moveTo(), lineTo(),
closePath().
fill() stroke()


, ,
, lineJoin . round , mitre " ", bevel .
lineJoin mitre.

, , , .
, . . fillRect(),
, .
,
100 200 (0, 10):
fillRect(0,10,100,200);

fillRect() ,
fill() fillStyle.
, strokeRect(), :
strokeRect(0,10,100,200);


lineWidth strokeStyle, , stroke().

II. -

214


- , ,
: arc(), arcTo(), bezierCurveTo()
quadraticCurveTo(). ,
-, ( ) .
arc(), .
, , , (. 6.5)1.
1,5 p

(2)

(3)

1p

0p

0,5 p


(4)

(1)

. 6.5. , ,
. .
(1) (2), .
, (3) (4).
, .
2 , 1 . .

, arc():
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
// .
var centerX = 150;
var centerY = 300;
var radius = 100;
var startingAngle = 1.25 * Math.PI;
var endingAngle = 1.75 * Math.PI;
// .
context.arc(centerX, centerY, radius, startingAngle, endingAngle);
context.stroke();

, , ,
. .

6.

215

, .
closePath() , stroke().
, , 2 . :
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
var
var
var
var
var

centerX = 150;
centerY = 300;
radius = 100;
startingAngle = 0;
endingAngle = 2 * Math.PI;

context.arc(centerX, centerY, radius, startingAngle, endingAngle);


context.stroke();


arc() ( ).
, , ,
, .

arcTo(), bezierCurveTo()
,
. , . . ,
, .
,
.
, . . 6.6 , .
quadraticCurveTo()

. 6.6 :
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
// .
context.moveTo(62, 242);
//
// .
var control1_x = 187;
var control1_y = 32;
var control2_x = 429;
var control2_y = 480;
var endPointX = 365;
var endPointY = 133;

II. -

216

. 6.6. . ,
(. .
),
. , ,
(. . ).
,
, ,

. 6.7. , .
,
.
http://tinyurl.com/html5quadratic

6.

217

// .
context.bezierCurveTo(control1_x, control1_y, control2_x,
control2_y, endPointX, endPointY);
context.stroke();

,
.
closePath(), .
, , (. 6.7) : http://tinyurl.com/html5bezier.

, . , . , fillRect() ,
:
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
// 3030 .
context.rect(0, 0, 30, 30);
context.rect(50, 50, 30, 30);
context.rect(l00, 100, 30, 30);
context.stroke();


,
.
?
,
, , , .
, , , .
. ,
, ,
?
(, fillEllipse(),
), JavaScript
.
CanvasPlus (http://code.google.com/p/canvasplus) Artisan JS (http://artisanjs.com).
, , , , .
. , .
, , PNG, -

218

II. -
, . " " 7. , ,
. .
.
, .
, . Ai->Canvas Adobe Illustrator
(http://visitmix.com/labs/ai2canvas).
Adobe Illustrator HTML JavaScript, .

, , :
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
// (0, 0).
context.rect(0, 0, 30, 30);
// 50 .
context.translate(50, 50);
context.rect(0, 0, 30, 30);
// 50 .
// , (0, 0)
// (100, 100).
context.translate(50, 50);
context.rect(0, 0, 30, 30);
context.stroke();

:
.
,
.
,
. , , , ,
. ,
. (
. " " 7.)
, ,
.
.

6.

219

.
, (translation transform),
, . . (0, 0) .
, , (scale
transform), ;
(rotate transform), ;
(matrix transform), , .
. (. . (0, 0)) (100, 100)
, . ,
, . 6.8.
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
// (0, 0). ,
// . . .
context.translate(100, 100);
// 10 .
var copies = 10;
for (var i=1; i<copies; i++) {
// , .
// 2*Math.PI.
// ,
// .
context.rotate(2 * Math.PI * 1/(copies-1));
// .
context.rect(0, 0, 60, 60);
}
context.stroke();


save()
restore(). , ,
. , ,
.
-. restore() .


. , http://tinyurl.com/b742o4.

II. -

220

. 6.8. ,
,

. , . .
, fillStyle strokeStyle
rgba(), rgb(). rgba()
, ( 0
255) ( 0 1), . , 1, ,
, 0 . (, 0,5), , .

. , ,
, .

. ,
0,5, 50% .
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
// .
context.fillStyle = "rgb(100,150,185)";
context.lineWidth = 10;
context.strokeStyle = "red";

6.

221

// .
context.arc(110, 120, 100, 0, 2*Math.PI);
context.fill();
context.stroke();
// beginPath() ,
// .
// .
context.beginPath();
// .
context.fillStyle = "rgba(100,150,185,0.5)";
// .
context.moveTo(215,50);
context.lineTo(15,250);
context.lineTo(315,250);
context.closePath();
context.fill();
context.stroke();

. 6.9.

. 6.9. : , , .
: .
(. . )
. ,

globalAlpha, :
context.globalAlpha = 0.5;
// ,
// 0,5
context.fillStyle = "rgb(100,150,185)";


, globalAlpha . ( strokeStyle),
( fillStyle).
? ,
rgba(). ,

222

II. -

, globalAlpha.
globalAlpha ,
(. . " " 7).


,
, . ,
.
, ,
.
source-over ( ),
. . , xor
. . 6.10 .

globalCompositeOperation:
context.globalCompositeOperation = "xor";
. , , , - . .
http://tinyurl.com/68b2nmz.

. 6.10. , Firefox.
Internet Explorer 9 Opera copy , Chrome
Safari - source-in, source-out, destination-in
destination-atop

6.

223


, . ,
(. 6.11).

. 6.11. ,

JavaScript , ,
.
.

,
,
, ,
Paint.html (www.prosetech.com/html5).


canvas
JavaScript
: onMouseDown, onMouseUp, onMouseOut onMouseMove. ( ,

224

II. -

.)
canvas, , context. , :
var canvas;
var context;
window.onload = function() {
// .
canvas = document.getElementById("drawingCanvas");
context = canvas.getContext("2d");
// .
canvas.onmousedown = startDrawing;
canvas.onmouseup = stopDrawing;
canvas.onmouseout = stopDrawing;
canvas.onmousemove = draw;
};

, ,
. <div>,
- <img>, . , , , :
<div class="Toolbar">
Pen Color -<br>
<img id="redPen" src="pen_red.gif" alt="Red Pen"
onclick="changeColor('rgb(212,21,29)', this)">
<img id="greenPen" src="pen_green.gif" alt="Green Pen"
onclick="changeColor('rgb(l31,190,6l)', this)">
<img id="bluePen" src="pen_blue.gif" alt="Blue Pen"
onclick="changeColor('rgb(0,86,166)', this)">
</div>

onclick <img>. <img>


changeColor(). , , <img>, . :
// <img>, , .
var previousColorElement;
function changeColor(color, imgElement) {
// .
context.strokeStyle = color;

6.

225

// <img>, , .
imgElement.className = "Selected";
// <img>, ,
// .
if (previousColorElement != null) previousColorElement.className = "";
previousColorElement = imgElement;
}

changeColor() . -, strokeStyle
. . -,
<img>, , ,
, .
, . . <img>,
, .
changeThickness() , lineWidth
:
// <img>, ,
// .
var previousThicknessElement;
function changeThickness(thickness, imgElement) {
// .
context.lineWidth = thickness;
// <img>, , .
imgElement.className = "Selected";
// <img>, ,
// .
if (previousThicknessElement != null) {
previousThicknessElement.className = "";
}
previousThicknessElement = imgElement;
}

,
. , ,
.


, .
, , -

226

II. -

isDrawing, ,
.
, onMouseDown startDrawing().
isDrawing, , , :
var isDrawing = false;
function startDrawing(e) {
// .
isDrawing = true;
// ( ).
context.beginPath();
// "" .
context.moveTo(e.pageX-canvas.offset Left, e.pageY-canvas.offsetTop);
}

, , . . , , . .
onMouseDown (
pageX pageY, ),
. ,
.
, ,
. , ,
onMouseMove draw(). isDrawing , (. . , ),
lineTo(), , stroke(), :
function draw(e) {
if (isDrawing == true) {
// .
var x = e.pageX canvas.offsetLeft;
var y = e.pageY canvas.offsetTop;
// .
context.lineTo(x, y);
context.stroke();
}
}

6.

227

,
draw(), .
, ,
.
, , onMouseUp onMouseOut .
stopDrawing(),
:
function stopDrawing() {
isDrawing = false;
}

. .
Operations Clear the Canvas Save the Canvas . Clear
the Canvas clearCanvas(), clearRect():
function clearCanvas() {
context.clearRect(0, 0, canvas.width, canvas.height);
}

, .


.
, , . .
URL . -

,
, URL.
(, <img> -). .
getImageData(). ""

, .
. "
" 7.
"". , , -

, .
.
, -

II. -

228

. ,
, ,
. " " 7.
, .
, , . , , .
. ,
PNG JPEG . ,
,
.
. 9.
-. -
.

, URL (data URL). URL
, toDataURL():
var url = canvas.toDataURL();

toDataURL(), ,
PNG. ,
:
var url = canvas.toDataURL("image/jpeg");

, PNG, .
URL ?
, Base64, :
data:image/png;base64. , , , . . ,
. URL . 6.11
:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAEsCAYAAAA1u0HIAAAAAXNSR0IAr
s4c6QAAAARnQU1BAACxjwv8YQUAACqRSURBVHhe7Z1bkB1Hecdn5uxFFzA2FWOnsEEGiiewnZgKsrWL
rZXMRU9JgZQKhoSHVK...gAAEIQAACEIBAiAT+HxAYpeqDfKieAAAAAElFTkSuQmCC

, ,
URL , . URL .

Base64 , . , - (,
src <img>).

6.

229

. 6.12. <img> URL.


<img> ,
. PNG,
,
, -

, URL
. URL ? - . PHP -
http://tinyurl.com/5uud9ob.
.
URL . , :
window.location = canvas.toDataURL();

URL <img>, :

II. -

230

function saveCanvas() {
// <img>.
var imageCopy = document.getElementById("savedImageCopy");
// <img>.
imageCopy.src = canvas.toDataURL();
// <div>, <img>,
// .
var imageContainer = document.getElementById("savedCopyContainer");
imageContainer.style.display = "block";
}

, . . .

.
, , , .

Firefox .
,
,
.


URL ,
.
, -.


,
, , . , Google
1
, . ,
-:
www.jswidget.com/index-ipaint.html. ,
Microsoft Word 2010.
Adobe
Photoshop ;
http://mugtug.com/sketchpad. , , 1

.
" HTML5" " HTML5", -. .

6.

231

, 1
.
Internet Explorer.


. ,
HTML5:
?
,
HTML5.
(. 6.1). , , ,
. . .
6.1.

IE

Firefox

Chrome

Safari

Opera

Safari iOS

Android

3.5

10

, Internet Explorer. : ,
, ,
IE 8 IE 7?
HTML5, . . ,
HTML5, .
, .


Internet Explorer ,
. ExplorerCanvas ( excanvas),
1

. http://ru.wikipedia.org/wiki/_(). . .

II. -

232

Google JavaScript (Erik Arvidsson).


Internet Explorer 7 8, JavaScript
VML (Vector Markup Language,
).

VML
HTML . , , SVG (Scalable Vector
Graphics, ),
. VML Microsoft, Microsoft Office Internet
Explorer. , .

ExplorerCanvas
http://code.google.com/p/explorercanvas. excanvas.js - :
<head>
<title>...</title>
<!--[if lt IE 9]>
<script src="excanvas.js"></script>
<![endif]-->
...
<head>

, . Internet Explorer
, IE 9, , IE 9
.
<canvas> . ,
, (. . " " ) Internet Explorer.

(. . " " 7)
JavaScript Canvas-text, ExplorerCanvas. http://code.
google.com/p/canvas-text.

, ExplorerCanvas .
, , , .
, ExplorerCanvas (
, ), , , , "" , URL .
- ,
(side-scrolling), ExplorerCanvas

6.

233

. , , Silverlight Flash.
http://tinyurl.com/polyfills. FlashCanvas, http://code.google.com/p/flashcanvas.
ExplorerCanvas, -
JavaScript. ExplorerCanvas
Flash, VML.
FlashCanvas FlashCanvas Pro (http://flashcanvas.net/purchase).
, , , , . ,
ExplorerCanvas,
FlashCanvas FlashCanvas Pro http://flashcanvas.net/docs/
canvas-api.

FlahsCanvas,
, . ,
Internet Explorer,
Flash, , Flash, iPad
iPhone, HTML5.



,
ExplorerCanvas FlashCanvas. .
<audio> <video>, <canvas> . ,
( ), (
):
<canvas id="logoCreator" width="500" height="300">
<p> ,

.</p>
<img src="logo.png" alt=" ">
</canvas>

.
- , -

II. -

234

.
<canvas> Flash. ,
Flash- , . Flash-
Internet Explorer
.
Modernizr (. . "
Modernizr" 1)
JavaScript.
Modernizr.canvas, Modernizr.canvastext.
,
, .


?
HTML5,
, . . -, . , , ,
HTML5 , .
HTML5 .
, . , .
,
, , , ,
- . ( HTML, , ), . ,
, , .
,
. . .
, ( ) (
).
. ,

-, .

. , ,
JavaScript. .
, , , . .
,
, . , . , . , JavaScript- .

. , <canvas> , . " " 6. .


( ) , , .
, ,
http://www.prosetech.com/html5/.

?
,
.
. ,

236

II. -

, .
, , .
,
, , .
, ,
.


, , -
.
,
. ,
.
drawImage(). ,
drawImage() ,
:
context.drawImage(img, 10, 10);

, . HTML5
. createImageData().
. ( . " "
.)
<img>. , :
<img id="arrow_left" src="arrow_left.png">

:
var img = document.getElementById("arrow_left");
context.drawImage(img, 10, 10);

, . , drawImage() , . ,
onLoad, - .
, . ,
maze.png. ,
:

7.

237

// .
var img = new Image();
// .
img.src = "maze.png";
// . ( ,
// . . , , .)
context.drawImage(img, 0, 0);

, src , , .
:
// .
var img = new Image();
// onload
// , , .
img.onload = function() {
context.drawImage(img, 0, 0);
};
// .
img.src = "maze.png";

, . .
.
context.drawImage() ,
img.src.
. ,
. ,
.
, .

.

!
, ,
- ,
.

height width <canvas> . , ,
:
<canvas></canvas>

II. -

238

:
canvas {
height: 300px;
width: 500px;
}
. , height
width CSS <canvas>.
,
300 150 . ,
, .
, , , .
height width <canvas>. - , JavaScript.

,

drawImage() ,
. , , width height :
context.drawImage(img, 10, 10, 30, 30);

30 30 ,
(10, 10). 60 60 ,
,
.
, drawImage() . , :
context.drawImage(img, source_x, source_y, source_width, source_height,
x, y, width, height);

,
.
,
200 200 . ( (0, 0)) 200
100 , (75, 25). :
context.drawImage(img, 0, 0, 200, 100, 75, 25, 200, 100);

7.

239

. 7.1. : .
: ,


. 7.1.
drawImage() , . ,
. "" 6.


drawImage() ,
. , <img>, - .
, . <canvas> ( , ). <video>,
:
var video = document.getElementById("videoPlayer");
context.drawImage(video, 0, 0, video.clientWidth, video.clientWidth);
, , .
.
,
. ,
.
,
, . ,
- Photoshop,
. .

II. -

240

http://html5doctor.com/video-canvas-magic. ,
-,
.


, , . , HTML5 .
- , ,
font. , font CSS.
, . ,
:
context.font = "20px Arial";

,
:
context.font = "20px Verdana, sans-serif";

, :
context.font = "bold 20px Arial";

, CSS3 .
(. . " " 8).
fillText(). , , (10, 10):
context.textBaseline = "top";
context.fillStyle = "black";
context.fillText("I'm stuck in a canvas. Someone let me out!", 10, 10);

, .
,
fillText().

,
. : , measureText() , . , http://tinyurl.com/
6ec7hld .

fillText()
strokeText(). ;

7.

241

strokeStyle lineWidth. :
context.font = "bold 40px Verdana, sans-serif";
context.lineWidth = "i";
context.strokeStyle = "red";
context.strokeText("I'm an OUTLINE", 20, 50);

, strokeText() . , ,
fillText(), strokeText(). . 7.2
( ).

. 7.2. , fillText() ( )
strokeText() ( )


,
.
(, ), . , , drawImage().



. , ,
.
. .
, , .

II. -

242

,
.



. . 7.3 .

. 7.3. , .

, . ,
, , . (
Internet Explorer Firefox.)
, ,

, , ,
. (. 7.1).
7.1.

shadowColor

. ,
.
(. . "" 6),
. ,
shadowColor

7.

243
7.1 ()

shadowBlur

.
, , . 20 ,
. ,
( shadowBlur
3)

shadowOffsetX
shadowOffsetY

,
. , 5,
5 5 .

. 7.3 :
// .
context.rect(20, 20, 200, 100);
context.fillStyle = "#8ED6FF";
context.shadowColor = "#bbbbbb";
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context. fill();
// .
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
img = document.getElementById("star");
context.drawImage(img, 250, 30);
context.textBaseline = "top";
context.font = "bold 20px Arial";
// .
context.shadowBlur = 3;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.fillStyle = "steelblue";
// , .
context.fillText("This is a subtle, slightly old-fashioned shadow.",
10, 175);
context.shadowBlur = 5;
context.shadowOffsetX = 20;
context.shadowOffsetY = 20;
context.fillStyle = "green";

244

II. -

// .
context.fillText("This is a distant shadow...", 10, 225);
context.shadowBlur = 15;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowColor = "black";
context.fillStyle = "white";
// .
context.fillText("This shadow isn't offset. It creates a halo effect.",
10, 300);


, . , , . : , fillStyle (
strokeStyle).

(. 7.4).

. 7.4. : -.
: ,

, ,
, . "
" .
:
var img = document.getElementById("brickTile");

, , createPattern().

7.

245

(repeat-x), (repeat-y)
(repeat).
var pattern = context.createPattern(img, "repeat");


fillStyle strokeStyle:
context.fillStyle = pattern;
context.rect(0, 0, canvas.width, canvas.height);
context.fill();

, (. . 7.4).


,
. , . 7.5.

. 7.5. ( ) .
( ) .
, ,
,
( )


-
,

II. -

246

http://www.prosetech.com/html5/. , , .


.
: createLinearGradient() createRadialGradient(). - : ,
.
.

. 7.5:
// (10, 0) (100, 0).
var gradient = context.createLinearGradient(10, 0, 100, 0);
// .
gradient.addColorStop(0, "magenta");
gradient.addColorStop(1, "yellow");
// .
drawHeart(60, 50);
// .
context.fillstyle = gradient;
context.fill();
context.stroke();

, , .
, (. 7.6).
, , , -
.
. ,
, . .

, .
.
, . , , .

(10, 0)
(100, 0).
.

7.

247

. ,

. ,
. ,
, , (0, 10) (0, 100).
, ,
(10, 10) (100, 100).
90 ( -

, 10, , 100). ,
, .
. ,

, -
, .

,
. . , , ,
.
(10, 0)
(100, 0)

. 7.6. : . 7.5. ,
, . :
, . 7.5

addColorStop(). 0
1, . 0 ,

II. -

248

, 1
. (, 0,2 0,8), , .
0
1. , .
. 7.5 ,
.
var gradient = context.createLinearGradient(l0, 0, 100, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop(".25", "blue");
gradient.addColorStop(".50", "green");
gradient.addColorStop(".75", "yellow");
gradient.addColorStop("1.0", "red");
drawHeart(60, 200);
context.fillStyle = gradient;
context.fill();
context.stroke();


, . ,
, . ,
, .

, ,
. , .
.
. 7.5 (180, 100).
10 ,
50 . , , - .
:
var gradient=context.createRadialGradient(l80, 100, 10, 180, 100, 50);
gradient.addColorStop(0, "magenta");
gradient.addColorStop(1, "yellow");
drawHeart(180, 80);
context.fillStyle = gradient;
context.fill();
context.stroke();

7.

249


.
, , , - , .

, . 7.5. , ,
:
var gradient = context.createRadialGradient(180, 250, 10, 180, 250, 50);
gradient.addColorStop("0","magenta");
gradient.addColorStop(".25","blue");
gradient.addColorStop(".50","green");
gradient.addColorStop(".75","yellow");
gradient.addColorStop("1.0","red");
drawHeart(180, 230);
context.fillStyle = gradient;
context.fill();
context.stroke();

, .

:
, ,
.
, .
. 7.7
.
, Get Score,
,

(. " . " ).


: (openness), (conscientiousness), (extraversion), (agreeableness) (neuroticism).
,
, .
, ,
. , , , -

250

II. -
,
, .
20
.

. 7.7. (),
(). , -
,

7.

251

JavaScript .
, , . , , .
http://http://www.prosetech.com/html5/.
HTML5. ,
,
. . 7.8
.

. 7.8. ,
, .

252

II. -

, .
:
<hgroup>
<h1>Five Factor Personality Test</h1>
<h2>The Results</h2>
</hgroup>
<div class="score">
<h2 id="headingE">Extraversion: </h2>
<canvas id="canvasE" height="75" width = "550"></canvas>
</div>
<div class="score">
<h2 id="headingA"Accommodation: </h2>
<canvas id="canvasA" height="75" width = "550"></canvas>
</div>
<div class="score">
<h2 id="headingC">Conscientiousness: </h2>
<canvas id="canvasC" height="75" width = "550"></canvas>
</div>
<div class="score">
<h2 id="headingN">Neuroticism: </h2>
<canvas id="canvasN" height="75" width="550"></canvas>
</div>
<div class="score">
<h2 id="headingO">Openness: </h2>
<canvas id="canvasP" height="75" width="550"></canvas>
</div>

JavaScript, plotScore(). , .
, ,
, (
20 20) ("Extraversion"):
window.onload = function() {
...
// <canvas> .
var canvasE = document.getElementById("canvasE");
// .
// ( extraversion.)
document.getElementById("headingE").innerHTML += extraversion;

7.

253

// .
plotScore(canvasE, extraversion, "Extraversion");
...
}

plotScore() ,
. :
function plotScore(canvas, score, title) {
var context = canvas.getContext("2d");
// .
var img = document.getElementById("arrow_left");
context.drawImage(img, 12, 10);
img = document.getElementById("arrow_right");
context.drawImage(img, 498, 10);
// .
context.moveTo(39, 25);
context.lineTo(503, 25);
context.lineWidth = 10;
context.strokeStyle = "rgb(l74,215,244)";
context.stroke();
// .
context.fillStyle = context.strokeStyle;
context.font = "italic bold 18px Arial";
context.textBaseline = 'top';
context.fillText("-20", 35, 50);
context.fillText("0", 255, 50);
context.fillText("20", 475, 50);
// ,
// .
img = document.getElementById("star");
context.drawImage(img, (score+20)/40*440+35-17, 0);
}

, , , :
context.drawImage(img, (score+20)/40*440+35-17, 0);

.
0 100.
20 20,
0 40:
score+20

II. -

254

,
40:
(score+20)/40

. , 0%
, 100% , - :
score+20)/40*440

,
0 400.
, .
:
(score+20)/40*440+35

, .

:
(score+20)/40*440+35-17

, ,
.

,
, ,
. , ,
, .
,
, JavaScript .
Rgraph (www.rgraph.net) ZingChart
(www.zingchart.com).

?
(non-retained) . , , ,
.
, stroke()
fill(), ,
, . ,
.

7.

255

, . , , . " " 6. ,
, .
( !) , ,
, ,
, . . , . , ,
? ,
, , ?
, ?
, ?
, . , - , , .
(hit testing).
,
.


,
. , , , . 7.9.

. 7.9. , . - ,
( ),

256

II. -

, .
, (. .
), . ,
. (custom object).
,
.
, . ,
Circle():
function Circle() {
}

, . this. ,
radius , this.radius.
,
: , .
function Circle() {
this.x = 0;
this.y = 0;
this.radius = 15;
}

Circle() .
,
new, :
// circle
// myCircle.
var myCircle = new Circle();

:
// .
myCircle.radius = 20;

Circle(). ,
.
Circle(), . ( ,
. 7.9.)
function Circle(x, y, radius, color) {
this.x = x;
this.y = y;
this.radius = radius;

7.

257

this.color = color;
this.isSelected = false;
}

isSelected true false. , isSelected true,


, .
Circle() :
var myCircle = new Circle(0, 0, 20, "red");

, , . ,
,
. :
var circles = [];

. Add Circle, ,
addRandomCircle(),
:
function addRandomCircle() {
// .
var radius = randomFromTo(10, 60);
var x = randomFromTo(0, canvas.width);
var = randomFromTo(0, canvas.height);
// .
var colors = ["green", "blue", "red", "yellow", "magenta",
"orange", "brown", "purple", "pink"];
var color = colors[randomFromTo(0, 8)];
// .
var circle = new Circle(x, y, radius, color);
// .
circles.push(circle);
// .
drawCircles();
}

randomFromTo(), . (
http://www.prosetech.com/html5/.)

II. -

258

.
addRandomCircle() drawCircles(), :
for(var i=0; i<circles.length; i++) {
var circle = circles[i];
...
}

for (. . "" 2).


.
, .
drawCircles(),
:
function drawCircles() {
// .
context.clearRect(0, 0, canvas.width, canvas.height);
context.globalAlpha = 0.85;
context.strokeStyle = "black";
// .
for(var i=0; i<circles.length; i++) {
var circle = circles[i];
// .
context.beginPath();
context.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2);
context.fillStyle = circle.color;
context.fill();
context.stroke();
}
}



clearRect(). , ,
, . , . . .
,
, .

,
. , ,
, , ,
.

7.

259

, , .



, . . ""
. ,
, ,
.
( Flash Silverlight) . JavaScript (, Kinetic JS), , ,
.
.
, . ,
, , "" . , , ,
.
, , . , drawCircles():
for (var i=circles.length-1; i>=0; i--) {
var circle = circles[i];
...
}

, . ( ) ( 0).
. ,
( )
, . , , , .
, ,
.
, , .
, .

II. -

260

- onClick, , , . canvasClick(), ,
, , - :
function canvasClick(e) {
// , .
var clickX = e.pageX canvas.offsetLeft;
var clickY = e.pageY canvas.offsetTop;
// , .
for (var i=circles.length; i>0; i--) {
//
// , , .
var distanceFromCenter = Math.sqrt(Math.pow(circle.x clickX, 2) +
Math.pow(circle.y clickY, 2))
// , , , .
if (distanceFromCenter <= circle.radius) {
// .
if (previousSelectedCircle != null) {
previousSelectedCircle.isSelected = false;
}
previousSelectedCircle = circle;
// .
circle.isSelected = true;
// Update the display.
drawCircles();
// .
return;
}
}
}



"" . "
" .

drawCircles() . ,
. . :
function drawCircles() {
...
// .
for(var i=0; i<circles.length; i++) {
var circle = circles[i];

7.

261

if (circle.isSelected) {
context.lineWidth = 5;
}
else {
context.lineWidth = 1;
}
...
}
}


. ,
,
. .
onMouseMove, ,
drawCircles(),
. ( , ,
, . " " 6,
, , .) - (. http://www.prosetech/html5)
( InteractiveCircles_
WithDrag.html), .
, : .


.
, -
.
, .
, . . , , ,
. , , , "" . -,

262

II. -


HTML5 .
, , 30
40 .
. ,
, .
JavaScript .
setTimeout(). , ,
.
setTimeout() , ,
, .
setInterval(). , 20 .
, , , setTimeout(),
setInterval() .
, clearInterval().
, . setInterval() ,
, , , .
,
, , , ,
.
setTimeout().
setTimeout() : ,
,
. (. . ),
, 20 ( ) 0,02 .
setTimeout():
var canvas;
var context;
window.onload = function() {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
// 0,02 .
setTimeout("drawFrame()", 20);
};

7.

263

setTimeout() . , ,
. , :
// .
var squarePosition_y = 0;
var squarePosition_x = 10;


drawFunction(), :
function drawFrame() {
// .
context.clearRect(0, 0, canvas.width, canvas.height);
// beginPath(), ,
// .
context.begin Path();
// 1010 .
context.rect(squarePosition_x, squarePosition_y, 10, 10);
context.lineStyle = "black";
context.lineWidth = 1;
context.stroke();
// 1 (
// ).
squarePosition_y += 1;
// 20 .
setTimeout ("drawFrame()", 20);
}

, .
. , , ,
, "", ,
. , .


,
, . "" (. 7.10).

264

II. -


setTimeout(), .

. 7.10. .
( 15 )
, .
, , ,



, , , . .
, ,
,
. JavaScript , , , ,
.
, iPhone Android.
, , 60 / ( ),
, 10 /. ,
, ,
, .

7.

265


, . , , . 7.10, , -
http://www.prosetech.com/html5/.

, . " "
.
( x y)
( dx dy):
// , .
function Ball(x, y, dx, dy, radius) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.color = "red";
}
// , .
var balls = [];


dx , dy . x
dx, y dy.

Add Ball ball balls:


function addBall() {
// .
var radius = parseFloat(document.getElementById("ballSize").value);
// .
var ball = new Ball(50,50,1,1,radius);
// balls.
balls.push(ball);
}

, Clear Canvas balls:


function clearBalls() {
// .
balls = [];
}

II. -

266

addBall(), clearBalls()
, .
, drawFrame(),
20 :
var canvas;
var context;
window.onload = function() {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
// 20 .
set Timeout("drawFrame()", 20);
};

drawFrame() . , .
drawFrame() ,
, ,
, . :
function drawFrame() { // .
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
// .
for(var i=0; i<balls.length; i++) {
// .
var ball = balls[i];
ball.x += ball.dx;
ball.y += ball.dy;
// "", .
if ((ball.y) < canvas.height) ball.dy += 0.22;
// "", .
ball.dx = ball.dx * 0.998;
// , .
if ((ball.x + ball.radius > canvas.width) ||
(ball.x ball.radius < 0)) {
ball.dx = -ball.dx;
}
// , ,
// .

7.

267

if ((ball.y + ball.radius > canvas.height)||


(ball.y ball.radius < 0)) {
ball.dy = -ball.dy*0.96;
}
// , .
if (!document.getElementById("connectedBalls").checked) {
context.begin Path();
context.fillStyle = ball.fillColor;
}
else { context.fillStyle = "white"; }
// .
context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
context.lineWidth = 1;
context.fill();
context.stroke();
}
// 20 .
setTimeout("drawFrame()", 20);
}


. 2.1 (. 2).

,
. :
1. .
2. .
3. .
4. .
5. ( setTimeout())
drawFrame() 20 .
3, . ,
, , . , ,
.
, , , . ,
, (. . " -

268

II. -

" ). - , , . ( , http://www.prosetech/html5, , , .)
, ,
http://tinyurl.com/6byvnk5. ( , ), ,
"Google". ,
http://www.blobsallad.se ( ) http://tinyurl.com/
crn3ed ( ).

( )
?
. , , , , .
,

. , , Flash Silverlight. , " 45 " , , "
, , , ".
, - , . , . ,
HTML, JavaScript.
, ,
.

: ""
,
, . , , ,
- Flash.
. 7.11 ,
. , . -

7.

269

, "" . , .

. 7.11. .
- ,
HTML5 JavaScript

, , :
.
,
JavaScript.

Internet Explorer 9
Opera 11.x. -.
http://www.prosetech.com/html5/.

270

II. -


-,
, .
,
, .
, .

. , Adobe
Illustrator, - (. " .
, " 6).
.
, . . . Google " " "maze generator",
. ,
(, , , ,
), , , .
. ( maze.png) .
, :
// .
var canvas;
var context;
window.onload = function() {
// .
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
// .
drawMaze("maze.png", 268, 5);
// processKey().
window.onkeydown = processKey;
};

, drawMaze().
,
, -

7.

271

. drawMaze()
.
:
// .
var x = 0;
var y = 0;
function drawMaze(mazeFile, startingX, startingY) {
// .
imgMaze = new Image();
imgMaze.onload = function() {
//
//
canvas.width = imgMaze.width;
canvas.height = imgMaze.height;
// .
var imgFace = document.getElementById("face");
context.drawImage(imgMaze, 0, 0);
// .
x = startingX;
y = startingY;
context.drawImage(imgFace, x, y);
context.stroke();
// 10 .
setTimeout("drawFrame()", 10);
};
imgMaze.src = mazeFile;
}

, . " " .
onLoad
.
img , . , <img> , , .

, ,
. , setTimeout(),
.

II. -

272


, (http://www.
prosetech.com/html5/), .
, . drawMaze() , (
) ,
.


,
. , < > , .
, , ,
x y . dx dy, ,
. " "
, , , . .
:
var dx = 0;
var dy = 0;

- ,
processKey(). , , , . ,
, . , 38 < >. processKey()
, :
function processKey(e) {
// , .
dx = 0;
dy = 0;
// , .
if (e.keyCode == 38) {
dy = -1;
}
// , .
if (e.keyCode == 40) {
dy = 1;
}
// , .
if (e.keyCode == 37) {

7.

273

dx = -1;
}
// , .
if (e.keyCode == 39) {
dx = 1;
}
}

processKey()
. drawFrame(), 10 .
drawFrame() , ,
. , , - . , , , :
function drawFrame() {
if (dx != 0 || dy != 0) {

, drawFace() , , , .
:
context.beginPath();
context.fillStyle = "rgb(254,244,207)";
context.rect(x, y, 15, 15);
context.fill()
// .
x += dx;
y += dy;

checkForCollision(), . (
.) , , , :
if (checkForCollision()) {
x -= dx;
y -= dy;
dx = 0;
dy = 0;
}

:
var imgFace = document.getElementById("face");
context.drawImage(imgFace, x, y);

, , . . .
, :

II. -

274
if (y > (canvas.height 17)) {
alert("You win!");
return;
}
}


drawFrame() 10 .
// 10 .
setTimeout("drawFrame()", 10); }

,
checkForCollision(),
. .



,
. . ,
. , . .
. .


"". , .
, ,
, .



, .
: getImageData(), putImageData()
createImageData(). getImageData() . putImageData(). createImageData()
, , ,
putImageData().
, . getImageData() 100 50 :
// 10050,
// (0, 0).
var imageData = context.getImageData(0, 0, 100, 50);

7.

275

data pixels
:
var pixels = imageData.data;

, , . , . ,
, ,
:
// .
for (var i = 0, n = pixels.length; i < n; i += 4) {
// .
var red =
pixels[i];
var green = pixels[i+1];
var blue = pixels[i+2];
var alpha = pixels[i+3];
// .
pixels[i]
= 255 red;
pixels[i+1] = 255 green;
pixels[i+2] = 255 blue;
}

0 255.
.
.
, (
):
context.putImageData(imageData, 0, 0);

, ,
. .
,
. , .
,
, .
, . ,
Photoshop. "" -

276

II. -

.
checkForCollision() :
function checkForCollision() {
// ,
// .
var imgData = context.getImageData(x-1, y-1, 15+2, 15+2);
var pixels = imgData.data;
// .
for (var i = 0; n = pixels.length, i < n; i += 4) {
var red =
pixels[i];
var green = pixels[i+1];
var blue = pixels[i+2];
var alpha = pixels[i+3];
// ,
// .
if (red == 0 && green == 0 && blue == 0) {
return true;
}
// ,
// .
if (red == 169 && green == 169 && blue == 169) {
return true;
}
}
// .
return false;
}

, "" .
. , ,
( JavaScript), . ,
.


. , HTML5.
-,
.
. , .
Mutant Zombie
Masters TickerPlot.
www.canvasdemos.com.

7.

277

. , , .
. http://en.inforapid.org.
. , 3D- Wolfenstein, 1992 .
www.benjoffe.com/code/demos/canvascape.
. HTML5-
, , .
http://htmlchess.sourceforge.net/demo/example.html.


CSS3

-, CSS (Cascading Style Sheet).


, HTML.
-,
, . , HTML (. . " ?" 2), CSS -, . . .
, CSS
. CSS 2.1 . , CSS ,
.
, . ,
( , ). CSS CSS3 (
, HTML5).
CSS3 50 .
:
( ) (, ). , , .
( )
CSS3. . , , iPad iPhone. , , . -

8. CSS3

279

,
,
<Tab>. ( CSS3 .)

, , -,
.

CSS3
CSS3 -, . , . , CSS3
, HTML5. - ,
, ,
.
CSS3 - , , , .

CSS3 HTML5.
, ,
. W3C -
HTML5 CSS3 , . , HTML5
(www.w3.org/html/logo) , W3C CSS3 HTML5.

1: ,
.
- (. . " "
). , , Internet Explorer 6. ,
CSS3 .
,
.
IE 7 IE 8.

,
, Internet Explorer 9.
IE .

II. -

280

2: CSS3

CSS3 : "-
". ( - http://
DoWebsitesNeedToBeExperiencedExactlyTheSameInEveryBrowser.com.)
.
CSS3 , .
border-radius, . :
header {
background-color:
border:
padding:
margin:
text-align:
border-radius:
}

#7695FE;
thin #336699 solid;
10px;
10px;
center;
25px;

, border-radius, ,
,
(. 8.1).

. 8.1. Internet Explorer 9 (), Internet Explorer 8


border-radius, ()

, - "" . ,
. , -
,

8. CSS3

281

,
, . , - , -,
.

CSS3 . , ( , , IE 10). ,
.

CSS3, Internet Explorer . -, , CSS3
.
Microsoft ?
, - ,
-. ,
, . . (
) .

3:
Modernizr
CSS3 , - .
-, . , , ,
, Firefox (. 8.2).

. 8.2. Firefox (). Chrome


(),

,
. ,
, . ,

282

II. -

, .
:
.stylishBox {
...
background: yellow;
background: radial-gradient(ellipse, red, yellow);
}

. 8.3.

. 8.3. : ,
CSS3,
stylishBox

. : ,
CSS3,

1

, . .
. . 8.2.
border-colors, border-thickness. , , .

JavaScript Modernizr, HTML5 (. . " Modernizr" 1).
1

, . , , . .
.
, ,
. ", " .

8. CSS3

283

, ,
. , (. . 8.1).
, ,
, . Modernizr,
:
/* , CSS3 */
header {
background-color: #7695FE;
padding:
10px;
margin:
10px;
text-align: center;
}
/* ,
border-radius. */
.borderradius header {
border:
thin #336699 solid;
border-radius: 25px;
}
/* ,
border-radius. */
.no-borderradius header {
border: 5px #336699 double;
}

. <html> class="no-js".
<html class="no-js">

Modernizr, HTML5, JavaScript CSS3. <html>


, :
<html class="js flexbox canvas canvastext webgl no-touch geolocation
postmessage no-websqldatabase indexeddb hashchange history draganddrop
no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius
boxshadow textshadow opacity no-cssanimations csscolumns cssgradients
no-cssreflections csstransforms no-csstransforms3d csstransitions fontface
generatedcontent video audio localstorage sessionstorage webworkers
applicationcache svg inlinesvg smil svgclippaths">

no- , .
no-, .
, JavaScript (js), - -

II. -

284

(no-websockets). CSS3
border-radius (borderradius), reflections (nocssreflections).
, . ,
border-radius, .borderradius
header <header> <html>. .borderradius , , .
, , Modernizr
CSS3.

CSS3, (. . 8.2), . . Firefox. , .

Modernizr JavaScript.
Modernizr, HTML5.
, CSS3, .
, -
JavaScript.

,
CSS . ,
-. -
,
.
, .
. - -, ,
,
-.
,
(vendor prefixes),
CSS, . ,
, (. . ""
). Firefox, -

8. CSS3

285

, -moz-radial-gradient. -moz- ( Mozilla ,


Firefox) Firefox.
(. 8.1).
8.1.

-moz-

Firefox

-webkit-

Chrome Safari (
)

-ms-

Internet Explorer

-o-

Opera

, . ,
.
, , ,
.
, -
, ( Internet Explorer 10), CSS :
.stylishBox {
background: yellow;
background-image: -moz-radial-gradient(circle, green, yellow);
background-image: -webkit-radial-gradient(circle, green, yellow);
background-image: -o-radial-gradient(circle, green, yellow);
background-image: -ms-radial-gradient(circle, green, yellow);
}


. ,
,
radial-gradient , corner-radius.
,
. . Chrome .

.
- ,
-

II. -

286

.
: , CSS3 .


CSS3 .
,
,
-.
- , -. ,
,
. , - , . ,
, ,
.

- . , , . . . -
,
. ,
. , Microsoft, (
) , -
. ,
.

CSS3
@font-face, :
1. (, , ) .
2. @fontface.
3. , , -.
4. , -,
.
(. 8.4). ,
, .
.

8. CSS3
Zero & Zero Is

287

Impact Label Reversed Regular

Impact Label Regular


Metrophobia

. 8.4.
. . ,
. " "


@font-face . CSS 2, CSS 2.1, . CSS3 , @font-face .

-
@font-face,
. , Internet Explorer, @font-face ,
EOT (Embedded OpenType, OpenType). , ,
,
-,

II. -

288

. EOT .
, TTF (TrueType) OTF (OpenType PostScript). ,
SVG WOFF. . 8.2
.
8.2.

TTF (TrueType),
OTF (OpenType
PostScript)

Firefox ( 3.6), Chrome


( 6), Safari Opera

EOT (Embedded
OpenType)

, Microsoft.
, Internet
Explorer

Internet Explorer ( IE 9)

SVG (Scalable Vector


Graphics)


, .
,

Safari Mobile ( iPhone iPad


iOS 4.2)

Android

WOFF
(Web Open
Font Format)

,
.

, Internet Explorer 9,
Firefox 3.6 Chrome 6

:
@font-face ,
. , TTF OTF ( ), EOT SVG. ( ) WOFF,
. (
, .)



, . , .
Windows XP, . . (anti-aliasing). ( .)
.

8. CSS3

289

FOUT (Flash of Unstyled Text,


). ,
,
, .
Firefox. , JavaScript Google,
, , , . . http://code.google.com/
apis/webfonts/docs/webfont_loader.html.
,
. , Firefox FOUT , ,
, .


, , , ,
?
, , , .
, ,
. , Font Squirrel (www.fontsquirrel.com/fontface). . 8.5 .
, ZIP,
. , Chantelli Antiqua,
. 8.5, :
Bernd Montag License.txt
Chantelli_Antiqua-webfont.eot
Chantelli_Antiqua-webfont.svg
Chantelli_Antiqua-webfont.ttf
Chantelli_Antiqua-webfont.woff
demo.html
stylesheet.css

(Bernd Montag License.txt) , , , , .


Chantelli Antiqua .
( , , ,
.) , demo.html
, stylesheet.css
-.
Chantelli Antiqua -,
- -.
,

II. -

290

. @fontface , (
):
1 @font-face {
2
font-family: 'ChantelliAntiquaRegular';
3
src: url('Chantelli_Antiqua-webfont.eot');
4
src: local('Chantelli Antiqua'),
5
url('Chantelli_Antiqua-webfont.woff') format('woff'),
6
url('Chantelli_Antiqua-webfont.ttf') format('truetype'),
7
url('Chantelli_Antiqua-webfont.svg') format('svg');
8 }

.
1: @font-face
.

. 8.5. Font Squirrel ,


( , , Calligraphic, Grunge Retro).
, ,
- .
, View Font; ,
- View @ff Demo;
Get Kit

8. CSS3

291

2: . -

, .
3: EOT, . . -

Internet Explorer,
. url()
URL. -,
.
4: local() ,

-,
. . , , ,
Ma OS X , ,
. - , . -
local('').
57: -

, . WOFF,
, . .
. TTF OTF,
SVG.

, @font-face ,
, .
stylesheet.css, -.

- @font-face, . font-family, , @font-face ( 2). - ( )


:
@font-face {
font-family: 'ChantelliAntiquaRegular';
...
}
body {
font-family: 'ChantelliAntiquaRegular';
}

- , ,
, -

II. -

292

. ,
. , .

, - Font Squirrel .
( Popular)
( Recent). -,
, -.
,
, Font Squirrel (. . " " ).



-
?
-, , ,
, , -
. Windows Ma OS X
TrueType (ttf) OpenType (otf). Font Squirrel
, TrueType.
Windows, ,

. (
.) Ma OS X Font
Book, .

- Google
- Google Web Fonts.
, ,
. . Google
.
Google , :
1. www.google.com/webfonts. Start
choosing fonts ( ). , (. 8.6).
2. , Word (), Sentence () Paragraph (). , , , ,
Word Sentence,
. ,
Paragraph, , -

8. CSS3

293

.
.
3. . , .
, ,
. , , ,
. . 8.6.

. 8.6. Google .
, . ,
,
, , , ,

4. , Pop out.
, .
5. ,
Quick-use . , ,
. ,
-,
, .

II. -

294

6. - . ,
Metrophobic, <head> -
:
<link href="http://fonts.googleapis.com/css?family=Metrophobic"
rel="stylesheet">

@font-face,
. , Google , , , -.

, Google
.
Google.

7. , , . , (. 6) Metrophobic , ,
:
hi {
font-family: 'Metrophobic ', arial, serif;
}



. ,
.
. , Add to Collection .

.
, Use .
Quick-use , ,
, .
, . Bookmark your Collection
,
, . Download your Collection
,
.

8. CSS3

295


- .

-,
. ,
-.
TTF
OTF EOT, SVG WOFF.
,
. ,

-. ,
Microsoft Apple ,
, , ,
.
- -.

,
- . , -.
(,

,
). , . . , .

, ,
Font Squirrel ( , ). www.fontsquirrel.com/
fontface/generator. , . 8.7.
Add Fonts ( ),
. Yes, the fonts I'm
uploading are legally eligible for web embedding (,
-, ,
),
. " " . , Download Your Kit, -
.
- , -, -. @font-face, -.

II. -

296

. 8.7. Font Squirrel


? - http://
webfonts.info. , , .


CSS3
.
,

.
. column-count, :
article {
text-align:
justify;
column-count: 3;
}

Opera. Firefox, Chrome Safari :

8. CSS3
article {
text-align:
-moz-column-count:
-webkit-column-count:
column-count:
}

297

justify;
3;
3;
3;

, Internet Explorer 9 ,
, , , IE 10, .
- . , .
, ,
, column-width, :
article {
text-align:
-moz-column-width:
-webkit-column-width:
column-width:
}

justify;
10em;
10em;
10em;

, , (. 8.8).

,
1
em- , . . em- . , - ,
. em-
. , 12-
em- 24 .

( columngap) (
column-rule). ,
,
. www.w3.org/TR/css3-multicol. , .

m , (
, ).

298

II. -

. 8.8. (),
()


- -
, , , ,
( )
. , - , .
. , ,
, .

- , iPhone iPad, -
. , , ,
. , "New York Times"

8. CSS3

299

http://www.nytimes.com, http://rn.nytimes.com.
: ,
,
, - ,
.
,
. -, , , ,
. , , ,
. , - , -, .
(media queries). CSS3 - . -
iPhone.
HTML.


, -, , , , , . . .
. 8.9.

CSS
, CSS CSS 2.2 (media types). ,
, ,
, :
<head>
...
<!--
. -->
<link rel="stylesheet" media="screen" href="styles.css">
<!-- . -->
<link rel="stylesheet" media="print" href="print_styles.css">
</head>

300

II. -

. 8.9. ,
( ). ,
,
.

8. CSS3

301

media handheld,
. media handheld, .
, media
, .

, ,
, . . 8.9 max-width,
. max-device-width, . , ,
.
,
-, .
. 8.9 :
<article>
...
</article>
<aside>
...
</aside>

, :
article {
border:
padding:
margin:
background:
float:
width:
}

solid 1px black;


15px;
5px;
yellow;
left;
330px;

aside {
border:
padding:
margin:
background:
position:
float:
margin-left:
}

solid 1px black;


15px;
5px;
yellow;
absolute;
left;
370px;

,
330 ,
. ( ,

II. -

302

,
CSS.)
, .
:
@media (----: value) {
/* . */
}

, 480 . ,
, :
@media (max-width: 480px) {
...
}


max-device-width ( -), maxwidth ( ) orientation ( , iPad ).
,
. www.w3.org/TR/css3-mediaqueries.

, ,

<article> <aside>:
@media (max-width: 480px) {
article {
float: none;
width: auto;
}
aside {
position:
float:
background:
margin-left:
}

static;
none;
pink;
5px;

.
.
position static, float none, width -

8. CSS3

303

auto. , .

, , Internet Explorer,

.

, . , , 250 :
@media (max-width: 250px) {
...
}

, , ,
, ,
450 .
, .


max-device-width, max-width, . . max-width (viewport) , . . -, - .
. ( , )
. "Quirks mode" http://tinyurl.com/yyec93n. . " " .


, , :
@media (min-width: 400px) and (max-width: 700px) {
/* 400 700 */
}

, ,
. :
/* . */
@media (min-width: 600px) and (max-width: 700px) {
/* 600-700 . */
}

304

II. -

@media (min-width: 400px) and (max-width: 599.99px) {


/* 400-600 . */
}
@media (max-width: 399.99px) {
/* 400 . */
}

380
: @media. ,
, ,
.
, .
, ,
. , 400 , 400 ,
, .
, 399.99 .
not. , ,
, , , :
/* . */
@media (not max-width: 600px) and (max-width: 700px) {
/* 600-700 . */
}
@media (not max-width: 400px) and (max-width: 600px) {
/* 400-600 . */
}
@media (max-width: 400px) {
/* 400 . */
}

,
, . . @media , . ,
(, , ).
,
.

8. CSS3

305


@media , . .
.
,
:
<head>
<link rel="stylesheet" href="standard_styles">
<link rel="stylesheet" media="(max-width: 480px)"
href="small_styles.css">
</head>

(small_styles.css),
,
.
,
. , .
, :
<link rel="stylesheet" media="(min-width: 480.01px)"
href="standard_styles">
<link rel="stylesheet" media="(max-width: 480px)"
href="small_styles.css">

, , , .
Internet Explorer, , :
<link rel="stylesheet" media="(min-width: 480.01px)"
href="standard_styles">
<link rel="stylesheet" media="(max-width: 480px)"
href="small_styles.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="standard_styles">
<![endif]-->

Firefox ,
3.5,
. ,
, JavaScript,
. , Firefox
.
,
, " .
CSS" . . ,
:

306

II. -

<link rel="stylesheet" media="print and (min-width: 25cm)"


href="NormalPrintStyles.css">
<link rel="stylesheet" media="print and (not min-width: 25cm)"
href="NarrowPrintStyles.css">


, , -
,
, max-device-width.
?
, max-devicewidth , 480 . , ,
iPhone Android:
<link rel="stylesheet" media="(max-device-width: 480px)"
href="mobile_styles.css">

, , . .
. , iPhone 4 960 640 . ,
. , , . , 480 ,
.
, (pixel ratio). , iPhone 4
CSS , . .
2. , iPhone 4, iPhone:
<link rel="stylesheet"
media="(max-device-width: 480px) and
(-webkit-min-device-pixel-ratio: 2)"
href="iphone4.css">

iPad : , . max-width, max-device-width .


, iPad , 768 . ,
iPad, max-device-width orientation:
<link rel="stylesheet"
media="(max-device-width: 768px) and (orientation: portrait)"
href="iPad_portrait.ess">
<link rel="stylesheet"
media="(max-device-width: 768px) and (orientation: landscape)"
href="iPad_landscape.css">

8. CSS3

307

, iPad,
( 768 ).

,
- .
. , . , . , .
( ) ,
(, ).



- -
. - , , ,
.
,
.
,
<video> ,
.
.
HTML5 media <source>. 5, <source>
<video>.
media
.
, butterfly_mobile.mp4
.
butterfly.mp4 butterfly.ogv .
<video controls width="400" height="300">
<source src="butterfly_mobile.mp4" type="video/mp4"
media="(max-device-width: 480px)">
<source src="butterfly.mp4" type="video/mp4">
<source src="butterfly.ogv" type="video/ogg">
</video>
, ,
. ,
(, "iPad Video"), . ,
( H.264) .

II. -

308


CSS -
. CSS , , . CSS

, JavaScript. ,
CSS3
.


CSS3. .
rgba(),
. ( 0 255) ,
. ,
, 0 ( ) 1 ( ).
- 50- :
.semitransparentBox {
background: rgba(170,240,0,0.5);
}

, rgba(),
, .
. , :
.semitransparentBox {
background: rgb(170,240,0);
background: rgba(170,240,0,0.5);
}

, , rgba(),
, .

, , . , ,
- .
.

8. CSS3

309

CSS3 opacity (),


, . opacity
0 1, :
.semitransparentBox {
background: rgb(170,240,0);
opacity:
0.5;
}

. 8.10 ,
rgba(), opacity.

. 8.10. . rgba() ,
, (). opacity ,
, ()

opacity rgba() :
. opacity -

, ;
- , . ,

,
JavaScript;
;
, . . , -

(. . " " ).

II. -

310


border-radius,
. , .
, ,
. . ,
, ,
. border-radius,
. CSS, ,
. , border-radius:
.roundedBox {
background:
yellow;
border-radius: 25px 50px 25px 85px;
}

, ,
.
(, border-top-left-radius

. 8.11. border-radius

8. CSS3

311

), :
, :
.roundedBox {
background:
yellow;
border-top-left-radius: 150px 30px;
border-top-right-radius: 150px 30px;
}

. 8.11 .


. CSS3 , . , ( ) .
, :
.decoratedBox {
margin: 50px;
padding: 20px;
background-image: url('top-left.png'), url('bottom-right.png');
background-position: left top, right bottom;
background-repeat:
no-repeat, no-repeat;
}

background-image.
backgroundposition , , background-repeat.
, , background-position, . . . 8.12.

, ,
. , background backgroundimage. ,
background-image .

(sliding doors). -, : , :
.decoratedBox {
margin: 50px;

312

II. -

padding: 20px;
background-image: url('left.png'), url('middle.png'), url('right.png');
background-position: left top, left top, right bottom;
background-repeat:
no-repeat, repeat-x, no-repeat;
}

. 8.12. ,

, . ,
, CSS3, ,
, , ,
, .
.

8. CSS3

313

CSS3 : (box shadows)


(text shadows).
,
Internet Explorer.
<div> (
, ). (. 8.13).

. 8.13. , (),
( ) ()

box-shadow text-shadow.
:
.shadowedBox {
border: thin #336699 solid;
border-radius: 25px;
box-shadow: 5px 5px 10px gray;
}

box-shadow .
, . (blur; 10 ),
. .
- , rgba()
(. . "" 6), .
box-shadow . (spread) ,
, ,
:
box-shadow:

5px 5px 10px 5px gray;

II. -

314

, , ,
inset. , , :
box-shadow: 0px 0px 20px lime inset;

. 8.13.
(. . " " ).

, . .

text-shadow , .
, , :
.textShadow
font-size:
font-weight:
text-shadow:
}

{
30px;
bold;
gray 10px 10px 7px;

,
, . . 8.14 .

- .
CSS3 - , . ,
, , ,
, .

(. . " " 7); CSS3 .


, CSS : , ,
, (
) .
CSS . background.
, -

8. CSS3

315

. 8.14. , .

, ( Internet Explorer,
, IE 10).
, , . ", " .
Firefox ( -moz-).
Chrome, Safari Opera
, -webkit- -o-.
linear-gradient(). , ,
:
.colorBlendBox {
background: -moz-linear-gradient(top, white, blue);
}

top left, .
, :
background: -moz-linear-gradient(top left, white, lightblue);

, . ,
:
background: -moz-linear-gradient(top, red, orange, yellow);

, (gradient
stops), .

II. -

316

, 0% , 100% . :
background: -moz-linear-gradient(top, red 0%, orange 20%,
yellow 80%, violet 100%);

radial-gradient().
,
. , :
background: -moz-radial-gradient(circle, white, lightblue)

, ,
, , . .
, .
, (repeating-linear-gradient() repeating-radialgradient()), , Safari,
www.webkit.org/blog/l424/css3-gradients.
Microsoft,
, ,
Internet Explorer 10. :
http://tinyurl.com/5rzocsk.

background.
backgroundimage, :
background-image ,
.
,
, .


CSS -.

:hover :focus, JavaScript. , (. . ,
), :hover. , .

-, ,

8. CSS3

317

" Web-. " http://


www.elated.com/articles/css-rollover-buttons/.

, . " ".
, :hover , . . .
Flash
. ,
, , .
-
,
JavaScript . CSS3 , .


, .
. 8.15,
CSS3.

. 8.15. ,
.
, .
.

:
.slickButton {
color:
font-weight:
padding:
border:
background:
cursor:
}

white;
bold;
10px;
solid 1px black;
lightgreen;
pointer;

- . Web-. . .: , 2010.

318

II. -

.slickButton:hover {
color:
black;
background: yellow;
}

, :
<button class="slickButton">Hover Here!</a>

, . . ,
transition. ( , ( slickButton), :hover.)
, transition : CSS,
, ,
. background,
0,5 :
.slickButton {
color:
white;
font-weight: bold;
padding:
10px;
border:
solid 1px black;
background: lightgreen;
cursor:
pointer;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
}
.slickButton:hover {
color:
black;
background: yellow;
}

, , ,
transition, . , CSS3
. ,
Chrome, Safari, Firefox Opera,
transition, . Internet Explorer 10 (, , ) , -ms-. ,
.
, , ,
. , -

8. CSS3

319

,
.
.
transition , :
.slickButton {
-webkit-transition: background 0.5s, color 0.5s;
-moz-transition:
background 0.5s, color 0.5s;
-o-transition:
background 0.5s, color 0.5s;
}

, . all:
-webkit-transition: all 0.5s;
-moz-transition:
all 0.5s;
-o-transition:
all 0.5s;


.
transition-timing-function, . , , ,
. .
.
transition-delay, .
. www.w3.org/TR/css3-transitions.

Opera 10.5,
Firefox 4, Safari Chrome, - . Internet Explorer , IE 10.
, , . . .
, . , . . -
.


, CSS
.
,
, . ,
.
. opacity, , -

, .

II. -

320

, , . . , , .
. . "" ,

.
. , , .
box-shadow

. ,

.
. , -

/ .
.
, , , , . (. . ),
. - , , , .

, , , .
. CSS3 .
, CSS3 .
transform,
.
:
.rotatedElement {
-moz-transform:
rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform:
rotate(45deg);
}

,

, , ,
, . , CSS3 -

8. CSS3

321

, ,
. , . .
, .
, . , , . , ,
.

Modernizr,
(. . " 3:
Modernizr" ).

rotate() 45 . , . ,
. ( scale), 10 ( scaleX) , , 10 ( skew):
.rotatedElement {
-moz-transform:
-webkit-transform:
-o-transform:
}

scale(1.5)
scale(1.5)
scale(1.5)

scaleX(10px)
scaleX(10px)
scaleX(10px)

skew(10deg);
skew(10deg);
skew(10deg);


skew . ,
.
, , . . . Firefox http://tinyurl.com/6ger2wp,

.

-
. , ,
.
. ,
, . 8.16.
,
<div>:
<div class="gallery">
<img src="bunny.jpg">
<img src="cat.jpg">
<img src="dog.jpg">
<img src="platypus.jpg">

II. -

322
<img src="goose.jpg">
</div>

<div>, ,
:
.gallery {
margin:
0px 30px 0px 30px;
background: #D8EEFE;
padding:
10px;
}

<img> :
.gallery img {
margin:
5px;
padding:
5px;
width:
75px;
border:
solid 1px black;
background: white;
}

. 8.16. , ,

, width. , , . : , ,
.
,
.
, .
, -

8. CSS3

323

, :
.gallery img:hover {
-webkit-transform: scale(2.2) rotate(10deg);
-moz-transform:
scale(2.2) rotate(10deg);
-o-transform:
scale(2.2) rotate(10deg);
}

,
. , :
.gallery img {
margin: 5px;
padding: 5px;
width: 75px;
border: solid 1px black;
-webkit-transition: all 1s;
-moz-transition:
all 1s;
-o-transition:
all 1s;
background: white;
}


,
.

CSS
, . , , .
(3D) .
, 3D-. . : www.webkit.org/blog/386/3d-transforms.
. , (
:hover) ( :focus). , , JavaScript. , , . CSS3 . : www.w3.org/TR/css3-animations.
JavaScript. JavaScript,
, , ( ). :
http://css3.bradshawenterprises.com.

324

II. -

. , , ,
.
, .
, Internet Explorer Opera
. Firefox 4. ,
.

- JavaScript, jQuery UI MooTools.
-, , CSS3, .

III

III

-
9.

10.

11.

12.

JavaScript

: - (. . ). , .
. , - , -.
, (, , ), , . HTML5 , .
, . .
. , (, , -) ( -), .
HTML5 cookies, -
. cookies
, JavaScript .
cookies .
HTML5 cookies,
.
,
- ( ),
, JavaScript. -

III. -

328

, 10, . . ,
.
-,
, , .

-
- HTML5 - . , , ,
-.

- , -. , , -
, .

-, .
localStorage

- . , -
, , - , . ,
. " ",
, ,
cookies-. ( ,
cookies ,
cookies.)
- .
sessionStorage

.
, , . ,
-,
, .

-, ,
. -

9.

329

. . , . (
, , JavaScript.)

, -.
,
www.GoatsCanFloat.org/game/zapper.html, www.GoatsCanFbat.org/contact.html, . .
www.GoatsCanFloat.org.
.
, . . - ( ) , , -,
,
, .
- ,
.

HTML5
,
5 . , , (, , ).
IndexedDB (.
" . "
)
50 , .


, .
(key) , .
:
localStorage[keyName] = data;

, , ,
. user_name:
localStorage["user_name"] = "Marky Mark";

, . , - ,
, ,

III. -

330

. :
// .
var nameInput = document.getElementById("userName");
// , .
localStorage["user_name"] = nameInput.value;

, . ,
:
alert(" : " + localStorage["user_name"]);

,
.
, , .
, , :
if (localStorage["user_name"] == null) {
alert (" ");
}
else {
// , . . , .
document.getElementById("userName").value = localStorage["user_name"];
}

.
sessionStorage localStorage:
// .
var today = new Date();
// :.
sessionStorage["lastUpdateTime" ] = today.getHours() + ":" +
today.get-Minutes();

. 9.1 , .
( ,
, )
- (http://www.prosetech.com/html5/),
WebStorage.html.

- . ,
user_name localStorage.user_name, localStorage["user_name"].
, .

9.

331

. 9.1. : ()
(). Save Data , ,
Load Data


- -
- . - , -. , ,
, , (,
).
,
. , - 5 ,
, , .
, , -, ? . Internet Explorer, ,
-. localStorage
sessionStorage , JavaScript.
Firefox localStorage sessionStorage ,
, ( Modernizr , ), ,
, . Chrome
- - , (, onStorage) . File API (. . "
" ). , , . -
http://www.prosetech.com/html5/.

:

, -
:
. . -

332

III. -

, ,
.
, , - ,
. " : """ 7.
, , ,
, , . ,
.
.
.
, .
BeforeUnload , (. 9.2).

. 9.2. , ,

, , :
window.onbeforeunload = function(e) {
// , localStorage (. .
// , ).

9.

333

if (localStorage) {
// .
if (confirm ("Do you want to save your current position
in the maze, for next time?")) {
// .
localStorage["mazeCame_currentX"] = x;
localStorage["mazeCame_currentY"] = y;
}
}
}


mazeGame_currentX.
,
(, , ) .
,
-. . , "" ,
, Maze01_
currentX.

, :
// ?
if (localStorage) {
//
var savedX = localStorage["mazeGame_currentX"];
var savedY = localStorage["mazeGame_currentY"];
//
//
//
if
if

.

.
(savedX != null) x = Number(savedX);
(savedY != null) y = Number(savedY);

, .
,
.
,
. ,
, .
Number() JavaScript,
,
. . " "
.

III. -

334

-
-
HTML5, . . 9.1
, .
9.1.

IE

Firefox

Chrome

Safari

Opera

Safari iOS

Android

3.5

10.5


. onStorage (
, . " " ) ,
IE 9, Firefox 4 Chrome 6.
IE 7, -
. - cookies. , .
, GitHub
http://tinyurl.com/polyfill ( "Web Storage").


-
-
.
,
. ,
- . , ,

.


- . removeItem(),
:
localStorage.removeItem("user_name");

9.

335

, -, clear():
sessionStorage.clear();


-,
. . key()
, (
-), .
,
- .
. 9.3 .

. 9.3. -

findAllItems(), .
:
function findAllItems() {
// <ul> .
var itemList = document.getElementById("itemList");
// .
itemList.innerHTML = "";
// .
for (var i=0; i<localStorage.length; i++) {
// .
var key = localStorage.key(i);
// , .
var item = localStorage[key];

III. -

336

//
// .
var newItem = document.createElement("li");
newItem.innerHTML = key + ": " + item;
itemList.appendChild(newItem);
}
}


-
. ,
localStorage sessionStorage, .
, (, ,
), .
. "" (. . " :
" ).
, :
// x.
// , , "35".
x = localStorage["mazeGame_currentX"];
// .
// , JavaScript "35"+"5" "355".
x += 5;

, . ,
.
, JavaScript ,
, . ,
JavaScript , , . ,
Number():
x = Number(localStorage["mazeGame_currentX"]);
// JavaScript 35+10 45.
x += 10;

, -
. . , ,
:
var today = new Date();

, , Sat Jun 09 2011


13:30:46. ,

9.

337

.
, , , .
, ,

. :
// .
var today = new Date();
// //
// .
sessionStorage["session_started"] = today.getFullYear()
+ "/" + today.getMonth() + "/" + today.getDate();
...
//
// .
// .
today = new Date(sessionStorage["session_started"]);
// .
alert(today.getFullYear());

,
.


- , . JavaScript, Number(), , . ,
.
.
, , , . " :
" 7. . .
.
, URL. HTML- ( cookies). HTML5 .
. ,
.

338

III. -

.
,
? PersonalityScore, :
function PersonalityScore(o, c, e, a, n) {
this.openness = o;
this.conscientiousness = c;
this.extraversion = e;
this.agreeableness = a;
this.neuroticism = n;
}

PersonalityScore
- . ( JavaScript, . . " " 7.)
-, . ,
, . , , , JSON (JavaScript Object Notation,
JavaScript).
JSON
, . JSON , . ,
JavaScript
JSON.stringify(), JSON.parse() .

PersonalityScore. ,
( ), , ,
:
// PersonalityScore.
var score = new PersonalityScore(o, c, e, a, n);
// JSON.
sessionStore["personalityScore"] = JSON.stringify(score);
// .
window.location = "PersonalityTest_Score.html";

JSON JSON.parse().
:
// JSON- .
var score = JSON.parse(localStorage["personalityScore"]);

9.

339

// .
lblScoreInfo.innerHTML = "Your extraversion score is " +
score.extraversion;

, , http://www.prosetech.com/
html5/. JSON ,
, JSON,
http://ru.wikipedia.org/wiki/JSON http://en.wikipedia.org/wiki/JSON.


, - . ,

window.onStorage ,
. ,
www.GoatsCanFloat.org/storeStuff.html onStorage www.GoatsCanFloat.org/
checkStorage.html. ( ,
, , ?)
onStorage ,
, ,
. ,
, (, ,
, ).
, , . 9.4.
,
Add. ,
.
, . 9.4, ,
.
addValue(), Add :
function addValue() {
// .
var key = document.getElementById("key").value;
var item = document.getElementById("item").value;
// .
// ( , .)
localStorage[key] = item;
}

.
window.onStorage :

III. -

340

window.onload = function() {
// onStorage storageChanged().
window.addEventListener("storage", storageChanged, false);
};

. 9.4. onStorage, StorageEvents1.html


StorageEvents2.html. ()

, ,
. window.onStorage
window.addEventListener(). ,
. window.onStorage , , Firefox.

, , , addEventListener()
Internet Explorer 8 . , . . IE 8 .

storageChanged() . <div>:

9.

341

function storageChanged(e) {
var message = document.getElementById("updateMessage");
message.innerHTML = "Local storage updated.";
message.innerHTML += "<br>Key: " + e.key;
message.innerHTML += "<br>Old Value: " + e.oldValue;
message.innerHTML += "<br>New Value: " + e.newValue;
message.innerHTML += "<br>URL: " + e.url;
}

, onStorage ,
, , URL , . onStorage
, e.oldValue null ( ), ( Internet Explorer).

-, onStorage , ,
( StorageEvents1.html).
, , Internet Explorer
onStorage , .


- HTML5 .
-.
,
. File API,
HTML5,
( Internet Explorer).
, , .
. - JavaScript, -.
, -
. ,
JavaScript. , -.
, File API . ,
. - ,
, XMLHttpRequest (. . " XMLHttpRequest"
11) .

III. -

342

, , File API , , - .
, HTML , .

File API
, , . ,
- ,
, . , Flash, .


File API - ,
. ,
- , -.
.
<input>. type file, .
JavaScript File API .
<input>. <input> . , .
JavaScript-, click() <input>,
.
drag and drop. ,

-.
. , File API, , -.

File API
File API , -. . 9.2.
,
. 9.2. File
API, . . (
"" ) .

9.

343
9.2. File API

IE

Firefox

Chrome

Safari

Opera

Safari
iOS

Android

10*

3.6

11.1

* - .

File API , , JavaScript. , Flash Silverlight. , http://sandbox.knarly.


com/js/dropfiles (polyfill),
Silverlight, , JavaScript .


File API
. . 9.5 -,
-, .

. 9.5. Browse ( Chrome),


OK. ,
JavaScript -,

<input type="file">, Browse ():


<input id="filelnput" type="file" onchange="processFiles(this.files)">

<input> <form>,
-, <input>
. , -

III. -

344

onChange <input>,
processFiles().
JavaScript.
processFiles().
, <input>.
(
multiple), ,
0 :
function processFiles(files) {
var file = files [0];


.
name ( ), size
, type MIME- (. " . MIME-" 5), . ,
, .

FileReader :
var reader = new FileReader();

FileReader, . . ,
, . , , onLoad:
reader.onload = function (e) {
// , .
// <div>.
var output = document.getElementById("fileOutput");
output.textContent = e.target.result;
};

readAsText() FileReader:
reader.readAsText(file);
}

,
e.target.result, onLoad.
readAsText() , . ,
HTML, . 9.5.
.
CSV ,

9.

345

. XML,
. (
XML Office, , docx- xlsx-
readAsText().)

JavaScript XML,
XML .
, , . ,
, - . , File API, HTML .

readAsText(), RileREader
: readAsBinaryString(), readAsDataURL() readAsArrayBuffer(),
Firefox.
readAsBinary() - , , .
, . "" ,
. - .
: www.w3.orgTR/FileAPI.
readAsDataURL() . . " " . ,
.

<input>
- : <input>,
, .
, ,
. :
#fileInput {
display: none;
}

, .
, :
<button onclick="showFileInput()">Analyze a File</button>

346

III. -


<input> click() :
function showFileInput() {
var fileInput = document.getElementById("fileInput");
fileInput.click();
}

showFileInput(), "" Browse .


, , onChange <input>, processFiles() , .


, . HTML5 , , multiple <input>:
<input id="filelnput" type="file" onchange="processFiles(this.files)"
multiple>


(, <Ctrl> ). , , . , ,
. for,
:
for (var i=0; i<files.length; i++) {
// .
var file = files[i];
// FileReader .
var reader = new FileReader();
reader.onload = function (e) {
...
};
reader.readAsText(file);
}


, FileReader . readAsDataURL(), .
. 9.6 , : drag and drop.

9.

347

. 9.6. :

,

(. . " " 7).
, , ,
, ,
XMLHttpRequest
(. . " XMLHttpRequest" 11).
, . <div>- dropBox:
<div id="dropBox">
<div>Drop your image here...</div>
</div>

:
#dropBox {
margin: 15px;
width: 300px;
height: 300px;
border: 5px dashed gray;
border-radius: 8px;
background: lightyellow;
background-size: 100%;

348

III. -

background-repeat: no-repeat;
text-align: center;
}
#dropBox div {
margin:
color:
font-size:
font-family:
}

100px 70px;
orange;
25px;
Verdana, Arial, sans-serif;

, , background-size background-repeat . <div>, . background-size


,
. no-repeat background-repeat ,
.
:
onDragEnter, onDragOver onDrop.
:
var dropBox ;
window.onload = function() {
dropBox = document.getElementById("dropBox");
dropBox.ondragenter = ignoreDrag;
dropBox.ondragover = ignoreDrag;
dropBox.ondrop = drop;
};

ignoreDrag() onDragEnter ( , ), onDragOver ( ). ,


,
. :
function ignoreDrag(e) {
// , ,
// . . .
e.stopPropagation();
e.preventDefault();
}

onDrop , . . .
, drop() processFiles():

9.

349

function drop(e) {
// .
e.stopPropagation();
e.preventDefault();
// .
var data = e.dataTransfer;
var files = data.files;
// .
process Files(files);
}

processFiles()
. FileReader,
onload readAsDataURL()
URL (. . " " 6):
function processFiles(files) {
var file = files[0];
// FileReader.
var reader = new FileReader();
// , , URL .
reader.onload = function (e) {
// URL
// .
dropBox.style.backgroundImage = "url('" + e.target.result + "')";
};
// .
reader.readAsDataURL(file);
}


, URL
,
URL. . -, URL src <img> (. . " " 6) CSS- background-image (
).

FileReader , . onProgress , . ( , abort() FileReader.) onError


. onLoadEnd -

350

III. -

,
.


? ( ) File API ( ) ,
, , ?
Chrome Safari Web Databases.
Firefox , .
IndexedDB, , , . Firefox http://
developer.mozilla.org/en/IndexedDB Internet Explorer 9, : http://tinyurl.com/
3fuvu9g.

10

10

-, .
. ? . ,
-
?
- .
, - .
. , - .
,
, -. , , -
, , . , - , . - .
, .
( , . , , . ,
.)
, - ( -)
. , ,
- , ,
.

352

III. -


?

?
-. ,
, . . -. , , .
, , , , .
,
, JavaScript
.
,
. , ,
. . , .
, ,
. , ,

(, ).
,
.



, , -
. , , .
:
1. . , , , ,
, - .

(offline application).
2. -, . , , .
3. -. -
MIME-. , , -

10.

353

,
.
.


- . ,
. , -
, ?

.
,
- ,
Cache-Control. ,

, -,
. , - ; , , , .
, , .
: -
,
, .
- , , - .
, .



HTML5. , , .
( ):
CACHE

MANIFEST

, .
- ( . " : " 7):
CACHE

MANIFEST

PersonalityTest.html
PersonalityTest_Score.html

( ) ,
.

III. -

354

, : - , (, , , ).
:
CACHE MANIFEST
# pages
PersonalityTest.html
PersonalityTest_Score.html
# styles & scripts
PersonalityTest.css
PersonalityTest.js
# pictures & fonts
Images/emotional_bear.jpg
Fonts/museo_slab_500-webfont.eot
Fonts/museo_slab_500-webfont.woff
Fonts/museo_slab_500-webfont.ttf
Fonts/museo_slab_500-webfont.svg

.
#. , .
, Images/emotional_
bear.jpg. , -
, .
- , .
, - . -
- .

.


, , ,
. ,
, -
(, , ), JavaScript
(. . " " ).

-. , manifest appcache. (,

10.

355

PersonalityTest.manifest) , , Windows ( ClickOnce, .NET). (. . PersonalityTest.appcache) , . , -,


. -, ,
, . " -"
.
,
.

?
- ?
, , ,
.
,
. ,
.
Safari iPad iPhone
5 .
. Firefox
50 ,
. ( Firefox Network ,
Tools | Options | Advanced.) Chrome
5 ,
Chrome (. http://code.google.com/
chrome/extensions/apps.html), (. http://
tinyurl.com/5w83opp). Chrome , 5
, .
,
. , , 5 ,
Firefox, Chrome. , Chrome , ,
. ,

. , .
: , , . - , 5 . , ,
, .
, .

III. -

356


,
. - ,
-. <html>
manifest :
<!DOCTYPE html>
<html lang="en" manifest="PersonalityTest.manifest">
...

, .
, : PersonalityTest.html PersonalityTest_Score.html.

- , .
(, ),
-.

-
.
. ,
, ,
, ,
.
,
, .
-,
- - ,
- ISS, Windows.
:
1. , - MIME- text/cache-manifest.
- - ,
, .

- -.
- MIME- (. 1) (. 2). MIME- . " .
MIME-" 5.

2. (. " . "

10.

357

) . , - , ,
. , .
, - ,
,
, -. ( Firefox.) - , .
3. , ,
, , Internet
Explorer (. . 10.1). , -
, . ,
.
, . , Firefox
(. 10.1), Chrome Safari .

. 10.1. , , Firefox
.
, Allow. Firefox
, ,

, . , . , , ,
. ,
.
4. .
, . (. . , ), (. 10.2).
5. . , , , -

358

III. -

. , -. . , .
, , ,
.

. 10.2. - -.
- IIS Windows



. ,
, , .
. -
, . , - MIME- (. " .
MIME-" 5).
. ,
, ,
-, -. , - ,
, .

10.

359

, - .
-, , ( ,
, ).
. ( -) .
, , .
, (. " . " ).


.
.
. " " , -. PersonalityTest.html
, , , . ,

, , - .
, -.
.
, , ,
, -.
.
, .
.

,
-. -
. ( Chrome)
-. Firefox
. ,
, , - (. . " " ).
.

, , . ,
.

III. -

360

. ,

,
. .

,
, .
, . , . . ,
,
? , , , , .
, :
CACHE MANIFEST
#version 1.00.001
#pages
PersonalityTest.html
PersonalityTest_Score.html
#styles & scripts
PersonalityTest.css
PersonalityTest.js
#pictures & fonts
Images/emotional_bear.jpg
Fonts/museo_slab_500-webfont.eot
Fonts/museo_slab_500-webfont.woff
Fonts/museo_slab_500-webfont.ttf
Fonts/museo_slab_500-webfont.svg

, , ,
1.00.002, . . .
.
, . , .
, JavaScript, . " JavaScript" .

.
,
, .

10.

361




.
.

. 10.3. : Firefox, ,
, Tools | Options, Options
Advanced Network.
,
, Remove.
-, localhost (
). : Chrome
about:appcache-internals

III. -

362

,
-. , (. 10.3). , , , - ,
. , .


, , , , Internet
Explorer. ,
Firefox, Chrome Safari . , , . 10.1.
10.1.

IE

Firefox

Chrome

Safari

Opera

Safari
iOS

Android

3.5

10.6

2.1

-.
, . , . . ,
- ,
(. " . ?"
).
(,
Internet Explorer), -
.
- . , .
, ,
, .
, , , , , , , Internet Explorer.


, ,
. , -

10.

363

. ,
- . ,
,
( ), . JavaScript.


, , , . ,
, , ,
.
, , :
<img src="Images/logo.png" alt="Personality quiz">
<img src="Images/emotional_bear.jpg" alt="Sad stuffed bear">

:
CACHE MANIFEST
PersonalityTest.html
PersonalityTest_Score.html
PersonalityTest.css PersonalityTest.js
Images/emotional_bear.jpg

, ,
emotional_bear.png , logo.png -
( , ).
,
, .
-. emotional_bear.jpg , logo.png, , , .
.
NETWORK:, ,
-:
CACHE MANIFEST
PersonalityTest.html
PersonalityTest_Score.html
PersonalityTest.css
PersonalityTest.js

III. -

364
Images/emotional_bear.jpg
NETWORK:
Images/logo.png

, , logo.png -,
.
, , :
, ? - , , ,
,
5 .
, ,
, , , , .
, (*) NETWORK.
, , :
NETWORK:
*

,
(, *.jpg JPEG)
(, http://www.google-analytics.com/*
Google Analytics).

, ,
, ,
, . ( ),
, . .
HTML5 , -
-.


, ,
( NETWORK).
, . . , .
FALLBACK:, . . ,
:

10.

365

FALLBACK:
PersonalityScore.html PersonalityScore_offline.html

( PersonalityScore_
offline.html) . ,
,
(. . PersonalityScore.html).

, ,
.
.
, .

. ,
,
.
,
FALLBACK:.
CACHE MANIFEST
PersonalityTest.html
PersonalityTest_Score. html
PersonalityTest.css
FALLBACK:
PersonalityScore.html PersonalityScore_offline.html
Images/emotional_bear.jpg Images/emotional_bear_small.jpg
PersonalityTest.js PersonalityTest_offline.js
NETWORK:
*


, , , CACHE:. , ,
.


.
:
FALLBACK:
/ offline.html

, , , , . ,

366

III. -

. , -
- , , offline.html (. 10.4).

. 10.4. ImaginaryPage.html . ,
,


(/). , NETWORK:
.
(, Firefox) . , :
FALLBACK:
* offline.html

, ,
:
FALLBACK:
http://www.superAppsOnSteroids.org/paint_app/* offline.html

, :
FALLBACK:
*.jpg missing_picture.jpg

, ,
, .


JavaScript , .

10.

367

JavaScript, , navigator.onLine, ,
. , onLine
" ", .
onLine ,
, ,
, - .
,
JavaScript ,
. FALLBACK: :
FALLBACK:
online.js off line.js

- JavaScript- online.js:
<!DOCTYPE html>
<html lang="en" manifest="personality.manifest">
<head>
<meta charset="utf-8">
<title>...</title>
<script src="online.js"></script>
...

:
function isSiteOnline() {
return true;
}

online.js , offline.js,
, :
function isSiteOnline() {
return false;
}

, ,
, isSiteOnline():
var displayStatus = document.getElementById("displayStatus");
if (isSiteOnline()) {
// ( , ,
// XMLHttpRequest.)
displayStatus.innerHTML = " , " +
" - .";
}
else {
// ( . ,
//
// .)

III. -

368

displayStatus.innerHTML = " " +


" .";
}


JavaScript

JavaScript- applicationCache.
status applicationCache , , . . ,
, (. 10.2), applicationCache.
10.2.

onChecking

- manifest,
-

onNoUpdate

onDownloading

, ( ).

onProgress

onCached

onUpdateReady

.
, , .

onError

- . , - (
), , .

onObsolete

, .
-

10.

369



. , Firefox , onChecking onUpdateReady, onNoUpdate
onError.

onUpdateReady, .
, .
,
. :
<script>
window.onload = function() {
// onUpdateReady.
applicationCache.onupdateready = function() {
var displayStatus = document.getElementById("displayStatus");
// .
// , .
displayStatus.innerHTML = "There is a new version of " +
"this application. To load it, " +
"refresh the page.";
}
}
</script>

,
window.location.reload():
<script>
window.onload = function() {
applicationCache.onupdateready = function() {
if (confirm(
// . ?
"A new version of this application is available. Reload now?")){
window.location.reload();
}
}
}
</script>

. 10.5.
applicationCache . , update(), .
.
.

370

III. -

. 10.5. ,
OK.

,
, , update()
. , ,
.
, swapCache(), . , . ?
, , , .
swapCache() , ( ,
, ).
swapCache() , , .

11

11

HTML5 ,
, - . ,
- HTML5,
JavaScript. HTML5,
- . JavaScript,
. ,
.

. , , HTML5 ( ). ,
,
-. , PHP, ASP.NET, Ruby, Java, Python .
.
,
HTML5-. .
, ?
HTML5 .
(server-sent events),
- . , ,
- (web sockets)
.
, , -

III. -

372

-
: XMLHttpRequest.

- . , , (
) . , ,
, .
: , , , -, .

-
HTML5 , , .
JavaScript- XMLHttpRequest, - -. ( ),
. -
,
, .

-
- : -, -
. .
. ,
( ) ( ), -.
, (, )
(,
, ).
- ,
. ( ) ,
. , - , . -
( -, 4), - , .
, .
- -. - (
), -

11. -

373

. ,
AJAX, JavaScript-
XMLHttpRequest. - , , , . JavaScript , .
- .

XMLHttpRequest
, -
, XMLHttpRequest.
XMLHttpRequest Microsoft ,
- Outlook, . -.
XMLHttpRequest ,
JavaScript ,
. ,
, - . , ( ).
XMLHttpRequest
-. , - .
, . ,

, . ,
.
, . , -

, .

JavaScript, . , JavaScript ,
. ,
, ,
.
,
, - (,
). .
, - . - -

- -. -

374

III. -

- ( XMLHttpRequest),
-, .
XMLHttpRequest . , .

-
. 11.1 -, -
. -
XMLHttpRequest.

. 11.1. Ask the Server - XMLHttpRequest


-. - ,
, - (. . 11.2)

, - - (
) . ( , , HTML).
PHP, , , .


PHP :
<?php
// ( .)
?>

11. -

375

:
<?php
$num1 = $_GET['number1'];
$num2 = $_GET['number2'];
$sum = $num1 + $num2
echo($sum);
?>

PHP, , , , . ,
-:
$num1 = $_GET['number1'];
$num2 = $_GET['number2'];

($) , :
$num1 $num2. PHP , $_GET. URL,
.
, PHP WebCalculator.php, URL
:
http://www.magicalXMLHttpRequestTest.com/
WebCalculator.php?number1=34&number2=46

URL ( URL,
, query string).
, number1, 34, , number2, 46.
(?),
(&). PHP , URL $_GET,
. (
, . , ASP
Request.QueryString.)

HTML , - .
,
. , PHP , , $_POST.

, PHP :
$sum = $num1 + $num2

-, . HTML XML, -

III. -

376

, . , , , PHP- echo:
echo($sum);

, PHP-. ,
: - - , .

: JavaScript, ? , . . PHP ,
. ,
.

-
, XMLHttpRequest
PHP. .
XMLHttpRequest :
var req = new XMLHttpRequest();

Ask the Server askServer():


<div> <p>Enter two numbers:
<input id="number1" type="number">
<input id="number2" type="number">
</p>
<p>To ask the server to add them, without refreshing the page,
click this button:<button onclick="askServer()">
Ask the Server</button>
</p>
</div>
<p id="result"></p>

XMLHttpRequest askServer() . :
function askServer() {
var number1 = document.getElementById("number1").value;
var number2 = document.getElementById("number2").value;

:
var dataToSend = "?number1=" + number1 + "&number2=" + number2;

, open()
XMLHttpRequest.
HTTP (GET POST), URL true false,
.
req.open("GET", "WebCalculator.php" + dataToSend, true);

11. -

377


- open() true, . , - , (. . , ) , .

, onReadyStateChange
XMLHttpRequest .
, :
req.onreadystatechange = handleServerResponse;

, send() XMLHttpRequest.
, - .
onReadyStateChange,
:
req.send();
document.getElementById("result").innerHTML=
"The request has been sent.";
}

, XMLHttpRequest.
readyState, 0 4
. 1,
2, 3, 4. readyState 4,
status, HTTP.
200, - .
401 ; 404,
; 302, ; 503,
. ( HTTP .
www.addedbytes.com/for-beginners/http-status-codes.)
:
function handleServerResponse() {
if ((req.readyState == 4) && (req.status == 200)) {

, responseText XMLHttpRequest.
.
(. 11.2) :
var result = req.responseText;
document.getElementBy!d("result").innerHTML =
"The answer is " + result + ".";
}
}

III. -

378

. 11.2. - , JavaScript,

XMLHttpRequest - . XML ,
XML, . . . XMLHttpRequest
(
), JSON- (. . " " 9), HTML
( ) XML. , XMLHttpRequest , XML, .

, , PHP,
-.
, http://www.prosetech.com/
html5/.


, XMLHttpRequest, . , ,
. , , JavaScript- .
-.
- . 11.3.
, . 11.3, .
, -

11. -

. 11.3. .
Next Previous,
.
XMLHttpRequest

379

380

III. -

, . (
, , .)

XMLHttpRequest. ,
, . , , .
, , .
, . 11.3,
. <div>,
:
<div id="slide">Click Next to start the show.</div>
<a onclick="return previousSlide()" href="#">&lt; Previous</a>&nbsp;
<a onclick="return nextSlide()" href="#">Next &gt;</a>

previousSlide() nextSlide() . ,
0, 5 1. nextSlide() :
var slideNumber = 0;
function nextSlide() {
// .
if (slideNumber == 5) {
slideNumber = 1;
} else {
slideNumber += 1;
}
// .
goToNewSlide();
// , .
return false;
}

previousSlide() :
function previousSlide() {
if (slideNumber == 1) {
slideNumber = 5;
} else {
slideNumber -= 1;
}

11. -

381

goToNewSlide();
return false;
}

, goToNewSlide(), .
XMLHttpRequest, .
: ChineSites.html ?
. - PHP. . , - . ,
ChinaSites1_slide.html, ChinaSites2_slide.html,
. . (
). , ChinaSites5_slide.html :
<figure>
<h2>Wishing Tree</h2>
<figcaption>Make a wish and toss a red ribbon up into the branches of
this tree. If it sticks, good fortune may await.</figcaption>
// .
// , .
<img src="wishing_tree.jpg">
</figure>

, , XMLHttpRequest .
, .
goToNewSlide() :
var req = new XMLHttpRequest();
function goToNewSlide() {
if (req != null) {
// .
req.open("GET", "ChinaSites" + slideNumber + "_slide" +
".html", true);
// .
req.onreadystatechange = newSlideReceived;
// .
req.send();
}
}

<div>,
:

III. -

382

function newSlideReceived() {
if ((req.readyState == 4) && (req.status == 200)) {
document.getElementById("slide").innerHTML = req.responseText;
}
}


, ,
. , ,
.
opacity JavaScript, . ( . http://clagnut.com/sandbox/
imagefades.php, ,
CSS3, . :
http://css3.bradshawenterprises.com/cfimg2/.)
, XMLHttpRequest
.

. . " " 12 HTML5 -, URL


. -.


XMLHttpRequest -
. " " . -
.
-
. , , Google Finance (www.google.com/finance). , .
, BBC
(www.bbc.co.uk/news). , ,
.

- Hotmail (www.hotmail.com).
, (polling).
, - (,
) - .
- JavaScript setInterval()
setTimeout() (. . " " 7),
.

11. -

383

, .
, - , , .
, - ,
-.

(server-sent events), -. - , . ( , , . .
.) , , ,
- .
(. 11.1).
11.1.

IE

Firefox

Chrome

Safari

Opera

Safari
iOS

Android

6*

11

* - .


(polyfill), , : http://tinyurl.com/polyfills.

, .


XMLHttpRequest,
,
, . data:, , ,
, PHP, \n\n.
:
data: -.\n\n

III. -

384

. , \n. , :
data: -.\n
data: , .\n\n

, data:,
\n\n.
JSON
(. . " " 9),
:
data:
data:
data:
data:

{\n
"messageType": "statusUpdate",\n
"messageData": "Work in Progress"\n
}\n\n

- ( id:) -
( retry:):
id: 495\n
retry: 15000\n
data: -.\n\n

- -. . , , ,
-,
15 000 (. . 15 ). 495, .

- - , -. , , 3 .



, . , ,
-,
PHP. . 11.4 ,
.
-.

11. -

385

. 11.4. ,
- .
,


- , .

. - , .

. PHP :
<?php
header("Content-Type: text/event-stream");
header('Cache-Control: no-cache');
// .
do {
// .
$currentTime = date("h:i:s" time());
// .
echo "data: " . $currentTime . PHP_EOL;
echo PHP_EOL;
flush();

III. -

386

// 2 , .
sleep(2);
} while(true);
?>

. MIME text/event-stream, :
header("Content-Type: text/event-stream");

- ( -) . , .
header('Cache-Control: no-cache');

(, , , ).
time() (
::) $currentTime:
$currentTime = date("h:i:s", time());

, echo. , data:, . PHP_OEL, \n, :


echo "data: " . $currentTime . PHP_EOL;
echo PHP_EOL;


, , , , PHP
(.).
, "" (+) JavaScript, .

flush() ,
PHP. ,
sleep() ,
.

, - (, -
) . , ( :)
15 .

11. -

387

-
- ,
. <body>
<div> ,
:
<div id = "messageLog"></div>
<div id = "timeDisplay"></div>
<div id="controls">
<button onclick=" startListening()">Start Listening</button><br>
<button onclick="stopListening()">Stop Listening</button>
</div>

messageLog timeDisplay
,
:
var messageLog;
var timeDisplay;
window.onload = function() {
messageLog = document.getElementById("messageLog");
timeDisplay = document.getElementById("timeDisplay");
};

-
Start Listening.
EventSource, URL , . ( PHP- TimeEvents.php.)
onMessage startListening(), :
var source;
function startListening() {
source = new EventSource("TimeEvents.php");
source.onmessage = receiveMessage;
messageLog.innerHTML += "<br>" + "Started listening for messages.";
}


, - ,
, window.EventSource.
, . , XMLHttpRequest, - .

388

III. -

data event receiveMessage. data


:
function receiveMessage(e) {
messageLog.innerHTML += "<br>" + "New web server time received: " +
e.data;
timeDisplay.innerHTML = e.data;
}

, (
data: /n/n),
.
,
, close() EventSource. :
function stopListening() {
source.close();
messageLog.innerHTML += "<br>" + "No longer listening for messages.";
}



, , , : , , . ( ),

(, ).
, -, ? ,
, -,
- ( , 3 ) ,
.
. , , . - (. . " " ) ,
. , -, JavaScript- ,
.
.

11. -

389

1 .
2 :
<?php
header("Content-Type: text/event-stream");
header('Cache-Control: no-cache');
// 2 ,
// .
echo "retry: 120000" . PHP_EOL;
// .
$startTime = time();
do {
// .
$currentTime = date("h:i:s", time());
echo "data: " . $currentTime . PHP_EOL;
echo PHP_EOL;
flush();
// ,
// .
if ((time() $startTime) > 60) {
die();
}
// 5 .
sleep(5);
} while(true);
?>

1 , 2 , (. 11.5). -
, ,
(,
). - ,
close() EventSource.


, . , - - .
(. . " " ),
. ,

III. -

390

(, ), , , . , .

. 11.5. (
) ( ).
, -,
,

-
,
-. .
.
-,
-, (
Flash) , , XMLHttpRequest.
,
. .
, XMLHttpRequest (, ). , , -

11. -

391

, .
- .
, . - (web sockets),
. - -,
. -
Firefox 4 Opera 11,
. Firefox 6,
; , , Opera. Microsoft , (
http://tinyurl.com/3szzz72).
-,
- . ,
, , . . , . , -,
-, , .

, -,
Chrome,
. Firefox, - Firefox 6.
( Firefox,
. -, .)

-
, , , , . ,
- , ,
, , ,
-?
, . - .
, , . -

III. -

392

, -,
JavaScript, , .
- . JavaScript- .

,
.
- -
, , , . , .

,
-, . . , .
, , ,
, -.
- , , , .

-, , :
"" , , ,
, ;
;
-

, , ;
, . . ,

, .
, , , , .
, , , -, . . -
. - - - . JavaScript - , - .
- - . ( ), - , . . " .
-" .

11. -

393

-
- - . WebSocket URL.
:
var socket = new WebSocket("ws://localhost/socketServer.php");

URL ws://, -. URL - ( socketServer.php). - URL,


wss://,
, ( , URL, https:// http://).

- -. -
-, -,
.

WebSocket
. WebSocket: onOpen ( ), onError (
), onClose ( ) onMessage ( ):
socket.onopen = connectionOpen;
socket.onmessage = messageReceived;
socket.onerror = errorOccurred;
socket.onopen = connectionClosed;

, . send() WebSocket,
. , onOpen :
function connectionOpen() {
socket.send("UserName:jerryCradivo23@gmail.com");
}

, - .
onError onClose -. onMessage,
. ,
JavaScript
data:
function messageReceived(e) {
messageLog.innerHTML += "<br>" + "Message received: " + e.data;
}

III. -

394

- , , , disconnect():
socket.disconnect();

- , -

, , .

- ,
. , -
HTTP. , .
, - (, , ). - . , ( onError WebSocket)
(polyfills) , - GitHub
(http://tinyurl.com/polyfills). , -.

-
-, , .
http://websocket.org/echo.html, -: - ,
- (. 11.6).

,

,

. 11.6. -, ,
.
, -

11. -

395

- , WebSocket. ,
, , - , , .
-, , .
. , . . :
http://html5demos.com/web-socket.
. - HTML5. , , , . , . : http://mrdoob.com/projects/multiuserpad.

-
-,
-, .
- (, , )
, .
, .
PHP.
- PHP. :
http://code.google.com/p/phpwebsocket.
Ruby. - Ruby, , "Event Machine", . : http://github.com/igrigorik/em-websocket.
Python. - Apache
Python. : http://code.google.com/p/pywebsocket.
.NET. . - C# .NET Microsoft. http://superwebsocket.codeplex.com.
Java. .NET,
Java. : http://jwebsocket.org.
node.JS. , , node.JS
- JavaScript , . ,
- : http://github.com/
miksago/node-websocket-server.
Kaazing. , Kaazing
-. -, -. ,
, .
-, , ( -
HTML5, Flash, JavaScript). . : http://kaazing.com/products/html5-edition.html.

12

12


JavaScript

HTML5.
, , ,
, JavaScript, .
, . , -, JavaScript. ,
.
. HTML5,

, WHATWG (. . "HTML5:
" 1). HTML5
- JavaScript.
, , : .
. - -

,
JavaScript, ,
, .
, .
. - -

.
, , . JavaScript- , . -

12. JavaScript

397

, JavaScript .
, , , URL
. - ,
. HTML5
, ( , ).


HTML5. ,
, ,
, ,
(
, JavaScript CSS3).


-. ,
.
,
.

(. 12.1).
12.1.

IE

Firefox

Chrome

Safari

Opera

Safari
iOS

Android

3.5

10.6

3.2

2.1

Internet
Explorer, IE 7 IE 8. IE , Google
Gears (http://code.google.com/apis/gears). Google Gears
HTML5
, . Google Gears
( Google
),
. , ,
, Google Gears . Google Gears, Chrome Frame (. " -

III. -

398

. IE Google Chrome Frame"


1), .

JavaScript, ,
HTML5, ,
W3C.
HTML5,
. HTML5,
.


,
. , -
, , ,
? , - , ? , ,
, ?
, . , ,
- (. 12.1).

. 12.1. - .
(Always Share),
(Share Location) (Never Share). Firefox
,
, , -,
,

12. JavaScript

399

, (location provider), ,
Firefox Google Location Services.
,
.
(. . ) , , . - , ( , )
, , ,
. IP-, . .
, . .

, , ,
, IP-. IP-
, , (, ).
.


-.
IP- , , . , , -.
. , , ,
, ,
.

IP- . , .


, .
,
, , 1.

. . .

III. -

400

,
. , 1 . ( , , , .)
,
GPS (Global Positioning Service, ),
.
, , . ,
. . " "
, , GPS ( ), .
, .
, RFID- (Radio Frequency
Identification, ), Bluetooth, cookies Google Maps
. .

, , . , Firefox
Geolocater (http://addons.mozilla.org/en-us/firefox/addon/geolocater), , -, .
, , , , - ,
-.

: , - ,
.
, GPS,
, .

?
, ,
: ?
, , , -

12. JavaScript

401

. . - ,
.
- (
) - - (, Google Maps).
, , , - , . - , .

- - , . , - .
, , , Google Maps
. " " .


.
navigator.geolocation: getCurrentPosition(), watchPosition() clearWatch().

navigator JavaScript. .
navigator.userAgent, , ,
, , .

getCurrentPosition().
, ,
, .
getCurrentPosition() , . .
. , .
,
, ,
. JavaScript
, . getCurrentPosition()
(completion function).
:
navigator.geolocation.getCurrentPosition(
function(position) {
// :
alert("You were last spotted at (" + position.coords.latitude +
"," + position.coords.longitude + ")");
}
);

402

III. -

getCurrentPosition()
. , , .
Internet Explorer . 12.2.

. 12.2. : -
. :

, , getCurrentPosition(), , , :
function geolocationSuccess(position) {
alert("You were last spotted at (" + position.coords.latitude +
"," + position.coords.longitude + ")");
}

getCurrentPosition()
:
navigator.geolocation.getCurrentPosition(geolocationSuccess);

: ,
.
, ,
- . (,
), (, Chrome)
.

12. JavaScript

403

: " ?",
. " " .
,
.


getCurrentPosition()
position, : timestamp ( ) coords ( ).
coords position
latitude longitude, , , . , altitude ( ), heading ( ) speed ().
.
accuracy, . ( ,
accuracy , .) , accuracy, 2135 ,
, .
accuracy . , accuracy ,
- :
if (position.coords.accuracy > 50000) {
results.innerHTML =
// .
"This guess is all over the map.";
}
, , /
.


,
. ,
.
getCurrentPosition() , . , , .
.
:
// , .
var results;

404

III. -

window.onload = function() {
results = document.getElementById("results");
// ,
// .
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
geolocationSuccess, geolocationFailure
);
results.innerHTML = "The search has begun.";
}
else {
// .
results.innerHTML = "This browser doesn't support geolocation.";
}
};
function geolocationSuccess(position) {
results.innerHTML = "You were last spotted at (" +
position.coords.latitude + "," + position.coords.longitude + ")";
}
function geolocationFailure(positionError) {
results.innerHTML = "Geolocation failed.";
}

, : code ( , ) message ( ). ,
, .
,
, :
function geolocationFailure(positionError) {
if (positionError.code == 1) {
results.innerHTML =
" , " +
" . .";
}
else if (positionError.code == 2) {
results.innerHTML =
" " +
" - .";
}
else if (positionError.code == 3) {
results.innerHTML = " " +
" . ";
}

12. JavaScript

405

else {
results.innerHTML =
" . , .";
}
}


- ( -) - .


, , getCurrentPosition() :
.
, , .
, . enableHighAccuracy:
navigator.geolocation.getCurrentPosition(geolocationSuccess,
geolocationFailure, {enableHighAccuracy: true});

:
navigator.geolocation.getCurrentPosition(
geolocationSuccess, geolocationFailure,
{enableHighAccuracy: true,
timeout: 10000,
maximumAge: 60000}
);

JavaScript. ,
. " . ?"
.
? enableHighAccuracy , GPS (
). , , . .
. enableHighAccuracy
false.
timeout ,
, .

III. -

406

timeout , . . 10 000 10 . ,
. timeout 0,
, ,
-.
maximumAge . ,
maximumAge, 60 000 , , . , , ,
. maximumAge 0, , . Infinity,
.

?
7 JavaScript,
. , . " " Circle()
. . " "
.
. ,
. .
, . . .
, , , . , ,
. :
var personObject = {
firstName="Joe",
lastName="Grapta"
};
. ,
personObject.firstName Joe,
personObject.lastName Grapta.

. (. . , getCurrentPosition()) . ,
,
JavaScript, . : www.javascriptkit.com/javatutors/oopjs.shtml.


-
, . ,

12. JavaScript

407

- . , . .
. (
, -.) , , Google Maps. , Google
Maps - .
Google Maps, .
, , ,
. , - Google Maps

. , Google Maps,
-: http://code.google.com/apis/maps/documentation/JavaScript (
http://code.google.com/intl/ru/apis/maps/documentation/javascript/).

Google Maps (
) . (
Google .) Google
Maps , , .

. 12.3 . .
.
API Google Maps.
, :
<head>
<meta charset="utf-8">
<title>Geolocation Map</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
...
</head>

<div>
.
:
<body>
<p id="results">Where do you live?</p>
<div id="mapSurface"></div>
</body>

408

III. -

. 12.3. : - .
Google Maps -. ,
,
JavaScript

:
#mapSurface {
width: 600px;
height: 400px;
border: solid 1px black;
}

, Google
Maps. . ,
. ( ,
, . , .)
, . , :
var results;
var map;

12. JavaScript

409

window.onload = function() {
results = document.getElementById("results");
// .
// .
// . Google Maps.
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// , .
map = new google.maps.Map(document.getElementById("mapSurface"),
myOptions);
// .
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geolocationSuccess,
geolocationFailure);
results.innerHTML = " .";
}
else {
results.innerHTML = " " +
" .";
goToDefaultLocation();
}
};


Google Maps (http://code.google.com/intl/ru/apis/maps/documentation/
javascript/basics.html) Google Gears (. . ""
).

, . . . , LatLng, setCenter() . ,
:
function geolocationSuccess(position) {
// LatLng.
location = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
// .
map.setCenter(location);

410

III. -


. 12.3. ,
.
InfoWindow. (. . 12.3):
//
// .
var infowindow = new google.maps.InfoWindow();
infowindow.setContent("You are here, or somewhere thereabouts.");
infowindow.setPosition(location);
// .
infowindow.open(map);
results.innerHTML = "Now you're on the map.";
}

, , , ,
:
function geolocationFailure(positionError) {
...
goToDefaultLocation();
}
function goToDefaultLocation() {
// -.
var newYork = new google.maps.LatLng(40.69847, -73.95144);
map.setCenter(newYork);
}



getCurrentPosition(), .
geolocation ,
.
watchPosition(), getCurrentPosition().
getCurrentPosition(), watchPosition() :
( ) :
navigator.geolocation.watchPosition(geolocationSuccess,
geolocationFailure);

12. JavaScript

411

, watchPosition()
, , . , ,
getCurrentPosition() watchPosition() .
getCurrentPosition() watchPosition()
. clearWatch(), .
, :
var watch = navigator.geolocation.watchPosition(geolocationSuccess,
geolocationFailure);
...
navigator.geolocation.clearWatch(watch);


JavaScript
. -. , , Java . , - .
20 JavaScript . - , -
, .
JavaScript
. , . JavaScript
.
,
. ,
.
-
.
setInternval() setTimeout().
(, ,
. " " 7).

III. -

412

,
.
HTML5
, - (web worker), . -,
. -
.
. 12.2 .
12.2. -

IE

Firefox

Chrome

Safari

Opera

Safari
iOS

Android

10*

3.5

10.6

* - .


-
- JavaScript ,
.
:
, .
, . , , .
, . ,
,
.
, .
(. . ,
, , , -) , -, .
, - , . .
- -.
- - ( ), , , JavaScript.
, , ,
. , - ,

,
.

12. JavaScript

413


Chrome -
, -allow-file-access-from-files.
Chrome, . . :
http://tinyurl.com/3j4dgcb.


-,
. - . , , , , - . , , , . 12.4, .
, , .

. 12.4. , , ,
Start Searching. ( 1 50 000)
, .
(, 1 500 000),
, .
, - ; ,
" "

III. -

414

, -.
, JavaScript.
.
<input>, .
, <div> , .
<body> :
<p>Do a prime number search from <input id="from" value="1"> to
<input id="to" value="20000">.</p>
<button id="searchButton" onclick="doSearch()">Start Searching</button>
<div id="primeContainer">
</div>
<div id = "status"></div>

<div> . , overflow overflow-x


( ):
#primeContainer {
border:
solid 1px black;
margin-top:
20px;
margin-bottom: 10px;
padding:
3px;
height:
300px;
max-width:
500px;
overflow:
scroll;
overflow-x:
hidden;
font-size:
x-small;
}

JavaScript , . , ,
.
.
findPrimes(), .

-,
findPrimes() .
, , ,
http://www.prosetech.com/html5/.

doSearch():
function doSearch() {
// .

12. JavaScript

415

var fromNumber = document.getElementById("from").value;


var toNumber = document.getElementById("to").value;
// . ( .)
var primes = findPrimes(fromNumber, toNumber);
//
// .
var primeList = "";
for (var i=0; i<primes.length; i++) {
primeList += primes[i];
if (i != primes.length-1) primeList += ", ";
}
// .
var displayList = document.getElementById("primeContainer");
displayList.innerHTML = primeList;
// ,
// .
var statusDisplay = document.getElementById("status");
if (primeList.length == 0) {
// .
statusDisplay.innerHTML = "Search failed to find any results.";
}
else {
// !
statusDisplay.innerHTML = "The results are here!";
}
}

, , , . ,
, ,
, .


Worker.
- ,
Worker, .
-,
PrimeWorker.js:
var worker = new Worker("PrimeWorker.js");

- JavaScript.
,

III. -

416

-,
. -
.

- . , PrimeWorker.js <div> .
, - JavaScript , .

- - . -,
postMessage():
worker.postMessage(myData);

- onMessage, , .
- -,
postMessage(), , - onMessage. . 12.5.
-
(PrimeNumberSearch_WebWorker.html)



( )
onMessage

-
(PrimeWorker.js)


postMessage()

onMessage


postMessage()

. 12.5. -. :
- , - ,
-

-,
. postMessage()
.
, .
(. " .
?" ).
( from, ,
to, ), :

12. JavaScript

417

worker.postMessage(
{ from: 1,
to:
20000 }
);


, - . JSON (. . " " 9) , ,
.


doSearch().
, doSearch() -
:
var worker;
function doSearch() {
// ,
// .
searchButton.disabled = true;
// -.
worker = new Worker("PrimeWorker.js");
// onMessage,
// -.
worker.onmessage = receivedWorkerMessage;
// -.
var fromNumber = document.getElementById("from").value;
var toNumber = document.getElementById("to").value;
worker.postMessage(
{ from: fromNumber,
to: toNumber }
);
// , .
statusDisplay.innerHTML = "A web worker is on the job (" +
fromNumber + " to " + toNumber + ") ...";
}

PrimeWorker.js.
onMessage, , :

III. -

418

onmessage = function(event) {
// event.data - .
var fromNumber = event.data.from;
var toNumber = event.data.to;
// .
var primes = findPrimes(fromNumber, toNumber);
// . -.
postMessage(primes);
};
function findPrimes(fromNumber, toNumber) {
// (
// .)
}

- postMessage(),
onMessage, :
function receivedWorkerMessage(event)
// .
var primes = event.data;

// .
...
// .
searchButton.disabled = false;
}

, (.
),
-.
, , ,
. . ,
, . ,
. ,
, - -.

- JavaScript,
, importScripts(). ,
FindPrimes.js PrimeWorker.js,
:
importscripts("FindPrimes.js");

12. JavaScript

419

-
, -
postMessage(). - -
onerror,
:
worker.onerror = workerError;

, ,
. -
:
function workerError(error) {
statusDisplay.innerHTML = error.message;
}

message, error lineno filename,


,
.


, - , .
-.
. -
, close(). - , terminate() worker (
). , -:
function cancelSearch() {
worker.terminate();
statusDisplay.innerHTML = "";
searchButton.disabled = false;
}


. , , , . ,
Worker. ( , , .)

-
, , , , - ,
?

420

III. -
, -
Google Gears,
(worker pool). . : http://code.
google.com/apis/gears/api_workerpool.html. Google Gears
, .
:
if (window.Worker) {
// - .
// - .
} else {
// - .
//
// .
}
, . .
, , -.
. (
) ,
setInterval() setTimeout(). , , .


-

(. 12.6).
, - - .
, -
postMessage(). ,
, - :
( ) ( ). ,
.

. , - "Progress" (""),
"PrimeList" ("").
, . , - .
messageType, , data.

12. JavaScript

421

. 12.6. , ,
, .
, (. . 5.7)

-,
:
onmessage = function(event) {
// .
var primes = findPrimes(event.data.from, event.data.to);
// -.
postMessage({MessageType: "PrimeList", data: primes});
};

findPrimes() postMessage() -. messageType data.


messageType , , :
function findPrimes(fromNumber, toNumber) {
...
// .
var progress = Math.round(i/list.length*100);
// ,
// 1%.

III. -

422

if (progress != previousProgress) {
postMessage({messageType: "Progress", data: progress});
previousProgress = progress;
}
...
}

- -,
messageType,
. ,
.
,
:
function receivedWorkerMessage(event)
var message = event.data;

if (message.messageType == "PrimeList")
var primes = message.data;

// . ,
// .
...
}
else if (message.messageType == "Progress") {
// .
statusDisplay.innerHTML = message.data + "% done ...";
}
}


-. , postMessage() , . -
. ,
. ,
. . ( -
).
, , . .


-
- .
- . - . - - .

12. JavaScript

423

- .
, -
.
- .
- ,
onMessage . . - ,
.
-. -
- . , , . -
. -
, ,
. (
, - , - .)
- -. - -, . ,
, .
-. - XMLHttpRequest (. . " XMLHttpRequest" 11),
-. - , postMessage().
-. -
setTimeout() setInterval() , -. , - - .


HTML5, history JavaScript. , ,
.
history,
. . , history . length
(. .
-).
:
alert("You have " + history.length +
" pages in your browser's history list.");

history back().
:
history.back();

424

III. -

.
forward()
go() .
,
- . HTML5 history , .
pushState(), URL , . , ,
. URL . ,
, URL ,
.
.
, ,
, .

URL
. " " 11
- (. . 11.3). Previous Next,
.
, ,
.
XMLHttpRequest.
, , . , , URL
(. 12.7).
, , , URL
, , URL . ,
, , , , , . , ,
,
, , -

12. JavaScript

425

. ,
, , Flickr .
, URL

. 12.7. .
, URL ChinaSites.html

: hashbang URL
-
URL. ( )
, hashbang, URL #!, . URL:
http://jjtraveltales.com/ChinaSites.html#!/Slide5

, , #, URL. , URL , ChinaSites.html,


.
, , , JavaScript URL,
#!:
http://jjtraveltales.com/ChinaSites.html/Slide5

-
. , .
hashbang? URL, , .
, location.href
JavaScript. , URL,

426

III. -

-
. ,
- JavaScript, PathJS (https://
github.com/mtrpcic/pathjs), .
hashbang , . -
.
URL. Facebook.

, URL
, , , , http://www.facebook.com/profile.php?id=1586010043#!/
pages/Haskell/401573824771. .
. hashbang URL -

. , ,
, URL ,
.
.

URL hashbang, URL. ChineSites.html , , , , , . , ChinaSites.html


"china wishing tree". Google
, URL
(http://code.google.com/web/ajaxcrawling/docs/getting-started.html), ,
.
Cool URL . Cool URL -, -

. Cool URL , - (Tim Berners-Lee), : www.w3.org/Provider/Style/URI.html.


,
-, URL hashbang , , , .
- - , , ,
.

HTML5-:
HTML5 URL
. URL ,

12. JavaScript

427

, hashbang. , ChinaSites.html , URL :


http://jjtraveltales.com/ChinaSites5.html

ChinaSites5.html,
, , . ,
. ,
( URL ChinaSites5.html),
( URL ChinaSites4.html), ,
.
, . , URL . , ChinaSites1.html, ChinaSites2.html,
ChinaSites3.html . . , , , ,
. . - (,
Facebook Flickr) , . .
. - .
" .
URL" .
, , , .
, history.
pushState(),
URL, , . URL . ( URL
-.)
pushState()
URL ChinaSites4.html:
history.pushState(null, null, "ChinaSites4.html");

pushState() ,
URL, .
,
. ,
, , URL .

428

III. -

, . .
, null,
.
, ChinaSites.html,
URL :
function nextSlide() {
if (slideNumber == 5) {
slideNumber = 1;
} else {
slideNumber += 1;
}
history.pushState(slideNumber, null, "ChinaSites" +
slideNumber + ".html");
goToNewSlide();
return false;
}
function previousSlide() {
if (slideNumber == l) {
slideNumber = 5;
} else {
slideNumber -= 1;
}
history.pushState(slideNumber, null, "ChinaSites" +
slideNumber + ".html");
goToNewSlide();
return false;
}

,
. , onPopState.
. 12.8.
pushState(), onPopState, . pushState()
(History) , onPopState
, .
, , , . URL
ChinaSites.html ChinaSites1.html, ChinaSites2.html,
ChinaSites3.html . . ,
URL .

12. JavaScript

429

. 12.8. URL ,
. URL ,
-

(, ChinaSites3.html
ChinaSites2.html), onPopState.
, pushState().
, . :
window.onpopstate = function(e) {
if (e.state != null) {
// .
// ( URL,
// location.href, .)
slideNumber = e.state;
// -.
goToNewSlide();
}
};

,
, . - ,
( Chrome) onPopState , pushState() .

history replaceState(), . replaceState() ,
, ,
(History).



,
(. 12.3), Internet Explorer.

III. -

430

12.3.

IE

Firefox

Chrome

Safari

Opera

Safari
iOS

Android

11.5

4.2

, , . ,
URL. , Internet Explorer , URL
ChinaSites.html. Flickr
( , http://tinyurl.com/6hnvanw Internet Explorer).
. , , URL ,
. , GitHub (http://github.com).
, , , .
, ,
, URL hashbang. (
Facebook.) .
JavaScript, : http://
github.com/balupton/history.js.

URL
:
, URL. , , , URL . . , ChinaSites3.html,
ChinaSites.html
ChinaSites3_slide.html - .
,
.
, .
URL,
, ChinaSites1.html, ChinaSites2.html,
ChinaSites3.html . . , (, ChinaSites3.html, ChinaSites3_slide.html), . .
. , , .

12. JavaScript

431

. -
( ), :
<!--#include file="footer.html" -->
, , -
.
.
,
- (ChinaSites1.html,
ChinaSites2.html . .).
-. , Adobe Dreamweaver Microsoft Expression Web, ,
. , , .

432

III. -

IV

IV

1.

CSS

2.

JavaScript


CSS

, , -
CSS (Cascading Style Sheets, ).
(style sheet). - , .
HTML5 ( ),
CSS. ,
, 8,
, CSS3. CSS , ,
.

, ,
CSS.
, - , CSS .

-
.
, style. , :
<h1 style="color: green">Inline Styles are Sloppy Styles</h1>

, .
<style>,
<head> :

436
<head>
<title>Embedded Style Sheet Test</title>
<style>
...
</style>
</head>

,
. (
).
, , -.

, <link> <head> .
,
SampleStyles.css:
<head>
<title>External Style Sheet Test</title>
<link rel="stylesheet" href="SampleStyles.css">
</head>

. . , HTML
.

- : HTML- (, , , , ), CSS ( , , , ). , ,
.
-
. ( www.csszengarden.com,
200 , .)


, -
HTML. , .

HTML.
:

CSS

437

{
: ;
: ;
}

.
, .

. ,
( ) , . ,
,
<h1> .
, .
, , . .
.
. , color,
light blue (-) green ().
:
h1 {
text-align: center;
color: green;
}

css (, SampleStyles.css). -, ,
, , <link>
. , .
,
.

CSS
: textalign ( ) color ( ).
, ,
. 1.1. ,
, ( CSS3, 8).

, ,
( ),
www.htmldog.com/reference/cssproperties.
, .

438

1.1.

color, background-color

margin, padding, margin-left, margin-right, margin-top, margin-bottom

border-width, border-style, border-color, border ( , )

text-align, text-indent, word-spacing, letter-spacing, line-height,


white-space

font-family, font-size, font-weight, font-style, font-variant,


text-decoration, @font-face ( ;
. . " " 8)

width, height

position, left, right, float, center

background-image, background-repeat, background-position


.
-.

class. :
<h1 class="ArticleTitle">HTML5 is Winning</h1>

,
. ,
:
.ArticleTitle {
font-family: Garamond, serif;
font-size: 40px;
}

, class
ArticleTitle, ,
.
class . , . , -
, .
, , , , :

CSS

439

h1.ArticleTitle {
font-size: 40px;
}

ArticleTitle, <h1>. . , , ArticleTitle


,
. - , .

.
, , , . , ,
ArticleTitle, , . , .
, , .


,
( ) . HTML, CSS , . CSS HTML. /*, */. CSS:
/* . */
.ArticleTitle {
font-size: 40px;
}


, , .


<div>
<div> :
<div>
<p>Here are two paragraphs of content.</p>
<p>In a div container.</p>
</div>

440

<div> ,
. .
. CSS ,

. . , ,
.
. <div>,
( , ).
. <div> .

, ( ),
.
. -

. <div>,
CSS .

, HTML5 , <div> , .
, (, <header>
<figure>), . , <div> .
. 2.

<div> <span>. <div>,


<span> . , <div>
, <span>
. ,
<span>
.

CSS . ? CSS , . , CSS - -.


.
.
, , , , :

CSS

441

h1 {
font-family: Impact, Charcoal, sans-serif;
font-size: 40px;
}
h2 {
font-family: Impact, Charcoal, sans-serif;
font-size: 20px;
}

font-family ,
, - :
h1, h2 { font-family: Impact, Charcoal, sans-serif;
h1 { font-size: 40px; }
h2 { font-size: 20px; }

, .
, . . , .
, .


,
. :
.Content h2 {
color: #24486C;
font-size: medium;
}

Content, <h2> .
, :
<div class="Content">
...
<h2>Mayan Doomsday</h2>
...
</div>

, .
. ,
:
.Content .LeadIn {
font-variant: small-caps;
}

442

Content, LeadIn. ,
:
<div class="Content">
<p><span class="LeadIn">Right now</span>, you're probably feeling
pretty good. After all, life in the developed world is
comfortable ...</p>
</div>

, ,
.

(
ID-). ,
. ,
.
#:
#Menu {
border-width:
border-style:
}

2px;
solid;

,
, id . , #Menu
<div>:
<div id="Menu">...</div>

, , :
, . . ,
? : . ,
<div> Menu. ,
.
, ,
. ,
. ,
Menu NavigationBar, ,
. , . - , ,
. , .

CSS

443


id JavaScript,
.
,
id JavaScript. id class.
, .


. , ,
. . , ,
, , .
CSS
, .
:link .
:visited . :hover ,
, :active
, , .
, .
,
, (. . , ):
a:link
a:visited

{ color: red; }
{ color: blue; }

:
.BackwardLink:link {
color:
red;
}
.BackwardLink:visited {
color: blue;
}

,
:
<a class="BackwardLink" href="...">...</a>

. ,
:hover . (. . "
" 8).

444


CSS3 ,
, input -.
,
1
"Smashing Magazine" http://tinyurl.com/3p28wau .


CSS3 , , . , , , :
input[type="text"] {
background-color:silver;
}

<input>, , type
text. , <input>
, :
<label for="name">Name:</label><input id="name" type="text"><br>
<input type="submit" value="OK">

type="text" <input> , . . . , , . . , , .
, , :
label[for="name"]
width: 200px;
}


. ,

. ,
. . CSS3 www.w3.org/TR/css3-selectors/#selectors.

. " CSS3" " CSS3", . .

CSS

445


2 HTML5,
,
ApocalypsePage_Original.html (. 1.1).

. 1.1. ,
,

ApocalypsePage_Original.css:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Apocalypse Now</title>
<link rel="stylesheet" href="ApocalypsePage_Original.css">
</head>
...

, 50
. .

446

, <body>, -.
, , . . , , , :
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", Geneva, sans-serif;
max-width: 800px;
}

CSS font-family, . : - , , ( .
http://www.fonttester.com/help/list_of_web_safe_fonts.html, , , . http://www.speaking-in-styles.com/web-typography/
Web-Safe-Fonts). : , .
serif sans-serif ( , ).
, -,
CSS3 , . " " 8.
<body>
800 . , , .
,
(. . " " 8), (. . " " 8) ,
. 800 , .
, :
.Header {
background-color: #7695FE;
border:
thin #336699 solid;
padding:
10px;
margin:
10px;
text-align: center;
}


( )
<div>, Header.
2
HTML5- <header>.

CSS

447

. background-color
, CSS, (
), HTML- ( ) rgb() ( ,
). ,
,
rgb() .
, HTML- rgb() .
, rgb()
:
background-color: rgb(118,149,254);


RGB - , Paint.

.
" " border, , (, solid ,
dashed , dotted , double , groove , ridge , inset outset ).
(padding) 10 (
),
(margin) 10 ( ). , text-align ,
.

.
( <h1>) :
.Header h1 {
margin:
0px;
color:
white;
font-size: xx-large;
}


( xx-large
). em-.

.Teaser .Byline:
.Header .Teaser {
margin:
0px;
font-weight: bold;
}

448
.Header .Byline {
font-style: italic;
font-size: small;
margin:
0px;
}

<p>- . <p>
Teaser Header.
<p>
Byline Header:
<div class="Header">
<h1>How the World Could End</h1>
<p class="Teaser">Scenarios that spell the end of life as we know</p>
<p class="Byline">by Ray N. Carnation</p>
</div>

<div>, Content
. ,
:
.Content {
font-size: medium;
font-family: Cambria, Cochin, Georgia, "Times New Roman", Times, serif;
padding-top:
20px;
padding-right: 50px;
padding-bottom: 5px;
padding-left:
50px;
line-height:
120%;
}

,
,
.
(. . padding-top, paddingright . .), .
padding ,
, , , :
padding:

20px 50px 5px 50px;

, ,
, padding. , .
line-height
. 120%
, .

CSS

449


. LeadIn,
, :
.Content .LeadIn {
font-weight: bold;
font-size:
large;
font-variant: small-caps;
}

<h2> <p> :
.Content h2 {
color:
#24486C;
margin-bottom: 2px;
font-size:
medium;
}
.Content p {
margin-top: 0px;
}

, , . ( ) .
. :
.Footer {
text-align: center;
font-size: x-small;
}
.Footer .Disclaimer {
font-style: italic;
}
.Footer p {
margin: 3px;
}

, ApocalypsePage_Original.css.
(http://www.prosetech.com/html5/) , . 2,

HTML5.


JavaScript

, .
HTML- , . - , HTML , . .
, , , JavaScript, . , ,
- - JavaScript . ,
JavaScript.
HTML , , , JavaScript.
JavaScript.
JavaScript , , .
, - Visual Basic, Pascal
,
JavaScript. ,
, ,
. , JavaScript
.

JavaScript, jQuery JavaScript.
, JavaScript Mozilla, http://developer.mozilla.org/en/JavaScript/Guide.

JavaScript

451

JavaScript
-
JavaScript -,
. <script>.
JavaScript, - ,
.


JavaScript-
- HTML <script>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Simple JavaScript Example</title>
</head>
<body>
<p>At some point in the processing of this page, a script block
will run and show a message box.</p>
<script>
alert("We interrupt this web page with a special " +
"JavaScript announcement.");
</script>
<p>If you get here, you've already seen it.</p>
</body>
</html>

,
.
JavaScript alert(). , (. 2.1).
, OK.

JavaScript, -: .
JavaScript . , ( ), .

452

. 2.1. - JavaScript,
. , JavaScript
.
, , OK.
( ),

, , (
), <body>
</body>. ,
.

Internet Explorer
, Firefox
Chrome, Internet Explorer.
Internet Explorer
.
, JavaScript .
, Internet Explorer .
, . . Internet Explorer , . -, Internet Explorer .

-.
Internet Explorer , . <head> MOTW (.
. " JavaScript-" 1):
<head>
<meta charset="utf-8">

JavaScript

453

<!-- saved from url=(0014)about:internet -->


...
</head>
Internet Explorer , MOTW, -,
JavaScript .
HTML.


,
. ,
, .
,
. :
function showMessage() {
// ...
}

.
( JavaScript .
, .)
,
:
function showMessage() {
alert("We interrupt this web page with a special " +
"JavaScript announcement.");
}

, <script>.
JavaScript <head> . ,
, .
,
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Simple JavaScript Example</title>
<script>
function showMessage() {
alert("We interrupt this web page with a special " +
"JavaScript announcement.");
}

454

</script>
</head>
...

. , .
; ,
alert(). ,
, . , . , showMessage(),
:
<body>
<p>At some point in the processing of this page, a script block
will run and show a message box.</p>
<script>
showMessage();
</script>
<p>If you get here, you've already seen it.</p>
</body>
</html>

,
, .
, .
. ,

, .
, , .
, , .
. -

, . ,
, , 6.
. -


. .
. , -

,
. - .
, , - ( JavaScript). -

JavaScript

455

, , , . " "
.

<script>.

JavaScript
JavaScript ,
-. - . - ,
-. , CSS.
.

- , JavaScript, . ,
.

js (
JavaScript). , , <script>. MessageScripts.js:
function showMessage() {
alert("We interrupt this web page with a special " +
"JavaScript announcement.");
}

, -. <head> <script>, .
src :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Simple JavaScript Example</title>
<script src="MessageScripts.js"></script>
</head>

456
<body>
<p>At some point in the processing of this page, a script block
will run and show a message box.</p>
<script>
showMessage()
</script>
<p>If you get here, you've already seen it.</p> </body> </html>

, MessageScripts.js
, . , showMessage()
, .

<script> , </script>.
, , <script>, . . , JavaScript-.

-. src URL (, http://SuperScriptSite.com/MessageScript.js).


-, Google Maps (. . " " 12).



. , - , -
.
(events) JavaScript,
, HTML .
, HTML JavaScript- onMouseOver, , , ,
, , . .
.
:
?
, .
, onMouseOut
<img>, :
<img src="sunny.jpg" alt="A sunny day" onmouseover="showMessage()">

JavaScript

457


JavaScript , , , showMESSAGE , showMessage .
, . .
HTML, . , ( ), . . XHTML; ,
, <Shift>.


showMessage(), (. 2.2). ,
, .
onMouseOver,

. 2.2. ,
,

, , JavaScript. , ,
HTML . . 2.1
HTML, . . http://developer.mozilla.org/en/DOM/element.
2.1. HTML

onClick

onMouseOver

458

2.1 ()

onMouseOut

onKeyDown

<select>, <input>,
<textarea>, <a>, <button>

onKeyUp

<select>, <input>,
<textarea>, <a>, <button>

onFocus

(. .
, <Tab> ). ,
. . (. . 4.1
)

<select>, <input>,
<textarea>, <a>, <button>

onBlur

<select>, <input>,
<textarea>, <a>, <button>

onChange

<select>,
<input type="text">,
<textarea>

onSelect

<inputtype="text">,
<textarea>

onError

(
URL)

<img>

onLoad


, ,

<img>, <body>

onUnload

.

URL . ,

<body>


JavaScript
, , ,
, , JavaScript. , , .

, . JavaScript

JavaScript

459

var, .
JavaScript.
myMessage:
var myMessage;


JavaScript , , myMessage , MyMessage.

, , , - .

(=), , .
( ):
var myMessage = "Everybody loves variables";

:
// .
alert(myMessage);


JavaScript ,
var. ,
.

null
JavaScript null,
. , null, ,
. , . , Modernizr
(. . " Modernizr" 1)
null, HTML5. null ,
, , :
if (myObject == null) {
// myObject .
// , , , .
}



. :

460
<script>
var outsideVariable;
function doSomething() {
var insideVariable;
...
}
</script>

.
insideVariable .
doSomething() , . , doSomething()
insideVariable .
, , ( ), ,
.
. ousideVariable
.

,
.
.


JavaScript , , , . ,
,
var. .
, myMessage,
, :
myMessage = 27.3;

JavaScript, . .
. . ,
:
var = inputElement.value;

,
, :
var = inputElement;

JavaScript

461

JavaScript , .
, , -
.
, .



.
, . , :
var myNumber = (10 + 5) * 2 / 5;

,
, .
6.

. "" (+):
var firstName = "Sarah";
var lastName = "Smithers";
var fullName = firstName + " " + lastName;

fullName
"Sarah Smithers". ( (" ")
, .)

. ,
var myNumber = 20;
myNumber = myNumber + 10;
// ( myNumber 30.)

:
var myNumber = 20;
myNumber += 10;
// ( myNumber 30.)

,
, . :
var myNumber = 20;
myNumber -= 10;
// ( myNumber 10.)
myNumber *= 10;
// ( myNumber 100.)

462
var myText = "Hello";
var myText += " there.";
// ( myText "Hello there.")

:
var myNumber = 20;
myNumber++;
// ( myNumber 21.)
myNumber--;
// ( myNumber 20.)


JavaScript
JavaScript ( , ), . ,
,
( ). , .
,
. .
Internet Explorer. , <F12>; (Developer Tools).
. : http://msdn.microsoft.com/ie/aa740478.
Firefox. Firefox Firebug (http://getfirebug.com/javascript), . , http://developer.mozilla.org/
en/Debugging_JavaScript Mozilla
.
Google Chrome. Chrome . http://code.google.com/
chrome/extensions/tut_debugging.html.
Opera. Opera Dragonfly (. www.opera.com/dragonfly), http://tinyurl.com/39nv7w .
Safari. Safari , , , . Safari Developer Library
http://tinyurl.com/63om77c.
, , , . , .


: , true (), false (). , .

JavaScript

463


(. 2.2).
2.2.

==

!=

Not (, , . . )

<

>

<=

>=

&&

"". ,
true (). false (),

||

"". ,
true. true,

:
myNumber < 100

,
if. :
if (myNumber < 100) {
// ( , myNumber
// 20, , 147.)
}


, , , , , .
.

, . . ==.
, :
// :
if (myName == "Doe")
}

464
// :
if (myName = "Sarah")
}

, ,
if. , ,
if else. else:
if (myNumber < 100) {
// ( , myNumber 100.)
}
else if (myNumber < 200) {
// ( , myNumber 200,
// 100.)
}
else {
// ( , . .
// myNumber 200.)
}

if ,
else .

, . JavaScript for, .
.
for ,
. for:
for (var i = 0; i < 5; i++){
// ( .)
alert("This is message: " + i);
}

. 0 var i = 0. , . . i < 5.
, i 5, ,
. i++
. ( .) ,
i 0, 1 . .
:
This is message: 0
This is message: 1

JavaScript

465

This is message: 2
This is message: 3
This is message: 4

, .
JavaScript .
, JavaScript . var,
:
var colorList = [];

add() :
colorList.add("blue");
colorList.add("green");
colorList.add("red");

.
, :
colorList[3] = "magenta";

, :
var color = colorList[3];


, JavaScript :
0, 1 . .

, for:
for (var i = 0; i < colorList.length; i++) {
alert("Found color: " + colorList[i]);
}

( 0) ( length, ).
, , ,
.
for JavaScript. , , , ,
JavaScript.

466

,
showMessage().
,
.
.

. ,
showMessage(), .
showMessage() , .
,
.
, ,
customMessage, :
function showMessage(customMessage) {
alert(customMessage);
}


.
.

, .
.
showMessage() (
1) :
showMessage("Nobody likes an argument.");

, .
, ,
. return, .
.
, .
, ,
( numberA numberB) :
function multiplyNumbers(numberA, numberB) {
return numberA * numberB;
}

"" "" , . , .

JavaScript

467

, :
// .
var result = multiplyNumbers(3202, 23405);
// , .
var message = "The product of 3202 and 23405 is " + result;
// .
showMessage(message);

, , ( JavaScript),
( alert()
). ,
.


, , JavaScript ,
-
. ,
JavaScript.
, , JavaScript "".
, . , ,
, , , , , . . .
JavaScript .
. , -

. , JavaScript- .
. JavaScript

-, .
, -, , .
-. HTML

- (. 4), JavaScript
. , -,
.

468


XMLHttpRequest, JavaScript, . "
XMLHttpRequest" 11. , -,
JavaScript.


JavaScript - ,
HTML. ,
.
, id .
:
<h1 id="pageTitle">Welcome to My Page</h1>

, ,
JavaScript.
JavaScript getElementById()
document. , document ,
HTML. , .
. getElementById()
-, HTML.

- ,
, . , , , .

document.getElementById() HTML, . HTML pageTitle:


var titleObject = document.getElementById("pageTitle");

<h1>, ,
titleObject. , .
HTML? ,
, . ,
, URL, ,
.
HTML, ,
. ,

JavaScript

469

, , , - , , . , , , -.
,
<h1>:
titleObject.innerHTML = "This Page Is Dynamic";

innerHTML titleObject (
<h1>) , .
innerHTML HTML,
. , JavaScript .
,
HTML, src,
<img>:
var imgObject = document.getElementById("dayImage");
dayImage.src = "cloudy.jpg";

style CSS:
titleObject.style.color = "rgb(0,191,255)";

DOM,
HTML. . 2.3.
2.3. HTML

className

class (.
. " " 1).
,
( ). , ,

innerHTML

HTML.
innerHTML , . :
HTML, .
, innerHTML
<b>Hi</b>. : innerHTML ,
HTML. ,
innerHTML <div>,
,

parentElement

HTML- , .
, <b> <p>,
<p>.

470

2.3 ()

style

CSS, HTML. style style


, . , myElement.style.fontSize.
style , ,

tagName

HTML
. , tagName <img> img


HTML ,
, getAttribute() setAttribute(),
, insertChild(),
appendChild() removeChild(). , HTML, . Mozilla http://developer.mozilla.org/en/DOM/element.


. " " ,
. , JavaScript.
, , .
. HTML . , . ( 6.)
, . (
9.) ,
.

,
. ,
. , -
JavaScript, jQuery, , , ,
,
.

, .
, ,
.

JavaScript

471

, - <img>:
<img id="dayImage" src="sunny.jpg" alt="The weather">

swapImage()
:
var imgObject = document.getElementById("dayImage");
imgObject.onclick = swapImage;

, :
imgObject.onclick = swapImage();

swapImage() (
), .
, .
, <img>,
swapImage(). <img>
src,
(. 2.3):
// .
var dayTime = true;
// , onClick.
function swapImage() {
var imgObject = document.getElementById("dayImage");
//
// .
if (dayTime == true) { dayTime = false;
imgObject.src = "cloudy.jpg"; }
else { dayTime = true;
imgObject.src = "sunny.jpg"; }
}

.
, . ,
event e:
function swapImage(e)
...
}

. ,
onMouseMove ( . " "
6).
.
. -

472

HTML. HTML JavaScript


.

1

CamelCase , , onLoad
onMouseOver. , JavaScript,
, . . onload onmouseover.

. 2.3. onClick .
,


swapImage() -
.
, . (inline function).
onClick:
var imgObject = document.getElementById("dayImage");
imgObject.onclick = function() {
// swapImage() .
if (dayTime == true) {
dayTime = false;
imgObject.src = "cloudy.jpg";
}

. http://ru.wikipedia.org/wiki/Camel_case. . .

JavaScript

473

else {
dayTime == true;
imgObject.src = "sunny.jpg";
}
};

,
, . .

, . . , .
,
. , . ( . " " 7 , ,
.)

, , . onLoad ,
.
. , ,
. :
<script>
window.onload = function() {
alert("The page has just finished loading.");
}
</script>

.
, ,
<head> JavaScript.

474

A
Accessible Rich Internet Applications (ARIA) 110
Ai->Canvas, 218

J
JavaScript 38
jPlayer, 201
JSON 338

C
Canvas-text, 232
Cascading Style Sheet, CSS 278, 435
Cookies 327
Cool URL 426

E
Excanvas, 231
ExplorerCanvas, 231

F
File API 341
Flash 188, 201
FlashCanvas Pro, 233
FlashCanvas, 233

G
Geolocater, 400
Google Maps 407
Google Web Fonts 292

L
LeanBack Player, 204

M
MIME 185
Modernizr 57

P
PathJS, 426
Polyfill 60

R
Resource Description Framework (RDFa) 111
Rgraph, 254
Rich Snippets Testing Tool (RSTT) 122

U
URL 228

H
h5o, 93
hashbang 425
html5Widgets, 153, 161, 162

V
VideoJS, 201
VideoSub, 203

476

W
Webforms2, 153

X
XForms 133
XMLHttpRequest, 373

154, 156
:
272
261
263
262
176
177
183
189

91, 96
97
:
52
55

42
- 351
- 412
- 390
391
393
- 328
339
335
334
176
179

Y
YouTube 176, 190

Z
ZingChart, 254

175
307
239
183
190
JavaScript 201
197
140
104, 160
411

397
405
241, 245, 314

104, 160
336

:
245
244
60

442
73
236
346

165
423

117, 160
406
278
438
329
138
316
37
294
296

80
88
439
401
97
352

268
331
208
214
406

352, 353
465
118
111
hCalendar 117
hCard 112

387
457
256
222
121

76, 84
138

477

458
460
460
317
72
75
140
162
122
126
137
157
:
138
138
159
40
284
142
143
144
145
146
147
:
41
255
259
274
:
223
230
371
220
213
211

40
308
308
313
311
122
147
:
171
169
:
230
223

478

351
126
208
73

68, 437
ID 442
441
440
443
- 64
310
388
:
336
337
333
336
138
83
, 66
203
:
94
93
106
166

38, 435, 436


240
296
107
140
313
158
241, 242, 313
313
313
:
color 161
date 161
datetime 161
datetime-local 161
email 156
month 161
number 146, 158

range 159
search 157
tel 158
time 161
URL 157
week 161
35
215
217, 320
219
219
219
219

306

346
342
, 343
341
346
211
138
142
311
133
:
linear-gradient() 315
radial-gradient() 316
rgba() 308
472

205
239
236
206

161
464

158
336

167
286
Google 292
294
289
295
287

:
<article> 71, 103
<aside> 76, 83, 103
<audio> 176, 177
<canvas> 206, 232
<datalist> 162, 163
<del> 108
<details> 88
<device> 176
<div> 62, 68, 69, 439
<embed> 50, 175
<fieldset> 137
<figcaption> 75, 103
<figure> 75, 103
<footer> 63, 69, 70

479

<form> 107, 137


<header> 69, 70, 80, 103
<hgroup> 72, 103
<iframe> 171
<input> 138, 142, 154, 345
<ins> 108
<legend> 137
<mark> 107
<meter> 166, 167
<nav> 63, 84, 103
<nobr> 51
<option> 138
<output> 106
<progress> 165
<section> 91, 103
<select> 138
<source> 187
<span> 68, 106, 203, 440
<summary> 88
<textarea> 138
<time> 63, 104
<track> 203
<video> 63, 176, 179, 239
<wbr> 51
96
97
63
193

37