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


.
\_
.

[email protected]


.
.
.
------------- X .


seth+jason0mandam . u s
.

.
0 ..nz
/ftw

. .

, .
,
.
...

357


,
,
.
.

.

[ C h a r a c t e r C l a s s ]

.

.

, .
:

" "
/[] /

.
.

""

" $ 3 .50 "

"$ 5 " )
.
!

. " $ 19 .95"
,
,
.
(\), ,
,
: [ \ ^ $ . I ?*- {).

.

358 7


,
; . 1? -
.

LocalNameQDomainPrefix.DomainSuffix

, Z , 3 4
, , -

,
~.
. .

,
. .
. ,
,
.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
v a l i d a t e E m a i l ( ) ,
.

function validateEmail(inputField, helpText) {

// , ,

if (! (inputField, helpText))

return false;

// ,

return validateRegEx( ....................................... ,

inputField.vaiue, helpText,

);

> 359


validateEmail (),
.

function validateEmail(inputField, helpText) {

// ,


helpText))

return false; 1 - ,
.

validateN onEm ptyO -
// ,


'^turn validateRegEx ( -
,
inputField.vaiue, helpText,
4 .
.9!}!^.\ ( , Johndoe@ acme.com)."

,
, ,
-
, ., ,
.
.

)
,
Bannerocity ,
. ,
.


~
!

Enter the banner m essage: jl^ n d a n g o ...
Enter ZIP code of the tocatton; |10012
.
Enter the date tor the m essage to be shown: [03/11/21
Enter your name: jS eth Tinselnnan
Enter yoyr phone numtier: |2 1 2 ) 555-5339 e a s e enter a phone number (tor example, f 23-455-7890),
Enter your emalt address: jseth t@ m an d an g o rte e se enter an emeit address (for example, [email protected]).
Order Banner i

360 7


, 81 -?

. /
|> , ! <-

Mandango... ! > ... !

105012 100012

03/11/200 March 11, 2009

212-555-5339 (212) 555-5339

setht@mandango seth%t0mandango.us

/ ' " v a l ( l e y 1u e I k r i e ) / /n a m e I i d $ /

JavaScript
-,
- .

- . ?


%
HTML
DOM

- JavaScript
. ,
... , , .
Hr/WL-,
-, , , .
JavaScript HTML- -,
,
DOM.


,
4
,

JavaScript,

,
. , , .
,
1 2.

Your journey begins at a fork in the road.

Stick Fig ure Arfvem ure
00

...
.
VJelcOKG "to

STICK f m e

Clickeitlner
b u tto M "t
Sbri..

Please choose;

, -
.

...

364 8


-
,

. ://
. h ea d fm tia b s.c o m /b o o ks/kfjs/.
:
 ?

div
,
H T M L -.
,
<div>.

(. < body >
-
, ,
text-au g,:,en ter..>

Please choose:
-
^decisioni" Value="l" ,
"'^^^^'^-''changeScened) " />
ID <div> f2 " value="2" onoHov .. ^
_______ ___ _____ ________^ J oncJ.iok= ChangeScene (2)" />
?

-v_

1
, .
11 <div> oyJavaScipt
. ,
...

.
)
|>1 ,
i|
11
.

366 8


HTML-
g e t E l e m e n t B y l d
()
d o c u m e n t .
. id
H T M L - ...
HTML,
ID. div.

v a r sceneDesc = d o c u m e n t.g e tE le m e n tB y ld C 's c e n e te x t" )

\
div o c y -
,
id.
,
.
g e tE le m e n ts B y T a g N a m e (),
, d i v
img,
.
. , <>

v a r d iv s = docum ent.getElem entsB yTagN am e("div");

JavaScript,

^ . g e t E l e m e n t B y l d (),
g e tE le m e n ts B y T a g N a m e () .

<body>

<> ;</>

<img id="green" src="green.png" alt="" / x b r />

<img id="blue" sro="blue.png" 1="" / x b r />

<img id="yellow" src="yellow.png" 11="" / x b r />

<lmg id="orange" src="orange .png" 11="" / x b r />

<img id="red" src="red.png" 11="" />

</body>

g e t E l e m e n t B y l d {):,

g e tE le m e n ts B y T a g N a m e ():,

367


!,
.

]''
<body>

<p>Before starting, please choose an adventure stress level:</p>

<img id="green" src="green.png" alt="Relaxing" / x b r />

<img ld="blue" src=blue-png" alt="Irritating" / x b r />

<img id="yellow" src="yellow.png" alt="Frazzled" / x b r />

__ i d = " o r a n g e " s r c = " ' o r a n g e . p n g " a l t = " P a n l c ked^^~~7?y r />

<img id="red" src="red.png" alt="Maddening" />

</body>
,

3.

g e t E l e m e n t B y l d ( ) : ...... 4^f:'^jC (^.^nt.^etElem entByld[''oranQ e'')_

g e tE le m e n tsB y T a g N a m e ( ) : ......

innerHTML
H T M L
. H T M L -,
, d i v , .
innerHTML.

. < id = " s to r y " >

<strong>oflMH</at;rong> ,
__

innerHTML.

</>

J , innerH TM L

d o c u m e n t.g e tE le m e n tB y ld C 's to ry " ) .innerHTML -<r- ,
.

368 8


,

-,
.

innerHTML
.

, .

,
.

d o c u m e n t.g e tE le m e n tB y ld ( " s to ry " ) . innerHTML

" <strong>H6</strong> !";

UAU, 6
.

innerHTML. !



, ,
, innerHTML.
IP
<aiv>

"sceneText".
in n e r L - message

.
.

Stick f igure Adventure

, !

Youstandingon* bridgeoveriooking! steam.

Hcasechoose: _ lj _iJ

, < d iv >
innerHTML,
m e s s a g e
...

370 8


ripo

]|]= 1 1

< h tm l>
<head>
< title> npH K nra4eH M H 4 e n O B 0 4 K a< /title>

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

// ( )
var cu rS cen e = 0;

