Академический Документы
Профессиональный Документы
Культура Документы
-
2011
681.3.068
32.973.26-018.1
75
. .
75
:
.
.
ISBN 978-5-9775-0596-3
. ., 2010
, "-", 2010
.......................................................................................................................... 11
Web- ............................................................................................... 11
............................................................................................................................. 12
............................................................................ 13
........................................................................................................... 13
............................................................................................................................... 14
2. ........................................................................... 36
........................................................................................................................................... 36
....................................................................................................................................... 38
............................................................................................................................................ 39
........................................................................................................................................... 42
.................................................................................................. 42
................................................................................................................. 45
............................................................................................................................................ 46
................................................................................................................................. 47
? ................................................................................................................................... 47
3. ....................................................................................... 48
..................................................................................................... 48
.................................................................................................................................. 50
. ............................................................................. 51
? ................................................................................................................................... 54
4. .............................................................................. 55
Web- ........................................................................................... 55
.......................................................................................................................................... 56
- ................................................................................................. 56
..................................................................................... 57
................................................................................................................................. 60
......................................................................... 60
MIME ........................................................................................................................... 62
............................................................................................................ 63
............................................................................................................ 65
<AUDIO> <VIDEO> .......................................... 68
? ................................................................................................................................... 69
5. .......................................................................................................... 70
............................................................................................................................ 70
........................................................................................................ 75
........................................................................................................... 78
? ................................................................................................................................... 80
6. ..................................................................................... 81
................................................................................................................ 81
.......................................................................................................... 81
- WWW ..................................................................................................... 83
......................................................................................................... 85
...................................................................... 86
........................................................................................................... 87
-................................................................................................... 87
- .............................................................................................................. 88
......................................................................................................................... 90
.............................................................................................................................................. 91
? ................................................................................................................................... 92
II. WEB-.
CSS 3 ............................................................ 93
7. CSS................................................................................... 95
CSS................................................................................................................... 95
CSS .................................................................................................................... 96
........................................................................................................................... 101
........................................................................ 103
........................................................................................................... 105
................................................................................... 106
CSS ....................................................................................................................... 107
? ................................................................................................................................. 108
8. . .............................................. 109
..................................................................................................................... 109
, .............................................................................. 114
................................................................................. 116
............................................................................................................ 117
.......................................................................................................................... 118
. ...................................................................................... 120
Web-, 1 ........................................................................ 122
? ................................................................................................................................. 125
9. , ........................................ 126
.......................................................................................................... 126
..................................................................................................................... 127
............................................................................................................ 129
Web-, 2 ........................................................................ 131
...................................................................................................... 132
..................................................................................................................... 133
? ................................................................................................................................. 134
................................................................................................. 211
............................................................................... 211
....................................................................................................................................... 212
.......................................................................................................... 212
. ............................................................ 213
.................................................................................................................... 213
. .................................................. 215
....................................................................................................................................... 215
......................................................................................................................................... 217
....................................................................................................................................... 218
............................................................................ 218
.......................................................................................... 219
........................................................................................... 222
JavaScript .............................................................................. 223
Object ............................................................. 225
Web-. DOM ................................. 226
............................................................................ 227
................................................................................................. 228
JavaScript ............................................................................................................. 229
? ................................................................................................................................. 229
IV.
. ........................................... 283
17. ...................................................................... 285
Web- .................................................................................... 285
Web- ...................................................................................... 287
......................................................................................... 288
? ................................................................................................................................. 296
V. ....................................................................... 315
20. Web- .................................................... 317
Web- HTML ............................................................................. 317
Web- . ............................ 318
Web- .......................................................................... 320
Web- ........................................................................................................... 320
........................................................................................ 320
.................................................................................................................. 321
...................................................................................................... 322
............................................................................... 323
............................................................................................ 323
......................................................................................................................... 324
........................................................................................................................ 325
........................................................................................................... 325
, .................................................................. 326
....................................................................................................................... 328
......................................................................................................................... 329
................................................................................... 330
CSS,
.................................................................................................................. 330
....................................................................................... 331
HTMLElement,
.......................................................................................... 331
Element,
.................................................................................................................. 336
................................................................................ 336
Web-............................................................................................... 337
.................................................................................................... 338
Web- ......................................................................................................... 338
Web-, ............................................................ 339
? ................................................................................................................................. 345
10
.............................................................................................. 382
......................................................................... 383
............................................................................................. 384
........................................................................................................................... 386
Web- ........................................................................... 386
.................................................................................................................. 391
. CSS................................................................................. 393
.................................................................................................................. 394
................................................................................................. 394
........................................................................................ 396
.......................................................................................................... 397
CSS................................................................................................................... 401
.............................................................................................. 405
Web- . !
Web-
, , , Web-
HTML, , CSS. JavaScript, Web-
, Web-.
, ( HTML
). Web- .
,
: HTML 5 CSS 3. Web- .
Web- - .
Web-.
.
( ).
.
Web- .
, , - .
, ... "" , "", , .
-?
Web-, , , ""
-, HTML 5 CSS 3, -
12
;
Web-
;
, Web-
.
Web-
Web-. Web, ...
:
HTML Web-.
CSS Web-.
HTML 5 CSS 3, Web-
.
Web-, JavaScript -
Web-.
Ext Core , Web-.
Web- .
-
JavaScript.
Web-,
Web-.
Web- HTML 5.
13
Web-
HTML CSS. ,
Web-.
, ,
... ?
!
,
Windows.
Firefox 3.6.* Web-. .
Opera 10.52 Apple Safari 4.* Web-.
.
.
HTML, CSS JavaScript. , .
!
HTML, CSS JavaScript.
.
(<>) ,
, , , .
Web-, , , .
:
<MAP NAME="< >">
</MAP>
< > .
:
<FORM>
<, >
</FORM>
14
([]) :
<LEGEND [ACCESSKEY="< >"]>< ></LEGEND>
ACCESSKEY , .
(|) ,
:
SHAPE="rect|circle|poly"
SHAPE
: rect, circle poly.
, .
:
var s = "<LI><CODE><A HREF=\"" + aDataBase[i].url + "\">" +
aDataBase[i].name + "</A></CODE></LI>";
, .
.
, .
, -
(. .), , .
-
.
, .
.
.
,
"-", ,
.
" -" .
Web- Firefox, Opera, Chrome Safari
Ext Core, , .
.
, , .
Web-.
HTML 5
1.
Web-.
Web 2.0. Web-
2.
3.
4.
5.
6.
Web-.
Web 2.0. Web-
, WWW, Web-, Web-, Web- ,
. , Web Web-?
. , Web- Web-,
Web-, HTML 5
, . , ...
Web-
... , Web-,
? .
1. -.
2. Web-.
3. Web-.
.
, , -
18
I. Web-. HTML 5
. ,
Intel Microsoft Windows ( ,
). -
Samsung. -,
.
-
-. Web , .
Web-
Web- , (, )
.
, -. : . , , " "
-.
, , Adobe Flash Microsoft ActiveX.
-, Web-,
World Wide Web Consortium ( ),
W3C. , Web- http://www.w3.org. .
- ,
. ? , , , . , WWW.
. ,
, . .
Web-
Web-.
Web- , -
, .
Web- "" .
, -
. :
, ,
, .
Web- ,
Web-, .
19
! (, -
...)
: , , , .
Web-. ?
Web- Web.
Web- .
, .
Web- . Web-
, .
Web- -
. Web.
? - Web-, , W3C (. 1.1).
, - http://www.w3.org.
?
Web- -. -
Web- .
Web- , -.
Web-
, . , Web Web-, , .
Web- . , -
, ,
.
!
Web- .
Web- , Web-.
, , . !
Web- .
Web 2.0
.
20
I. Web-. HTML 5
Web- -
.
-, Web Web-.
Web-.
Web- ,
, .
, Web- ,
.
Web-
. Web- .
Web- .
Web 2.0.
, Web-,
21
. , , Web-, .
Web 2.0 , " " Web-. Web- ( "" Web- W3C, , ...). .
, Web. , Web, , Web- . , , , , , .
.
Web- ,
, . ( ) -
.
. - Web- , , Web-.
.
.
Web- - . ,
HTML, ,
- , , .
Web-, , Web- Ext Core, - http://www.extjs.com/products/core/docs/ . 1.2.
, Web- -
, .
. Web-, , .
-
. .
. -
"" .
Web- Web 2.0 !
- ? - "
" W3C? !
22
I. Web-. HTML 5
:
Web- Ext Core.
, .
? Web- Web-?
?
. -
Web- Web-, .
- . ? , ( ),
Web-, ,
(-). ,
, "" .
23
? -,
, , . , , , ,
. .
:
, - , , , , . .
Web- Web-. ; - Web-, , , .
,
. ,
.
. ""
. .
.
, ,
. , . , , ,
- . ,
.
Web- Web-, . ; , ,
, . .
. .
, ?
-.
, , ,
, -, , .
- :
- -, ;
, , ,
, . ( ).
24
I. Web-. HTML 5
-.
- http://www.somesite.ru/folder1/file1.htm . http://www.somesite.ru - -,
Web-, /folder1/file1.htm .
- http://www.othersite.ru -
Web-. (Web), .
user@mail.someserver.ru - (mail.someserver.ru) (user).
- . 6, Web-, , . Web-
"".
Web- Web-
, - . , -
. ,
.
WWW Web, Web-. .
. ,
- ...
Web- htm html (,
, htm[l]). Web- .
Web- Web-, (
6). , Web- , , , .
! "" Web-, .
, , Web-, , Web. Web-,
"".
, , Web-, , . ,
, Web- . ,
.
25
- , Web-
. .
http://www.somesite.ru/page1.htm page1.htm,
Web-.
http://www.somesite.ru/chapter2/page6.htm
page6.htm, chapter2,
Web-.
http://www.somesite.ru/downloads/others/archive.zip
archive.zip, others, downloads, , , Web-.
-, . - , , http://www.somesite.ru. Web-?
?
Web- . Web- , -
, . Web-
default.htm[l] index.htm[l],
Web-.
, - http://www.somesite.ru, Web-
Web- , Web-.
Web- ,
"" Web-.
- http://www.somesite.ru/chapter2/.
Web- Web- ,
chapter2, Web-.
Web- Web- . Web , , , Web. HTML 5, Web .
Web-.
HTML 5
Web- : ,
, , , .
. -, Web- ,
, Windows! (, .)
Web-
HTML (HyperText Markup Language, ).
I. Web-. HTML 5
26
, , ,
.
HTML , 1992 .
... HTML .
HTML 5, Web- .
- .
HTML
HTML .
Web-. Windows .
, Web-
Web-. Web-, HTML,
Microsoft Word, .
, Web- Web- . , , Web- Adobe Dreamweaver.
.
HTML.
(, ,
), 1.1.
1.1
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE> Web-</TITLE>
</HEAD>
<BODY>
<H1> HTML</H1>
<P> Web- , Web-!
-,
Web-. ,
<STRONG>HTML</STRONG>.</P>
</BODY>
</HTML>
1.1.htm.
.
1. HTML- UTF-8.
UTF-8.
27
2. . txt,
1.1.htm.txt.
, Web- ! Web .
Windows Web Microsoft Internet Explorer. Internet Explorer
HTML 5; 9,
. HTML 5 Mozilla Firefox,
Opera, Apple Safari Google Chrome, -
.
Web- Web- ( Firefox)
(. 1.3).
. 1.3. Web-
? Web-, "" ,
,
, ( "HTML").
"" , !
, 1.1.htm. HTML- ( 1.2).
1.2
<H1> HTML</H1>
<P> Web- , Web-!
-,
Web-. ,
<STRONG>HTML</STRONG>.</P>
. ,
< >. ?
I. Web-. HTML 5
28
HTML, .
HTML- Web-: , , .
<H1> </H1>, .
, , . <H1>
, , . </H1> ""
. ,
, . .
HTML < >,
, . ,
; /, < .
<H1> </H1> HTML
<H1>. .
. <P> Web- ;
.
. Web-, ; Web-
. ( .)
<STRONG> . , <STRONG> <P>. , <STRONG> ( <P>).
"Web-" . <EM>:
<P> Web- ,
<EM>Web-</EM>!
. . .
) . HTML
.
<, >, / , -
.
, , <
29
. , HTML,
.
1.2 HTML-,
, . , <STRONG> <P>, . <P>, , <BODY>,
"" <HTML>. ( <BODY> <HTML> .)
HTML .
Web- , , "" "". ,
<STRONG> <P>, , .
"Web-",
<EM>, <STRONG>. :
<P> Web- ,
<EM><STRONG>Web-</STRONG></EM>!
. . .
. , <STRONG> <EM>.
! , . ,
, ""
.
HTML- (
):
<P> Web- ,
<EM><STRONG>Web-</EM></STRONG>!
. . .
Web- Web- .
, Web- ""
Web-. !
. ,
, , . , ,
, , . , <EM>
<P> , <STRONG> .
, (, , ).
Web-, , ,
, . Web-,
30
I. Web-. HTML 5
, , . ,
.
,
. <P>, <EM> , . . <P>.
<STRONG> ,
<EM>, , , <P>. Web-
.
HTML- , ( 1.3). Web- .
1.3
<BODY>
<H1> HTML</H1>
<P> Web- , Web-!
-,
Web-. ,
<STRONG>HTML</STRONG>.</P>
</BODY>
Web-
HTML- Web-.
1.4.
1.4
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE> Web-</TITLE>
</HEAD>
<BODY>
. . .
</BODY>
</HTML>
, .
, Web. , Web , .
31
Web- <BODY>.
Web-, , .
.
<HEAD> Web-. ( , <H1>!) Web-,
Web-.
, Web- <HTML>,
() .
Web- : .
HTML.
Web-
Web-,
. ? ?
. Web-,
Web-, .
, , Web. HTML-, , .
, Web-.
Web-, Web, "" ( Web). <TITLE> Web-:
<HEAD>
. . .
<TITLE> Web-</TITLE>
</HEAD>
, , , Web-. ""
<META>:
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
. . .
</HEAD>
I. Web-. HTML 5
32
, . Web-.
, <META>? , ! ,
. HTML-,
, ,
Web- - , .
.
, HTML Web-. ""
<HTML>. , , ... :
<!DOCTYPE html>
<!DOCTYPE> , -, HTML,
Web-, -, . , <!DOCTYPE>, HTML 5, "" "" HTML 4.01 ( HTML,
) XHTML ( HTML, ).
, <!DOCTYPE html>, Web, HTML 5. ! !
HTML-
, , HTML. HTML Web-.
<META>, Web-:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
, < >, ,
- . , . ,
<META> ,
Web-, .
, ,
, . , HTTP-EQUIV
"Content-Type", ,
. CONTENT "text/html; charset=utf-8",
, Web-, , UTF-8.
. . -
33
; , .
HTTP-EQUIV CONTENT <META>
... ID,
HTML, , :
<H1 ID="header1"> HTML</H1>
. ,
.
,
Web- , , .
.
.
,
.
, Web- .
HTML. I
.
,
, . (
), : Web-
Web-.
Web-
Web- . , : Microsoft Internet Explorer, Mozilla Firefox,
Opera, Google Chrome Apple Safari.
I. Web-. HTML 5
34
, HTML, CSS (
) JavaScript (, Web-).
HTML 5 CSS 3 ( CSS):
Mozilla Firefox 3.5;
Opera 9.5;
Google Chrome 2.0.158.0;
Apple Safari 4.0.
HTML 5 CSS 3
. , Web-, , .
Web-
Web-,
Web-, Web-. ,
, Web- -
. Web- ,
Web- Web-. .
Web-.
, . Windows XP/2003/Vista/Se7en
Web- Microsoft Internet Information Services.
,
.
Internet Information Services, ,
Windows. , ,
" ". , Web- Microsoft
Web-, C:\Inetpub\wwwroot. Web-.
Internet Information Services,
. , Web- Apache,
.
35
, Web- , .
.
, .
Web- 1.1.htm.
Web- http://localhost/1.1.htm. - http://localhost
( ), /1.1.htm 1.1.htm,
Web-.
, Web- Web-
(. . 1.3). , Web- .
?
Web-,
Web 2.0, , WWW ,
HTML, Web-,
Web- Web-. , ...
- , HTML. : , , . ,
"".
"" Web-, Web 2.0, - HTML.
, Web- Web-. .
HTML
,
.
, , .
"", - . "" ,
, , .
. ,
, , , . ,
"" .
1, HTML <P>. :
<P> .</P>
<P> . , Web-
.</P>
HTML
.
Web-, ; Web .
Web-,
. Web- ,
.
2.
37
Web-:
;
;
, ,
Web-. (
HTML- , .)
,
.
. Web-
Web- HTML CSS.
HTML-, 2.1.
2.1
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE> HTML CSS</TITLE>
</HEAD>
<BODY>
<P> HTML CSS</P>
<P> Web- , Web-!
-,
Web-. , HTML
CSS.</P>
<P> HTML :</P>
<P>HTML ( . HyperText Markup Language
)
.</P>
<P>, ...</P>
<P>HTML Web-
:</P>
<P>;</P>
<P>;</P>
<P>;</P>
<P>;</P>
<P>;</P>
<P> ;</P>
<P>- .</P>
<P> HTML</P>
<P>. . .</P>
<P> HTML</P>
I. Web-. HTML 5
38
Web-. .
, "" , Web-.
HTML-, index.htm.
1, Web- Web- index.htm[l] ( default.htm[l], ).
!
, Web-, . - - , .
Web- Web-
, . - , .
Web- . ,
, ...
,
: , , .
HTML . , , , .
"" .
, , HTML , ,
.
, 1 6.
(1) . , Web-. Web-
.
(2) .
. Web-
, .
(3) ; . Web-
.
, (4 6)
, , . Web
, , , .
2.
39
Web-
, .
Web-, .
HTML <Hn>, n . ( 2.2).
2.2
<H1> Web-, </H1>
<H2> </H2>
<H3> </H3>
<H4> </H4>
<H5> </H5>
<H6> . ,
!..</H6>
Web-.
Web- , .
, Web- index.htm.
( 2.3).
2.3
<H1> HTML CSS</H1>
. . .
<H2> HTML</H2>
. . .
<H2> HTML</H2>
<P> HTML-
<H1> <H2>. Web- Web- .
, -
, , .
, . , .
- , .
, , , .
I. Web-. HTML 5
40
Web- .
.
.
HTML . , , <LI>.
<UL> ( ) <OL> ( ) ( 2.4).
2.4
<UL>
<LI>
<LI>
<LI>
</UL>
. . .
<OL>
<LI>
<LI>
<LI>
</OL>
.</LI>
.</LI>
.</LI>
.</LI>
.</LI>
.</LI>
, .
. "" ( ) ,
. HTML-, , </LI>. "" ,
<LI> "" . ,
, .
2.5 HTML-, ,
. , HTML-, .
2.5
<UL>
<LI> .</LI>
<LI> .
<UL>
<LI> .</LI>
<LI> .</LI>
<LI> .</LI>
</UL>
2.
41
</LI>
<LI> .</LI>
</UL>
HTML . .
HTML , .
<DL>. " ",
<DT>, <DD> ( 2.6).
2.6
<DL>
<DT></DT>
<DD>, Web-</DD>
<DT></DT>
<DD> , </DD>
<DT></DT>
<DD> , Web-
</DD>
</DL>
, Web, Web-
, .
Web- , HTML. ( 2.7).
2.7
<UL>
<LI>;</LI>
<LI>;</LI>
<LI>;</LI>
<LI>;</LI>
<LI>;</LI>
<LI> ;</LI>
<LI>- .</LI>
</UL>
Web- .
42
I. Web-. HTML 5
Web-, , . - .
HTML <BLOCKQUOTE>,
HTML-, ( 2.8). Web .
2.8
<BLOCKQUOTE>
<P> .</P>
<P> .</P>
</BLOCKQUOTE>
, <BLOCKQUOTE> . ( ).
HTML .
, , ( 2.9).
2.9
<BLOCKQUOTE>
<P>HTML ( . HyperText Markup Language
)
.</P>
</BLOCKQUOTE>
. Web, . .
!
Web- ( 2.10) <TITLE>.
2.10
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE> TITLE</TITLE>
</HEAD>
2.
43
<BODY>
<H1> TITLE</H1>
<P> TITLE Web-.
.</P>
<H6>:</H6>
<P>!HEAD!
!TITLE! Web-!/TITLE!
!HEAD!</P>
</BODY>
</HTML>
<TITLE> ,
:
!HEAD!
!TITLE! Web-!/TITLE!
!/HEAD!
< >, , 1, , . 3 , , .
t_title.htm Web. ?
. 2.1, Web-
. , HTML- ! ?
, Web-
,
I. Web-. HTML 5
44
. ,
. Web- : , .
, .
Web- ! ,
.
, , ,
, HTML <PRE>. ( 2.11).
2.11
<PRE> ,
Web-
.</PRE>
.
:
(
, , );
( );
Web-
, . - Web-.
(, -, Web-...);
HTML- (
3 5).
.
HTML- Web- t_title.htm ,
( 2.12).
2.12
<!DOCTYPE html>
<HTML>
. . .
2.
45
<H6>:</H6>
<PRE>!HEAD!
!TITLE! Web-!/TITLE!
!HEAD!</PRE>
</BODY>
</HTML>
,
,
.
(http://www.lib.ru), .
Web-... Web- index.htm ,
HTML. ?
HTML ,
<HR>:
<P> .</P>
<HR>
<P> .</P>
46
I. Web-. HTML 5
HTML Web, -
( Web-). Web- " ".
,
Web-.
. HTML-
index.htm ( 2.13).
2.13
<P> Web- , Web-!
-,
Web-. , HTML
CSS.</P>
<HR>
<P> HTML :</P>
. . .
<P>, ...</P>
<HR>
<P>HTML Web- :</P>
. 2.3. , ?
Web- (
, , .). HTML
2.
47
<ADDRESS>. , <P>,
:
<ADDRESS> Web-: , ,
.</ADDRESS>
HTML, ,
Web-, Web.
HTML-, Web Web-. ,
Web- .
<!--
--> . , HTML:
, . !
:
<!-- . Web-. -->
HTML- Web- , ,
. :
<!-- . -->
<!-- Web-, HTML. -->
?
Web- "" , , , ,
. , .
,
. HTML , . ,
, , < >.
Web-,
"". HTML, Web-.
Web- Web-.
. , , .
.
, HTML 1. <STRONG> <EM>, .
<STRONG> <EM> , . , ,
Web-. , , .
<STRONG> , <EM> ( 3.1).
3.1
<P><STRONG>
!</STRONG>
<P><EM>
,
!</P>
. </EM>
.</P>
HTML (. 3.1),
:
;
(, ,
, ;
. 2).
3.
49
3.1. HTML,
Web-
<ABBR>
<ACRONYM>
. ,
<ABBR>
<CITE>
<CODE>
<DEL>
, Web-
<DFN>
<EM>
<INS>
, Web-
<KBD>
<Q>
. ,
<CITE>
<SAMP>
, -
<STRONG>
<TT>
, - .
, <SAMP>
<VAR>
, ,
, , ( 3.2).
Web-, , "", .
Web- .
3.2
<P> HTML Web-.
<STRONG> !</STRONG><P>
<P> <CODE>P</CODE> <DFN></DFN> HTML.</P>
<P> <ABBR>HTML</ABBR> <INS></INS>
Web-.</P>
<P> Web- -
<KBD>http://www.w3.org</KBD>.<P>
<STRONG> <EM>.
Web-.
50
I. Web-. HTML 5
Web- index.htm
, . 3.1 ( 3.3).
3.3
<P> Web- , Web-!
-,
Web-. , <DFN>HTML</DFN>
<DFN>CSS</DFN>.</P>
. . .
<P><CODE>!DOCTYPE</CODE>, <CODE>BODY</CODE>, <CODE>EM</CODE>,
<CODE>HEAD</CODE>, <CODE>HTML</CODE>, <CODE>META</CODE>, <CODE>P</CODE>,
<CODE>STRONG</CODE>, <CODE>TITLE</CODE></P>
: !
!
Web-
, . . . . Web 2 <ADDRESS>:
<ADDRESS> . , 2010 .</ADDRESS>
, . ,
, .
?
, , <ADDRESS>: ,
.
. ( <ADDRESS> , . . .) .
HTML. , , , . <BR>:
<P> <BR>.</P>
Web-.
, .
:
<ADDRESS> .<BR>, 2010 .</ADDRESS>
3.
51
. 3.1.
, , .
Web- ,
Web-.
Web- t_title.htm
<TITLE>. ?
< >, HTML. . , .
- ?
, .
HTML , ,
, , , . , Web- "", ,
Web-.
HTML & ; ( ). . , < <, > >.
( 3.4).
3.4
<!DOCTYPE html>
<HTML>
. . .
<BODY>
. . .
<H6>:</H6>
<PRE><HEAD>
<TITLE> Web-</TITLE>
<HEAD></PRE>
. . .
</BODY>
</HTML>
52
I. Web-. HTML 5
HTML
( )
—
( )
–
"
"
&
&
<
<
>
>
©
®
“
«
‘
…
”
»
’
€
. 3.2
. , . Web- .
, -
. , . :
<P> — .<P>
, —
.
3.
53
, ,
. :
<ADDRESS> .<BR>© , 2010 .</ADDRESS>
HTML , Unicode, .
&#< >;.
? .
, Windows. (. 3.2).
. 3.2. ( )
, ,
. ,
. :
Alt+< >. - !
!
: Alt+< > , .
, ,
©, 0169 (. . 3.2):
<ADDRESS> .<BR>© , 2010 .</ADDRESS>
HTML. .
54
I. Web-. HTML 5
?
. , . , HTML. .
HTML . . Web , . HTML 5.
. WWW.
Web- ( ). , Web. ,
. , Web-, ,
Web- , !
. - HTML 5, .
.
Web-
, : HTML-
, - ! - ...
, , . - .
HTML . ,
. HTML- Web-
, -. -, Web Web- ,
- Web- , .
, - , Web- ,
Web-.
1 , Web- . Web .
56
I. Web-. HTML 5
-
. Web- . WWW , .
, . , , .
GIF (Graphics Interchange Format, )
"" . 1987 1989 . , .
. -, GIF "" ;
"", ""
. -, GIF- , ( GIF). -, -
(, , .).
GIF
(, . .). ,
GIF- 256 ,
.
GIF Web- (
, . .) .
JPEG (Joint Photographic Experts Group,
) 1993
. .
JPEG, GIF, , .
, "" .
4.
57
Web-
<IMG>. Web- Web-, <IMG>.
1 HTML, .
, . . <IMG> .
SRC - .
:
<IMG SRC="image.gif">
Web- , image.gif,
, Web-.
:
<IMG SRC="/images/picture.jpg">
Web- ,
picture.jpg, images, Web.
:
<IMG SRC="http://www.othersite.ru/book12/author.jpg">
Web- , - http://www.othersite.ru/book12/author.jpg, . .
Web-.
- , WWW, 6.
, Web- . , , Web-
58
I. Web-. HTML 5
. , " ",
, , .
.
-, :
<IMG>,
-, Web- , ,
:
<P><IMG SRC="/images/picture.jpg"></P>
. , Web-.
@, image.gif. , , HTML- 4.1.
Web- index.htm <IMG> Web-. Web- Web-.
HTML- 4.1.
4.1
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE> IMG</TITLE>
</HEAD>
<BODY>
<H1> IMG</H1>
<P> IMG Web-
.</P>
<H6>:</H6>
<PRE><P><IMG SRC="image.gif"></P></PRE>
<H6>:</H6>
<P><IMG SRC="image.gif"></P>
</BODY>
</HTML>
4.
59
, Web- .
HTML- .
<IMG>,
.
Web- , Web Web- .
Web- Web-.
.
. Web- , , , . , Web-
, . Web-
.
. -,
. -, ,
, .
,
. <IMG> ALT, .
I. Web-. HTML 5
60
, , :
<P><IMG SRC="image.gif" ALT=" "></P>
-. 6, - -.
...
, , .
Web- - , Web-.
Web- -
HTML-, " " . , HTML 5 ( ) Web-, .
? , <IMG>!
!
HTML 5. ( , <OBJECT>) .
,
. -, Web- , . (
Web-, Web-, ...)
Web-
. ""
- () .
, .
, - .
. (
4.
61
) ,
.
, Web- Web-.
WAV (WAVe, ) "" . -
Microsoft 90- .
wav.
OGG . -
Xiph.org - .
ogg ( ), oga () ogv (); .
MP4 "". Motion Picture Expert
1989 - .
mov.
, Web-.
PCM (Pulse-Coded Modulation, - )
. . .
Vorbis . Xiph.org ( OGG) 2002 .
.
AAC (Advanced Audio Coding, )
I. Web-. HTML 5
62
,
. 4.1.
4.1.
, Web-,
Web-
Firefox
Opera
Safari
Chrome
,
WAV-PCM
OGG-Vorbis
MOV-AAC
*
,
OGG-Vorbis
OGG-Theora
MOV-AAC
MOV-H.264
MP4-AAC
MP4-H.264
, Web- . -
Web- ...
MIME
: Web-, , - , , . . , , , -. , Web- Web ,
.
, , MIME (Multipurpose Internet Mail Extensions,
). MIME , , , Web-. (
Web-) MIME ,
, , , .
Web- MIME text/html. GIF
MIME image/gif. MIME application/
x-msdownload, ZIP application/x-zip-compressed. MIME
.
MIME .
, Web- . , Web- -
4.
63
. Web- ,
, . . . ,
MIME .
. 4.2 MIME , Web- .
4.2. MIME ,
Web-
MIME
WAV
audio/wave
audio/wav
audio/x-wav
audio/x-pn-wav
OGG
audio/ogg ( )
video/ogg ( )
application/ogg
MP4
video/mp4
QuickTime
video/quicktime
, MIME. .
, . ,
HTML 5 Web-.
Web- HTML 5
<AUDIO>. - , ,
SRC :
<AUDIO SRC="sound.wav"></AUDIO>
<AUDIO>, Web-
, .
( Web-;
Web- III.) Web , , , .
<AUDIO>, .
<AUDIO> Web-. Web- . ,
64
I. Web-. HTML 5
, ( ).
Web- .
, <AUDIO> AUTOPLAY. : , ( ):
<P> !</P>
<AUDIO SRC="sound.ogg" AUTOPLAY></AUDIO>
Web- (, ,
, ). <AUDIO>
CONTROLS, Web- Web, <AUDIO>,
. ,
:
<P> , .</P>
<AUDIO SRC="sound.ogg" CONTROLS></AUDIO>
AUTOBUFFER <AUDIO>
, AUTOPLAY. , Web Web- .
,
Web- .
WAV-PCM sound.wav.
, , , HTML- 4.2
, .
Web- index.htm <AUDIO>.
Web-, HTML- 4.2.
4.2
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE> AUDIO</TITLE>
</HEAD>
<BODY>
<H1> AUDIO</H1>
<P> AUDIO Web- .</P>
<H6>:</H6>
<PRE><AUDIO SRC="sound.wav"
CONTROLS></AUDIO></PRE>
4.
65
<H6>:</H6>
<AUDIO SRC="sound.wav" CONTROLS></AUDIO>
</BODY>
</HTML>
Web- t_audio.htm.
( sound.wav) , Web ( t_audio.htm ). Web Web- (. 4.2).
, , .
.
Web- <VIDEO>. - SRC
:
<VIDEO SRC="film.ogg"></VIDEO>
, Web- Web-,
, . <VIDEO> ,
I. Web-. HTML 5
66
, .
Web-
.
<AUDIO>, <VIDEO> Web- AUTOPLAY, CONTROLS AUTOBUFFER:
<VIDEO SRC="film.ogg" AUTOPLAY CONTROLS></VIDEO>
,
(
Web-). ,
. POSTER <VIDEO>;
- :
<VIDEO SRC="film.ogg" CONTROLS POSTER="filmposter.jpg"></VIDEO>
-,
filmposter.jpg.
, ? .
OGG film.ogg.
, , , HTML .
, ,
, . SUPER , - http://www.erightsoft.com/
SUPER.html. ,
OGG.
4.
67
.
"". , ; ,
68
I. Web-. HTML 5
. ,
.
<AUDIO> <VIDEO>
! ,
Web- . ,
- , Web-, Web- " ". ?
HTML 5
<AUDIO> <VIDEO> . Web , .
<AUDIO> <VIDEO>, .
1. <AUDIO> <VIDEO> , . . SRC .
2. <AUDIO> <VIDEO> <SOURCE>, - .
<SOURCE> - ,
MIME. SRC TYPE :
<VIDEO>
<SOURCE SRC="film.ogg" TYPE="video/ogg">
<SOURCE SRC="film.mov" TYPE="video/quicktime">
</VIDEO>
<VIDEO> ,
: OGG, QuickTime. Web-,
OGG, , Web, QuickTime, .
, MIME (, , TYPE
<SOURCE>) . Web-
, , .
. MIME
.
Web- <AUDIO> <VIDEO>?
Web- . ,
- (, Web-).
<AUDIO> <VIDEO> <SOURCE> (
), , 4.4.
4.
69
4.4
<VIDEO>
<SOURCE SRC="film.ogg" TYPE="video/ogg">
<SOURCE SRC="film.mov" TYPE="video/quicktime">
Web-
HTML 5. .
</VIDEO>
, , . <AUDIO>
<VIDEO> , .
- HTML 5 .
?
Web- ,
- . HTML 5.
.
, Web- , - .
Web-. .
, ? !
,
, . .
.
HTML ? , .
.
HTML .
HTML- <TABLE>
:
<TABLE>
</TABLE>
HTML Web-. ,
: , , , - .
. ( , ,
, ...)
.
<TR>; . <TR>
<TABLE> ( 5.1).
5.1
<TABLE>
<TR>
5.
71
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
, <TD>
<TH>. , , "" . <TD> <TH>
<TR>, ,
( 5.2).
5.2
<TABLE>
<TR>
<TH></TH>
<TH></TH>
<TH></TH>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
, , ,
<TD> <TH> ( 5.3).
5.3
<TABLE>
<TR>
<TH> 1</TH>
<TH> 2</TH>
<TH> 3</TH>
</TR>
<TR>
<TD> 1.1</TD>
<TD> 1.2</TD>
I. Web-. HTML 5
72
<TD>
</TR>
<TR>
<TD>
<TD>
<TD>
</TR>
</TABLE>
1.3</TD>
2.1</TD>
2.2</TD>
2.3</TD>
,
<TD> <TH> ( 5.3).
, , .
- ,
3 . , , <EM>; ( 5.4).
5.4
<TABLE>
. . .
<TR>
<TD> <EM>1.1</EM></TD>
<TD> <EM>1.2</EM></TD>
<TD> <EM>1.3</EM></TD>
</TR>
. . .
</TABLE>
:
<TD><IMG SRC="picture.jpg" ALT=" "></TD>
,
. 2 , . <TD> <TH>
( 5.5).
5.5
<TD>
<H4> </H4>
<P> ,
.</P>
<P> ,
.</P>
<P><IMG SRC="picture.jpg" ALT=" "></P>
<P> <STRONG> </STRONG> .</P>
</TD>
5.
73
HTML- .
,
( ).
HTML-, , .
HTML.
: , , , -
.
, Web .
Web- (
).
,
.
.
.
.
Web-, "" . ( Web- . 1.) , , , . II.
, HTML- .
, Web-
.
<TR> <TABLE>. -
<TABLE> ( , ) .
<TD> <TH> <TR>. -
<TR> .
<TD> <TH>.
- , Web-
. -
, (HTML-
).
, . . Web index.htm , HTML
. .
5.6 HTML- Web- index.htm,
.
74
I. Web-. HTML 5
5.6
. . .
<P>, ...</P>
<HR>
<P> HTML:</P>
<TABLE>
<TR>
<TH> HTML</TH>
<TH> </TH>
<TH></TH>
</TR>
<TR>
<TD>1.0</TD>
<TD>1992</TD>
<TD> </TD>
</TR>
<TR>
<TD>2.0</TD>
<TD>1995</TD>
<TD> </TD>
</TR>
<TR>
<TD>3.2</TD>
<TD>1997</TD>
<TD> </TD>
</TR>
<TR>
<TD>4.0</TD>
<TD>1997</TD>
<TD>"" </TD>
</TR>
<TR>
<TD>4.01</TD>
<TD>1999</TD>
<TD> , </TD>
</TR>
<TR>
<TD>5.0</TD>
<TD>?</TD>
<TD> </TD>
</TR>
</TABLE>
<P>HTML Web- :</P>
. . .
5.
75
, . Web- , , .
II, ( Web-) .
HTML .
, .
, <CAPTION> . , , , <TABLE> ( 5.7).
5.7
<TABLE>
<CAPTION> </CAPTION>
<TR>
<TH> 1</TH>
<TH> 2</TH>
<TH> 3</TH>
</TR>
. . .
</TABLE>
, . - ,
3 :
<CAPTION><STRONG> <STRONG></CAPTION>
<CAPTION> <TABLE>
. , HTML- Web- .
, HTML
:
, , "";
I. Web-. HTML 5
76
, , ;
, "" (
"" ).
<THEAD>, <TBODY>, <TFOOT>. ,
<TABLE> <TR>, ,
( 5.8).
5.8
<TABLE>
<THEAD>
<TR>
<TH> 1</TH>
<TH> 2</TH>
<TH> 3</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD> 1.1</TD>
<TD> 1.2</TD>
<TD> 1.3</TD>
</TR>
<TR>
<TD> 2.1</TD>
<TD> 2.2</TD>
<TD> 2.3</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD> 2.1</TD>
<TD> 2.2</TD>
<TD> 2.3</TD>
</TR>
</TFOOT>
</TABLE>
Web- Web. .
, , - ,
. II.
<TABLE> SUMMARY,
. -
5.
77
,
HTML, Web- index.htm.
" HTML:", . . (""
, .)
5.9 HTML- Web-
index.htm, .
5.9
. . .
<P>, ...</P>
<HR>
<TABLE>
<CAPTION> HTML:</CAPTION>
<THEAD>
<TR>
<TH> HTML</TH>
<TH> </TH>
<TH></TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1.0</TD>
<TD>1992</TD>
<TD> </TD>
</TR>
. . .
<TR>
<TD>5.0</TD>
<TD>?</TD>
<TD> </TD>
</TR>
</TBODY>
</TABLE>
<P>HTML Web- :</P>
. . .
Web- Web-.
, " HTML" .
.
( Web-
).
78
I. Web-. HTML 5
HTML. .
, HTML- 5.10.
5.10
<TABLE>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
</TR>
<TR>
<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
<TD>10</TD>
</TR>
<TR>
<TD>11</TD>
<TD>12</TD>
<TD>13</TD>
<TD>14</TD>
<TD>15</TD>
</TR>
<TR>
<TD>16</TD>
<TD>17</TD>
<TD>18</TD>
<TD>19</TD>
<TD>20</TD>
</TR>
</TABLE>
,
. . 5.2 Web-.
. 5.3.
. ,
. ?
<TD> <TH>
. COLSPAN , ROWSPAN .
5.
79
10
11
12
13
14
15
16
17
18
19
20
. 5.2. ,
2+3
4+5
1+6
7
11
16
10
12+13+14+15
17
18
19
20
. 5.3. , . 5.2,
( )
, .
1. HTML <TD> (<TH>),
( ).
2. COLSPAN , .
3. <TD> (<TH>),
.
2 3 (. 5.10). , , 5.11.
5.11
<TR>
<TD>1</TD>
<TD COLSPAN="2">2 + 3</TD>
<TD>4</TD>
<TD>5</TD>
</TR>
4 + 5 12 + 13 + 14 + 15.
80
I. Web-. HTML 5
. ,
.
1. HTML ( <TR>), ( ).
2. <TD> (<TH>), .
3. ROWSPAN , .
4. <TD> (<TH>),
.
1 6 . 5.12 HTML- (
).
5.12
<TR>
<TD ROWSPAN="2">1 + 6</TD>
<TD COLSPAN="2">2 + 3</TD>
<TD COLSPAN="2">4 + 5</TD>
</TR>
<TR>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
<TD>10</TD>
</TR>
, <TD>,
, .
. ,
Web- ( Web- . 10), . ,
.
?
HTML, , ,
HTML. Web- , ...
Web-.
, , ( -). - Web Web-!
Web- : , , - . ,
, Web- . ( .)
Web- Web-.
? .
;
, " ". Web- Web-, - ( Web-).
,
.
,
.
. (, ) , , <A>. - Web-
HREF .
(. . <A>) Web-,
. . , , :
, Web- page125.html,
pages, , http://www.somesite.ru:
<A HREF="http://www.somesite.ru/pages/page125.html"> 125</A>
I. Web-. HTML 5
82
archive.zip,
, Web-, Web-
( Web-):
<A HREF="archive.zip"></A>
Web-
, .
:
<P><A HREF="22.html"> </A>,
<A HREF="24.html"> </A>.</P>
HTML- , , Web-.
, , , , 3.
:
<A HREF="http://www.somesite.ru/pages/page125.html">
<EM>125</EM></A>
<A> TARGET. ,
, Web-. , TARGET
"_blank", Web.
, ( ):
<A HREF="http://www.somesite.ru/pages/page125.html" TARGET="_blank">
125</A>
.
"" III IV, Web-.
6.
83
Web-:
;
, "" ( ),
- ;
, ( -
), - ;
;
Web-
" ".
, , . , , II.
- WWW
- 1. WWW
- , .
. : http://www.somesite.ru/pages/page125.html. Web-, , .
. - , ,
, Web-.
, Web, Web-, -, (- Web-
Web-).
-.
, ( ),
Web-. / (),
Web-, .
1. : ,
, Web- Web; Web-.
, -
/page3.html
page3.html, Web-.
-
/articles/article1.html
article1.html, articles,
Web-.
I. Web-. HTML 5
84
- ,
, "" Web- (, ,
Web-).
- Web-.
-.
-.
-
archive.zip
archive.zip, ,
Web-.
-
chapter3/page1.html
Web- page1.html, chapter3,
, Web-.
-
../contents.html
Web- contents.html, ,
, Web-. ( .)
- . ,
, , Web, .
-,
, .
!
Web-, Web-,
, -. , ,
,
-. (, , Web-,
-.)
-, , , Web Web-. , ,
Web-, tags. Web, HTML ( ),
( : , - ). index.htm
Web- .
6.
85
.
Web-, - ,
Web-. ,
, Web <Backspace> .
Web- , Web-
.
Web-, . Web- .
HTML-:
<P><A HREF="../index.htm"> Web-</A></P>
Web- Web-
, , HTML.
( 6.1).
6.1
<BLOCKQUOTE>
<P>HTML ( . HyperText Markup Language
)
. (<A HREF="http://ru.wikipedia.org/wiki/HTML"
TARGET="_blank"> </A>)</P>
</BLOCKQUOTE>
HTML ,
( ). , . -
.
, :
user@mailserver.ru
86
I. Web-. HTML 5
HTML, :
mailto:user@mailserver.ru
mailto .
:
<A HREF="mailto:user@mailserver.ru"> </A>
Web- .
"" .
HTML- :
<A HREF="mailto:user@mailserver.ru"></A>
. , .
HTML
. , .
, "" . , <Alt>, Web-
.
"" ACCESSKEY
<A>. ,
:
<A HREF="http://www.somesite.ru/pages/page125.html"
ACCESSKEY="d"> 125</A>
"" <D>. ,
, <Alt>+<D>.
. "" .
,
. , ,
.
<Enter>, Web- , .
<Tab>, Web- .
<Shift>+<Tab>, Web-
.
,
<Tab> <Shift>+<Tab>, -
6.
87
. , HTML- Web-.
TABINDEX <A>. 32 767
32 767 .
, -
. , 1, 2, 3 . .
, , , HTML- Web-.
TABINDEX .
,
.
.
:
<P><A HREF="page1.htm" TABINDEX="3"> 1</A></P>
<P><A HREF="page2.htm" TABINDEX="2"> 2</A></P>
<P><A HREF="page3.htm" TABINDEX="1"> 3</A></P>
HTML- "" .
" 3", " 2" " 1".
,
, . .
-
HTML
, , . .
-.
<A>
<IMG>:
<A HREF="http://www.w3.org"><IMG SRC="w3logo.gif"></A>
HTML- -.
I. Web-. HTML 5
88
- Web-:
- , -
: , -
. .;
- Web-
" ", .
- , , .
Web- II.
-
HTML . , ,
, -.
-, - "" .
- Web-,
, Web. - , .
- . <IMG>:
<IMG SRC="map.gif">
!
<MAP> , . .
NAME <MAP>
Web- . ,
,
:
<MAP NAME="samplemap">
</MAP>
6.
89
. USEMAP
<IMG>. ,
# (""). ( , NAME <MAP>, # .)
<IMG SRC="map.gif" USEMAP="#samplemap">
"" . <MAP>
<AREA>:
<AREA [SHAPE="rect|circle|poly"] COORDS="< >"
HREF="<- >"|NOHREF
TARGET="< >">
COORDS="<X1>,<Y1>,<X2>,<Y3>,<X3>,<Y3>...", Xn Yn
.
HREF - , , . NOHREF, ,
-.
-, , , ""
.
TARGET . (,
, "" ,
"" NOHREF.)
6.2 HTML-, -.
6.2
<IMG SRC="map.gif" USEMAP="#samplemap">
. . .
<MAP NAME="samplemap">
<AREA SHAPE="circle" COORDS="50,50,30" HREF="page1.html">
<AREA SHAPE="circle" COORDS="50,150,30" HREF="page2.html">
<AREA SHAPE="poly" COORDS="100,50,100,100,150,50,100,50" NOHREF>
90
I. Web-. HTML 5
"" , Web-
page1.html page2.html, , , , Web- appendix.html. "" Web-
Web-.
- .
" ". Web-
, Web-
Web-. .
, Web, , .
( ).
( ,
), (
) ( ).
. -. - , .
( Web- III.)
, .
, ,
. Web-.
Web- Web-
, Web-: CSS,
. , .
Web-, ( 6.3).
6.3
. . .
<BODY>
<P><A HREF="css_index.htm">CSS</A> |
6.
91
<A HREF="samples_index.htm"></A> |
<A HREF="about.htm"> </A></P>
<H1> HTML CSS</H1>
. . .
, , | ( ).
Web- ...
Web- Web. .
, HTML
.
, .
(anchors). Web-
(, ), Web, .
"" , . !
<A>, .
HREF . <A> ID, Web . ,
(. , ).
. , <A>
( ), . , ( ).
, .
6.4 HTML-, .
6.4
. . .
<P> ...</P>
<A ID="chapter3"></A>
<P> ...<P>
. . .
chapter3
.
! . Web-?
. , -
92
I. Web-. HTML 5
- . -
# ("").
, Web-, chapter3,
novel.htm. , Web-, :
<A HREF="novel.htm#chapter3"> 3</A>
Web- Web-
novel.htm , ,
chapter3.
Web-, ,
- ,
"":
<A HREF="#chapter3"> 3</A>
?
, HTML,
.
Web- Web-.
, Web- HTML,
. Web-,
. .
II
Web-.
CSS 3
7.
CSS
8.
9.
10.
Web-
11.
12.
13.
CSS
Web-
HTML 5, . , HTML Web- Web. Web- , ,
, - . .
Web- - . ,
, , - ... - . ?..
Web- "" .
, ,
, Web- (, ). Web- .
, .
! Web , .
- Web-.
CSS
Web-
(Cascading Style Sheets, CSS), .
(), Web . ,
, , Web-
.
Web-
( Web-). . ,
96
, Web- ,
, Web, .
HTML- Web- . Web 2.0;
1, , Web-
. ,
HTML, Web-; , , .
, CSS. , (CSS 1), 1996 .
CSS 2 CSS 3,
Web-.
CSS 3 (, , ) .
CSS
CSS 7.1.
7.1
<>
<
<
. . .
<
<
}
{
1>: < 1>;
2>: < 2>;
n-1>: < n-1>;
n>: < n>
.
.
Web-, .
.
, , ,
.
( !)
Web-: , , ,
. : ().
.
7. CSS
97
< >:<> ; (
).
< >:<>
; , Web- .
.
. ,
, Web- .
CSS- ,
HTML-.
, . :
P { color: #0000FF }
.
P . <P>.
color . .
#0000FF color. -
98
:
.redtext { color: #FF0000 }
redtext "!". .
7.2
.attention { color: #FF0000;
font-style: italic }
. . .
<P><STRONG CLASS="attention">
CLASS!</STRONG></P>
7.2 attention,
. ( font-style
, italic .) <STRONG>. ;
"" <STRONG>,
attention.
CLASS
, .
. ( Web-
.)
7.3
.attention { color: #FF0000;
font-style: italic }
.bigtext
{ font-size: large }
. . .
<P><STRONG CLASS="attention bigtext">
CLASS!</STRONG></P>
7. CSS
99
7.3 <STRONG> :
attention bigtext. . (
font-size , large , , .)
.
, ,
. .
# ("-
"). Web-, .
ID, -
. , #.
ID Web-.
, HTML- Web-
ID.
, - -
Web-.
#bigtext { font-size: large }
. . .
<P ID="bigtext"> .</P>
" " .
, . CSS
. , .
, , ,
, ,
.
, CSS .
,
.
-
, : , , , .
, ,
.
100
.
, .
, ?.. , .
:
P EM { color: #0000FF }
<P> <EM>.
<P>, <EM>. , <EM>
<P>.
<EM>.
<P><EM> </EM> .</P>
<P> .</P>
<P><STRONG></STRONG> .</P>
" " .
:
P.mini { color: #FF0000;
font-size: smaller }
<P> mini. ,
<P>, mini. ( smaller font-size
.)
<P CLASS="mini"> .</P>
:
P.sel <STRONG> { color: #FF0000 }
"" .
CSS , :
H1, .redtext, P EM <STRONG> { color: #FF0000 }
: <H1>,
redtext P EM.
.
CSS
. HTML- Web-, , , .
7. CSS
101
HTML- Web, . . .
, . . .
.
, , .
, .
STYLE
, :
<P STYLE="font-size: smaller; font-style: italic">
.</P>
, . .
, . .
Web 2.0 Web-. - Web ( ) .
14 CSS. .
CSS.
, ,
. .
, , .
Web-, css. CSS- .
7.4 .
7.4
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM { color: #00FF00;
font-weight: bold }
P EM { color: #0000FF }
, . , .
102
Web-, ,
- Web-.
<LINK>, Web-.
( Web- 1.) :
<LINK REL="stylesheet" HREF="<- >"
TYPE="text/css">
-
HREF .
<LINK> . REL ,
, <LINK>, Web-;
"stylesheet" , .
TYPE MIME , ;
MIME text/css.
7.5
<HEAD>
. . .
<LINK REL="stylesheet" HREF="main.css" TYPE="text/css">
. . .
</HEAD>
7.5 ,
main.css, Web-.
, Web-. , ,
,
"".
( 7.6) HTML- Web. <STYLE> .
"".
7.6
<HEAD>
. . .
<STYLE>
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM
{ color: #00FF00;
font-weight: bold }
P EM
{ color: #0000FF }
</STYLE>
. . .
</HEAD>
7. CSS
103
,
Web- , , "". . , , ,
Web-, . -,
Web 2.0, Web- .
Web- : ( 7.7).
7.7
<HEAD>
. . .
<LINK REL="stylesheet" HREF="styles1.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="styles2.css" TYPE="text/css">
. . .
<STYLE>
. . .
</STYLE>
. . .
</HEAD>
. .
, Web-
. ( , , , ) ( ).
, Web- .
Web- ,
Web-? , . ?
, ( 7.8).
7.8
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM
{ color: #00FF00;
font-weight: bold }
Web-, ( 7.9).
104
7.9
<STYLE>
.redtext { color: #0000FF }
EM { font-size: smaller }
</STYLE>
Web- HTML-:
<P CLASS="redtext"> .</P>
<P ID="bigtext" STYLE="color: #FFFF00"> .<P>
<P><EM> .</EM></P>
, Web-
. , <P>
bigtext, . ,
redtext
<EM>!
?
HTML- <EM>.
Web- ,
.
. , <EM>, , , , CSS,
:
EM { color: #00FF00;
font-size: smaller;
font-weight: bold }
Web- <EM>,
Web-.
HTML-, , . Web-
bigtext . , CSS, :
#bigtext { color: $FFFF00;
font-size: large }
, , HTML-. redtext
( color) Web- . , , ,
. ,
CSS, ,
" ". :
.redtext { color: #0000FF }
7. CSS
105
,
. Web- , .
, Web-
. .
, ( <LINK>) HTML-
, , .
.
, -
.
. -
, , , .
.
, , ,
. , ,
7.10.
7.10
.redtext { color: #FF0000;
font-weight: normal }
EM
{ color: #00FF00;
font-weight: bold }
, , .
.
, , , <EM>,
! ?
, ?
106
. CSS . , ,
, , .
CSS.
,
. , ,
.
,
!important ( ,
"important"). :
EM
{ color: #00FF00;
font-weight: bold !important }
, <EM>,
, .
Web, , Web-,
. 14,
.
. ...
. , . , , .
, ,
Web- .
, Web-, , .
, , Web-.
, .
Web Web-. .
,
Web-. -
(, -), , , , . , , ,
CSS- .
7. CSS
107
, .
.
(), Web-, ;
, "" .
,
Web-. , Web-,
, Web- (
10). , , .
. . ,
Web-.
, , Web-,
. , . ,
, , .
.
.
, Web, .
, Web . 1, Web 2.0
Web-.
.
, ,
, , Web-. .
, ,
Web-. , .
CSS
2 HTML-,
Web- , Web-
- . HTML
.
108
CSS. , .
, , / ()
, :
/
P { color: #0000FF }
/ .
, , /* */. , ( 7.11).
7.11
/*
,
.
*/
P { color: #0000FF }
/* */.
?
,
CSS. , .
CSS. , . Web-.
CSS, Web-. ,
.
CSS. , Web-. Web- HTML-, .
, , , Web- , . , , , .
, , .
Web- .
font-family , :
font-family: < , >|inherit
,
:
<P STYLE="font-family: 'Times New Roman'">
, Web . ,
, . Web-, ,
110
Web- ,
, . .
, . :
serif ( ), sans-serif ( ), cursive (,
), fantasy ( ) monospace
( ):
H2 { font-family: Verdana, Arial, sans-serif }
inherit , Web-
, . , Web- "" . , , font-family .
font-size :
font-size: <>|xx-small|x-small|small|medium|large|x-large|
xx-large|larger|smaller|inherit
.
, CSS (. 8.1).
8.1. , CSS
CSS
px
pt
in
cm
mm
pc
"m"
em
"x"
ex
:
P { font-size: 10pt }
STRONG { font-size: 1cm }
EM { font-size: 150% }
8. .
111
, . 8.1 CSS.
, font-size . ,
xx-small xx-large ,
. larger smaller , , .
, medium,
larger large.
inherit , Web-
, . fontsize .
color :
color: <>|inherit
7 , RGB- (Red,
Green, Blue , , ).
#< >< >< >,
00 FF.
:
H1 { color: #FF0000 }
:
ADDRESS { color: #CCCCCC }
Web http://msdn.microsoft.com/en-us/library/aa358802%28v=VS.85%29.aspx.
inherit , Web-
, . fontsize .
!
inherit CSS.
Web-, Web-, , "" . . ; - ,
.
112
color , ,
HTML.
opacity Web:
opacity: < >|inherit
0 1. 0 (. . ), 1
( ).
( 0,5) :
PRE { opacity: 0.5 }
, .
. , . .
.
font-weight "" :
font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|
700|800|900|inherit
font-style :
font-style: normal|italic|oblique|inherit
, (normal), (italic)
, (oblique).
text-decoration "" ( ), :
text-decoration: none|underline|overline|line-through|blink|inherit
( inherit):
none "", ;
underline ;
8. .
113
overline "" , . . ;
line-through ;
blink ( Safari).
!
.
, Web- ,
, , .
font-variant , :
font-variant: normal|small-caps|inherit
small-caps , , , .
normal .
text-transform :
text-transform: capitalize|uppercase|lowercase|none|inherit
( uppercase )
(lowercase) , (capitalize) (none).
line-height :
line-height: normal|<>|inherit
, CSS (. . 8.1).
. ,
, :
P { line-height: 2 }
normal Web.
letter-spacing
:
letter-spacing: normal|<>
, ; , Web-.
, CSS (. . 8.1). ; . normal , .
114
letter-spacing inherit.
:
H1 { letter-spacing: 5px }
, , .
:
H6 { letter-spacing: -2px }
,
, . ,
.
word-spacing
:
word-spacing: normal|<>
:
H1 { word-spacing: 5mm }
, 5 , , ... .
font,
:
font: [<>] [< >] [<"">]
[<>[/< >]] < >
,
.
Times New Roman 10 :
P { font: 10pt "Times New Roman" }
Arial 12 :
H6 { font: italic 12pt Verdana }
,
Web- ,
.
, . ,
(. 2) , , .
CSS , , Web- . .
8. .
115
white-space , Web- . ,
, 2.
:
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit
white-space .
normal ,
. Web-
, .
Web- , 2.
pre ; , HTML-. Web . ,
<PRE> ( ).
nowrap ,
. Web- .
pre-wrap . Web , .
pre-line , -
. Web-
, .
whitespace, . 8.2.
8.2. white-space
pre
nowrap
pre-wrap
pre-line
normal
, <PRE> , :
PRE { white-space: pre-wrap }
116
word-wrap ,
. , Web- :
word-wrap: normal|break-word|inherit
.
normal Web-,
. Web-.
break-word Web-
. ,
, .
:
P ( word-wrap: break-word }
Web-
<P> (. . ).
, , , . .
.
vertical-align :
vertical-align: baseline|sub|super|top|text-top|middle|bottom|
text-bottom|< >|inherit
:
baseline
( ).
, .
sub
.
super -
.
top -
.
text-top -
.
middle -
.
bottom -
8. .
117
text-bottom
.
, , , :
STRONG { vertical-align: super;
font-size: smaller }
<STRONG> , , .
<STRONG>.
,
:
<P> : <IMG STYLE="vertical-align: text-bottom"
SRC="picture.png">.</P>
HTML- . . , .
,
vertical-align.
, .
Web- !..
CSS 3 . Web-.
text-shadow:
text-shadow: none | <> < >
< > [< >]
none ( ) .
RGB- .
, CSS (. . 8.1). , , .
; .
, .
, CSS. ,
118
, . ; .
,
CSS. , ;
.
:
( <H1>) ,
1 1 .
, . ( ), , ,
Web-. Web- .
!
, Web-, . Web- .
background-color :
background-color: transparent|<>|inherit
RGB- . transparent
; Web- "" .
Web- , Web-
Web-.
:
BODY { color: white;
background-color: black }
Web- .
background-image
( ):
background-image: none|url(<- >);
, - : , url:
TABLE.bgr { background-image: url("/table_background.png") }
none .
,
background-color. , "-
8. .
119
, . , , Web-.
, Web- ( Web), , Web- , "" .
background-repeat:
background-repeat: no-repeat|repeat|repeat-x|repeat-y|inherit
.
no-repeat ;
Web- .
repeat
( ).
repeat-x .
repeat-y .
background-position
Web-, :
background-position: < > [< >] |
inherit;
< >|left|center|right
Web- CSS (. . 8.1). :
left Web ( );
center ;
right .
:
< >|top|center|bottom
Web- CSS .
120
:
top Web-
( );
center ;
bottom .
- Web-
,
center.
:
TABLE.bgr ( background-position: 1cm top }
1 Web- .
, Web :
TABLE.bgr ( background-position: right }
.
,
Web-: , . , ( <P>),
( <STRONG> <EM>). .
, - , ? , -
8. .
121
,
<STRONG>. CSS ?
CSS . HTML.
Web- , ,
. .
Web-, - .
(, , , .),
. Web- Web-.
. -,
Web- ;
. -,
Web-; ,
. ( Web- III.)
.
10, Web-.
.
,
Web-. ,
, , , .
<SPAN>. , ,
:
<P><SPAN></SPAN> CSS.</P>
.
. - ( 8.1).
8.1
.bolded { font-weight: bold }
. . .
<P><SPAN CLASS="bolded"></SPAN>
CSS.</P>
"" .
, Web- . ,
.
122
Web-, 1
, .
Web-.
, Web-, main.css. Web-.
Web-, .
7, <LINK>.
Web- index.htm :
<LINK REL="stylesheet" HREF="main.css" TYPE="text/css">
Web-, tags, :
<LINK REL="stylesheet" HREF="../main.css" TYPE="text/css">
HTML- Web- .
<LINK>, Web-, -. Web-,
Web- Web-. .
. , . Web , "" .
Web 2.0, 1,
Web-.
, , () . , , .
, Web- .
Verdana. -
, Arial.
Arial. -
, .
12 .
20 .
18 .
12 .
.
10 . -
.
10 . -
.
.
8. .
123
10 .
. .
.
#3B4043 (- , ).
#F8F8F8 (- , ).
Web-, - http://www.tarusa.ru/~golovan
http://avy.ru. , " " "-";
.
CSS- ( 8.2).
8.2
BODY
P
H1, H2, H6
{ color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif }
{ font-size: 12pt }
{ font-weight: normal;
font-family: Arial, sans-serif }
{ font-size: 20pt }
{ font-size: 18pt }
{ font-size: 12pt }
{ font-size: 10pt }
H1
H2
H6
TABLE
BLOCKQUOTE P,
ADDRESS
{ font-size: 10pt;
font-style: italic }
. .
<BODY>. ,
Web-: (,
), . Web-
, , , , :
BODY
{ color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif }
<P>.
. <BODY>, :
P
{ font-size: 12pt }
! ,
<H1>, <H2> <H6>:
124
H1, H2, H6
{ font-weight: normal;
font-family: Arial, sans-serif }
{ font-size: 20pt }
{ font-size: 18pt }
{ font-size: 12pt }
<TABLE>,
<BODY>. ,
( , ):
TABLE
{ font-size: 10pt }
:
BLOCKQUOTE P <ADDRESS>:
BLOCKQUOTE P,
ADDRESS
{ font-size: 10pt;
font-style: italic }
. <P>,
<BLOCKQUOTE>, BLOCKQUOTE P.
<BODY>.
, . ,
, . , "" .
Web- Web- index.htm.
! Web-
CSS! HTML- ( <LINK>, ). , Web 2.0, !
?.. ,
. , 1 .
8. .
125
? CSS-,
<H1>, <H2> <H6>. :
H1, H2, H6
{ font-weight: normal;
font-family: Arial, sans-serif }
:
H1, H2, H6
{ font-weight: normal;
font-family: Arial, sans-serif;
letter-spacing: 1mm }
{ font-weight: normal;
font-family: Arial, sans-serif;
letter-spacing: 1mm;
text-shadow: #CDD9DB 1px 1px }
#CDD9DB (-) , 1 . , .
Web-. . ...
. .
?
,
. Web-.
.
,
, (, , , .) Web-. Web- , .
Web- Web- .
,
. , , , . , , 2 .
, ( ).
, Web- (. .
) .
(. III).
,
. .
.
text-align :
text-align: left|right|center|justify|inherit
left ( ;
Web-), right ( ), center ( ) justify (
).
:
P { text-align: justify }
H1 { text-align: center }
9. ,
127
( )
. " " . ,
text-indent inherit.
:
P { text-indent: 5mm }
" ".
. , - , , , ( ), , , Web. , , , , .
list-style-type
:
list-style-type: disc|circle|square|decimal|decimal-leading-zero|
lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|
upper-alpha|upper-latin|armenian|georgian|none|inherit
, . , .
disc (
).
circle .
square . , -
Web-.
decimal ( -
).
decimal-leading-zero 01 99
.
lower-roman .
upper-roman .
lower-greek .
lower-alpha lower-latin .
upper-alpha upper-latin .
armenian .
128
georgian .
none ( -).
list-style-type,
CSS 3. CSS 2 ,
Web-.
Web- https://developer.mozilla.org/en/CSS/list-style-type.
list-style-type ,
. , . .
:
UL { list-style-type: square }
9.1
.
9.1
.squared { list-style-type: square }
. . .
<UL>
<LI> </LI>
<LI CLASS="squared"> ( )</LI>
<LI> </LI>
</UL>
list-style-image
- ( ).
list-style-type, , :
list-style-image: none|<- >|inherit
- ,
- (. 8):
UL { list-style-image: url(/markers/dot.gif) }
none , .
.
list-style-image ,
.
list-style-position
:
list-style-position: inside|outside|inherit
9. ,
129
:
inside , -
;
outside (
).
, , ,
, . ,
CSS, , ...
:
OL { list-style-position: inside }
,
Web-, . . , . Web-.
visibility ,
Web-:
visibility: visible|hidden|collapse|inherit
:
visible Web- ( );
hidden Web-,
. , Web-
"";
collapse , ,
( 13).
Web-, (. . ""). Web- , Web .
Web-.
visibility , Web.
( Web- III).
display .
Web-: , .
:
display: none|inline|block|inline-block|list-item|run-in|table|
inline-table|table-caption|table-column|table-column-group|
130
table-header-group|table-row-group|table-footer-group|table-row|
table-cell|inherit
.
none Web-,
HTML-.
inline .
block .
inline-block , "" -
.
list-item .
run-in .
, (
),
.
table .
inline-table , . (-
, - ! ...)
table-caption .
table-column ( -
13).
table-column-group (
13).
table-header-group .
table-row-group .
table-footer-group .
table-row .
table-cell .
!
display Web-
.
display
Web-. , block, (, 4, ) inline.
,
:
IMG.block { display: block }
9. ,
131
, :
LI { display: inline }
:
.hidden { display: none }
Web- .
, Web- ,
.
none, block inline display. ,
.
Web-, 2
, Web- Web. .
, Web-.
.
.
.
. -
.
.
.
.
.
, ,
main.css, :
P
{ font-size: 12pt;
text-align: justify }
<P>,
, .
, Web- ( ) .
CSS-:
ADDRESS
UL
{ text-align: right }
{ list-style-type: circle }
<ADDRESS> <UL>. , 8, -
132
( ).
.
Web- index.htm Web-.
, Web- .
. , . , !..
Web- .
.
6 ,
, , ,
.
, , .
.
. HTML-,
.
6, , , Web- index.htm,
HTML. Web- , Web- Web- ,
, .
; .
9.2 HTML- Web- index.htm, .
9.2
<UL>
<LI><A
<LI><A
<LI><A
<LI><A
</UL>
HREF="index.htm">HTML</A></LI>
HREF="css_index.htm">CSS</A></LI>
HREF="samples_index.htm"></A></LI>
HREF="about.htm"> </A></LI>
Web-
. , , . ?
.
9. ,
133
.
Arial. .
14 . .
. -
.
. .
Web-
,
(. 7). navbar. CSS- 9.3.
9.3
#navbar
main.css.
,
ID 7. :
<UL ID="navbar">
. . .
Web-
Web-. , .
CSS , Web-.
.
cursor
Web-. Web-, , :
cursor: auto|default|none|context-menu|help|pointer|progress|wait|cell|
crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|
e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|
w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|
row-resize|all-scroll|inherit
, cursor ,
. .
134
auto Web- .
.
default , .
none .
help .
pointer " ". -
.
progress . ,
- .
wait . , Web- -
.
text .
.
cursor
Web-
https://developer.mozilla.org/en/CSS/cursor. ,
.
" " , :
#navbar LI { cursor: pointer }
?
, , Web-. , Web-.
""
8 . , Web- CSS
. , .
Web-.
10
Web-
CSS, . , .
Web-. Web-, , . .
Web- . , "" 8. Web-.
, , (
). Web-.
CSS . , , ...
, :
, , , , , , - .
, .
<DIV>, HTML-, ( 10.110.3).
10.1 .
136
10.1
<DIV>
<H3> </H3>
<P> .<P>
<P> .<P>
</DIV>
10.2 , .
10.2
<DIV>
<TABLE>
<CAPTION> </CAPTION>
<TR>
<TH> </TH>
<TH> </TH>
</TR>
. . .
</TABLE>
</DIV>
, 10.3,
"" .
10.3
<DIV STYLE="text-align: center">
<VIDEO SRC="film.ogg" CONTROLS>
</VIDEO>
<P> , .</P>
</DIV>
-, , . -, , .
, .
, .
Web-,
.
Web-
Web- .
Web-. .
10. Web-
137
Web-
Web-: ,
. .
Web-
.
, , Web-.
Web- : ,
, , , . Web- Web-. Web-, , Web- index.htm Web- , , .
Web-
HTML-. , Web- ,
, . , Web- , .
Web- . -, Web- . -,
Web-
. -...
.
, Web-,
: Web-, , (, Web-, ,
Web- ) . ,
,
.
Web-, Web-, Web-, . Web- ( ).
Web-, , HTML- Web-.
. ? HTML- Web , Web-
!
HTML- Web-, , . , .
, , Web .
Web- , ? , Web- ...
138
, , "" HTML
. Web-, Web-, -
. , Web- .
Web- Web-
. Web, -
. Web- . ,
Web-.
Web- . Web-.
, - .
. -, W3C, Web- -, , , , , ,
. -, Web; .
Web- . Web- HTML,
Web-, , . Web- ; Web-.
Web-:
HTML, , ,
Web- Web.
HTML ,
. Web, , .
CSS, , , , .
Web- :
"" Web-, Web-.
Web- Web- , ,
, , .
HTML-.
10. Web-
139
Web-
: ,
. , , Web-, , Web- .
Web- . "" Internet Explorer, , , . .
, Web-, ,
. , , ...
Web-
Web-
Web- ,
. Web-, , . , .
CSS. ( ), .
, , ( 11).
, Web- ?
Web- , .
Web-
Web-. Web- : , ,
, - . CSS
.
"" Web- Web-. -
Web- Web-, ,
. . . 18.
"" Web-. -
W3C Web- .
HTML- Web-. HTML-, -
, . ,
<DIV>.
140
,
Web- .
, Web- ? ?
, ...
Web-
Web-. Web- , .
, ,
, , , ,
Web- . ,
, Web-.
, Web- . . Web- Web- "", , .
Web-, 3
Web-
.
.
Web- ( )
. 10.1. , Web-,
, .
.
Web-
. 10.1. Web-
10. Web-
141
. .
. 10.1 , Web- ,
. HTML-,
.
, Web-.
Web- ,
. :
cheader Web-;
cnav ;
cmain ;
ccopyright .
"c" "container" . , .
ID. .
10.4 HTML- Web- index.htm
.
10.4
<DIV ID="cheader">
<H1> HTML CSS</H1>
</DIV>
<DIV ID="cnavbar">
<UL ID="navbar">
<LI><A HREF="index.htm">HTML</A></LI>
<LI><A HREF="css_index.htm">CSS</A></LI>
<LI><A HREF="samples_index.htm"></A></LI>
<LI><A HREF="about.htm"> </A></LI>
</UL>
</DIV>
<DIV ID="cmain">
<P> Web- , Web-!
-,
Web-. ,
<DFN>HTML</DFN> <DFN>CSS</DFN>.</P>
<HR>
. . .
<H2> HTML</H2>
<P><CODE>!DOCTYPE</CODE>,
<CODE><A HREF="tags/t_audio.htm">AUDIO</A></CODE>,
142
,
. , , , . Web-!
, . . , .
.
. , , .
width height , ,
Web-:
width: auto|<>|inherit
height: auto|<>|inherit
, CSS . :
#cnavbar { width: 100px }
.
Web-:
#cheader { height: 10% }
auto Web-
( ). Web- Web-, , .
10. Web-
143
- Web- , ,
. , .
min-width min-height Web-:
min-width: <>
min-height: <>
, .
:
TABLE { min-width: 500px;
min-height: 300px }
, :
TABLE { max-width: 90%;
max-height: 60% }
.
( )
Web- .
Web- ,
, , HTML-.
, Web-.
( , ,
Web-). , .
float ,
Web-:
float: left|right|none|inherit
:
left Web-
, ;
144
right Web-
, ;
none Web-,
.
:
TABLE.left-aligned { float: left }
, .
float
?
, HTML-,
. !
, Web-. .
float . .
Web-, , - , .
float none, . CSS ,
, .
clear:
clear: left|right|both|none|inherit
, :
left Web- ,
float left;
right Web- ,
float right;
both Web- ,
, , .
:
#ccopyright { clear: both }
ccopyright ( ,
) ,
.
10. Web-
145
Web-,
4
,
Web-. .
, .
Web- (cheader):
100% ( Web-).
(cnavbar):
30% ( Web-);
240 ( -
; );
(. . ).
(cmain):
70% ( Web-);
.
(ccopyright):
100% ( Web-);
,
.
, . Web-
,
.
CSS-,
( 10.5).
10.5
#cheader
#cnavbar
#cmain
#ccopyright
{ width: 100% }
{ width: 30%;
min-width: 240px;
float: left }
{ width: 70%;
float: left }
{ width: 100%;
clear: both }
main.css,
. Web- index.htm Web- , (. 10.2).
146
! HTML CSS,
. Web-, Web-.
Web-. .
.
, Web-,
. Web- , .
, ? ,
, -
10. Web-
147
. ,
.
overflow :
overflow: visible|hidden|scroll|auto|inherit
:
visible , -
( );
hidden .
;
scroll ,
. , ;
auto ,
.
:
#cmain { overflow: auto }
cmain ,
.
. overflow
, .
, ,
overflow visible:
#cmain { height: 500px;
overflow: auto }
cmain .
overflow
cmain ,
visible:
#cmain { height: 50%;
overflow: auto }
overflow-x overflow-y
, , .
, overflow:
#cnavbar { width: 270px;
overflow-x: hidden }
, Web ! -
148
, . , , , Web- ( Web-, ). .
Web-. .
Web-, 5
Web-. , cmain.
? -, , , . -,
.
cmain cnavbar.
.
cnavbar cmain.
cnavbar:
240 ;
620 ;
.
cmain:
780 ;
620 ;
;
.
.
, Web- , Web- .
, .
, cnavbar,
cmain. , ,
,
( 11).
CSS-. 10.6
main.css, , cnavbar cmain.
10. Web-
149
10.6
#cnavbar
#cmain
{ width: 240px;
height: 620px;
float: left }
{ width: 780px;
height: 620px;
float: left;
overflow: auto }
, , . , . 10.3.
Web- "",
. Web-
?..
150
?
: , , Web- , . "" !
, , Web-. ,
. Web- .
11
,
Web-:
,
CSS. Web-.
- ... - , Web . , ?
, ! Web-.
CSS .
1. Web- . Web, .
2. Web- Web- .
Web-,
.
,
. , , ,
.
.
.
152
padding-left|padding-top|padding-right|padding-bottom:
<>|auto|inherit
. auto ,
.
11.1 ,
.
11.1
TD, TH { padding-left: 2px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px }
, ,
:
.indented { padding-left: 2cm;
padding-right: 2cm }
, .
padding
Web-:
padding: < 1> [< 2> [< 3> [< 4>]]]
, -
Web-.
, ,
.
, , , .
, , , , .
:
TD, TH { padding: 2px }
.indented { padding: 0cm 2cm 0cm 2cm }
padding.
margin-left, margin-top, margin-right margin-bottom
, , , , :
margin-left|margin-top|margin-right|margin-bottom: <>|auto|inherit
. auto
, , .
11. ,
153
:
H1 { margin-top: 5mm }
5 .
:
UL { margin-left: -20px }
, "" padding.
:
H1 { margin: 5mm 0mm }
.
,
.
, ,
.
( <TABLE>):
TABLE { border-spacing: 1px }
, .
!
, , , Web-. , , Web-,
, , .
, Web- , , Web- , .
, 100%, ,
Web- ,
Web-, . , Web-,
. ...
154
CSS ,
Web-.
border-left-width, border-top-width, border-right-width borderbottom-width , , , ,
:
border-left-width|border-top-width|border-right-width|
border-bottom-width: thin|medium|thick|<>|inherit
,
5 :
H1 { border-bottom-width: 5px }
.
border-width
:
border-width: < 1> [< 2> [< 3> [< 4>]]]
, .
, , -
.
, ,
, .
, , -
, , .
:
TD, TH { border-width: thin }
11. ,
155
:
H1 { border-bottom-width: 5px
border-bottom-color: red }
border-color :
border-color: < 1> [< 2> [< 3> [< 4>]]]
, border-width:
TD, TH { border-width: thin;
border-color: black }
:
none hidden ( );
dotted ;
dashed ;
solid ;
double ;
groove "" ;
ridge "" ;
inset "";
outset "".
:
H1 { border-bottom-width: 5px
border-bottom-color: red
border-bottom-style: double }
156
border-style :
border-style: < 1> [< 2> [< 3> [< 4>]]]
, border-width bordercolor.
:
TD, TH { border-width: thin;
border-color: black;
border-style: dotted }
:
H1 { border-bottom: 5px double red }
"" border
:
border: <> <> <> | inherit
TD, TH { border: thin dotted black }
!
Web-. , , Web-,
, ,
.
Web-, 6
, . , .
.
, , Web-, .
Web- Web . Web- .
Web-
Web-.
Web- (cheader)
20 . Web-, .
11. ,
157
(cnavbar) -
(cmain) 10 .
(cmain) 5 .
(cmain)
10 . cnavbar cmain.
(ccopyright) 20 . Web-.
.
.
.
cheader .
cmain .
ccopyright .
. #B1BEC6
(-).
11.3 CSS-
main.css, .
11.3
BODY
. . .
#cheader
#cnavbar
#cmain
#ccopyright
{ color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif;
margin: 0px }
{ width: 1010px;
padding: 0 20px;
border-bottom: thin dotted #B1BEC6 }
{ width: 250px;
height: 570px;
float: left;
margin-right: 10px }
{ width: 760px;
height: 570px;
float: left;
overflow: auto;
padding: 5px;
border-left: thin dotted #B1BEC6 }
{ width: 1010px;
clear: both;
padding: 10px 20px 0px 20px;
border-top: thin dotted #B1BEC6 }
158
.
Web-
Web-, margin.
<BODY> 0 :
BODY
{ color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif;
margin: 0px }
cheader, , , 20 ,
. :
#cheader
{ width: 1010px;
padding: 0 20px;
border-bottom: thin dotted #B1BEC6 }
, .
: Web ,
. ,
Web-, , .
,
, Web- .
cnavbar 10
cnavbar cmain:
#cnavbar
{ width: 250px;
height: 570px;
float: left;
margin-right: 10px }
cmain
cmain cnavbar:
#cmain
{ width: 760px;
height: 570px;
float: left;
overflow: auto;
padding: 5px;
border-left: thin dotted #B1BEC6 }
ccopyright 20 ,
10 . , ,
ccopyright "":
#ccopyright
{ width: 1010px;
clear: both;
11. ,
159
, .
10 . -
.
, , #B1BEC6.
: 5 ,
10 . .
CSS- main.css ( 11.4).
11.4
#navbar
. . .
#navbar LI
.
navbar, , , , 30 .
, :
#navbar
160
, , :
#navbar LI
Web-
Web- index.htm, <F5>. ,
(. 11.1)?
. 11.1.
Web- index.htm
, . - ... Web- , , Web- Web-. ?
, ,
. !
. , .
, Web-, HTML, , Web- index.htm
( HTML).
, "HTML". , Web-, CSS .
. .
, Web- , . HTML, 2, .
Web- index.htm HTML-, ( 11.5).
11. ,
161
11.5
<UL ID="navbar">
<LI><A HREF="index.htm">HTML</A></LI>
<LI><A HREF="css_index.htm">CSS</A></LI>
<LI><A HREF="samples_index.htm"></A></LI>
<LI><A HREF="about.htm"> </A></LI>
</UL>
, . 11.6 .
11.6
<UL ID="navbar">
<LI><A HREF="index.htm">HTML</A>
<UL>
</UL>
</LI>
<LI><A HREF="css_index.htm">CSS</A></LI>
<LI><A HREF="samples_index.htm"></A></LI>
<LI><A HREF="about.htm"> </A></LI>
</UL>
<UL>, ,
"" </LI>. "" .
HTML-, Web- . Web-,
cmain. , , Web- ,
( 11.7).
11.7
<UL ID="navbar">
<LI><A HREF="index.htm">HTML</A>
<UL>
<LI><CODE>!DOCTYPE</CODE></LI>
<LI><CODE><A HREF="tags/t_audio.htm">AUDIO</A></CODE></LI>
<LI><CODE>BODY</CODE></LI>
. . .
<LI><CODE><A HREF="tags/t_video.htm">VIDEO</A></CODE></LI>
</UL>
</LI>
<LI><A HREF="css_index.htm">CSS</A></LI>
162
<LI><A HREF="samples_index.htm"></A></LI>
<LI><A HREF="about.htm"> </A></LI>
</UL>
cmain , , Web- , .
.
Web- index.htm Web-. "HTML" "" , , .
. , , .
,
, cnavbar.
,
( 11.8).
11.8
#cnavbar
{ width: 250px;
height: 570px;
float: left;
overflow: auto;
margin-right: 10px }
.
.
, ,
30 .
.
10 .
"" , .
10 .
"",
.
.
.
, main.css
CSS- 11.9.
11.9
#navbar LI UL
{ list-style-type: none;
margin-left: -20px;
margin-top: 10px }
11. ,
163
.
. .
.
, ,
, . , , ""
, .
.
main.css
Web- Web- index.htm,
<F5>. ,
. 11.2.
, ! - , , .
HTML Web-.
CSS .
. 11.2.
Web- index.htm
Web-, HTML CSS.
CSS 3 .
.
CSS 3 , Web-.
: , .
, CSS, -
Web-. , , .
164
CSS 3 . .
outline-width :
outline-width: thin|medium|thick|<>|inherit
, borderwidth.
:
DFN { outline-width: thin }
<DFN> .
outline-color :
outline-color: <>|inherit
!
.
:
DFN { outline-width: thin;
outline-color: black }
<DFN> .
outline-style , :
outline-style: none|dotted|dashed|solid|double|groove|ridge|inset|
outset|inherit
, border-style.
:
DFN { outline-width: thin;
outline-color: black;
outline-style: dotted }
outline :
outline: <> <> <> | inherit
DFN { outline: thin dotted black }
, ! main.css :
DFN
(. . <DFN>) Web - .
11. ,
165
?
Web- .
Web-,
.
CSS, . .
12
Web- ,
, Web . - , Web- Web-. "" .
CSS . ,
.
text-align, 9:
TD, TH { text-align: center }
( <CAPTION>):
CAPTION { text-align: left }
vertical-align:
vertical-align: baseline|sub|super|top|text-top|middle|bottom|
text-bottom|< >|inherit
Web- 8,
-.
top ( -
).
middle .
bottom .
12.
167
, Web- (. 8):
TD, TH { vertical-align: middle }
,
11.
padding-left, padding-top, padding-right, padding-bottom
padding.
border-spacing.
,
11 ( 12.1).
12.1
TABLE
{ align: center;
border: medium solid black;
border-spacing: 1px }
TD, TH { border: thin dotted black;
padding: 2px }
12.1
, ,
, .
, Web-
. , - (. 12.1).
. 12.1. Web-
.
(. 12.2).
168
. 12.2. , ,
border-collapse Web-,
:
border-collapse: collapse|separate|inherit
separate
(. . 12.1). .
collapse , (. . 12.2).
( <TABLE>).
:
TABLE { border-collapse: collapse }
width height, 10.
,
:
TABLE { width: 100%;
height: 300px }
, width -
, ( 12.2).
12.2
<TABLE>
<TR>
<TH> </TH>
<TH STYLE="width: 40px"> 40 </TH>
<TH> </TH>
</TR>
. . .
</TABLE>
, height -
( 12.3).
12.
169
12.3
<TABLE>
. . .
<TR>
<TD STYLE="height: 30px"> 30 </TD>
. . .
</TR>
. . .
</TABLE>
, ,
Web-. , Web- .
, CSS , Web-.
table-layout , Web- , :
table-layout: auto|fixed|inherit
auto Web- ,
. .
fixed .
, ,
overflow, overflow-x overflow-y
(. 10).
( <TABLE>).
:
TABLE { table-layout: fixed;
overflow: auto }
.
caption-side :
caption-side: top|bottom|inherit
top ( ).
bottom .
( <TABLE>).
:
TABLE { caption-side: bottom }
170
empty-cells , Web-
( ) :
empty-cells: show|hide|inherit
show . -
, , ,
.
hide .
Web-, , , empty-cells.
empty-cells ( <TABLE>).
:
TABLE { empty-cells: hide }
Web-, 7
, , , . ...
HTML. .
, , .
10 .
"".
, , #B1BEC6.
, . .
2 .
, , #B1BEC6.
.
CSS-. 12.4 main.css.
12.4
TABLE
. . .
TD, TH
CAPTION
{ font-size: 10pt;
margin: 10px 0px;
border: thin solid #B1BEC6;
border-collapse: collapse }
{ padding: 2px;
border: thin dotted #B1BEC6 }
{ text-align: left }
12.
171
?
,
, , . .
CSS . , Web- , ,
, CSS 3.
...
13
II , , CSS.
; , ,
. , ,
Web-, , CSS.
, , . -,
, 7 ,
, (, ). ,
, ?
. .
,
Web- , , . , , ,
(
), ( ) .
, .
,
.
,
Web-
.
+ Web-, .
:
< 1> + < 2> { <> }
13.
1.
173
2,
13.1
H6 + PRE { font-size: smaller }
. . .
<H6> </H6>
<PRE> .</PRE>
<P> .</P>
<H6> </H6>
<P> .</P>
<PRE> .</PRE>
, 13.1, , . . .
~ () Web-, , , .
:
< 1> ~ < 2> { <> }
2
2, 1.
1 .
13.2
H6 + PRE { font-size: smaller }
. . .
<H6> </H6>
<PRE> .</PRE>
<P> .</P>
<H6> </H6>
<P> .</P>
<PRE> .</PRE>
13.2 :
, , , .
> Web-, :
< 1> > < 2> { <> }
2, 1.
174
13.3
BLOCKQUOTE + P { font-style: italic }
. . .
<BLOCKQUOTE>
<P> .</P>
<DIV>
<P> .</P>
</DIV>
</BLOCKQUOTE>
13.3 , . ,
, .
<> Web-, , :
< 1> < 2> { <> }
2, 1.
2 , 1,
.
13.4
BLOCKQUOTE P { font-style: italic }
. . .
<BLOCKQUOTE>
<P> .</P>
<DIV>
<P> .</P>
</DIV>
</BLOCKQUOTE>
13.4 : , ,
.
, 13.4, . , 7! ,
. ...
,
,
.
13.
175
, .
.
< >[< >] { <> }
, .
:
TD[ROWSPAN] { background-color: grey }
,
ROWSPAN, . . , .
< >[< >=<>] { <> }
,
.
:
TD[ROWSPAN=2] { background-color: grey }
,
ROWSPAN 2, . . , .
< >[< >~=
< , >] { <> }
,
, .
:
TD[ROWSPAN~=2 3] { background-color: grey }
TD[ROWSPAN|=2,3] { border: thin dotted black }
,
ROWSPAN 2 3, . . ,
.
< >[< >^=<>] { <> }
,
, .
176
:
IMG[SRC^=http://www.pictures.ru] { margin: 5px }
, SRC , "http://www.pictures.ru", . .
, Web- http://www.pictures.ru.
< >[< >$=<>] { <> }
,
, .
:
IMG[SRC$=gif] { margin: 10px }
,
SRC , "gif", . .
GIF.
< >[< >*=<>] { <> }
,
, .
:
IMG[SRC*=/picts/] { margin: 10px }
,
Web-.
.
,
. :
< ><> { <> }
::first-letter
Web-, , , , .
:
P::first-letter { font-size: larger }
13.
177
::first-line
Web-:
P::first-line { text-transform: uppercase }
. Web- ( ) .
, . :
< ><> { <> }
, , . .
: ,
.
, CSS 3:
:link ;
:visited ;
:active , ;
:focus , (
. 6);
:hover , .
{
{
{
{
{
text-decoration:
text-decoration:
text-decoration:
text-decoration:
text-decoration:
none }
overline }
underline }
underline }
underline }
178
13.5 <A>.
Web-.
13.6
A.special:link
A.special:visited
A.special:active
A.special:focus
A.special:hover
{
{
{
{
{
color:
color:
color:
color:
color:
darkred }
darkviolet }
red }
red }
red }
,
.
, . , ...
Web-
.
:first-child :last-child Web, , , :
UL:first-child { font-weight: bold }
,
-, . . .
:
TD:last-child { color: green }
.
13.7 .
13.7
#cmain P:first-child { font-weight: bold }
. . .
13.
179
<DIV ID="cmain">
<P> .</P>
<BLOCKQUOTE>
<P> .</P>
</BLOCKQUOTE>
<BLOCKQUOTE>
<P> .</P>
<P> .</P>
</BLOCKQUOTE>
</DIV>
, 13.7, ,
. , ,
,
.
:
#cmain > P:first-child { font-weight: bold }
,
cmain. >, ,
, ,
.
CSS :first-of-type :last-of-type. , , :firstchild :last-child, . ,
CSS 3...
:only-of-type Web-,
,
, .
13.8 .
13.8
P:only-of-type { color: green }
. . .
<BLOCKQUOTE>
<P> .</P>
</BLOCKQUOTE>
<BLOCKQUOTE>
<P> .</P>
<ADDRESS> .</ADDRESS>
</BLOCKQUOTE>
180
<BLOCKQUOTE>
<P> .</P>
<P> .</P>
</BLOCKQUOTE>
13.8 ,
, . . , <P>. , , .
:nth-child Web-, ,
:
< >:nth-child(<a>n+<b>) { <> }
, , .
, Web-: a b. .
, , :nthchild.
Web- CSS- , , Web-, , ,
. Web- .
Web- . a .
Web- .
Web- n
, .
, .
:
TR:nth-child(2n+1) { text-align: center }
, .
Web- , .
Web- n 0. -
1. Web- .
Web- n 1. -
3. Web- .
Web- n 2. -
5. Web- . 2 , .
13.
181
.
:
TR:nth-child(2n+0) { text-align: center }
() .
, :
TR:nth-child(2n) { text-align: center }
.
, .
Web- b-
.
, :
TR:nth-child(0n+2) { text-align: center }
Web- .
:
TR:nth-child(2) { text-align: center }
Web- .
odd even. ,
:
TR:nth-child(odd) { background-color: grey }
TR:nth-child(even) { background-color: yellow }
, .
:nth-last-child
:nth-child , , .
:
TR:nth-last-child(1) { text-align: center }
.
:
#cmain P:nth-last-child(2) { font-weight: bold }
( ) cmain.
CSS :nth-of-type :nth-last-of-type. , , :nthchild :nth-last-child. , , -.
182
, , :empty. , .
:
P:empty { display: none }
( ) .
:not *
:not Web, .
:
< >:not(< >) { <> }
Web-,
.
:
DIV:not(#cmain) { background-color: yellow }
<DIV>, cmain.
,
cmain.
, ,
:
TR:not(:nth-child(1)) { background-color: grey }
* ("") Web-.
:
#cmain > *:first-child { border-bottom: medium solid black }
, cmain.
Web-,
8
, ...
. .
Web- Web-, .
, #576C8C
(-).
13.
183
, , -
, #576C8C. .
, ,
, #A1AFBA ().
, #576C8C.
, , ,
#576C8C.
, , , #576C8C.
cmain 18 -
HTML . , .
, main.css
( 13.9).
13.9
A:link
{ color: #576C8C;
text-decoration: none }
A:visited
{ color: #A1AFBA;
text-decoration: none }
A:focus, A:hover,
A:active
{ color: #576C8C;
text-decoration: underline }
13.9 , . .
13.10
#navbar A:link,
#navbar A:visited { color: #576C8C;
text-decoration: none }
#navbar A:focus,
#navbar A:hover,
#navbar A:active { color: #576C8C;
text-decoration: underline }
13.10 . , , navbar, , .
184
, cmain
(. . Web-):
#cmain > P:first-child:first-letter { font-size: 18pt;
font-wight: bold }
, , . .
#cmain > P cmain.
#cmain > P:first-child ,
( ).
#cmain > P:first-child:first-letter , ,
. .
, cmain. , :
#cmain P:first-child:first-letter { font-size: 18pt;
font-weight: bold }
,
.
.
,
:
.table-html-versions TD:first-child,
.table-html-versions TD:nth-child(2) { text-align: center }
, , table-html-versions.
,
<TABLE>:
<TABLE CLASS="table-html-versions">
<CAPTION> HTML:</CAPTION>
. . .
</TABLE>
?
, II CSS . , , .
13.
185
Web- CSS, , . ,
Web-: ,
, , , , . Web-
.
III Web-.
Web-, JavaScript
Ext Core, .
!
186
III
Web-.
Web-
14.
Web-.
JavaScript
15.
16.
Web-
14
Web-.
JavaScript
Web- : , .
1. I,
II. .
, , Web- . , ,
,
. Web- , ,
, Web- Web- .
Web- , HTML- Web- , ,
. JavaScript. Web-
JavaScript- ,
Web-.
Web-,
JavaScript , Web- Web. ,
.
Web-
JavaScript , .
.
Web-
Web-, , .
Web- .
190
, HTML,
Web- 1.1.htm. . HTML, </BODY>, 14.1.
14.1
<SCRIPT>
var dNow = new Date();
var sNow = dNow.toString();
document.write(sNow);
</SCRIPT>
Web-
- ,
Web- index.htm,
. , Web .
CSS- .
, #navbar LI #navbar LI UL LI
, 14.3.
14.3
#navbar LI
191
, . , , ,
, . ( . 7.)
, , "" , . "" ,
.
- http://www.extjs.com/products/
core/download.php?dl=extcore31
ext-core-< >.zip Ext Core,
Web-. ( 15.) , ext-core.js
Web-, Web- index.htm main.css. Ext Core .
!
- Ext Core
, Web- http://www.extjs.com/products/core/
download.php, (
"Download") .
HTML- Web-,
</BODY>, :
<SCRIPT SRC="main.js"></SCRIPT>
192
Web- main.js
14.4.
14.4
Ext.onReady(function() {
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) {
Ext.get(this).addClass("hovered");
});
ceLinks.on("mouseout", function(e, t) {
Ext.get(this).removeClass("hovered");
});
});
Web-. main.js.
, UTF-8 ( , 1).
, . Web- index.htm Web-. ,
.
Web-
Web-
, Web-, Web, Web-, .
, .
Web- HTML-
<SCRIPT>. , Web- , Web, , .
Web- <SCRIPT>,
Web- ( 14.5). , ,
Web-.
14.5
<SCRIPT>
var dNow = new Date();
var sNow = dNow.getDate() + "." + dNow.getMonth() + "." +
dNow.getFullYear();
document.write(sNow);
</SCRIPT>
193
Web- .
Web-, ,
"". Web-
Web 2.0, , ,
Web- . ,
( ; 7).
Web- Web-,
Web-. ( Web- .)
Web- ,
Web- HTML js.
Web- Web-, , <SCRIPT> :
<SCRIPT SRC="<- Web->"></SCRIPT>
<SCRIPT> ,
SRC, - Web-:
<SCRIPT SRC="main.js"></SCRIPT>
JavaScript
JavaScript. Web- .
194
JavaScript
Web-, :
x = 4;
y = 5;
z = x * y;
- . ,
JavaScript;
, Web-.
Web- . :
x = 4;
4. JavaScript , , , .
, 4 !
x. ?
, ! ,
,
- .
x.
, (=), . ! (, , Web-, - .) , Web. , = .
, (), , , 4 x. , .
JavaScript (;),
; Web.
:
y = 5;
y 5. .
:
z = x * y;
, - z. ? , x y. , JavaScript ( ) (*). .
195
Web- z 4 5 20.
, :
y = y1 * y2 + x1 * x2;
:
1. y1 y2.
2. x1 x2.
3. 1 2 (
+).
4. y.
2 x1 x2,
y1 y2 x1. , . ,
, ,
.
:
x = x + 3;
JavaScript, .
x 3,
x. Web- .
JavaScript
:
, Web-, , . , Web-
Web- - .
JavaScript , .
.
, .
( ) , , ,
, .
:
"JavaScript"
"1234567"
' .'
(
), . -
196
2 ,
.
, , , (. 14.1).
14.1. , JavaScript,
\f
\n
\r
\t
\"
\\
\x<>
Unicode
, ,
:
"\" \" "
( ) , ,
. , ;
( !).
:
13756
454.7873
0.5635
:
<>E<>.
, ( ):
5
1E-5 (10 )
23
8.546E23 (8,546 10 )
. (, 047
-012543624), 0x,
(, 0x35F). , JavaScript
.
197
, JavaScript , .
- . .
, ,
. .
, ,
(_),
, . , pageAddress, _link,
userName , 678vasya .
JavaScript , . , pageaddress pageAddress .
JavaScript .
Web-
. var, :
var x;
198
- :
x = 1234;
Web-:
y = x * 2 + 10;
:
var x = 1234;
:
var x, y, textColor = "black";
, var . - , JavaScript .
var
.
, - Web-, Web-, Web-. .
!
, undefined.
. (, ,
.) JavaScript.
JavaScript .
.
. , JavaScript,
. 14.2.
14.2.
199
14.2 ()
++
( )
--
( )
: .
;
, . , . :
++r;
r , . :
s = ++r;
r, , s.
,
. , , . ,
, .
.
. :
l = r * 3.14;
f = e / 2;
x = x + t / 3;
+ . ,
:
s1 = "Java";
s2 = "Script";
s = s1 + s2;
s JavaScript.
= .
, :
200
a = 2;
b = c = 3;
3
b c.
JavaScript ,
:
a = a + b;
a += b;
. +=.
, JavaScript, . 14.3.
14.3.
a += b;
a = a + b;
a -= b;
a = a b;
a *= b;
a = a * b;
a /= b;
a = a / b;
a %= b;
a = a % b;
a <<= b;
a = a << b;
a >>= b;
a = a >> b;
a >>>= b;
a = a >>> b;
a &= b;
a = a & b;
a ^= b;
a = a ^ b;
a |= b;
a = a | b;
(, , ) .
, true, false.
JavaScript . 14.4.
:
a1 = 2 < 3;
a2 = -4 > 0;
a3 = r < t;
201
a1 true (2 3), a2
false ( 4 ), a3 r t.
14.4.
<
>
==
<=
>=
!=
===
!==
, :
a = "JavaScript" != "Java";
a1 true, . . "2"
2, . a2 false, . . .
.
. 14.5. . 14.6 14.7
.
( . ). :
202
a = (b > 0) && (c + 1 != d);
flag = !(status = 0);
14.5.
( )
&&
( )
||
( )
14.6.
1
&& ()
|| ()
true
true
true
true
true
false
false
true
false
true
false
true
false
false
false
false
14.7.
! ()
true
false
false
true
typeof
typeof ,
. , ,
:
s = typeof("str");
s
"string", .
, typeof, . 14.8.
14.8. , typeof
"string"
"number"
203
14.8 ()
"boolean"
(. )
"object"
(. )
"function"
null
"null"
undefined
"undefined"
:
.
, ? . ? ... JavaScript
, . , , . , . , Web- 14.6
b a ;
, c 23.
14.6
var
a =
b =
c =
d =
e =
f =
a, b, c, d, e, f;
11;
"12";
a + b;
"JavaScript";
2;
d + e;
d , e , f
"JavaScript2".
, , . true 1
"1", false 0 "0". , 1 true, 0 false. false null undefined.
204
, JavaScript . , ,
, , , Web-
, .
.
, , .
, , .
:
a = b + c 10;
b c,
10.
.
:
a = b + c * 10;
c 10, b.
, , " " .
. , .
, : ,
. ( ).
. 14.9
.
14.9. ( )
++ -- ~ ! typeof
, , , ,
* / %
, ,
+ -
205
14.9 ()
||
(. )
= <>=
!
.
,
.
, ? .
:
a = (b + c) * 10;
b c, 10.
, , .
:
a = ((b + c) * 10 d) / 2 + 9;
:
1. b c.
2. 10.
3. d .
4. 2.
5. 9 .
:
a = b + c * 10 d / 2 + 9;
:
1. c 10.
2. d 2.
3. b c 10.
4. d 2.
5. 9 .
, ?
206
JavaScript
, . , .
JavaScript . . , :
{
b = "12";
c = a b;
}
, .
.
- .
.
14.7 .
14.7
if (<>)
< "">
else
< "">
, "" ,
, , :
if (<>)
< "">
if
else. , .
true, "".
false, "" ( -
207
). "" ,
Web-.
!
null undefined false. .
.
14.8 x
f h .
14.8
if (x
a =
b =
}
else
a =
b =
}
== 1) {
"";
1;
{
" ";
22222;
( 14.9).
14.9
if ((x == 1) && (y > 10))
f = 3;
else
f = 33;
, true ,
x 1 y 10.
, , . .
, .
?
, . , ?:
<> ? < ""> : < "">;
, . :
f = (x == 1 && y > 10) ? 3 : 33;
,
. . ? ,
.
208
. .
, . 14.10.
14.10
switch (< >) {
case < 1> :
< 1>
[break;]
[case < 2> :
< 2>
[break;]]
<... case>
[default :
<, >]
}
209
, a 1, out
"", 2 "", 3 "". a - , out
" ".
,
. .
JavaScript . .
, - . , .
:
for (< >; <>; <>)
< >
for.
" for".
. , , ( 1). ,
, .
. ,
. , .
true, ,
, .
, . (
). , ,
. ., false.
:
for (i = 1; i < 11; i++) {
a += 3;
b = i * 2 + 1;
}
10 . i 1 .
, 11, .
210
,
. i
1 10, .
:
for (i = 10; i > 0; i--) {
a += 3;
b = i * 2 + 1;
}
. 10.
10 , i 0; 10 1.
for (i = 2; i < 21; i += 2) b = i * 2 + 1;
2, 21,
, , 10 . ,
2 2, 4, 6... 20.
:
, .
, , . ,
.
:
do
< >
while (<>);
:
var a = 0, i = 1;
do {
a = a * i + 2;
++i;
} while (i < 20);
211
, . , ()
, :
while (<>)
< >
while.
" while" ( " do-while"!).
:
while (a < 100) {
a = a * i + 2;
++i;
}
. JavaScript Web- break continue.
break
:
while (a < 100) {
a = a * i + 2;
if (a > 50) break;
++i;
}
, a
50.
continue , . . , ,
: ,
. .
:
while (a < 100) {
i = ++i;
if (i > 9 && i < 11) continue;
a = a * i + 2;
}
, a, i 10 20.
212
JavaScript, Web- Web ( , ). , - Web-, .
, , . , , ,
.
, .
- Web-, . function:
function < >([< , >])
< >
, , Web. , .
,
. (
.) . .
;
. , .
( ) , , . return ,
:
return < >;
,
.
:
function divide(a, b) {
var c;
c = a / b;
return c;
}
213
a b, a b
.
:
function divide(a, b) {
return a / b;
}
, :
function divide(a, b) { return a / b; }
JavaScript
, ,
.
b, 2:
function divide(a, b) {
if (typeof(b) == "undefined") b = 2;
return a / b;
}
, - , b. typeof (
). b , "undefined";
b, ,
2 , . ,
, b , , .
.
.
.
, .
.
, ,
( Web-).
. ,
Web-, , . Web "" "".
Web-, Web-. :
< >([< , >])
214
, .
, .
!
, , .
divide:
d = divide(3, 2);
3 2.
:
s = 4 * divide(x, r) + y;
, , . , divide
:
s = divide(4);
s 2 4 (
) 2 ( , , ).
, :
initVars(1, 2, 3, 6);
, , ,
. , , , Web-.
,
, Web-:
s = computeValue();
. :
function cmp(c, d, e) {
var f;
f = divide(c, d) + e;
return f;
}
cmp divide.
215
.
JavaScript .
:
var someFunc;
someFunc = cmp;
someFunc cmp. ,
.
, ,
:
c = someFunc(1, 2, 3);
cmp someFunc.
, , ,
. , JavaScript.
:
var someFunc = function(c, d, e) {
var f;
f = divide(c, d) + e;
return f;
}
. ,
.
JavaScript
. JavaScript- Web-:
ceLinks.on("mouseover", function(e, t) {
Ext.get(t).addClass("hovered");
});
on (-, , ,
) , .
.
, Ext Core,
, . , .
(), .
216
, . .
!
.
, , :
var someArray = [1, 2, 3, 4];
, , someArray.
, :
a = massive[2];
. (
!)
:
someArray2 = [1, 2, , 4];
, (. .
undefined).
, :
someArray[4] = 9;
, , 4 9.
:
someArray[7] = 9;
,
9. , (undefined).
(,
, ):
someArray[2] = ["n1", "n2", "n3"];
, : "" , :
str = someArray[2][1];
str ,
, n2.
, . JavaScript ,
( , ).
217
:
var hash;
hash["AUDIO"] = "t_audio.htm";
hash["IMG"] = "t_img.htm";
hash["TITLE"] = "t_title.htm";
JavaScript ,
( ). ""
:
var someArray;
someArray = [];
, :
someArray[0] = 1;
someArray[1] = 2;
someArray[2] = 3;
,
.
.
, . ( ),
.
, JavaScript
. ,
, , .
- , JavaScript
, , .
, ,
. ,
, .
:
var myArray = ["AUDIO", "IMG", "TITLE"];
var newArray = myArray;
myArray newArray ( ).
myArray:
myArray[0] = "VIDEO";
218
newArray:
s = newArray[0];
s "VIDEO"
. myArray newArray
.
!
,
( ), ( ).
, , .
, ( ),
. , JavaScript,
.
, . , , , .
, , , , , , . ,
, , . JavaScript .
,
, .
, , , .
. ,
, .
JavaScript .
.
.
. , .
, ;
, . , ,
, .
219
, .
, "", , .
. ,
, . ,
"JavaScript" ,
.
, .
- ,
.
. .
, , . , .
()
() . , , Web, , ,
,
. "" .
, .
,
. , , , Web-.
, Web-, :
JavaScript ( );
Web- ( Web-);
JavaScript ( ). , JavaScript-,
Ext Core, .
Web- .
.
?
JavaScript, Web .
-
220
, -
.
.
, JavaScript . ,
.
!
-, .
, ,
, .
, Math ,
:
var a = Math.sqrt(2);
a 2. sqrt Math , .
sin Math , :
var b = Math.sin(0.1);
, Math, JavaScript,
Math .
Web- , Web-, Web. , Web- HTMLDocument,
document, Web-.
, HTMLDocument write, Web-,
:
document.write(", !");
221
,
CSS. (, Element Ext Core.)
. ,
. :
var elNavbar = Ext.get("navbar");
new . -
.
, . ,
.
dNow Date, .
, dNewYear
Date, 31 2009 :
var dNewYear = new Date(2009, 12, 31);
?
, .
Web-, Web-
Web-, .
Web-,
Web-, .
JavaScript, Math, -
new.
222
Math JavaScript -
.
.
, Web-
.
, :
.
,
. , ,
, . ""
, (. ,
).
:
var elNavbar = Ext.get("navbar");
parent Element,
elNavbar ( 1). 1 Element, -,
addClass ( 2).
223
,
, , ,
JavaScript- .
. , , , .
:
var sID = elParent.id;
id Element, elParent. ID
Web-.
:
Ext.enableFx = false;
Web-, elNavbar, ID .
, , .
"" ,
Web-. JavaScript
Web-; ,
Ext Core, 15.
JavaScript
Date,
JavaScript :
var dNow = new Date();
Date , . , getDate
, getMonth , getFullYear . , .
:
var sNow = dNow.getDate() + "." + dNow.getMonth() + "." +
dNow.getFullYear();
, , . <>.<>.<>.
224
JavaScript
.
String .
var s = "JavaScript";
String, JavaScript.
JavaScript,
.
. , String.
length String :
var l = s.length;
var l = "JavaScript".length;
l JavaScript.
substr , :
substr(< >[, < >]);
, .
!
JavaScript , .
, , . ,
.
Web-
var s1 = s.substr(4);
var s2 = s.substr(4, 2);
s1 "Script", s2 "Sc".
Number , Boolean :
var n = 123;
var b = false;
JavaScript
.
Array :
var a = [1, 2, 3, 4];
length, ,
. . :
var l = a.length;
var l = [1, 2, 3, 4].length;
225
Math,
JavaScript Math, .
JavaScript . JavaScript.
Object
. Object,
.
, .
Object ,
.
Object ,
. - ( 14.12).
14.12
{
< 1>: < 1>,
< 2>: < 2>,
. . .
< n-1>: < n-1>;
< n>: < n>
< 1>: <, 1>,
< 2>: <, 2>,
. . .
< n-1>: <, n-1>,
< n>: <, n>
}
JavaScript Object, - .
:
var oConfig = { tag: "DIV",
id: "cother",
html: " ." };
226
:
var oConfig2 = { url: "pages/t_img.htm",
success: function (response, opts){
var obj = Ext.decode(response.responseText);
}
};
Web-.
DOM
, Web-, :
, Web- ,
(, , , .);
, Web-.
.
, Web- HTMLDocument. document
Web-, Web-.
Web-, ,
, HTMLElement.
, Web-,
. , HTMLParagraphElement,
HTMLImageElement,
HTMLLinkElement, HTMLTableElement.
Web- Web-
. ,
HTMLParagraphElement,
HTMLImageElement,
HTMLLinkElement, HTMLTableElement.
, Web-. -
227
, , "" . ,
, ,
. .
JavaScript
, . .
:
var dNow = new Date();
dNow.someProperty = 3;
228
oConfig
style
:
oConfig.style = "color: red;";
, , .
Web- Web- ,
Web- .
.
JavaScript.
, .
.
, ,
.
, , , , , . .
(;).
:
y = y1 * y2 + x1 * x2;
, :
y = y1 * y2 +
x1 * x2;
:
y =
y1 *
y2 +
x1 *
x2;
, . . .
, y2:
y = y1 * y
2 + x1 * x2;
229
JavaScript , . JavaScript-
.
JavaScript
2 7
HTML CSS, Web- ,
Web- - .
, JavaScript .
JavaScript .
, , / (),
:
/
var dNow = new Date();
/ .
, , /* */. , :
/*
,
.
*/
var dNow = new Date();
/* */.
JavaScript.
?
JavaScript, , , , . , Web- . Web.
Ext Core,
. Web-,
. .
15
Ext Core
Web-
, Web-, Web- JavaScript,
. Web-,
Web- ,
. Web...
Ext Core, Web- . , !..
, . Web-, , .
, Ext Core!
Ext Core
Ext Core. ,
"" Web-.
Ext Core
? Web-, ? ,
Web-, ?
- , Ext Core , .
, 14. Web- Web -
231
Web-.
, Web-. , DOM.
W3C , DOM , HTML CSS. , Web .
Web-
Web- . , - , ,
Web-, .
.
, , , . , , Web , ,
, , DOM, .
Web- , , DOM, , , . Ext Core.
. , Web- -
. , Web , , Firefox, Internet Explorer. , Internet Explorer, ,
, HTML 5 CSS 3, Opera,
Chrome, Safari DOM . Web-, -
.
, Web- , , , . , Web, , Window.
, DOM, Web-. Ext Core .
Prototype, jQuery "" Ext Core
. Web-. ; , , jQuery.
Ext Core.
232
Ext Core
Ext Core Web- http://www.extjs.com/
products/core/?ref=family "" Web-. Web- , .
Ext Core ZIP,
ext-core-< >.zip , "" .
3.1.0, - .
Ext Core Web- ext-core.js, . JavaScript , ,
, Web-
.
Ext Core Web-,
, .
Web- ( <HEAD>) <SCRIPT>
:
<SCRIPT SRC="ext-core.js"></SCRIPT>
Web-, Web-,
, Web-
, DOM . ?
<SCRIPT>, ,
HTML- Web-, . , Web , DOM Web- ,
.
Ext Core : Web-, Web-, , .
onReady Ext:
233
Ext.onReady(function() {
<, Web->
});
Ext Core
, Ext Core , Web-,
, , .
.
JavaScript " ",
. , Web- . .
, Ext, . Web-,
onReady . , ""
Ext.
Ext Ext Core Ext.
Element (, Ext.Element, Ext)
14. Web-,
.
Element "" Web-
HTMLElement ,
. , Web-, , .
Element ,
Web-.
Element .
CompositeElementLite (, Ext.CompositeElementLite) Element (
14). - , , , ,
( ).
234
Web-
, Web-,
, Element, -
. ?
Ext, .
get Element,
Web-:
Ext.get(< ID>|< HTMLElement>)
, . , ID,
Web-.
:
var elNavbar = Ext.get("navbar");
Element, ""
navbar, .
7 , ID Web . , Web- . , -
Web- - , , "" , , navbar.
get HTMLElement, Web-. ,
HTMLElement
235
Ext Core. , -
.
get , .
, Ext Core
, , , (. 14). -
Web- get Element .
Web-
Element . ,
, .
- .
( Ext Core ) .
. , Web , ,
Web-.
, Web- Web-,
. ""
Element, Web-. .
Ext Core fly, :
Ext.fly(< ID>|< HTMLElement>)
get
Web- ( Element) , .
, Web-,
:
var elNavbar = Ext.fly("navbar");
fly , get, ,
Element,
Web-, , .
.
get , Web- -
.
fly , Web-
.
getBody
Element, Web- ( <BODY>):
var elBody = Ext.getBody();
236
, Web- ( ID )
Element, .
:
var htelNavbar = Ext.getDom("navbar");
HTMLElement, ""
navbar.
:
var elCMain = Ext.get("cmain");
var htelCMain = Ext.getDom(elCMain);
HTMLElement,
cmain. get Element Ext Core, getDom HTMLElement Web-.
dom Element Web-
HTMLElement, Web-:
var elCMain = Ext.get("cmain");
var htelCMain = elCMain.dom;
Ext Core
HTMLElement. dom getDom .
Web-
,
Web-,
( CSS).
select Ext CompositeElementLite, Element, Web, CSS:
Ext.select(< CSS>)
. ,
.
Ext Core
CSS. .
237
< > , .
< 1> < 2> , 2 -
1, ( ,
1, ).
< 1> > < 2> < 1>/< 2> , -
2 1.
< 1> + < 2> , 2, -
1 .
< 1> ~ < 2> , 2, -
1 , .
* , .
.< > .
[< >] , .
[< >=<>] ,
.
[< >!=<>] ,
, .
[< >^=<>] ,
, .
[< >$=<>] ,
, .
[< >*=<>] ,
, .
[< >%=2] , -
, 2.
:first-child .
:last-child .
:only-child .
:nth-child(<>) .
:nth-child(even) :even .
:nth-child(odd) :odd .
:first .
:last .
:nth(<>) .
:contains(<>) ,
.
238
:nodeValue(<>) , .
:not(<>) , .
:has(<>) , , -
.
:next(<>) ,
.
:prev(<>) ,
.
{< >=<>} ,
.
{< >!=<>} ,
, .
{< >^=<>} ,
, .
{< >$=<>} ,
, .
{< >*=<>} ,
, .
{< >%=2} , -
, 2.
Web- , select
CompositeElementLite,
Element ("" ).
CompositeElementLite, Element, :
var clContainers = Ext.select("DIV");
cmain:
var clContainers = Ext.select("DIV[id=cmain]");
"" navbar,
:
var clOuterItems = Ext.select("UL[id=navbar] > LI");
, :
var clP = Ext.select("DIV > P:first");
, :
var clHR = Ext.select("P + HR");
239
Web-:
var clPA = Ext.select("P, ADDRESS");
,
Web-
, - Web , "" . Ext Core Element,
.
parent Web- Element:
< Element>.parent([< CSS>[, true]])
, , CSS, , ;
. , . .,
( <HTML>).
,
.
, , true,
parent Web- HTMLElement.
, null.
elNavbar "" navbar, , elCNavbar :
var elNavbar = Ext.get("navbar");
var elCNavbar = elNavbar.parent();
cnavbar.
navbar,
<SPAN>:
var elSpan = elNavbar.parent("SPAN");
, elSpan
null.
select , ,
CompositeElementLite:
< Element>.select(< CSS>)
CSS.
240
:
var clUL = elNavbar.select("LI > UL");
clUL navbar,
.
child Web Element:
< Element>.child([< CSS>[, true]])
, , CSS, , ;
. , .
, .
, , true,
child Web- HTMLElement.
, null.
:
var elUL = elNavbar.child();
elUL navbar.
:
var elUL = elNavbar.child("LI:nodeValue=CSS");
elUL navbar.
next prev , , Web- , :
< Element>.next|prev([< CSS>[, true]])
, parent child.
:
var elDiv = Ext.get("cmain").next();
241
elDiv ccopyright
cmain.
:
var elP = elNavbar.prev();
, parent child.
:
var elCHeader = Ext.get("cmain").first();
var elCCopyright = Ext.get("cmain").last();
elCHeader cheader,
elCCopyright ccopyright. , ,
"" cmain.
is true, Web- , false .
15.1 , cmain
<P>. , .
15.1
< Element>.is(< CSS>)
var elCMain = Ext.get("cmain");
if (elCMain.is("P"))
var s = " ."
else
var s = " . !";
Web-
Web-, ,
,
Element.
getWidth getHeight , , Web- :
< Element>.getWidth|getHeight([true])
242
,
Web-, .
true, , .
:
var iWidth = Ext.get("cmain").getWidth();
iWidth cmain.
setWidth setHeight , ,
Web-:
< Element>.setWidth|setHeight(<>)
, ,
:
Ext.get("cmain").setWidth(700);
getX getY , ,
Web-
. , , Web-. .
:
var elCMain = Ext.get("cmain");
var x = elCMain.getX();
var y = elCMain.getY();
getOffsetTo Web- :
< Element>.getOffsetTo(< Element>)
Element, Web-, .
getOffsetTo ( ): , .
var m = Ext.get("cmain").getOffsetTo(Ext.get("cnavbar"));
var x = m[0];
var y = m[1];
x y, , cmain cnavbar.
243
Web-
Web-
Web-
Web-, Web- ( ). Ext.lib.Dom.
getDocumentWidth getDocumentHeight , , Web- .
:
var pageWidth = Ext.lib.Dom.getDocumentWidth();
var pageHeight = Ext.lib.Dom.getDocumentHeight();
!
- Ext Core.
JavaScript- .
, Web-. Ext Core
Element.
getAttribute :
< Element>.getAttribute(< >)
. .
:
var s = Ext.get("cmain").child("A:first").getAttribute("href");
244
Object.
, , .
Ext Core Object,
, .
:
var oConf = { target: "_blank" };
var s = Ext.get("cmain").select("A").set(oConf);
cmain
TARGET, "_blank". ,
target "_blank".
id ID, . .
Web-:
var sID = Ext.getBody().child("DIV:last").id;
Web- "ccopyright".
, Web-
id . , ,
ID .
set:
Ext.getBody().child("DIV:last").set({ id: "lastdiv" });
!
, Web- Web- . .
""
Web- . , Ext Core .
Element, ,
Web- ("").
addClass Web-. ,
:
< Element>.addClass(< >)
:
Ext.select("P").addClass("someclass");
Web- someclass.
245
removeClass Web-. , :
< Element>.removeClass(< >)
:
Ext.select("P").removeClass("someclass");
Web-
someclass.
toggleClass Web, ,
:
< Element>.toggleClass(< >)
:
Ext.select("P").toggleClass("someclass");
replaceClass Web- :
< Element>.replaceClass
(< , >,
< , >)
"" :
Ext.select("P").replaceClass("someclass", "otherclass");
radioClass Web :
< Element>.radioClass(< >)
:
elNavbar.child("UL LI:nodeValue=IMG").radioClass("hovered");
hovered ,
, "IMG",
.
hasClass true,
Web-, false :
< Element>.hasClass(< >)
:
if (Ext.get("cnavbar").hasClass("hovered")) {
var s = " "
else
var s = " ?..";
246
, -
Web-, . Element, .
getStyle Web-:
< Element>.getStyle(< >)
.
.
, getStyle,
, Web-
.
, getStyle , Web-.
:
var marginLeft = elNavbar.getStyle("margin-left");
getColor , :
< Element>.getColor(< >,
< >[, <>])
. , ; , , , .
. ,
.
, , , . ,
#.
getColor RGB-
<>RRGGBB,
RR, GG BB , , , .
:
var color = Ext.getBody().getColor("color", "#FFFFFF");
247
color2 "3B4043".
, getColor (, ).
setStyle .
:
< Element>.setStyle(< >,
< >)
, . .
:
Ext.getBody().setStyle("color", "black");
Web- black.
setStyle . ,
:
< Element>.setStyle(<>)
:
Ext.getBody().setStyle({ color: "black", background-color: "white" });
Web-.
setOpacity
Web-:
< Element>.setOpacity(< >)
0 ( ) 1 ( ):
Ext.get("cheader").setOpacity(0.5);
clearOpacity Web- . :
Ext.get("cheader").clearOpacity();
display.
true false;
Web- , .
248
:
Ext.get("cheader").setDisplayed(false);
Ext.get("cheader").setDisplayed("none");
cnavbar.
Web-
Ext Core Element, Web- .
setVisibilityMode , Web-: display
visibility. ( 9.)
< Element>.setVisibilityMode(< >)
. Ext.Element.DISPLAY
Ext.Element.VISIBILITY; display, visibility.
:
Ext.get("navbar").setVisibilityMode(Ext.Element.DISPLAY);
setVisibilityMode Web-
, Web-
visibility.
setVisible Web-
:
< Element>.setVisible(true|false)
toggle Web-,
, , . :
Ext.get("navbar").toggle();
249
, Web-
setDisplayed, .
display.
Web-
Web-!
Web- . DomHelper.
append Web-
:
Ext.DomHelper.append(< >, <>
[, true])
Web-,
. , Element.
, , Web-.
:
tag ;
html HTML-, ;
cls , ;
children cn ,
;
< > .
15.2 cmain , :
250
<P> ( tag );
" Web-!" ( html -
);
someclass ( cls);
newparagraph ( id, ID).
, ( 15.3).
15.3
var oConf2 = { tag: "UL",
children: [
{ tag: "LI",
{ tag: "LI",
{ tag: "LI",
]
};
Ext.DomHelper.append("cmain",
oConf2);
children .
,
, .
insertFirst append
, Web-
:
Ext.DomHelper.insertFirst(< >, <>
[, true])
, , append.
:
Ext.DomHelper.insertFirst("cmain", oConf);
, oConf, cmain.
insertBefore insertAfter Web-,
, :
Ext.DomHelper.insertBefore|insertAfter(< "">,
<>[, true])
251
:
var oConf3 = { tag: "HR" }
Ext.DomHelper.insertBefore("navbar", oConf3);
Ext.DomHelper.insertAfter("navbar", oConf3);
navbar .
insertHtml Web- HTML- :
Ext.DomHelper.insertHtml(<>,
< "" >, <HTML->)
, , Web-:
"beforeBegin"
"" ;
"afterBegin"
;
"beforeEnd"
;
"afterEnd" -
"" .
Web-, "" . HTMLElement ( Element!).
HTML-, .
insertHtml HTMLElement,
Web-. ,
Element .
:
var htelCMain = Ext.getDom("cmain");
Ext.DomHelper.insertHtml("afterBegin", htelCMain,
"<P ID=\"newparagraph\" CLASS=\"someclass\"></P>");
cmain newparagraph
someclass.
:
var htelNavbar = Ext.getDom("navbar");
Ext.DomHelper.insertHtml("beforeBegin", htelNavbar, "<HR>");
Ext.DomHelper.insertHtml("afterEnd", htelNavbar, "<HR>");
252
, , HTML.
overwrite Web- , :
Ext.DomHelper.overwrite(< >,
<>|<HTML->[, true])
Web-,
. , Element.
,
, HTML-, .
overwrite HTMLElement, Web-. , , true, Element.
:
var oConf4 = { tag: "P",
html: " ."
}
Ext.DomHelper.overwrite("cmain", oConf4);
cmain, .
markup HTML-.
:
Ext.DomHelper.markup(<HTML->)
var s = Ext.DomHelper.markup(oConf4);
s "<P> .</P>".
Web- Element. ,
.
createChild Web-
:
< Element>.createChild(<>
[, <, >])
, Web-.
, Web-
. - - Element,
.
253
createChild Element, .
:
var elCMain = Ext.get("cmain");
elCMain.createChild(oConf, elCMain.first());
, oConf,
cmain .
insertFirst ,
Web- :
< Element>.insertFirst(<>)
Ext.get("cmain").createChild(oConf);
replaceWith ,
Web- .
15.4 cmain
, oCont5, .
15.4
< Element>.replaceWith(<>)
var oConf5 = { tag: "DIV",
html: "<P> .</P>",
id: "cmain"
}
Ext.get("cmain").replaceWith(oConf5);
wrap ,
Web- ,
:
< Element>.wrap([<>])
, . wrap <DIV>.
:
Ext.select("UL[id=navbar]").wrap();
navbar, ,
. , wrap "", .
,
cmain, :
Ext.select("DIV[id=cmain] > P").wrap({ tag: "BLOCKQUOTE" });
254
, Ext Core
Web-. , remove Element. Web , .
:
Ext.get("cmain").remove();
cmain .
Web-:
, .
Web-, ,
Web-. 14, Web HTML- Web-, <SCRIPT>. , Web- ( HTML-) (
Web-).
Web-,
, Web- . - .
Web- , Web-
Web-. ,
Web- " ",
Web- " ".
" ", " ".
, , .
, .
, Web-
Web-. Web- Web . Web- .
? !
Web- , . ( 14.)
Web-
, . -
255
Web- , .
, .
, . .
Web-,
, . , " " - ,
.
. , " ", . , , " ", .
Web-, . Web .
Web- . ,
" " .
, .
Element
,
Element Ext Core, . 15.1. , Web.
15.1. Element
abort
, -
. . ,
blur
, . .
,
click
Web-
mousedown mouseup. .
,
dblclick
Web. . ,
error
, - .
. ,
256
15.1 ()
focus
, . . ,
keydown
. . , ,
keypress
- keydown keyup. ,
, . . , ,
keyup
. .
, ,
load
, - .
.
mousedown
. .
mousemove
Web-.
.
mouseout
, Web-. .
mouseover
, Web-. .
mouseup
. .
, . .
on Element
Web- :
< Element>.on(<>, <->)
,
. . 15.1.
, .
:
EventObject,
( );
257
HTMLElement, Web-
, .
, - HTMLElement, Web-,
, ,
. ,
;
. - this.
:
Ext.get("navbar").on("mouseover",
function(e, t) {
Ext.get(this).addClass("hovered");
}
);
navbar mouseover. on , .
-.
- this,
HTMLElement, Web-, . Element, get. Element hovered addClass.
, - , , , .
-:
Ext.get("navbar").on("mouseover",
function() {
Ext.get(this).addClass("hovered");
}
);
, ,
on:
function navbarMouseOver() {
Ext.get(this).addClass("hovered");
}
Ext.get("navbar").on("mouseover", navbarMouseOver);
, Web-.
removeAllListeners Element Web- . .
258
:
Ext.get("navbar").removeAllListeners();
, , .
, , "", . mouseOver
mouseOut Web-, 14.
15.5.
15.5
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) {
Ext.get(this).addClass("hovered");
});
ceLinks.on("mouseout", function(e, t) {
Ext.get(this).removeClass("hovered");
});
259
, . , , mouseOver, Web-.
"" "" , cnavbar Web-,
.
"AUDIO" .
<CODE>, , , ( <A>),
"AUDIO". , mouseOver
- <A>! "" <CODE>,
<LI>, "AUDIO", .
, mouseOver . ,
, <LI>, <CODE> <A>. , !
...
Web-. ,
Web-,
. , , .
. , : , .
EventObject,
. .
HTMLElement,
Web-, . , . .
- .
, -
this,
HTMLElement, Web, , . . ,
.
, .
Web- ,
Web-.
!
Web-, 14, , 15.6.
15.6
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) {
Ext.get(t).addClass("hovered");
});
260
ceLinks.on("mouseout", function(e, t) {
Ext.get(t).removeClass("hovered");
});
- , ( this), ,
( t). ?
"AUDIO" . <A> mouseover, <CODE> <LI>.
<LI> . hovered
<LI>, <A>!
( hovered
. 14), . !
. 15.1, Element, , , . -, ...
"" , , .
. EventObject,
. .
, Web-, Web , .
, click Web-, focus .
, , Web-
, ,
. (
) EventObject.
.
. EventObject
, - EventObject,
. ,
.
getCharCode - ,
, Unicode . .
-
, Windows.
getKey Unicode
. .
261
Web- http://msdn.microsoft.com/
en-us/library/ms927178.aspx.
getPageX getPageY , , Web-
. .
preventDefault . .
stopPropagation .
.
stopEvent
. preventDefault
stopPropagation.
.
Web-, 14,
15.7, , .
15.7
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) {
Ext.get(this).addClass("hovered");
e.stopEvent();
});
ceLinks.on("mouseout", function(e, t) {
Ext.get(this).removeClass("hovered");
e.stopEvent();
});
CompositeElementLite
,
Web-.
Web-:
var elCMain = Ext.get("cmain");
:
var clContainers = Ext.select("DIV");
, select Ext
CompositeElementLite Element,
CSS Web-.
CompositeElementLite .
, CompositeElementLite
Element, ,
262
, . . Web. (, .)
getCount .
:
var i = clContainers.getCount();
i
clContainers 5.
item
Element:
< CompositeElementLite>.item(<>)
,
.
:
var elDiv = clContainers.item(i 1);
indexOf
:
< CompositeElementLite>.indexOf(<>)
.
, Element HTMLElement.
, indexOf 1.
:
var ind = clContainers.indexOf("cnavbar");
263
, .
:
Element;
CompositeElementLite;
.
,
this.
15.8 ,
clContainers, hovered.
15.8
clContainers.each(function(el, cl, ind)
{
el.addClass("hovered");
}
);
Web- 15.9.
15.9
clContainers.each(function(el, cl, ind)
{
this.addClass("hovered");
}
);
:
clContainers.addClass("hovered");
Ext Core.
.
Web-
, Ext Core , JavaScript-.
Web-, .
Ext Core . Web-.
HTMLDocument, Web-. , Web-,
document. .
264
HTMLDocument .
.
title Web- ( <TITLE>)
. , 1,
Web-, Web-.
:
var sTitle = document.title;
sTitle Web-.
Web- :
document.title = "";
sHREF - Web-.
:
document.location.href = "http://www.w3.org";
,
-:
window.alert(" Window!");
confirm -
K . - ,
- :
window.confirm(<, ->)
,
-.
265
, resize
Web- ( ).
HTMLElement, , Web-. .
textContent Web-
. , null.
:
var htelCHeader = Ext.getDom("cheader");
var s = htelCHeader.textContent;
htelCHeader.textContent = "!" + s + "!";
cheader,
cheader.
innerHTML HTML- Web .
:
var htelCHeader = Ext.getDom("cheader");
var s = htelCHeader.textContent;
htelCHeader.innerHTML = "<EM>" + s + "</EM>";
Web-
. , Ext Core. Web-, .
?
Ext Core ,
Web-.
,
.
. , !
16
Web-
Ext Core. ,
, ... ?
. Web, ( ) ,
Web-.
, "" Web-.
, Web-,
Web-.
. (, 14; ,
.)
Web- , .
, ,
"" , .
, -
Web-.
Web-, ,
":".
, ? Ext Core .
, , Web ,
Web- .
16. Web-
267
main.css
<BODY>. , 16.1.
16.1
BODY
{ color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif;
margin: 0px;
overflow: hidden }
overflow hidden,
Web- . , ,
,
.
. Web- main.js. , onReady Ext, 16.2.
16.2
function adjustContainers() {
var clientWidth = Ext.lib.Dom.getViewportWidth();
var clientHeight = Ext.lib.Dom.getViewportHeight();
var cNavbarWidth = Ext.get("cnavbar").getWidth();
var cHeaderHeight = Ext.get("cheader").getHeight();
var cCopyrightHeight = Ext.get("ccopyright").getHeight();
Ext.get("cheader").setWidth(clientWidth);
var cNavbarHeight = clientHeight cHeaderHeight cCopyrightHeight 30;
Ext.get("cnavbar").setHeight(cNavbarHeight);
Ext.get("cmain").setHeight(cNavbarHeight);
Ext.get("cmain").setWidth(clientWidth cNavbarWidth 10);
Ext.get("ccopyright").setWidth(clientWidth);
}
, onReady
Ext, :
Ext.fly(window).on("resize", adjustContainers);
adjustContainers();
268
? .
, main.js, adjustContainers, resize Web-.
. .
Web-:
var clientWidth = Ext.lib.Dom.getViewportWidth();
var clientHeight = Ext.lib.Dom.getViewportHeight();
,
. ,
.
cnavbar, cheader
ccopyright:
var cNavbarWidth = Ext.get("cnavbar").getWidth();
var cHeaderHeight = Ext.get("cheader").getHeight();
var cCopyrightHeight = Ext.get("ccopyright").getHeight();
.
cheader
Web-:
Ext.get("cheader").setWidth(clientWidth);
cnavbar cmain:
var cNavbarHeight = clientHeight cHeaderHeight cCopyrightHeight 30;
cheader
ccopyright 30
ccopyright .
cnavbar cmain:
Ext.get("cnavbar").setHeight(cNavbarHeight);
Ext.get("cmain").setHeight(cNavbarHeight);
cmain:
Ext.get("cmain").setWidth(clientWidth cNavbarWidth 10);
,
cnavbar 10 (
navbar margin-right).
ccopyright Web-:
Ext.get("ccopyright").setWidth(clientWidth);
adjustContainers .
16. Web-
269
, , onReady Ext.
adjustContainers resize
Web-:
Ext.fly(window).on("resize", adjustContainers);
,
Web-:
adjustContainers();
. .
, . 16.3 14
JavaScript-.
16.3
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) {
Ext.get(this).addClass("hovered");
});
ceLinks.on("mouseout", function(e, t) {
Ext.get(this).removeClass("hovered");
});
.
, ,
"", :
var ceLinks = Ext.select("UL[id=navbar] LI");
mouseover -, :
ceLinks.on("mouseover", function(e, t) {
Ext.get(this).addClass("hovered");
});
this
HTMLElement, , , , .
get Element addClass hovered ( . 14), .
270
mouseout :
ceLinks.on("mouseout", function(e, t) {
Ext.get(this).removeClass("hovered");
});
hovered , .
Web-
Web- , .
main.css
#navbar A<>. , 16.4.
16.4
#navbar A:focus,
#navbar A:hover,
#navbar A:active,
#navbar A:visited { color: #576C8C;
text-decoration: none }
navbar .
, .
Web- main.js , onReady Ext , 16.5.
16.5
ceLinks.on("click", function(e, t) {
var elA = Ext.get(this).child("A");
if (elA) {
var href = elA.getAttribute("HREF");
e.stopEvent();
window.location.href = href;
}
});
16.5 click , , -, .
.
16. Web-
271
, , .
,
, :
if (elA) {
, child
Element, JavaScript true. , ,
"" .
, child null. JavaScript false, , "" .
"" HREF <A> - :
var href = elA.getAttribute("HREF");
:
e.stopEvent();
...
Web-, ""
.
click Web-.
click, , ,
"" ,
. Web, "" ,
. .
-:
window.location.href = href;
}
"" .
. Web-, Web, ,
.
272
, Web- Web-. ,
.
tags, Web-,
HTML. , bak.
Web- index.htm.
Web- t_audio.htm, <AUDIO>.
1. Web- index.htm t_audio.htm
tags.
2.
t_audio.htm.bak.
Web-,
- .
5. Web- t_audio.htm.
Web-, ,
.
Web- CSS, . css_index.htm,
samples_index.htm about.htm.
"" , ,
,
. - , .
16. Web-
273
.
, "" , ?
!
.
Web-, Web-
("HTML", "CSS" ""), ,
"" .
Web-, , , , Web .
.
display (. 9) Element, Web-.
Web- main.js - , onReady Ext, , 16.6.
16.6
function showInnerList(iIndex) {
var elNavbar = Ext.get("navbar");
var ceInnerLists = elNavbar.select("UL");
ceInnerLists.setDisplayed(false);
if (iIndex) {
var sSelector = "UL:nth(" + iIndex + ")";
elNavbar.child(sSelector).setDisplayed(true);
}
}
showInnerList
,
. ,
.
274
.
"" , :
var elNavbar = Ext.get("navbar");
:
var ceInnerLists = elNavbar.select("UL");
, setDisplayed
:
ceInnerLists.setDisplayed(false);
, showInnerList :
if (iIndex) {
, iIndex , true, .
iIndex null, false,
.
showInnerList , .
CSS, ,
:
var sSelector = "UL:nth(" + iIndex + ")";
:
elNavbar.child(sSelector).setDisplayed(true);
}
showInnerList .
,
onReady Ext, :
showInnerList(outerIndex);
showInnerList,
outerIndex.
, .
Web- index.htm ( <HEAD>)
:
<SCRIPT>
outerIndex = 1;
</SCRIPT>
16. Web-
275
main.js, showInnerList, .
Web 2.0,
Web- .
, . . Web- Web- Web-
, Web- "" Web- .
Web- Web-, HTML. Web-.
Web- css_index.htm Web-,
CSS, :
<SCRIPT>
outerIndex = 2;
</SCRIPT>
, Web-
"CSS".
Web- samples_index.htm Web-,
, ... , . (: .)
Web- about.htm :
<SCRIPT>
outerIndex = null;
</SCRIPT>
"" ,
.
Web- . , ?
,
Web-
, , ,
"" Ext Core .
.
- , Web-.
"" ( , ). .
276
"" .
"" , , -
"" .
"" , ,
.
.
main.css 16.7.
16.7
.selected,
#navbar .selected
#navbar .selected
#navbar .selected
#navbar .selected
#navbar .selected
A:link,
A:focus,
A:hover,
A:active,
A:visited { color: #F8F8F8;
background-color: #576C8C }
selected, , , "" ,
, , .
. Web- main.js.
showInnerList, , , 16.8.
16.8
function selectItem(iIndex, sText) {
var elNavbar = Ext.get("navbar");
elNavbar.select("LI").removeClass("selected");
var ceInnerLists = elNavbar.select("UL");
ceInnerLists.setDisplayed(false);
var sSelector = "> LI:nth(" + iIndex + ")";
var elOuterItem = elNavbar.child(sSelector);
var elInnerList = elOuterItem.child("UL");
if (elInnerList) {
elInnerList.setDisplayed(true);
if (sText) {
sSelector = "LI:has(:nodeValue(" + sText + "))";
elOuterItem.child(sSelector).addClass("selected");
}
} else
elOuterItem.addClass("selected");
}
16. Web-
277
selectItem :
"" ,
,
.
"" ,
, ""
, , .
, -
, . , .
.
"" , :
var elNavbar = Ext.get("navbar");
, , "", selected:
elNavbar.select("LI").removeClass("selected");
.
:
var ceInnerLists = elNavbar.select("UL");
ceInnerLists.setDisplayed(false);
showInnerList .
, CSS, "" selectItem , :
var sSelector = "> LI:nth(" + iIndex + ")";
var elOuterItem = elNavbar.child(sSelector);
, , ,
:
var elInnerList = elOuterItem.child("UL");
Element,
true, . null,
false, .
278
, :
elInnerList.setDisplayed(true);
, selectItem
, :
if (sText) {
, CSS,
, ,
:
sSelector = "LI:has(:nodeValue(" + sText + "))";
,
, selected:
elOuterItem.child(sSelector).addClass("selected");
}
"" ,
selected:
} else
elOuterItem.addClass("selected");
.
, onReady Ext,
showInnerList. :
selectItem(outerIndex, innerText);
, innerText null.
Web-, main.js,
selectItem,
. ,
.
16. Web-
279
Web- t_audio.htm
:
<SCRIPT>
outerIndex = 1;
innerText = "AUDIO";
</SCRIPT>
"AUDIO".
Web- Web- .
Web-, HTML CSS, .
Web- .
Web-. .
, -
sample. : -,
"" , -, , Web-.
-
.
,
( ":" ).
(. . -
) .
. , " ". ,
Web- .
Web- .
Web-.
main.css :
.sample
{ padding: 5px;
border: thin dotted #B1BEC6 }
.sample > :first-child { margin: 0px 0px;
cursor: pointer }
280
sample, "" .
.
(
) " ".
Web- main.js - , onReady Ext, 16.9.
16.9
function showHideSample(e, t) {
var elDiv = Ext.fly(t).parent(".sample");
var ceSampleText = elDiv.select("*:not(:first-child)");
ceSampleText.setVisibilityMode(Ext.Element.DISPLAY);
ceSampleText.toggle();
}
function prepareSamples() {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind){
var elH6 = el.child(":first");
elH6.on("click", showHideSample);
elH6.on("mouseover", function(e, t) {
Ext.get(this).parent("DIV").addClass("hovered");
});
elH6.on("mouseout", function(e, t) {
Ext.get(this).parent("DIV").removeClass("hovered");
});
var ceSampleText = el.select("*:not(:first-child)");
ceSampleText.setDisplayed(false);
});
}
:
ceSamples.each(function(el, cl, ind){
16. Web-
281
:
var elH6 = el.child(":first");
click
showHideSample:
elH6.on("click", showHideSample);
mouseover,
:
elH6.on("mouseover", function(e, t) {
Ext.fly(this).parent("DIV").addClass("hovered");
});
Web-, , . . ,
hovered.
- mouseout, hovered:
elH6.on("mouseout", function(e, t) {
Ext.fly(this).parent("DIV").removeClass("hovered");
});
- (
):
var ceSampleText = el.select("*:not(:first-child)");
:
ceSampleText.setDisplayed(false);
});
showHideSample.
Web-, :
var elDiv = Ext.fly(t).parent(".sample");
, .
- , :
var ceSampleText = elDiv.select("*:not(:first-child)");
,
display, (, , ,
):
ceSampleText.setVisibilityMode(Ext.Element.DISPLAY);
ceSampleText.toggle();
282
,
display, .
prepareSamples ,
onReady Ext:
prepareSamples();
Web- .
?
Web-.
Web- , , ,
Web-, . ,
Web. , , .
IV Web- Web: . Web- .
Ext Core .
IV
.
17.
18.
19.
17
Web-:
JavaScript, Web- Ext Core Web-, . Web .
Web-, ,
Web-, ""
, , . .
Web-, "". Web-.
- . . . - ,
.
, Web-.
Web-, -, ,
-, , -, .
.
.
Web-
10, Web-. .
Web-, , index.htm, Web. ? ,
Web-, , . Web HTML-.
HTML- Web-, . , HTML- ... ,
Web-: , , .
286
IV. .
( ) , ,
, , . Web-,
( , Web- .)
, .
: HTML-, index.htm, Web- . Web-
Web- . Web-, , .
Web-, , css_index.htm.
: Web-, .
.
Web-,
. Web-, , .
, Web- .
, HTML-
Web- Web-
, . ( 16, , .)
: Web-, Web-,
.
Web- .
Web- Web-, , . , Web-, , .
, Web-, ,
Web-. Web-.
Web-.
- Web- , , , HTML- Web- Web-. , , , , ...
.
1. : Web- Web-
Web-, .
, .
Web-, , -
Web- Web-, ,
17.
287
. Web- .
Web- Web- Web-.
Web- , -
HTML-, .
Web- ( )
, , , ,
.
Web .
. -,
Web- ,
HTML-, , Web- Web-. -, - Web-, :
Web-, .
, Web-, ""
, , .
Web-, ? , Web-
. Ext Core ,
JavaScript-.
Web-
Web- Web- Ext Core
load Element:
< Element>.load(<->|<>)
load - ,
Web-,
, .
:
url - .
.
success , ,
.
failure , ,
.
callback , ,
, .
288
IV. .
timeout
. , !
Web-, .
Web- Web-
Web-.
17.
289
!
Web-, , Web-. Web- ! "" Web- ,
.
290
IV. .
, , cmain. ,
( , 16). -, .
"" ,
, , :
(
). , ;
(
, , , ).
, ;
, , .
"" , , :
( );
(
,
, ,
);
, .
, :
(
,
);
, .
. , , Web- index.htm .
,
sample ("" ). cmain , , . .
, , .
, . !
17.
291
main.js :
var elLastInnerList = null;
var elLastItem = null;
292
IV. .
} else {
if ((elLastItem) && (elLastItem.dom != elLI.dom))
elLastItem.removeClass("selected");
elLI.addClass("selected");
elLastItem = elLI;
}
}
}
17.1 .
loadFragment
EventObject, ,
:
if (e)
e.stopEvent();
, :
if (elA) {
cleanupSamples,
:
cleanupSamples();
.
- :
var href = elA.getAttribute("HREF");
cmain , -:
Ext.get("cmain").load({ url: href, success: prepareSamples });
prepareSamples,
. 16.
,
, , navbar :
if (elLI.parent("UL").id == "navbar") {
, , "" navbar,
.
17.
293
"" , , , , :
var elInnerList = elLI.child("UL");
, :
if (elInnerList) {
, ,
- , . . elLastItem - , null:
if (elLastItem) {
elLastItem.removeClass("selected");
elLastItem = null;
}
, selected,
, elLastItem null, , .
, - ( elLastInnerList - , null),
, , :
if ((elLastInnerList) && (elLastInnerList.dom !=
elInnerList.dom))
elLastInnerList.setDisplayed(false);
, .
, , ,
. Element,
Ext Core, HTMLElement Web-.
, Ext Core Element, , Web-. HTMLElement, Web-,
.
HTMLElement,
dom Element. 15.
, ,
:
elInnerList.setDisplayed(true);
... elLastInnerList:
elLastInnerList = elInnerList;
IV. .
294
"" ,
, , :
} else {
, - (
elLastInnerList - , null):
if (elLastInnerList) {
elLastInnerList.setDisplayed(false);
elLastInnerList = null;
}
,
elLastInnerList null, ,
.
, - ( elLastItem - , null),
, :
if ((elLastItem) && (elLastItem.dom != elLI.dom))
elLastItem.removeClass("selected");
HTMLElement Web-.
- ,
, , selected
.
, ,
selected:
elLI.addClass("selected");
elLastItem:
elLastItem = elLI;
}
, , , :
} else {
:
if ((elLastItem) && (elLastItem.dom != elLI.dom))
elLastItem.removeClass("selected");
elLI.addClass("selected");
elLastItem = elLI;
}
}
, - ,
, . , -
17.
295
, selected . ,
, selected,
elLastItem. loadFragment
.
hideInnerLists,
Web- index.htm. :
function hideInnerLists() {
var ceInnerLists = Ext.get("navbar").select("UL");
ceInnerLists.setDisplayed(false);
}
. ,
"" navbar, .
cleanupSamples ( 17.2). , (,
sample).
17.2
function cleanupSamples() {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind){
var elH6 = el.child(":first");
elH6.removeAllListeners();
});
}
Web- sample,
.
, onReady Ext. , , click .
, :
ceLinks.on("click", function(e, t){ loadFragment(Ext.get(this), e) });
loadFragment. Element, , , HTMLElement, this, EventObject, - .
, onReady Ext,
:
296
IV. .
hideInnerLists();
loadFragment(Ext.get("navbar").child("> LI:first"));
, : Web Web- .
Web- Web-,
- http://localhost. -,
1, .
Web- Web- , ,
cmain HTML ( "HTML" ).
,
cmain. , .
!
?
Web-, .
!
" "
Web- .
Web- , Web-, ,
. , .
18
, Web-, . ,
, Web- , Web- , ,
, , .
-, , .
Web- , Web-, , . , JavaScript.
.
Web-, ,
, HTML-,
, Web-.
Web-, , .
Web- ?
! , , , Web-,
Web- Web- ( main.js).
, Web- - ( ". ").
, ,
. Web-
( , , ).
.
HTML- Web-. , - Web- , ,
298
IV. .
"" HTML-. ,
, .
. ...
Ext Core, , HTML-,
. Web- .
, , ,
. Web-,
, , : , , . ?
, . , , .
?
. ? , ,
: , , Web- . .
.
.
: , , , .
JavaScript, : , , . , , .
. ,
. , , , ,
. , - ; ,
, Web , .
JavaScript.
.
, ,
, Object, . . . (
, , .)
,
JavaScript, ,
. .
, "" ,
, , Web-. ""
18.
299
, "" . ,
"" .
JavaScript-, , Web. Web-, .
,
Web- Web-, .
, . ""
, Microsoft Access, Microsoft SQL Server, Oracle,
MySQL, Embarcadero Interbase ., .
.
?
, -.
"" -
, Web- .
"" -
, Web-.
-
Web- .
, ,
, Web-.
!
Web-.
, Web- ( ) .
.
19 Web- ". ",
Web- "" .
Web-, ,
, .
Web-
Element Ext Core (. 15).
, .
300
IV. .
Web- - ,
. .
, Web, , , HTML, CSS
. ,
Web- - .
, . !
data.js Site 2.
, 18.1.
18.1
var aHTML =
aHTML[0] =
aHTML[1] =
aHTML[2] =
aHTML[3] =
aHTML[4] =
aHTML[5] =
aHTML[6] =
aHTML[7] =
aHTML[8] =
aHTML[9] =
aHTML[10] =
aHTML[11] =
var aCSS =
aCSS[0] =
aCSS[1] =
aCSS[2] =
[];
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
[];
{ name: "border", url: "attrs/a_border.htm" };
{ name: "color", url: "attrs/a_color.htm" };
{ name: "margin", url: "attrs/a_margin.htm" };
var aSamples =
aSamples[0] =
aSamples[1] =
aSamples[2] =
[];
{ name: "", url: "samples/a_hyperlinks.htm" };
{ name: "", url: "samples/a_containers.htm" };
{ name: "", url: "samples/a_tables.htm" };
18.
301
UTF-8. , , .
Web- index.htm
:
<SCRIPT SRC="data.js"></SCRIPT>
Web- data.js.
.
, Web- Web- index.htm. , Web, main.js ( Web), .
, .
Web- index.htm , .
HTML-, ,
, . 18.2.
18.2
<UL ID="navbar">
<LI><A HREF="chapters/html.htm">HTML</A>
<UL>
</UL>
</LI>
<LI><A HREF="chapters/css.htm">CSS</A>
<UL>
</UL>
</LI>
<LI><A HREF="chapters/samples.htm"></A>
<UL>
</UL>
</LI>
<LI><A HREF="chapters/about.htm"> </A></LI>
</UL>
Web- main.js
onReady Ext 18.3.
18.3
function generateInnerList(aDataBase, elInnerList) {
for (var i = 0; i < aDataBase.length; i++) {
302
IV. .
var s = "<LI><CODE><A HREF=\"" + aDataBase[i].url + "\">" +
aDataBase[i].name + "</A></CODE></LI>";
elInnerList.insertHtml("beforeEnd", s);
}
}
generateInnerList,
. :
;
;
, ,
Element.
. .
, :
for (var i = 0; i < aDataBase.length; i++) {
i, 0, , (
length Array; 14), .
, ,
.
HTML-, :
var s = "<LI><CODE><A HREF=\"" + aDataBase[i].url + "\">" +
aDataBase[i].name + "</A></CODE></LI>";
- , .
, :
elInnerList.insertHtml("beforeEnd", s);
}
, , "beforeEnd"
.
.
. , , generateInnerList.
, onReady Ext, :
generateInnerList(aHTML, Ext.get("navbar").child("> LI:nth(1) UL"));
generateInnerList(aCSS, Ext.get("navbar").child("> LI:nth(2) UL"));
generateInnerList(aSamples, Ext.get("navbar").child("> LI:nth(3) UL"));
18.
303
generateInnerList,
, , , .
,
. .
, Web-, HTML-.
Web- index.htm, - http://localhost
Web-, .
, Web-, , . .
Web- data.js aCSS :
aCSS[3] =
aCSS[4] =
,
.
( ,
, ).
, .
,
, . ,
.
sort , .
, ,
"".
304
IV. .
"" ,
( 1).
"", 0.
"" , ( 1).
( 18.4),
aHTML, aCSS aSamples name . 14 .
18.4
function sortArray(c1, c2) {
if (c1.name < c2.name)
return -1
else
if (c1.name > c2.name)
return 1
else
return 0;
}
. Web- index.htm ,
.
.
?
Web- ,
Web-. , , JavaScript .
,
, .
. ,
JavaScript. JavaScript ...
19
Web- , Web-. ,
. , , Web-, .
". " Web- Web-.
Web- : HTML CSS, , . ". "
.
JavaScript. - .
Web- ". ".
Web-, HTML
CSS, , , . . Web-
, Web-.
, , Web- Web-
. Web-
, Web-.
, .
, " ", " ",
. .
306
IV. .
, " ",
Web-, , .
, Web- ,
.
Web- Web-, ,
Web-, . , .
, , 18.
, - Web-,
Web. ,
JavaScript.
, , , , "" .
, , , . , -, W3C. -,
Web-. .
,
, "" :
JavaScript, .
, , , Web- . ,
Web-
.
JavaScript
, ". " Web.
Web-, HTML
CSS .
Web- -
19.
307
Web- , -
.
". " , Web-. - .
?
18 , Web-
Web- - .
; Web- , - - , .
: Web- , "" , Web-. Web-, ""
". ". 18, , .
"" Web, -. 18, . "" , data.js, - ,
, , "" ,
.
.
( ) "" , , . , 14:
, . , ""
, ""
.
"" "" JavaScript. " ".
"" Web-, ( ), ,
HTML- Web- (,
). Web-
, .
. , , Web-, Web-, .
.
308
IV. .
?
,
". ", "" . , Web-, related.
aHTML, aCSS aSamples, Web-. , . .
- , Web-,
". ", .
" ".
JavaScript.
! Web- data.js, ,
, aHTML, aCSS aSamples,
:
aHTML[0].related =
aHTML ( 0),
related
, , ( 4, 7 10) . , Web-
<!DOCTYPE> Web- <HEAD>, <META> <TITLE>.
,
aHTML, aCSS aSamples? , , , .
undefined,
.
:
aHTML[8].related =
". "
". " .
Web-.
". " Web-.
Web- .
19.
309
". ".
.
Web- main.js
generateInnerList, , ,
. , ,
19.1.
19.1
function generateInnerList(aDataBase, elInnerList) {
for (var i = 0; i < aDataBase.length; i++) {
var s = "<LI><CODE><A HREF=\"" + aDataBase[i].url + "\">" +
aDataBase[i].name +
"</A></CODE></LI>";
var htelItem = elInnerList.insertHtml("beforeEnd", s);
htelItem.related = aDataBase[i].related;
}
}
14 ,
,
, . , , - Web-,
related.
HTMLElement, , Web-. insertHtml (. 19.1) HTMLElement, .
.
prepareSamples, , , . , each,
:
generateRelated();
310
IV. .
.
s, HTML-,
". " :
var s = "";
, , ,
Web- (, ). ? , 17 elLastItem. ,
.
:
var oRelated = elLastItem.dom.related;
, ,
:
for (var i = 0; i < oRelated.length; i++) {
19.
311
, . , s , . .
, , ,
.
HTML-, Web-
, s:
s += "<CODE><A HREF=\"" + oRelated[i].url + "\">" +
oRelated[i].name + "</A></CODE>";
}
.
HTML- ,
". ". cmain (
):
var htelRelated = Ext.get("cmain").insertHtml("beforeEnd",
"<P>. : " + s + "</P>");
click,
:
Ext.fly(htelRelated).select("A").on("click", function(e, t) {
HREF -
, :
var href = Ext.fly(this).getAttribute("href");
navbar -:
var elA = Ext.get("navbar").child("A[href=" + href + "]");
-,
.
, :
var elItem = elA.parent("LI");
, EventObject,
, "" 17 loadFragment.
:
loadFragment(elItem, e);
});
}
312
IV. .
generateRelated .
, cleanupSamples. , ,
. , Ext Core Web-.
, ". ". cmain .
19.3 cleanupSamples.
19.3
function cleanupSamples() {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind){
var elH6 = el.child(":first");
elH6.removeAllListeners();
});
var ceA = Ext.get("cmain").select("A");
ceA.removeAllListeners();
}
19.
313
, ,
Web-.
loadFragment , , .
generateRelated,
". "
click. , -, , , "" . "" !
: loadFragment ,
, "", , ,
. , 19.4.
19.4
. . .
} else {
if ((elLastItem) && (elLastItem.dom != elLI.dom))
elLastItem.removeClass("selected");
elLI.addClass("selected");
elLastItem = elLI;
}
,
"" . , 19.5.
19.5
} else {
var elInnerList = elLI.parent("UL");
if ((elLastInnerList) && (elLastInnerList.dom != elInnerList.dom))
elLastInnerList.setDisplayed(false);
elInnerList.setDisplayed(true);
elLastInnerList = elInnerList;
if ((elLastItem) && (elLastItem.dom != elLI.dom))
elLastItem.removeClass("selected");
elLI.addClass("selected");
elLastItem = elLI;
}
,
, , , , , , .
... --!
314
IV. .
Web- index.htm
. Web-, -
http://localhost,
". " Web- . !
". " .
.
. , ,
. ; .
?
JavaScript.
Web- Web- ". ", Web- .
, Web-
. .
,
.
20.
Web-
21.
Web-
22.
20
Web-
. -,
Web- Web. -, Web-,
, Web-. -, Web-,
HTML, CSS , ". ",
Web- .
,
.
. , Web. : , Web-
Web- Web-.
, :
- , ;
Web-, , ,
;
Web-, .
. , , , Web-.
Web-, ,
, ,
, Web-.
? ,
Web- Windows: , , , .
?
Web- HTML
. HTML
. "" -
V.
318
: , , , , , , . Web-;
.
, HTML, .
, , , , , . (, "" ,
.) . , ,
Web- .
JavaScript- : , , "", , ,
"" Microsoft Office 2007 "". , , Ext, Ext Core.
Web- .
HTML Web- Web- JavaScript. ?
Web-, : ,
Web-, -, -, .
Web- ,
Web-, . Web-
Web-.
HTML Web-
, .
20. Web-
319
.
, Web-
Web-, .
, Web- -
.
Web- -
, -.
Web- , -
.
.
Web-
Web-.
Web- Web-
.
, Web- "" .
- . -, -
, http://www.somesite.ru/apps/
app.exe.
, , -
. HTML .
GET
< >=< >. ( ,
Web- .) , ? ( ); & (). - Web-,
- .
POST <
>=< >. -, , .
.
POST; GET .
, Web- .
-, . HTML,
.
V.
320
!
Web-
, Web-. , ,
.
Web-
HTML CSS, Web- , Web Ext Core . .
Web-
Web- <FORM>, , , Web-:
<FORM>
<, >
</FORM>
Web- Web-. (
. 2.)
<FORM> ACTION, - . Web- ,
Web-, "" - #:
<FORM ACTION="#">
. . .
</FORM>
HTML
<INPUT>. ,
TYPE . ,
, . .
ID, CLASS STYLE. , ,
Web-,
.
, , ,
Web-, ,
< >=< >, -
20. Web-
321
. , ,
, NAME ID! , .
ID, ,
Web-, . ,
.
ID NAME
.
.
HTML Web (. 3).
HTML .
Web-
<INPUT>:
<INPUT [TYPE="text"] [VALUE="< >"] [SIZE="<>"]
[MAXLENGTH="< >"] [DISABLED]
[TABINDEX="< >"] [ACCESSKEY="< >"]
[READONLY] [AUTOFOCUS]>
TYPE, , .
"text" Web- .
, TYPE ( , ).
VALUE , . , .
SIZE .
, Web-.
MAXLENGTH , , . ,
.
TABINDEX ACCESSKEY , ,
"" .
(. 6).
DISABLED
; ,
. , ,
.
READONLY ; - , -
V.
322
. , , , .
AUTOFOCUS ,
Web-. , <Tab> <Shift>+<Tab>.
!
AUTOFOCUS
Web-.
20.1
<FORM ACTION="#">
<P>: <INPUT TYPE="text" ID="name1" NAME="name1" SIZE="20"
AUTOFOCUS></P>
<P>: <INPUT TYPE="text" ID="name2" NAME="name2" SIZE="30"></P>
</FORM>
, .
.
<INPUT>:
<INPUT TYPE="password" [VALUE="< >"]
[SIZE="<>"] [MAXLENGTH="< >"]
[TABINDEX="< >"] [ACCESSKEY="< >"]
[DISABLED] [READONLY] [AUTOFOCUS]>
20. Web-
323
AUTOFOCUS></P>
<P>: <INPUT TYPE="password" ID="password" NAME="password"
SIZE="20"></P>
</FORM>
HTML 5.
, .
<INPUT>:
<INPUT TYPE="search" [VALUE="< >"]
[SIZE="<>"] [MAXLENGTH="< >"]
[TABINDEX="< >"] [ACCESSKEY="< >"]
[DISABLED] [READONLY] [AUTOFOCUS]>
<TEXTAREA>:
<TEXTAREA [ROWS="<>"] [COLS="<>"] [WRAP="off|soft|hard"]
[TABINDEX="< >"] [ACCESSKEY="< >"]
[DISABLED] [READONLY] [AUTOFOCUS]>
< >
</TEXTAREA>
, ,
<TEXTAREA>. HTML-.
ROWS . , Web.
324
V.
COLS . , Web.
WRAP
. WRAP :
"soft"
. , , .
"hard"
. , , .
WRAP , ,
"soft".
, <TEXTAREA>, ( 20.4).
20.4
<FORM ACTION="#">
<P>
Web-:<BR>
<TEXTAREA ID="opinion" NAME="opinion" COLS="60" ROWS="10">
Web-!
</TEXTAREA>
</P>
</FORM>
- .
<INPUT>:
<INPUT TYPE="button" VALUE="<>"
[TABINDEX="< >"] [ACCESSKEY="< >"]
[DISABLED] [AUTOFOCUS]>
20. Web-
325
Web- , , - .
<INPUT>:
<INPUT TYPE="checkbox" [CHECKED]
[TABINDEX="< >"] [ACCESSKEY="< >"]
[DISABLED] [AUTOFOCUS]>
Web-, Windows-,
.
.
.
! , Web- ,
NAME. ,
.
.
NAME . , , , , NAME,
.
, , ID,
. Web- , .
326
V.
<INPUT>:
<INPUT TYPE="radio" [CHECKED]
[TABINDEX="< >"] [ACCESSKEY="< >"]
[DISABLED] [AUTOFOCUS]>
,
, , ,
<SELECT>, <OPTION>,
.
<SELECT>, :
<SELECT [SIZE="< ()>"] [MULTIPLE]
[TABINDEX="< >"] [ACCESSKEY="< >"]
[DISABLED] [AUTOFOCUS]>
< <OPTION>, >
</SELECT>
SIZE (
). , , , , .
, ( ).
MULTIPLE ,
. ,
,
. , -
20. Web-
327
( SIZE ,
1);
.
.
<OPTION> .
<SELECT>:
<OPTION [LABEL="< >"] [SELECTED] [DISABLED]>
[< >]
<OPTION>
<OPTION>, LABEL.
SELECTED . ,
, .
DISABLED
. 20.8 .
20.8
<FORM ACTION="#">
<P>
<SELECT ID="search_in" NAME="search_in">
<OPTION></OPTION>
<OPTION> </OPTION>
<OPTION SELECTED> </OPTION>
</SELECT>
</P>
</FORM>
HTML - . <OPTGROUP>;
, , .
<OPTGROUP> <SELECT>:
<OPTGROUP LABEL="< >" [DISABLED]>
< <OPTION>, , >
<OPTGROUP>
LABEL .
DISABLED ( 20.9).
328
V.
20.9
<FORM ACTION="#">
<P>
<SELECT ID="search_in" NAME="search_in">
<OPTGROUP LABEL=" ">
<OPTION></OPTION>
<OPTION> </OPTION>
</OPTGROUP>
<OPTION SELECTED> </OPTION>
</SELECT>
</P>
</FORM>
, .
, .
, .
<LABEL>:
<LABEL [FOR="< , >"]
[TABINDEX="< >"] [ACCESSKEY="< >"]>
< >[< >]
</LABEL>
,
. .
( 20.10) , , ID. (,
.) FOR <LABEL>, .
20.10
<FORM ACTION="#">
<P><LABEL FOR="keyword">:</LABEL>
<INPUT TYPE="search" ID="keyword" NAME="keyword"
SIZE="40"></P>
</FORM>
( 20.11) , , <LABEL>, ,
.
20. Web-
329
20.11
<FORM ACTION="#">
<P><LABEL>: <INPUT TYPE="search" ID="keyword" NAME="keyword"
SIZE="40"></LABEL></P>
</FORM>
Web- . Web-
, .
"" . , .
, , ,
, .
<FIELDSET>:
<FIELDSET>
< , >
</FIELDSET>
, , , , <FIELDSET>.
, <FIELDSET> <LEGEND>, :
<LEGEND [ACCESSKEY="< >"]>< ></LEGEND>
.
<LEGEND>
<FIELDSET>, </FIELDSET>. , . 20.12 .
20.12
<FORM ACTION="#">
<FIELDSET>
<LEGEND>:</LEGEND>
<P>
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="!">
</P>
</FIELDSET>
</FORM>
330
V.
HTML , . Web-
, Web-,
.
, ,
. TYPE
<INPUT> "submit".
, Web- .
Web- ,
HTML-. TYPE <INPUT>, , "reset".
, ( , ).
,
Windows,
.
TYPE <INPUT> "file". <INPUT>
ACCESSKEY, AUTOFOCUS, DISABLED, SIZE TABINDEX.
, Web- . ,
.
<INPUT>.
TYPE "image". SRC , ALT ( . 4). ACCESSKEY, AUTOFOCUS,
DISABLED TABINDEX <INPUT>.
,
Web-. - , ,
.
<INPUT>. TYPE
"hidden". VALUE <INPUT>
.
CSS,
CSS ,
.
.
20. Web-
331
:enabled , -
.
:disabled , -
.
:checked .
20.13 .
20.13
:disabled { color: #B1BEC6 }
:checked { font-weight: bold }
. . .
<FORM ACTION="#">
<P>
<INPUT TYPE="radio" ID="updates_yes" NAME="updates" CHECKED>
Web-
</P>
<P>
<INPUT TYPE="radio" ID="updates_no" NAME="updates" CHECKED >
Web-
</P>
<P> : <INPUT TYPE="text" ID="email" NAME="email"
DISABLED></P>
</FORM>
Web- , . -, Web-.
Web- , ,
- . ,
Web-:
, , ,
. , Web-
, ,
.
.
HTMLElement,
Web, . :
Web-, HTMLElement.
332
V.
disabled . true
, false . 20.14 .
20.14
<FORM ACTION="#">
<P>
<INPUT TYPE="checkbox" ID="updates" NAME="updates">
Web-
</P>
<P> : <INPUT TYPE="text" ID="email" NAME="email"></P>
</FORM>
. . .
Ext.getDom("email").disabled = false;
value , , :
var sEmail = Ext.getDom("email").value;
updates click,
.
email, , .
, this, Web-, , HTMLElement.
Ext Core!
20.15.
20. Web-
333
20.15
<FORM ACTION="#">
<P>
<INPUT TYPE="radio" ID="updates_yes" NAME="updates" CHECKED>
Web-
</P>
<P>
<INPUT TYPE="radio" ID="updates_no" NAME="updates">
Web-
</P>
<P> : <INPUT TYPE="text" ID="email" NAME="email"></P>
</FORM>
. . .
Ext.get("updates_yes").on("click", function() {
var htelEmail = Ext.getDom("email");
htelEmail.disabled = this.checked;
});
20.15 ,
updates2. ,
updates_yes.
,
, . .
selectedIndex
. :
,
;
,
;
, 1.
, selectedIndex ,
.
, . 20.16 .
20.16
<FORM ACTION="#">
<P>
<SELECT ID="search_in" NAME="search_in">
<OPTION></OPTION>
<OPTION> </OPTION>
334
V.
options .
HTMLOptionsCollection:
var clItems = Ext.getDom("search_in").options;
length HTMLOptionsCollection , . . :
var iItemsCount = clItems.length;
, :
var htelSecondItem = clItems[1];
.
HTMLOptionElement.
disabled,
.
selected, ,
. true , , false
. , ,
, ( 20.17).
20.17
<FORM ACTION="#">
<P>
HTML ?
<SELECT ID="answer" NAME="answer" SIZE="5" MULTIPLE>
<OPTION>TR</OPTION>
<OPTION>DIV</OPTION>
<OPTION>TABLE</OPTION>
<OPTION>TH</OPTION>
<OPTION>TT</OPTION>
<OPTION>HEAD</OPTION>
<OPTION>TD</OPTION>
</SELECT>
20. Web-
335
</P>
</FORM>
. . .
var clItems = Ext.getDom("answer").options;
if ((clItems[0].selected) && (clItems[2].selected)
&& (clItems[3].selected) && (clItems[6].selected)) {
var s = " !";
} else {
var s = "! .";
}
20.17 - .
answer , HTML, . ,
.
form HTMLElement, Web, :
var htelForm = Ext.getDom("answer").form;
focus . :
Ext.getDom("email").focus();
blur , , ;
.
:
Ext.getDom("email").blur();
select .
:
Ext.getDom("email").select();
click . ( 20.18).
20.18
<FORM ACTION="#">
<P>
:
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="!">
</P>
</FORM>
. . .
Ext.getDom("find").click();
V.
336
Element,
Element Ext Core ,
.
getValue , , :
< Element>.getValue(< >)
false, .
true,
; :
var sEmail = Ext.get("email").getValue(false);
focus . . Web, , :
Ext.get("email").focus();
blur ;
:
Ext.get("email").blur();
.
Web-, , .
select :checked.
:
var clChecked = Ext.get("cmain").select(":checked");
, ,
. 20.1. .
20.1. ,
blur
, . . ,
change
.
. ,
20. Web-
337
20.1 ()
click
, , . .
,
focus
, . .
,
select
. . ,
Web-
, Web- , . .
Web-. , , 18. . , 19 ". " Web-, .
, ,
-, Web-, -, ,
Web-. , .
, , <AUDIO>, "" "", Web , .
, : , ,
. , . . Web- .
, .
, , ,
, ,
, .
, , ,
Web-, cmain. ". ".
V.
338
,
, . , Web-,
, ,
, .
, , .
.
, Web-, .
keyword, .
, , .
Web- data.js ,
related , , ,
:
aHTML[0].keyword =
",";
aHTML ( 0),
keyword "" "". , , Web-
<!DOCTYPE> .
Web- Web. ,
.
Web-
Web-,
. ?
cnavbar, ,
</DIV>, . 21 Web-
.
"" Web- :
"", , Web-;
,
;
, ;
( , -
).
20. Web-
339
Web- ,
(. 3). , , .
, , , Web Web- .
keyword, find,
search_in.
20.19 HTML-, Web-.
20.19
<FORM ACTION="#">
<P>
:<BR>
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="20">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="!"><BR>
<SELECT ID="search_in" NAME="search_in">
<OPTION> </OPTION>
<OPTION> </OPTION>
<OPTION SELECTED> </OPTION>
</SELECT>
</P>
</FORM>
html.htm.
, Web- Web. HTML- ,
.
Web-,
Web-, Web-, .
Web- main.js - , onReady Ext, :
Ext.get("find").on("click", searchData);
340
V.
20.20
function searchData() {
var sKeyword = Ext.get("keyword").getValue(false);
if (sKeyword != "") {
var iSearchMode = Ext.getDom("search_in").selectedIndex;
var aResult = [];
searchInArray(sKeyword, aHTML, aResult, iSearchMode);
searchInArray(sKeyword, aCSS, aResult, iSearchMode);
searchInArray(sKeyword, aSamples, aResult, iSearchMode);
if (aResult.length > 0) {
var s = "";
for (var i = 0; i < aResult.length; i++) {
s += "<LI><A HREF=\"" + aResult[i].url + "\">" +
aResult[i].name + "</A></LI>";
}
var htelResult = Ext.get("cmain").insertHtml("beforeEnd",
"<P> :</P><UL>" + s + "</UL>");
Ext.fly(htelResult).select("A").on("click", function(e, t) {
var href = Ext.fly(this).getAttribute("href");
var elA = Ext.get("navbar").child("A[href=" + href + "]");
var elItem = elA.parent("LI");
loadFragment(elItem, e);
});
}
}
}
.
, keyword:
var sKeyword = Ext.get("keyword").getValue(false);
, - :
if (sKeyword != "") {
, ,
search_in:
var iSearchMode = Ext.getDom("search_in").selectedIndex;
, aHTML, aCSS
aSamples, , :
var aResult = [];
.
aHTML, aCSS aSamples searchInArray,
:
20. Web-
341
, ,
, , , , . , search_in,
.
, , . . :
if (aResult.length > 0) {
, , HTML-,
:
var s = "";
( , Web-
HTML;
Web-.)
,
:
for (var i = 0; i < aResult.length; i++) {
HTML-, :
s += "<LI><A HREF=\"" + aResult[i].url + "\">" +
aResult[i].name + "</A></LI>";
}
HTML-
cmain:
var htelResult = Ext.get("cmain").insertHtml("beforeEnd",
"<P> :</P><UL>" + s + "</UL>");
click,
Web-:
Ext.fly(htelResult).select("A").on("click", function(e, t) {
var href = Ext.fly(this).getAttribute("href");
var elA = Ext.get("navbar").child("A[href=" + href + "]");
var elItem = elA.parent("LI");
loadFragment(elItem, e);
});
}
}
342
V.
generateRelated,
19. ( ,
, , .)
searchData .
searchInArray, , ,
, . ( 20.21)
- searchData.
20.21
function searchInArray(sKeyword, aDataArray, aResultArray, iSearchMode) {
var sN, sK;
var sKw = "," + sKeyword.toLowerCase();
for(var i = 0; i < aDataArray.length; i++) {
sN = "," + aDataArray[i].name.toLowerCase();
if (aDataArray[i].keyword)
sK = "," + aDataArray[i].keyword.toLowerCase()
else
sK = "";
if (((iSearchMode == 0) || (iSearchMode == 2)) &&
(sN.indexOf(sKw) != -1))
aResultArray[aResultArray.length] = aDataArray[i]
else
if (((iSearchMode == 1) || (iSearchMode == 2)) &&
(sK.indexOf(sKw) != -1))
aResultArray[aResultArray.length] = aDataArray[i];
}
}
, :
;
, , ;
, ;
, . ,
search_in.
.
, . . ,
.
:
var sN, sK;
,
:
var sKw = "," + sKeyword.toLowerCase();
20. Web-
343
. ,
, .
Web- Web- ,
. , , ,
, ; , "title" "TITLE",
, , .
-
, , . toLowerCase JavaScript String. , ,
, . .
? .
, <IMG>. , , , "I".
JavaScript , - . ( , ""
String.) ,
, , - . , , "IMG" "I", "!DOCTYPE"
.
"I" "AUDIO", "VIDEO" "TITLE"!
, , . , ! , JavaScript ,
...
, . , Web - , , . .
, "I", "IMG" "AUDIO" ,
",I", ",IMG" ",AUDIO". , : ",IMG" ",I", ",AUDIO" . . , , . , ...
,
, :
for(var i = 0; i < aDataArray.length; i++) {
, , :
sN = "," + aDataArray[i].name.toLowerCase();
V.
344
, keyword:
if (aDataArray[i].keyword)
sK = "," + aDataArray[i].keyword.toLowerCase()
else
sK = "";
( , .) ,
, .
, ""
.
search_in (. . ; search_in ) :
if (((iSearchMode == 0) || (iSearchMode == 2)) &&
(sN.indexOf(sKw) != -1))
,
:
aResultArray[aResultArray.length] = aDataArray[i]
, ,
.
(, ,
, ).
search_in (. .
)
else
if (((iSearchMode == 1) || (iSearchMode == 2)) &&
(sK.indexOf(sKw) != -1))
,
:
aResultArray[aResultArray.length] = aDataArray[i];
}
searchInArray .
, . Web-, -
!. , -
20. Web-
345
cmain ,
Web-.
!
?
Web- ,
HTML Web- Ext
Core . - Web!
... , ! , Web-
.
21
Web-
Web- ,
HTML- Web- Ext Core . Web-. Web-
!
- ,
, "",
- ( ).
.
Web- . ,
Web-, .
- , , Web "" , , , . , Web- Web-, !
: ,
,
, .
, , -
, . ,
. ,
, .
,
. , Web- , "" . , , ;
21. Web-
347
,
.
, ?
: Web- , Web- . Web-, ,
. ,
.
, ,
Web-. ,
, .
"" Web- -, . , , ,
.
, HTML CSS, ,
-, . !
Web-
Web- .
?
, Web- Web. .
,
HTML-. , cheader HTML Web- index.htm, , . .
.
none float (. 10)
,
. : cheader cnavbar, .
float -
348
V.
, , Web-.
Web-,
HTML-, .
Web-.
. .
Web- .
"" -
Web-, "" .
.
Web- .
"" ,
Web-, ,
.
,
.
CSS
. ,
, .
Web-
CSS, .
position.
Web-:
position: static|absolute|relative|fixed|inherit
:
static ( );
absolute Web- . -
. Web . ,
;
relative Web- . -
, ,
. Web- ;
21. Web-
349
fixed Web- .
, . -, Web-. -, ,
.
:
#search { position: absolute }
search .
left top , , ,
Web-:
left|top: <>|auto|inherit
, .
, HTML- , ,
. ,
z-. ,
; z-
z-. Z- "" z-index:
z-index: <>|auto|inherit
V.
350
#main
height: 200px;
z-index: 2 }
{ position: absolute;
left: 100px;
top: 0px;
width: 600px;
height: 500px;
z-index: 0 }
search main,
z-.
, , clip. ,
. , (, ,
), Web-,
.
clip:
clip: rect(< >, < >, < >,
< >)|auto|inherit
;
-
.
auto clip . . 21.3
.
21.3
#search { position: absolute;
left: 200px;
top: 100px;
width: 300px;
height: 200px;
z-index: 2;
clip: rect(100px, 200px, 200px, 0px) }
21. Web-
351
Ext Core
Element Ext Core,
Web. .
position , z-
:
< Element>.position(< >
[, <z->[, < >
[, < >]]])
position : "absolute", "relative" "fixed". , , z-, ;
.
:
var elSearch = Ext.get("search");
elSearch.position("absolute", 2);
:
elSearch.setX(400);
elSearch.setY(200);
setLocation Web-:
< Element>.setLocation(< >,
< >)
:
elSearch.setLocation(400, 200);
clearPositioning .
:
elSearch.clearPositioning();
, , , . .
352
V.
20 Web- . ,
, , . .
, , csearch
Web- . , Web-, , . ( , Web, 20.) search_result
.
, ,
search_result - (. .
), , , . , search_result , Web-, . ,
search_result .
Web- ( , , , ), search_result.
,
.
, .
Web-
Web- index.htm , 20 , Web- , .
<BODY> , 21.4.
21.4
<DIV ID="csearch">
<FORM ACTION="#">
<P>
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="20">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="!"><BR>
<SELECT ID="search_in" NAME="search_in">
<OPTION> </OPTION>
<OPTION> </OPTION>
<OPTION SELECTED> </OPTION>
</SELECT>
</P>
<UL ID="search_result">
</UL>
</FORM>
</DIV>
21. Web-
353
{ background-color: #F8F8F8;
position: absolute;
left: 600px;
top: 0px;
padding: 2px;
border: thin solid #B1BEC6 }
, , csearch , , . , , Web- .
csearch , Web. , ,
Web-, "" . .
Web-,
search_result, .
.
, ,
search_result , csearch :
#csearch P,
#search_result
{ margin: 0px }
10 :
INPUT, SELECT { font-size: 10pt }
, , , , .
search_result , , , :
#search_result LI { list-style-type: none;
margin-left: -40px; }
354
V.
csearch .
Web- .
Web-,
(, 20) Web-, , , .
Web- main.js :
var cSearchHeight = 0;
,
csearch. . , .
, onReady Ext.
:
Ext.get("search_result").setDisplayed(false);
cSearchHeight = Ext.get("csearch").getHeight();
search_result, csearch .
adjustContainers, ,
16 . .
, adjustContainers:
var elCSearch = Ext.get("csearch");
elCSearch.setLocation(clientWidth elCSearch.getWidth(),
Ext.get("cmain").getY() cSearchHeight);
csearch ,
cmain. ,
csearch, .
searchData, 20. , 21.6.
21.6
function searchData() {
var elSearchResult = Ext.get("search_result");
elSearchResult.select("A").removeAllListeners();
elSearchResult.dom.innerHTML = "";
elSearchResult.setDisplayed(false);
var sKeyword = Ext.get("keyword").getValue(false);
21. Web-
355
if (sKeyword != "") {
var iSearchMode = Ext.getDom("search_in").selectedIndex;
var aResult = [];
searchInArray(sKeyword, aHTML, aResult, iSearchMode);
searchInArray(sKeyword, aCSS, aResult, iSearchMode);
searchInArray(sKeyword, aSamples, aResult, iSearchMode);
if (aResult.length > 0) {
var s = "";
for (var i = 0; i < aResult.length; i++) {
s += "<LI><A HREF=\"" + aResult[i].url + "\">" +
aResult[i].name + "</A></LI>";
}
var htelResult = elSearchResult.insertHtml("beforeEnd", s);
Ext.fly(htelResult).select("A").on("click", function(e, t) {
var href = Ext.fly(this).getAttribute("href");
var elA = Ext.get("navbar").child("A[href=" + href + "]");
var elItem = elA.parent("LI");
loadFragment(elItem, e);
});
elSearchResult.setDisplayed(true);
}
}
}
21.6 .
,
search_result. , , ,
:
var elSearchResult = Ext.get("search_result");
elSearchResult.select("A").removeAllListeners();
elSearchResult.dom.innerHTML = "";
elSearchResult.setDisplayed(false);
search_result.
, search_result.
15 , Web- HTMLElement innerHTML, HTML-,
Web-, . , , HTMLElement
( dom Ext Core Element) innerHTML
. .
21.7
var sKeyword = Ext.get("keyword").getValue(false);
if (sKeyword != "") {
var iSearchMode = Ext.getDom("search_in").selectedIndex;
V.
356
, 21.7, searchData . , .
search_result, :
elSearchResult.setDisplayed(true);
}
}
searchData .
cleanupSamples, 16,
, ". " .
,
, searchData.
cleanupSamples , 21.8.
21.8
function cleanupSamples() {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind){
var elH6 = el.child(":first");
elH6.removeAllListeners();
});
}
, .
search_result Web-.
, onReady Ext,
:
21. Web-
357
Ext.getBody().on("click",
function(){ Ext.get("search_result").setDisplayed(false); });
click Web- ,
search_result.
15 , , click, , , ,
, , Web-. click, Web, , Web-
, search_result .
: click
Web-. ,
. ,
searchData ,
click, Web, . !
, onReady Ext,
:
Ext.get("find").on("click", searchData);
click , . :
Ext.get("find").on("click", function(e){
searchData();
e.stopPropagation();
});
click searchData,
, . ,
stopPropagation Ext Core EventObject
(. 15).
. click (
loadFragment) . , (
". ", ), click
Web-, , search_result . .
, loadFragment,
:
Ext.get("search_result").setDisplayed(false);
, .
.
!..
358
V.
?
Web .
, , Web-
Web- , .
, ,
HTML 5 .
Web-. Web- .
22
Web- ,
Web-. , ?
Web. - .
, Web- . ?
. ,
Web- - , .
Web- ,
4.
, HTML 5. , , Web-.
.
. HTML 5,
.
,
HTML 5 . Web-, , ( ). (, , ,
.) .
<CANVAS>:
<CANVAS ID="<>" [WIDTH="<>"] [HEIGHT="<>"]></CANVAS>
V.
360
, , Web-.
- , .
, ID.
.
WIDTH HEIGHT , ,
( 300 150 ).
!
CSS .
Web- HTMLCanvasElement,
HTMLElement.
, .
...
, HTMLCanvasElement, CanvasRenderingContext2D.
, , .
, , -
Web- CanvasRenderingContext2D . getContext HTMLCanvasElement:
<>.getContext("2d")
, getContext "2d". , ,
CanvasRenderingContext2D, .
Web-, ctxCanvas
cnv:
var htelCanvas = Ext.getDom("cnv");
var ctxCanvas = htelCanvas.getContext("2d");
.
, ,
CanvasRenderingContext2D, .
!
, ,
CanvasRenderingContext2D, .
22.
361
,
.
;
. .
,
.
(. . ) strokeRect CanvasRenderingContext2D:
< >.strokeRect(< >,
< >, <>, <>)
. , , , . strokeRect .
:
ctxCanvas.strokeRect(20, 20, 360, 260);
fillRect :
< >.fillRect(< >,
< >, <>, <>)
, , strokeRect:
ctxCanvas.fillRect(40, 40, 320, 220);
clearRect
:
< >.clearRect(< >,
< >, <>, <>)
strokeRect.
, ,
cnv, "":
ctxCanvas.fillRect(0, 0, 400, 300);
ctxCanvas.clearRect(100, 100, 200, 100);
:
ctxCanvas.clearRect(0, 0, 400, 300);
V.
362
,
,
. CanvasRenderingContext2D.
strokeStyle . , , .
, #RRGGBB,
, .
:
rgb(< >, < >, < >)
0 255.
:
rgba(< >, < >,
< >, < >)
0 255.
0.0 ( ) 1.0
( ).
:
ctxCanvas.strokeStyle
ctxCanvas.strokeStyle
ctxCanvas.strokeStyle
ctxCanvas.strokeStyle
=
=
=
=
"red";
"#FF0000";
"rgb(255, 0, 0)";
"rgb(255, 0, 0, 1)";
, :
ctxCanvas.strokeStyle = "rgb(0, 0, 0, 0.5)";
, Web-,
.
fillStyle , , .
, . .
, - :
ctxCanvas.fillStyle = "rgb(0, 127, 0)";
22.1.
22.1
ctxCanvas.strokeStyle = "rgba(255, 0, 0, 1)";
ctxCanvas.fillStyle = "rgba(255, 0, 0, 1)";
22.
363
Web- 22.1 ,
, ,
, .
. , !
!
strokeStyle fillStyle .
Web-.
lineWidth .
:
ctxCanvas.lineWidth = 20;
ctxCanvas.strokeRect(20, 20, 360, 260);
Web-
20 .
globalAlpha, , . , . 0.0 ( )
1.0 ( ).
, , ,
10%:
ctxCanvas.globalAlpha = 0.1;
, ,
. ,
, CanvasRenderingContext2D.
.
1. Web- , .
2. , , .
3. Web- , ,
, , .
364
V.
Web-,
.
beginPath,
.
, ,
, .
, Web . closePath,
.
, .
: stroke fill. , , ,
, , .
.
,
, .
.
. . , . , .
, Web- ,
[0,0], . . .
, , moveTo:
< >.moveTo(< >,
< >)
, , . moveTo
.
:
ctxCanvas.moveTo(200, 150);
cnv
[200,150].
. lineTo:
< >.lineTo(< >,
< >)
22.
365
,
( ).
lineTo. .
.
.
22.2
ctxCanvas.beginPath();
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(380, 20);
ctxCanvas.lineTo(200, 280);
ctxCanvas.closePath();
ctxCanvas.stroke();
Web- 22.2 . .
1. beginPath Web-, .
2. moveTo , .
3. lineTo , .
4. , closePath,
Web- , .
5. stroke, .
. arc:
< >.arc(< >,
< >, <>, < >, < >,
true|false)
. ,
.
; . true, , false . arc
.
, .
, .
V.
366
, , . JavaScript:
radians = (Math.PI / 180) * degrees;
degrees , radians
, . PI JavaScript Math
.
Web-, :
ctxCanvas.beginPath();
ctxCanvas.arc(200, 150, 100, 0, Math.PI * 2, false);
ctxCanvas.stroke();
, arc, , , .
, : , . , , ,
, .
. 22.1.
. 22.2.
. 22.1 ,
, . ,
( )
. - , , , , .
. 22.1 . .
, "", (. 22.2).
, .
22.
367
bezierCurveTo:
< >.bezierCurveTo
(< >,
< >,
< >,
< >,
< >,
< >)
.
. .
,
. .
Web-, :
ctxCanvas.beginPath();
ctxCanvas.moveTo(100, 100);
ctxCanvas.bezierCurveTo(120, 80, 160, 20, 100, 200);
ctxCanvas.stroke();
quadraticCurveTo:
< >.quadraticCurveTo
(< >,
< >,
< >,
< >)
.
. .
,
.
.
Web-, :
ctxCanvas.beginPath();
ctxCanvas.moveTo(100, 100);
ctxCanvas.quadraticCurveTo(200, 100, 200, 200);
ctxCanvas.stroke();
.
22.3.
22.3
ctxCanvas.beginPath();
ctxCanvas.strokeStyle = "red";
368
V.
ctxCanvas.fillStyle = "red";
ctxCanvas.moveTo(100, 100);
ctxCanvas.quadraticCurveTo(200, 100, 200, 200);
ctxCanvas.lineTo(100, 200);
ctxCanvas.lineTo(100, 100);
ctxCanvas.fill();
Web- 22.3
. ,
,
.
22.4.
22.4
ctxCanvas.beginPath();
ctxCanvas.moveTo(20, 0);
ctxCanvas.lineTo(180, 0);
ctxCanvas.quadraticCurveTo(200, 0, 200, 20);
ctxCanvas.lineTo(200, 80);
ctxCanvas.quadraticCurveTo(200, 100, 180, 100);
ctxCanvas.lineTo(20, 100);
ctxCanvas.quadraticCurveTo(0, 100, 0, 80);
ctxCanvas.lineTo(0, 20);
ctxCanvas.quadraticCurveTo(0, 0, 20, 0);
ctxCanvas.stroke();
Web- 22.4 .
.
,
strokeRect fillRect. , , , -
. ,
rect:
< >.rect(< >,
< >, <>, <>)
. , , , . rect .
rect [0,0], . . .
22.
369
Web- 22.5 , , .
22.5
ctxCanvas.beginPath();
ctxCanvas.rect(50, 50, 50, 50);
ctxCanvas.rect(75, 75, 50, 50);
ctxCanvas.rect(100, 100, 50, 50);
ctxCanvas.fill();
, ,
. .
lineCap .
:
"butt" (
);
"round" ;
"square" .
Web- 22.6 , .
22.6
ctxCanvas.beginPath();
ctxCanvas.lineWidth = 10;
ctxCanvas.lineCap = "round";
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(180, 20);
ctxCanvas.stroke();
lineJoin . :
"miter" (
);
"round" , , ;
"bevel" , , -
.
Web- 22.7 ,
, , .
370
V.
22.7
ctxCanvas.beginPath();
ctxCanvas.lineWidth = 10;
ctxCanvas.lineJoin = "bevel";
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(380, 20);
ctxCanvas.lineTo(200, 280);
ctxCanvas.closePath();
ctxCanvas.stroke();
miterLimit , ,
, ,
lineJoin "miter". , , .
.
, .
22.8 Web-, .
22.8
ctxCanvas.beginPath();
ctxCanvas.lineJoin = "miter";
ctxCanvas.lineWidth = 10;
ctxCanvas.miterLimit = 1;
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(380, 20);
ctxCanvas.lineTo(200, 280);
ctxCanvas.closePath();
ctxCanvas.stroke();
, ,
, . ,
, .
, . .
strokeText .
, ; strokeStyle:
< >.strokeText(< >,
< >, < >
[, < >])
22.
371
.
, , .
.
, , ,
. ,
( ),
.
strokeText .
:
ctxCanvas.strokeStyle = "blue";
ctxCanvas.strokeText(" !", 200, 50, 100);
fillText .
, ; fillStyle:
< >.fillText(< >,
< >, < >
[, < >])
, strokeText:
ctxCanvas.fillStyle = "yellow";
ctxCanvas.fillText(" !", 50, 100);
font ,
. ,
font (. 8), :
ctxCanvas.fillStyle = "yellow";
ctxCanvas.font = "italic 12pt Verdana";
ctxCanvas.fillText(" !", 50, 100);
textAlign
, (
strokeText fillText). :
"left" ;
"right" ;
"start" ,
, ( );
"end" ,
, ;
"center" .
372
V.
:
ctxCanvas.fillStyle = "yellow";
ctxCanvas.font = "italic 12pt Verdana";
ctxCanvas.textAlign = "center";
ctxCanvas.fillText(" !", 100, 100);
textBaseline
, . :
"top" () ;
"hanging" () ;
"middle" ;
"alphabetic"
( );
"ideographic"
( );
"bottom" .
:
ctxCanvas.fillStyle = "yellow";
ctxCanvas.font = "italic 12pt Verdana";
ctxCanvas.textAlign = "center";
ctxCanvas.textBaseline = "top";
ctxCanvas.fillText(" !", 100, 100);
, , .
: .
( )
.
Windows 2000 Windows
; .
.
createLinearGradient :
< >.createLinearGradient
(< >,
22.
373
< >,
< >,
< >)
, "" . .
createLinearGradient CanvasGradient, .
, .
, , ""
[0,0] [100,50], lgSample:
var lgSample = ctxCanvas.createLinearGradient(0, 0, 100, 50);
, , "" . .
.
, addColorStop CanvasGradient:
<>.addColorStop(< >, <>)
, "" . 0.0 ( ) 1.0 ( ).
, ,
; ,
.
addColorStop .
:
lgSample.addColorStop(0, "black");
lgSample.addColorStop(0.4, "rgba(0, 0, 255, 0.5)");
lgSample.addColorStop(1, "#FF0000");
Web-
:
;
, 40%
, ;
.
.
CanvasGradient
374
V.
fillStyle. , ,
, :
strokeStyle
ctxCanvas.fillStyle = lgSample;
.
.
,
. [0,0] (
, , ), [30,20] ( ), [80,40] ( ). , ""
.
? .
, , ,
.
, ,
, .
, , ,
.
, "" , , "" ,
. , , , , .
, - ,
, "" . .
22.9
var lgSample = ctxCanvas.createLinearGradient(0, 0, 100, 50);
lgSample.addColorStop(0, "black");
lgSample.addColorStop(0.4, "rgba(0, 0, 255, 0.5)");
lgSample.addColorStop(1, "#FF0000");
ctxCanvas.fillStyle = lgSample;
ctxCanvas.fillRect(0, 0, 200, 100);
Web- 22.9
, .
, .
22.
375
( ) . "" . .
.
createRadialGradient :
< >.createRadialGradient
(< >,
< >,
< >,
< >,
< >,
< >)
, . .
createRadialGradient CanvasGradient, .
:
var rgSample = ctxCanvas.createRadialGradient(100, 100, 10, 150, 100, 120);
rgSample. "" , [100,100],
10 , [150,100]
120 .
addColorStop CanvasGradient:
<>.addColorStop(< >, <>)
.
0.0 ( , . . ) 1.0 (
, . . ). , ,
, .
,
.
:
rgSample.addColorStop(0, "#CCCCCC");
rgSample.addColorStop(0.8, "black");
rgSample.addColorStop(1, "#00FF00");
376
V.
Web-
:
-
(. . ) ;
, 80%
, ;
-
(. . ) .
, , . . strokeStyle
fillStyle:
ctxCanvas.fillStyle = rgSample;
,
"" , .
22.10 .
22.10
var rgSample = ctxCanvas.createRadialGradient(100, 100, 10, 150, 100,
120);
rgSample.addColorStop(0, "#CCCCCC");
rgSample.addColorStop(0.8, "black");
rgSample.addColorStop(1, "#00FF00");
ctxCanvas.fillStyle = rgSample;
ctxCanvas.fillRect(0, 0, 200, 200);
Web- 22.10 , . , , , , ,
.
, . , .
.
,
. - ,
Web- Image,
, .
22.
377
14 new Image:
var imgSample = new Image();
Image src, -
. -
- , :
imgSample.src = "graphic_color.jpg";
Image .
createPattern:
< >.createPattent(< >,
< >)
Image
HTMLCanvasElement.
, ,
, . , "" . createPattern.
:
"repeat" ;
"repeat-x" ;
"repeat-y" ;
"no-repeat" ;
.
createPattern CanvasPattern, :
var cpSample = ctxCanvas.createPattern(imgSample, "repeat");
,
, . . strokeStyle fillStyle.
:
ctxCanvas.fillStyle = cpSample;
ctxCanvas.fillRect(0, 0, 200, 100);
Web-
.
,
. .
V.
378
, graphic_color.jpg
Web- . , , " ", Web-
. , ,
, .
,
, .
:
.
drawImage, ,
:
< >.drawImage(< >,
< >, < >)
Image
HTMLCanvasElement. ,
; .
drawImage .
Web-, someimage.jpg , [0,0], . .
:
var imgSample = new Image();
imgSample.src = "someimage.jpg";
ctxCanvas.drawImage(imgSample, 0, 0);
,
drawImage:
< >.drawImage(< >,
< >, < >
<>, <>)
. ,
, .
Web-, , , :
ctxCanvas.drawImage(imgSample, 0, 0, 400, 300);
.
drawImage:
22.
379
.
. .
. .
,
.
.
.
Web-, [20,40], 40 20
, , :
ctxCanvas.drawImage(imgSample, 20, 40, 40, 20, 0, 0, 400, 300);
, ,
, ( , Web-.)
, , , Web. ?
. Image onload,
.
, .
Web- 22.11 .
22.11
var imgSample = new Image();
function imgOnLoad() {
ctxCanvas.drawImage(imgSample, 20, 40, 40, 20, 0, 0, 400, 300);
}
imgSample.src = "someimage.jpg";
imgSample.onload = imgOnLoad;
V.
380
Web - , . Ext Core,
.
. , .
shadowOffsetX shadowOffsetY , ,
. , .
0, . . .
:
ctxCanvas.shadowOffsetX = 2;
ctxCanvas.shadowOffsetY = -2;
shadowBlur .
, . 0, . . .
:
ctxCanvas.shadowBlur = 4;
shadowColor .
, . .
:
ctxCanvas.shadowColor = "rgba(128, 128, 128, 0.5)";
, , .
.
:
ctxCanvas.fillText(": .", 150, 50);
( , ),
.
. ;
.
22.
381
, , . .
:
( );
globalAlpha, globalCompositeOperation ( ),
fillStyle, lineCap, lineJoin, lineWidth, miterLimit strokeStyle;
( ).
save.
.
. , ;
.
restore.
.
.
. .
.
.
.
translate:
< >.translate(< >,
< >)
translate , .
, .
.
,
. ,
[50,50] , [100,50],
[150,100],
( ).
22.12 .
V.
382
22.12
ctxCanvas.save();
ctxCanvas.translate(100,
ctxCanvas.fillRect(0, 0,
ctxCanvas.translate(100,
ctxCanvas.fillRect(0, 0,
ctxCanvas.restore();
ctxCanvas.fillRect(0, 0,
100);
50, 50);
100);
50, 50);
50, 50);
Web- 22.12 :
1. .
2. [100,100].
3. 50 50 , .
4. [100,100]. ,
, translate.
5. 50 50 ,
.
6. ,
( , . .
).
7. 50 50 ,
.
, ,
.
!
,
.
.
rotate
;
:
< >.rotate(< >)
; . .
22.
383
, . ,
- , . - , .
22.13 .
22.13
ctxCanvas.translate(200, 150);
for (var i = 0; i < 3; i++) {
ctxCanvas.rotate(Math.PI / 6);
ctxCanvas.strokeRect(-50, -50, 100, 100);
}
Web- 22.13 (
[200,150]), /6 (30)
. , ,
.
scale
:
< >.scale(< >,
< >)
. 1.0 ,
1.0 ; -
, 1.0 .
scale .
,
: ,
.
22.14 .
22.14
ctxCanvas.save();
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.scale(3, 1);
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.restore();
V.
384
ctxCanvas.save();
ctxCanvas.scale(1, 3);
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.restore();
ctxCanvas.save();
ctxCanvas.scale(3, 3);
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.restore();
Web- 22.14 :
1. .
2. 50 50 , .
3. 3 .
4. 50 50 , .
5. .
6. 3 .
7. 50 50 , .
8. .
9. 3 .
10. 50 50 , .
11. .
50 50,
150 50, 50 150 150 150 .
,
, , .
, .
globalCompositeOperation.
:
"source-over" , (-
);
"destination-over" ;
22.
385
"source-in" , -
. ;
"destination-in" ,
. ;
"source-out" , -
. ;
"destination-out" ,
.
;
"source-atop" , -
; .
;
"destination-atop" , -
; . ;
"lighter" -
, , ;
"darker" ,
, , ;
"xor" , -
;
"copy" ; .
,
. .
22.15 .
22.15
ctxCanvas.fillStyle = "blue";
ctxCanvas.fillRect(0, 50, 400, 200);
ctxCanvas.fillStyle = "red";
ctxCanvas.globalCompositeOperation = "source-over";
ctxCanvas.fillRect(100, 0, 200, 300);
Web- 22.15
globalCompositeOperation. , Web <F5> , .
386
V.
21.
, "", ,
. , "", .
.
, .
.
.
1. , .
2. .
3. stroke fill clip, .
4. , .
4
. .
22.16 .
22.16
ctxCanvas.beginPath();
ctxCanvas.moveTo(100, 150);
ctxCanvas.lineTo(200, 0);
ctxCanvas.lineTo(200, 300);
ctxCanvas.closePath();
ctxCanvas.clip();
ctxCanvas.fillRect(0, 100, 400, 100);
Web- 22.16 , , .
Web-
HTML 5,
, Web-.
Web-,
cheader .
.
Web-
" HTML CSS" .
,
cheader Web- .
22.
387
Web--
.
Web- index.htm ,
cheader HTML-:
<CANVAS ID="cnv" WIDTH="600" HEIGHT="80"></CANVAS>
cnv, .
, . Web-,
,
.
Web- main.js . .
, ? ,
, onReady Ext?
Web-.
, Web-. . -,
cnv . -, .
: , ,
adjustContainers. , , , Web-, Web- , .
adjustContainers :
Ext.get("cnv").set({ width: elCSearch.getX() 40 });
drawHeader();
388
V.
drawHeader,
. 22.17 , ;
main.js.
22.17
function drawHeader() {
var elCanvas = Ext.get("cnv");
var cnvWidth = elCanvas.getAttribute("width");
var ctx = elCanvas.dom.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#B1BEC6";
ctx.moveTo(0, 60);
ctx.lineTo(cnvWidth, 60);
ctx.stroke();
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "#CDD9DB";
ctx.font = "normal 20pt Arial";
ctx.textAlign = "right";
ctx.textBaseline = "bottom";
ctx.fillStyle = "#3B4043";
ctx.scale(2, 1.3);
ctx.fillText(" HTML CSS", cnvWidth / 2, 60 / 1.3,
cnvWidth / 2);
}
22.17 .
cnv:
var elCanvas = Ext.get("cnv");
:
var cnvWidth = elCanvas.getAttribute("width");
, "" , :
ctx.beginPath();
ctx.strokeStyle = "#B1BEC6";
ctx.moveTo(0, 60);
ctx.lineTo(cnvWidth, 60);
ctx.stroke();
:
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "#CDD9DB";
22.
389
. <H1>,
main.css:
ctx.font = "normal 20pt Arial";
:
ctx.textAlign = "right";
ctx.textBaseline = "bottom";
.
:
ctx.fillStyle = "#3B4043";
:
ctx.scale(2, 1.3);
, , , , .
" HTML CSS" :
ctx.fillText(" HTML CSS", cnvWidth / 2, 60 / 1.3,
cnvWidth / 2);
.
. ,
, .
,
. ,
,
, ; , .
, .
Web-
( . , ).
, . , , ,
. ,
(2 1,3).
drawHeader .
Web- Web-. . , , .
.
. Web-
HTML CSS! Web-!
390
V.
...
(, , "") Web HTML CSS . Web-, HTML, CSS . , Web- Web-...
Web-, HTML, CSS JavaScript, Web- Ext Core. , , Web-. , , "" Web Web-. ,
, ,
.
, HTML 5 CSS 3. Web-
, .
, "" ,
, .
, . .
HTML 5 CSS 3 , Web-, ""
, . , , , Web-, .
...
, .
. .1 - Web-,
Web-
. , ,
!
392
.1. Web-
-
https://developer.mozilla.org/en
http://dev.opera.com/
http://www.w3.org/
http://www.sencha.com/products/core/?ref=family
! !
CSS
CSS ,
Web- , ,
CSS.
CSS ( CSS 3), , . CSS
Web-.
CSS , CSS
, Web-, .
:
-moz- Mozilla Firefox;
-o- Opera;
-webkit- Web-,
CSS, Web-, .
394
, CSS Web-.
, ,
. Web .
, , , , , . .
CSS -moz-border-leftcolors, -moz-border-top-colors, -moz-border-right-colors -moz-border-bottomcolors. , , , ,
.
-moz-border-left-colors|-moz-border-top-colors|-moz-border-right-colors|
-moz-border-border-colors: < , >|none
none "" . .
CSS Firefox CSS.
:
#cheader { width: 1010px;
padding: 0 20px;
border-bottom: medium dotted;
-moz-border-bottom-colors: #B1BEC6 #F8F8F8 #B1BEC6 }
cheader , , , .
. !
CSS -moz-border-radius-topleft (Firefox), border-top-left-radius
(Opera CSS 3) -webkit-border-top-left-radius (Web-
Webkit) :
-moz-border-radius-topleft|border-top-left-radius|
-webkit-border-top-left-radius: < 1> [< 2>]
, ,
. , , ,
. , CSS.
CSS
395
CSS, .
-moz-border-radius-topright (Firefox), border-top-right-radius (Opera -
cheader , , ,
, Web-,
. , Firefox, Opera, Web- Webkit .
CSS -moz-border-radius (Firefox), border-radius (Opera
CSS) -webkit-border-radius (Web- Webkit) :
-moz-border-radius|border-radius|-webkit-border-radius:
< 1 1>[/< 1 2>]
[< 2 1>[/< 2 2>]
[< 3 1>[/< 3 2>]
[< 4 1>[/< 4 2>]]]]
, , , /. ,
, .
, , , .
396
, .
, .
,
,
.
,
, ,
.
,
, , , .
2.
2
#navbar LI { padding: 5px 10px;
margin: 10px 0px;
border: thin solid #B1BEC6;
-moz-border-radius: 3px/1px 3px/1px 0px 0px;
border-radius: 3px/1px 3px/1px 0px 0px;
-webkit-border-radius: 3px/1px 3px/1px 0px 0px;
cursor: pointer }
"" , ,
.
3 , 1 .
"" ""! !
CSS -moz-outline-radius-topleft
:
-moz-outline-radius-topleft: <>
,
CSS.
CSS, .
-moz-outline-radius-topright -
.
-moz-outline-radius-bottomright
CSS
397
-moz-outline-radius-bottomleft -
.
, CSS,
.
3 .
3
DFN { outline: thin dotted #B1BEC6;
-moz-outline-radius-topleft: 3px;
-moz-outline-radius-topright: 3px;
-moz-outline-radius-bottomright: 3px;
-moz-outline-radius-bottomleft: 3px }
, <DFN>, ,
3 .
CSS -moz-outline-radius
:
-moz-outline-radius: < 1> [< 2> [< 3>
[< 4>]]]|inherit
.
, .
,
, .
,
, , .
, , , ,
.
CSS Firefox
CSS 3.
:
DFN { outline: thin dotted #B1BEC6;
-moz-outline-radius: 3px }
, Web-. .
398
"" , CSS.
CSS -moz-column-count (Firefox) -webkit-column-count (Web- Webkit) :
-moz-column-count|-webkit-column-count: < >|auto
, Web-, ;
, Web- ,
.
auto, , .
:
#cmain { -moz-column-count: 2;
-webkit-column-count: 2 }
cmain .
CSS -moz-column-width (Firefox) -webkit-column-width (Web Webkit) :
-moz-column-width|-webkit-column-width: < >|auto
, Web-,
Web-, .
auto Web-.
4 .
4
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300px;
-webkit-column-width: 300px }
cmain 300 .
CSS -moz-column-gap (Firefox) -webkit-column-gap (Web-
Webkit) :
-moz-column-gap|-webkit-column-gap:
< >|normal
normal .
Web-.
5 .
CSS
399
5
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300px;
-webkit-column-width: 300px;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm }
5 cmain 5 .
CSS -moz-column-rule-width (Firefox) -webkit-column-rule-width
(Web- Webkit) , :
-moz-column-rule-width|-webkit-column-rule-width: thin|medium|thick|
< >
, , (. 11).
6 .
6
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300px;
-webkit-column-width: 300px;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm;
-moz-column-rule-width: thin;
-webkit-column-rule-width: thin }
cmain .
CSS -moz-column-rule-style (Firefox) -webkit-column-rule-style
(Web- Webkit) ,
:
-moz-column-rule-style|-webkit-column-rule-style:
none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
, ,
(. 11).
7 .
7
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
400
-moz-column-width: 300px;
-webkit-column-width: 300px;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm;
-moz-column-rule-width: thin;
-webkit-column-rule-width: thin;
-moz-column-rule-style: dotted;
-webkit-column-rule-style: dotted }
cmain
.
CSS -moz-column-rule-color (Firefox) -webkit-column-rule-color
(Web- Webkit) ,
:
-moz-column-rule-color|-webkit-column-rule-color:
< >
8 .
8
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300px;
-webkit-column-width: 300px;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm;
-moz-column-rule-width: thin;
-webkit-column-rule-width: thin;
-moz-column-rule-style: dotted;
-webkit-column-rule-style: dotted;
-moz-column-rule-color: #B1BEC6;
-webkit-column-rule-color: #B1BEC6 }
cmain
- .
CSS -moz-column-rule (Firefox) -webkit-column-rule (Web Webkit) , :
-moz-column-rule|-webkit-column-rule: <> <> <>
9 .
9
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300px;
CSS
401
-webkit-column-width: 300px;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm;
-moz-column-rule: thin dotted #B1BEC6;
-webkit-column-rule: thin dotted #B1BEC6 }
, Opera . ...
CSS
22, ,
. CSS
Web-:
, , .
,
Web-, CSS -moz-transform (Firefox), -o-transform
(Opera) -webkit-transform (Web- Webkit):
-moz-transform|-o-transform|-webkit-transform: <>
. .
rotate Web-
:
rotate(<>)
: ,
. ,
deg, rad, grad.
.
cheader 3,14 ( 180):
#cheader { -moz-transform: rotate(3.14rad);
-o-transform: rotate(3.14rad);
-webkit-transform: rotate(3.14rad) }
cheader 30:
#cheader { -moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg) }
scale Web- , :
scale(< 1>[, < 2>])
, , .
, ,
. 1 (), -
402
1 (); 1 .
cheader ,
:
#cheader { -moz-transform: scale(2);
-o-transform: scale(2);
-webkit-transform: scale(2) }
cheader :
#cheader { -moz-transform: scale(2, 0.5);
-o-transform: scale(2, 0.5);
-webkit-transform: scale(2, 0.5) }
, , . , , . , .
cheader 10.
, 0:
#cheader { -moz-transform: skew(10deg, 0deg);
-o-transform: skew(10deg, 0deg);
-webkit-transform: skew(10deg, 0deg) }
translate Web- :
translate(< 1>[, < 2>])
CSS
403
, , . , , .
, CSS.
cheader 5 2 :
#cheader { -moz-transform: translate(5mm, 2mm);
-o-transform: translate(5mm, 2mm);
-webkit-transform: translate(5mm, 2mm) }
Web- . ,
. , .
:
#cheader { -moz-transform: skewX(10deg) translateY(2mm);
-o-transform: skewX(10deg) translateY(2mm);
-webkit-transform: skewX(10deg) translateY(2mm) }
cheader
10, 2 .
Web-. , - ,
. ,
.
CSS -moz-transform-origin (Firefox), -o-transform-origin (Opera)
-webkit-transform-origin (Web- Webkit):
-moz-transform-origin|-o-transform-origin|-webkit-transform-origin:
<>|left|center|right [<>|top|center|bottom]
, ,
, ; Web-.
, ,
.
, CSS.
404
left (
cheader 30 , . , ( ), left ( ) ; , ,
.
11.
11
#cheader { -moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform-origin: right bottom;
-o-transform-origin: right bottom;
-webkit-transform-origin: right bottom }
cheader 30 .
A
AAC 61
C
CSS 95
P
PCM 61
PNG 57
Q
QuickTime 61
D
DOM 227
R
RGB 111
G
GIF 56
56
H
H.264 61
HTML 25, 28, 33
J
JavaScript 189
JPEG 56
M
MIME 62
MP4 61
O
OGG 61
T
Theora 61
U
UAC 35
UTF-8 31
V
Vorbis 61
W
W3C 18
WAV 61
Web 2.0 20
Webkit 393
Web-
139
138
406
Web- (.)
137
138
Web- 24
Web- 23
Web- 24
287
287
25
266
286
31
36
46
96
background-attachment 120
background-color 118
background-image 118
background-position 119
background-repeat 119
border 156
border-bottom 156
border-bottom-color 155
border-bottom-style 155
border-bottom-width 154
border-collapse 168
border-color 155
border-left 156
border-left-color 155
border-left-style 155
border-left-width 154
border-right 156
border-right-color 155
border-right-style 155
border-right-width 154
border-spacing 153
border-style 156
border-top 156
border-top-color 155
border-top-style 155
border-top-width 154
border-width 154
caption-side 169
25
82
81
Web- 189
193
192
Web- 318
Z
Z- 349
clear 144
clip 350
color 111
cursor 133
display 129
empty-cells 170
float 143
font 114
font-family 109
font-size 110
font-style 112
font-variant 113
font-weight 112
height 142
left 349
letter-spacing 113
line-height 113
list-style-image 128
list-style-position 128
list-style-type 127
margin 153
margin-bottom 152
margin-left 152
margin-right 152
margin-top 152
max-height 143
max-width 143
min-height 143
min-width 143
opacity 112
outline 164
outline-color 164
outline-style 164
outline-width 164
overflow 147
overflow-x 147
overflow-y 147
padding 152
padding-bottom 151
padding-left 151
padding-right 151
padding-top 151
position 348
table-layout 169
text-align 126
text-decoration 112
text-indent 127
text-shadow 117
text-transform 113
top 349
vertical-align 116, 166
visibility 129
white-space 115
width 142
word-spacing 114
word-wrap 116
z-index 349
106
96
32
ACCESSKEY 86
ACTION 320
ALT 59
AUTOBUFFER 64
AUTOFOCUS 322
AUTOPLAY 64
CHECKED 325
CLASS 98
COLS 324
COLSPAN 78
CONTENT 32
CONTROLS 64
COORDS 89
DISABLED 321
FOR 328
HEIGHT 360
HREF 81, 89, 102
HTTP-EQUIV 32
ID 91, 99, 234
LABEL 327
MAXLENGTH 321
407
MULTIPLE 326
NAME 88, 321
NOHREF 89
POSTER 66
READONLY 321
REL 102
ROWS 323
ROWSPAN 78
SELECTED 327
SHAPE 89
SIZE 321, 326
SRC 57, 63, 193
STYLE 101
SUMMARY 76
TABINDEX 87
TARGET 82
TYPE 68, 102, 320
USEMAP 89
VALUE 321
WIDTH 360
WRAP 324
64
32
32
33
32
299
116
193
36, 206
29
258
163
194, 228
206
208
194
206
206
81
83
408
(.)
87
83
85
82
81
82
45
86
88
372
375
329
325
327
260
199
CSS 110
38
38
378
87
88
118
99
88
219
194, 197
98
212
Web- 234
91
216
225
199
- 23
84
84
83
83
- 22
359
88
95
23
243
197, 337
case 208
default 208
do 210
else 206
false 197
for 209
function 212
if 206
NaN 197
null 197
switch 208
true 197
undefined 197
while 210, 211
324
319, 330
330
330
233
233
172
47, 107, 108, 229
194
121
135
121
147
144
147
348
348
360
244
366
235
235
51
35
39
128
350, 386
215
216
216
216
215
31
31
219
addClass 244
addColorStop 373
alert 264
append 249
arc 365
beginPath 364
bezierCurveTo 367
blur 335, 336
child 240
clearOpacity 247
clearPositioning 351
clearRect 361
click 335
clip 386
closePath 364
confirm 264
createChild 252
createLinearGradient 372
createPattern 377
createRadialGradient 375
down 240
drawImage 378
each 262
fill 364
fillRect 361
fillText 371
first 241
fly 235
focus 335, 336
get 234
getAttribute 243
getBody 235
409
getCharCode 260
getColor 246
getContext 360
getCount 262
getDate 223
getDocumentHeight 243
getDocumentWidth 243
getDom 236
getFullYear 223
getHeight 241
getKey 260
getMonth 223
getOffsetTo 242
getPageX 261
getPageY 261
getStyle 246
getValue 336
getViewportHeight 243
getViewportWidth 243
getWidth 241
getX 242
getY 242
hasClass 245
hide 248
indexOf 262
insertAfter 250
insertBefore 250
insertFirst 250, 253
insertHtml 251
is 241
isVisible 248
item 262
last 241
lineTo 364
load 287
markup 252
moveTo 364
next 240
on 256
onReady 232
overwrite 252
parent 239
position 351
prev 240
preventDefault 261
quadraticCurveTo 367
radioClass 245
rect 368
remove 254
410
(.)
removeAllListeners 257
removeClass 245
replaceClass 245
replaceWith 253
restore 381
rotate 382
save 381
scale 383
select 236, 239, 335, 336
set 243
setDisplayed 247
setHeight 242
setLocation 351
setOpacity 247
setStyle 247
setVisibilityMode 248
setVisible 248
setWidth 242
setX 351
setY 351
show 248
sort 303
stopEvent 261
stopPropagation 261
stroke 364
strokeRect 361
strokeText 370
substr 224
toggle 248
toggleClass 245
toLowerCase 343
translate 381
wrap 253
288
319
227
319
228
328
52
323
254
78
218
Array 224
Boolean 224
CanvasGradient 373
CanvasPattern 377
CanvasRenderingContect2D 360
CompositeElementLite 233, 261
Date 223
DomHelper 234
Element 233
EventObject 234
Ext 233
Ext.lib.Dom 243
HTMLCanvasElement 360
HTMLDocument 226, 263
HTMLElement 226, 265
HTMLOptionElement 334
HTMLOptionsCollection 334
Image 376
Location 264
Math 225
Number 224
Object 225
String 224
Web- 219
Window 227, 264
219
219
227
194
194
194, 198
199
212
201
199
197
211
202
211
194
199
200
221
200
201
199
207
137
151
151
Web- 24
212
213
214
212
325
194
document 226
Ext 233
Ext.DomHelper 234
this 257
window 227
213
197
Web- 213
364
21
321
323
330
322
90
87
87
105
21
380, 401
318
195, 204
177
177
178, 330
176
39
305
50
CSS 393
218
checked 332
411
disabled 332
dom 236
fillStyle 362
font 371
form 335
globalAlpha 363
globalCompositeOperation 384
href 264
id 244
innerHTML 265
length 224, 334
lineCap 369
lineJoin 369
lineWidth 363
location 264
miterLimit 370
options 334
PI 366
readOnly 332
selected 334
selectedIndex 333
shadowBlur 380
shadowColor 380
shadowOffsetX 380
shadowOffsetY 380
src 377
strokeStyle 362
textAlign 371
textBaseline 372
textContent 265
title 264
value 332
227
228
305
Web- 30
31
31
75
76
75
76
96
174
172
21
110
23
28
196
412
205
330
254
abort 255
blur 255, 336
change 336
click 255, 337
dblclick 255
error 255
focus 256, 337
keydown 256
keypress 256
keyup 256
load 256
mousedown 256
mousemove 256
mouseout 256
mouseover 256
mouseup 256
onload 379
resize 265
select 337
21
21
21
39, 326
40
39
39
41
326
217
98
95
101
99
99
97
105
70, 195
209
70
75
76
95
101
102
107
106
- 288
26, 28
!DOCTYPE 32
A 81, 91
ABBR 49
ACRONYM 49
ADDRESS 47
AREA 89
AUDIO 63
BLOCKQUOTE 42
BODY 31
BR 50
CANVAS 359
CAPTION 75
CITE 49
CODE 49
DD 41
DEL 49
DFN 49
DIV 135
DL 41
DT 41
EM 49
FIELDSET 329
FORM 320
HEAD 31
Hn 39
HR 45
HTML 31
IMG 57
INPUT 320
INS 49
KBD 49
LABEL 328
LEGEND 329
LI 40
LINK 102
MAP 88
META 31
OL 40
OPTGROUP 327
OPTION 327
P 36
PRE 44
Q 49
SAMP 49
SCRIPT 192
SELECT 326
SOURCE 68
SPAN 121
STRONG 49
STYLE 102
TABLE 70
TBODY 76
TD 71
TEXTAREA 323
TFOOT 76
TH 71
THEAD 76
TITLE 31
TR 70
TT 49
UL 40
VAR 49
VIDEO 65
29
28, 29
28
30
32
28, 29
28
29
91
29
29
28
59, 68
195
NaN 197
null 197
undefined 197
197
218
203
218
218
203
195
215
196
373
366
413
30
206
Web- 193
83
44
325
86
138
212
213
212
212
359
216
376
372
372
375
372
209
211
211
210
211
209
209
42
196
44
44
414
219
Web-
36
55
130
49
30
347
348
30
29
29
348
348
349
91
71
71