J a v a S c r i p t

-

JavaScript

-



J a v a S c rip t- o

Head First JavaScript

Wouldn't it be dreamy if
th e re was a way to learn JavaScript
from a book w ithout wanting to set fir e
to it halfway through and swearing o f f
th e Web forever? I know, it's probably
ju s t a fantasy...

M ichael M orrison

O R E IL L Y '
Beijing Cambridge Farnham Koin Sebastopol To/cyo
 JavaScipt

JavaScipt,

!
,
...

-
--

2012

JavaScript
.

.
,
.
.
.
.
. , ,
.

32.988.02-018.1 004.43
.
80 JavaScript. .: , 2012. 608 .: .
ISBN 978-5-459-00322-2
-
HTML CSS ?
JavaScript!
JavaScript: .
, - ,
. , JavaScript
. ,
,
:
java-CKpHHTa -,
.
,
Head First O Reilly ,
.

ISBN 978-0596527747 . Authorized Russian translation of the English edition of Head First
JavaScript O'Reilly Media, Inc. This translation Is published and
sold by permission of O'Reilly Media, Inc., the owner of all rights to
publish and sell the same.
ISBN 978-5-459-00322-2 , 2012
,
, 2012

OReilly. .
.

, , , . ,
,
, .

, 198206, -, , 73, . 29.

005-93, 2;
95 3005 .
27.09.11. 84x100/16. . . . 63,840. 2500. 26462.
CtP , .
197110, -, ., 15.
 15,
, -
, .
, , < 1>...
,
!


Head First JavaScript

.,
& 6 .
J a v a S c r ip t .

1-99/4,
, - ,
, .
,
Parsec TI.

- ...
.
,
. ,
,
,
,
JavaScript.
, -
H ead First .
,
H ead First. ,
-
. .
,
.


--
<^

23
1 : 35
2 : 65
3 : 115
4 ... 163
5 : 215
6 : 267
7 : ) ) 311
8 : H T M L DOM 363
9 ,:: 411
10 ; 465
11 . : 499
12 : 549

G ' ] ^

8 1 1 .
- , ,
. ; !
. , ,
. ,
!?

? 24
, 25
: 27
? 29
30
32
33


? . ,
. . -
JavaScript. ,
HTML CSS,
...
.

, 36
... 37
A JavaScript 3g
, , ! 40
<script> 45
HTM L, CSS JavaScript 46
49
iRock 50
- iRock 51
51
52
53
iRock 54
iRock 56
57
58
61
iRock 1.0 62

ft is good to meet you, Paul.

10


Kl

23
1 : 35
2 : 65
3 : 115
4 : /)^)(... 163
5 : 215
6 : 267
7 : 311
8 : H T M L DOM 363
9 : 411
10 : 465
11 . : 499
12 : 549

1 1 .
- , ,
. ; !
. , ,
. ,
!?

? 24
, 25
: 27
? 29
30
32
33


)(|> 1

, !
.
, ! ,
. ,
.
,

66
67
: 72
76
77
78
? 82
83
84
87
- 88
... ... 93
94
96
5 1() 811() 97
? 98
102
getElem entB yId() 103
104
109

11


! ,
.
, ,
. ,
, ,
. , :
,
.

, JavaS cript 6
? 118
1 119
122
123
5 1 1 1() 124
8 1() 125
129
130
131
1 132
1 133
51 137
812 138
? 140
141
142
147
JavaScript - 149
150
greetU ser() 151
152
154
156
... , 159

12


|> 1 1

...
. ,
...
. !
.
. , ,
? , ,
? !

, ! 164
, - 166
if 167
169
170
else 171
174
175
176
Welcone fo if/e ls e 182
if 183
S T IC K FIGURE 185

ADVEW TURE 186

190
flickeiiher != ---, ... 191
buitoN to
Start... 192
194
/ / 195
197
198
? 199
202
203
sw itch /case 205
switch 206
- 211

13


, .
, , , .
, , Reply
! ,
. JavaScript .
, .
.
.
Available

216
... for 217
for 218
for 219
220
221
seat_avail.png , H TM L 222
, 223
Unavailable 224
225
JavaScript H TM L 229
230
235
I)
236
237
238
seaLunavaiI.png 244
Select while 248
while 249
251
257
258
259
M andango 261
264
seat_selectpng

14


8 11 ,
.
.
.
, .
, ,
.

268
270
271
272
275
276
277
278
, 281
8 18 1() 283
285
286
287
291
292
293
294
295
296
297
, 301
302
Lthrotjgh3mSow4areavaiia^e.Accept?
303
? 304
- 307

15


1]=>|>

811 .
. ,
, , -,
. !,
-
.
.

- 11 313
314
315
317
318
319
323
324
325
... 327
328
333
338
340
341
343
344
^*...* 348
351
... 353
354
? 355
356
357
358
359

16


|=*

HTML DOM
- Java
Script . ,
... , , .
-,\,
-, , ,
. JavaScript HTML-
, ,
DOM.

, 364
365
H TM L- 367
368
(DOM) 373
374
377
380
, 385
, 387
388
, 389
390
391
: CSS DOM 392
393
394
html j|;
395