fu n c tio n c h an g e S c e n e (d ec isio n ) {
/ / message
var message = message
.

sw itch (cu rS cen e) {
case 0:
.
cu rS cen e = 1;
message = "yoar journey begins at a fork in the road.";
break;
case 1:
if (d e c isio n == 1) {
cu rS cen e = 2
message * "Tou have arrived at a cute little house in the woods.";

xo are standing on the br dge overlooking a peaceful stream.'

/ /
d o c u m e n t.g e tE le m e n tB y ld C 's c e n e im g " ) .s r c = "scene" + cu rS cen e + ".p n g ";

//
document.getElementByld("scenetext").innerHTMb = message;
-
< /sc rip t>
' message
< /h ead >

innerHTML.
<body>
< d iv s ty le = " m a rg in -to p :lO O p x ; t e x t - a l i g n : c e n te r " >
< im g i d = " s c e n e i m g " s r c = " s c e n e O .p n g " a l t = " S t i c k F i g u r e A d v en tu re" /x b r />
< d iv id = " sc en e te x t"> < /d iv x b r />
P le a se choose:
< in p u t ty p e = "b u tto n id = " d e c isio n l" v alu e = "l" o n c lic k = " c h a n g e S c e n e (1)" />
< in p u t ty p e = "b u tto n " id = " d e c isio n 2 " v a lu e = "2 " o n c lic k = " c h a n g e S c e n e (2)" />
< /d iv >
< /body>
< /h tm l>

> 371


^
Bonj=>oc;j,i

,
g e t E l e m e n t B y l d O innerHTML innerHTML?
? HTML-?

! innerHTML
Q ; , ! . HTML-
i d . - . .
innerHTML. innerHTML.
g e tE le m e n tB y ld ().
, d iv , s p an ,
. innerHTML.
, , :
e le m .in n e rH T M L += "
.

, N.
innerHTML . 1
? )

. ?
innerHTML Microsoft
Internet Explorer.
,

-.
, innerHTML
.
,
. ,
,
, .
D O M , (Document
Object Model). ,
JavaScript
-.

372 8


( )

-, , -
JavaScript. D O M ,

. ^
- , opupy^m ^*
. , , -
;.

<html>

<headX/head>

<body>

< id=" story" >

< s t r o n g > o H H < / s t r o n g >

</>

</body>

</html>

DOM

.
,
<> ,

.

<strong>.

* 373


D O M . DOM

element text. .
document
ELEMENT
,
H T M L -,
H T M L -.
html.
TEXT ATTRIBUTE
.


,
,

element.
element-.
DOCUMENT
, ,
Document
. , , i
TEXT ELEMENT
( ).
E LE M E N T
<html>
html
<headx/head>

<> ^
^

,
. elem ent
ELEM ENT
7 E LE M E N T

J
body head
<strong>o</stro3>
.
</>

</body>

TEXT

TEXT
TEX T
" " Jl strongl "b ."

8
ELEM ENT TEX T head ,

'" .

374 8


* 375


-|^

.

</head>

<body>

tevt

s.
<dxv ^d=..scenetexf></di.xb, />

Please choose:
DOCUMENT
S<input type="button" ld=..decislonr' v a l u e - l " ,
^ ^^^^'=''"=hangeScene(ll " /> D ocum ent
< W tvpe=..btton.. id-..decisio2.. vale=..2~ on . .
</div>^\^ "=li=''-'t:hangescene(2)" />

element j

html

, head
. -
ELEMENT
text.

r ELEMENT

- J
TEXT

im g g 1,^ I I I

TEXT TEXT
elem ent E ^ M ^ t te x t
ELEMENT elem ent

376 8


CBoucmBa
D O M
d o c u m e n t,
. , g e t E l e m e n t B y l d ()
g e tE le m e n ts B y T a g N a m e (), .

.
; .

.
DOM
11 node
,
, DOCUMENT TEXT,
. .

11 firstChild lastChild
, ;
. .
.

; nodeValue
. ,

.
g e t E l e m e n t B y l d ().
a l e r t ( d o c u m e n t . g e tE le m e n tB y ld (" s c e n e t e x t " ) .n o d e V a lu e );

nodeValue .

.

, ,
d i v
. ; ,
.

376.
, .

document.getElementsByTagName("body")[0].childNodes[1].lastChild

> 377


------- '
dociiment.getElementsByTagName("body")[0].childNodes[1].lastChild
.

div

.

getE lem entsB yldQ

^^^^
IP-

,
<lnput>.
!

g e t E l e m e n t B y l d () ,
g e tE le m e n tsB y T a g N a m e () JavaScript,
DOM? g e tE le m e n ts B y T a g N a m e ()
" i m g " , .
Q ; , v i s i b i l i t y CSS
, . , DOM
g e t E l e m e n t B y l d () CSS .
. , , g e tE le m e n ts B y T a g N a m e ()
g e t E l e m e n t B y l d (),
,
.
g e tE lem en tB y T ag N am e ().

378 8


...

? _______ /

D O M
- .
D O M -
,
. , div, span
, .
,
H TML, ,
. :

d o cu m e n t.g e tE le m e n tB y ld (" s t o r y " ) . f i r s t C h i I d . nodeValue

DOM
?

> 379


, ,
,
nodeValue. ,
.
d o c u m e n t . g e t E l e m e n t B y ld C 's t o r y " ) . f i r s t C h il d . n o d e V a l u e = "OK, .";

LEMENT

. TEXT

", , .
.
, ,
?

< id = "sto rY ">

LEMENT
< stro n g > e < /s tro n g > .

</>


TEXT ELEMENT
TEXT

"" strong I ".'

. j

TEXT



. .

, :

d o c u m e n t . g e t E l e m e n t B y I d ( " s t o r y " ) .f i r s t C h i ld . n o d e V a l u e = "OK, .";

, )^ ^ .

,
...

380 8


, ,
. ,
, ,
.

^ .

,

.
createTextNode()

appendChild()
.

. ,
,
, , .
' () IP-

v a r node = docum ent. g e tE le m e n tB y ld (" s t o r y " );

,
w h ile (node. f i r s t C h i l d ) --------- .
n o d e . rem o ve C h ild (n o d e. f i r s t C h i l d ) ;
n o d e . app en dC hild(d ocum ent. c r e a te T e x tN o d e ("OK, . " ) ) ;

0 4 O K
J ^
^ & ,


( , ,
.

381
DOM

:
,

Head First: , Head First: ?

D O M , ?
H T M L -. ?
: , .
: , , ,
, D O M < d i v > <sp an > .
.
, D O M , , .
... ,
! . , ,
< d iv > ,
Head First: ?
,

d iv .
?
Head First:
: ,
?

. : , D O M
.
Head First:
, :
- ?
ELEMENT,
- ,
TEXT.
, .
Head First:
: D O M

,
TEXT?
. D O M
. : . ,
no d e T y p e .
Head First: ? , ,
, TEXT 3,
, - ?
ELEMENT 1. ,
: . , ,
.
.
Head First: ! ?
Head First: . ,
: ,

?
DOM.
.
. : . -
D O M .
, .

382 8



!

, pElem .childN odes[z] Ql :

. 1

, while(node.firstChild)
childNodes? -^ -J L _ ^ ,
^ -
Strong
,
1 , ,
0 =' true,
. ,
strong
.
, ,
, -
," <
. .
. p E iem .ckM N o d e.s[0] node.firstChild
null,
childNodes false.

. .
.

.


:
while,
childNodes [ ] . ?

JavaScript
-
. , ,
. .

/ /
= d o c u m en t.g etE lem en tB y ld ("
Vo.]-

)
w h ile (
(
(document. c re a te T e x tN o d e ( ));

383


, .

,
, message
, .

IP. >^ ,

. .

sceneTexI = d o c u m e n t . g e t E l e m e ^ ^ I d C

sceneText firstChild
w h ile (
I i
sceneText
sceneText
I removeChild (
F
^ ^ ^ ^ p ^ ^ K h i W j ^ d o c u m e n t . createT extN o de {

- -
. ,
-
,
) 00020

.

.

innerHTML, , DOM -
. .
, DOM, DOM

. ,
.

384 8


,
!
. ? -
;. , D O M
...

DOM

, , ,
D O M ,
-. HTML,
JavaScript .
, , , innerHTML.
.

> 385


, .
,
)' 1 2!

,
Pleasechoose; I -
.

,

,
.

,

. ,

, :

B rU ge G a ise h te Stream

! ^ _

.

HTML,
.
CSS.

386 8


, ^

H T M L -, ,
DOM.

, . , changeScene ()

. decisionl decision2.
changeScene ()
1 3:

curScene = 3;
message = "You 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 lo o k in g a p e a c e f u l stre a m ,

d e c i s i o n l = "Walk a c r o s s b r i d g e " ;

d e c is i o n 2 = "Gaze i n t o s tre a m " ;
^
decision!
decisionZ-

.
, <input>.

; CSS- decision.
Start Game
( ).

Pksiscchoose;

:"'12'.'. '>
,

I!
SttrttSere

k 387


- ^
'
, ,
< in p u t > :

Please choose: I j 2

<lnput type="button" id="declsionl" v a l u e - n - onclick="changeSce.ie (1) " />

<inpt tffe="button" id-"decision2" value="2" onclick="c:hangeScene(2) />

span.
Stan Game
I

I

?

U

, ,
span.

D OM . , -

: ...

388 8


, ^
, ,
.
.
:
, ,

.
f u n c t i o n re p la c e N o d e T e x t(id , newText) {

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

. .

~ ' .
- ^ r e p la c e N o d e T e x t ( " s c e n e t e x t " , m e ss a g e );

- r e p la c e H o d e T e x t ( " d e c is i o n l " , d e c i s i o n l )

re p la c e N o d e T e x t( " d e c is io n 2 " , d e c is io n 2 )
).
.


^!
r e p la c e N o d e T e x t {),
ID.

ID.

function replaceNodeText(id, new Text) {

var node = docum ent.getElem ent8yld(id)-,

.
while (node.firstChild)

node.removeChild(node. firstChild);

node.appendC hild(docum ent.createTextN ode(new Text));

, }


createTextNodeQ

. d o cu m en t
.

,
-
( , -
/ , -

390 8


'^
!

d i v ,
c r e a t e T e x t N o d e ( ) ? c r e a t e T e x t N o d e ( )
s p a n ? ?
Q ; .
; ! .
, , in n e r H T M L
DOM. . DOM
, d i v . ,
, ,
span. . .

;,
. ,
,

, , ,.
.

W alk a r o m d Back Knock on D oor

J
,

CSS, DOM.

C SS,
D O M .
-
CSS,
. D O M
CSS- ...

391


: C SS DOM
CSS- H T M L -, D O M
().
D O M CSS-
.
styl^.

<span i d = " d e c i s i o n l " c l a s s = " d e c i s i o n " o n c lic k = " c h a n g e S c e n e ( 1 ) " > S t a r t Game</span>
<span i d = " d e c i s i o n 2 " c l a s s = " d e c i s i o n " o n c lic k = " c h a n g e S c e n e ( 2 ) "></span>

< s ty le ty p e = " te x t/c s s >

sp an .d ecisio n {

fo n t-w eig h t:b o ld ;

b o r d e r : t h i n s o l i d # 000000;
style.
p a d d i n g : 5px;

b a c k g r o u n d - c o l o r : #DDDDDD;
I
)
< /sty le >

D O M t o
className .
I
CSS
a l e r t ( d o c u m e n t . g e t E l e m e n t B y l d ( " d e c i s i o n l " ) .c l a s s N a m e ) ; ^ !

JavaScript.
className
CSS
. JavaScript

. CSS
decision
,

,
JavaScript

className .


10.
.
392 8


dec\oniv\verse
, -

. .

d o c u m e n t.g e tE le m e n tB y ld C 'd e c is io n l" ).c la s s N a m e = " d e c i s i o n i n v e r s e " ;

<style type="text/css">
!
span.decisioninverse {

font-weight.
-bold,

font-color;#FFFFFF;
, className.
border:thin solid #DDDDDD;

padding:5px;

Start Game background-color:#000000;

)

className </style>

.

,
.

< s p a n > ,
o n m o u s e o v e r 1
.
: ,
, d e c i s i o n h o v e r .

< i d = " d e c i s i o n l " c l a s s = " d e c i s i o n " 11="(1)"

> S t a r t Game</span>

<span i d = " d e c i s i o n 2 " c l a s s = " d e c i s i o n " o n click = "ch an geS cen e (2)"

></span>

393


< > ,
o n m o u s e o v e r o n m o u s e o u t
declsionkover .

onmouseover.

<span i d = " d e c i s i o n l " c l a s s = " d e c i s i o n " o n c lic k = " c h a n g e S c e n e (1)"

^^^~^onm ouseover= "tkis.classN am e - 'decisionhover'"

e m n u Z f^ n p u ............... > S t a r t Game</span>

- <span i d = " d e c i s i o n 2 " c l a s s = " d e c i s i o n " o n click = "ch an qeS cen e (2)"

>c9,'^,^omeoYer=4his.className - 'decisionkover'"
span.
o nm ouseout-4kis.classN am e - 'decision'" ></span>

,
span. .
o n m ouseout
| 1

,
, CSS?

0 ! .
, CSS
, JavaScript.

, JavaScript,
: CSS. ,
.
.
<style type="text/css">

span.decision { <style type="text/css">

font-weight:bold; span.decisionhover {

border;thin solid #000000;
font-weight;bold;

padding:5px; . border:thin solid #000000;

background-color:#DDDDDD; 41 padding;5px;

} background-color:#EEEEEE;

</style>

</style>

WaBt around Back Knock on Door

394 8


)
]
D O M
! 1
. .
Stick
.

M&p

Y have m ived hfosefn * / d s.

I '

-


-
.
"^
BoiiJ^oCbi

^ 1
o n m o u s e o v e r o n m o u s e o u t.
: '
|
6i
,

? g e t E l e m e n t B y l d {) ?
. ?

Q ; , 0;; JavaScript 0:; !

JavaScript, , HTML-
.
. ,
t h i s .
,
JavaScript DOIV!
, .
...
span.
, ,
classN am e
, .
.
t h i s . c la s s N a m e .

395


,
.
,
, . - ,
,
, .


stick Figure feJvervture
.
0 .

VJelcONVe {

STICK FIGURE
ADVENTURE

? ?

396 8


style
style
. ,
, style.
style
. , visibility .
. -
:

<span i d = " d e c i s i o n 2 " c l a s s = " d e c i s i o n " o n c lic k = " c h a n g e S c e n e (2)"

onmouseover=t h i s . className = 'd e c i s i o n h o v e r '"
o n m o u s e o u t= " th is . className = ' d e c i s i o n ' "
s t y l e = v i s i b i l i t y : hidden'*>< / span>

,
visibility visible hidden .
:
d o c u m e n t . g e t E l e m e n t B y I d ( " d e c i s i o n 2 " ) .s t y l e .visibility = "visible";

d o c u m e n t . g e t E l e m e n t B y I d { " d e c i s i o n 2 " ) .s t y l e .visibility = "hidden"; ^

Start Game

ix . ,
.
.

397


,

.

Start Game
__^
.
.,
. ^

.

^ ,
.

/ f y^^c m 6 em c
case 7:
5 . if (decision == 1) {
curScene = 6 , V
message = "Sorry, you became the troll's tasty lunch.
decisionl = "Start Over";
decision2 =

//
d o c u m e n t . g e t E l e m e n t B y l d ( " d e c l s i o n 2 " ) .s t y l e . v i s i b i l i t y

else {
curScene = 9;
decisionl =
decision2 =
}
break;

398 8


className

.
visibility .
style
.
display.
CSS , ,
JavaScript . block,
, .

D O M

.
, .

..
PtgureAdventare

_______________
( ...
WelcOhAG to ^
\ !

ST IC K FIGURE

,

,
.

> 399
 ,

)

,
DOM.

<<>> = !

. ,
k t t p : / / w w w .kea d firstla b s.co m /b o o ks/h ijs/.

400 8


...

<
?

.



,

, .

.

> 401


.

.
, .
,
, .

.
.

1 .

...
2 .

3 . -

4.
8 .


11-
_
,
. ?

402 8


HTML
H T M L

: d i v ,

.
.
<div i d = " h is t o r y " >
<p>Decision 1 -> 1 .</

<p>Decision 1 -> 2 .< / >

<p>Decision 1 -> 3 .</>

</div>

K O A ja v a S c r ip t, D O M
.

(



?
.
D O M H T M L -.
, .

c r e a t e E l e m e n t (). ,
,
c r e a t e T e x t N o d e ().
.

div I
document.createElement("");

ELEMENT
docviment.createTextNode (" .. . ") ;
Vs____
TEXT

"Decisxon 1 -> 1 : . |
mp

> 403


-ft-

HTML- DOM,
c r e a t e E le m e n t
d o c u m e n t. .

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

f u n c t i o n c h a n g e S c e n e (d e c is io n ) {

/ /

* 405


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

changeSceneQ
.
decision,

.
f u n c t i o n c h a n g e S c e n e (d e c isio n ) {


.
/ / _^

var history = d o cu m en tg etE !em en tB yfd ("h isto ry);

if (curScene != ) {

var

" + decision

........' 1 . 7 . ^ , [[.t.9!^^.ccne + "....t.

^ history.appendChi!d(decisionElem);

}

eise (

div.
//

while (history.firstChild)_

,

. .

406 8


)

.

------

VJelcoweto

STICK FIGURE
adventure
/->4 Vour journey begha at a f a t in ee io 3.
J [ffce tt e ftw H j [ T . t o l l m % > |

DedsiM b > S e e * t ; Y a jOBrtcy * f t r t m the 1 1

I ,
,

.

,

.

.
V

I t o 1 Sfc, * ^ ^

* 407


, ...
,

,
, .
...

...
!

408 8


, , DOM?

.
--------- \% ! |>, ! <:-----

D o cum ent I.

JavaScript
DOM.

HTML-,
.


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

JavaScript
.
. ?

?
? ?
(^^^^

.

! . !

JavaScript ,
, .
, ,
.
?
!
?

Youre invited to.

A Puzzle Party!
!
October 24th ^
Date: Puzzler Ruby
2112 Confounding Street
Location: 5280 Unravel Avenue
95099
? Conundrum, AZ 85399
USA

? !

;
, .

412 9


+ =
581
. ,
, ,
.

JavaScript, :

var who; function display(what, when, where) { function display!) {

var what;

var when; function deliver 0 {

var where;

invitation
. ,
,
, .

,
.
,
.

> 413


. ,
. - ,
,
.

*^

.
, ,
.
, .

/

. "
. /
. .

414 9


, .
<<>>
, , ,
, .

, .
invitation.
:

.
.

i n v i t a t i o n . who = " P u z z le r Ruby";

i n v i t a t i o n . w h a t = "A p u z z le p a r t y ! " ;

i n v i t a t i o n . w h e n = "O ctober 2 4 th " ;

i n v i t a t i o n . w h e r e = "2112 Confounding S t r e e t " ;

da&m
.

, ,
,
.
invitation :
i n v i t a t i o n . d e l i v e r ();

. .
.

, ,
. , r s v p ,
1 { ) , .

> 415


r s v p ,
.
|''

invitation.rsvp^ = "attending"^

invitationsendRSVPQ ;

"
" .
tru e
invitation. ,,
false .

1

!
? ,
- ? JavaScript alert().

! . ,
. , 3 ' .
, . , ,
. , ?
,
. . ; ,
. .
, ,
,
- , .
. , ( ). 1\ ,

. ,
object. .
.
JavaScript. ? , alert {)
,
Q ; , ,
JavaScript, . ,
? . ,
.
S . , . , alert ()
,
. , ,
window,
, window . alert () .

alert () .
,
window
.


. ,
.

416 9


,
. , .

, , - , -
. .

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

,

. ,
!

, JavaScript
,
. ,
,
.
-
YouCube, .

-
!
YouCube

> 417
 -

YouCube
. , YouCube,
, , ,
JavaScript. .
!

0 8 /1 4 /2 0 0 8
Q ot th e n e w I o r d e re d . I t s a reaC
jje a r C

0 8 /1 9 /2 0 0 8
S o C v e d th e n e w cuB e B u t o f co u rs e , n o w I m
B o r e d a n d s fio p p in g f o r a n e w one.

Aam a
'
0 8 /1 6 /2 0 0 8
^ M a n a g e d t o g e t a h e a d a c h e toiCing o v e r
th e n e w cuBe.
. g o t t a najy.

0 8 /2 1 /2 0 0 8
f o u n d a 7x 7^7 cuBe f o r saCe onCme. y ik e s!
T h a t one couCd Be a Beast.

( + )
. ,
JavaScript,
.
+ = Blog .

418 9


JavaScript , !
. , ,
, .
YouCube.

JavaScript. , .

_
,


.

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

> 419
:

,
.
, .


, .
.
.

.

/-

function displayO

function deliver { Iitatl.n(w ho, w b a t, w hen, w here);

.

I.
.
^
Invitation

.....
who = "Somebody";

what = "Something"; var who = "Somebody";

var what = "Something ,

when = "Sometime";

where = "Somewhere"; var when = "Sometime ,

var where = "Somewhere

new.
. ,

. ,
new.

n ew
.
v a r i n v i t a t i o n = new Invitation("Somebody", "Som ething", "Sometime", "Somewhere");

^ - ^
-
. . .

420 9


. this.
.

, ,
.

,

this function Invitation (who. what, when, where) { .
.
this.who = who;
.
this.what = what;
this.when = when;

this.where = where; .

}


,
.


this.
,
.
,
, .
this.


Blog,
.


.function B!og(bodij, date.) {
5 - ...................... ......
. ,, . , , , , ^
......^.'...^..7...9.4!^.... . ~~~~- -
^ tkis.dau = ................

}
this


.
.

blog
Blog ,
. , 6 .
, .
, ,
new, ,
. ^

, 0 8 /1 4 /2 0 0 8
g o t the n e w cu b e I o rd e re d . I t s
log. n tt p : / / w w w .headfirstlabs.com / a reatpe^dT^'
books/hfjs/.

v a r b lo g E n try = new BlogC'G ot th e new cube I o r d e r e d . . . " , " 0 8 /1 4 /2 0 0 8 " );

-

log().

422 9


,
n e w ?

,
t h i s ?

, Q l ,
. . ,
; ! n e w
. ,

. , . ,
.


- , - .
n e w
, , !
.
.

. , ,
n e w .
!
. t h i s

? , . .
t h i s . d a t e ,
S. d a t e
, , .
,
. ,
.

B l o g b l o g ,

YouCube. ,
.
08/14/2008 ^ ^ r*v
got tfie new cuBe. I ordered. I t s
a reaCpearC.

08/19/2008
SoCved the new cube but ot
course, now I m bored and
sfiofrping f o r a new one.

08/16/2008
ManagecC to get a fieacCache
toiCing o v e r new cube,
gotta nap.

08/21/2008
fo u n d a f o r sale
7 x 7 x 7

onCtne. yi^es! That one could be

a 0east.

* 423


rv Blog
blog,
YouCube.
08/14/2008 ^
got the new cube I ordered. It
va r blog =
a reaCpearC. ^
^ ordered...", "OS/X4-/ZOOS"),
08/19/2008
SoCvedthe new h u t o f BlogC'Solved the new cube b u t of course...", " 0 8 /1 9 /Z 0 0 8 " ) ,
course, now I vored and
shopping f o r a new one. ^ new B io g f Managed to g e t a headache toiiing...", " 0 S /1 & /Z 0 0 8 " ),

* 08/16/2008 new BlogC'Found a 7x7x7 cube for sale...", " 0 8 / Z t /Z 0 0 8 " )

M a n a a e d to get a headache
toiCing o v e r the new cube, ............................ ]i..............
gotta nap. -
Blog,
08/21/2008
f o u n d a 7X 7X 7^u6e f o r sale , .
onCine. yike s! That one could be
a beast.

,
YouCube 1.0
Blog,
Blog JavaScript,
YouCube.
,
YouCube. ,
, . ^ ^ YeuCabe - The fe*" Cube Pi
YouCube - The Blog for Cube Putilers

,
Blog

.
b e I o r i e t e d .I t 's a lpe^l

& S new cube bu. coursenow

of . and tor a M w one

get a headaehe toBtag over 1 new cube. G o nap.

f t * ^ x 7x 7 cube tor sale o n ta e . Ylkesl That one couM be a beast.

_ 5h w A ! l o g E n tfi 1

, Blog
YouCube 1.0 ...

424 9


HJ>o

<html>
<head>
<title>Y ouC ube - The Blog f o r Cube P u z z l e r s < / t i t l e >
< s c rip t ty p e = "te x t/ja v a sc rip t">
11 Blog 1() -
f u n c t i o n B log(body, d a te ) { .
/ / A ssign t h e p r o p e r t i e s ^
t h i s . b o d y = body;
t h i s . d a t e = d ate;
} log.
/ /
v a r b lo g = [ new BlogC'G ot t h e new cube I o r d e r e d . . " , " 0 8 /1 4 /2 0 0 8 " ),
new B lo g ("S o lv ed t h e new cube b u t o f c o u r s e . . . " , " 0 8 /1 9 /2 0 0 8 " ),
show BlogQ new Blog("Managed t o g e t a headache t o i l i n g . . . " , " 0 8 /1 6 /2 0 0 8 " ),
new B log("Found a 7x7x7 cube f o r s a l e o n l i n e . . . " , "08/21/2008") ];
, div.^

func;b<^n showBlog (numEntries) {

f ( ! num Entries)
num Entries = b l o g . l e n g t h ;
~~ ---------
/ / ,
v a r 1 = 0 , b lo g T ex t = ""; .
w h ile (1 < b l o g . l e n g t h && i < num Entries) {
/ /
i f ( i % 2 == 0)
----- b lo g T ex t += "< s t y l e = 'b a c k g r o u n d - c o l o r :#'>";
e lse __________
b lo g T ex t += "<>"; , .
/ / HTML-
b lo g T ex t += " < strong > " + b l o g [ i ] . d a t e + " < / s t r o n g X b r />" + b l o g [ i ] . b o d y + "</p>'

++;
}

11 HTML- -
docum ent.getElem entB yld("blog")-innerH TM L = b lo g T e x t; div.

< /scrip t>

</head>

<body onload="show B log(5) ; "> div
<h3>YouCube - The Blog f o r Cube P u z z le rs < /h 3 > .
<img s rc = "c u b e .p n g " alt="YouCube" />
<div
4 Q1V ii d
a== "iJ-LUy
b l o g ^" Vx//Ud- Li vV x>'
< in p u t ty p e = " b u tto n " id = " sh o w a ll" value="Show A l l Blog E n t r i e s " o nclick = "sh o w B lo g ( ) ; " />
</body> ^
</htm l>
~

.

425


^
B o T lp o C j, !

YouCube Show B l o g
Blog Entries? innerHTML ?
DOM?
Q ; Q ; . ,
. 0 1 DOM ,
. ,
-, B lo g
, . .
. HTML-
. < > ,
.
< s t r o n g > B lo g
.
. .
Show Blog Entries
innerHTML
.
YouCube.

Y o u C u b e 1.0 ,
. ,
, ,
.
.

,
^ for Cub,

viCube - The Blog for Cube Pu^alers ^
.
!

'140008
Got t e new cube I ordered. Its a rca} peail.


s/imom


.
8 /21/2008
Found a 7x7x7 cube for sale oniine xu
That one could be a beast.
Show A 3loaEnMc I
Done

426 9


b l o g . Jav aS crip t
, , ,
.
,
Blog

.

' 1
B lo g .

, .

, ,
,
.

! ,
,
?

------

.
,
.
0 8 / 1 4 / 2 0 0 8 0 8 / 1 9 / 2 0 0 8 ,
. , ,
, , ,
.
, ,
.
 ?

gam
,
. ,
. -
! , Jav aS crip t ; 5.
D a te , .

^

.
.

Date D a te ,
,
Jav aS cript. ,
. D a te
. .

D a te , B lo g ,
new. ,
.
-
p a te var now = new DateO;
.
P a te
. '
/ .
P a te
new .

D a te
Date . ,
,
. D a te .
, . ,
D a te Y ouC ube:

j- v a r blo gD ate = new D a t e ( " 0 8 /1 4 /2 0 0 8 " ) ;

.

428 9


. , ,
.
,
, .
D a te . ,
: -

,
,
D a te.
!

function getDaysBetween(datel, date2) {

var daysBetween = <date2 - datel) / (1000 * 60 * 60 * 24);

return Math, round (daysBetween) ;

} ,

!
... ro u n d Q
!,

.
,
D a te ,
.
.
,
getDaysBetween(datel, date2);
.

,
.

D a te YouCube.
g e t D a y s B e t w e e n () ,
, .

> 429


JjfeV g e t D a y s B e t w e e n ()
,

?

P a te
.

9 3 . .^ .. .

var^ bJoP ateZ ,~ n ew _ P a t e ( " 0 8 / 1 <R/Z008");

.^.y..t. 0 f :'tp ^ y s e tw e e n (h lo g P a te l, blogP ateZ ) + " days.");

( a e m
I
- J
The dates are separated by S days. P a te


f~ 0 iT 3
.

gam
D a te ,
, B l o g
. ,
, D a te ,
.

d a te
Blog
Got the new
cube I ordered.
Its a real pearl." P a te .

"08/ 14/ 2008"

, d a t e B lo g
D a te ?

430 9


,
. B lo g
, , , S t r i n g .
,
, . D a te
new. S trin g .

d a te D a te ,
new, Blog
B lo g . n ew .
, .

iiC.------
v a r b lo g E n try = new Blog("N othing going on b u t t h e w e a t h e r . " .

new D a t e ; 1 0 /3 1 /2 ,0 0 8 "));
D a te

V
'
n ew .
, Y o u C u b e
,
( S t r i n g D a te ). ,
B lo g . new

b o d y.
.

d ate.

B lo g
, D a te .
.

431


' B l o g
, D a te .


Blog.

. ?.^.{93... . [ Blp.e(,. 9 p . t . t h f . 9.4'^.. ! . . ne w i ^ a t e ( " 0 8 / ^ 4 / 2 0 0 8")),

b u t o f co u rse..., n e w D a te ( " O S /l /Z O O 8")),

^ h e a d a c h e toiling...", n e w D a te ( " 0 8 / 1 6 /Z 0 0 8 " ) ) ,

n e w BlogCFound a 7 x 7 x 7 cu be fo r sale...", n e w D a te ( " 0 8 /Z X /Z 0 0 8 " ) ) ]

......................................... ........................
J
/
-B lo g
Date.
.
_

^
' !

D a t e
,
?

1,218,702,551,000 . , , !
! , -, D a t e .
.
Pause, .
, , D a te ?
. 1
1970 .
38 , 8 , 14 , 3 , Q ; . D a t e
29 11 . , ,
. , . ,
. ,
.

D a t e D a t e
, .
.
D a t e
. s t r i n g D a t e
ne w .

432 9


d a t e B lo g D a te ,
.

. ,
/
, ,

. ,
D a te ! !

YouCube - The for C ube ^uzziers

YouCube - The Blog for Cube Pim lm

-----
Thu Aeg 14 7
Got new cttbe I orfcKd. It s a peari. Date
,
I .
. ,

.

Found a

Show All BtoaEntries

Done

-
.
,
!

Y o u C u b e,
.

D a te . JavaS cript?

> 433


8
, .
, Jav aS crip t,
, - !
: Jav aS crip t
t o S t r i n g ( ) , .
t o S t r i n g ()
D a te .

v a r blogD ate = new D a t e (" 0 8 /1 4 /2 0 0 8 " );

Thu Atig 14 2008 00-00:00 CMT-0500 <COT)
a lert(b lo g D ate.to S tr in g {

, t o S t r i n g ()
, . , to S trin q O
,
, :
P a te
.
a lert(b lo g D ate);

to S trin g O

,

.

a l e r t ()
, D a te ,
toString () .
t o S t r i n g ().
t o S t r i n g ( ) ,
. , MISl/ /
. Y o u C u b e
.

434 9


.
,
, .
. , D a te
. .

>
3- 3 1 .
J

-
(6 4
).

, -
D a te | I
, , - ]1! Date.
;
getMonthQ
.

.
() 11 (),
getDateQ
1 31.

YouCube,
,
b lo g T e x t . ,
//. :

blogText += "<strong>" + blog[i].date + "</strongXbr />" + blog[i].body + "</p>";

> 435


- ^
,

o g T e x t.

b lo g T e x t + - "< s tro n g > " + b l o g [ i ] . d a t e + " < / s t r o n g X b r /> " + b l o g [ i] . b o d y + "< /p > "

. .t.T. "M r.o n e? ". r. .t. i .) .+ +-

h logliJ.date.getF u llY earQ + " < /s tr o n g x b r /> "

- b lo g [ i] .b o a y + "< /p y "-,

-
D a te -
. D a te - /
. / .

, D a te ,
,
. ,
, ,
, .
; :

,
D a t e , -
. ^
.

B l o g .

, .

D a te ,
, ,
.
, , ,
, .
, ...

436 9


,
JavaScipt

...

* 437


, ?
, ,
. -
,
. ,
. M an d an g o ? 1
f o r (var i = 0; i < s e a t s . l e n g t h ; 1++) {

le n g th

'
se a ts .
.

, . ,
?
l e n g t h , .
s o r t ( ) , . ,
.

nums

(
.

s o r t () .
,
nums :

438


copmupoBka
s o r t ()
A r r a y . ,
,
s o r t ( ) . ,
, .
:
-
f u n c t i o n compare (X, ) { ,

r e t u r n X - ; .

,


.

c o m p a re () ,
<
X
X .

,

.
__ > 0
.

c o m p a re ()
s o r t ()
.

-
nums. s o r t (compare) ;
-

c o m p a re ( ) ,
YouCube
. : B lo g
.

> 439


c o m p a re ( ) ,
YouCube
.

.f u n c t i o n c p m p a r e j^ h iq g x

r e t u r n h lo g Z .d a t e - b lo g t . d a t e ;

B lo g , }
1\ ........
HWX ( ^ .

( )
. -^^).

s o r t (). ,
.

,
6? c o m p a re ()
. ,
, ,
s o r t ().

. s o r t ( f u n c t io n ( b l o g l , 2) {
' s o r tQ
.
r e tu r n b lo g 2 .d a te - b lo g l.d a te ;

}) ;

.
.
s o r t ().

. ,

. .
, .
- ' J
b l o g . s o r t ( f u n c t i o n ( b l o g l , 2) { r e tu r n b lo g 2 .d a te - b lo g l.d a te ;

440 9


<
!

3 A r r a y . s o r t ( )
t o S t r i n g () ? D a te objects? ,

?
; . ;
, ,
. ; ,
t o S t r i n g ( ) , JavaScript
, s o r t ( )
. .

, .
, .


.
,
.

, (
t o S t r i n g ( ) ,
0). .
.

Y o u C u b e

.
0 0 b ^ h e jlo g ^ _______ _____
T o u C u b c - The Btog for Cube P u lle rs
,
!

m io m ^ YikesS That one could be a beast.

Found a 7x7x7 cube for sate

8Solved
/19/2008
fee new cube but of couise
Im bored and shopping for a new one.

get a headacte ilfflg over new cubc. Gotta nap.

Got (he new cube I oidcnd. It's a red pearl.

Show Ail 09 Entries

Done ________

- /
. .

* 441


,
, .
, ,
,
.



Search the j 7x7x7

Y ouC ube... ?

442 9


Y o u C u b e
.

,
? ... ,

, !

.

YouCube ?

* 443


,
. ,
?

, .
, , Jav aS crip t
.

.

.

G o t th e n e w

c u b e 1 o rd e re d .

It s a re a l .
p e a rl."

.

8


.

444 9


indexOfO
in d e x O f () S t r i n g
.
S t r i n g ,
. i n d e x O f ( ) ,
, -1 ,
.
v a r s t r = "Got th e new cube I o r d e r e d . I t ' s a r e a l p e a r l . " ;

a l e r t ( s t r . i n d e x O f ( " n e w " ) );

, 8,
.

10 20 30 40
, , , , , , , , , I Ml 1111 m i l l I i l l i l l 11111 i 11 i I I I
"Got the new I ordered. It's a real pearl."

n e w n o - -
~
8. .
,
-
, in d e x O f () -1 . .
I ,
v a r s e a r c h ln d e x = s t r . i n d e x O f ( " u s e d " ) ; /^ < ^ ^ J < KaK
^ 6 S t r in g .

. -
^ | (
^ cube .

.
?

* 445


__ c u b e .
13 22 ^ . ?.

"A cubist cubed two cubes and ended up with eight. Was she Cuban?"

^
.
V _

in d e x O f ()
, .

i n d e x O f ( ) .
.

, ,
, , .

< i n p u t t y p e = " b u t to n " i d = " s e a r c h " v a l u e = " S e a r c h t h e B log" o n c l i c k = " s e a r c h B l o g ( ) />

< i n p u t t y p e = " t e x t " i d = " s e a r c h t e x t " n a m e = " s e a r c h te x t" v a lu e = " " />

$ ()
!
-
IP se a rc h te x t. .
Search the Blog ||7x7x7

, - ,
( ) .
,
.
,
, .

446 9


JavaScript
1 ()
,
. ,
. :
//,
.

function searchBlogO {
" ) .value;
= d o c u m e n t . g e t E l e m e n t B y l d ("
var

; i ++) {
for (var 1 = 0 ; i <

// ,

.toLowerCase 0
if (blog[i].

a l e r t e [" + (blog[i]

, 1 1 .....................* "l " ^

blog[i] . ) '

break;

}
}

// ,

if (i = =
containing the search text. ),
alert("Sorry, there are no blog entries

date
searchText

searchtext
getMonthQ

> 447


( ) ,

.


.

function searchBlogO {

- d o c u m e n t . g e t E l e m e n t B y l d (' searchtext ').value;

var searchText

for (var i = 0; X <

blog.length i ++) {

// ,

body l . t o L o w e r C a s e O .i n d e x O f ( s e a r c h T e x t .t o L o w e r C a s e ()) !=-l) {

if (b lo g [i].

a l e r t (" [" + (blog[i] . date 1 getMonthO 1 +

jJ " *

blog[i].date.getDate0 + '7- + blog[i].

date getFullYearO + "] " +

blog[i] . bodi I I;

break;
}
}

// ,

if (i = = blog.length

'IWtC'Sorry, there are no blog entries containing the search text.");

^
i le n g th
-
, , -

'
//, ^
.

448 9


!
, Y o u C u b e 2.0 ,
S t r i n g . ,
.
( ) (
). ,
,
.

18/29/2008] Met yp with some fellow cubers to diseass

the prospect of a 7x7x7 cube. Mixed feelings.

Search

feelings. no - L
ry - j
!

Show 809 E ^ t r i e s J ............ ..............

,
, .
Y o u C u b e 3.0...

> 449


B o iij= > o c : b i

3 *
? s e a r c h B l o g () s e a r c h B l o g ()
c h a r A t () i n d e x O f () ? to L o w e r C a s e () ?
! . JavaScript
. JavaScript
,
Q ; . 1\ charA t () Q ;
, .
Ruby, .
, ,
,
. 1/1 cube, , ,
,
i n d e x O f , : cube,
,
Cube, CUBE . .
: ,
.

,
.
.

? s e a r c h B l o g
3 * ,
t o L o w e r C a s e ( ) ,
. ? t o U p p e r C a s e ().
! . 1\/1 i n d e x O f ()
,
.
Q ; . .

. , ,
S t r i n g . ,
, cube
, 11.
. , in d ex O f() 11,
, ,
. 12. ,

,
( [ ]). i n d e x O f {).
. ,
,

S trin g A rr a y .

t o S t r i n g () s o r t {) A r r a y
. .

, i n d e x O f () s t r i n g
,
A r r a y s t r i n g . .

450 9


, ,
, .
R a n d o m , .

ooObe,-

jo tth e . ^ - __ ____
ordered,.

p , o ip e c t o f o .7 > .7 ,o 7 cube,.

c u b e ^ b u t o f co u n e ,. noM> I m,
cyv\'
^ ^ ' ! or\e,.

.
.

451


Math
Y o u C u b e
, .
Jav aS crip t,
, .
Math, .

. -
.

.
.

, 3 ,1 4 . 1 .

M ath
. , , Math

.
, P I (3 ,1 4 ).
. , ra n d o m (), .
1.

Math.

Mah.round(Math.PI)

Math.ceiling(Math.PI) .......

Math.random() .......
Q u iB e i Cinj=>. 4 5 4 -

452 9


. ' - ' -
:
^

Head First: . , Head First: ,

?
.
Math: !
,
, ,
.


.
.
Head First:
Math: , ,
. ,

. ?
.
, , . Math: , .
,
Head First:
,

. ,
?
.
IVIath: , , ,
Head First:
Jav aS crip t .
... ?
,
, . Math: , . ,
. , ,
Head First:

, .
, .
IVIath: ,
, - .
, .
Head First:
Head First: ,
... JavaScript?

IVIath: , , Math: . :
, .
. ,
,
Head First: ?
.
Math: ,
Head First: .
.
.
. ,
, , , Math: ... ,
, .
.

* 453


Math.

4 3.
5 4
ooepXj 4.
Math.round(Math.PI) 3

Math.ceiling(Math.PI) 4 ^ 7 7 3 7 ----------------

/K ? ,
Math.random()
1 !


.

,

rando m () Math, , 1 .
YouCube
. , ran dom ()
1,
. , .
0.?8990286m85206

f -'o k --
a l e r t ( M a t h .r a n d o m ());
0-436133S831S1724
a l e r t ( M a t h .r a n d o m ());

a l e r t ( M a t h .r a n d o m { ) ) ;

0.962859892?91690S

,
f '- ; ^
1, Math.
f l o o r () ,
.
.
0 - 5

var oneToSix = Math.floor(Math.random( 6) 1;

V ttt 1-6

454 9


Math?
Math? ro u n d f l o o r
Math? Q ; . ,
Q ; ,
, . Q ; r o u n d ( ) m in () max (),
M ath ,
, . , .
. , M a th , r o u n d (1 1, 37 5) a b s O

11, M a t h .
.
r o u n d (11 , 625) - 12.
, f l o o r ( )
, ,
. ,
.
10,

.


' 11 ( ) ,

.
-
'
.
,
.
fu n c tio n ra n d o m B lo g Q {

/ / , - i

v a r i = M a th .flo o r(M a th .r a n d o m () * h log.ien gth); 4 ------ ----- -

a le r t( [" 4- (b lo g li].d a te .g e tM o n tk () + i ) + " / " + h lo g [i].d a te .g e tP a te Q + " /

blogliJ.date.getF u liY earQ + "] " + b lo g [i].b o d y);

, -
/ / .

- ...

, .
, ,
.

.
;.Mixed

feelings
{8/16/2008) Managed to get a headache tolling over the
^^ x 7 x 7 c u b e fo r*a le o n lin e ,Y ik > .T h a t

|^ S n e w c b e b u to r c o u m .n o w T m b

,
o 'o S w c u b e lo r ie s d . t f s a ^ a ! pearl,
^ ,
- .
goa
B lo g
,
.
,
...

456 9


geucmBuu
.
,
.
. ,
------------
Blog!

8
YouCube , , ,
Blog; .
f u n c t i o n showBlog(numEntries) {
/ / ( )
b l o g . s o r t ( f u n c t i o n ( b l o g l , 2) { r e t u r n b l o g 2 . d a t e - b l o g l . d a t e ; });
/ / ,
i f ('n u m E n trie s)
num Entries = b l o g . l e n g t h ;
/ /
v a r 1 = 0 , b logT ext =
w h ile ( i < b l o g . l e n g t h && i < num Entries) {
/ /
i f (i % 2 == 0)
b lo g T e x t += "< s t y l e = ' b a c k g r o u n d - c o l o r : #'>";
else
b lo g T ex t += "<p>";
/ / HTML-
b lo g T ex t += "< stron g> " + ( b l o g [i ] . d a t e . g etM o n th ()
b lo g [ i] .d a te .g e tD a te 0 + "/" +
b lo g [i] . d a t e . g e t F u l lY e a r O + " < / s t r o n g X b r />"
b l o g [ i ] . b o d y + "</p>";
i++;

/ / HTML-
docum ent. g e tE le m e n tB y ld (" b l o g " ) . innerHTML = b lo g T e x t;
}
f u n c t i o n se a rc h B lo g O {
v a r s e a rc h T e x t = 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 r c h t e x t " ) .v a lu e ;
f o r (var 1 = 0 ; i < b l o g . l e n g t h ; i++) {
/ / ,
i f ( b l o g [ i ] . b o d y .t o L o w e r C a s e .in d e x O f(s e a rc h T e x t.to L o w e rC a s e ( != - 1 )
ale rt(" + ( b l o g [ i ] . d a t e . g e t M o n t h O + 1) + " / " + b l o g [ i ] . d a t e . g e t D a t e 0 + " / "
b lo g i ] . d a t e . g e t F u l l Y e a r O + "] " + b l o g [ i ] . b o d y ) ;
b re a k ;
}
/ / ,
i f (i == b l o g . l e n g t h )
a l e r t ( " S o r r y , t h e r e a r e no b lo g e n t r i e s c o n t a i n i n g t h e s e a r c h t e x t . " ) ;
}

f u n c t i o n randomBlogO {
/ / b l o g . l e n g t h - 1
v a r i = M ath. f l o o r ( M a t h . random * b l o g . l e n g t h ) ;
a l e r t ( " [ " + ( b l o g [ i ] . d a t e . g e t M o n t h O + 1) + " / " + b l o g [ i ] . d a t e . g e t D a t e () + " / " +
b l o g [ i ] . d a t e . g e t F u l l Y e a r O + "] " + b l o g [ i ] . b o d y ) ;
}
> 457


, B lo g .
'
f u n c t i o n showBlog(numEntries) {
/ / ( )
. s o r t ( f u n c t i o n ( b l o g l , blog2) { r e t u r n b l o g 2 . d a t e - b l o g l . d a t e ; });
/ / ,
ii ff f( !I num Entries)
r m m F .n 1 - -i ^ .
num Entries = b l o g . l e n g t h ; B log.toH TM LO

/ /
v a r i = , b lo g T ex t = ^
w h ile (i < b l o g . l e n g t h && i < num Entries) { n iM L - . ^
/ Z--i^5nojib3yeM ..
(i % 2 == 0)
b lo g T ex t += "<p s ty le = 'b a c k g ro u n d -c o lo r:# E E E E E E '> " ;
else
b lo g T ex t += "<p>";
/ / HTML-
b lo g T ex t += "<stron g> " + ( b l o g [i ] . d a t e . g etM on th ()
b lo g [ i] .d a te .g e tD a te 0 + " /" +
\ b l o g [ i ] . d a t e . g e t F u l l Y e a r 0 + " < / s t r o n g x b r />" +
\ W o g [ i ] . b o d y + "</p>";
i++;
}

/ / HTML-
document.getElementByld("blog").innerHTML = blogText;
}

f u n c t i o n sea rc h B lo g O {
v a r s e a rc h T e x t = docum ent. g e tE le m e n tB y ld (" s e a r c h t e x t " ) .v a l u e ;
f o r (var 1 = 0 ; i < b l o g . l e n g t h ; i++) {
/ / 0 ..---1.- . _____________
i f Q b l o g [ i ] . body. toLowerCase () . indexOf ( s e a r c h T e x t . to L o w e r C a 's ^ ^ ^~
a l g g e - r - r - -b (bTog [ 11-^ ?57~ - ^ - "7 " '''~-:7^
(_ b l o g [ i ] . d a t e . g e t F u l l Y e a r 0 + "] " + b l o g [i 1 . b o d v );
" ----------------- ------------------------------------------------ -------------------------- --- ........ .....

/ / ,
i f (1 == b l o g . l e n g t h )
a l e r t ( " S o r r y , t h e r e a r e no b lo g e n t r i e s c o n t a i n i n g th e s e a r c h t e x t . " )
}

f u n c t i o n randomBlogO {
/ / b l o g . l e n g t h - 1
v a r i = M a th .flo o r(M a th .ra n d o m * b l o g . l e n g t h ) ;
a l e r t (" [" + ( b l o g [i ] . d a t e . g etM o n th () + 1) + " / " + b l o g [ i ] . d a t e . g e t D a t e () + " / " +
b l o g [ i ] . d a t e . g e t F u l l Y e a r 0 + "] b lo g [i].b o d y );
}

M em
,
BlogContalnsTextQ ^
-
. . , -

.

458 9


^
B o n j> o c ; b i

, , B lo g I
? B lo g ,
HTML- .
,
0 ; ,
. , .



B lo g , , B lo g .
.
. ,

.
,
. 3 * ,
B lo g
. ?

, ,
Y o u C u b e ; B lo g ,
.
c o n t a i n s T e x t ( ) ,
.
b o d y B lo g ,
s e a r c h B lo g ( ) . ^
:

, to S tr in g
, , ^ up w ith eoifcWP*
c o n t a i n s T e x t () . fe llo w c u b e rs p
I to d iscu ss th e tcHT-MLO
. X , p r o s p e c t..."
d a te lA u g u st 1 4 th , --------
,
t h i s . b o d y .
c o n t a in s T e x t( )

c o n t a i n s T e x t ( ) ,
B lo g ()
t h i s . c o n t a in s T e x t .

459


c o n t a i n s T e x t ( ) ,
B l o g ()
t h i s . c o n t a i n s T e x t .
-

.

.7. f . ^ n c t i p n { t e x t ) {

r e t u r n (tkis.bodij.toL ow erC aseQ .m dexO f(teK t.toLow erC aseQ ) != - 1 );

V -
\ _ , -
this.

blog , ^
<
c o n t a i n s T e x t () ! J
B lo g ,
.

f u n c t i o n B l o g (body, d a t e ) { ~
// to S trin g Q
t h i s . body = body; .
t h i s . date = date; ^ ' ^ '

of the b l o g entry
// R e t u r n a s t r i n g r e p r e s e n t a t i o n W .
t h i s . toString = f u n c t i o n 0 {
+ 1) + "/" t h i s .d a t e .g e t D a t e
r e t u r n "[" + ( t h i s . d a t e . g e t M o n t h
t h i s . d a t e . g e t F u l l Y e a r O + "] this.body;
toH TM L()
};
// HTML-
th is .to H T M L = f u n c t i o n ( h i g h l i g h t ) { -.
//

b lo g H T M f \lg h lig h t ? "< s ty le - b a c k g r o u n d - c o lo r T # E E E E E E '> " " <>";

// H T M L
+ = " < s t r o n g > " + ( t h i s .d a t e . g e t M o n t h () + 1) + " / " +
' r t h i s d a t e . g e t F u l l Y e a r O + " < / s t r o n g X b r />"
this.date.getDate +
t h i s . b o d y + "</p>";
return blogHTML; -
containsT extQ
,
}; tr u e ,
// , .
t h i s containsText = f u n c t i o n ( t e x t ) {
r e t u r n ( ( t h i s . b o d y . t o L o w e r C a s e 0 . i n d e x O f ( t e x t .t o L o w e r C a s e 0 ) != -1);
};

460 9


YouCube? Blog
, -
B log (
http://www.headfirstlabs.com/boohs/hjjs/). ,
B log, YouCube.
.
/ / Show t h e l i s t o f b lo g e n t r i e s
f u n c t i o n showBlog(numEntries) {
/ / ( )
. s o r t ( f u n c t io n ( b l o g l , 2) { r e t u r n b l o g 2 . d a t e - b l o g l . d a t e ; ) ) ;

/ / ,
i f ( [n u m E n tries)
num Entries = . l e n g t h ;

/ /
v a r 1 = 0 , blogListHTML =
w h ile (i < b l o g . l e n g t h && i < num Entries) { toHTMLQ
blogListHTML += [i] . toHTML ( i % 2 == 0) ; sAOAHOcmbH)
i+-i-; HTM L-
ih op
}
.
/ / HTML-
d ocum ent.getE lem entB yld("blog").innerH T M L = blogListHTML;
}

II
f u n c t i o n sea rc h B lo g O {
v a r s e a rc h T e x t = 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 r c h t e x t " ) .v a lu e ;
f o r (var 1 = 0 ; i < b l o g . l e n g t h ; i++) {
containsT extQ
/ / , 6
i f (b lo g [i].co n ta in sT ex t(sea rch T ex t)) { .
a l e r t ( b l o g l i ] );
to S trin g O
break;
^
}
,
/ / , .
i f ( i == b l o g . l e n g t h )
a l e r t ( " S o r r y , t h e r e a r e no b lo g e n t r i e s c o n t a i n i n g t h e s e a r c h t e x t . " ) ;
}

/ /
f u n c t i o n randomBlogO {
/ / . l e n g t h - 1
v a r i = M a th .flo o r(M a th .ra n d o m * b l o g . l e n g t h ) ;
a l e r t ( b l o g t i ] );
} ~ ~ --------- ------------------ -

> 461


YouCube 3 .0 !
,
Y o u C u b e 3.0
, , ...

p m c o p m u p o t o
...
...
...
100
YouCube - Tht
Blog for Cube Piwzlers 18/29/20081 Met up with some fellow cubers to discuss
the prospect o f a 7x7x7 cube. Mixed feelings.

the ffloa i|7x7x7 ..

...

feelings. ^ ^

lo lS e new OTbebut of
M ^ t o g e t a h c a d a c h e t o f f in g o v e it f iiW

1ofdcied. It's a pearl.

Show A jij i ! ! l! L j

-
-
Blog Blogl

462 9


,
JavaScript?
. ^
'V , !

, ,
- ,
^ 81
.
.
 ^ ^

, , , .
81 ,
, .
. !
,
, ,
. 1/1 - ,
1... !


YouCube YouCube ,

B lo g
Y ou C u b e, -
.
B lo g , ^-
, ,
;. .
, ,
. '

h ttp ://w w w .k e a d fir s t!a b s .
/ b o o k s/h fjs/.
Blog
,

.

Blog (body, date) (

,
.body - body;
ite - date;

'
Blog. :l.toString = functionO { + 1) + /" + this.date.getDate + /" +
r^i-urn -[" + (this.date.getMonthO + 1) + /
thS.dlte.getEullYearO . " 1 ^ this.body;
};
// HTML-
t h i s.toHTML - function(highlight) (
//

b S g ^ i " i^bligbt , "< style=.bac.g.ound-colot:EEEEE.>.. :

// HTML- ^ ^

^ " t r r t : . ; : r t : r V ^ V " " ' t h t r d r t e . g e t P u l l y e a t O t ..</.ttongXb. />" .

this.body + '</?>";
return blogHTML;
};
// ,

,
Y o u C u b e, , ...

466 10


, , B lo g
t h i s .
B lo g
. , ,
.

Texto

!^

Blog


contalnsTextO

.
B log , ,
.
, B lo g ()
, B l o g
.
,
. ,
B l o g .
-
.

B log ,
?

> 467
 ...

, :
.
, , ,
. ,
. ,
,
. ,
.

468 10


^
, ,

.
,
. ^^ .
body/ "Managed to get a

date'' August 16th, 2008

toString

,
toHTML , -

containsText . '

body^ -
.
( "Found 7x7x7 cube.
date
X ^ J ^ s t 21st, 2008
toString
/FunctionO { ...
.
functionO { ... }

.^functi^iTo^^ ..

.
body "Met up with some..."
A
date August 29th, 2008
.
toString f functionO {
- N
toHTML function() { ... }

containsText V functionO {
- J

> 469
 ,

this
this
.
.
,
t h i s . .
f u n c t i o n B log(body, d a te ) {

t h i s . b od y = body;

t h i s . d a te = date ;
,
-
-------- --------
this.
, ,
,
. ,
t h i s , .
.

f u n c t i o n B log(body, d a te )

t h i s . toString = f u n c t i o n O {
,

Blog

- this.

th is .to H T M L = f u n c t i o n O {

t h i s . containsText = f u n c t i o n O {

,

.
,
.

470 10


,
,
. ,
.
Blog,

.
X

Blog-

,
,
. ,
,
,
. Y o u C u b e ( t o S t r i n g ( ) , toHTML ()
c o n t a i n s T e x t ( ) ) .
.
, ,
...

471
 ...

, ,
Jav aS crip t p r o t o t y p e ,
.
, .
, .

.
B l o g .p r o t o t y p e . toHTML = f u n c t i o n O {

p r o to ty p e

. .

toHTML () B lo g ,
- . ,
B lo g , toHTML ()
.

toHTML () B lo g ,
, .
,

.

v a r b l o g E n t r y l = new B log("N ot much go ing o n ." ,

b l o g E n t r y l . toHTML () ; ,

toH TM LQ ,
.

B lo g
toHTML () . ,
, , , !

v a r b lo g E n try 2 = new B l o g ( " S t i l l j u s t hanging a r o u n d ." .

b l o g E n t r y 2 . toHTML {)

.

472 10


, YouCube

prototype
, , Y o u C u b e
, B lo g YouCube.
p r o t o t y p e .

containsTextO

, ,
p r o t o t y p e .
, .
f u n c t i o n B l o g ( b o d y , d ate) {
//
t h i s . b o d y = body;
t h i s . d a t e = date;
}

//
B l o g . p r o t o t y p e .t o S t r i n g = f u n c t i o n O {
r e t u r n "[" + ( t h i s .d a t e .g e t M o n t h () + 1) + "/" + t h i s .d a t e .g e t D a t e () + "/" +
t h i s . d a t e . g e t F u l l Y e a r 0 + "] " + t h i s . b o d y ;
};

// H T M L -
B l o g . p r o t o t y p e .t o H T M L = f u n c t i o n ( h i g h l i g h t ) {
//
var blogHTML =
b l o g H T M L + = h i g h l i g h t ? " < p s t y l e = 'b a c k g r o u n d - c o l o r :# E E E E E E '>" : " <p>";

// H T M L -
b l o g H T M L + = " < s t r o n g > " + ( t h i s .d a t e .g e t M o n t h () + 1) + "/" + t h i s .d a t e .g e t D a t e () + "/" +
t h i s . d a t e . g e t F u l l Y e a r 0 + " < / s t r o n g X b r />" + t h i s . b o d y + "</p>";
return blogHTML;
};

// ,
B l o g . p r o t o t y p e .c o n t a i n s T e x t = f u n c t i o n ( t e x t ) {
r e t u r n ( t h i s . b o d y .t o L o w e r C a s e ().i n d e x O f ( t e x t .t o L o w e r C a s e {)) != -1);

* 473


' , ,
, p r o t o t y p e .

f u n c t i o n B l o g ( b o d y , d a te) {
//
t h i s . b o d y = body; ______

t h i s . d a t e = date;
.

/ /
B lo g .p r o to ty p e .to S tr in g = fu n c tio n O {
re tu r n "[" + ^ (th is .d a te .g e tM o n th O + 1) + " /" + t h i s . d a t e . g e tD a te ()
1
t h i s . d a t e . f e t F u l l Y e a r 0 + "] " + th is .b o d y^; ^-
" ~ ~ ---------- 5 -
11 ^^ HTML- , -
Blog.prototype.toHTMb = fu n c tio n (h ig h lig h t) {
/ / .
var blogHTML =
blogHTML += h ig h lig h t ? "<p sty le = 'b a c k g ro u n d -c o lo r: #EEEEEE'>" : "<p>";
/ / HTML-
blogHTML += "<strong>" + ( t h i s . d a t e . getMonth() + 1) + "/" + t h i s . d a t e . g e tD a te () + V" +
t h i s . d a t e . g e t F u l l Y e a r + " < /s tr o n g X b r />" + th is .b o d y + "</p>";

^ , th is
/ / , ^ BlogQ.
B lo g .p ro to ty p e.co n tain sT ex t = fun ctio n (text) {
re tu r n ( th is .b o d y . toLowerCase0 . in d e x O f(te x t. toLowerCase0 ) != -1 );
};

YouCube
Y ou C ub e
2^=> Blog
. . --
, B lo g , 1^ .
. ,
Y o uC ub e .

alert ( [ ;
Blog.

[2] .toHTML ;

[3] .containsText("") ;

474 10


, t h i s
, .
. p r o t o t y p e
, ,
.
.

_

B o T ^ o C jjI

3 * , ; ,
. X . ,
,
Q ; ,
t h i s . . 1
. .
, p rototype.
. . 3 *
, C++ Java, .
. , , JavaScript . ,
.
. . ?
,
p rototyp e, Q ;
,
, . JavaScript. .
p r o t o t y p e , , ,
, ,
. . .

,

. ? .
t h i s , ,
prototype? Blog, ,
Q ; ,
, b lo g E n t r y
JavaScript
^ ! t h i s . [ ] .
.
JavaScript. ,
. , . /
X ,

th is . X . , . () now,
, , Date ().

* 475
 ... ... ...

, -
. ,
, .

#3^ YouCube - The Blog for Cube Puzzlers^

ube - The Blog for Cube Pimlers
...
!

Search the ttiofl j |

some feUow cubers to discuss ihe piospwt of a 7x7x7 cube. Mixed

' jings.

F m i^ * ^ x 7 x 7 cube for sale online. Yikes! That one could be a Iwast.

S o l v e s aew cube but of cmrsa, now Tin bored and shopping for a new one.

M ^ ^ t o get a headache toiling over toe new cube. Gotta nap.

8/ 14/2008
GoE * c new cube I oKiered. Irs a real pearl.

Show All 8;og Ensfies j Iview a RandomJ l o a ,f n ^

Done ---------

, , B lo g
s i g n a t u r e .
...
!

, ? ,
?

476 10

_

3 * .
- , , d a t e ,
? , . ,
D a te . 11
0 ! - . ,

, ,
. - . .
-

S/l4/2oo8
* ,

OS/,g/2oos .
S o fv e tf tfie ?
^^Sfioyyptn signature
^ ru z z C e ri
?
- S /ie/2008 I
M anagecC to a e t n A

S o tta nap.
^ ^

0S/2I/200S

OS/2g/2ooS

^ ^ ^z C e r

, .
,
, ,
.

477


,

.
.
,
.
, s i g n a t u r e ,
Y o u C u b e .

.signature^

.

body . .-'; ;____
I^Met up with some!
fellow cube'iV?
. sig n a tu re '
.

August 29th,2008 !
d a te

.

s i g n a t u r e
B lo g , ,
. .

, ?

478 10


,
,
.
: __ _ .
-
.
Blog, p r o t o t y p e . S i g n a t u r e = " P u z z le r Ruby";

, -
. ,

,
p ro to ty p e -
.

, ;
, ; .

, , .

f u n c t i o n Blog(body, date) {

t his. b o d y = body;

Blog.prototype. sig n atu re = " P u z z l e r Ruby";

/7 this.d ate = date;

T
.
p r o to ty p e .

, s i g n a t u r e
. : ,
B lo g .

> 479


,
V ' ,
s i g n a t u r e .

Puzzler Ruby I r t ( t h i s . s i g n a t u re );

,
r ~ w ) ,

t h is !

^
| 1

YouCube Q ;
? , .
. ?
? ,
B l o g () Q ;
; , . ,
, ,
, .
. .
, , .
, ,
. , , . , ,
. . ,

YouCube .
HTML- ,
. , .
, ?
?
- ! ,
. Q ; ,
-
s i g n a t u r e
.
. p r o t o t y p e ,
, ,
, ,
B l o g {) , .
.
t h i s ,
. .
,
s i g n a t u r e .
3 * , .
, s i g n a t u r e ,
? B lo g .

480 10


toH TM LQ
s i g n a t u r e ,

, , . .
,
, toHTML ().

Blog.prototype.toHTML = function(highlight) {

11

var blogHTML =
"<p>"
hrghiight , "< style^'bao.groun.-color: =

" ^ . .. .................................... ^

this.date.getFuliyearO . "</strongXbr /> . thrs.bo ^

"</emX/p>";

return blogHTML;

sig n a tu re
,

.
.
. 9 /1

S^9/20ee

liscusstei
h'P uziier Ruby prospect o f a 7x7x7

8/ 19/2008

-
, Jav aS crip t,
s i g n a t u r e B log .
Y o u C u b e .

> 481


: ;
.
, , .
,

.
, ,
. ,
?
. ...

, ,
.

. .
-
, .
- ,
,
.
,

?
. ,
.
?

. ,
, ,
.
!
, .

!
! ; ? ,
. ...

482 10


Hem !
,
YouCube.

, ,
-
.

< html>
< head>
'<.>.. - , BIO, . cube

c t l p t iyp..-t=Kt/3avasciipt->
// B i o g
f u n c t i o n B l o g (body, date) {

l;;i ! r o r y ^ r b r y " r " N o t h . n g g o i n g on today.

t h i s . d a t e = date
}

//
,g.p r o t o t y p e .t o & t ^ A . ^ - f-u n c t . ,^^.a a
-etL?n---4-" d a t e . g e tM o n ;^
( m s date getFullYear_0
,

,
//
.
/ / ^
#EEEEEE'>" "<p>";
var blogHTML - " ; "<p style='b a c k g r o u n d - c o l o r :
blogHTML += highlight
this. d a t e . g e t D a t e 0
< iil + LUio.iJ-g

"< 7 ^
r e t u r n b logHTML;

^ / finore
// , = f u n c t i o n (text) (
Blog.prototype.containsText _ _
r e t u r n (this.body. i n d e x O f (text) .

);

//
B l o g .p r o t o t y p e .si g n a t u r e
"by P u z z l e r R u b y



YouCube?

* 483


,
B lo g .
, .
B lo g
. -?

prototype
,
?
, , ,
JavaS crip t.
p r o t o t y p e .
B lo g .

JavaS crip t.

p r o to ty fje ^ ;;" ^

p r o to ty p e , J a v a S crip t.
(?

.

484 10


prototype
,
p r o t o t y p e .
. JavaScript
^ JavaScript.
.

/ ,

,
.

,
S t r i n g . p r o t o t y p e s c am ble = f u n c t i o n .
/ /

-
J. S tr in g -

S t r i n g ,
.

a l e r t ( t h i s . s i g n a t u r e . scrcimble () );

luzPrb uzyRe

s h o r t F o r m a t () ,
D a te
//.

* 485


shortFormat ( ) ,
Date
//.

y p a te .p r o to tu p e .s h o r tF o r m a t = functiorJ) {
^ ....................... .................................................... ..............................................................................
P a te. r e tu r n i) + + this.getPateQ ^ + "/" +- this.getFu!lYear();

YouCube
Date
Y o u C u b e. ,
,
.
,

.

S a n y o < s id e o f a U > o a l y s . S - s n .p e d c y in g c u b c p z z te s .

Power to ft puslersl
by Pmder Ruby

9 /1 /M 0 8 ,n ^ 'J i c i c u h e S t a r t i n g a m e n ta l e x e rc ise
W e ^ e a d and oidered the scary 7x7x7 cube. :.tarui g
regiiM sn to prepare.
by Puzzler Ruby

c u b s d i , c s s m e p . t c . o , a 7 x 7 x 7 cu b e. M ixed

fe e lin g s .
by Puuler Ruby

8 /21 8 cube fo r sate on lin e. Y ik e s ! T h a t one could be abeasi.

Found 7x7x7
b y P u z z le r


e c n c w c u b e b u .o ,c o u n e ,n o w
I 'm bod anti shopping for a new one.


by Puzzler Ruby
P a te .

486 10


shortFormat {) Date
.
.
, .
.
, , , signature Blog.

fviewc>3b! .1

c6oiXcwSo.M .

prototype
,
, .


p r o to ty p e .
Biog.showSignature = functionO {
alertC'This blog created by " + Blog.prototype.signature +

}; \ sig n a tu re


, .
.
,
.

B l o g .showSignature

.
YouCube,
Blog?

> 487
 Blog

,
, ; ,
C O 'P '^S *'
, Blog.
showBlog ().

function ShowBlog(numEntries) {
l3io3- - //

. sort (function{blogl, 2) { return 2.date - blogl.date; });

} 8 .

-

. ,
, ,

showBlog () .
Blog?
,
.

488 10


. :

_ -
'
.

function(blogl, blog2) {

return blog2.date - blogl.date;
.
} _________

,
.
,
t h i s , .
. , ,
,
.
, ,
.

-
XOOUMU!.-vvw ^
. f

&-6.&.
/
.
function (blogl, 2) {

return blog2.date - blogl.date;
,
,
.

,
B lo g b l o g S o r t e r {).

> 489
 ? !

YouCube
Blog.

J M o g M q g S g rte r ,-, .

...r ^ t'^ fn bJogZ.date, - blogi-.date;

};

^ ^
Blog,
blogSorterQ .

Blog ,
.

function showBlog(numEntries) {

//

. sort (Blog.blogSorter)
blogSorterQ
Blog.

. ,

showBlog , Blog,
.

, -
Blog showBlog ( ) , ,
.
,
Blog. -
.

showBlogO

490 10


Y o u C u b e, ,
.

. ,
- !

,
,
.
,
.
, .

B l o g ?

491


Bcmaka )

Y o u C u b e, ,
Blog,
. :

Blog?
?

, ,
< 1 > .

'
<img src="cube777.png /> .

,
. , , Blog
- , Blog
.
.

io o tli Blog
UiOlOC , , body.
o oi lo
toiom
cube777.png

body
im age -
^'^^^
S lo g ,
7 7 7 . .

492 10


}
, B lo g
im a g e , ,
. , ,
.
, .

,

? ,
f u n c t i o n Blog(body, date) ( null?
//

t h i s . b o d y = body;

t h i s . d a t e = date;

.

,
, n u l l .
n u l l
, .

, .
,
im a g e B lo g () .

B lo g ()
,

image.

> 493


' B l o g ( ) ,
image.

. .........


. . . . . , . J :Z 7 T Z Z Z ?
,, . ; , , J '^^^
< :
image,,
M , - d . t e =. ............................................
im age.
, th is.im age = image;

^

B o iij^ o c b i
B l o g ( ) ,

, , .
im a g e
:
B l o g ()
?

Q j ,
.
,

Y ouC ube.
.
, ,
.
.

.
B l o g
. Y ouC ube.
B l o g ()
, ,
V\W ow, it toi?me;al
, couple of weeks b u t ^
J.
09/19/2008
ber 1915'20

494 10


, ,
i m a g e
B l o g ( ) :

new Blog("Wow, it took me a couple of weeks but the new cube is finally solved!'

new Date("09/19/2008"), "cube177.png")

BlogQ-
.

, ,

, .
.

, ;
i m a g e . If ( )
t o H T M L ( ) .
H T M L - ,
i m a g e ,
, . Else

,

.

t o H T M L () B l o g
, .
.

if ( ) {
blogHTML += "<strong>" + this.date.shortFormat() +
"</strong><br / X t a b l e X t r X t d X i m g src='" + this, image +
" '/ x / t d x t d stYle='vertical-align:top'>" + this.body + " < / t d X / t r X / t a b l e X e m > "

this .signature + "</emX/p>";

}
else {
blogHTML += "<strong>" + this.date.shortFormat() + "</strongXbr />" + this.body +

"<br /><em>" + this.signature + "</emx/p>";

> 495


toHTML () Blog
,
.

if ( tkis.im age ~~ ----- - image

' ................ ^ I < , -
, *= '
"</strongxbr / X t a b l e X t r X t d X i m g src="' + this.image +

" ' / x / t d x t d style='vertical-align:top'>" + this.body + " < / t d X / t r X / t a b l e X e m > " +

this .signature + "</emX/p>";

^
else { ./^ ,
- .
blogHTML += "<strong>" + this.date.shortFormat() + "</strongXbr />" + this.body +
"<br /><em>" + this.signature + "</emx/p>";

.
,
,
.
0 f! 0 _- The Sloe fw C ute 11 _

YouCube The Blog for Cube Puariers

Search the Biog | |

9
Wo, it a a coaple of w ks tat the new cubc ^ *
solved!

.
li
byPuzzkrRuby

G o S n c w 7x7x7 cube. Could be my last blog post for a while...

byPuukrRuby

Atnde<i a raUy outside of a local >' store Sia stopped carrying cubc puzzles. ^
Power to aiepffittoi
by Puzder R u b y ....................

496 10


I

,

.

M issing deliver()

Image
/ - -

1 :

,
- .
,
. !
jJ 0 1

^ ...
( , ... -
! . -
( ,
V , .

1
. , .
, ,
. ,

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

60
. Jav aS crip t .
,
.
JavaS cript.

BUG SCENE INVESTIGATORS

JavaS crip t.
, .

,
J a v a S c n p t
. .

.



Jav aS crip t,



.
,
60
.
JavaScript,
51
, .

500 11


,

- , -
. , - ^
. headF4rstla h s.c o m /b o o k s/h fjs/.
, .
, , .

11-, 97 86, 75, 92,

1 4 1 5 , '9 6 , 97, 88, 108 1;

> 501
 , ?

- BS! C ase t ; 10. C ^ c u la to r, I n ^ r n e t & p lo i
, In te rn et


Explorer
. In te r n e t
E x p lo rer...
^5fijttse.
jte-^^waBW4icajdf^^5di
D ^<*'15^(!
~
^ R e a d v t o c a lc r f a t e th e a \ - a g e I Q .
f. ~0k'"'.1
1 "iwyo fw.53
|;
Oar %
'js'isitefined
C<Ke:S I -Si
I n te r n e t E x p lo re r '1 ' URL :\//^;)8202091^*

, , '
. ,
i q s ,
. ,

, Safari...
,
Safari
.
SyntacError - Pars
ftsf^#UfjfFnrh*s!/DMumWj!'Eisrfirst/i*|MTll Un.- 2i
1(tndwiabte:los
t*: 53

Rsady calculate the average [Q. ,

S a fa ri
^ 1 ^
f j ^ f y x u m e ,

Safari ,
J .

. ,
O p e ra ...
-
/ ,
Opera J Safari.

(
)avaS!Spt-Ss,Vfec#4>.A::^S>cumen%3:id%2DSetthgsM*ft^%ZW
orreon,-^^^
b * i e scnpt canpfeon
Synax Tor ft+de iaaA^;ine 71 of irAw
a t fte:/^.^.ost,'C^Ajocijwsnis%20er>d,20SeUings/Mid58e%2Qf^.,
etse>fsv?ece<50
;^/">ia!ho9t^::>ftM
-! ttead: iosw
T)
t9%20arj%2^ttngs;'M
ichael%204o<-,5on^34sktop/b9.^S9e3_l,M
ml
Emjr;
E rro r name:^.'
Consoles iTwssaee: Stetwnerrtooline i: Refe-ence tosjndefined -.; s#wwi<^3ess
Secktrece;

uoe iof sfft

stftb3CaKfiQs'5:
^^ Al {jritnvuntocabon
tstaffnwnt source ide not e v a il^ J

J a v a S c rip t.

502 11


- . O p e ra ,
Firefox
, Safari, , , .
, ,
; F irefox... Firefox
6>^<\ - .
1^ .
BSI Case 1: tQCaicuJatof __
0 ,.. F ir e fo x

trror Console

fii m ih
Wafnings
#
Messages Clear
* Atl Error*

ErroR {befsffi ^ ^
Soi4rcriie:
calculate the average IQ.
eiae if .avsrage SQ <
<htmi>
<head>
Do <tltle>BSI Case
1: IQ Caloulator</title>

;rsr;r.rs:>,
f<Jnction showIQClass (data) (
Xa!
,
dOOuJnt!get\llentBy?d?"outpuj
ralcIQClass(data) .innerHTML; = "You
).innerHTMr. .

function calcIQClass(data) (

'aviL e ^ : '
- e r a g e . Math.noor,average / data.length);

if

) Should their tvs";

Firefox
else if average < 50 { ^
,
cm poK aj
else If (average < 70) (

) Should hit the boo.s"; .
else If (averag < 81) (

< "--r . r a m exercises

lse if (average < 9i) ^
, - t u r n ..people ho could .e considered dull....
else If (average < m j ,
) "people Of average lntelllg,,,,,.
else if (average < i2i) ,

. " P - P ^ e Of superior intelligence..;

else if (average
< 141) (
J J^eturn ..people of

else {
very superio
intelligence"
return ..geniuses..;

</script>
</head> ?

I K

> 503
 Firefox

Firefox
Firefox-cnacumeAb ,
, F irefo x
,
, .
;.
, ________
.

EfforConsote Firefox
II J. , Firebug,
E r ro r s , W a r n in g s M essages : _ *

.
http://w w w .getfirebug.com /.

-
,
.

<^>
<> '
case

,
- .
,, f u n c tio B ^ h o w I ( 3 C la s s { d a ta *
ddocuaintfeetSlLMtByld
o c u J n t f e e W l L M t B y l d ?
iiS
* ut ' >>;
, } IclOClasstdatai I
.
fu a c tio a c ftlc io c la s s (d a ta ) {

- a ,. .

o f tJ ,e

J re t , " p e o p le wbo . h o u l 4 k i l l t b . i . w . - ,

e l s e i f a v e r a g e S* / ____ _
.
G ise i f {average < 7 0 ) /
} bo s h o u ld h i t t h e
e ls o i f (a v e ra g < 81) | -v
^ r e t . - p o o p l . h o S h o u ld c o n s i d e r b r a i . ^
.1 ;{ f a v rir a q e <
:cises"
Life2S,Cor i
*
F irefo x
, , Safari
(25). F irefo x
e l s e i f a v e r a g e < 50 {
24, ,
25.
, F irefo x ,
if
.
.
504 11


; ,

?
. ,

Q ; , , , Firefox
JavaScript - .
JavaScript.
, Safari
Debug,
. 3* Internet Explorer?
Tenninal ( ):

defaults write c o m .apple.Safari ! , , . ,

, ,
IncludeDebugMenu 1 Internet Explorer,
, , JavaScript.
, . Firefox , i q s
' Console Tools. ,
i q s .

! Firefox ? :
?

;
.

)

. ,
, . ,
.

else if (average <

8 ,

IQ-

y c m j- a -
, ?
^>|
. ..

* 505
 ?

, I Q ,
F irefo x , .
, , ,
. ,
,
!,
<html>
<head>
8 .

function ShowIQClassMata, i
alert("Click Off u .
document.9etEleetByM("outpuj ,
, iOClass,data, . ' "Vou are CeaU,
.
alculate the average IQ
,4 r "
var average = o-
for (var 1 . 0,- 1 < 0 a 0 Error Console
average +- data
average , Math, floor tillgi ^
ih
B o m , // Return the class! |AB EffOfS Warnings Messages
If (average < 20) ( r
return "people ho
}
eise if (ave^^^^ < Error: ffiTssingIafterfafictionbofly v
retijrii.>pg^le who
Source Flfe^ :/ f /Users \
lse if (average < ?C
J return "people who :
Firefox t'
else if (averag < 81) '
J i^eturn "people who EiTon shov^^Class is not defineil
else if (average < 9i) ^S&yrcFik; Une:.i
^ return "people who c'"
else if (average < ur
J return "people of av ,
else if (average < 121) .

l;
J return "people of superio
else if (average < 141, , . .
, "P-Ple Of very superior in^
else (
return "geniuses";

55ript>
</head>

<body onload."shoIQClass(l3)
<-,^src=..bral,pg.. alt'Jb!;!:.. />

.
, .
, F irefo x .
,
.

506 11


JaVa^crij=>t.

|>]=> |,
1 ,
<html> .
<head>
<title>BSI Case 1: IQ Calculator</title>

<soript type="text/javascript">
var iqs = [ 113, 97, 86, 75, 92, 105, 146, 77, 64, 114, 165, 96, 97, 88, 108 ];

function showIQClass(data) (
alert("Click OK to begin IQ calculation.);
document. getElementByld ("output") .innerHTML = "You are dealing with <em>" +
calclQClass(data) + "</em>.";
}
function calclQClass(data) {
// Calculate the average IQ
var average = 0;
for (var i = 0; i < data.length; i++) {
average += data[i];
average = Math.floor(average / data.length);

// Return the classification of the average IQ

if (average < 20) {
return "people who should kill their tvs";

else if (average < 50) {

return "people who should really hit the books";
}
else if (average < 70) {
return "people who should hit the books";
)
else if (averag < 81) (
return "people who should consider brain exercises";
)
else if (average <91) {
return "people who could be considered dull";
)
else if (average < 111) {
return "people of average intelligence";
}
else if (average < 121) {
return "people of superior intelligence";
)
else if (average < 141) {
return "people of very superior intelligence";
}
else {
return "geniuses";

</script>
</head>

<body onload="showIQClass(iqs);">
<img src="brain.png" alt="brain" />
<br />
<div id="output">Ready to calculate the average IQ.</div>
</body>
</html>

507


^ 1^ nj^oB ejniipb
] cUeHap*uu ,
<html> HuMu .
<head>
<title>BSI Case 1: IQ Calculator</title>

<script type="text/javascript">
var iqs = [ 113, 97, 86, 75, 92, 105, 146, 77, 64, 114, 165, 96, 97, 88, 108 ];

function showIQClass(data) {
alert("Click OK to begin IQ calculation.");
document.getElementByld("output").innerHTML "You are dealing with <em>" +
calclQClass(data) + "</em>.";
)

function calclQClass (data)f{%

I I Calculate the averagee TQ
var average = 0;
for (var i = 0; i < data.length; i++)(( 1 ^^
- average += data[i];
^^verage = Math, floor (average / data, length) ;
a d d itio n ..........
........^
^ ^

CKo6ig.
eturn ..people k ^ o u i d k i l l th e ir tvs"; ^m
3aK pt> i-(T) -- !
6afOU4a S ! ^ s e if (average < 5 0 ) ^ 0 - __ ___________
CKo Sk A. "people who shiuld really hit th e b o o k s ^
, ,
aise if (average < 70) -----
return "people who should hittte books "~r> fo r,

Q ,se if (averag < 81)(

return "people whoI sKould
snou. consider brain exercises^^
.
s e if (average < 91){-..............
^.^^^return "people who coHld be considered d u l l " 7 ^ .
else if (average < 111)^77 ------- ---- -v.
return "people of averse intelligence";]
Q ) --------------------- ^
if (average < 121) f o ____ ________
^_jeturn "people of supeiKor intelligence";^
else if (average < 141)
return "people of very superior intelligi
Q,
re t W n "geniuses"

#
< /^ ril
</head>
181.
<body onload="showIQClass(iqs);">
,
<img src="brain.png" alt="brain" />
<br />
<div id="output">Ready to calculate the average IQ.</div>

</body>
</html> .
508 11


,

, , I Q
.
. F irefo x ,
,
, I n te r n e t E x p lo re r.
a v e r a g , i q s .

6
, undefined
?

* 509


undefined
.

.*5. ^
J .
.

u n d e fin e d ,
, ,
. .

Jav aS crip t , .

function r, , ,
.
// Calculate the=
average - 0 ^0
for (var i . o-'i < H
^ erage ditall,; I
one ,
,

''re't:"^"'" --age IQ
! : .
T ' 9e < 50) ,

,
if -average < ,
"people .o 3.old M t
reall,

t.e
th h

e lse if
/
(average < 81) {

- -------------------------------- r eturn "people w ho s h o u l d c o n s i d e r

if (average < b r a i n exercises";

else If (average < , ,

, " i-elllg.,,,.
(average < ip-i\
} superior Calculator
l^iiigence";
averag

average
Ready to calculate the average IQ.
Click OK to begin IQ caiculat
Done

510 11


^
!

undefined undefined null ,
not defined? , i f .
, , ,
; . , i f ?
false. if
, . (someObject) 3 ?
, ,
. , .

7811 ?
undefined null?

average ? ;
Q l .
? . ,
undefined null
,
,
, ,
, 0:!
average


.
. , null
-
, , JavaScript
.
. averag

undefined, average ,
,
, . JavaScript
.
. averag
shazbot lederhosen.
null. , JavaScript
, .
,
.

1 ,

.
... .''
Case 1: iQ C a icu l^ r .

IQ
maKj

, y c rn j^ a H u jiu
_ /
Y o u dealing with p e o p le o f a v e ra g e in teU ig en ce.

Done _

511


>
^

,
,
!, .
.

, , ,
. .

,
.
, ; ,
.
,
, , .

$ ? \. 9
.

512 11


( http://wivw.headfirstlabs. fo r m
/books/hfjs/), , .
, , ckeckW innerQ .
, .


-
>1

-

.
.

,

. -
^
' .

Call


ckeckW innerQ .

, , , ,
.

513
?

IX ' .

/

...

( # 1 )
,
, ,
F irefox.
,
JavaS crip t. .

caiiHm 4. LoUay s w-sner: }

else i

ost caller

caiierPield.select();
. )
.

.
.

514 11


F irefo x ,
. a l e r t ( ) ,

c a l l e r c a llN u m .

if (callNum = winningNum)

alert(caller + + callNum +

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

if (callNum = winningNum)

alert(caller + ", caller numbei^^^ callNum + "... today's winner!")

if (callNum = winningNum)

al e r t (caller + ", caller number " -I- c a l l N u m + "... today's winner!")

Q m u S x a |=>
^ naj^H bix
.

515


U
,
. ,
Jav aS crip t
, . ,
. HTML
??
.
<input type="button" value="Call"<

onclick="checkwinner(this.form, document.getElementByld{'caller')-value, 7)" />

V
J a v a S c r ip t -
./>1-

- ,
.
Jav aS crip t,
, .
, : XHTML

( .
<input type='button' value='Call'
) I
onclick='checkwinner(this.form, document.getElementByld("caller") .value, 7)' />
4
8 anocm po-
_ H T M L ---------
,,
J a v a S c r ip t
. 181
,
.
X H T M L , H T M L ,
, ,
Jav aS crip t .

,
, , , .
:

alert{'It's so exciting!'


? ,
,
?

516 11


$-

.
.
Jav aS crip t ,
, . ,
,
( \ ) . 8- .

alert('It\'s so exciting!');

Jav aS crip t ,
, . ,
,
Esc-
.
alert("It's so exciting! _ Esc -
.
.
, :

alert("They said, "you've won!"");

, , esc-
. ,
^ ^ .
alert("They said, \"you\'ve won !\" ,

).

, ,
.

var message = 'Hey, she's the winner!';

var response = "She said, ''I can't believe I won.""

<input type="button"' vaiue=="Winner" onclick="givePrize("Ruby");" />

> 517


esc- , -
) 2 2 .

' var message = ' Hey, she's the winner!';

v a r m essage = 'H ey, s h e \ s th e w inner!';

e sc -
var response = "She said, "I can't believe 1 won.""
, ~
v'ar response - "She sa id , V I c a n \t believe I w o n.\""

<input type="button" value="Winner" o n c l i c k = " g i v e P r i z e (" R u b y " ) ;" />
, ^
^ in p u t t y e ~ b u tto n " v a lu e -'W in n e r" o n c lic k - givePrize('Ruhy');" />
. ................................................................................................: ......................................
8 e sc - ,
J a v a S c r ip t -
H TM L- .
.

( # 2 )
, , , .
, , Call
. ,
c h e c k w i n n e r {).

BSI Case 2: Winning Caller

e o e
Call
, -


checkW innerQ .
CaEer n a m e : jH ow ard S J -
0 0 6 Error Console

' & iL m
1 All Errors Warnings Messages Clear

Ermr. chectoRnf Is not defined

Source f&tN /Users /mjchaei .Document/headWr iMf\^2^2^hm Une 1
- ...........- ..........

,
- m o ,
H T M L -
.
.

518 11


, cKosJ ..
Jav aS crip t . ,
, . , ^

,rm, caller, winningNum) (

//
callNum +

form, submit ;

else
" ^"irertirw "^1 ' caller, ;
irilS fe fa ^ a lu e = "Next caller..
callerField.focusO ;
c a l l e r F ield.select 0 ;

</script
</head>

ckeckW in n erQ


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

, , ,
.

I I
.,
.
I I .
.
- .

> 519


,
,
.

_
. .
.
.
- .

ckeckW in n erQ
ck e c kw in n erQ j
w.
# 2

, w W y c n f - UC-

. ^
.
J

<input t y p e="butt||fi" value="Call'

onclick="checkWinner(this.form, document.getElementById('caller').value, 7)" />

} ( # 3 )

. ,
.

. ,
, !
,


^ &.
BSie. caller nymber 7...todays w in ie |

" b er ^...today's win, e

tobv. number

520 ft


,
c a llN u m w in n in g N u m c h e c k w i n n e r ( ) .
- , ,
c a llN u m .

-
~ -------- - .
if (callNum = winningNum)

,
-

.

?


.
.

,
.

.

c a llN u m .

callNum .

f~ o iT 3

> 521


.
,
.

----------------- ' >^. .

alert (callNxjm) ;
if (callNum = winningNum) ( callNum + "... todayX's
a l e r t (caller + , caller number

winner!");
aiiVimi1".(W NaN

OiC
, callNum
w inningNum ,
if callNum NaN.
, ,
i f.

if (callNum - WinningNum) (
alert(callNum);
alert(caller + ", caller number
Winner!");
form.submit ();

callN u m
7.

, , callNum

7, ,
?

522 11


a v / ^

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

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

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

Head First:

? , ... Thanks. See !
: .
.
Head First: .
?

523
 ?

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

c a llN u m w in n in g N u m . .

______

if {callNum(^winningNum) {

= = =

if (callNum == winningNum) {
# ^ .

.
Jav aS crip t , ,
w in n in g N u m ,
t r u e i f .
, , ,
.

(
^ ]
V ?

.
,
.
, ,
, .
.
,
. ,
, u n d e fin ed ,
.

.

524 11


1-
, , =
!. !, ==,
. , . .

. .

!
. KaKoif
esc-
,
? . ?
HTIV1L esc-
JavaScript . 0 ;
; , JavaScript
,
esc-. ,
HTIVIL- , ,
\t .

, .

.
\ .
.
\ \ . , JavaScript.
- ,
JavaScript
. \ t \ . ,
.
JavaScript .

3 *
,
esc- HTML-?
.

Q ; , HTML-

JavaScript ,
811, callNum
,
NaN
. esc-
? 1 f?
JavaScript,
HTML-,
; , . ! .
. , , -
. . ,
HTML ...
,
.
, .

> 525


: ;
, .
.
, ?

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

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

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

, . ,
?

526 11


; ;
, Jav aS crip t
. . .

= ==?

. ?
==
, =
.
, .
Jav aS crip t
,
.
?

. ,
,
.

. ,
.
,
,
.


! . ,

.
.
,
-
.

-
,
. ,
.
.
! .

> 527


8! ( # 4 )
, ,
.
, ,
. ,
. ,
.
81 Cas Wtn 3.
..

528 11


c a llN u m .



,
. ,
... ^ .

,
callN um
-
c m
.
, \

...

> 529
 ?

,
; .
, .
, F irefox.

SyntijiErf'-

! ass
tsij .-' 1
^ -
cm i ^ ^^^^^^acue-~

Firefox.



?
E r ro r C e n s o te ,
.......
. *
Efrors ws*9 Oear

*(**

.
,
.

,
.

530 11


, ,
,
.
, .
,
, .

51 $ 2: Win'g ^

00

-

.

! 1
2
! 3
! 4
: 5


.

,

. ,
JavaScipt,
.

* 531


,
,

.

D e b u g C o m o k,


.
DebugConsote
. 515()
.

div.

sh a d e d
tr u e
raise

,

.

div,

,
d iv
- div
.

,


-
.

"callNum: 2'

532 11


JavaScript
.
,
.

function DebugConsoleO {
//

);
var consoleElem = document.

consoleElem.id = "debug";
c o n s o le E le m . style. f o n t F a m . l y = m o n o s p a c ,
consoleElem.style.color - #333333 ,

(consoleElem);
document.body.

(document.
( " h r " ) );
consoleElem.

// . - . , . .

this. = false;

}
DebugConsole.prototype.displayMsg = function(msg) {

//
var msgElement = d o c u m e n t .c r e a t e E l e m e n t ( d i v ),

msgElement. a p p e n d C h i l d (d o c u m e n t............................................) -
"#FFFFFF
n ^ s g E l e m e n t . s t y l e . backgroundColor = this.shaded 7 "#EEEEEE" :

var consoleElem = d o c u m e n t .g e t E l e m e n t B y l d (...............)''

consoleElem. a p p e n d C h i l d ( ............

// ,

this.shaded = this.shaded;

msgElement "debug''

createElement createTextNode
appendChild

533


,
1 .

function DebugConsoleO {
//

var consoleElem = document. createElement

consoleElem.id = "debug" div

c o n s o leElem. style. f o n t F a m i l y = "monospace , ,
c o n s o l e E l e m . s t y l e .c o l o r = "# 3 3 3 3 3 3 ";



d o c u m e n t .b o d y . appendChild consoleElem);

appendChild document createElement ichr"));

consoleElem.
I

11 , .

this. shaded

false; false
^
^ .
-

-

DebugConsole. p r o t o t y p e . d i s p l a y M s g = f u n c t i o n ( m s g ) {

//
v a r m s g E l e m e n t = document .c r e a t e E l e m e n t (" d i v " );

div.
m s g E l e m e n t .a p p e n d C h i l d ( d o c u m e n t .
createTextNode (msg) ) ;

msgElement.style.backgroundColor = this.shaded ; "#EEEEEE" ; "#FFFFFF";

var consoleElem = document.getElementByld "debug

c o n s o l e E l e m .a p p e n d C h i l d ( ~ m s ^ ^ ^ n t j | ) ;

/ , 3 a . e , . . , . . . , ^^^^

th is .s h a d e d - ' | ; h i s .s h a d e d ; /
.
}

534 11


,
,
. d e b u g . j s
DebugConsole .
<script t y p e = " t e x t / j a v a s c r i p t ">

// DebugConsole
? .
var console = new DebugConsoleO;

r ^ ~ ~ - _________

, .
,
, .

_____ _ ____ Error Con ole

CD
S i
Alt ? Errors
ch
Messages
J
Clear

Evaluate
Q woKdocumenbboiJy has properties.

,

? , ^
. -


-. ...

( d i v ) ,
.
document.body.appendChild(console);

, - -
DebugConsole.

> 535
 ...

0) ,


, .
.

-
<tltle>BSI Case 2- WH
" "i n g C a U e r < / t i t l e >
,
<3cript t y p e - t e x t / j a v a s c r i p t " s r c - d.h
,
. avascript ">

function checkwlnnpr<f
// ,
var callNum;
++callNum;

//

form.submitO; ' "" callNum

today\s winner!");
else {

f s : : ~ ~ .

c a l lerField.select o';

<body> ___
<form name="callform a c t , . ' ' --- --------
-tbod...posT..>
"'oncLc\"-":?r " ' type...te.. />

</html> ------- ____ _____

^811
.

,
- .
, , ,
.

536 11


?
?

.


. , ,
.
.
DebugConsole ,
.


DebugConsole,
.

. . . 4.-. . -
? . . . . ? . .?.-^?.'
console %
,
onload'......

^ ^ <body onload="console = new DebugConsole (); ">

, - __ __________
^ KoHcojTbjo
onload.

8



.


. , .
.
,
.
Error Console

Hj !,
All Errors warninas Mtsses Oear
[ Evaluate


f r r o c diicumentiKHiy no proiaertits ^ .
tins: t
^ sourfile,

.

538 11


Jav aS crip t ;
: .
, !

.


a Jav aS c rip
.


, ,
,
<html>
, <head> 2; Winning Caller</title>
<title>BSI case
"debug. js"X/script>
ript type="text/Javascript"
.
:="text/javascript"
<script type^
7
;~nehua conaole global
----console * new D e b u g C o n s ^ ;

// Total number of calls

var callNum = 0;
winningNum)
function checkwinner(form caller;
// Increment the call number
var callNum;
, ++callNum;

con s o l e . displayMsg C'callNum; allNum ) ;

, - a...dinner
. ^ I N u n . . "... t o d a y s wlnne.l");
a l e r t (caller
, form, submit 0 ;
I
.

i f .

c o u n t e r 0. .

, .

* 539


i f .

c o u n t e r 0.

, . .

-...
-
, ,
,
c a llN u m . .
c a l l N u m NaN,
. ?

console.displayMsg("callNum: " + callNum)

BSI Case 2; Winning Cailer CD
^ ..
callNum.

Caller ; |Next caller Call

,

! callMums KaK
caiiNums HaH
callNums HaN
callNumt NaN
: NaS

540 11


)

, .
c a l l N u m ?

? ,
, , ,
.
?

,
,

.

.
Jav aS crip t ,
, .

, .

, .

.

* 541


,
.
. .

function checkwinner(form, caller, winningNum) {

console.displayMsgC'callNum; " + callNum);

/*<=-------
// Increment the call number
var callNum; 0.
++callNum;
,
// Check for a wil iner
if (callNum == wil' ningNum) { NaN.
caller number callNum today\'S
alert(caller +
winner!");
form.submit();
}
else {
// Reset the caller field for the next caller
var callerFieLfi = document.getElementByld('caller );
callerField.^lue = "Next caller";
callerFielcVfocus 0 ;
callerField.select 0;
)
*/ -
)

.


, ,

.

, ,
?

542 11


)
,
.
, c a llN u m
, . ,
- .
function checkwinner(form, caller, winningNum) {
console.displayMsg("callNum: " + callNum);

// Increment the call number
- " // var callNum;
-
. ++callNum; ----------- " ----- ^
ca llN um
Check for
11 winner .
p // if (callNum == winningNum) {
// alert(caller + ", caller number callNum
+ today\'s
winner!");
m Case 2: Wmning Caller
e 0

Id for the next caller

iment.getElementByld('caller');
iext caller";

callN um
,

.

543


,
callNum.

6 . . .; . .,. .. .-
^^.<<_6^ ^_ _ callN um .
. 9 . > . , -
^ >^^-
n o t n u m b e r .
, .

//
c3nj>o4Ku,
^ ++callNum;
,
^ ^ ^ ,
# 4 . \
ca llN u m ,

callN um ,
.

}
,
c a llN u m . ,
.


.
.

.

tcallNum;

++callNum;
.

,
6.
-
,
' 1
!
.
544 11


'
'^
!

,
?
, ,
,
.
0 ;
!. ,

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

!
! ) .

.

,
-
JavaScript

! 1
15 2
! 3
! 4
! 5
! !. 7...1*$ \1
1 1 8

.
> 545


(, .
^ , ^ ,
.

.: ^
1_. ^
.

(
^ -
;
esc-
, (\") ( \ ) .

= ^'
, -

, ,^^^ .

,
-,
onload.

^ , >
,
.

546 11


, ?

.
--------------- - ' |^, ! ---- -------

1
,
.
-
.
Ih

, .

,
.
. JavaS cript
Ajax,
. A jax
,

.


) YouCube
, ?
YouCube, JavaScript,
H T M L -
.
H T M L -, , .
.

~ -

YouCube - The Blog for Cube Puulers

SearehttmWogJ

backwMds...Ybur!
night Siuge was chasing , and St !rept i

->
-.
W o w %it took me a month but Ehc new cube is fmiOiy solved?

/ / Returr a foratte
BEog .prototype.toHTHI
/ / Use a gray back(
I var blogHTML

rate tlie for

^ T M L += <stn 7*7*7 cube. CoaB be my last blog post for a whUe...

9^/2008 that ssjpped carrying cube puzzles. Poweito ! puzzlers

Attended a tally ouBide of a local store

if a 7x7x7 cube. Mixed feelings.

Random Snsfotiy i

.'^

w Date(08/19/2008")),

ordered the scory 7x7x7 cube. Stortina n m^t-rn feelings.", new Date('"88/29/2008''^^
oily outside of 0 local toy stor thot stopped corrylm^r!^ reginen to p r e p a r e . n e u
' -----------*-*-!*,
0ateCm/ei/2m-))
r uPwo e^rr t oto t the ou^,l.i-
7x7x7 cube. Could be .y lost blog = * "
me a couple of weeks but the wh le... , new Date(09/05/2008")), Date("09/03/2008")),
f.nolly S O I , - , ne -cube777.p,.)

... ,
H T M L - /
YouCube.

550 12


!: './/\ \ ^.

,
^ _
. , ,
,
, , -.
.
, , .
,
.

-
.,,...

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

.
JavaScript
H T M L -
YouCube, ,
. :
. ,
.
,
HTML, CSS JavaScript.
y<wCube The Blog for Cube P om U*

m
bfPtakr
>


.

blog.xml
youcube.html

> 551


,


JavaScipt.

.
, , ,
,

. , JavaScript

,
Ajax.

552 12


Ajax )
Ajax -

.
, ,
Ajax. .
.

AjaK-

A ja x
. J a v a S c rip t
,
,

-
.

</head>
.
</so<SS>
^

youcube.html ^

.
.

^ ^ - .

,
-


, X M L
.
?
?

> 553
 htm l

HTML : XM L XML
ML H T M L
, H T M L

(), X M L -
, ,
.
. X!
,
.
?

IB 1 4 T M L - .

badtwaf(l.-.Yl!

X M L
. HTML,
, X M L !.. Powa- (he pusden

.
X M L -
.

554 12


^ XM L
X M L
, .
XML,
,
. HTML,
. XML
.

<movie>

<title>Gleaming the Cube</title>

<releaseDate>01/13/198 9</releaseDate> .

<director>Graeme Clifford</director>

<Summary>A skateboarder investigates the death of his adopted brother.</summary>

</movie>



<m ovie>.
, , ,
.
,
<director>
!

,
: 2
HTML XML .

<itunes:author> .

<span> .

<title> .

<strong>
.
<input> 15.

<prompt> -.

> 555


.
^

.... <ltunes :> .

.. <> ---- .

... <111> ^ 4 .

_ <>-- --
\ .
.. <1> ------- [.

... <prompt> -.

X M L
HTML, X M L - ,
L -
, . X M L
.xml, H T M L -
.html .htm.
.x m l.

blog.xml

556 12


X M L + HTML = XHTML XHTML

, X M L H T M L HTML,
, X H T M L .
HTML,
XML. ,
. H T M L
, , , <>, .
XML.

HTM L XHTM L
This is paragraph of text in HTML.<p> <p>This is paragraph of text in XHTML.</p>

8 HTML <p> 8 XHTML

no ce5e~
-
. .

H T M L X H T M L ,
<>,
, .

HTM L XHTM L
This is just sentence.<br />
This is just a sentence.<br>

B o m H T M L

. ^
.

H T M L X H T M L
.

HTM L XHTM L
< href=home.htnil>Go home</a> < href="home.html">Go home</a>

X H T M L
X H TM L. .

X H T M L ,
XML,
.

557
 XHTM L XML

HTML XML .

HTML

XM L
X H T M L .
.--
^ T M L : ------------XML:
, .
, -
.
,
.

, .

-. ,
.

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

!
,
,
?
. ,
.

... ,
?
! ,
,
.
, .

558 12


XM L u YouCube
X H T M L XML,
-.
YouCube
XML, . ,
XML.

YouCube - The Blog, for Cube Puzzlers

Blog.prototype.signature = "by Puzzler Ruby";

<entries>

<entry>


XML .

~ - '^ 1 >

h r Cube P u z z le rs < /title >
1^
<!>, < a u th o r> P u z z le r R u b y < /a u tk o r> V _ _ _ T e z < title >
...................................................................................................... - --............

..........................
_ ..........................................

- < d a te > ll/1 4 -/2 0 0 7 < /d a e e r

<en tries>.
.......cube I o rd e re d . I t s a re a l p e a r l. < / b o ^ >

< /e n tr u ^ i^
.. .....^.^ ,6 . .<ntsry>..

................ .
'' -
</blog>
.

^
B o iij> o c : b i

_ > ,
?
5= XML Ajax?

^ ! ,
,
! Ajax
Asynchronous JavaScript And XML ( JavaScript
XML), XML Ajax.
. XML
Ajax ,
,
XML.
, .
Ajax-,
.
XML
< e n t r i e s > ? , Ajax XML
Ajax
JavaScript.
Q : ,
Ajax JavaScript XML,
. ,
.
< e n t r i e s >
, XML Ajax,
< e n t r y > , .
< t i t l e > < a u t h o r > .
< e n t r i e s >
.

560 12


,
,
,
?

XML
, Ajax,
DOM.
X M L Ajax,
, ,
,
YouCube.
X M L
.
X M L H T M L (XHTML)
D O M X M L -,
.
JavaScript, X M L -,

-. X M L
,
.

> 561
 ajax

Ajax
X M L ,
YouCube Ajax.

A jax
XM L-
?

I

.
|

Ajax
,


.
X M L -
.

Y c w C u b e -T h e B




.

A j a x -

-
.
youcu6e.html

562 12


,
.

X M L -
.

blog.xml

..., &~
fefPut*-*'
Y o u C u b e - T h e 1<% C u b e P u a d e rs

A ja x


SMTChrteSoiif.......... '-
- 9/24/2008
a b u ^ w chastof me. snd it faq yeHmg name
.
9/19/2009

. Wow. me a niMth but me cube h Anally .-Mlved!

Piaster/11>
9/SOM

9/3/2008
t 1 ^ppedcarrying.pcvJ. *
1 6 -
8
1 ~ youcu5e.html

.
^

JavaScript,

Ajax .
JavaS cript
A jax ?

563
 JavaScript

XMLHttpRequest
BJavaScript XMLHttpRequest,
Ajax .
,
Ajax.

readyState X M LH ttpR equest

; ,
(), 1 (- .
), 2 ( ),
3 ( ), 4 (
/ ). abort()
/ status XMLHttpRequest
- .
( 404 ( -

\ ) 200 ().

V
. 5
,

.
open


Ajax. , U R L
.

onreadys tatechange send() S

,


. A jax
. .
responseText
.
t


responseXML
,
,

. X M L -. J .

564 12


XMLHttpRequest
X M L H t t p R e q u e s t . XMLHttpRequest
,
Ajax JavaScript. ,
.

,
.
X M L H t t p R e q u e s t , .
;

var request = null;
if (window.XMLHttpRequest) X M L H ttp R e c ^ u e s tj
{
-
try {

request = new XMLHttpRequest{); fer
IE.
} catch (e) {
request = null;
}
// ActiveX (IE)
} else if {window.ActiveXObject) {
try {
request = new ActiveXObject{"Msxml2.XMLHTTP ) ;
// ActiveX I E X M L H ttp R e q u e st
} c a t c h () { ,
ttry
request = new ActiveXObject("Microsoft.XMLHTTP" . J .
} catch(e){ ,
request = null;


O n e m m o p t r y - c a t c h


.
J a v a S c rip t.

, X M L H t t p R e q u e s t ,
.
__
.
request.onreadystatechange = handler;
request.open(type, url, true); // (true)

, ,
(Q E T POST).

("GET" "POST"),
U R L ,
. ,
, Ajax
.
* 565


U Ajax
Ajax , ,
,
. ,
, GET
, . HTML-,
, POST, ,
. GET POST.
GET
PO ST
.

^^^
. -
URL. GET
Pos

X M L -. ^ -.

PO ST
GET

Date: 0 9 / 2 6 / 2 0 0 8
Body: "These d r e a m s just.
I m a g e : c u b e a p a r t .p n g
XM L-
', -
' & ^5ET

N
. POST
,, ,

. 1 .
.

blog.xml
PO ST.
GET.

566 12


XMLHttpRequest
,

. ,
, GET POST.
d E T URL
.

request.open("GET", "blog.xml", true); // (true)

request.send(null);

XML

blog.xml
5() GET.
, ,
GET
.

/

POST.
>
, POST
. URL .
request.open("POST", "addblogentry.php", true); // (true)

r e q u e s t .s e t R e q u e s t H e a d e r (" C o n t e n t - T y p e " , " a p p l i c a t i o n / x - w w w - f o r m - u r l e n c o d e d ; c h a r s e t = U T F - 8 " );

request.send("09/26/2008&These dreams just..,&cubeapart.png");

51() .
,
GET POST,
,

YouCube.

> 567
 : ajax

XMLHttpRequest ,

, .
, ,
A^axRequest
Ajax-.
XMLHttpRequest
^-.
JavaScript,
.
, YouCube
,
XMLHttpRequest.
Ajax,
XMLHttpRequest .
Aj axRequest XMLHttpRequest
.

>
XMLHttpRequest
AjaxRequ&st
- \
MU '
XMLHttpRequest.

X M L H ttp R e q u e s t
re q u e s t
A ja x R e q u e s t.

Aj axRequest ,
XMLHttpRequest.
Aj axRequest, _ 5(0
AjaRecest
Ajax ;
.
AjaxRequest
var ajaxReq = new A j a x R e q u e s t ()


XM LH ttpRequest.

568 12


JavaScript
Aj axRequest
XMLHttpRequest, Ajax-
. send ()
. , .

. u n c t i o n , p o . t O a T , p , , P = .t . a , ,

if ( t h i s .r e q u e s t != null) {
//
t h i s .r e q u e s t .a b o r t () ;

// durrmy
url += "?du m m y = " + n e w Date (). g e t T i m e ;

try {

t h i s . r e q u e s t . o n r e a d y s t a t e c h a n g e = .................

t r u e ) ; // (true)
this .r e q u e s t .o p e n (............ '........... '

if ( t y p e .t o L o w e r C a s e 0 = = "get ) {
// GET;

t h i s .r e q u e s t .s e n d (. .) ;

^ / / ' L i p a B K a POST;

);
t h i s .r e q u e s t .s e t R e q u e s t H e a d e r (" C o n t e n t - T y p e " , ...................

this .r e q u e s t .s e n d ( .................. ' '

}
} c a t c h (e) { . f the s erver \n" + "Details: e)
a l e r t ( " A j a x e r r o r c o m m u n i c a t i n g w i t h the server. \

handler

postDataType PostData
ty p e

> 569


// ,

send () Aj axRequest.

sendQ
~
.

AjaxRequest.prototype.send= fun c tion(type, url, handler, postDat a T y p e , postData) (

if ( t h i s .r e q u e s t != null) {
//
t h i s .r e q u e s t .a b o r t ();

//I f J
-- d u m m y

url += "?du m m y = " + n e w D a t e ()- g e t T i m e (); h a n d le r

try
handler
t h i s .r e q u e s t .o n r e a d y s t a t e c h a n g e [ .

true); 11 (true)
t h i s .r e q u e s t .open.(. type

if ( t y p e .t o L o w e r C a s e () "get") { ^
// GET; ty p e
sendQ ,
t h i s .r e q u e s t .s e n d ( Q E T
P O S T
pi"I II
11 POST;

postDataType );
t h i s .r e q u e s t .s e t R e q u e s t H e a d e r ( " C o n t e n t - T y p e " ,

PostData );
t h i s .r e q u e s t .s e n d (
~
"

+ e) ;
a l e r t ( " A j a x e r r o r c o m m u n i c a t i n g w i t h the s e r v e r . \ n + Details.

-

POST.

oo
a ja x.js


A ja xR e q u e st. ajax.js

570 12


Ajax
Aj axRequest
, .
send (), AjaxRequest
Ajax. GET
POST, HTML.
Ajax
.

send(type, url, handler, postDataType, postData)

type
, G E T POST,
handler
url
U R L ( ,
YouCube blog.xml). .

URL. postData
postDataType (
( POST).
POST).
.

Ajax ,
GET .
,
Ajax
send ().
X M L movies.xml:
.
URL ^-
Tun . ,
.

ajaxReq.sendC'GET", "movies.xml " , handleRequest);
,

.

,
] ^


a ja x R e q . .

571
 ?

send {) , -
.
.
.
.

- - f o r C u b e P o K ie r s

,
**'*
-

^^youcujte.html

, Ajax
, ,
- .
. YouCube
.
^.

XMLHttpRequest - Ajax , get post,

Ajax.
.
Aj axRequest
Ajax, send () Aj axRequest
XMLHttpRequest. Ajax .

572 12


B o lIp o C b i
,
A j a x R e q u e s t ? HTML-. , .
Ajax ,
Q ; .
. .


.
X M L H t t p R e q u e s t . . Ajax
,
A j a x R e q u e s t .
? G E T P O S T ?
Ajax, . Ajax
; G E T P O S T
. .
. .
3 * / Ajax
/ ^ 5 Ajax .
HTTP?
? G E T P O S T ,
; HTTP
Q ; ! . ,
HTML- -. ,
Ajax . .
: Ajax . Ajax P O S T .
G E T .

9 -
.

XMLHttpRequest ,
.

GET
.

s e n d () ,
.

A jaxRequest JavaScript
^.

POST
Ajax.

573


XMLHttpRequest ,
.

GET
.

send() ,
.

AjaxRequest JavaScript
Ajax.

POST -
, Ajax.

AjaxR equest

X M U H ttp R e q u e b t

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

Ajax.

574 12


, Ajax
,
. , -
; YouCube , ,
X M L .

,
/AjaxRequest,
.

. AjaxRequest.

GET
blog.xml.

3
-- ,,

-

575


^
A j a x R e q u e s t
.

v a r oj'axRefj = n e w A ja xR e q u e stQ ;

a ja xR e q .se n d ("Q E T "j 'b lo g .x m l , h a n d le R e q u e st);

- ___
G E T . j -
X M L
. , U R L
^ ^ h andleR equestQ .

Ajax
. , Ajax ,
,
, Ajax,
.
, JavaScript
.
.

,

.

A j a x R e q u e s t .

@ -&-- handleRequest ;

-- hlo^ptwU-


(^ ^ ^ n a n d le R e q u e s t ( ) .

576 12


handleRequest (),

.

,
,
?

AjaxRequest.
Aj axRequest,
getResponseText {) getResponseXML ().

A jaxRequest

getResponseText()

Ajax .

g e t R e sponseXML()

, Ajax
.
X M L -.
getResponseXML (). ,
getResponseText ()
.

X M L H T M L .
X M L ?

>
577
 DOM

XM L
,
DOM?

DOM )

, ,
D O M
XML. , D O M HTML,
. ,
XML.
YouCube.

^<tltle>YouCube - The Blog for Cube Puzzlers</title>

<author>Puz2ler Ruby</authot>
<entries>
<entry>
<date>08/14/2008</date> ^ .
<body>Got the new cube I ordered. It's a real pearl.
</entry>

<entry>
<date>09/26/2008</date>
<body>These dreams just keep getting weirder...
a cube take itself apart. What <strong>does</strong> it
mean?</body>
<image>cubeapart.png</image>
</entry>
</blog>

author
<(>

, ~
-
.
"Puzzler Ruby
.....
XML, -
; , .
<>
YouCube ; ,
.
.

578 12


Q get]e^t()

getText ()
DO M .

function getText(elem)
~
var text = . ,

if (elem) { .

if (elem.childNodes) {
.
for (var 1 = 0 ; i < elem.childNodes.length; i++) {

var child = elem.childNodes[i];

if (child.nodeValue)

text += c hild.nodeValue;

else { ^ _______________

if (child.childNodes)
te x t.
if (child.childNodes[0].nodeValue)

text += child.childNodes[0].nodeValue;

,
, -

,
-
. te x t ,
.

return text;

.

,
X M L xmlData.
, Y o u C u b e
X M L - <author>.

V 579


, YouCube
XML- <author>.

't-riM
\^^'^/< ^J< aK ^cu zH ai'vvwM
M yp a

-
,
y e tT e x tQ <>_,
Blog. .
< a u th o r> .

^ ^ Q B P A S O T IC A . (
:
h a n d le R e q u e s t O

Head First: , handleRequestO: .

Ajax. ,
? .
handleRequestO: Head First: ?
, .
, , handleRequestO:


-.
-.
Head First: ,
Head First:
?
?
handleRequestO: .
handleRequestO: .
, , ,

Ajax-
,
, . Ajax
.
,
Head First: , .
?
Head First: Ajax
handleRequestO: , AjaxRequest
, ?
,
. handleRequestO: , .
Head First; .
Head First: ,
? handleRequestO: .

580 12


^ >

n jn iM e ^ a H u u U og-bffC H um e, j^ a S o m a e m

= W i J I e R e ' ^ s t O iu n c tio iL

1 - .

1 'J oC ogpH H ooxieU ,

y<3iemHo]viy ?

function handleRequestO {
if (ajaxReq.getReadyState == 4 && a j a x R e q . g e t S t a t u s () == 200) {
11 XML
var xmlData = a j a x R e q .g e t R e s p o n s e X M L ( ).g e t E l e m e n t s B y T a g N a m e ( " b l o g " ) [ ];

//
Blog.prototype.signature = "by " + g e t T e x t ( x m l D a t a .g e t E l e m e n t s B y T a g N a m e ( " a u t h o r " ) [0])

// Blog,
var entries = xmlData.getElementsByTagName("entry");
for (var 1 = 0 ; i < e n t r i e s .l e n g t h ; i ++) {
//
blog.push(new B l o g ( g e t T e x t ( e n t r i e s [ i ] .g e t E l e m e n t s B y T a g N a m e ( " b o d y " ) [0]),
new D a t e ( g e t T e x t ( e n t r i e s [ i ] .g e t E l e m e n t s B y T a g N a m e ( " d a t e " ) [ 0])),
g e t T e x t ( e n t r i e s [ i ] . g e t E l e m e n t s B y T a g N a m e ( " i m a g e " ) [0])));

//
s h o w B l o g (5) ;

> 581


I j o r n

* =1 Wicllej|e=ji'est().

X M L -
<>,

Ajax, ,
. '
<autkor>. yetE lem entsByTagN am eQ .
function handleRequestO {
if (ajaxReq.getReadyState == 4 && ajaxReq.getStatus == 2 00) {
// XML
var xmlData = j a x R e q . g e t R e s p o n s e X M L ().g e t E l e m e n t s B y T a g N a m e ( " b l o g " )

//
Blog.prototype.signature = "by " + g e t T e x t ( x m l D a t a .g e t E l e m e n t s B y T a g N a m e (" a u t h o r " ) [ Oi :

// Blog,
var entries = x m l D a t a . g e t E l e m e n t s B y T a g N a m e ( " e n t r y " ) ; ^ --------- , -
for (var i = 0; i < e n t r i e s .l e n g t h ; i ++) { ^^ -
/ / .

blog.push(new B l o g ( g e t T e x t ( e n t r i e s [i ] .g e t E l e m e n t s B y T a g N a m e (" b o d y " ) [ 0 ] ) ,

new D a t e ( g e t T e x t ( e n t r i e s [ i ] . g e t E l e m e n t s B y T a g N a m e ( " d a t e " ) [0]
g e t T e x t ( e n t r i e s [ i ] . g e t E l e m e n t s B y T a g N a m e ( " i m a g e " ) [0])));

//
s h o w B l o g (5);

51()

. pushQ
Array.

582 12


YouCube, ---------- - ~_7 -

\- YouCube
,
Ajax ( ), , h ttp ://w w w M e a d fin tla b s.
com /books/hfjs./.
r
<> ,
<author>
-,
, ,
<dat*>08/29/200</.
?

<body>FounO 7-77
<ntry>
<date>OB/?9/JOOS</da
<bo<ly>Mt up with SOI

prepare.</body>

__....,:*.':*'"'
<ttt>09/S/200e</(Jate> - tor

<ntry>
lae>0S/i9/2O0e</date>
<lme9e>cube777.pn,</imige>
</entry>
<*ntry>
<det>09/24/2008</dAte>
<bedy>I dre,d last night a

.*tP

_
^ I iJjoaied
408 _ ^ c h e s m s "
iff
Rubylast meht

'

XML... S S * = W 7.7.7 , . * , . . . . .

byPiuxterRniry ...
.

.

lo a d B lo g ( ) ,
wait.gif,
.

: d iv " ".

function loadBlog {

ajaxReq.send("GET", "blog.xml", handleRequest);

* 583


loadBlog ().

function loadBlog {

.7. src-w a it.g if' a j t - Loading... ' />";

ajaxReq.sendC'GET", "blog.xml", handleRequest); 8

}
innerH TM L, DOM,
. image
.
5 YouCub - The Blog for Cube Puzzlers^

r S VuCub. - The Blog tor C b e P *

.
.
N

Hioioc X N
001 aic X Search the Biog |j
wait.gif
S h o w All Bofl Entries | View a Random Mofl Entry

:> |= 1
J' YouCube HTML 'I readyState status?
<strong> . XML?
!
I , XML- XMLHttpRequest
. , , , (0) ,
-, , (4) , ,
HTML-, . 404 (not found), 200 ().
,
HTML-, XML- . , ,
, . 4 (loaded), 200 ().
, ^ handleRequest (),
,
HTIVIL-, XML-.
YouCube HTML-,
. ,
YouCube .

584 12


Ajax
YouCube,
. ,
.

Sean h the Biog - '

,
.
. ,
. ?
Show efoq Entries

View Random Biog Entry |

,
.

? ,


?
.

585
 ?

)
,
.
-,
; . ;-

.

.
,
. Ajax
, ,
,
handleRequest (),
.
disabled
<input>.
"disabled" -. ,
false JavaScript,
.

<input type="button" value="Search the Blog"

S e a rc h th e S lo g disabled="disabled" />
i

S m r c h th e il o p
buttonElem.disabled = false;

586 12


JavaScript
Y o u C u b e .
, .
.

ftl.>VoCub= - Th e Bio, oi Puz.ler=</tltle>

< s c r i p t type
<script type="text/javascript"

<script type="text/javascript">

f:.;ction h a n d l e R e q u e ^ O ( ^ a j a x R e q . g e t S t a t u s () == 200) {
if ( a j a x R e q . g e t R e a d y S t a t e

//

document.getElementByld! ) .

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

document.getElementByld(^ ) .

</script>
</head>

-e e .o ..

onclick="searchBlog0 ; " />

< i n p u t t y p e = " t e x f id="searchtext" name-searchtext" value-" />

:?SufSe:Corid="sbowall" v a l u e = " S b o w 11 B l o g E n t . i e . "

o n c l i c k = " s h o w B l o g 0 ; " />

<ln;:t;p:i"buln:';l"v;:;a::.m" value-Vle a R a n d o m B l o g Ent.y'^

o n c l i c k = " r a n d o m B l o g {);" />

"search" </ b o d y >

</html>

"showall" 1 "disabled"
"viewrandom" ^ | disabled | false 1

* 587


YouCube,
.

<html>
<head>
<title>YouCube - T h e B l o g for C u be P u z z l e r s < / t i t l e >

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

<script type="text/javascript" s r c = " d a t e .j s"> < / s c r i p t >

ocript type="text/ javascript">

function h a n d l e R e q u e s t O { onn^
if ( a j a x R e q . g e t R e a d y S t a t e 0 == 4 && aj a x R e q . g e t S t a t u s ! ) =- 200)

//

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

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

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

</script>
</head>

< b o d y o n l o a d = " l o a d B l o g ();">

< h 3 > Y o u C u b e - The B l o g for C u b e P u z z l e r s < / h 3 >
< i m g s r c = " c u b e . p n g " a l t = " Y o u C u b e " />
< i n p u t t y p e = " b u t t o n " i d = " s e a r c h " v a l u e = " S e a r c h the Blog"

disabled "disabled"

<input type="text" id="searchtext" name="searchtext" value-"" />

<div i d = " b l o g " x / d i v > ,
< i n p u t t y p e = " b u t t o n " i d = " s h o w a l l " v a l u e = " S h o w A ll B l o g E n t r i e s

"disabled"
discjsled

<input type="button" id="viewrandom"

i v a l u e = " V i e w a R a n d o m B l o g Entry"

disabled |.= "disabled" | o n c l i c k = " r a n d o m B l o g {) ;" />

</body>
</html>

588 12


, ^
YouCube
, .
.
X M L -,
.

FTP.
YouCube
!

= !
+


. ,

-.

YouCube - ArfdtaB totht o9fofC ubg_gugk

1; Adding to the Blog for Cube Pmriers

Image (optional):
Add tht New B o g Entry ] ,
!

V

.
A jax
X M L
-?

> 589


6
Ajax,
P O S T ,
, .xml.
.

blog.xml?
, JavaScript
.

, 1811 .
,
JavaScript. JavaScript ,

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

, , JavaScript,
.
,
...

590 12


,
X M L - . ,
X M L -,
. ,

Ajax-aanpoca . .
Date: ~ ~

lo o lc in ,..,.

A jax POST.

,
JavaScript,
,

.

blog.xml.

JavaScript, ...

blog.xml X M L - !

591


^ o in o B b i
blog.xml.


XML $rawB!og.

<?php
$filename "blog.xml";
,
if (file_exists($filename)) (
, // X ML XML.
$rawBlog = file_get_con t e n t s ( $ f i l e n a m e ) ;
}
. else {
// XML-
$ r a w B l o g = "<?xml v e r s i o n = \ " l .0\" e n c o d i n g = \ " u t f - 8 \ " ?>";
$ r a w B l o g .= " < b l o g X t i t l e > Y o u C u b e - T he B l o g for C ube P u zzlers</
title>";
"<author>Puzzler Ruby</author><entries></entriesX/blog>" ;
$rawBlog .=

$xml = new SimpleXmlElement($rawBlog); -- -

-
//
XML.
$ e n t r y = $ x m l - > e n t r i e s - > a d d C h i l d (" e n t r y " );

$entry->addChild("date", $ _ R E Q U E S T [" d a t e " ]);
$entry->addChild("body", s t r i p s l a s h e s ( $ _ R E Q U E S T [" b o d y " ])
XMLj
if ( $ _ R EQUEST["image"] != "")
$ e n t r y - > a d d C h i l d ( " i m a g e " , $ _ R E Q U E S T [ " i m a g e " ]);

DOM //
JavaScript. $file = f o p e n ( $ f i l e n a m e , '
f w r i t e ($file, $ x m l - > a s X M L (
fclose($file);
?> .

addblogentry.php

_

^ addblogentry.php.
* 1

3 * Ajax ,
? ,
YouCube. Ajax-
? , ,
Q j . ,
, ; . , . ,
. Ajax,
, Perl (CGI), , , blog.xml,
, .
, . ,
.
Ajax-. Ajax,
.

592 12


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

,

, -^

PHF .

,
-. ,
- JavaScript.

. .

addblogentry.php

.

youcube.html blog.xml ajax.js

-,

YouCube.

* 593
 php

-
, -
X M L -.
Ajax ,
. -
,
, , .
i^ax.

Date ^
.

Body Date; 10/04/2008

Body; "I'm really looking..."
. \iZ 3j
Image;

Image JavaScript
.
,
A jax
Ajax.


.
Ajax.
blog.xml.

<entry>
<date>10/04/2008</date>
<body>I'm really looking...</body>
<blog> <imageX/image>
<author>.. </entry>
<entries>
<entry>

PHP
X M L
- blog.xml.
blog.xml

blog.xml
, -,
- ,

Ajax. ,
,
.
.

594 12



' - YouCube,
.

A jax
~
PO ST
:

.
*
*
YouCube ~ Addif to the fof Cubt Poaaiefs .
* ( )
YouCube - Adding to the Blog for Cube Puidcrs
: |l0/04/Z008~_____________________________________ f
Body: jfm renlly ipoking forward to this puzile paRy al the end of the month


PO ST

A d d


A jax

A jax
,

XML
blog.xml.

596 12


POST GET,
.
,
URL.
Date: 10/04/2008
U R L -. Body: "I'm really looking.
(&), Image:

-------------------------
"date=10/04/2008&body=Im really looking forward... simage="

"
&
.

, (=), /
(&).
U R L ,
-
Ajax POST. - URL,

"application/x-www-form-urlencoded; charset~UTF-8"
POST.

,
, blog.xml.

URL,
post.

releaseDate: 01/13/1989

title: Gleaming the Cube director; Graeme Clifford

* 597


URL,
^ P O S T .

" releaseDate: 01/13/1989

title: Gleaming the Cube

director: Graeme Clifford

C liffo rd "

Ajax

Ajax, , ?
? Add ?

0 ; , .
! , Q ; Add
. ,
, . URL :
,
"date=...&=...&1="
. ,

. ,
Add .
GET? , -
. ,
, ,
I .
JavaScript ,

, ,
G E T ,
, . .
URL . ,
,
GET
, ,
. URL?
blog.xml
. Q l
, Ajax
P O S T ,

. .

598 12


S
a d d B l o g E n t r y ()
h a n d l e R e q u e s t ()
YouCube.

function addBlogEntry {

// Add busy

// Ajax

ajaxReq.sendC'POST", "addblogentry.php", handleRequest,

"application/x-www-form-urlencoded; charset=UTF-8",

function handleRequestO {

if (ajaxReq.getReadyState0 == 4 && a j a x R e q . g e t S t a t u s () == 2 00) {

// Add

//

alert("The new blog entry was successfully added.

599


addBlogEntry {) handleRequest ()
YouCube .
-
' A d d . 8

f u n c t i o n a d d B l o g E n t r y () {
b u sy ,
, .
// Add busy

= tru e ;

// Ajax
POST. ------------ ^ -------------- ---------------
ajaxReq.sendC'POST", "addblogentry.php", handleRequest,
.
"application/x-www-form-urlencoded; charset=UTF-8",

-f docum ent.getE iem entB yld("date).value +

&hody=" + docum ent.getE lem ent3yld("body").value +

"&:image=" + docum ent.getElem entByld("im age").value

-
POST
date, body image.
function handleRequestO {

if (ajaxReq.getReadyState 0 == 4 && a j a x R e q .g e t S t a t u s () == 200) {

// Add
^
= false; -- -
. , ................................
docum ent.getElem entByldC 'status").innerH TM L ?
............................................. ''" (^
.
//

alert("The new blog entry was successfully added.");

A d d


.

600 12


,
. ,

.
, .
!

_ VouCabe- The new 09 entry was suceessfuBy added.

YoaCube - Adding to the Blog for Cubc P u/ders

^/ __________
Body: p'm realiy looking at th* m d of th*
Icnage (opto^);
Newr f g j i s i j '

!

. V
,

. ^Y ouC ube.

YouCube - The 09 fo ' Cube 1> 15

,._
- The Blog for Cube

Search ihe Bag '

rm1^1ookingfwardtep*paya<<>dofeona..
by Pussier Ruby

These ju keep getting w eM er.,.ow I seeing a cube ^ e itself . What

doesitirean?

b y P a a k -Ruby

9m m m chastog me, and it kept yelimg my backwajds-.Ybm-t

I dteamed last night a huge cHbe was
by P v ^ r Ruby

9/19/200S j, a !* but the new cube finally solved!

byPuaJerRuby

601


^ 1

. ,
. ,
Ajax , ^
.
-.

,
.

. ,
.
,
.

. ,
,
Ajax,
,
Ajax.


.

VouCube * Adding to the 09 for Cube Puzzjers

YouCube / Adding to the Blog for Cube Puzzlers

Date|io/11/2008 __________ _ _ _ _ _ _ _
~ ............. - I
Image (optional);|
Add the Mew Biofl Entry |

,

602 12


, YouCube
//, ,
.

Date ,
YouCube.

?

.
, ,

,

,
.

y jT V P M

S h o r t F o r m a t ()
?

> 603


?
K O f l a J a v a S c r i p t JavaScript
,
.
, , A j a x R e q u e s t ,
a ja x .js. :

JavaScript
src

<script>.
<script type="text/javascript" src="ajax.js"> </script>
<81>.

s h o r t F o r m a t () D a t e
datejs,
YouCube.

Date .prototype.shortFormat - f u n c t i o n O {

return (this. getMonthO + 1) + "/" + this.getDate () + "/" + this .getFullYearO;

Ter < s c r i p t > , Ajax,

datejs.

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

J a v a S c rip t
,, -
-
date.js

<script>.

, .

604 12


. . youCu^-Tsoafof be
Y ooC uJ. The Blog for Cube Ihtucim

ffio^ jf "
101008

t ot es' "

byPiKiierRuby

Miwoee
W w jt took me a butfte nc* cube is ruMlly soh-ed:

( .

Q0
Y o u C u b e - A d d i n g t o I h c B lo g f o r C u b e P u i d c r s

im age (optional):
A d d t h e N w S t e 9 n g ! Lj

i n i t F o r m ( ) ,
o n l o a d .

.

> 605


' initForm ( ) ,
date
body.
date
.

Date()).shortFormat();

document.getElementByldC'body").Focus();

}
body.

- , YouCube. body.
Ajax ,
,
.
date

.

Adding to th e % fo r Cube 1 ^
Oaie:fio7i?l5o08

.
Y o u C u b e -T h e

Search theBog

flnaily flnistad wfflkiog OB tl blog scnpti

byPaakrRuh

rm ^ ^ ^ look m g foiward xo this puzitle paity at ic end o f 4 mon*.

by PuzxUr Ruby

9 T h (teams just keep geniiig weWer...now I'm seeingacube take itself apart, Whal
lioesitraean?

by Pmder Ruby
Done

606 12