r { 396
"" ^ style 397
^ 0^ ------- 1 ^
399
400
402
403
- 404
* 407

17


811 ,
. ,
!, .
,
, , .
, , ,
,
.

JavaScript 412
+ = 413
414
415
419
420
421
blog 422
427
428
429
430
431
D ata A c tio n s 434
var who; function display(what, when, where) {
435
var what; } 438
var when; function deliver(who) {
439
var where;
1
440
O bject 443
indexO f() 445
function displayO {
446
! 449
var who;
function deliver 0 { M ath 452
var what;
454
var when;
459
var where;
blog 460
YouCube? 461
18


, , , .
! ,
, .
. !
,
, ,
. - ,
!... !

Y ouCube 466
467
468
469
this 470
471
472
, Y ouCube 473
478
479
481
! 483
Objwr Instames
484
486
487
489
490
491
492
494
496

19


1
. , .
, ,
. ,
.
,
. , .
, ...

500
501
502
505
509
511
512
513
( #1) 514
515
516
- 517
( #2) 518
( #3) 520
521
522
524
! ( #4) 528
529
531
538
539
542
544

20


-
,
.
. JavaScript
Ajax,
. Ajax
,

.

550
, 551
Ajax 553
XML 555
XML + H TM L = XH TM L 557
XML Y ouCube 559
Ajax 562
X M L H ttpR equest 564
X M L H ttpR equest 567
Ajax 571
575
576
577
DOM 578
youcube.html
Y ouCube, 583
585
586
, 589
590
593
- 594
597
602
603
? 604

21
Ja o m a m b

JavaScript?

23


?
.

,
?

,
- ?
JavaScrip t
, M H ^ e c Z Z ^ ''^ ^
?

... .

?
.

-?

( HTML ,
,
HTML CSS
.)

JavaScript?

- ?
,
? ,
, Java
, ?

... .

Z fS o z o ,
-

.I

24


,
aJavaScript ?
?
- ? '

,
. ,
, - . ,
.
,
? ,
,
.
. ,
.
, ? ,
.
?
. .
.
... 13

, ! !
, ,
, , .
.
, ... .
:
. ,

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

> 25


^ . Kffi-

, -
. . ,
. ,

, .

Head First
. , , -

40 %.
) ^ -

' ^ ^ .

, -
. ,^ _ ^ ;
, .

; : : ^
.

, , ,

, -
? ; : , . .- . = . -
.. . . . ,. , . - , " " " "
- , . . , . .,, ,. . . . . . . : P J -
w o * . K , , . , , .
^ ........... .. .,, -
, -
.. . 4 .0 . . . ,

26


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

. ,

. . ,
.
,
.

, ! ,
?
, .
. ,
, .
:
, ... ,
.
,
. , ,
, . ,
, (
, . .)
,
. = ,
.
: ,
,
.
! ,
, ,
. .
.

27


:
,
, . .
, ,
.
: ,
,
,
.
,
. ,
,
. , ,
, .
,
, , .
.
,
80 . ,
!.

,
, ,
.
.
,


. , )
;
.
,
. ,
.
,
, , -
. , , .
,
.
,
.
, , . .
, .

28


cMO}keme ,
co
. .
; ,
, . .

.
. .
, .
-
.
. . , .
, ;
. , - .
. , ,
, - .
.
.
, , .
.
, .
. ,
. , , ,
. .
,
. !
. .
.
,
! . .

. !

(
: .
)
.
,

.
, ,
.

, ,
, ;
, .
YouCube.
; ,
, . . ,
,
. ,
. .

> 29


, . ,
, .
,
.

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

JavaScipt.
, , ,
JavaScript,
, .
, 95 % .

.
; oaJavaScript,
,
, .
, ,
JavaScript.

.
,
JavaScript,
.
. ,
Firefox.
.

30


.
.
,
, .
.

.
: ,
xojbomo . ,
.
, , ,
.

.
200 ,
.
, , ,
. ,

.
,
.

http: //w w w . headfirstlabs. /books/hfjs/

.
,
, (
).
, .

* 31


- III

,


. ,


,

, ,

1995 .
Ruby on Rails.

- 10 . ,
.
elainenelson.org.
- G eorgia Tech. ,
, R ed Sox.
, .

III - Ajax: T h e Definitive G uide,

O Reilly.

- 15 .
.
- - ,
.
,
. , .
.

32


;
,
,
?
. ,
, .
. .
JavaScript
.
. , . ,
.
,

OReilly: .

H ead First. .

H ead First .

, . Heat
, ,
; ?
. , !

.
, -
.
.

.
.
O Reilly.
,
,
(www.headfirstlabs.com),
- ,
^ . , !
.
,
, ,
H ead First.
...

33
 /

+
%

? . ,
. . -
JavaScript. ,
HTML CSS,
...
.


, )
, ,
, .
,
. ,
, -!

H ouse F inder

Ready to find a new house?
Enter your annua} income; jSOOOO
.
Enter the numtier of bedrooms;

Enter your ZIP code;

Done -
.
,

.

36 1


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

.
.
\

> 37
 Javascript

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

JavaScript -,
.

38 1


Please enter a number.

f OK - " ?

codT Z iZ r

H ouse Finder - Matches_

e o e
T he following h o u s e s w ere found:
-

110 Etm Street View 1
^^
400 Map! Lane View {
.

847 Main Street View

Done

Vou can affo rd a house that costs up , 0 , 3 2 0 0 0 0 .

,


. ^

* 39
HTML, CSS JavaScript

B s a u iM v o

C6em, , ^ !
HTM L, CSS JavaScript -. HTM L
, CSS , JavaScript .
-, (HTML) (CSS)
(JavaScript). CSS, JavaScript
.

<html>
<head>
</head>
<body>
^^idii'*idi"heIdsr">Ready to find a new house?</dlv>
<div id="left">
<img src-"house.png" alt-'House />
</div>
<form name=
<style type="text/css">
<div clas
<input body {
font:14px arial;
</div>
text-align:center;
<div clas
<input }
</div>
<div clas #frame {
<input width:400px;
</div> }
<input tyi
<input ty] #header { <script type="text/javascript">
</form>
font:l6px arial; function v a l i d a t e N u m b e r (value) {
font-weight:bold; // Validate the number
!
</div> margin-bottom:15px
</body> / / i f (!isNumber (value))
</html> ) alertC'Please enter a number.");

#left {
} JavaScript
float: left; e) {
function v a l i d a t e Z I P C o d e (value)
width:llOpx; // Validate the ZIP code
}
div.field {
margin-bottom;lOpx
text-align:right;
function calcPriceO {
} var maxPrice = d-
</style> document.getE l e m e n t B y I d ( " i n c o m e ) .value 4,
alert("You can afford a house that costs up to
maxPrice +

HTML
7 function findHouses(form)
var bedrooms =
{

do c u m e n t . getElementById("bedrooms ) .value,

var zipCode =
document.getElementByld("zip") .value;
.
// Display a list of matching houses from the server
form.submitO ;

|| </script>

r
CSS
JavaScript
^^ ,
. f
^
1'.

40 1


House finder

@ 0 ,
Rgfirfy tn flndanew bouse?
...

Enter your annual income: |

EnKsr fte numbo-of House Finder
,
,
E m s your ZIP wS--*----- ^
Ready to find a new house?
Done __ _ -
Enter your annual Income: jioooo ____
Enter the number of tiedrooms:

Enter your ZIP code: [95014
!

c > Done
Calculate Wee 1 Shop for H q u ^

You c m afford h ouse th a co sts up to 5320000.

, JavaScipt!
-
,
.

JavaScripl ,


- .
* 41
 JavaScript?

HTML CSS?

JavaScript.

HTML u CSS

HTM L
CSS. CSS ,
,
,
.
JavaScript
, ,
.
JavaScript ,
, ,
, ,
.

1) 1>1 1) .
JavaScript
,

. ,
,
JavaScript .
, ,
, .

HTML + CSS + JavaScript =

42 1


, .
House Finder ,
. .

<html>
<head>
<title>noMCK f l O M O B < / t i t l e >
<script type="text/javascript">
function validateNumber(value) {
//
// if (!isNumber(value))
a l e r t (", .");

}
/ J ^ t i o n validateZIPCode (value) {
//
// if (iisZIPCode(value))
I a l e r t (", ^

ler'
t:'("tibi' ^ $

function findHouses (form) { ^ . value-

var bedrooms = d o c u m e n t .g e t E l e m e n t B y l d ( bedroom ).
var zipCode = document.g e t E l e m e n t B y I d ( " z i p " ) .value,

//
f o r m.submit();
}
</script>
</head>

<body>
<div id="frame">
<div id="header">r0T0Bbi
<div id="left">
<img src="house.png" alt="House" />.

< f o m name="orderform" a c t i o n = " . . ^ e t h o d = " P O S T " >

<div class="field">ae 1^ :
size^l2
<S^biur="validateNumber(this.value)"7^</div>
<di7Tlass="iield" >55~^^^^5:
<input id="bedrooms" type="text" size-"6'^
onblur="validateNumber(this.value) " / > < / d v >
<div olass="field">BBeflHTe :
<input id="zip" type="texj:L.ai^e;:;^
onblur="validateZIPCode W j i ^ a l u e /></div>
<input type="button" 1="1 "
oncliclc="calcPrice() />
^innnt f.vpe="button" 1 = " ^
, H ^ Tcl?^itodHouses (this .f o r m ) 7 > /
</fOrifL5
</div>
</body>
</html>

* 43


.
, .

<html>
<head>
< t i t l e > n o M C K flOMOB</title>
<script type="text/javascript">
function validateNumber(value) {
//
//if (!i s N u m b e r ( v a l u e ) )
a l e r t (", .");

}
f^I^ction validateZIPCode (value) { ~ .
f I I
( 11 if (IisZIPCode(value))
V a l e r t (", .
1 --------------------- ,
.
");

function findHouses (form) { ,

var bedrooms = document.getElementByld("bedrooms ) .value,
var zipCode = d o c u m e n t .g e t E l e m e n t B y l d ("zip").value.

//
form.submit ();

</script>
</head>
I ,
<ody>
<div id="frame">
<dlv id="header">oo ? < ^ 0 ^

<div id="left"> income.
<1 ="." a l t = " H o u s e ' ' ^ ^

< name="orderform" a c t j ^ p ? < ^ method="POST">

<div class="field">aa^* :
r^-<^vnnmp"^fype="text" 1 ^ = " 1 2 "
<^lur="validateNumber (this.value^5/></dlv> ,., -
<^1 class="ileld">Uee :
<iput id="bedrooms" type="text" 31="6" ZIP co d e.
onblur="validateNumber(this.value)"/></div>
<div class="field">Bee :
<input id="zip" type="te::-.aiz^l0j^
onblur="validateZIPCode<tth^ 1^ /></dxv>
< input tvpe="button" 1="5 "
OTiclick="calcPrice ; -
- ' bULLun"
=" " ^
>:
onclick="findHouses (this .form) ; />

</form>
</div> .
</body>
</html>

44 1


< script >

JavaScript -,
.
, JavaScript...
< s c r i p t > .
-,
. :

<html>
<head>
,
<title>House Finder</title>
- .

<script type="teKt/javascript"> JavaSc^nlpt.

script
HTML- function validateNumber(value) {
// scrip t
oSmmo / / i f (!isNumber(value)) JavaScript...
alert ("Please enter a number.'') , HTML,
,.
head. }

</script>

<body>
, /
HTML-.
<! HTML- >
</body>
</html>

---- < ------------
- 3 * : 1

: ,
< s c r i p t > ,
/ I
?
< s c r i p t >
< h e a d > ?

JavaScript?
Q; . Microsoft
0. < s c r i p t >

; ... <script>
,
VBScript ( Visual
Basic) Ajax,
ASP.NET AJAX.
...
.

,
. 12. CSS...
type="text/javascript' . JavaScript
text/ ,
javascript. ,
<head>.

* 45


HTML, CSS
U JavaScript
, HTM L-.
CSS ,
HTML. , JavaScript

...
, .

St" ,
-
URL...
"
S e 6 - c e p 6ep
,

.

^
-*
, -
HTML,

&
H T M L -

55... ^
H0U5 FMer... ...
-
Ready to find a new house?
Enter your annual Income; jsoooo
Enter the number of bedrooms: |3
-
Enter your ZIPcode: |5ioi4

you can afford a house that costs up to $320000.

Ctone __

46 1


811?

JavaScript?
, ,
,

0
,
! .
!
type.

,
!. , , ,
. , ,
. ! JavaScript ,
JavaScript.
, . ?
. ,
++ #, . ,
.
!.
JavaScript,
. , -

1

, 11,
. ,
. ,

, .

- .
11? < s c r i p t > .
House Finder HTIVIL
0 * JavaScript?
- , ! JavaScript

0 ; <script>
. .
HTML
11 - ,
-.
, JavaScript,
<script>
.
JavaScript.


.

, JavaScript
,
House Finder ( Custom):

alert JavaScript / Custom onblur JavaScript I Custom

calcPrice JavaScript I Custom onclick JavaScript I Custom

zipCode JavaScript I Custom findHouses JavaScript I Custom

var JavaScript I Custom value JavaScript I Custom

47


,
!, :
'
,
.
<head>
<title>noHCK flOMOB</title>
<script type="text/javascript">
--- alert CjavaSc^/ Custom
function validateNumber(value)
//
/ / i f (!isNumber(value)) ,
alert(", . );
} ^ ^
function validateZIPCode(value) {
//
^ c a lc P ric e JavaScript /()
// if (IisZIPCode(value)) ,
alert (", .

) _ .
'p 'r a x p f i f e " i 'd o L L n t . g e t E l e m e n t B y I d ( " l n c o m ^ 4 . v a l u e * 4;
C JavaScri^ Custom
' f f 'alert("
'" S

1 -
/ .
function findHouses (form) { value-
var bedrooms = document. getElementById( bedrooms^)-val
var document.getElementByld( zip ).
findHouses JavaScript ( j^u s to n T )

//

form.submitO ;
Z ip C o d e JavaScript (^CustoirT)
</script>
</head>

<body>
<div id="frame">
.
<div id="header">r0T0Bbi oa.</dlV
<dlv id="left">
<img src="house.png" alt="House /> _____________
(^Ja va S crlp Q Custom

<div cla^field">ae ^ ,
<inpi^^d="income" type="text" size="12"
onblu?="validateNumber(this. value)"/></div>
<div class="field">BBeflHTe : .
<input id="bedrooms" type="text" size-"6"
onblur="validateNumber (this . v ^ e ) "/></div> - v a ii^ ( j a v a S c r l ^ Custom
<div class="field">Bee (^^;^^
<lnput ia="Zip- LYpe-
id="zip" type-"text" s i z e = --
n^
onblur="validateZIPCode (this.value) /></div>
<input type="button" value="Bc "
.
o n c l i c k = " c a l c P r i c e ( ) />
<input type="button" value="KynnTb "
oncliclc="findHouses (this .form) ;" /> o n c ii^ c k (JavaS cript)/ Custom

,,

48 1


HTM L CSS
,
iRock. {Rock.
HTML
,
. LS!?'

.
- ... ,
iRock ...
.

Virtual t>et
.

iRock
.

?
I
-

I .
.

iRock,
?
,
?

> 49


^Rock
1 ,
JavaScript.
.
.

,
1 -. .

!
.

,
,
.
...

,
^
.

0
.

50 .. 1


- iRock
-, 1, .

iRock.htm l.
http://www.headfirstlabs.com.

<html>
<head>
<title>iRock - Rock</title>
</head>

<body>
<div style="margin-top:lOOpx; text-align:center">
<img id="rockImg" src="rock.png" alt="iRock" />
</div>
</body>
</html>

He
"7

irock.html

____ _____
, B o IIP o C b l
1 . ,
,
: < d i v > CSS?

, , . .

JavaScript. 3 * , CSS
HTML-.
?

, CSS <style>
.
,
.
iRock,
.

51


, :
.
(
),
alert. {Events) JavaScript
, (onload)
(onclick).
JavaScript.

.Rock-TheVinuaS
onload

iRock .

o n l o a d !

onload


onload <body>.
,

JavaScript.

alertQ , Iam your petrock.

.

E K 3

52 1


JavaScript
. ,
alert {) .

, .

^
alert Ja va5cript
,, ,
/.

, >


a lert
, .

. 6 .
.

> -
, .
. J a v a S c n p t - ,
^ J
, ^
. .

, JavaScript.
,
:

alert('Hello, I am your pet rock.');

!


,
.
. ,
.

> 53


iRock
iRock,
onload alert ( ).
JavaScript irock.html:

<html>
<head>
,ead>
<title>iRock - The Virtual Pet Rock</title>
</head>

<body onload="alert('Hello, I am your pet rock.

<div style="margin-top;lOOpx; text-align:center">
onload even t _
<img id="rockImg" src="rock.png" alt="iRock"
</div>
, </body>
</html>

<body>,
-

, Ja va S crm t
.
_

irock.html

iRock
, onload.
irock.html , .
iRocit - ViRual WRotli _


<.

Hello, i am your pet rock.

54 1


'^
B o ilp o c jji


?
alert ?
1<

! , ,
, I , . alert ()


JavaScript.
. , .
JavaScript
onload
( )

, .
.
.

o n l o a d
, ?
onload,

? onload
<body>.
0:. ! HTML JavaScript ,
0:.
, ?
,

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

),
JavaScript ,

<script>? . ,
.

JavaScript, alert
; .
.

: iRock .
,
Hello there.
onload.

,
.

JavaScript iRock.

, oaJavaScript.

o n lo a d .
oaJavaScript.
0

a le rt .
,
.

> 55


, JavaScript.

.
JavaScript.

.
,
.

^Rock

1, ,
,
... ? !

- -- -

,

.

,
3
.

56 1


}
,
. , .
JavaScript 1
,
...

.
(
. What is your name?

Paul

(cncd

iRock


.
(Rock
3M0U,UUj il Is good to meet you, Pau*.
-
.

JavaScript
1, (
) .
JavaScript !

^
, , ,
JavaScript, .

* 57


^
JavaScript,
.
onclick

onclick ,

-


.

JavaScrip.
]" 1
.
. JaV a^cT ^t
touchR ock; (),
,
.
1
.
p ro m p t()
, -
. -
touchRock. -
^ .
function touchRockO {
var userName = prompt(" ?", " .");

if (userName) { ,
^
alert(" , " + userName + ". ) f ...
document.getElementByld("rocklmg") .src = " r o ck_happy.png";
}
' t i __

.

irock.html
?

58 1


JavaScript
1 .
?
:


11.
/
<html>
<head>
<title>iRock - The Virtual Pet Rock</title>

< type="text/javascript">
function touchRockO {
var userName = promptC'KaK ?", " .");

if (userName) {
alert (" , " + userName + ".");
document.getElementByld("rocklmg").src = "rock_happy.png";
}
}
</script>
</head>

<body ....... =" .........( ................................ ) ;">

<div style="margin-top:lOOpx; text-align:center">

<img id="rockImg" src="rock.png" alt="iRock" style="cursor:pointer"

............... = " .............................; " />
</div>
</body>
</html>

touchRock 0
alert

script
onclick

'Hello. I am your pet rock. '

* 59


ty p e <script>
<scnpt>, , ,
. . -
JavaScript.
J _________________
<html>
<head>
<title^Rock - The V i s u a l Pet Rock</title>

script I type="text/javascript">
TEmumTjn touchRockO {
var userName = prompt(" ?", " .");

if (userName) {
alert(" , " + userName + ".");
document.getElementByld("rocklmg").src = "rock happy.png";
} ^
} onload '
</script> ^ <hody>
</hpsd> .
^ .
<body onload =" alert |(
< d i7 * f f!ie * fc a rg fie re p fl

<img id="ropkIma" src="rock.pna" alt="iRock" style="cursor:pointer"

onclick^" " />

</body>
</html>

onclick

touchRockO '
.
.

60 1


JavaScript ,
1 .
, .

id="rockImg" src="rock.png" alt-"iRock"

______ onclick="touchRook();
S t y l e = " cursor-.pointer
iRock
. />
mm

function touchRockO {
var userName = promptC'KaK ? " ,
" .");
if (userName) {
alert(" , " + userName + ".");
document.getElementById("rockImg").src = "rock happy.png";
}

^ ^

(i
,
, ..

.

What is your name?

It is good to meet you, Paul
Paul

( C a n c ^ ) f~ O K

61
IRock !

) iRock 1.0
, i r o c k . h t m l
62
H ead First Labs {http://www.headfirstlabs.com/books/hfjs/)
. -,
:

(Rock - The Virtual Pet Rode :

0

!
--444 =1=- JavaScript
3 a c T a B t R ^ - 0 b ia 4 R < lt 4 i f w e ^ ------------
-. .

~141 0 ^^
-
' ,
-
i io u c h R o c k ().


3-




onclick.
.

. ...
,

62 1 ?


, JavaScript?

. ^
-------- \ xojJoiiio, ! ^ ----

... . .

(Rock -
"
MU
.
?

, ,
.

.


, !
.
. 1 ,
. ,
.
,



.
.
JavaScript. ,
.
House f mlr _
.
R eady to find a new h o u se ? ,
,
Enter your annual income: jioooo
,
Enter the num ber o f bedroom s; |3
^ .
Enter your Z ip code: p i o i 4

CaicuUte Price 1 Shop te r H ouses..

.

1.

,
.
? ?
?

66 2


,
: , , . . JavaScript
.
JavaScript.
JavaScript

$19.95 number

. boolean

text
^ .

JavaScript
: text, number boolean.
Number

,
.
T a v a S c rip t
^ (2 ),
(2.5 ). Boolean

-
true false.
;
,
,
;

.
,
. 4 .

. ; 8 1
(" JavaScript.
') , .
('').

.
> 67


,
JavaScript, ,
.

1 5 D G n lllts
1 , :

68 2


> 69


\
JavaScript.

Object ( Text

9).
/

4
i
B o o lean

1202

is-.
.. fi ^ ^

70 2


^ 71



JavaScript,
, . ,
?
,
.

.

3 0 0
.5
' ,
, , ,
.
.

2-4 .
,
6 :4 3
. ,


.

32-4
- ,
w w w .duncansdonuts.com
,
,
. .

,
?

72 2


, ,
, .

D o n (J ts
' .
1202

73


11^
,
, .

--

74 2


: :

.
!
. ,
.
...
.

,

. ,
10 1.
?

? ,
.
,
. -
?
, ,
, .
, ,

, ,
.
,
.
?

. ,
.

, .
.

.
.

75


,
.
. v a r ,
. ,
JavaScript .
Ja va S crip t
.
var

.

, ,

.

v a r
.

. . -,
.

, ^
<. ^^.


v a r p a g e H its ; .

,
.

.
.
. , p a g e H i ts
, .

X ,
, .

76 2


, .
,
.
.

:
.

.
.

,
...
. -

.
.
.


.

va r p o p u la t io n = 300; ^

/
.

.
.

?
.
JavaScript p o p u l a t i o n
, 300.

. cyaeJavaScript
, ,
.
.

* 77


I
00|=0!
const.

, c o n s t
. , JavaScript,
, . .
,
v a r c o n s t . ,
! ,
.

.
.

/
const 1 4- \

. .

.

. ,
. ,
, .

! .

const TAXRATE = .9 2 5 ;

/


,

.
,
, , . 0 .9 2 5
,
. ,
,
.
,, .
78 2


,
.

.

,
,
.
,
, . ,

,

.

,
?
.

. .

(1
= 7 ).

( 10 0).

(50 ).

> 79


, :
,
^
.

. .

(1 = 7 ).

( 10 0).

(50 ).

var tem p;
,
,

.

const HUMANTODOQ = 7;

1
^
,
-
.

var countdow n - ;

X,
'

i-O.

var donutPrice = .SO; const PONUTPRICE = .SO;

,
.
.

80 2


B o iij= o c :b i

JavaScript .
, , ,
? ?
.
Q ; ; .
, JavaScript ,
?
. , .
. , !
JavaScript . . ,
, 17 , . ,
X , ,
. . , .
seventeen, . ,
" " , ,
JavaScript false .
,
?

.
I
,


, ?
JavaScript. ,
,
,
, 0 ;
.

,
,

.
.
,
,

. JavaScript

,
, ,


, . .
. .

v a r ,
: text, number boolean. c o n s t .

, JavaScript
. .
.
.

81


?
, JavaScript
, ,
. JavaScript
, (
, JavaScript ). ,
;

, ( J ($).

,
, (_) {$).

,
,
$, .
.
JavaScript
, .
.
, ,
.
, ,
.

,
.

.
82 2


f ir s t N a m e
: t o p i


.
:
J
. :

chow ,
.

:
:


,
. $
topSecret $total

?g u i l t y 1^

: :
-
,

, .

.

, .
,
811. 11 .

donut ' fflazel

* 83


, 2 ,
11.

?1

#
..
. .

,
JavaScript, , ,
.
.
- ,
.
, .
n l_ c a ]c e _ d o n u ts


.


N n C a k e D o n u ts
, ,
. _

,

.

.
.
84 2


JavaScript

. ,
.
.

-
,
( n u m b e r of cups). () - ^
-
^ 5 ~ (hatch)
(the .
- o f the
.

^
number)
Cocm om ae (status)

^ .
, ().
(^e,cord holder\

(eclaits).

emDlovee*of*the*Month

> 85


.

.

-)
-

( n w w b e f or CMpS)- (flour) - ^

^ (batch)
( .

enployeeOfMonth
Text

( number) Number
(status)
-
(alarm).

alarmstatus

V
Boolean
T ext

cups-o-cjoffee
Eir^loyee of the Month |
alarm s
e c la ir W in n e r I Tfc

, f Tax# f ~

flour quantity

JavaScript

86 2


,
.
...
! ,

. ,
,
.

Ouncan's Just-irvTime Donuts

Mdonuts^c

^ Minutes pidiup.
-
6^
'
, .

! .

D onut Blaster 3 0 0 0 .

! oPFtr V>x>ifTB

> 87


-
.
, .


.
. JavaScript, JavaScript.
.

D u n c a n ^ J u s t-ln ^ tn e O o n m s

D u n c a n 's J u 8 t - J n - T i m e D o n u t e

All donuts 50 cents each, cake or ^azed.

" N a m e T jp a u l^

# of cake do n u ts: ^
# o f g la zed do n uts; pL2

j^ u te s
& jb to lS iir |$ 6 .0 0

Tax: j$0 .5 S
Total: fse .is

Done

JavaScript ,
,

JavaScript
.

88 2


( - + - )

, ,
.
,
811 .
JavaScipt

!

?
?

89


JavaScript,
, .

$NaN. ,
.
.

Duncan's
10
D u n c a n 's Just-In-Time Donuts $
AHdonuts 50 cents each, cake or ^ z e d l -
Name: jPauT ?

# of caKe donuts: jO
# of glazed donuts:
Minutes'til pickup: j45
Subtotal; p N a iT ^

,
!

, . -
(
http://www.headfirstlabs.com/books/hfjs/)
W
,
.

= .

90 2


<html>
<head>
-
<title>noH4MKM BpeMeHM</title>
, \
<link rel="stylesheet" type="text/css" href="donuts.css" />
<script type="text/javascript">
function updateOrder() (
. const TAXRATE;
const DONUTPRICE;
var numCakeDonuts = document.getElementByld("cakedonuts").value

var numGlazedDonuts = document.getElementByld("glazeddonuts").value;
var subTotal - {numCakeDonuts + numGlazedDonuts) * DONUTPRICE-
, var tax = subTotal * TAXRATE;
var total = subTotal + tax;

document.getElementByld("subtotal") .value = . sum'otai t<
+ subTotal.toFixed(2)
.
document.getElementByld("tax").value = + tax.toFixed(2)
^ document.getElementByld("total").value = + total.toFixed(2);
function placeOrderO {
// ...
form, submit () ;
)
</script>
</head>
.
<body>
<div id="frame">

<form name="orderfo^' action="donuts .php" method="POST">

<div class="field"> ^
: <inpu4,type="text" id="cakedonuts" name="cakedonuts"
value=" onchange="updateOrder0 ;" />
. </div>
<div class="field">
: <input type="text" id="glazeddonuts"
name="glazeddonuts" value=" onchange="updateOrder();" />

, <div class="field">
<input type="button" value="Cea "
. onclick="placeOrder(this.form);" />
</div>
<7form5 - ----- -----------------
</div>
</body>
</html>

, , ,
.

* 91


,
.

. ,
, , .

,
, ,
?

.

, ,
, .
,
.

92 2


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

, , .

JavaScript
a X.
const DONUTPRICE;7 "
^
v a r n u m C ak eD o n u ts = 0;

v a r nu m G laze d D o n u ts = 12;
3-
var subT otal = ( n u m C a k ^ C f o n u t s + n u m G l a ^ d D o n u t s ) * D0NIJ7?RICE;

subtotal = (0 + 12)
0

.

D O N U T P R IC E . JavaScript
;
u n d e f in e d .
,
, .
,
u n d e f i n e d
.

.

.

D O N U TP R IC E

* 93
NaN ,

NaN
u n d e f i n e d , ,
epe e xJavaScrip: NaN.
N ot N u m b er . s u b T o t a l
- , . ,
... NaN.

!
"
subtotal = ( + 12) * ? = NaN NaN ,
, -
.

,
.
DONUTPRICE :

const DONUTPRICE = 0.50;

_
;^
B o iIp o C b i

I Donut,
, g e t D o n u t ( ) ,
? .
numDonuts.
,
.
0 1
.
, .
.
NaN
.
?
...
.
; ,
! .
.
,
.
, ,
NaN , ,
. ?
. , NaN

JavaScript,
. Q ;


.
JavaScript,
,
9.
-
?
.
,
.
,

94 2


...
.

.
...

......

Duncan's Just-In-Time Donuts

Altdonuis 50 cents each, cake or glazed!
Name: jcrS

I GO 'FFEfE
Bom
J -....

.
*>;MSUT5
t 50F*;iaE ^ SSSSSSSSSS?

-0'0im9e ^ iiSwmwS^^

> 95


)
JavaScript . ,

. , ,
.

1 + 2 = 3 "1" + "nuts" = "donuts"

I
^
-
^ >.
)


.
.

, ,
, , ,
?

, ,
? ?

5811
, . ,
,
,

, .
.
, | 1 !
.


JavaScript.
,
, ,
> .
, .
,

.

96 2


$11(] $11()
,
, .
.
JavaScript :

p a r s e F lo a t

()
. .

51 " 1 " . -
.

^11:("1") + p a r ^ n t ( " 2 " ) = 3 .

/ " \

, p a r s e I n t () p a r s e F l o a t ()
. ,
.
, , ,
. .


p a r s e F lo a t( " $ 3 1 .5 0 " ) = ,

/ !
.

> 97


?
.
, ...

#00 Duncar*s Just-ln-Time Donuts CD

Duncan's Just-ln-Tlfn Donuts

All donuts 50 cents each, cake or glazed!

Name: Greg

# of cake donuts: 6
# of glazed donuts:
Minutes 'til piclcup: W
JS 3 1 .5 0 ^
:

, Total: $34.41
...
^ ? Order

Done

, ,
.

.
$31.50 / $0.50 = 63
^

. ... ...

, .
, , , "3 -" + "
. ,,
JavaScript . .
, .

98 2


.
u p d a t e O r d e r ()
,
.

docum ent. g e tE le m e n tB y ld (" c a k e d o n u ts " ) . v a lu e

,
.
.

d o c u m e n t. g e tE le m e n tB y ld (" g l a z e d d o n u t s " ) . v a lu e

function updateO rder0 {

c o n s t TAXRATE = 0 . 0 9 2 5 ;
c o n s t DONUTPRICE = 0 . 5 0 ;
v a r n u mC ak eDon ut s =

v a r numGlazedDonuts =

if (isNaN(numCakeDonuts))
n u mC ak eDo nu ts = 0;
i f (isNaN(numGlazedDonuts))
n u m G l a z e d D o n u t s = 0;
v a r s u b T o t a l = ( nu mCakeDonuts + n u m G l a z e d D o n u t s ) * DONUTPRICE;
v a r t a x = s u b T o t a l * TAXRATE;
v ar t o t a l = subTotal + tax ;
d o c u m e n t . g e t E l e m e n t B y l d ( " s u b t o t a l " ) . v a l u e = "$" + s u b T o t a l . t o F i x e d (2);
document. g etE lem entB yld (" ta x " ) . v a l u e = + t a x . t o F i x e d (2) ;
d o cum ent.getE lem entB yld("total").value = + t o t a l . t o F i x e d (2);

99


.
' ,
, u p d a t e O r d e r {).

docum ent. g e tE le m e n tB y ld (" c a k e d o n u ts" ) . v a lu e

docum ent. g e tE le m e n tB y ld (" g la z e d d o n u ts " ) . v a lu e

,

51().

function updateO rder0 {

A c o n s t TAXRATE = 0 . 0 9 2 5 ;
c o n s t DONUTPRICE = 0 . 5 0 ;
V v a r n umC akeDo nu ts =

w parselnt(docum ent.getElem entByld("cakedonuts").va(ue):,

\ v a r numGlazedDonuts =

parselifxt(docum ent.getElem ent8yld("glazeddonuts'').value);

if (isNaN(numCakeDonuts))
n u mC ak eDo nu ts = 0;
i f (isNaN(numGlazedDonuts))
n u m G l a z e d D o n u t s = 0;
v a r s u b T o t a l = ( numCakeDonuts + n u m G l a z e d D o n u t s ) * DONUTPRICE;
v a r t a x = s u b T o t a l * TAXRATE;
var t o t a l = subTotal + tax;
docum ent.g etE lem en tB y ld C 'su b to tal").v alu e = + s u b T o t a l . t o F i x e d (2);
docum ent.getE lem entB yld("tax").value = + t a x . t o F i x e d (2);
d o c u m e n t . g e t E l e m e n t B y I d ( " t o t a l " ) . v a l u e = "$" t o t a l . t o F i x e d (2);

1 () __
,
.

100 2


NaN
, ,
. .

, . , (+).

p a r s e i n t ()
undefined, . p a r s e F l o a t {) .

...
,
JavaScript.
.
6 _____________
j.a> -
rls irmoPu .
atpt 70 < a*'
Duncan's JusMn-Time Donuts
Nam:jc^
of oake donuts: j6~~
^ of gtazarS donuts:
Minutes 1p)cfcup:|Ja
S u W o la tjiliJ
Tax: [so'ff
Total: IsT gT

Oone

)
- "S
! ___ )

, ,
.
- ...

* 101


}
: .
- .
,
.
.

Duncans Just-ln-Tim e Donuts

0 0
Duncan'S Just-In-Time Donuts
All donute 50 certs each, cake or glazod!

Name:
# of cake dofiyts: p i
# of glazed donute; jio

Minutes 4it pickup: p5

, ,
. ,
.

102 2


getElementByldO

. , JavaScript
, i d HTML:

<input type= "text" id= "cakedonuts" nam e= "cakedonuts" /> < -

-
1(1 (
donuts).
'. # of cake donuts: 118

JavaScript -
ID g e t E l e m e n t B y l d (). getE iem entB ylP Q
,
, .
HTM L JavaScript.
v a l u e .

document.getElementByldO |
einjiu.i , pu.umimJiiJm-Liw* iJiJiiiu ,
!

, JavaScript
, ,
. ,
. JavaScript
.
getE lem entB yldO . ,
-
,
.
.

docum ent. g e tE le m e n tB y ld (" c a k e d o n u ts " )

.
docum ent. g e tE le m e n tB y ld (" c a k e d o n u ts" ) .v a lu e

value # of cake donuts: p i

.
,
.

* 103
 ?

,
. , .

.
,
value ( ) ("").

docum ent. g e tE le m e n tB y ld ("name") . v a lu e

nam e ,
.
. ,
, -
"
. IsNaN () . ,
( t r u e ) , ,
, ( f a l s e ) . .

'
.
Minutes ' pickup: jfifteen

:
.
\
isN aN (docum ent. g e tE le m e n tB y ld (" p ic k u p m in u te s " ) . valu e)

isNaNQ ^ -
tru e, , -^true

. ,
.

104 2


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

,

(" -
- . ,
.
.

fu4ction placeOrder0 {
V
if (.......... y o ' 'm ;; t 'p r o r i W e ', o an o r d e r . " ) ; J
alert(
II
else if .......................................

................. U'V'''oirmnsVDrovide''the'number of minutes until pick-up"

alert("I'm sorry but you must proviae
" before submitting an order.");
else
//
form.submit ;

docioment
}
'

getElementByld
isNaljJl value 1

* 105


p la c e O r d e r ( ) ,

, .

, :

J S nam e
.
. " "

f ui c t i o n p l a c e O r d e r {

V docmaent getElementByld J(
if ( ......... e R n b m ittin g an o r d e r . " ) ;
a le rt( " I'm sorry
' value
^ getElementByld | ( "pickupminutes" .1
else if (
is N a N j
getElementByld ^ ^ pickupminutes" ) 1 T value

a l e r t ("-
" before s u b m i t t i n g an o r d e r . '
else
/ /
f o r m . s u b m i t {);

106 2


!
,

. 51
,
!

CD
Duncan' ^
0 0
DuncanS aust4n-T5ni0 Donuts
donuts 50 cents each, cake or glazed!

Name:
# of cake donuts: pL8

# of giazed donuts; j5o

Minutes 4it ptekup; jwwen Tenept>j

^ 1$24 ,
Tax:[S2.22~

Total; |$26.
P lace O rd er j .O ' .

Ctone

Im sorry but you must provide your name before

submitting an order.

^

.

i'm sorry but you must provide the number of minutes

ur>ti! pick-up before subm ittmg an order.

C ~ oT J

> 107
...

(+) , , .
? JavaScript 1 JavaScript,
, .
Q ; JavaScript, . ,
,
. , i d , JavaScript
, , 1. .
, JavaScript
. JavaScript
, . , -
. , .
1 g e t E l e m e n t B y l d ()
.
1-? d o cu m en t .

2 ...
?
,
Q ; JavaScript -
, .

. ; -
, JavaScript .
. ,
, --- .
parseint {) v a l u e ,
p a r s e F l o a t (). Q ; g e t E l e m e n t B y l d ()
d o c u m e n t , . ,
, HTML
JavaScript. .
p a r s e i n t
? i d
. HTML, ,
JavaScript, ? ,
Q ; . JavaScript ,
, ?

.
, .
g e t E l e m e n t B y l d O ;
, ,
i d . ,

.
JavaScript?
,
9, ,
! i d
, JavaScript . ? .
HTIVIL. ,
JavaScript
Q ;
,
.

108 2


, ,
. ,
, .
. ,
. 12 24 1 2
.
.
,
, .

Duncan's Just-In-Time Oojnuts

# 0 0
Duncan's Just-In-Time Donuts
A ll c k m u ts 5 c e n ts e a c h , c a k e o r g la z e d !

Name

# o f cake donuts: |3 dozen p a rs e ln tO

# o f glazed donuts
'
3 d o z e n .
M inutes 'til pickup: jso 3.

Subtotal; |$1 50

Tax; [$0.14

Total; j$1.64 parseint("3 dozen")

Done

,
dozen . p a r s e i n t ()
.
^ucAOj
, . .

,
, dozen ? ?

V 109
 ..

dozen?
V

, 12!

,
dozen
. ,
12.
.

# of cake donuts; j3 dozen

# of donuts; p J

parseint("3 dozen")
parselnt("18")

^
d o ze n ,
[ 1 2 ..
.

3 * 12 = 0

SSSSSSSSSSSS
I '

COTTER ' sssssssss

110 2


p a r s e D o n u t s ()
.
,
JaVa^cfipt dozen.
12. http://www.headfirstlabs.
/books/hfjs/.
fu n c tio n parseDonuts (donutString) {
numDonut s = p a r s e i n t ( d o n u t S t r i n g ) ;
i f ( d o n u t S t r i n g . i n d e x O f ( " d o z e n " ) != - 1 ) dny^Mi,^
numDonut s *= 12;
r e t u r n n u mDo nu t s;
}

i-2..

) ...
p a r s e D o n u t s () u p d a t e O r d e r () ,

.


. .
function updateOrder { 7
const TAXRATE = 0.0925; ^
const DONUTPRICE = 0.50; j
var numCakeDonuts = ParseDonuts(document.getElementByld("cakedonnh<,-M i ^

ir (^IsStL'Ske^D^nu^sn^"^^""'' "glazeddonuts")":aiue <

numCakeDonuts = 0; .if- -- 6 .
If (isNaN (numGlazedDonuts) ) ,
numGlazedDonuts = 0; G

var to ta l . s u b lo ta l + t a , ; j f Z
document.getElementByldC'subtotal").value = + subTotal
a o o e t . g e t E l e m e t B y I d ( " t a x - , . v a lu e - "5 " * ta x . t o F lx S ^ )
document.getElementByld("total").value = "$' + total.toFixed(2);

. l lo M ^ p a x

( )
> 111
 !

!

JavaScript,
.

.


Duncan's lust-ltTim< Don s
@ 0 0
Duncan's Just-In-Time Donuts
All donulB 50 cents each, cake or giszedi
Name; {Alan

# of donuts; fl5

# of glazed donuts: |4 t o e n
Minutes -to pickup: |0
Subtotal: j$31.50

! Tax: jS 2 jT
Total:
Place Order

Done

112 2


,
?
. . , -'!

. ,

, .
81.


! ,
. -,
, .
,
, ,
. , :
,
.
 JavaScript,

, JavaScript

.
JavaScript , .
,
. , JavaScript,
.

.

Duncan's Jost-in-Time Donuts CD

( )
.
Duncan's Just-ln-TIm Donuts
All donuts 50 cents each, cake or glazed!

Name: jAlan

# of cake donuts; jlS

# of glazed donuts: |4 dozen !
^ ^ ^
Minutes til pickup: .
Subtotal: j$31.S0
T a x :|$ 2 jT "
Total: |$34.4

...

Ja vaScript


.
. ,

JavaScript, .

, ,
.
JavaScript .

116 3


S i'
Connection; close ^ ^ /-1
Accept-Encoding: gzip image/jpeg, image/p]peg, . ..

HTML
, .

<html>
<head>
<title>Duncan's Just-In-Time Donut..</t ^ .s
_ I " IP.- ri----p........... g"" __

<sc ------------------- --
^ type "text/javascript">
unction u p d a t e O r d e r () {

JavaScript
parseDonuts(donutString) { ).

function p l a c e O r d e r 0 {

.

( 1)
<body> .
<div id="frame"> -

<div c l a s s = 4 u b h e a d i n g " > A i r d o n u t r s r ' ^ ^ ^ ^ Donuts</div>

<drv i d = " l e f f > 50 cents each, cake or glazed '</div>
</<xmg src="donuttime.png.. alt=-Just-In-Ti^e Donuts" />
<div id="right">

</div>
</div>
</body>
</html>

U iT V P M

, ?

> 117
 , ...

) ?
oaJavaS cript,
. ,
-.
, JavaScript,
.
,
,
.
|>


-,
,
.

]81



, ^

.

581

.
,



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

118 3


____ < -------
!

, 11 Q ; JavaScript !
? , ?
.
; . ! , 0 ; .
. !
, ,
,
. .
, ,
.
3 * !
Ajax.
,
12. .
?

iRocl(
iRock? JavaScript ,
.
, ...
1. ,
, ,
. ,

,
...
.

...
.

0 ^ ^ 8
,,
Hft

, .

. ,
1. ,
.

119


^Rock }
1,
,
.
.

/ .
nttp://w w w .keadfirstlab< ,.com /books/hfjS.


,

.

/^
,


, ,


.

1,

.
,
.

1?
!?

120 3


,
,

,
iRock ?

J a v a S c rip t ,
...
.

,

1. , ;
JavaScript 1
. ,
1 ,
;
.

...5 .

121


JavaScript
.
, ,
.
.

(!)
,

.



-

.

,
. 181

. .
122 3


, 1) ; 2)
, .
.

,
, ,
2 2000 .

. ,
alert ( !) ,
. ,
(
refreshO; setTimeout(refresh. 1 ),

.

JavaScript
. ,
,
.
. ~ \

500 5

300 5

5000 1/2

> 123
 ,

^
500 5

300 5

5000 1/2

setTimeoutO
Jav aS crip t
s e t T i m e o u t {).
, (
http://www.headfirstlabs.com/books/hfsd/).
:

setTimeoLit( )
< ^ ^ '
.

s e t T i m e o u t (" a l e r t ('Wake 6 0 0 0 0 0 );

JavaScript, -
.
, ^ '^
setTim eoutQ
. .
,
.
s e t T i m e o u t ()
, 10
1;.
6>>
!

10 .

Wake up!

124 3


setTimeout()
setTimeout ():

setTimeout

, .
-
. - .
,
, set Interval {).
.
:

var timerlD = setlnterval :" a l e r t ('Wake u p !') )

- .
-
- .
XO .

I n o .

Wake up!
1 - ' 1
~~^iO .
Wake up! .
Wake up! t-O
'
Wake up!
, , ,
,

_
. , ,
. 9,1.3 .
8
, 5 iRock
. :

iRock rocklmg,
irock.htm l rock.png.*


,

. * k t t p : / / w w w .kea d firstla b s.co m /b o o ks/kfjs/

>> 125


, 5
.
^


. ^^^'!^?:9}^!!^^!^'^^.^{11^1).5 = ' . ';",

.. .5.*. . .);............ . ...................................................... ^

, ' /V^i/\/
L-CKyJ^,
^ /' (
'
.......
( .,
(& ), -
.
( 0 0 0 ). .
$.

Rock !
i r o c k . h tm l
, . iR ock
, ;
. ,
,
.
; .

Rock.

,


s e t T i m e o u t () .



iRock .
.

126 3


.
1
.

_
<
1|= :1

,

5 , ?
?
!
! , ,

. ,
, 5 .
, D a te ,
9. ,
.
?

,
,
5
15 . !
.
? ,
s e t l n t e r v a l ( ) ,
, c l e a r I n t e r v a l ( ) .
!

s e t l n t e r v a l
? ,
15 , 900
(15 X 60 X 1000). s e t l n t e r v a l ( ) .
0 ; . ! r e l o a d {) , ,
, t i m e r ID ,
l o c a t i o n :
!, , c l e a r l n t e r v a l ( )
lo c a t io n . r e lo a d ( ) ;
. : c l e a r l n t e r v a l ( t i m e r l D ) .

Ajax,
12,
.

127


' c B B te
:
-

Head First: , , , Head First: , .

. - ?
: , . : ;
H T M L CSS - ,
, .
; Jav aS crip t.
Head First: JavaScript?
.
: .
Head First: ? Jav aS crip t

?
. A Jav aS crip t
: , . .
. .
, .
Jav aS crip t. ,
Head First: ?
, ,
, : ,
H T M L CSS. ,
.
Head First: ?
A Jav aS crip t
: , , .
, Jav aS crip t , Jav aS crip t
H T M L -. ,
. .
, .
Head First: Jav aS crip t
Head First: ? . ?
: , : , Jav a S crip t
, ,
. , ,
, , ( )
. .
Jav aS crip t .
Head First: ?
, ,
: , .
, . ,
Head First: . ,
( 11).
.

. Browser: , .

128 3


1,
.
, .
,
. ,
' 1 .

,
X
/Rock.
/\


.

> 129


,
1 .
, , ,

,
. ,

.
,

,

, ,

1.
-.
, - 1 ...

docnent. 1.11'1

.
.


.

<1.<1 1 1 1 (1
................... .

;
.
, - .
,
. . 1 ,
.

130 3


docioment

d o c ijrn e p i

- .

<html>
<head>
- ,
< t i t l e > i R o c k - The V i r t u a l P e t R o c k < / t i t l e >
Jav aS crip t < s c r i p t t y p e = " t e x t / j a v a s c r i p t ">
v a r userName;
function greetUserO {
a l e r t ( ' H e l l o , I am y o u r p e t r o c k . ' ) ;
document.
1
f u n c t i o n touchRockO {
i f (userName) {
a l e r t ( " I lik e the a tte n tio n , " + userName + ". Thank y o u . " ) ;
}
getElementByld().
else {
userName = p r o mp t ( " Wh a t i s y o u r name? ", " E n t e r y o u r name h e r e . " ) ,
body.clientWidth i f (userName)
body.clientHeight a l e r t C ' I t i s good t o me e t you, " + userName + " . " ) ;
}

document.getElementByld("rocklm g").src = "rock_happy.png";
s e t T i m e o u t (" d o c u m e n t . g e t E l e m e n t B y l d ( ' r o c k l m g ' ) . s r c = ' r o c k . p n g ' ; " ,
5 * 60 * 1 0 0 0 ) ;
. }
</script>
</ he a d >

<body o n l o a d = " g r e e t U s e r 0 ; " >

<div styl e= "m ar gi n- top :l OO px; t e x t - a l i g n : ce n te r">
<img i d = " r o c k I m g " s r c = " r o c k . p n g " a l t = " i R o c k " s t y l e = " c u r s o r : p o i n t e r "
o n c l i c k = " t o u c h R o c k ( ) ; " />
J </div>

\& 3 8& </ body>
</html>

cm pam vp^>
4acao
.

^ ^ o "Hf j=
B o >eo C b l'

^ ! |-, -, , 1

? ?

0:, ! , .
-, -
; ,
.
. , ,
, , -
-. . ,
, , Safari
, . . Firefox Windows.

> 131
 ?

iRock

iRock. , Jav aS crip t CSS
. w i d t h h e i g h t
, .

style, h e i g h t ^

s ty le .w id th

L-----

s t y l e ,

.

, .
. , g e t E l e m e n t B y l d ()
d o c u m e n t:

<img id="rockImg" s r c ="rock.png" alt="iRock" ... />

/
d o c u m e n t .getEl e m e n t B y l d ("rocklmg").s t y l e .height

-
.

iR o ck
. ,

.

, : 1 0 0 .

d o c u m e n t .getElementByld("rocklmg").s t y l e .height = "lOOpx";

6 coo
132 3


^Rock )

, .
.
?
,
.

. (clientWindowHeight - 100) * 0.9 = 1

% . ,
.

(100 ), 90 %
.
.
, 1,

133


resizeRock ()
onload, .

IP
.
.

function resizeRock {

,
1 -0 0


1


.
.

setTimeout () style -
, , , width height.
JavaScript.
,
, -.
, setlnterval ().

body.clientWidth body.
, . clientHeight document.

134 3


Rock !I
iR ock
.
iRock.html (
http://www.headfirstlabs.com/books/hfjs/)

.
iP h o n e!

,
. ... .

-
!

, width height
100 . CSS- IRock JavaScript
? ,

: HTML/CSS iRock onload?

100 Q l .
, , ; ,
.
100 - JavaScript. onload.
(90 %) JavaScript
. ,
, iRocl<, ,
. onload.
.

* 135


? ?

,
.

, iR ock
. ,
o n l o a d .
.
;

136 3


05|2

, ,
. 1.

1,
}81 12 <<1>.
 ,

_

^ ?

(^ l o a d ^ onresize onclick

onresize o n c lic k , o n lo a d .

onresize
, ;
.
, resizeRock ()
onresize: .
^
V .
<body onload="resizeRock ; g r e e t U s e r ();" onresize="resizeRock();">
.

^1 ()
, \
1()
.

. .

1
.

81


.

138 3


1-

,
5
|^ 1

!.

.

.
81!

J a v a S c rip t

-

.

(^ ^

^
^ . |
( ?
81!

,
1
. 1
,
.

* 139


) ?
1 ...
, ,
, ,
15 ?
.

?

.
?

!

It is good to meet you, Paul.
!

~ ~

... -
.
What 15 ? -
^

1
, ...

140 3


)
1
, ,
.

,

. )
- ---
U R L.

'fock.htm/

H T M L , CSS,
J a v a S c rip t .

- ......... ........

onload!
JavaScript
.
o n lo a d
J a v a S c rip t

.

, Ja vaScrlpt
, ,
.

1,
?

* 141


)
, 1,
. , . ,
. , Jav aS crip t

.

.

,
.
Jav aS crip t,
, ,
. .
iR ock.

^ ^ ___

,!.! ? /.I * >

-


-

,

.

.
^ > & ^.

142 3


."EesBa !


1

J a v a S c r ip t. . iPaul

581

, ,

,
.
,
!
, mituii Rocfc
.

uM ^
-
 :

: :
,

J a v a S c rip t. .
Jav aS crip t,
.
, , , Jav aS crip t
.

, .
,

.
,
... ? , ,
.
.
?

... ?
,
...
. ,
.

, ,
,
.
,
.

,
-
.

, , .

144 3


: :
.
... !
. ,
,
. ,
. ...
,
. .

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

- ,
;
? .

,
?

.
, ... .
,
, . .
.

, .
. ,

.
, ,
,
.

, ?

145


, ,
.
,
,
.

, . ,
,
, 1?

,
.
,
, .
.

81 !

146 3


CBoucmBa kyku

,
. ,
, .
( .

. ,

. , u s e rN a m e = P a u l
, 3/9/2009
, Jav aS crip t,
.

.
,
( ).

(;).

.

lang = fr_ca ite m i = F lat panel television

cartlD = 1103
. 11/4/2008 6/25/2010 9/3/2008

,od
'

"- ,
,
, , ...

readCookieO eraseCookieO
writeCookie

147
 JavaScript

,
, .
. (
://).(1/5.///]$/)
.
,
.
f f /
_^ -
.
f e ju d e
function writeCookie(name, value, days) {
// no , -
^ .
var expires =

// ,
if (days) {
v a r d a t e = new D a t e O ; * cn
d a t e . s e tT im e ( d a te .g e tT im e O + ( d a y s * 24 60 60 1000));
'^. -
expires = expires=" + date.toG M TStringO ;
}

// ,
path= /";
d o c u m e n t . c o o k i e = n a me + " = " + v a l u e + expires +
.
}

f u n c t io n readCookie(name) {
/ /
v a r s e a r c h N a m e = n a me +
v a r cookies = docum ent. c o o k ie . s p l i t ( ' ; ' ) ;
f o r ( v a r i= 0 ; < c o o k i e s . l e n g t h ; ++) {
var = cookies[];
w h i l e ( c . c h a r A t ( O ) == ' ' )
= . s u b s t r i n g (1, . l e n g t h ) ; .
i f ( c . i n d e x O f ( s e a r c h N a m e ) == 0)
r e tu r n c . s u b s t r i n g (searchN am e.length, c.length)

}
return null;
}

fu n c tio n eraseCookie(nam e) { var x;

/ / yt

w riteCookie(nam e. - 1) doXOI
}
]
eunctio doYO
.js
,


cookie.js JavaScript.

cookie.js

148 3
.


JavaScript -
Jav aS crip t
, .
, cookie.j s iRock.html.
<script>: & </scn pt> .

<script type="text/javascript" src="cookie. js"X/script>

JavaScript
a m p u S y m a t y p e ^
text/ja va scrip t.

, JavaScript
I'Rock h tm l <script>.
T y ^ e d u m e c t, -
cookie.js -,
.

<htinl> ~ ------- - ....

<head> * " ~ ------ --------------------- ....___ __

itle > o c k - , R o c k < / u t l. >

;< s c r ip t t e = " S 7 ja v ^ 3 c r ip t : . - - s r c = " ^ .............................

; .............................................................. ^ ^ ie o s - - X /s c r ip t> -

.........................

f u n c t io n r e s i z e R o c k i -
d o c u m e n t. g e tE le m e n f RvTw /-
(d o c u m e n t.b o d y c l i L f H . h e ig h t =
J - l e n t H e i g h t - 100) * 0 .9 ;
.
function greetUser I

,
?

149
 ?

2212 .

u se rN am e = Paul
3/9/2009
1,

,
.
, .

J a v a S c r^ p t.

.

userName =

...
? !

(
Hello, I am your p e t rock.

sir"

150 3


| HJ>o -

,
00 ,
g re e tU s e rO . -
^ ,
.
.

.
function greetUser
userName = readCookie ("irock_username" ) ;^ .
if (userName) ^
alert("Hello " + userName + ", I missed you.");
else
a l e r t ('Hello, I am your pet rock.');

<^ 1
^ ^
u se rN a m e
. " S ' ' " " f ' -

1 .

Memog greetUserl) kyku

greetUser {) ,
.
. , ,
, ,
, , .

,
.

151
-

1 ,
. 1 () ,
.
,
.

,
.

,
.

function touchRockO {
^ if (userName) { ^
alertC'I like the attention, " + userName + ". Thank you.");
}
else {
userName = prompt("What is your name?", "Enter your name here.");
if (userName) {
, alert ("It is good to meet you, " + userName + ".");

writeCookie("irock_username", userName, 5 * 365);
.
} K~ ^
}
document.getfelementByldV"rocklmg") .src\ = "rock_happy.png";
setTimeout ("nocument.getElementByld ('roNcklmg') .src = 'rock, png
5 * 60 * /OOO)
}

,

. .

. ,
^ .

.

/ .
< im g id = " r o c k Im g " s rc = " ro c k .p n g " o n c lic k = " t o u c h R o c k ( ) ; " />

152 3


onclick!
to u c h R o c k () ,
g r e e t U s e r ( ) ,
, . ,
.

&
iR o ck ?
'

What is your name?

Paul

userName = "Paul"

iR o ck

. It is good to meet you, Paul.

> 153


,
^
,
,
!
1 .
, ,
.
, , ,
...
.
. ,
, ,
. .

,

.

**

, ,
,


, -.
.

-
.

;
... !

154 3


"^
!
J'
? ? ?

! . Q * . , 0 . ,
, . , .
, Internet Explorer,
. , Firefox Opera. ,

, .
. ? , , .
( )
, . ,
Q * , -,
.

,
( 4 )
, ,
.
? . .
. ,
,
0
. ! ?
,
. , , 0 .
. ,
,
. , .

, ,
. .
,
, ,
. .

, ,
. .

,
. ,

,
.
.

* 155


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

+ !

, .
cookieEnabled navigator,
Jav aS crip t .

navigator.cookieEnabled

J

. tru e false

,

>.

156 3


greetUser {) touchRock {).
touchRock () ,
.

function greetUser {

userName - readCookie{"irock_username");
if (userName)
alert ("Hello " + userName -i- ", I missed you ")
else
alert ('Hello, I am your pet rock.');
)

function touchRockO {
if (userName) {
^ alert ("I like the attention, " + userName + ". Thank you.");

else {

alert ("It IS good to meet you, " + userName + ".");

writeCookie ("irock_username", userName, 5 * '')"-"

else

d o c u m e n t . g e t E l e m e n t B y l d ( " r o c k l m g " ) . s r c = " r o c k h a p p y .p n g " -

s e t T i m e o u t ( - 'd o c u m e n t . g e t E l e m e n t B y l d ( 'r o c k l m g ') . s r c = ' r o c k , p n g ' ;

> 157


_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
^ ,
greetUser () touchRock (),
, ,
.

iRock.

function greetUser {

if (navigator.cookieEnableo
userName = readCookie("irock_username");
if (userName)
alert("Hello " + userName + ", I missed you.");
else
alert('Hello, I am your pet rock.');
}

function touchRockO {
if (userName) {
alert("I like the attention, " + userName + ". Thank you ")
}
else {
userName = prompt("What is your name?", "Enter your name here.");
if (userName) { r-,,
1 4- /4- , -
alert( It is good to meet you, " + userName + "."); , -
... --------- -----uAume uMi
if (n a vig a to r.co o kieE n a b lec^:;--''''''^ /
writeCookie("irock_username", userName, 5 * 365);
else

alertC 'Sorry. Cookies a ren t sup p o rted /en a b led in uour brow ser I w ont
f'em-ember -y o u -in te r. ............................................... .................. . ............................. .
} \ /\a u m e ,
J -
d o c u m e n t . g e t E l e m e n t B y l d l - r o c k l m g " ) .src - ~
setTimeout("document.getElementByld('rocklmg').src = 'r o c k . p n g ,
5 * 60 * 1000);
}

,
.

158 3


Q ;
. , , ,
. , , ,
navigator.cookieEnabled.

... ,

, .

.

0 iRock - The Virtual Pet Rock

Cookies aren't supported/enabied tn your browser, which

means I won't remember you later. I'm sorry.

" f

...
,1,
-

* 159
 Rock 2.0

iRock !
,


1 . 1
,
! CSS
Rock


.

R o c k .

- Ths Vimalfet

, !

.

iRock -


.
u serName = "Paul

160 3


7 ';1
JavaScript
,
?
. ^
-- -|>, ! ------------------------- -

181,
81
. ,

11!
 ]=1

% ^

...

. ,
...
. 1
.
- , ,
? , ,
? !


, !

? , .

,

.
:
?

164 4


. !
,
. ,
.
...

:

? , ,
.
.

165


, -
Jav aS crip t
, ,
. o Jav aS crip t
- .

11 (

-;

, :

,
.

!
Brie
if (chosenContestant == "Eric")

alert("Eric, come on down!");

1 / .
I /
. I / .

.

if \ _____ Eric, come on down!

166 4


if
1
. ,
iR ock,
: ~~ triAe false.

if

i f . - ,
,
. .

, ,

f.
:

, .

, .

i f (hungry) numDonuts *= 12;

i f (countDown == 0) userName = r e a d C o o k i e ( " i r o c l i _ u s e r n a m e " ) ;

i f (donutString.indexOf("dozen") != -1) a w a r d P r i z e () ;

i f ( t e s t S c o r e > 90) g oE a t ( ) ;

i f (Iguilty) a l e r t ( " H o u s t o n , we ha ve l i f t - o f f . " ) ;

i f (winner) a le r t( " S h e 's innocent!");

i f ( n a v i g a t o r . cookieEnabled) g r a d e = "A";

> 167


tr u e ,
" d o z e n " ( ).

i f (hungry) numDonuts *= 12;

i f (countDown == 0) userName = r e a d C o o k i e ( " i r o c k _ u s e r n a m e " ) ,

i f ( d o n u t S t r i n g . i n d e x O f ( "dozen' ' ) != - 1 ) - a w a r d P r i z e ();

i f ( t e s t S c o r e > 90) g o E a t ();

if (Iguilty) a l e r t ( " H o u s t o n , we ha ve l i f t - o f f . " ) ;

''i f (winner ) a l e r t ("She's in n o c e n t!" );

if ( n a v i g a t o r . cookieEnabled) g r a d e = "A";

tr u e ,
Ig u ilty . H E g u ilt y , -
g u ilt y .
false.

,
?

... .
, ,
. ,
,
... ,
, ,
:
. 1 f
,
.

168 4


1

. .
,
.

...

if ( )\

.
-;

e ls e
- ; <

. (
)
. JavaS cript:

if (chosenCase = "")

openCaseC'A") ;

^
>

* 169


} V )
1
1 / 1 ,
.
: ,
, .

if (chosenCase == "")

openCase(""); ^
. ^
else
^

openCase ("") ;

, c h o s e n C a s e
. ,
, e l s e . ,
, ,
.

8.

170 4


else
i f / e l s e
i f .
e l s e ,
:

! -I-

else
----------------------------- 1 \-------- 1

i f :

e l s e .

, .

1 S ,
? .

0 ; !
, i f . i f e l s e ?
i f { ) ,
, ; . i f / 1 s
. . ,
i f , , , e l s e . i f / e l s e
. , .
JavaScript
, , s w i t c h / c a s e ,
1 ? .

171


.
, aJav a S c rip t,
.

Sttck f S

V J e lc o r A G - t o

STICK FIGURE
adventu re
, JavaScnpt
Click e'rtber ^ -
buttoM to I .
S b r i-

Pleasc choose; A J - i J

^^

,
.

,
.

http://w w w. headfirstlabs. com/books/hfjs/ .

172 4


2 5
-
, ,
. .
2
.



.

^ 1

3
.

-
.
.

i f /
e ls e . : d e c i s i o n
, c u r S c e n e ,
.

173


_
i f / e l s e

.
ie c is _____

. f ^*^*^ \
1 " ^ ^ ^ , ^
01 J. UA . _
/ 1^ , f (d e c is io n == 1 )

C M rS cm e - Z } <

else

-^ c u rS c e n e = 3 ;

Z .

^ 3.

.

,
. ,
, .

2
d e c is io n
1
1 2.
curScene
,
,
. . >^01

d e c is io n :
1, 2 . .

d e c i s i o n c u rS c e n e ,
, ,
.
. i f / e l s e .

174 4


1 / 1

, , , .
.

, . 1
2

, .

-
1

0 .
>^

, iiio to e ~
, ^ /
c o l Of ,,

la ia n i ^t
I . ^/]1 1 I,

. .

-

document.getElementByldC'sceneimg").src = "scene" + curScene + ".png

i f /
else
,
. ,

. ?

175


, i f / e l s e
. -
, : ^^^ ^^ ^

document.getElementByldC'sceneimg").src = "scene" + curScene + ".png";

alert(message);

.
!
,
Jav aS crip t
. . .
({ } ).

d o T h i s ();

d o T h a t ();
doSomethingElse ();

> {

doThisO;


doThat(); 1
doSomethingEise();
.
_____

i f / e l s e ,
:

if (chosenDoor == "") {
prize = "donuts";
alert{" !");
}
else { if/else.
prize = "pet rock"; '
alert(" !");
}

176 4


!

3 *
? ?
?
0 ; 11 0 ;
; . , .
c u r S c e n e , ,
.
. .
,
, , 3 *
. , ?
1 2 .
d e c i s i o n . . ,
! . ,

c u r S c e n e
.
. .

, ,
.
.


,

i f / e l s e ,
.

'.
if (decisioiA 1) (

curScene = 2:

- ...............message = 'You have arrived a t a cute little house in th e w oods
...................................................................................................................................... .
. -----^ }

.<'? ~ .

bridge overlooking ^eaceful_

strea m .; tv



. 8 3
.
} -
.

<1 ------------------------------------------------

i f JavaScript
. JavaScript .
i f
t r u e f a l s e . ( { } ) .
i f / e l s e
i f i f / e l s e .
JavaScript.

178 4


i f / e l s e
!

0 f
, ' ,

X

Pleasechoosc:
Z-
YOU have ' *"

Pltecl: _ lj j J -

Y our jou rn e y b e g in s

wmmmniHiaH
3.


.
3.

jJ - iJ
You are s ta n d in e o n th e brid g e overlo o k m g a peaceful
Stream .

* 179


.
.
, . 2

.

1
.

1

^ .

. -

.

6
.

, ;
, ,
1. ,
. , ,
http://xvw w .headfirstlabs.com /books/hfjs/.

180 4


8
4

^ ...

5
.
^ .

^

. 6 .

-
^ .

^ . 9
7

? ...

, if / e ls e ?

> 181
 ... ...

noMoui^u if/else
If (cu rSce n e is 2)

If (d e cision is 1)
, ,
4
. , 5
: E lse

2
1

I
I

1 2

If (cu rSce n e is 4)
If (d ecision is 1)
8

E lse
if/else
? 5

, ,
. .
i f / e l s e ,
,
.
i f , .

.
: ?
, . ,
,
, : .
( ?)
( ?).

182 4


) ^f
Jav aS crip t if (order == "cheeseburger") {

. if if (wantFries)
order += " fries";
,
,
,
else if (order == "salad") {
. if (wantFruit)
true. order += " fruit";
. }
/
Ynpou^eHHi^iu order
" order -r ... 8t>!


\\\\ 1
.

1 ,


1,

if (curScene == ) I

curScene = 1;
, -
^ , message = "Your joum&y begins a t a fork /n the road-;

^else if (curScene - - 1) {

if (decision == i ) {

. curScene = Z;
if/else
- message = "You have arrived a t a cute, little house in the woods.":
t .

else.f ^

curScene = 3;

>mesSAge ~ "You are sta n d in ^o n the bridge overlooking a peaceful stream.";

} \

O m xm ym t
,
,
.

.

184 4


^

(1 2).
( ) ,
.

function changeScene(option) {

}
</script>
</head>
<body>

<div style="margin-top:100px; text-align:center"> \ x

p " a ,; - p n ,- A C v X tu re .. / > < >

<input type="buttOn" id="decision1 " ^
<input type="button" id="decision2" v alue="?" (1]
</div> ^ d i c k - " c h a n g e S c e n e (^
</body>
</html>

c h a n g e S c e n e ()
(1 2) . -
. , ,
c h a n g e S c e n e () :
.

c u r S c e n e .

m e s s a g e .

c u r S c e n e .

185
 ?

, Jav aS crip t c h a n g e S c e n e ( ) ,
. -
. ,
, .
.

If (c u rSc e n e is 0) <

1
if/else

1
.

V ---- -------------- 3! E ls e (c u rSc e n e I s 1)

- > If (d ecision is 1)

2
if/else
2

.
E lse
2

3

3

E lse If (c u rSc e n e Is 2)

^
|=:1

5 =
JavaScript. ?
5=
one

i f ?
;
JavaScript .
,

0 !: . ,
,
. .
, 1 ,
!. .

186 4


JavaScript
c h a n g e S c e n e ( ) . ,
, 180. ,

.

> 187


^
c h a n g e S c e n e { ) , ,
180.

188 4


}1

,
.
:

W e lc o n e t o

ADVENTUI^E
Click either
b u tto N f o
start...

> 189


, .
,
. -
.
- 0.

-
?
WelcOHG t o

STICK FIGURE
A D V E M T i i Pc

CZ5HZ3

choose:

, 0.
5 6 , .
,
, .
c h a n g e S c e n e () ,
0:
else if (curScene == 5
curScene = 0; s <
}
else if (curScene == cu rS cen e,
curScene = 0;
m essage.

,
,
c h a n g e S c e n e ( ) ,
.

document.getElementByldC'sceneimg").src = "scene" + curScene + ". png"

alert(message);

,
m essage.

190 4


! = m-c-c c, ...
,
, , , ,
0. ,
m e s s a g e - ?

( .3

,

message

.

,
m e s s a g e (" ")
. ,
m e s s a g e .
,
.
,
6. (==)
, (! =) .

if {curScene != 6)
a l e r t ("Thankfully, you haven't been eaten by the troll.");

^ 191


' ,
, m e s s a g e .

, &&
m essage if (m essage !- "")
.
alert(m essa g e)i

,
tr u e ,
. , .
.
.

X == X =
X <
tr u e ,
X . tr u e , tr u e ,
. , .

UAU

X < = X >=

false,
tr u e , tr u e , tr u e ,
. .
5 0 .

= ==
.
Jav aS crip t ,

, !
.
( t r u e / f a l s e ) , ==
=.
i f / e l s e . .

192 4


!
, ,
? n u l l , " " , t r u e . ,
t r u e . ,
Q l .
. t r u e , n u l l , " " t r u e ,
f a l s e , . f a l s e .

, n u l l ?
. ?

; n u l l ,
! , .
JavaScript . , 9 10.
,

I love stick Figure Adventure!

, , d , ?

v a r q u o te -
a
if (a != 1 0 )
q u o t e += "Som e g u y " ; b
e ls e
q u o te += " I " ;
i f (b = = (a * 3)) {
i f (c < (b / 6 ) ) d
q u o te += " d o n 't c a re f o r " ;
e l s e i f (c > = (b / 5 ) )
q u o t e += " c a n ' t r e m e m b e r " ;
e ls e
q u o t e += " l o v e " ;
}
e ls e {
q u o t e += " r e a l l y h a te s";
}
if.(!d ) {
q u o t e += " S t i c k F i g u r e " ;
}
e ls e {
q u o t e += " R o c k , P aper, S c isso rs ;
}

a l e r t (q u o te + " A d v e n tu re !" );

193


, , d,
rto 2 ^ 1 6 H V l2 I love stick Figure Adventure!

var quote

if (a != 10)
q u o te += "Some g u y ";
e ls e
quote += "I";
if (b == (a * 3)) {
if (c < (b / 6) )
quote += " don't care
else if (c >= (b / 5)) d
q u o t e += " c a n ' t r e m e m b e r false,
e ls e 5 !d
quote += " love";<i tru e.
}
,
else {
.
quote += "
}
if (!d) {
quote += "
} I love Stick Figure Adventure!
else {
quote += "
}

a le rt(q u o te + " A d v en tu re!

, , . , 8 9
.
, . Jav aS cip t
.

.


. - ^ J a v a S c rip t
.

194 4


/ /
/ / , .

, . 8

else if (curScene == 8) {
11 9

}
- else if (curScene == 9) {

11 -..
}

.
, . ,
, ,
. ,

, ,
.
>&.
// ()
var curScene = 0 ;

c u r S c e n e
.
m e s s a g e .

//
var message = .

,
.

Ha
/ * 8

} -
*/.
________ ;
/ / ,
.
/ *, * / .

/*
. , .

/ * * / . , . */

195
 ?

, ,
curScene message
.
?

cu rS cen e

c k a n g e S c em Q .

<script type="text/javascript">
( )
- ^ / /
var curScene = 0;

function changeScene(decision) {
/ /
var message =

</script>

m essage

changeSceneQ .

, Jav aS crip t
.
. c u r S c e n e
c h a n g e S c e n e ( ) , m e s s a g e .
, ;
, .

196 4


Jav aS crip t
. ,
,
. ,
:
,
v a r ; .

f u n c t i o n d o S o m e th in g (2 ) {
var ;

,
}

.

,

, , . ,
, .
, d o S o m e th in g () .

. .

d o S o m e th in g {) ?

.
, , .

.
.
, , .

197


, ,
.
, .

m essage <script type="text/javascript">
// cueHv
changeSceneQ , var curScene = n _ (|_
.
function ChangeScene(decision) {
//
var message =

if (curScene == 0) {
curScene = 1 ;
cu rS cen e
, ^ - n e y begins at a fork in the road.

\ ^ e l s e if (curScene == 1) {
changeScene()., if (decision == 1) {
, curScene = 2
.
, - -Y O U ^ l i t t l e . . , . . ;

else {
curScene = 3 ;

, on t h e b t i d , , . . . . . ,

else if (curScene == 2) {

</script>

,
changeScene ( ) . message,

, . curScene
i f / e l s e ,
.
, message
, curScene
.

198 4


) ?

,
, . ,
,
. .


^^ < s c p t t y p e = " te x t/jQ V a S C r lp t" > '
^ . ^ ^ - ^ ^ '

function {

if ( == 0) {

1 if ( == 1) { |
'
, ''s }

, .
, ,
, </
.

-

".

:
?

0 ; , .
. ,
, .

> 199


: ;
,
. ,
,
. ,
.
.

,
.
.
, ,

?
,
,
. , .
, ,
,
.
. . ,
,

.

,
, .
, ,

, .

, -

.
,
.

200 4


!
, ,
JavaScript? ? ,
?

; ! !
811, , JavaScipt. !
, , ,
. . , , ,
11 .
,
, .
. .

JavaScript ,
? ? ,
.
; , ?
0 ; .
, < s c r i p t > .
. ; . ,
, ,
/ / , ,
. / / .
, . .
. ,

. ,

,
.
,
.

, , ,
. .

,
. .

,
( / / ) . .

/ *
* / .

> 201


? ,
-
; ?

.

... ,

.

!
?

202 4


if/else?

! i f / e l s e
,
, ,
.

if ( c h o s e n C a s e = = " ")

o p en C ase(" ");

e ls e if ( c h o s e n C a s e = = " ")

o p en C ase(" " );

e ls e if ( c h o s e n C a s e = = "C ")

o p e n C a se ("C ");

e ls e if (c h o se n C a se = "D ")

, ., o p e n C a se ("D ");

, e ls e if (c h o se n C a se = "E ")
,
- o p e n C a se ("E ");

)
i f / e l s e ...
,
. ,
,
.
,
.

203
,

if/e ls e ?

204 4


switch/case switch / case

,
, Jav aS crip t
. s w i t c h / c a s e ,
:

.


, s w i t c h (c h o se n C a se ) {

,
,

sw itch /ca se.

, ) ,,
,
case.

^ case openC ase(" ");

b re a k ; ^
. _

S h
,
s w itc h /
case.

sw itc h /c a se

.

? s w i t c h / c a s e
:2 , i f / e l s e .

> 205


^. ? s w i t c h / c a s e ,
i f / e l s e .

i f / e l s e
,
s w i t c h / c a s e
.

switch
, s w i t c h / c a s e ,
.

switch
J - Q -
1


,

,

case,
3 - ' ^
.

-
.
break ,

,
.

default
break



"d e fa u lt ^ ,
.


.
break

206 4


Switch
s w i t c h / c a s e , i f / e l s e ,

. :

({ ).

c a s e , ( : ).

,
. .
.

Q b r e a k ( ; ).

^ d e f 1 1
, .

( } ) .

_ 1
_^
|=;

s w i t c h / c a s e
?
t r u e / f a l s e ?
Q ; .
Q ; , i f ,
i f / e l s e , s w i t c h / c a s e .
.
.
b r e a k ?

Q ; b r e a k
Break
s w i t c h /

c a s e .
) 1
.
,
! ,
.
c a s e
b r e a k .
. s w i t c h / c a s e .

> 207
 switch

Head First: , Head First: Case?

. ,
. Switch: Case
,
Switch: . ,
Head First: , . .
.
Switch:
:. Head First; Case
, ,
. - , . ,
. ?

Head First: , I f Switch:

, , .
. D efault .
.
Switch: .
, Head First: . D efau lt
Case?
.
. . Switch: . ,
If, . Case
. ,
Head First: . D efau lt ,
? . ,
, C ase
Switch: D efault, ,
. ,
, . .

. Head First: . ,
. . -
?
Head First: ,
B reak. , ? Switch: . ,
.
Switch: , B reak .
. ,
, . ,
, ; , ,
. .

208 4


,
i f / e l s e s w i t c h / c a s e .

if ( c u r S c e n e == 0) (
,
1= = . . " rt ^
^
Lise i f (cutscene == 1) I if/else.
if ( d e c i s i o n i) i
. /'4 h av e a r r i v e d a t a c u t e U t t i e h o u s e i n t b e wood . ,

^ 'i s b r / 4 ; u a r e s t a n d i n g on t b e b r i . . e o v e r i o o K i n . a p e a c e f u l
s t r e a m . ";

> 209


i f / e l s e s w i t c h / c a s e .

if ( c u r S c e n e == 0) {

m e s s a g r = ^ 4 o u r jou rney b eg in s a t a fo rk in th e ro a d ." ; .
e l s e i f ( c u r S c e n e == 1) {
i f ( d e c i s i o n == 1) {
m e s s a g r / 4 o u h ave a r r i v e d a t a c u t e l i t t l e h o u s e i n t h e w o o d s ." ;
}
e lse {
m e s s a g r = ^ " ? o u a r e s t a n d i n g on t h e b r i d g e o v e r l o o k i n g a p e a c e f u l
s t r e a m . ";
}
1

,
.

swiicn {CUrScene) I

case case :
'
curScene = 1 ;-
.
fce^fns at a fork in the road.;

break;

case case i :
-
if/else if (decision == i) {

curScene = Z
. .............................
message ~ "You have arrived a t a cute little house in the woods.',

.L .
else {

curScene - 3;

message = You are standing on the bridge overlooking a peaceful stream ,;
.

s w itc h /c a se
}.

210 4


-
,
, . ,
...

VJelcONVe t o

ST IC K FIGURE

Click e'rtber
buttoN to
Stari-
Please

.
.

, !
s w i t c h / c a s e
, . ,
...
!

* 211
 ?

)...
.
-
,
Jav aS crip t. ?
?

212 4


,

if/e lse ...
.
_ , Jiyiffle

f,OMV^O
(Svv^t^p) I

if / else
, .
,
.
, .
 U -K JT b i

, .
, , , .
, , Reply
! ,
. JavaScript .
, .
.
.
 ""

. , 3 7 .
JavaS cript.

,
.

37
.

; !

( )
(37). 37
37 .

4,7
3 7 ~
1
. - ,
3 7 37 .

, Jav aS crip t .

216 5


U )... for for

Jav aS crip t .
, f o r
.
.
:
.




f o r .

,

.

,

.

'
V -----

.

.

f o r
?

> 217
 for:

for
f o r ,
.
:

X
,
for (var X = 0; X < 37; -1-+)
U X = X +- .
takeStep();

f o r : ,

1 .

X 0.

, , 37. , 3
. , .

.
ta k e S te p ().

1 .

37 37, .
Jav aS crip t ;
.

Q
,
0.
^
var X = , X

37.
ta k e S te p {).
X < 37 37
ta k e S te p

^
^,
1.
++ X
X = X + 1.

218 5


for
f o r
. ,
f o r .

1.


for. . .

A c tio n f /
-,
-
tr u e ,
fake.
)

,
.
1?(^
.
'

.

. --------------------------------------
, ,
f o r ,
(4, 3, 2, 1, Roll film!).
, 0.

^^ .
-^ ^

var count = prompt("Enter number greater than 0:", "10");

219


,
, f o r ,
(4, 3, 2, 1, Roll film!).



count.
'
.
_

. c o u n t = p r o m p t( " E n te r number greater than :",
!^ .................................................
count if (count > o) {
............. ............... ..................................................................................................
,

w r (var X = count; x > ; - - )
..................................
a le r t(" S ta r tin g in..." + x

alertC'Roll F ilm !"^ 1 .
()
'
}


co u n t. else
count.
alertC 'The n u m b e r wasnt greater th a n o . No m o vie fo r you!");

. ......................3
^ ..................................................................
!
The number wasnt greater than 0. No movie for you! RoUfilml

,
. , , ,
.
M an d an g o ,
.

,
. ;
, .

220 5


hhicwKO.
!
.

. .
J

!
, ,
,
,
. .

51
_^
, ,
V f o r .

> 221


, f o r
.

,
tru e.

- .

false tr u e false tr u e tr u e tr u e false tr u e false

.
. !
.

, HTML U M andanqo

M a n d a n g o .
, H TM L?

<img id = "se a tl" s r c = ' s e a t_ u n a v a i l . p n g " a l t - " U n a v a i l a b l e

<img id = "seat2" s r c = ' 'se at_ a v a i l . p n g " a l t = " A v a i l a b l e " />
HTM L <img id= "seat3" s r c = ' 'se at_ u n a v a i l . p n g " a l t = " U n a v a i l a b l e " />
<img id = "se at4 " sr c = ' 'se at_ 'avail.png" a l t = " A v a i l a b l e " />

<img id = "seat5" s r c = 'se at_ "avail.png" a l t = " A v a i l a b l e " />

<img id = "se at6 " s r c = 'seat_ "avail.png" a l t = " A v a i l a b l e " />
<img id = "seat7" s r c = ' s e a t ^ unavail.png" a l t = " U n a v a i l a b l e " />
s r c = ' s e a t a v a i l . p n g " a l t = " A v a i l a b l e " />
<img id = "se at8 "

<img id = "se at9 " s r c = " s e a t "unavail.png" a l t = " U n a v a i l a b l e " />

h ttp ://w w w .
headfirstlabs.
/b o o k s /
hfjs/.
,
JavaS cript.

222 5


,
,
JavaS cript.
.

var seatl = false;

0

var seat2 = true;
boolean.
var seats = false;

var seat4 = true;

_True ,
var seats = true; ^ .
var seat6 = true; ,

var seat? = false;
False ,

var seats = false;
. ?
var seat9 = false;

f o r ,

.

for (var = 0; < 10; ++) {

if (seatl)


!
}

, . f o r
s e a t .
, .

U T V P M

,
?

* 223


Jav aS crip t
, . ,
, ,
. ,
.

:
, ; .
, .
:

.
.

JavaS cript.
.

_
var showTime = new Array(); A rra y .

^ .

,
. .


.
9 10.

224 5


, .
.
.

arra y.

sh o w T im e,

. ,
.
.

var ShowTime = [ "12:30", "2:45", "5:00" "7:15", "9:30" ];

, V - -
? - ^
, .

.
, . ?
,
.

. , ,
!

alert("The late movie starts at " + showTime[4] +

The late movie starts at 9:30.

.
225


(
:

Head First: , . , :
. ,
.
: . 50
. ,
300 , .
,
Head First: . .
.
Head First: .
: . ?
. ,
:
.
.

.
.
Head First: ?
Head First: ,
. ? : ,
?
: , .
,
.
.
?
Head First:
Head First: ?
?
: ,
: .
- .
, Head First: !
? ,
: .
.
,
Head First: , . ,
, .
?
Head First: . ,
: .
, . .

: . !
.
.

Head First: .
?

226 5


s e a t s M a n d a n g o ,
,
.

_


J y * .
fo r? f or ? ,

Q ; ? Q ; ! , , , .
, ,
, , .
. ?
,
false, 0 ; .
, ? . ,
.
Q l . for ,
, , ,
, , ,
true.
. ,


f a l s e .

.
, .
f o r . ,
, 3 *
, ?
.
Q ; , .
0.
,
,

> 227


, s e a t s M a n d a n g o ,

.

^
, .
.
. I .


\
,
len g th v a r sea ts - [ false, tr u e , false, tr u e , tr u e ,T r u e , false, tr u e , ft
,
- ^ ^ fo r (v a r I = O; < seats.length; ;V+) {
. .............. k :
if (seats[ij)
-
a lertC 'S ea t + + is available.");

else

a lertC 'S ea t " + + " is n o t available.");
.

, Seat 1 is twaiSable.
(tru e ) Seat is not avaitable.
(raise),

.

for JavaScript ,
. .

(++) ( )
. .

. .

228 5


JavaScript HTML

.
H T M L ( http://www.headfirstbbs.com /books/hJjs/),
- M an d an g o .

var seats = [ false, true, false, true, true, true, false, true, false ]

71

Mandartgo ~ Thg Movie Ttcfeei Finder ______

, , ,
- .

! -?

229
 ... !

Jav aS crip t , ,
,
, 1 I
. .

,,
. 0

1001
\llOiOl

101
5_.
51_811.
!
8_8.

- :

< id"seat8" "_1." alt="Unavailae" />

IV



, - < 1 >

, .
. :

1 0.

, 1 9. ,
3, .

, .

^ 1 1 2.
\

230 5


IJoAj^ogHo

in it^ e a ts ()
M a n d a n g o
i n i t S e a t s O ,
Jav aS crip t .

,
4UU
,,

. .


function initSeats O' { ^
/ / - X 1 .
for (var i = 0; i < s eats.length; i++) {
if (seats[i]) {
//
documdht.getElementByld("seat" i).src "seat_avail.png";
docujjifent.getElementByld
iocuafent.( ("seat i).alt "Available seat";

els/ {
11
document.getElementByld{"seat" i ) .src "seat_unavail.png " ;
document.getElementByld("seat" i) .alt "Unavailable seat";
}

- ID
, s e a t - se a t
false
tr u e ,
.
.
(
<body onl =" in itS e a ts 0 ;" > id
<div St - " m a r g i n - t o p : 75px; t e x t - , a l i g n
<img s e a tO " s r c = " " a l t = "" /> 'seat&".
<img " s e a t l " src=" " a l t =
<img " s e a t 2 " s r c = " " a l t = "" /> Am
<img ' s e a t 3 " s r c = " " a l t = "" /> at
<img ' s e a t 4 " s r c = " " a l t = .... ped:
<img s e a t s " s r c = " ' " a l t = ....
<img s e a t 6 " s r c = " ' ' a l t = '
<img :
/> ----
' s e a t ? " s r c = " ' ' a l t = ' ...
<img ; s e a t s " s r c = " '' a l t = ' / X b r />
</div>
</body>
</html>

* 231


, , ,
, , M an d an g o .
,
.
, .

, -
, .

-
,
.

, , ,
,
. s e l S e a t .
i n d S e a t ()
.

\
? J

. s e l S e a t
, 8. ,
.
. 1.
s e l S e a t .

selS ea t
- 1 . var selSeat = -1;
^

. '

, ,
i n d S e a t {).
, ,
. , ;
, !

232 5


JavaScript
i n d S e a t ( )
, ,
. ,
.

U a -o , = . . . .

if ( >= 0) {

= - 1;

;
}
//

,0 . . ,

^
//' '

= ;
docu m e n t . q e t E l e m e n t B y l d C 's e a t " + i ) .................... s e a t ^ s e l e c t . g

document.,etEletById|-seat" t i) ........ '

/, . . ,

= ool(-Seat - * ,1 t 11 * - 1= ayailable. Aoceptr',;

Vdi- ............

" " /)' ' ' 1 1 ^ ,

............. = - 1;

, + ) = "se a t a v a il.p n g " ;

d o c u m e n t.g e tE le m e n tB y ld ( s e a t + D ..................

- + it = " " ;
d o c u m e n t.g e tE le m e n tB y ld ( s e a t + i ) ....................

seats[i]
IselSeat
initSeats accept

233


, f i n d S e a t ( ) ,
.

fu n c tio n fin d S e a tO {
/ / ,

if ( *

.
}

// .,
f o r ( v a r ii = 00; ; ii < sseats.xengta;
e a t s . l e n g t h ; i-;
+ + ) {x
/ /
____ 1 ________ _ ^ 1 ,
s e a t s [] 1 ^ ------------- --------------- -- ^
J .
if

selSeat
}
3 I-

i;
5$11]
.

d o c u m e n t.g e tE le m e n tB y ld C 's e a t" + i) = " s e a t _ s e l e c t . p n g " ;

d o c u m e n t.g e tE le m e n tB y ld (" s e a t" + i) . = "Y our s e a t " ;

// ;

accept co n firm ("S eat ( i + 1) + " is a v a ila b le . A cc e p t? ");

!accept~|j {
,, 1 ,

= - 1;
.
document. g e t E l e m e n t B y l d ( " s e a t ' + i) " s e a t_ a v a il.p n g " ;

document.g e t E l e m e n t B y l d ( " s e a t + i) "A v a ila b le se a t";

234 5


M an d a n g o
f o r .
, .

4
,

.

Seat 4 is avaHable. Accept?

JasissiJ

> 235
 ...

, ,
. , ,
, .

4 ,-
'
.

236 5


,
, ,
f o r f i n d S e a t ( ) . co n firm Q
/ ,
tr u e () false
fo r ( v a r i = 0; i < s e a t s . l e n g t h ; i+ + ) { ( ).
11 _^5
if (se a ts [ i ] ) {
/ / (!
s e l S e a t = 1;
d o c u m e n t.g e tE le m e n y fe y ld C se a t" + i ) . s r c = "s e a t_ se le c t.p n g " ;
d o c u m e n t.g e tE le m e r* B y Id ("se a t" + i ) . a l t = "Y our s e a t " ;

/ / ^
v a r a c c e p t = c o n f i r m ( " S e a t " + ( i + 1) + " i s a v a i l a b l e . A c c e p t ? " ) ;
-i-. ( 'a r^ c e p t) { J
I I ,
selSeat = -1;
document.getElementById("seat" + i).src = "seat_avail.png";
document.getElementByld("seat" + i).alt = "Available seat";

,
M 3 o 6 a m e A t>

, .
,
.

C an cel s e l S e a t
-1 ( ), .
, .
, , s e l S e a t
.
.

237


M an d a n g o ,
.
, , f o r
, .
,
i = seats.length + 1; .
...

.

,
.
b r e a k , .

. b r e a k , ,
. ,
.

c o n t i n u e ,
.
, c o n t i n u e
.
,

.
continue;

b r e a k c o n t i n u e

.
b r e a k

M an d an g o .

238 5


^
!

, .
f o r b r e a k ?
? . , ,

; . b r e a k

,
0:^
^ j
,
, .
,
. . b r e a k ,
,
, .
,

f o r f i n d S e a t ( )
, .
.

//
. .

If (se a ts [i]) {

s e l S e a t = 1; , ^ "seat se le c t.p n g " ;
d o c u m e n t.g e tE le m e n tB y ld seat + i -s ^ ;
d o cu m en t. g e tE le m e n tB y ld ( " s e a t + 1)a it

/ / A ccep t?")
v ar accep t = co n firm ("S eat + (1 +

selSeat = - 1 ; .nTri("4eat" + i).src = "seat_avail . p n g " ;

d o c u m e n t.g e tE le m e n tB y ld s e a t _ ^ - A v a il a b le s e a t " ;
d o c u m e n t.g e tE le m e n tB y ld ( s e a t + i ) - a

239


f o r f i n d S e a t { )
, .
.

//
f o r ( v a r i = 0; i < s e a t s . l e n g t h ; i+ + ) {
/ /

if (seats[i]) {
/ /

se lS e a t = 1 ;
document.g e tE le m e n tB y ld { " s e a t" + i ) . s r c = " s e a t _ s e l e c t . p n g ;

document.g e tE le m e n tB y ld ( " s e a t" + i ) . a l t - "Your s e a t " ;

/ /

v a r a c c e p t = c o n f ir m ("S e a t " + (i + D + " is a v a ila b le . A c c e p t?

_(f_(a c c e p t),...............................................................................................................................
/ / , ...........
break; .............................................................................
}......................... ..........................................................................................................................
e lse {
/ / ,

s e lS e a t = -1; .
do c u ment.getElementById("seat " + D - s r c = "seat_avail.png ;
d o c u ment.getElementByld("seat" + i).alt - "Available seat ;

}
}
}

,
.
,

.

... !

240 5


- '
,
if
. ,
!

--------------------------------

^
if- .
for (v a r i = 0; i < s e a t s . lengflh; i++) {
// ,
if ( s e a t s [ ]) (
i f ( s e a t s [ i + 1]) {
i f ( s e a t s [ i + 2]) {
,
/ / 1 ,
selS eat = i ; - ^
document.getElementByldC'seat" + i) .src = "seat_ select.png"; .
document.getElementByld("seat" + i).alt = "Your seat";
document.getElementByld("seat"
document.getElementById("seat"
document.getElementByld("seat"
+
+
+
(i + l)).src =
(i + l)).alt =
(i + 2)).src =
"seat__select .png
"Your seat";
"seat_select.png
J
document.getElementById("seat" + (i + 2)).alt = "Your seat";

//
v a r a c c e p t = c o n f i r m (" S e a t s " + ( i + 1) + " through " + (i + 3) + " a r e a v a i l a b l e . A c c e p t? " ) ;
i f (accept) {
// ,
break;
}
else {
// ,
s e l S e a t = - 1;
document.getElementByld("seat" + i).src = "seat_avail.png";
document.getElementByld("seat" + i).alt = "Available seat";
document.getElementByld("seat" + (i + l)).src = "seat_avail.png";
document.getElementByld("seat" + (i + l)).alt = "Available seat";
document.getElementByld("seat" + (i + 2)).src = "seat_avail.png";
document.getElementByld("seat" + (i + 2)).alt = "Available seat";

}
* : M andango

h ttp ://w w w .k e a d fir s tla h s . -
/ b o o k s/h fjs/. .

* 241


,
if
-
?

242 5


U
M an d an g o
?!
.
?
i f ,
!
, ,.

,
,
, ,
.

1 ?

(&&) ,

true.

if (seats[i] && seats[i + 1] && seats[i + 2 ] ) {

tr u e tr u e tr u e

(&&) ,
.

.
t r u e , ,
, . ... !

* 243


, ==
<
t r u e / f a l s e .
!
, .

OR

II

false,
tru e ,
tr u e , tr u e ,
tru e. tr u e
tru e . .

,
.

if ((largeDrink && largePopcorn)

/
|| coupon)

freeCandyO ;
(free ca ndy)

,
.
,
!
.
,
, . ,


.
,
.
.
244 5


Ti-
J 3 * ,
. ? .

Q ; , ! . .
. ,

, , l a r g e D r i n k &&
t r u e f a l s e . . l a r g e P o p c o r n , | | .

. 3 *
, ?

, , . .
!


,
.
.

.^
f o r M an da ngo ( i = 5).
,
.

for (var i = 0; i < seats.length; i++) {

// ,

if (seats[i] && seats[i + 1] && seatsti + 2 ] ) {

> 245


X
f o r M an da ngo ( i = 5). ,
.

tr u e false tr u e

= S'
/ +2 = 7

for (var i = 0; i < seats.length; i++) {

// ,

if (seatsli] && seats[i + 11 && seats[i + 2 ] ) {

f.'T ?.... && && false

M an d a n g o
, 1
, . .

....... MachoMow ......

I
Seats 4 through 6 are avaitable. Accept

[andseaVii
('"C^cel j f OK

246 5
J


U
M a n d a n g o ,
. ?

37 .

,
.

^
37 -

fo r -
___

!
!
....

f o r .
. f o r ,
.

...

?

?

247
 ? ...

while 1
f o r
, . ,
f o r , w h i l e ,
.
(

).

w h i l e :
true.

,
.

1 U




.
,

.
\
. ... ... .

.
w h i l e
, f o r :



, while (!rockVisible)

takeStep ;
.

?

w h i l e :

^ ^ , . ,
t a k e S t e p ( ) . 2, , .

.
takeStep t a k e S t e p ( ) .

248 5


while
, f o r , w h i l e
:
,

tr u e false.

i
| I
while .
!
while

,

,
^ .
.
-

,

(4, 3, 2, 1, Roll film!).
f o r w h i l e .

var count = prompt{"Enter a number greater than 0:", "10");

if (count > 0) {

else

alert{"The number wasn't greater than 0. No movie for you!");

* 249


f o r w h i l e
,
^ (4, 3,
2,1, Rollfilm!).

count. .

var count = prompt("Enter a number greater than 0:", "10");

,
if (count > 0) {
- ___ .
count
. v a r X = count;
................
I while (x > O) {
................................................................................................................................................
a le r t( " S ta r tin g in..." + x);
........................................................................................................................................ X

1
while. .

alert("The number wasn't greater than 0. No movie for you!");

.
!
The number wasn't greater than 0. Ho movie for you! Roil film!

C__0 k'" )

b r e a k , w h i l e ,
. .

w h i l e
. .

250 5


,
while

f o r ,
w h i l e . , f o r 1 1//1
w h i l e :
.
.

while

1 ^



.


, , .
.
.
, ?
var i = 0;
/ while (i < 10) (
\ alert(i);
for (var i = 0; i < ; i++)
i++;
alert (i);
}
Kopomcf .
- ^

. ___________
while (!finished)
for (; !finished; )
dolt ;
dolt ;

\
f o r n w h i l e
. ,
.

* 251
 fo r while

For While .

For: While;
, ,
. . ,
,
, .
,
.
,

. , , ,
.
,
.
,
!, .

,
, .
.


, ,
, .
.
, .
,


?
, ,
.

,

, .
,
. .

252 5


For: While;
, ,
.
,
.

, . ,
. ,
.
! ,
.

!
, ... , ,
. .

. !

'^
1 1 | 1

3 * w h i l e ; ... . ,
. - ? , ?

S . t r u e . w h i l e ^ ; .
. , ,
, , , , t r u e .
f a l s e .
w h i l e . , , ,
, , .
... , ! .
. ,

. ,
> ?

! !
,

.
.
, .

w h i l e ( t r u e ) ...? , Mandango
!

* 253


f o r ,
w h i l e ,
, .
3 7 .

,
.

while (!rockVisible)
37
. takeStep ();

for (var X = 0; X < 37; ++

takeStep(); while

!
f o r -
_J

!
!

, ..

... !

? w h i l e
, , ...
M andango!

254 5


> 255


f i n d S e a t s ()
f o r w h i l e f i n i s h e d ,
b r e a k
.
-
, ,
.
,
"finished". "finished" . -
tru e. (^ while.

L J

..!..?? .. .
w hile ((i < seats.len0 th ) & lfm ^ ^ ...........
11

i f ( s e a t s [ i ] && s e a t s [ i + 1] && s e a t s [ i + 2 ]) {
/ /

, . , . . , , _ , ,. ^ ^
var accept = confirm( Seats + u +
" a r e a v a i l a b l e . A c c e p t ? " ) ;

if_(acce0 ) , l ....................................................................................................... .........................

/ / ^ ^ .....................
finished - tru e; .......................................................................................................

// 7''?10

"finished"
- tr u e
.
.
break.

256 5


Mandango
,
.
...

. M an d a n g o
.
,
.
. , ,
!

.
9 x 4 ,
.

.
.

257
 ,

. ,
,
. .
, . !
.
,
. -
.
!
var seats = new Array(new Array(9), new Array(9), new Array(9), new Array(9));
V _____

.
M an d a n g o ,
,
. ,
!

/
,
.

var seats = [[ false, true, false, true, true, true, false, true, false ],

[ false, true, false, false, true, false, true, true, true ],

[ true, true, true, true, true, true, false, true, false ],

[ true, true, true, false, true, false, false, true, false ]];

. .

False T rue - - -
. ~ .

258 5


.
,
, .
,

.
X (
.
).

.
alert(18[1][3]); /

V ___ 1^

3.

.
,
.

> 259


s e a t s ,
.

,
/.
,
J. I.

fo r (v a r i - ; i < sea ts.len ^th ; ('++)

, ^ fo r (v a r j = O; J < seatsp'].length; J++) (
>
.
if (seats[i][j])

r t(" S e a t " + i -h " in ro w " + j + " is available.'');

,
( 1) alertC 'S ea t + i + " in ro w " +J + " is n o t available.");
( j )
.

,
(tru e )

(false),


.
.

'^
!

3 *
?
, ?
0 ; , . ?
! . ,
--1- ;
. ,
. ' . ,
, ( 4). . ,

. s e a t s [ 4 ] . ,
p u s h () .
.

260 5


. .

,
.
.

Mandango
M an d an g o ,

. .

1




.

Mandango,
? ?

> 261


<htm l>
<head>

M andango!
< title> M a n d a n g o - Ma4o</title>

< sc rip t ty p e = "te x t/ja v a sc rip t">

v a r s e a t s = [[ f a l s e , t r u e , f a l s e , t r u e , t r u e , t r u e , f a l s e , t r u e , f a l s e ],
[ f a l s e , t r u e , f a l s e , f a l s e , t r u e , f a l s e , t r u e , t r u e , t r u e ],
[ t r u e , t r u e , t r u e , t r u e , t r u e , t r u e , f a l s e , t r u e , f a l s e ],
[ tru e , tru e , tru e , fa ls e , tru e , fa ls e , fa ls e , tru e , fa ls e ]];
v a r s e lS e a t = -1; mandango.html
fu n ctio n i n i t S e a t s 0 {
/ /
f o r ( v a r = 0; < s e a t s . l e n g t h ; i+ + ) { , co~
f o r ( v a r j = 0; j < s e a t s [ 1 ] . l e n g t h ; j + + ) {
if (se a ts[i][j]) { .
/ /
d ocum ent. g etE le m e n tB y ld (" s e a t " + ( * s e a t s [ ] . l e n g t h + j ) ) . s r c "se a t_ a v a il.p n g "
d ocum ent. g e tE le m e n tB y ld (" s e a t" + ( * s e a t s [ ] . l e n g t h + j ) ) . a l t "A v ailab le s ea t"
)
e lse {
/ /
d o c u m e n t. g e tE l e m e n t B y l d (" s e a t " + ( i * s e a t s [ i ] . l e n g t h + j ) ) . s r c = " s e a t _ u n a v a i l . p n g "
d o c u m e n t.g e tE le m e n tB y ld ("se at" + ( i * s e a t s [ i l . l e n g t h + j ) ) . a l t = "U n a v ailab le s e a t"
)

} ______

fu n ctio n fin d S ea tsO {
Find S e a ts,
/ / , 1&1
i f ( s e l S e a t >= 0) { (
s e lS e a t = -1; .
i n i t S e a t s () ;
}
w hile,
/ / fo r
v a r i = , f i n i s h e d = f a l s e ;

w h i l e ( i < s e a t s . l e n g t h && I f i n i s h e d ) { ^
f o r (v a r j = 0; j < s e a t s [ i ] . l e n g t h ; j++) { .
/ / ,
i f ( s e a t s [ i ] [ j ] && s e a t s [ i ] [ j + 1] && s e a t s [ i ] [ j + 2 ]) {
/ /
selS eat = i * s e a ts [ i] .le n g th + j;
docu m en t.g etE le]T ien tB y Id ("seat" + (i * s e a t s [i] . l e n g t h + ) ) .s r c = "seat_ select.p n g ";
d o c u m e n t.g e tE le m e n tB y ld C 's e a t" + (i s e a t s [ ] . le n g th ) ) . a l t = "Your s e a t " ;
d ocum ent. g e tE le m e n tB y ld (" s e a t ( * s e a t s [ ] .le n g th + + l) } .s r c = "seat_ select.p n g ";
d ocum ent. g e tE le m e n tB y ld (" s e a t ( * s e a t s [ ] .len g th + + 1 ) ) . a l t = "Your s e a t " ;
d o cu m en t. g e tE le m e n tB y ld (" s e a t ( s e a t s [ ] . len g th + j + 2) ) . s r c = " s e a t _ s e l e c t .p n g " ;
d o cu m en t. g e tE le m e n tB y ld (" s e a t ( s e a t s [ i l . len g th + j + 2 ) ) . a l t = "Your s e a t " ;

/ /
v a r a c c e p t = c o n f i r m ( " S e a t s " + ( j + 1) + " t h r o u g h " + (j + 3) +
" i n Row " + ' ( i + 1) + " a r e a v a i l a b l e . A c c e p t ? " ) ;
i f (accept) {
/ / ,
fin ish ed = true;
b reak;
)
e lse {

262 5


fI ,
s e lS e a t = -1;
d o c u m e n t.g e tE le m e n tB y ld C 's e a t" + ( sea ts[i].le n g th j ) ) . s r c = 's e a t _ a v a i l .p n g " ;
d o c u m e n t. g e tE l e m e n t B y l d (" s e a t " + ( s e a t s [ i ] . len g th j ) ) . a l t = "A v ailab le s e a t" ;
d o c u m e n t.g e tE le m e n tB y Id (" s e a t' + ( s e a t s [ i ] . le n g th j + l ) ) . s r c = " s e a t_ a v a il.p n g "
d o c u m e n t.g e tE le m e n tB y Id { "se a t" + (i s e a t s [ i ] le n g th j + l ) ) . a l t = "A v ailab le s ea t"
d o c u m e n t . g e t E l e m e n t B y l d C s e a t " + {i sea ts[i].le n g th j + 2) ) . s r c = " s e a t _ a v a i l . p n g "
d o c u m e n t.g e tE le m e n tB y Id (" se at" + (i s e a t s [ i ] . le n g th 2 ) ) , a l t = "A v ailab le s e a t"

//

i++;


in itSeatsQ
< /scrip t>
.
< /head>
vT .
<body o n l o a d = " i n i t S e a t s { ) ;" >
d i v sty le= "m argin -to p:2 5 px ;
<i m g i d = " s e a t O " s r c = " " a l t =
<im g i d = " s e a t l " s r c = "
<im g i d = " s e a t 2 " s r c = "
<im g i d = " s e a t 3 " s r c = "
<img i d = " s e a t 4 " src=="

<img i d = " s e a t 5 " s r c = " .
<im g i d = " s e a t 6" s r c = "
<img i d = ' ' s e a t ? " s r c = " " a l t = " " / >
<img i d = ' s e a t 8" s r c = " " a l t = " " / X b r / >
<img i d = ' ' s e a t 9 " s r c = " " a l t = " " / >

<img i d = ' s e a t l O " s r c = " " a l t = " ' " / > ,
<img i d = ' ' s e a t l l " s r c = " " a l t = " ' " / >
M a n d a n g o , H T M L -
<img i d = ' " s e a t l 2" s r c = " " a l t = " ' " / >
<im g i d = ' " s e a t l 3 " s r c = " " a l t = " ' " / > (
<im g i d = ' " s e a t l 4 " s r c = " a l t = " " / > : http://xmvw.headfirstlabs.com/
<im g i d = ' " s e a t l S " s r c = " " a l t = " " / > V
<img i d = ' " s e a t l G " s r c = " " a l t = " /> ^ ^ books/hfjs/).
<img i d = ' " s e a t l ? " s r c = " " a l t = " " / x b r / > f
<img i d = " s e a t l S " s r c = " " a l t = " " / >
<img id = '" s e a t l 9 " s r c = " " a l t = " / >
<img id = '" s e a t 20" s r c = " " a l t = " " / >
<im g i d = " s e a t 21" s r c = " " a l t = " " / >

<im g i d = " s e a t 22" s r c = " " a l t = " " / >
<img i d = " s e a t 2 3 " s r c = " " a l t = " " / > 36
<img i d = " s e a t 2 4 " s r c = " " a l t = " " / >
<img i d = " s e a t 2 5 " s r c = " " a l t = " " / > ...
<img i d = " s e a t 2 6 " s r c = " " a l t = " " / x b r / >
<img i d = " s e a t 2? " s r c = " " a l t = " " / >
!
FindSeatsQ
<img i d = " s e a t 2 8 " s r c = " " a l t = " " / >
<im g i d = " s e a t 2 9 " s r c = " " a l t = " " / > ,-
<img i d = " s e a t 3 0 " s r c = " " a l t = " " / > Find
<img i d = " s e a t 3 1 " ' s r c = " " a l t = " " / > Seats.
<img i d = " s e a t 3 2 " ' s r c = " " a l t = " " / >
<im g i d = " s e a t 3 3 " ' s r c = " " a l t = " " / >
<im g i d = " s e a t 3 4 " ' s r c = " " a l t = " " / >
<img i d = " s e a t 3 5 " 1 s r c = " " a l t = " " / x b r / > J
< i n p u t t y p e = " b u t t o n ' l d = " f i n d s e a t s " v a l u e = " F i n d S e a t s " o n c l l c k = " f i n d S e a t s ()
< /div>
< /body>
</htm l>

> 263


, M a n d a n g o ,
...
! .

!

M a n d a n g o


.

^^ Ticlusi Findef

J Seats 2 through 4 in Row 3 are available. Accept?

( Cancel ( OK

iiip e

264 5


,
?
.
\ } . . '!

,
.

.
.
 :>

JavaScript ,
.
.
.
, .
, ,
.


-
.
.
?

. ,
; .

,
.

/ \

|1 1

1
, , ...

268 6


,
,
8.

JavaS cript.
,
.
H eat.

HEAT FIRST
/ -
,
. ,

,
,
.

,
. H e a t,
. !

* 269


H e a t JavaS cript.
,
.
, , .


, , ,
.
.

Jav aS crip t H e a t
h e a t ( ) ...

heat ; ^

, ~

function heat { ,

// heat().
shovelCoal ;

lightFire ; .
harnessSun();

}

,

, , h e a t ()
- . , .
, , . ,
.
().

270 6


(1
,
.
, ,
. ;

,
6
.
fu n ctio n . ,

^> .
function \ +

V

,
.


.

h e a t ( ) ,

. :

function heat () {

II

shovelCoal();

lightFire ;
.
harnessSun ;



.

> 271
 m andango

)
.
M a n d a n g o ?
.
:

,
i n i t S e a t s ( ) :

function initSeats {
//
for {var i = 0; i < seats.length; i++) {
for (var j = 0; j < seats[i].length; j++)
if (seats [i] [j ]) {
//
(i seats[i].length j)).src "seat^avail.png";
document.getElementByld("seat"
seats[i].length j)).alt "Available seat";
document.getElementByld("seat (i
}
else {
//
seats[i].length + j)).src = "seat_unavail.png"
document.getElementByld("seat"
document.getElementByld("seat" seats[i].length + j)).alt = "Unavailable seat"

. iriitSeatsQ -
i n i t S e a t s {) - M a n d an g o

M andanqo.
andango.
o n l o a d .
.

<body /
onload="initSeats(); ">
<div style="height:2 5 p x "x/div>
<div style="text--align: center">
<img id="seatO" src="" alt="" />

<img id="seat35" src="" alt="" / x b r />

<input type="button" id="findseats" value="Find Seats" onclick- 'findSeats0 ;" />
</div>
</body>
</html>

272 6


^
1 ]| 1

? , .
.
.
0 ;
, ,
,
.
.
.

r a t e M o v i e ( ) , ^ ,
, ,
? ( >

.
r e m o v e In a p p r o p r ia te G u y ( ) .
?
0 ; , ,
,

! .
?
, . .
,
0= ! .
,
. h e a t ( ) .

.
.
.
, , ,


.

.
, .

Receive tic k e t for aisle seat

Request aisle s e a t.

Ask for refund G et refund

Throw popcorn Popcorn is hurled a t others

* 273


.


Request aisle s eat . > Receive tic k e t for aisle seat

requestAisleSeatQ

A sk for refund G et refund

g e tR e fu n d Q

T h ro w popcorn Popcorn is hurled a t others

th ro w P o p co rn Q

!

?

)


. , H e a t
. ,
h e a t () .
,
.

274 6


, ,
. ,
.
H e a t !

HEAT FIRST .

.
.

^
, heat (targetren*.) ;

h e a t ( ) .

12 . :
g e t T e m p ().

fu n c tio n h e a t(ta rg e tT e m p ){
.......................................................................................................................................
.

* 275


h e a t ( ) ,
:

fu n c tio n k e a t(ta r g e tT e m p )l
...................
w hile (g e tT e m p O < ta rg e tT e m p ) {

. / /
..................................................................... -- - - .
skovelCoalQ;
.....;........................................................ - -us--.while ........
lightFireQ;
harnessSunQ ;
,

}
.

Jav aS crip t - ^
. ; -
, . ^ ^

_^

,
- .
:
( M a th . P I), (tem p) (72).

276 6


, ,
.
h e a t ( ) ,
:
------
heat (72) ; 6 .

h e a t () t a r g e t T e m p
, 72.
, .

72 heatQ

.
function heat(targetTemp) {

alert (targetTeii5>) ;

ta r g e tT e m p . 1

,
.
,
9 10.
-
te m p

var ten^j = 80;
.
coollt (ten^)) ; function coollt(temperature)

alert (teir^)) ; temperature ;

,


.

> 277


, ; .
, ;
. ,
.

, - ,
,
:

.

// , 1C f/

m a tin e e T ic k e t = a d u ltT ic .e t * (i _ . 10, ;

}
U n io rT ic k et = a d u ltT ic k e t
(1 - 0.15) ;

/ /

c h ild T ic k e t = a d u ltT ic k e t

.

:

fu n c tio n d is c o u n tP r ic e (p ric e , p e rc e n ta g e ) {

r e tu r n (p ric e * (1 - (p erc e n ta g e / 1 0 0 )));

.
B ut
d i s c o u n t P r i c e :

//
, //
, 15%

m a tin e e T ic k e t = d isc o u n tP ric e (a d u ltT ick e t, 10) ; " ^ ^ 1 = d i-

isco u n tP ric e (a d u ltT ic k e t, 15);

/ / , 20-s

childTicket = discountPrice(adultTicket, 20);

278 6


fmJ^eatsO
us ]\|EnJango.

' ,

<|>.

function f i n d S e a t s {
// ,
if (selSeat >= 0) {
s e l S e a t = -1;
initSeats ;

//
v a r i = , f i n i s h e d = false;
w h i l e (i < s e a t s . l e n g t h && Ifinished) {
for (var j = 0; j < s e a t s [ i ] .length; j++) {
// ,
if (seats[i][j] && s e ats[i][j + 1] &s seats[i][j + 2]) {
//
s e l S e a t = i * s e a t s [ i ] .l e n g t h + j;
d o c u m e n t . g e t E l e m e n t B y l d ( " s e a t " + (i s e a t s [ i ] .l e n g t h + j) ) . s r c = " s e at_select.png";
d o c u m e n t . g e t E l e m e n t B y I d ( " s e a t " + (i s e a t s [ i ] .l e ngth + j )).alt = "Your seat";
d o c u m e n t . g e t E l e m e n t B y I d ( " s e a t " + (i s e a t s [ i ] .l e n g t h + j + l) ) . s r c = " s e at_select.png";
d o c u m e n t .g e t E l e m e n t B y l d ( " s e a t " + (i s e a t s [ i ] .l e n g t h + j + l) ) . a l t = "Your s e a t ;
d o c u m e n t .g e t E l e m e n t B y l d ("seat" + s e a t s [ i ] .length + j + 2 ) ) . src = " s e a t _ s e l e c t . p n g " ;
d o c u m e n t . g e t E l e m e n t B y l d ("seat" + (i s e a t s [ i ] .length + j + 2 ) ) . alt = "Your seat";

//
v a r a c c e p t = c o n f i r m ("Sea t s " + (j + 1) + " t h r o u g h " + (j + 3) +
" in R o w " + (i + 1) + " are ava i l a ble. Accept?");
if (accept) {
// ,
f i n i s h e d = true;
break;
}

,
s e l S e a t = -1;
d o c u m e n t .g e t E l e m e n t B y l d ("seat" + ( * s e a t s [i] .l ength + j)) .src
document.getElementByld("seat" + ( * s e a t s [i] .l ength + j) ) .alt
d o c u m e n t .g e t E l e m e n t B y l d ("seat" + ( * s e a t s [i] .l e n g t h + j + D ) .src
d o c u m e n t .g e t E l e m e n t B y l d ("seat" + (
(i * s e a t s [i] .l e n g t h + j + 1) ) .alt
d o c u m e n t .g e t E l e m e n t B y l d ("seat" + ( * s e a t s [i] .l e ngth + j + 2) ) .src
d o c u m e n t .g e t E l e m e n t B y l d ("seat" + ( * s e a t s [i] .l e ngth + j + 2) ) .alt

//
i++;

> 279


'^ ^
GnJ^eatsQ ^^ ]^14
1^ , cBojo ]=>,

.

function f i n d S e a t s {
// ,
if (selSeat >= 0) {
se l S e a t = -1;
in i t S e a t s ();
}

//
va r 1 = 0 , f i n i s h e d = false;
w h i l e (i < s e a t s . l e n g t h && Ifinished) {
for (var j = 0; j < s e a t s [ i ] .length; j++) {
// ,
if (seats[i][j] &s sea t s [ i ] [ j + 1] && seats[i][j + 2]) {
//
s e l S e a t = i * s e a t s [ i ] .l e n g t h + j;
- d o c u m e n t .g e t E l e m e n t B y l d (" s e a t '.+ (1 ~ ~ ^ ^ ~ ^ 7 - 1 ~ ^ ~ ^ ^
^ o c u m e n t . g e t E l e m e n t B y I d (V " s e a t " -r
+ v
(i
-L * atiduto
s e a t s [[ Ji.J].l eu
. j.e ng
yctn
h -+I- j ) ) . a l t = " iYoouu r seat";
r s eat"; ^
d o c u m e n t .g e t E l e m e n t B y l d ("seat " ' T i r ^'^^StiTi77TSrgt!rTl + 77')';sTc
^ o c u m e n t . a e t ^ l e m e n t B v I d ( " s e at" + (i * seats [i 1 .l e n g t h + i + l ) l . a ] t = "Your seat":
d o c u m e n t . g e t E l e m e n t B y I d ( " s e a t " + (i * s ^ i t i T T T T l e ^ f ^ i t t ' T T ^ 2 ) ) " . src = " seat .select.
^-^Jtoc.ument.getElementBvId.(.".s.e.at" + (i * seats Til ,l e n g t h + -j + 2 n . a l t = "Your- ___________

//
v a r a c c e p t = c o n f i r m ( " S e a t s " + (j + 1) + " t h r o u g h " + (j + 3)
in R o w " + (i + 1) + " a r e ava i l able. A c cept?");
if (accept) {
// ,
f i n i s h e d = true; ,
break;

.
else (
// ,
s e l S e a t = -1;
^ - T l o c u m e n t .g e t E l e m e n f B y T a "^^*
d o c u m e n t .g e t E l e m e n t B y l d (" s e a t " + (i seats [i] .length + j ) ) . a l t = "Ava i l a b l e s e a t ' T ^
d o c u m e n t .g e t E l e m e n t B y rai'"seat'"'"T .length 4- -I- i)).gf'e' = "Sei r ^ a V a i i . p n l "
D o c u m e n t . g e t E l e m e n t B y l d ( " s e a t " + (i seats[i .l e n g t h + j 1 ) ) .alt = "__________
A v a i l a b l e _______
seat _
aocument.g e t E l e m e n t B y l d ("seat" + 7 seats [i)'"iengETr+ j' ^ "seat _ a v a i l . p n g ^
d o c u m e n t g e t E l e m e n t B y l d ("s eat" + (i seats[i].length + j + 2 ) ) . alt = "Ava i l a b l e seat";
}
N
len g th
// ^ 3 ^
i++;
. :

280 6


, ^
, -
, M a n d a n g o ,
. , s e t S e a t ( ) ,
, . ;
, .
; f i n d S e a t s () :

, ,
,

, ...
- ,
!
0. .

,
fin d S ea tsO \ .
,
.
.

Available seat,
U navailable seat Y our seat. -
, a l t .

s e t S e a t () Mandango.

* 281
 m andango

_ _ _ _
' s e t S e a t {) Mandango.

' .

- v v
statusJ descrip tio n ) {
& .
<^^Cj^_^^_>^i.g_etElementByld('seat'' + sea tN u m ).src ~ " s e a tj + s ta tu s + ".png";

d o c u m e n t.g e tE le m en tB yld C 'sea t" +- se a tN u m ).a (t = d escription;

......................... ...................................................................... z z ..........................

Mandango
6
s e t S e a t {) -
f i n d S e a t s ( ) . setSeatQ .

function findSeatsO {

//
var 1 = 0 , finished = false;
while (i < seats.length s& Ifinished) {
for (var j = 0; j < seats[i].length; j++) {
// ,
if (seats[i][jl &S seats[i][j + 1] ss seats[i][j + 2]) {
//
selSeat = i * seats[i].length + j;
f s e ts e a td * seats [il.len g th + j , "select", >'
' J se tS e a td * seats [i] .length + j + 1, "select". Your seat ,
T s e ts e a td * seats [il.len g th + j + 2, "select" ,^ ^ Y o u rje a tJ^
/ /
v a r a c c e p t = c o n f i r m ( " S e a t s " + (j + 1) + " t h r o u g h + (3 + 3) +
se tS e a tQ " i n Row " + ( i + 1) + " a r e a v a i l a b l e . A c c e p t ? " ) ;
. ^ ^ //^ ,
fin ish e d = tru e;
break;
}
else {
// ,

S s S e a t ( i * seats [il.len g th + j, "avail", "Available seat");

( setSeat(i * seats [il.len g th + j + 1, "avail", Ava^.lable seat ,
L se tS e a t(i * seats[i] .length + j + 2, "avail". Available seat ),
1
)
)
//
++;

282 6


Mandango
s e t S e a t ()
f i n d S e a t s ( ) .
i n i t S e a t s ( ) , .

function initSeats {
//
for (var i = 0; i < seats.length; i++)
for (var j = 0; j < seats[ll-length,
if (seats[i][jl) (
// seats[i].length + j))-src
"seat_avaxl.png
docvment.getElementById("seat" ^ (i
seats[i].length + j))-alt
"Available seat
document. getElementBy Id ("seat" H (i
)
else {
//
document. getElementByld ("seat" (i
document.getElementByld (' seat (i
}
) fu n ctio n i n i t S e a t s {
/ /
f o r ( v a r i = 0; i < s e a t s . l e n g t h ; i+ + )
f o r ( v a r j = 0; j < s e a t s [ i ] . l e n g t h ;
if (se ats[il[j]) {
/ /
setSeat(i * seats[i].length + j 'Available seat");
e lse {
/ /
setSeat(i * seats[i].length + j "unavail", "Unavailable
, seat");
}
setS e tO
.

, M a n d a n g o
, .
, .
s e t S e a t ( ) .

.

. ,
.


. .

> 283

_
^
- ^ !

) , 0 1 ,
? < s c r i p t >
, , ,
0 ; , . .
, .

,
. , ?
?

,
,

! , .

. ,
;
, ,

. ,
.
,
, ,
.
,

.
, . , ,
, !
-?

-
. !

8
M a n d a n g o ,
-
. , .
,
H eat.

284 6


,
, , , .
,
. ,
. ,
.

/ ^

} .

-
^


^


()
-
.

, ,
.

> 285


, return
r e t u r n . ,
. .
re tu rn

r e tu r n -
. ,
! .
r e t u r n
; ,
.
, ,
. , g e tT e m p ()
,
function getTen^) () {

//

var rawTemp = readSensor() ;

var actualTeir^j = convertTen^ (rawTenp) ; V
, -
return actualTea^;
.
} V r e tu r n -^

.
, g e tT e m p ()
:

function heat(targetTemp) { y e tT e m p Q

while (getTen^sO < targetTemp) { ,
.
// ' w hite
heatQ .

}
}
, g e tT e m p ( ) ,
,
w h ile .

286 6


r e t u r n ,
.

. h e a t ( ) :

function heat(targetTen^) { a c tu a lT em p ? -
g etT e m p O
if (getTempO > targetTemp)"^ .

return false; -
,, false
while (getTen^O < targetTen^) .

// ,
, , -
> ,
g e tT e m p ().

_ ,
tru e.
}

, .
r e t u r n , .
h e a t ( ) ,
r e t u r n , .

function heat(targetTemp) {

if (getTempO >= targetTemp) r e tu r n

,
return; ----- '
.
while (getTen^O < targetTemp) {

// return



re tu rn .

.

* 287
 return

^ ^ '
:
/

Head First: , .
. , .
Return: . Head First: .
, . .
. ?
?
Head First: ?
Return: ,
Return: ,
, ,
- .
.
.
-,
.
.
Head First: ?
. - .
Return: ,
, . Head First: ,
, , ,
. , ?
Head First: Return: ,
, , ,
- . ,
. ?
Return: , . , .
,
, .


, ,
,
.
.

Head First: , Head First: ,

? ,
?
Return:
Return: , !
, ,
. Head First: . ,
.
Head First: ?
Return: . , Return: .
!
,

288 6


, ! .
, , ,
. , ,
, .
, .

function showClimateMsgO {
return;
a l e r t ( c o n s t r u c t M e s s a g e ());

}
function constructClimateMsgO {

var msg =

msg += " // "

if (getTempO > 80)

msg += " ";
else
msg += " ";

if (true)
msg += "
else
msg += " ";

if (getTempO <= "/0)

return msg + "!";
else
return msg + "!";

return " .";

function g e t T e m p O {
//
var actualTemp = readSensorO;
return 64;

> 289


,
, .

)'"

retu rn

.

function showClimateMsgO {

a l e r t ( c o n s t r u c t M e s s a g e );

}
-
function constructClimateMsgO { ,
var msg =
'^^,
^ nisg += -1&-^; // " .


\. if (getTemp 0 > 80)
^ .
^ msg += " ";
else
msg += "
.

-
if-else
_

,
if (getTempO <= 70)
. return msg + "!";
else
return msg + "!";

, function getTempO {
Java5cripti^ / /

var actualTemp = readSensor ();

return 44^ actualTemp; ^ _____ _

290 6


, M an d a n g o .
,
. ,
, , . ,
.
Mandango!

,
, .


^

getSeatStatus(seatWum);


"available",
"unavailable"
"yours".

getSeatStatus () __
g e t S e a t S t a t u s () ,
. , ,
. , .
, .
____________

f u n c t i o n g e tS e a tS ta tu s ( s e a tN u m ) {

i f ( ........... i = -1
+ 1)11
( .................- ..................N .................. -
r e t u r n " y o u r s " ;
[ 0 ] . l e n g t h ] )
[ 0 ] . l e n g t h ) ] [
e l s e i f { .................. [ M a t h , f l o o r ( .............................../

r e t u r n " a v a i l a b l e " ;

e l s e

return "unavailable";

> 291


g e t S e a t S t a t u s I .

-... ,
,
se lS e a t 1 . , .

, ,
<?,


. .
,

(^ .
}

, ,
.
s h o w S e a t S t a t u s ( ) . ,
g e t S e a t S t a t u s ( ) . g e tS e a tS ta tu sQ .

function showSeatStatus(seatNum) {

alert("This seat is " + getSeatStatus(seatNum) + ".");

0
}



.
292 6


)
- M an d a n g o ,
^____
, . o n c l i c k ^ ^ o w 5 e a tS ta tu s()
s h o w S e a t S t a t u s ( ) : /

<img id="seat23" src="" alt="" onclick="showSeatStatus(23);" />

oee . . . . . "

,
.
,
, , .

r e t u r n
. .

, r e t u r n
. .

* 293


M a n d a n g o ,
.
, ,
-
H T M L , Jav aS crip t CSS.

<html>

^^Jtitle>Mandango - The Macho Movie Ticket Finder</title>

<script type=text/javascript">

function initSeats0 {
}
function getSeatStatus(seatNum) {

)
function showSeatStatus (seatNum) ( ^
alertC'This seat is " + getSeatStatus (seatNum) + - );

}
function setSeat (seatNum, status, description) {
status + ".png";
document.getElementById("seaf + seatNum). src -
d o c u m e n t . getElementByldCseat" + seatNum).alt - descrapti

J a v a S c r ip t H T M L
function findSeatsO {
-
H T M L - .
J ^ d y onload*"initSeats() ;">
<div style-'matgin-top:25px; text-align;center >
<img .. ..
id="seatO". _ 111
_I alt
src="" .howSea 4
o n c l i c k = " s h o w S e a t S t a t u s ( 0 ) />
onclic)c="showSeatStatus (1); " />
<img id="seatl" src="" alt="
o n c l i c k . = " showSeatStatus (2);" />
<img id="seat2" src=" alt="
onclick="showSeatStatus(3);" />
<img id="seat3" src-"" alt="
o n c l i c k = " s h o w S e a t S t a t u s (4); />
<img id="seat4" src="" alt="
onclick="showSeatStatus(5); />
<img id="seat5" src="" alt="
o n c l i c k = " s h o w S e a t S t a t u s (6); />
<img id="seat6" src="" alt="
o n c l i c k = " s h o w S e a t S t a t u s (7); />
<img id="seat7" src="" alt="
ol
O n
H.ciJl.J.
i'
c
-lk'-= " s h o w S e a---
t S t a t u s (8); /xbr />
<img
<lmq
id="seat8" src="" alt
id-"seat9" stc-"" a l t - - onolick="sboSeatStatus (9); />
<ig id-"seatlO stc--' a l t - - onclick-showSeatStatus 10 1 />
d-"seatll" src-" alt-"" onclick."sboSeatStatus 11 , />
<img alt="" o n c l i c k = " s h o w S e a t S t a t u s (12), />
<img id="seatl2
alt="" o n c l i c k - " s h o w S e a t S t a t u s (13); />
<img id*"seatl3' ' src="
alt="" onclick="showSeatStatus(14); />
<img id="seatl4 ' src="
al t = " " o n c l i c k = " s h o w S e a t S t a t u s (15); />
<img id="seatl5" src="'
<img id="seatl6" src=" alt"'
o n c l i c k = " s h o w S e a t S t a t u s (16) />
o n c l i c k = " s h o w S e a t S t a t u s (17);" / X b r />
<img id="seatl7 src=" alt="
o n c l i c k = s h o w S e a t S t a t u s (18); ' />
<img id="seatl8" src="' alt="
o n c l i c k = " s h o w S e a t S t a t u s (19);' ' />
<img id="seatl9" src='" alt"
o n c l i c k = " s h o w S e a t S t a t u s (20);' />

<img id="seat20" src=" ' alt=
<img id="seat21" src=" ' alt="
o n c l i c k = " s h o w S e a t S t a t u s (21); />
o n c l i c k = " s h o w S e a t S t a t u s (22);' />
<img id="seat22" src=" ' alt="
M andango <img id="seat23" src=" alt="
o n c l i c k - " s h o w S e a t S t a t u s (23);' ' />
o n c l i c k = " s h o w S e a t S t a t u s ( 2 4 ) ; />
<img id="seat24" src=" ' alt="
o n c l i c k = " s h o w S e a t S t a t u s (25); " />
<img id="seat25" src=" alt=""
o n c l i c k = " s h o w S e a t S t a t u s (26); " / X b r />
<img id="seat26" src=" alt="
o n c l i c k = " s h o w S e a t S t a t u s ( 2 7 ) ; ' />
ait=""
J a v a S c r ip t <img id="seat27" src="
<img id="seat28" src="
o n c l i c k = " s h o w S e a t S t a t u s (28); " />
on c l ick='s h c w S e a t S t a t u s (29) ; " />
HTML. <img id=seat29" src=" ' alt=""
o n c l i c k * " s h o w S e a t S t a t u s (30); " />
<img id="seat30" src=" " alt=""
o n c l i c k = " s h o w S e a t S t a t u s (31); " />
<img id="seat31" src=" " alt=""
o n c l i c k = " s h o w S e a t S t a t u s ( 3 2 ) ; " />
ait=""
o n c l i c k = " s h o w S e a t S t a t u s (33); " />
<img id="seat32'" src="
<img id="seat33" src=^^"^ alt=""
o n c l i c k = " s h o w S e a t S t a t u s (34); " />
<img id="seat34" src="" alt^
o n c l i c k = " s h oiwws
Se
eaa
i-toSuc
ti
ai-
tw
u-
s (\3 5 ) ; /---
x b r -/>
<img id="seat35" src="" alt 'Find Seats" onclick="findSeats0 ; " />
<input type="button" id="findseats value

294 6


)
? , .
- Jav aS crip t
, .
. ,
,
.
M an d an g o .

J
, <style>

, </style>
Bug
| -
. 88-
H T M L - -
,
,
.
<script>

</script>

JavaS cript-o
.

.

, . ,
,

. ,
M a n d a n g o , , Jav aS crip t
H T M L , -.
. , H T M L -
Jav aS crip t
.

Mandango?

> 295
 =

)
,
;
-.
,
Jav aS crip t .
.

,
. ,
. :
,
' .
function showSeatStatus(seatNum) {

alertC'This seat is " + getSeatStatus (seatNxm) +

,
.

.

var showSeatStatus = function(seatNum) {

alertC'This seat is " + getSeatStatus(seatNtam) +

b-
8
' .


, . .
:
( ) ( ).
, , ,
.
, ,
. , ?

var myShowSeatStatus = showSeatStatus;

296 6


,
. :

alert(myShowSeatStatus(23));
m ySh o w S ea tS ta tu s.

m y S h o w S e a tS ta tu s ( )
s h o w S e a t S t a t u s ( ) ,
. ,
.
,
showSeatStatus ---^ ^ function() {

myShowSeatStatus
};
?
,
.
, .

var myShowSeatStatus = showSeatStatus;

yShow SeatStatusQ j myShowSeatStatus(23); m y S h o w S e a tS ta tu s


show SeatStatusQ . .

, .

function doThis(num) {
return num++;
}

function doThat(num) {
return num ;
}

var X = doThis(11); OK
var Y = doThat;
var z = doThat(x);
X = (z);
= x;
alert(doThat(z - y));

> 297


function doThis(num) {
return num++;
}

function doThat(num) {
return num ;

var X = doThis(11);
var = doThat; X = 12.
\
var z = doThat (x) ; = doThat
X = (z); ' z - d o T h a t(lZ ) = 11
X = doThat(Xl-) = l O
= x;
= XO
alert(doThat(z - y));
a(eirt(doThat(XX - 1C))

_^

,
? !, . .
,
( ^ ; , . , .
. ? ,
HTML, ,
CSS JavaScript- ,
.
, .
.
,
, ,
.
.
, ,
,
. ,
,
. (
.
),

. , ? .
-
, 0 ; ,

298 6


,

?

,
. M a n d an g o
.

setSeat(i * seats [i] .length j, "select", "Your seat");

.
,
.

Mandango?

> 299


: :
,
. ,
? , .
,
.

?
. ,
, ;
. , ,
, .
,
. ,
.
! -
; ?

. ,
.

, . ,
, , .

. ,
, ?
. ,
.

.
,
, .

. .
, .

300 6


, HTML
,
, .
. , M an d an g o .
,

H T M L Jav aS crip t-

initSeatsQ -

on/oadJ

^ ^ 1 S ii

m m u
showSeatStatus(26);

H T M L - M an d an g o .
H T M L -a m p u S y m onload

, ^ . .. ._ initS ea tsQ
< body o n lo a d = " 3 .n itS e a ts ( ) ;" > onload.

<img id="seat26" src="" alt="" onclick="showSeatStatus(26);" />

H TM L- onclick

sh o w S e a tS ta tu sQ
onclick.

,
H T M L -ap yo
JavaScipt- H T M L-oa.
.

301


H T M L - ,
KOyJavaScript.
- - ! fe d b ^^
. ,
. , , . .
window.onload = initSeats;

initSeatsQ
C fb s m m onload
window. onload.

Jav aS crip t-
,
. o n l o a d
i n i t S e a t s () .
:

onload! window.onload(); initSeats ;

onload
...
window.onload... initSeats(),

.

JavaScript-
- JavaS cript-
- .

<body>
< b o d y > .

,
.

,
? o n l o a d M a n d a n g o
, o n c l i c k
.
, .
...

302 6


WMwM'ISteltlxlr
o n l i c k , ,
s h o w S e a t S t a t u s ()
.
, .
,
.

1
M&I -
onclick
&. ^

d o c u m e n t . g e t E l e m e n t B y l d ("seat26").onclick = function(evt) {

showSeatStatus(26)

}; - e v e n t

onclick ,
.
s k o w S e a tS ta tu s (),
:

s h o w S e a t S t a t u s {),
. ,
.

.

, Jav aS crip t ,
,
e v t . .
.

i n i t S e a t s () o n l o a d ,

.

> 303


initSeats {) onload
;2 .

Function(evt)_ {

initSeatsQ;

..................................

in itS e a ts Q e vt ,

^ ^ o n lo a d
event.

) ?
-

. ,
onload ; onload
<script>.
.
, initSeats ()

H T M L - onload <body>.
?

onload. .
window.onload = f u n c t i o n () {

//
o n lo ad .
-------------- -
//
, -
~~ o n lo a d ,
i n i t S e a t s (); -----------

};
.

, onload
, . ,

.

304


_

1 |> 1

3 *
? ? .
.

0 ; ; . 12
,
,
,
.
, .
,
Ajax.
. ,
,
,
. ,
. ,
,
.
,
, .
.
:
.
,

onload Mandango.

window.onload = function {

// F i n d Seat

document.getElementByld ( " f i n d s e a t s " ) .........

//
vn.ti = fun c t i o n (evt) {
d o c u m e n t . g e t E l e m e n t B y l d ( seatO ) . ........

= 'M = f u n c t i o n (evt) (
d o c u m e n t . g e t E l e m e n t B y l d ( s eatl ). ........
4.0 .M = f u n c t i o n (evt) {
d o c u m e n t . g e t E l e m e n t B y l d ( seat2 ) . ........

//

> 305


onload
Mandango.

o n lo a d fin d S e a ts O

. o n c lic k
.

w i n d o w . o n l o a d = f u n c t i o n () {

11 F i n d Seat

d o c u m e n t .g e t E l e m e n t B y l d ("f i n d s e a t s ") . ,

// CO

d o c u m e n t. g e tE le m e n tB y ld ( " s e a tO " ) . , 0 1 / = f u n c tio n (e v t) f

d o c u m e n t . g e t E l e m e n t B y I d ( " s e a t l " ) . .OnC/!Ck= fun c t i o n (evt) ( >

d o c u m e n t. g e tE le m e n tB y I d ( " s e a t 2 " ) . ..0 n c /ic k = f u n c tio n (e v t) {StpwSeatStatu^^^^ ]

II

initSeatsQ;

init5eats0 ,
.
,
.

. 11, 1.
, .
.

306 6


'

o n l o a d Mandango
? o n l o a d ?

; Q ; . ,
. < s c r i p t > . ,
o n l o a d . .
, g e t E l e m e n t B y l d ()
w i n d o w . o n l o a d , .
, o n l o a d ,
. .

HTML- <body>
<div style"margin-top :75px; text-ali
<amg id-"seatO" src- gn;center">
<img id="seatl" src-
JavaScript H T M L - <img id="seat2" src='
Mandango , <img id"seat3" src-'
<irag ld"seat4" src-'
. <img id-"seat5" src="
<lmg ld="seat6" src="
<img id-"seat7" src-"
HTML, <img id="seat8" src-"
<img id-"seat9" src-"
JavaScript. <img id-"seatlO" src-
<img id-"seatll" src-= alt= .... />
<img id-"seatl2" src- alt=' />
<img id-"seatl3" src- alt= />
<lmg id-"seatl4" src- "" alt=
^ <img ld-"seatl5" src-'
<img id="seatl6" src-'
alt=" />
alt=' />
! ... <img id="seatl7" src-'"" alt"
" />
<img ld-"seatl8" src""" alt="
! ! <img id-"seatl9" src-""" alt="
" />
" / X b r />
<img id-"seat20" src-" alt="
" />
<lmg id="seat21" src-" alt="
" />
<img id-"seat22" src-" alt="'
" />
<img id-"seat23" src-" " alt="'
" />
<img id-"seat24" src=" " alt="
/>
<img id-"seat25" src-"'" alt="'
* />
<img id="seat26 " src-"'" alt=""
' />
<img ld-"seat27" src-"'" alt=""
' />
<img id-"seat28" src-""" alt=""
/>
<img id-"seat29" src-""" alt=""
/ X b r />
<lmg ld-"seat30" src-""' alt='"'
/>
<img id="seat31" src-"" alt=""
/>
<img id="seat32" src-""' alt=""
/>
<img id-"seat33" src-""' alt=""
/>
<img ld-"seat34" src-"" alt=""
/>
<lmg id-"seat35" src-"" alt=""
/>
<img id-"seat36" src-"" alt=""
/>
<img id-"seat37" src-"" alt=""
/>
<img id-"seat38" src-"" alt=""
/>
<img ld="seat39" src-"" alt=""
/ X b r />
<rnput type-"buttcn" id=
</aiv> findseats" value-"Find Seats"
</body>

> 307
 JavaScript

JavaScr^pt...
,
JavaScript.
, ,
,
, .

HEAT FIRST

Mandango. ,
...

34

V-" -
i f 3 r - ; o a a r * f
_ X through 3 in Row 4 are available. ?

( Canctl

D D O 0 i

308 6


, ?

. ^
< - --------- \ , ,! < -

.
JavaScript
.
,
, 181.
 ^

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

11.
,
. ,
.

, -
. ,

.

. ,

.

,
. Email



(1 .
. .

312 7


HTML-

:
CD
Sannerodty - P r s o a t i z e d ^ i J k y B a n n m
00
B A N N E R O C I T Y

Enter ms banner m essage: | _______

Enter ZIP Jd e of the tocation: |
Enter the d ate for th e m essage to be s h o i^ :

Enter your nam e; j ___________

Enter your phone number; _
Enter your email address; |
Order Banner
!

, , "
.
JavaScript. ? V
.
^ * ^
^^ttp/www.headfirstlabs.com/boo/hfjs/
5
. ,
.

Enter the banner message;

Enter ZIP code of the location:
Enter the date for the message to be shown:
Enter v^ur name:
Enter your phone number;
Enter your email address;

> 313


.
,,

32- ,

. ,
.

Enter the banner message: Mandango...

Enter ZIP code of the (ocatton: 100012 ^

Enter the date for the message to be shown: March 1 1 ,2009
Enter your name: Seth Tinselman

/ i^ur phone number: |(212) 555-5339

Enter your email address: setht@mandango

^


7

. 6
, -
/ / .
.biz. .

1
, JavaScript,
, . ,
, ,
. 32 .
32-
, //.

Enter the banner message: | Mandango...

)
H T M L
!
J a v a S c rip t
- , JavaScript
.
,
, 5811
...

314 7


. -
H T M L . ^ -
^ I .
id
~ <input id = "zip co d e " name="zipcode" type="text" size="5" />
/

.




Enter ZIP code of the location: Iw o iT I ------------ .

. -,
g e tE le m e n tB y ld ( ) .
, .
form ,
,
.

<input id="zipcode" name="zipcode" type="text" size="5" o n c l i c k = " s h o w I t ( t h i s .f o r m ) " />

fo rm ,
. ;
name!
fo rm
t h e Form ZIP code
:

Z IP code.
.

function showit(theForm) {
100012
a l e r t (theSo rm ["zip co d e "] .v a lu e ) ;

};

,
, - J .
8
< in p u t> .
,
g e tE le m e n tB y ld (),
.

> 315


^
'

) ?
(
form?
?

0: I , ,
,
0 :,I . JavaScript
form,
. .
form. f rm [" j tn a m e " ]
, v a l u e .
. 9 10.
Bannerocity.

,
JavaScipt.
.
, ?

.
,
? . ,

.
.

316 7


.

.
, ,
.

().

.

(/).

(onf ocus).
... 81.
0 onfocus! ------

Enter the banner message: | ^ ...

. 0 onfocus! onblur!
Enter Zip code of the location: 100012
0 OonchangeT
Enter the date for the message to be shown;
Enter your name;
Enter your phone number:
Enter your email address:

,
.

, ,
.


?

317
 -?

onblur

o n c h a n g e , ,
. ,
.
onblur
; o n b l u r ,
.

.

onfocus! ,
.

.

Enter your name: ][

^ .

o n c h a n g e , o n b l u r
, .
, o n b l u r , ,
, ,

.

^
!

, o n b lu r ?
?
I o n b l u r
Q ; . o n f S. o n f o c u s
onkeypress, onkeyup, onkeydown . . , o n b l u r
, .
, ,
. (),
.
. ,
.
onblur.

318 7


. ,
.
. alert {)
onblur.

function validateNonEmpty(inputField) {

//

if (inputField. value.length == 0) {
.
// ,

a l e r t ( " P l e a s e e n t e r v alue.");
,
return false;
.

.

return true;

Please enter value.

n a m e
,
-
.

% onblur
? onchange?

Enter your name: Seth Tinselman

e in w ^

Enter your phone num

Enter your email address: setht@mandango

onblur:

onchange:

> 319
 onblur onchange

_ _ _
\ onblur onchange
.

onbhtf!-
Enter your name: iseiman
Seth Tinselman qj
onchange!
Enter your phone numb
Enter your email address: setht@mandango onchange!

onblur: ..^

onchange:

onblur onchange ,
.

onblur: onchange:
,

. - .
. ,

... !

. - .
.

, .
,
.

.
,
?

320 7


onblur: onchange;
,

?
.
. .
,
,
.
. ,
,
... .,
!

, .
, , ,
. onchange.

,
?
, . ,
,
,
.
,
,
. , ...
. ,
,
, ,
.
,

.
,
.

, . ,
- ?
! .
. .
. ,

.

321
 -?

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

, .

Enter your name: Seth Tinselman

Enter youf phone number:

onblur
, , . :

&
,

.
<input id="phone" name="phone" type="text" size="12"

onblur="validateNonEmpty(this);"/>
/
v a iid a te N o n E m p tu O
- -
aw m ue o n b lu r , _

this .
,
.
form.

322 7


,
validateNonEmpty ().
.

< in p u t id = "n a m e " nam e="nam e" t y p e = " t e x t " s iz e = " 3 2 "

o n b lu r = " v a lid a t e N o n E m p ty (t h i s ) ; " / >

.
pho n e n u m b e r
.

--function validateNonEmpty (inputField) {

le n g th
// --
.
if (inputField.value.length == 0) (

// ,

al e r t ("Please enter value.");

,
return false;
false

-

return true;
,

tru e .
1 Please enter value.

,
validateNonEmpty ().
: true,
, false .
,

.

?
.
323


)

,
.
.
,
.
H T M L -
.
, -
1 , -
.
.

Enter your phone number: P fe a s e e n t e r a v a lu e .

H T M L - - -
.
<span> , . va lia a teN o n tm p
- / - _
- input. ^
.

< in p u t id="phone" name="phone" ty p e = " te x t" size= "1 2 "

o n b lu r= " v a lid a te N o n E m p ty (th is, docum ent. g e tE le m e n tB y ld ( 'p h o n e _ h e lp ') ) " />
<span id= "phone_help" c l a s s = " h e lp " x /s p a n >


class
<span>

,

IP ,
,
phone
!
n u m b e r.



.

, span,
, ,
.
validateNonEmpty ().

324 7


}
h e lp te x t
v a lid a te N o n E m p ty ().
.
.

fu n c tio n v a lid a te N o n E m p ty (in p u tF ie ld , h e lp T e x t) {

//

if (InputField.value.length == 0) ( ,
h e lp te x t
// ,
if (helpText != null) -----
(h e lp T e x t != n u ll),

helpText.innerHTML = "Please enter a value."; in n e rH T M L

re tu rn fa ls e ;
.

e ls e (
,

/ / ,

.
if (h e lp T e x t != n u l l ) -^ "

helpText.innerHTML =

return true;

Bannerocity .
V
.
JavaScript, .

Enter ZIP code of m e loMtior,: [ m m r a .

m a s e enter a value.
Enter the d ate for the m essag e to b e shown:
Enter your nam e: | S e th T in selm an
' Please enter a value.
Enter your phone nymber: |
' m e s s enter value.
Enter your email address: f

, - ,
.
.

325
 ?

>
,
, ,
? ,
.

...
.
? ^

326 7


...
5
, ,
32 ,
.
00 .
,
.
!
Mandango... '
Enter the banner message:

,
...

,
. ,
. ,
.
.

Enter the banner message: Mandangc-.. w

,
,
.

, ,
.
, .

> 327


,
.

~ -
m in L e n g tk
m a x L e n g th , m axLenyth)

i 7- -
.
Else

v a l i d a t e L e n g t h () ,
.
Bannerocity ,

. . ,
,
.
h e lp T e x t) ;

,
. maxLength
.
.

m in U n g th ^ ............^ i n p u f F i e l d ..........
- , - ,
. - .
.

< in p u t id="m essage" name="message" ty p e = " te x t" size= "3 2 "

onblur="validateLength(l, 32, this, document.getElementByld('message_help'))" />

<span id = "m essage_help" c la ss= " h e lp " > < /sp a n > ~ ^

v a l i d a t e L e n g t h {) ? o fo T T o T fo 7 f 7 Z 7 c ^ ^ a
i n p u t F i e l d , ( ) .
, m in L e n g th ,
m ax L en g th .
h e l p T e x t .
328 7


>

JavaScript.

fo rm ,
.
.

o n b lu r
.
,
. l e n g t h
.

v a l i d a t e L e n g t h ( ) ,
.

function validateLength(minLength, maxLength, inputField, helpText) {

/ / , m inLength, 5 m axLength .

/ / ^ & .................................

/ / , .

329


' v a l i d a t e L e n g t h ().

function validateLength(minLength, maxLength, inputField, helpText) {

m axLength

i f (in p u tF ie ld .v a iu e .le n g th < m in L e n g th in p u tF ie ld .v a lu e .le n q th > m a x L e n a th ) (

..............' 3 ? ^'....................... ..................................................... .......................... v .... .
- / /
........................................................................................... ............................................................................
,jf,( h e lp T e x t != n u ll)
.'

+ " i o " + t ^ a x L e n g t h +

c h a ra c te rs in le n g th .";

r e t u r n false;

0 ,
............................................................................................................
-
................................................................................................

9. . ,
. - ,, , , ,,,
( (h e lp T e x t != n u ll)

he Ip T e xt. L =

r e t u r n tr u e ;

I
.

.

,
JavaScript. .

, .

Enter the banner message: jcet your adventure on with Stick Figure Adventure! Pioase entof a value 1 to 32 characters in length. |

330 7


n a m e Q *
? i d ,
, ?
? . ,

; i d h e l p t e x t

! , i d / n a m e
Bannerocity
, ,
.
.
.
,

. ID _ h e l p .


.
.
, ,
. helpText ,
t h i s h e l p t e x t null, ,
o n b l u r . , , .
?
.
size
Q ; . HTML
t h i s ?
. t h i s
. ! , HTML- size
f o r m ,
. t h i s .
f o r m , .
o n b l u r , , , ZIP code

. Bannerocity size
,
5,
t h i s . f o r m
?
. ,
Bannerocity ,
, ;
maxlength.


. , t h i s . f o r m .

f o r m , ,
. ,


. .
, ,
-
_ .
,
f i e l d t h i s . ,
,
f o r m [ " m y _ f i e l d " ] . .
.

g e t E l e m e n t B y l d ( ) ,
,
.
h e lp t e x t
?

> 331
 ?

)
,
.
,
.
,
.

1 2! 11 1<1;

I 4

1 .

^ '

.

!

. I ,
.
9, .
, I 1,
.

332 7


.

,
. .
,
, .
37205

.

# # # # # -

^
-

v a lid a t e Z I P C o d e ( ) ,
.

function validateZIPCode(inputField, helpText) {

// . 5

if ( ) {

// ,
if (helpText != n u l l )
helpText.innerHTML = " .";

}
// ,

else if ( ) {

// ,
if (helpText != n u l l )
helpText.innerHTML = ", ";

}
else {
// ,
if (helpText != n u l l )
helpText.innerHTML = "";

333


v a l i d a t e Z I P C o d e ( ) ,
.

^
5 . 'N.

function validateZIPCode(InpLtField, helpText) {

// . 5.

if { in p u tF ie ld .v a lu e .le n g th != S ) {

// ,
if ( h e l p T e x t != n u l l )
h e l p T e x t .i n n e r H T M L = " .";

, , ______

} w ise.
// ,
^ ------------- isN aN Q , -
else if ( is N a N (in p u tF ie ld .v a lu e ) ) { N a N
......................................................... ( - ).
// ,
if (helpText != n u l l )
h e l p T e x t .i n n e r H T M L = ", ";

r e t u r n fa k e - ~~ ^ ,
........................ ........ ,
} false.
else {
// , ,
if (helpText != n u l l )
helpText.innerHTML =

.
I , .
! ,
, . ,
9 #####-####.
.

334 7


,
?

?

.
, ,

? Bannerocity

, ,
.

,


.

gantieroclw -

b a n n e r o c i t y

/
Pfease m tera value 1 to 32 chemoter$ in length.
Enter the banner message: |
ptease enter exsclly ffve dftte. ,
Enter ZIP code of the tocatton:
" 8 enter a value, O r d e r
Enter the date (or the message to be shown:
" nsase enter a vatas. B anner
Enter your nanne; | _
' Please enter a value.
Enter your phone number: j .
Please enter value.
Enter your emaB address: |
Order Banner

. , Bannerocity
,
.
placeOrder () Order Banner,
.

< in p u t t y p e = " b u t t o n " v a lu e = " O r d e r B a n n e r" o n c l i c k = " p l a c e O r d e r ( t h i s . f o r m ) ; " />

> 335


|J o A j3 o g H o

f la c e O r J e r ( )

8 ^ n Z t Z o K
fo r m ,
, ^ ^ fo r m
.
function placeOrder(form

if ( v a l i d a t e L e n g t h (1, 32, f o r m [" m e s s a g e " ], f o r m ["message _ h e l p "

v a l i d a t e Z I P C o d e ( f o r m [ " z i p c o d e " ] , f o r m [ " z i p c o d e _ h e l p " ] ) &&

v a l i d a t e N o n E m p t y ( f o r m [" d a t e " ], f o r m [" d a t e _ h e l p " )) &s
_
v a l i d a t e N o n E m p t y ( f o r m [" n a m e " ] , f o r m [ " n a m e _ h e l p " ] ) s&
' if/e ls e ,
v a l i d a t e N o n E m p t y ( f o r m [ " p h o n e " ], f o r m [" p h o n e ^ h e l p " ]) SS

v a l i d a t e N o n E m p t y ( f o r m [ " e m a i l " ] , f o r m [" e m a i l _ h e l p " ])) { .

//
5 ()
f o r m . s u b m i t ();

else { __ .

a l e r t (", ")

,
.

^
Bonj>oCbi
p l a c e O r d e r () 3 * ,
? ...

; i f / e l s e S
,
,
e l s e , ,
a l e r t ( ) . . Order Banner
, s u b m i t () .
fo r m , .
,
.
s u b m i t ( ) . submit
HTML.

336 7


,
,
.
, , - ...

Enter thedate for the message to be shown: |05/1o/2008

337


, ,
, ,
. . ,
,
.

-
// - ...

3 0 0 0 !

^ ,

. >
,8,,|,.5 ;.1 ,
. .
I
.
.
, ,
- ,
. .
, ,
.
:

, "2 0 0 8 "
. "05"
"1"

,
, . "05"
... .
,
, . "1 "

,
, !
, . "2008"

.

__
...
.
, 0
. - .

338 7


...
?

* 339
 ?

)
JavaScript ,
,
. ,
, ,
... , !

!
, ,

.
,
.
. .

340 7


,
= ##### ^
,
.

. .

!
. .

-
3492" " 5 2 80" "37205"

"0070" "741265"

. , .

, ,

. ,
- .
S .
/
. / '\< 5 }$ /
,


:
-^_
. , .

! .
...

, ,
.

.

341


}
,
,
(/ /).

,
, .
.
:

,
,
.
\
. .

, .
.

\< 1
,

.
. .

.

\w


. .
.

,
...

342 7


/ \ w /

-

,

/\d/<e .


. .

.
/\d /
? :

/cat$/ "2 n ite " !

.^

[ \ "c a t c h 2 2 "
c a t /\d\d$/
...
!
" 007"

.
1 ^ , .1
.
\ " / d /
/\d\d\d/ 1
' .

,

# # # # # - # # # # .

> 343


-

# # # # # - # # # # ,


-
-
. .
^

.

^
, -

i^ b ip e .


...
.
.

, ,
. , ,
/howard/ howard
. , ,
. .

{ }

.

.
.

.



.
.
.
.

------
,

- ^3. ()
,
.

344 7


.

, ,
.

:
.
{}


?!.

,
.

/ + / / ( H o t ) ? ? D o n u ts /
/ \ * /


- ... p o n u ts H o t $.
, - .
.

;
\w
.

-
$ .

,
\1 .

-I- .
*
.

^ 345


-
.

,
.

.

.

^
| : 1

? Q ; .
?
; , .
! . !
. . ,
,
. Bannerocity
, $ \ $ . ,
.
, .
, * +.
? JavaScript
, ?
0 ? , .
Ql 1\ ,
. !
, ? JavaScript
,
. .
.

346 7


1
:
,

Head First: Head First: , ,

. . ,
? , ?

: , - : .
, , , , ,
. , ,
... . ,
. . ,
, ,
Head First: ? .
: , .
. , .
, , , in d e x O f ()
, , , ,
. , .
Head First: i n d e x O f {) Head First:
S t r i n g ? ?
: :
, .
, , .
, , , ,
lam e, i n d e x O f () . . ,
, .
.
Head First:
Head First: ?
?
: .
: .

, - , .
,
Head First: ,
. .
.

. , : .
URL. ... ,
, .
.

* 347


1
test()


RegExp
, , ,
Bannerocity

. JavaScript
R e g E x p , t e s t {).
.
.

RegEx.
,
. -
,, .
var = /^\d{5}$/;

if (!regex test{inputField.-value))
/ !
te s t o
te s t() tr u e
V te s to .
5 , ,
. RegEx.

t e s t () ,
;
. v a l i d a t e R e g E x ().
:

,
.

; f a l s e .
validateRegEx(regex,
inputStr, helpText,
t r u e . helpssage) ;

.

, .

348 7


----------- --------- ------ ' hllpText, h e lpMessage) I , ,
fu n c t i o n validateRegEx(regex, xnputStr,

// ^ ^ ^ .
if 0 . e g e x . t e stt((ii n ppuut St bt rt r)n)
(iregex.tes .{ ^
// ,
if (helpText != null) ^

.
helpText. i n n e r H T M L = helpMessage;

r e t u r n false;
,
.

" / - '
if (helpText != null)
helpText. i n n e r H T M L =

r e t u r n true;
,
.
)

v a l i d a t e D a t e ( ) ,
Bannerocity
v a l i d a t e N o n E m p t y ( ) v a l i d a t e R e g E x ( ) . :

.

* 349


v a l i d a t e D a t e ( ) ,
Bannerocity

v a lid a t e N o n E m p t y ( ) v a l i d a t e N o n E m p t y ()
, v a l i d a t e R e g E x ().
.

function validateD ate(jn^utFieid, helpText) {

// ,

if (Jva(idateN onEm pty(inputFie!d, helpText))

.
/ / , \(

re tu rn va lid a teR eg E x (/'^\d iZ }V \d {Z }\/\d {4 -}$ /, inputField.vaiue, kelpText,

^ ", ^ ( ^^ / 75).");

/
, /
, .
.

,


Z 1 0 0 ?
2100 ...
,
, ,
. -
JavaScript 90
. Bannerocity
, , ,
,
.

350 7


: v a lid a t e N o n E m p t y ()
v a l i d a t e D a t e () ?
,
. ?
?
0:
; ,
,
I .
.
Bannerocity ,
. , , , .
,
. , .
, ,
. .
,
, .

.
//

} ) I
0 0|> 0 !
{} .
.
, ,
,
. ,
:
//
^

{ m i n ^ ]
-


min ,
, max .
-
,

{}.

v a l i d a t e D a t e ()
, ,
.

351


'^ v a l i d a t e D a t e ( ) ,
, .

{}



.

,

? ...

~

!

.
Ente the date for the message to be shown; [03/01/200 L



.

JavaScipt JavaScript
.
, R e g E x p ,

. .
,
t e s t {)
R e g E x p
.


.

352 7


...

.
. , ,
|,
. ,
.

\
.

.

/ s m a l l I m e d ii im | l a r g e /

/ ( r e d Ib lu e ) p ill/


' re d , .

blue pill.

* 353
 ?

.
IX '
v a l i d a t e D a t e ( ) ,
.

( )

6 ,
.

,
, .


Bannerocity: .

... ^
# 0
ganterocity - P ersonateed Online S ^ S w n e f ^
! 1
b a n n e r o c i t y

Enter th e b an n er m essag e: ^Vlandariga .. MecTa Mano!

Enter ZIP co d e of the tocatton: jl 0012 ________ __
Enter th e d ate for th e m ess a g e to b e show n: j 03/11 /200 ' m/14/1976}

Enter youf nam e; j

Enter your phone nym ber; j ___ _________ _____
Enter your em ail ad d ress; j
Order Banner

Done

-
,

.

,
.

354 7


?

, .
,
,
.
:

= # # # -# # # -# # # #

-
.
,
.
.
,
.


\1
{},

, ^
.

validateRegEx ()
validatePhone (),
, .

function validatePhone(inputField, helpText) {

// ,

if (!validateNonEmpty(inputField, helpText))

return false;

// ,

return validateRegEx(/''\d{3}-\d{3)-\d{4}$/,

inputField.vaiue, helpText,

", (, 123-456-7890).");

> 355
 . .?

, ,
.
Bannerocity. Zj 3 4
, -
. .

LocalName^DomainPrefix.DomainSuffix
.... _
-
, ,
.
, (0) .

. ,
&... ce~^^a

howard0bannerocity.com
sales@duncansdonuts.

}
puzzler0youcube.

.
. ,

.
/

/^ \w + (i\w + \ 2 41/
- - \ \ / //
. 2., 3
4 -
@ .

-
.
.
,

.


?
, .

356 7


,
.

.
:

lovers@youc\3be
cube

}
aviator.howard0bannerocity.com


.
\_
.

i-love-donuts@duncansdonuts.com


.
.
.
------------- X .