0909661 43F68 Morrison m Izuchaem Javascript

J

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 .
ISBN 978-5-459-00322-2
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.
, 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
35
65
115
...
163
215
267
: ) )
311
: H T M L DOM
363
,::
411
10
465
11
. :
499
12
549
' ] ^
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
35
65
115
: /)^)(...
163
215
267
311
: H T M L DOM
363
411
465
10
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

! ,
.
, ,
. ,
, ,
. , :
,
.
12
, JavaS cript
118
119
122
123
5 1 1 1()
124
8 1()
125
129
130
131
132
133
51
137
812
138
140
141
142
147
JavaScript -
149
150
greetU ser()
151
152
154
156
... ,
159
|> 1 1
...
. ,
...
. !
.
. , ,
? , ,
? !
Welcone fo
S T IC K FIGURE
ADVEW TURE
flickeiiher
buitoN to
Start...
, !
164
, -
166
if
167
169
170
else
171
174
175
176
if/e ls e
182
if
183
185
186
190
!= ---, ...
191
192
194
/ /
195
197
198
199
202
203
sw itch /case
205
switch
206
211
13

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

8 11 ,
.
.
.
, .
, ,
.
Lthrotjgh3mSow4areavaiiaê.Accept?
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
303
304
307
15
1]=>|>

811 .
. ,
, , -,
. !,
-
.
.
^*...*
16
- 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
|=*
HTML DOM
- Java
Script . ,
... , , .
-,\,
-, , ,
. JavaScript HTML-
, ,
DOM.
html
j|;
r {
"" ^
^ 0^ ------- 1
364
365
H TM L-
367
368
(DOM)
373
374
377
380
385
387
388
389
390
391
: CSS DOM
392
393
394
395
396
style
397
399
400
402
403
404
407
17

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

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

1
. , .
, ,
. ,
.
,
. , .
, ...
20
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
-
,
.
. JavaScript
Ajax,
. Ajax
,

.
youcube.html
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
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
-
.
,

.
...
, . ,
,
,
. ...
. ,
- .
.
.
\
>
37
Javascript
JavaScript
JavaScript ,
. ,
,
. ,
, JavaScript -
, !
JavaScript -,
.
38
Please enter a number.
OK - " ?
codT Z iZ r
e o e
H ouse Finder - Matches_
T he following h o u s e s w ere found:

^^

.
110 Etm Street View
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>
^îdii'*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
body {
<input
font:14px arial;
</div>
text-align:center;
<div clas
}
<input
</div>
#frame {
<div clas
width:400px;
<input
}
</div>
<input tyi
#header {
<script type="text/javascript">
<input ty]
font:l6px arial;
function v a l i d a t e N u m b e r (value) {
</form>
font-weight:bold;
// Validate the number
</div>
margin-bottom:15px
/ / i f (!isNumber (value))
</body>
alertC'Please enter a number.");
)
</html>
#left {
float: left;
width:llOpx;
JavaScript
}
e) {
function v a l i d a t e Z I P C o d e (value)
// Validate the ZIP code
}
div.field {
margin-bottom;lOpx
text-align:right;
}
</style>
function calcPriceO
var maxPrice =
document.getE l e m e n t B y I d ( " i n c o m e ) .value
d4,
alert("You can afford a house that costs up to

maxPrice +
function findHouses(form)
var bedrooms =
do c u m e n t . getElementById("bedrooms ) .value,
HTML
.
var zipCode =
document.getElementByld("zip") .value;
// Display a list of matching houses from the server
form.submitO ;
|| </script>
CSS
.
40
JavaScript
^^ ,
f
^
1'.
House finder
@ 0
Rgfirfy tn flndanew bouse?
Enter your annual income: |

EnKsr fte numbo-of
E m s your ZIP wS--*-----
Done
__ _

,

...
House Finder

Enter your annual Income: jioooo
,
,
^
-
____
Enter the number of tiedrooms:

Enter your ZIP code: [95014
c >
Calculate Wee 1 Shop for H q u ^
Done
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

, .
House Finder ,
. .
<html>
<head>
<title>noMCK f l O M O B < / t i t l e >
function validateNumber(value)
//
// if (!isNumber(value))
a l e r t (", .");
}
/ J ^ t i o n validateZIPCode (value)
//
// if (iisZIPCode(value))
a l e r t (", ^
ler'
t:'("tibi' ^ $
function findHouses (form) {

^
. valuevar 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ê;:;^
/></div>
onblur="validateZIPCode W j i ^ a l u e
"
<input type="button" 1="1
oncliclc="calcPrice()
/>
înnnt f.vpe="button" 1 = " ^
, H ^ Tcl?îtodHouses (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>
//
//if
(!i s N u m b e r ( v a l u e ) )
a l e r t (",
.");
fÎ^ction validateZIPCode (value) {

~
I I
(
11 if (IisZIPCode(value))
V
a l e r t (", .
1 ---------------------
,
.
");

,
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">
<1 ="." a l t = " H o u s e ' ' ^ ^
,

income.
< 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"
onblur="validateNumber(this.value)"/></div>
,., -
ZIP co d e.
<div class="field">Bee :
<input id="zip" type="te::-.aiz^l0j^

onblur="validateZIPCode<tth^ 1^ /></dxv>
< input tvpe="button" 1="5 "
OTiclick="calcPrice ;
=" "
onclick="findHouses (this .form) ; />
- ' bULLun"
>:
</form>
</div>
</body>
</html>
44
^

.
< script >

JavaScript -,
.
, JavaScript...
< s c r i p t > .
-,
. :
<html>
<head>
<title>House Finder</title>

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

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

scrip t
JavaScript...
, HTML,
,.
</script>
,
/
<body>
HTML-.
<! HTML- >
</body>
</html>
---- <
-
,
< s c r i p t > ,
JavaScript?
; ... <script>
,
,
.
type="text/javascript'
------------
* : 1
/ I
?
Q;
. Microsoft
VBScript ( Visual
Basic) Ajax,
ASP.NET AJAX.
12.
.

javascript.
text/
< s c r i p t >
< h e a d > ?
0.
< s c r i p t >
...
.

CSS...
JavaScript
,
,
<head>.
45
HTML, CSS
U JavaScript
, HTM L-.
CSS ,
HTML. , JavaScript

...
, .
St" ,
URL...
"
S e 6 - c e p 6ep
,
&
H T M L -

55...
^
H0U5 FMer...
...
Enter your annual Income; jsoooo

Enter the number of bedrooms: |3
Enter your ZIPcode: |5ioi4
Ctone
__
you can afford a house that costs up to $320000.
46
^
-*
, HTML,

811?
JavaScript?
0
,
!.

. !

,
. ,
++ #,

.
1
,
.
! .
!
,
. ,
JavaScript

.

. ,
!.
, -

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

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

type.
,
, ,
,
,
JavaScript.
?
.
JavaScript,

. ,

.
.

! JavaScript

.
,
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>
//
/ / i f (!isNumber(value))
alert(", .
}
--- alert
);
function validateZIPCode(value) {
//
// if (IisZIPCode(value))
,
alert (", .
^ c a lc P ric e
JavaScript
/()
'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;
' f f 'alert("
'"
CjavaSc^/ Custom
C JavaScri^ Custom

valuevar bedrooms = document. getElementById( bedrooms^)-val
var
document.getElementByld( zip ).
//
findHouses
JavaScript ( jû s to n T )
Z ip C o d e
JavaScript (^CustoirT)
form.submitO ;
</script>
</head>
<body>
<div id="frame">
<div id="header">r0T0Bbi oa.</dlV
<dlv id="left">
<img src="house.png" alt="House
/> _____________

<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>
<div class="field">Bee (^^;^^
id="zip" type-"text"
s i z e = -n^
<lnput ia="ZipLYpeonblur="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) ;" />
(^Ja va S crlp Q Custom
^ ,

.
- v a ii^
( j a v a S c r l ^ Custom

.
o n c ii^ c k
(JavaS cript)/ Custom
,,

48
?
I

HTM L CSS
,
iRock.
,
.
- ... ,
iRock ...
.

{Rock.
HTML
LS!?'

.
Virtual t>et

iRock
.
.
.

iRock,
?
,
?
>
49
^Rock
1 ,
JavaScript.
.
.
1 -.
!
.
,

.
,
^
.
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
,
1 . ,
,
, ,

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

. .
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

JavaScript
. ,
alert {) .

, .
alert
^
Ja va5cript
,, ,
/.

, >
a lert
,

.

.

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

^
.
, 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>

onload even t _

,

<body>,

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

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

irock.html

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

<.
Hello, i am your pet rock.
54
'^
B o ilp o c jji
alert ?
1<
! , ,
,
. ,

( )
,

I , . alert ()
.
JavaScript

.
onload

.
o n l o a d
?

onload,
onload
0:.
<body>.
.
,
0:.

, ?
.
,
.
JavaScript ,
<script>?
; .

,
onload.
,

JavaScript iRock.

JavaScript.
! HTML JavaScript ,
,
...
.
, JavaScript
HTML (
),

. ,

JavaScript,
.
: iRock
Hello there.

JavaScript

.

.
alert

.

, oaJavaScript.
o n lo a d
0
a le rt
.
oaJavaScript.

.
,
.
>
55
9
, JavaScript.
.
JavaScript.

.
,
.
^Rock

1, ,
,
... ?
!
,

.
,
3
.

.
56
-- -
}
,
. , .
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
JavaScript
1 .
?
:

11.
/
<html>
<head>
<title>iRock - The Virtual Pet Rock</title>
<
type="text/javascript">
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

<scnpt>, ,
.
ty p e <script>
,
. 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";
}
}
</script>
</hpsd>
^
onload
^
<hody>

^ .
'

.
<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

JavaScript ,
1 .
, .

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

______ onclick="touchRook();
S t y l e = " cursor-.pointer
/>
mm
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/)
. -,
:
:
--444 =1=-
3 a c T a B t R ^ -
(Rock - The Virtual Pet Rode
ia
R <
lt
i f w
------------
-.
~141 0 ^^
-
i
3-
'

io u c h R o c k ().

onclick.

.
62
...
,

?
JavaScript

,

.
^
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

,
: , , . . JavaScript
.
JavaScript.
JavaScript

$19.95
number
boolean
text
JavaScript
: text, number boolean.
Number

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

,
.

. ; 8 1
("
')
('').
Boolean

true false.
;
,
,
;

.

4 .
JavaScript.
, .

.
>
67

,
JavaScript, ,
.
1 5 D G n lllts
1 , :
68
>
69

JavaScript.
Text
Object (

9).
/

B o o lean
1202

is-.
..
70
fi ^ ^
71

JavaScript,
, .
?
,
.

.5

, , ,

.
2-4 .
,

.
-
w w w .duncansdonuts.com
,
,
.

,
?
72

,

.
3 0 0

' ,

.
6 :4 3
,

.
32-4
,

.

, ,
, .
D o n (J ts
' .
1202
73

11^
,
, .
74
:

.

.
,

. ,
10 1.
?
, ,
, .
, ,

, ,
.
!
,
.
...
.

? ,
.
,
. -
?
,
.
?

. ,
.
, .
.
.
.

75

,
.
. v a r ,
. ,
JavaScript .
var

.

Ja va S crip t
.

, ,

.
v a r
.

. . -,
.
,
<.
^
v a r p a g e H its ;
^^.

,
.

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

X ,
, .
76

, .
,
.
.
:
,
...
.
.
.
.
.
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.

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

c o n s t
JavaScript,
.

,
,
.
/
const 1 4- \

. ,
. ,
, .

!
const

.
TAXRATE
.9 2 5 ;
,

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

.

,
,
.
,
, . ,

,

.
,
?
.
. .
(1
= 7 ).
( 10 0).
(50 ).
>
79
, :
,
.
. .

(1 = 7 ).
( 10 0).
(50 ).
var tem p;
,
,

.
const HUMANTODOQ = 7;
^
,
.
var countdow n - ;

X,
'

i-O.
var donutPrice = .SO; const PONUTPRICE = .SO;
80
,
.
.
B o iij= o c :b i
.
,
Q ;
, JavaScript

; .
,

, .
,
.
JavaScript
.
.
JavaScript .
, 17
X ,
.
seventeen, .
JavaScript
,
?
I

JavaScript. ,
,
,
.

.

. JavaScript

,
, .
,
,
. ,
,

?
!
,
. ,

.
" " , ,
false .

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

.
.

: text, number boolean.
v a r ,
c o n s t .
,
.
JavaScript
.
81
?
, JavaScript
, ,
. JavaScript
, (
, JavaScript ). ,
;

.

, ( J ($).
,
, (_) {$).
,
$, .
JavaScript
, .
.
, ,
.
, ,
.
,
.

.
82

,

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

.
:

.
chow
:

.
topSecret
J
:

,
.
:

,
$
$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

.

,
.

.
84
N n C a k e D o n u ts

,

.

.

,
_
JavaScript

. ,
.
.

() - ^
-
(hatch)
.

,
( n u m b e r of cups).
^ 5 ~
(the
- o f the
(ê,cord holder\
Cocm om ae (status)

, ().
^
number)

^ .
(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
,

JavaScript
86
Tax#
f ~
flour quantity
e c la ir W in n e r I
Tfc

,
.
...
! ,

. ,
,
.
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 âzed.

" 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 ,
,
88

JavaScript
.
( - + - )
, ,
.
,
811 .

JavaScipt

!

?
?
89

JavaScript,
, .

$NaN. ,
.
.
10
Duncan's
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/)
,
.
= .
90
, \

.

,

.
<html>
<head>
<title>noH4MKM BpeMeHM</title>
<link rel="stylesheet" type="text/css" href="donuts.css" />
function updateOrder() (
const TAXRATE;
const DONUTPRICE;
var
var
var
var
var
numCakeDonuts = document.getElementByld("cakedonuts").value
numGlazedDonuts = document.getElementByld("glazeddonuts").value;
subTotal - {numCakeDonuts + numGlazedDonuts) * DONUTPRICEtax = subTotal * TAXRATE;
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
... ...
.
, .
, .
... . ,

, , .
const
DONUTPRICE;7
JavaScript

a X.
"
^
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-
( 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;
var
subT otal =
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

,
.
,
DONUTPRICE :
NaN ,
.
const DONUTPRICE = 0.50;

_
;^
B o iIp o C b i

?
0 1

.

...
.
!
,
,
.

.

?
94
I
Donut,
,
g e t D o n u t ( ) ,
.
numDonuts.
,
.

.
, .

NaN
.
?

; ,
.
.
.
,
NaN , ,
?
. , NaN
JavaScript,
Q ;

.
JavaScript,
,
9.
-

.
,
.
,
...
.

.
...
......
Duncan's Just-In-Time Donuts
Altdonuis 50 cents each, cake or glazed!
Name: jcrS
I
I
GO 'FFEfE
Bom

.
-....
t 50F*;iaE ^
-0'0im9e ^
*>;MSUT5
SSSSSSSSSS?
iiSwmwS^^
>
95
)
JavaScript . ,

. , ,
.
1 + 2 = 3
"1" + "nuts" = "donuts"
^
-
>.
, ,
, , ,
?
?
, ,
?
5811
, . ,
,
, .
,
.
,
,

.
96
,

>
.

| 1 !
,

.

JavaScript.

, ,
.
$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
CD
Duncar*s Just-ln-Time Donuts
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
, .
, ,
.
JavaScript .
, .
98
^

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

,,
.

.
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

,

51().
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
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 umC akeDo nu ts =
A
V
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

,
.
NaN
,
.
, .

, (+).
p a r s e i n t ()
undefined, .
p a r s e F l o a t {) .
...
,
JavaScript.
.
6
_____________
j.a>
Duncan's JusMn-Time Donuts
rls irmoPu .
atpt 70 < a*'
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
}
: .
- .
,
.
.
0 0
Duncans Just-ln-Tim e Donuts
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
getElementByldO

. , JavaScript
, i d HTML:
<input
type= "text"
id= "cakedonuts"
nam e= "cakedonuts"
/> < -

(
donuts).
1(1

'.
# of cake donuts: 118
JavaScript -
ID g e t E l e m e n t B y l d ().
,
HTM L JavaScript.
v a l u e .
getE iem entB ylP Q

,
.
document.getElementByldO

,
!
einjiu.i , pu.umimJiiJm-Liw* iJiJiiiu

,
,
.
getE lem entB yldO
-
.
JavaScript
,
,
. JavaScript
.
. ,
,
.
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

104
^ tru e, ,

,
.
-^true
JavaScript
1 (1 ()
. , ,
, ,
. ,
.
("
.
fu4ction placeOrder0
V
if (..........
alert(
,

,
.
y o ' 'm ;; t 'p r o r i W e ', o
an o r d e r . " ) ;
J
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 ( ) ,

, .
,

S
nam e
J

.
f ui c t i o n p l a c e O r d e r
if
" "
getElementByld
docmaent
J(
.........
(
a le rt( " I'm sorry
e R n b m ittin g an o r d e r . " ) ;
^ getElementByld
else
if
a l e r t ("" before
getElementByld
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 {);
| ( "pickupminutes"
' value
is N a N j
106

:

.
^ pickupminutes"
1 T
.1
value
!
,

. 51
,
!
Duncan'
0 0
CD
DuncanS aust4n-T5ni0 Donuts

donuts 50 cents each, cake or glazed!
Name:
# of cake donuts: pL8
# of giazed donuts; j5o
Minutes 4it ptekup; jwwen
^
1$24
Tax:[S2.22~
Total; |$26.
P lace O rd er
.O '
Tenept>j

,

.
Ctone

^

.
Im sorry but you must provide your name

submitting an order.
before
i'm sorry but you must provide the number of minutes

ur>ti! pick-up before subm ittmg an order.
C ~ oT J
>
107
...

(+) ,
?
Q ; JavaScript,

. ,
, ,

.
,
. ,

.
, .
JavaScript 1

.

JavaScript,
i d , JavaScript
1.
,
JavaScript
.

.
JavaScript
1

1-?
parseint
p a r s e F l o a t ().
---
{)
,
p a r s e i n t
?
Q ; . JavaScript ,

, .
i d

JavaScript?
g e t E l e m e n t B y l d ()
d o c u m e n t ,
Q ;
HTML
JavaScript.
i d
. HTML,
JavaScript,
g e t E l e m e n t B y l d O
,
.
,
9,
! i d
, JavaScript
HTIVIL. ,
JavaScript
,
108

, -
.

d o cu m en t .

2 ...
,
-
.
Q ; JavaScript
,

.
,
.
,

, .
,
,

. ?
Q ;
.
; -
JavaScript .
,
.
v a l u e ,

. ,

.
,
? ,
, ?
;
,
,
.

,

.

, ,
. ,
, .
. ,
. 12 24 1 2
.
.
,
, .
Duncan's Just-In-Time Oojnuts
# 0 0

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
'
3 d o z e n .
# o f glazed donuts
3.
M inutes 'til pickup: jso

Subtotal; |$1 50
Tax; [$0.14
Total; j$1.64
parseint("3 dozen")
Done
,
dozen . p a r s e i n t ()
.
, .
ûcAOj
.

,
, dozen ? ?
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 =
SSSSSSSSSSSS
'
I
COTTER
110
' sssssssss
JaVa^cfipt
p a r s e D o n u t s ()
.
,
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 )
numDonut s *= 12;
r e t u r n n u mDo nu t s;
}

dny^Mi,^

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 {
const TAXRATE = 0.0925; ^
const DONUTPRICE = 0.50;
var numCakeDonuts = ParseDonuts(document.getElementByld("cakedonnh<,-M
ir
<
(ÎsStL'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 , ;
f Z
document.getElementByldC'subtotal").value =
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
+ subTotal
"5 " * ta x . t o F lx S ^ )
document.getElementByld("total").value = "$' + total.toFixed(2);

l lo M ^ p a x

( )
>
111
!

JavaScript,
.

@ 0 0
Duncan's lust-ltTim< Don s

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

,

.

?
. , -'!

. ,

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

.
JavaScript , .
,
. , JavaScript,
.
Duncan's Jost-in-Time Donuts
Duncan's Just-ln-TIm Donuts
CD
( )
.
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
116
...

. ,
JavaScript, .

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

<html>
<head>
<title>Duncan's Just-In-Time Donut..</t ^ .s
_
"
IP.- ri----p...........
g""
<sc
^
type "text/javascript">
unction u p d a t e O r d e r () {
parseDonuts(donutString)
function p l a c e O r d e r
__
------------------- --
JavaScript
).

.

( 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ê Donuts" />

<div id="right">
</div>
</div>
</body>
</html>
U iT V P M
, ?
>
117
, ...
) ?
oaJavaS cript,
. ,
-.
, JavaScript,
.
,
,
.
|>

-,
,
.

]81

, ^

.

581

.

,

-.
,
,

,
.
. ,
JavaScript ,
. , ,
.
118
____ <
-------
!
, 11
?
; . !

,
.
3 * !
,
?
!
?
Q ; JavaScript
,
.
,
.
,

,
.
Ajax.
0 ; .
!
,
.
,

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

,
.
...
...

.
0
^ ^ 8
,,
Hft
, .

. ,
1. ,
.
119
^Rock }
1,
,
.
.
/ .
nttp://w w w .keadfirstlab< ,.com /books/hfjS.

,

.
/^
,

, ,

.

1,

.
,
.
1?
!?
120
,
,

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

,

1. , ;
JavaScript 1
. ,
1 ,
;
.
...5
121
JavaScript
.
, ,
.
.
(!)

.
,
.

.
122

,

.

181
.

, 1) ; 2)
, .
.

,
, ,
2 2000 .
,
,
. ,
(
1
),
refreshO; setTimeout(refresh.

.
.
alert ( !)
JavaScript
. ,
,
.
.
~
\
500
300
5000
1/2
>
123
500
300
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( )

.
< ^ ^ '

6 0 0 0 0 0 );
s e t T i m e o u t (" a l e r t ('Wake
JavaScript,
.
,
setTim eoutQ
.
,
.
^ '^
s e t T i m e o u t ()
, 10
1;.
6>>
!
10 .
Wake up!
124
setTimeout()
setTimeout ():
setTimeout
,

.
.
-
,
, set Interval {).
.
:
var timerlD = setlnterval :" a l e r t ('Wake u p !')

.
XO .
I
Wake up!
n o .
1 -
~~îO .
Wake up!
t-O
Wake up!
'

_
.
Wake up!
. 9,1.3

'

, , ,
,

, ,
.
8

irock.htm l

,

.
, 5 iRock
. :
iRock rocklmg,
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.*. .
L-CKyJ^,
^ /'
, ' /Vî/\/

'
.......

(& ), ( 0 0 0 ).
.);............ . ...................................................... ^

(

$.
.,

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

Rock.

iRock
.
126

,

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

.

.
1
.
<
1|= :1

5 ,
?
! ,

.
, 5
,

.

,
5
.
,

?
!
,

,
.
D a te ,
9.

,
15 .
?
,

?
!
,
s e t l 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).
0 ; . !
,
!, ,
.
r e l o a d {)
l o c a t i o n :
lo c a t io n . r e lo a d ( ) ;

c l e a r I n t e r v a l ( ) .

,
s e t l n t e r v a l ( ) .
, ,
t i m e r ID ,
c l e a r l n t e r v a l ( )
: 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: ? Jav aS crip t

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

.
128
Head First: JavaScript?

: .

. A Jav aS crip t
.
.
.
Head First: ?
: ,
,
.
A Jav aS crip t
.
, Jav aS crip t

.
Head First: Jav aS crip t
. ?
: , Jav a S crip t
,
,
( )
.
Jav aS crip t .
, ,
.
Head First: . ,
.
Browser: , .

1,
.
, .
,
. ,
' 1 .

,
X
/Rock.
/\

.
>
129

,
1 .
, , ,

,
. ,

.

,
, ,

1.
, -

,

-.
1 ...
.
docnent. 1.11'1

.
.
<1.<1 1 1 1 (1
................... .
130
;
.
, - .
,
. 1 ,
.

docioment
d o c ijrn e p i

- .

- ,
Jav aS crip t

document.

<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 >
< 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 . ' ) ;
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 ,
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 . " ) ,
i f (userName)
a l e r t C ' I t i s good t o me e t you, " + userName + " . " ) ;
body.clientWidth
body.clientHeight

.

\& 3 8&

cm pam vp^>

.
" + userName + ". Thank y o u . " ) ;
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>
</ body>
</html>
4acao

^ o "Hf j=
o >eo C b l'
B
^ ! |-, -, ,
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";
132
6 coo
... />
^Rock )

, .
.
?
,
.
(clientWindowHeight - 100) * 0.9 = 1
% . ,
.

(100 ), 90 %
.
.
, 1,
133
resizeRock ()
onload, .
IP

.
function resizeRock {

,

.
1 -0 0

.
setTimeout ()
,
JavaScript.
,
, setlnterval ().

, .
134
style -
, , width height.
,
-.

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

.
iP h o n e!

.
,
. ... .
,
100 .
: HTML/CSS iRock
100
,
width height
CSS-
?

IRock JavaScript
,
onload?
.
100
(90 %)
.
,
Q l .
,

- JavaScript.

; ,

onload.
JavaScript
,
iRocl<, ,

onload.
135

? ?
,
.

, iR ock
. ,
o n l o a d .
.
;
136
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
.
81

.
138
1()

.
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
)
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

^ > & ^.
."EesBa

1

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

, ,

,
.
,
,
.
uM
-
iPaul
mituii Rocfc
,

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

.
,
...
? , ,
.
.
?
... ?
,
...
. ,
.
, ,
,
.
,
.
-
.
, , .
144
.
... !

.
,
.
, ,
, .
-
.
,
?

.
, ... .

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

. ,

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

.
, ,
,
.
?
, ?
145

, ,
.
,
,
.

, . ,
,
, 1?
,
.
,
, .
.
81
146
CBoucmBa kyku

,
. ,
, .

. ,

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

,
( ).

(;).

.
,od
"-
lang = fr_ca
6/25/2010
cartlD = 1103
11/4/2008
ite m i = F lat panel television

9/3/2008
'
,
,
, , ...
readCookieO
eraseCookieO
writeCookie
147
JavaScript

,
.

.
,
, .
. (
://).(1/5.///]$/)
.
f f
/
_^ -
function writeCookie(name,
//
value,
days)
f e ju d e
^ .
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
expires =
expires=" + date.toG M TStringO ;
'^.

.
1000));
}
// ,
d o c u m e n t .
c o o k i e = n a me + " = " + v a l u e
+ expires
path= /";
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) {
/ /
- 1)
w riteCookie(nam e.
var x;
yt
doXOI
}
eunctio doYO

cookie.js
148

cookie.js

.
.js
,

JavaScript.
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
<script>.
-,
I'Rock h tm l
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
J
- l e n t H e i g h t - 100)
function greetUser
. h e ig h t =
* 0 .9 ;
,
?
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
| 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.');

<^
^ ^
u se rN a m e
1

.
" S
' ' "
" f ' -
Memog greetUserl) kyku

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

,
.
151

1 ,
. 1 () ,
.
,
.
,
.
^ 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
152
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 ( ) ; "
/>
onclick!

&
iR o ck
to u c h R o c k () ,
g r e e t U s e r ( ) ,
, . ,
.
?
'
What is your name?

Paul
userName =
"Paul"

.

iR o ck

.
It is good to meet you, Paul.
>
153
1
, ,
.
, ,
...

.
,
.
,
,
,
.

,

.
,
,
.

,

.
**
,

.
;
... !
154

, ,

-.
"^
!

?
! .
,
,
. ,

.
( )
,
.
,
?
0

,
. ,

,
.
J'
?
Q * . ,
. ,
Internet Explorer,
Firefox Opera.
,
?
Q * , -,

( 4 )
.
. ,
,

.

,
.

,

,
.

,
.

?
0 . ,
.

,

.
, , .

. ,

,
,
. .

! ?
0 .
,

.

,
.
,
,
.
,
.
,
.
,
.

,

.
,
.
155

-
1 ,
. ,
1 ,
. , ,
1.
(
, .
cookieEnabled navigator,
Jav aS crip t .
navigator.cookieEnabled

J

.
156
tru e
false

,

>.

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.');
}
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 ,
-
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
Q ;
. , , ,
. , , ,
navigator.cookieEnabled.
... ,

, .

.
iRock - The Virtual Pet Rock
Cookies aren't supported/enabied tn your browser, which

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

...
,1,
159
Rock 2.0
iRock !
,

1 . 1
,
!

CSS
Rock

R o c k .
- Ths Vimalfet

, !

.
u serName = "Paul
160

iRock

.
7 ';1

,

.
^
JavaScript
?
-- -|>, !
------------------------- -
181,
81
. ,

11!
]=1
%
...
,
...
. 1
.
- , ,
? , ,
? !
, !

? , .
,

.
:
?
164

. !
,
. ,
.
...
:

? , ,
.
.
165
, -
Jav aS crip t
, ,
. o Jav aS crip t
- .
11 (
-;
, :
,
.
Brie
if (chosenContestant == "Eric")
alert("Eric, come on down!");

.
1
I
I
/
/
.

.
if \

.
166
_____
Eric, come on down!
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!" );
( n a v i g a t o r . cookieEnabled)
g r a d e = "A";
if
Ig u ilty . H E g u ilt y ,
g u ilt y
false.
tr u e ,
.
,
?
... .
, ,
. ,
,
... ,
, ,
:
. 1 f
,
.
168

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
else
i f / e l s e
i f .
e l s e ,
:
-I-
,

else

----------------------------- 1
\-------- 1
i f :
e l s e .
, .
1
?
0 ; !
, i f . i f
i f { ) ,
,
S ,
.

e l s e ?
. .
; . i f / 1 s
,
i f , , ,
, .
JavaScript
, ,
1 ?
e l s e . i f / e l s e
s w i t c h / c a s e ,
171

.
, aJav a S c rip t,
.
Sttck f S
V J e lc o r A G - t o
STICK FIGURE
adventu re
Click e'rtber
buttoM to
S b r iPleasc choose; A J - i J
^^
,
.

http://w w w. headfirstlabs. com/books/hfjs/ .
172
, JavaScnpt
.

,
.

.
2 5
,
.
2

.

^

.
.

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

.
_____
. f ^*^*^
1 " ^ ^ ^ ,
01
/ 1^
J. UA .
, 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.

,
. ,
, .
d e c is io n

1 2.
,

.
curScene
,
.

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
>^01

1 / 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();
doSomethingEise();
_____
i f / e l s e ,
:
if (chosenDoor == "") {
prize = "donuts";
alert{" !");
}
else {
prize = "pet rock";
'
alert(" !");
}
176

if/else.
3 *
?
?
0 ; 11
;
c u r S c e n e
.

,
,
.
1 2
d e c i s i o n .
c u r S c e n e
.

,
.
.
,

.

,
,
.
. ,

.
0 ;
, .
,

.
3 *
?
! . ,

.

,

.

'.

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

...................................................................................................................................... .
-----^
.<'? ~ .
strea m .;

.
8

} .
178
<1
bridge overlooking êaceful_

tv
3
.
------------------------------------------------
i f JavaScript
.

JavaScript .
i f
t r u e f a l s e .

( { } ) .
i f / e l s e

JavaScript.

i f i f / e l s e .

i f / e l s e
!
0
, ' ,
X

Z-
Pleasechoosc:
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

.
.
, .
.

1
.

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

.
^ .
...
?

.

, if / e ls e ?
>
181
... ...
noMouiû if/else
If (cu rSce n e is 2)

, ,
. , 5
:
If (d e cision is 1)
4
E lse
If (cu rSce n e is 4)
If (d ecision is 1)

if/else
?
8
E lse
5
, ,
. .
i f / e l s e ,
,
.
i f , .
.
: ?
, . ,
,
, : .
( ?)
( ?).
182
) ^f
Jav aS crip t
.
,
,
.

.

if

,

true.
if (order == "cheeseburger")
if (wantFries)
order += " fries";
else if (order == "salad")
if (wantFruit)
order += " fruit";
}
/
YnpouêHHiîu order
" order -r ...
8t>!

\\\\

1
.

1 ,

1,
if (curScene == ) I

, -
curScene = 1;
^ ,
message = "Your joum&y begins a t a fork /n the road-;
êlse if (curScene - - 1) {
if (decision == i ) {

if/else
t .
. curScene = Z;
message = "You have arrived a t a cute, little house in the woods.":
else.f ^
curScene = 3;
>mesSAge ~ "You are sta n d in ô n the bridge overlooking a peaceful stream.";
O m xm ym t
,

.
184
,

.
^

(1 2).
( ) ,
.
function changeScene(option)
}
</script>
</head>
<body>
<div style="margin-top:100px; text-align:center">
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/else

.
If (c u rSc e n e is 0) <
1
1
V ---- -------------- 3! E ls e (c u rSc e n e I s 1)

- > If (d ecision is 1)

if/else

.
2
2
E lse
2
3
E lse If (c u rSc e n e Is 2)
^
|=:1
=
JavaScript. ?
;
JavaScript .
,

.
,
!.
186
5=

one
i f ?
!: .
,
,
.
1 ,
.
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
}1

,
.
:
W e lc o n e t o
ADVENTUIÊ
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;
}
else if (curScene ==
curScene = 0;
s <

cu rS cen e,

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
! = m-c-c c, ...
,
, , , ,
0. ,
m e s s a g e - ?
.3
,

message

.

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

'

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

,
.
.
.
X ==
=
X
tr u e ,
X .
tr u e ,
.
<
tr u e ,
, .
UAU
X
false,
tr u e ,
.
< =
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

!

?
Q l .
. t r u e
f a l s e , .
,
. ?
n u l l ?
; n u l l ,
.
, 9 10.
! ,
JavaScript .
,
, ,
n u l l , " " , t r u e . ,
t r u e . ,

, n u l l , " " t r u e ,
f a l s e .
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 " ;
e ls e
q u o te += " I " ;
i f (b = = (a * 3)) {
i f (c < (b / 6 ) )
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))
q u o t e += " c a n ' t r e m e m b e r
e ls e
quote += " love";<i
d
false,
5 !d
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
.
194
- ^

.

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

, .
else if (curScene == 8) {
11
}
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 .
( )
- ^ / /
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

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

changeSceneQ ,
.
// cueHv
var curScene = n _
(|_
function ChangeScene(decision)
//
var message =

cu rS cen e

changeScene().,
,
.
if (curScene == 0)
curScene = 1 ;
,
^ - n e y begins at a fork in the road.
\ ^ e l s e if (curScene == 1) {
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
) ?

,
, . ,
,
.

^^
^ .
^ ^

< 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
!
,
JavaScript?
; !
811, ,
,
.

.
JavaScript
?
0 ; .
,
.

/ /
. / /
, .
!
JavaScipt.
,
. ,
11

, .

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

, ,
,
.

.

,
.
,
,
?
!
,
, ,
.
,

.
,
,
.
?
; . ,

,

.
,

. ,

,
.
, , ,
.
,
.

( / / ) .

.

.
,
.
/ *
* / .
>
201

? ,
; ?

.
... ,

.

!
?
202

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
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

.
:2
? s w i t c h / c a s e
, 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

case,

.
break
3 - ' ^
J - Q -

,

,

.
,

,
.
default

"d e fa u lt ^ ,

.
break

.
break

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

. :

({ ).
c a s e , ( : ).
,
. .
.
b r e a k ( ; ).
d e f 1 1
, .
( } ) .
_^
|=;

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

b r e a k ?
)
!
Break
Q ; b r e a k
s w i t c h /
c a s e .
,
,
.
c a s e
b r e a k .
s w i t c h / c a s e .
>
207
switch
Head First: ,
. ,
.
Switch: .
Head First: , .
Switch:
:.
,
. -
.
Head First: , I f
,
.
Switch: .
,
.
. .
If,
.
Head First: .
?
Switch:
.
, .

.
.
Head First: ,
B reak. , ?
Switch: , B reak
.
,
, ; ,
.
208
Head First: Case?

Switch: Case
,
,
.
.
Head First; Case
,
, . ,
?
Switch:
, .
D efault .
.
Head First: . D efau lt
Case?
Switch: . ,
. Case
,
D efau lt ,
. ,
, C ase
D efault, ,
,
.
Head First: . ,
. -
?
Switch: . ,
.
.
,
. ,
,
.
,
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 . ";

,
.
swiicn {CUrScene) I
case
'

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

case
if/else

.
case i :
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
-
,
, . ,
...
VJelcONVe t o
ST IC K FIGURE
Click e'rtber
buttoN to
StariPlease

.
.
, !
, . ,
...
!
*
211
)...
.
-
,
Jav aS crip t. ?
?
212

,

.
if/e lse ...

_
, Jiyiffle
f,OMVÔ
(Svv^t^p) I
if / else
, .
,
.
, .
U -K JT b i
, .

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

. ,
JavaS cript.
3 7 .
,
.
37
.
; !
( )
(37). 37
37 .
4,7
.
3 7
3 7 ~
1
- ,
37 .
, Jav aS crip t .
216
for

.
U )... for
Jav aS crip t .
, f o r
.
.
:

f o r .
,

.

,

.
'
V -----
.
.
f o r
?
>
217
for:
for
f o r ,
.
:
for (var X = 0; X < 37; -1-+)
X
,
U X = X +- .
takeStep();

,

1 .
f o r :
X 0.
, , 37. , 3
. , .
.
ta k e S te p ().
1 .
37 37, .
Jav aS crip t ;
.
,
0.
var X =

, X
37.
X < 37

ta k e S te p {).
37
ta k e S te p
^
^,
1.
++
218
X
X = X + 1.
for
f o r
. ,
f o r .

1.

for.
.
.
A c tio n
-,
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 > ; - - )

()

co u n t.
..................................
a le r t(" S ta r tin g in..." + x
alertC'Roll F ilm !"^

1 .
'

count.
}
else
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

.

.
hhicwKO.
!

.
J
,
,

.
,

,
.
51
_^
, ,
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 a n d a n g o
, H TM L?
HTM L

h ttp ://w w w .
headfirstlabs.
/b o o k s /
hfjs/.
222
<img
<img
<img
<img
<img
<img
<img
<img
<img
id = "se a tl"
id = "seat2"
id= "seat3"
id = "se at4 "
id = "seat5"
id = "se at6 "
id = "seat7"
id = "se at8 "
id = "se at9 "
M andanqo

.
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

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 " />
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 " />
sr c = ' 'se at_ 'avail.png" a l t = " A v a i l a b l e " />
s r c = 'se at_ "avail.png" a l t = " A v a i l a b l e " />
s r c = 'seat_ "avail.png" a l t = " A v a i l a b l e " />
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 " />
s r c = " s e a t "unavail.png" a l t = " U n a v a i l a b l e " />

,
JavaS cript.
,
,
JavaS cript.
.
var seatl = false;
0

boolean.
var seat2 = true;

var seats = false;
var seat4 = true;
var seats = true; ^
_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

, .
.
.

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: .
?
226
:
,
.
. ,
,
.
Head First: .
?
:
.
.
Head First: ?
: ,
?
,
.
Head First:
?
: .
Head First: !
: .
,
. ,
.
Head First: . ,

.
: . !

s e a t s M a n d a n g o ,
,
.
J y *
fo r?
f or ?
Q ; ?
,
, ,
.
,

,
.
Q ; ! , ,
,
.
.
,

, .

?

false,
?

,
,

f a l s e .

Q l . for
,
true.

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

,
,
, ,
. ,

, .
Q ; , .
0.
,
,
>
227
, s e a t s M a n d a n g o ,

.

,
.

,
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+) {
if (seats[ij)
a lertC 'S ea t + +
.............. k :
is available.");
else
a lertC 'S ea t " + + " is n o t available.");
Seat 1 is twaiSable.
Seat is not avaitable.
for JavaScript
228
,
(tru e )
(raise),

.
,
.
(++) ( )
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
. .
,,
.
0
1001
\llOiOl

101
5_.
51_811.
8_8.

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

IV

,
.

, - < 1 >
.
:
\
230
1 0.
, 1 9. ,
3, .
, .
1 1 2.
IJoAjôgHo
M a n d a n g o
i n i t S e a t s O ,
Jav aS crip t .
in it^ e a ts ()
,

.
,,

.
4UU
function initSeats O' {

^
/ / -
X
for (var i = 0; i < s eats.length; i++) {
if (seats[i]) {
//
i).src
documdht.getElementByld("seat"
i).alt
docujjifent.getElementByld
("seat
iocuafent.(
els/ {
11
document.getElementByld{"seat"
document.getElementByld("seat"
i ) .src
i) .alt

1 .
"seat_avail.png";
"Available seat";
"seat_unavail.png " ;
"Unavailable seat";
, s e a t
tr u e ,

ID

.
<body onl
<div St
<img
<img
<img
<img
<img
<img
<img
<img :
<img ;
</div>
</body>
=" in itS e a ts 0 ;" >

- " m a r g i n - t o p : 75px; t e x t - , a l i g n
s e a tO " s r c = " " a l t = "" />
" s e a t l " src=" " a l t =
" s e a t 2 " s r c = " " a l t = "" /> Am
at
' s e a t 3 " s r c = " " a l t = "" />
ped:
' s e a t 4 " s r c = " " a l t = ....
s e a t s " s r c = " ' " a l t = ....

s e a t 6 " s r c = " ' ' a l t = '
---/>
' s e a t ? " s r c = " ' ' a l t = ' ...
s e a t s " s r c = " '' a l t = '
/ X b r />
se a t
false
id
'seat&".
</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
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;
,
d o c u m e n t.g e tE le m e n tB y ld ( 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
+ it
= " " ;
+ i ) ....................
initSeats
+ D ..................
accept
= "se a t a v a il.p n g " ;
IselSeat
seats[i]
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 ,
^ ------------- --------------- -- ^
J .
s e a t s [] 1
if
I5$11]
//
selSeat
i;
+ i)
d o c u m e n t.g e tE le m e n tB y ld (" s e a t"
+ i) .
!accept~|j
,,

( i + 1)
co n firm ("S eat
accept
234
= " 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 C 's e a t"
//
;
+ " is
a v a ila b le .
A cc e p t? ");
1 ,
=
= "Y our s e a t " ;
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";
M an d a n g o
f o r .
, .
4
,

.
JasissiJ
Seat 4 is avaHable. Accept?
>
235
...

, ,
. , ,
, .

4 ,
.
236
'

,
, ,
f o r f i n d S e a t ( ) .
co n firm Q
/ ,
tr u e () false
( ).
fo r
11
if
( v a r i = 0; i < s e a t s . l e n g t h ; i+ + ) {
_^5
(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
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
= "s e a t_ se le c t.p n g " ;

= "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
^
!
,
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
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
/ /
v ar accep t = co n firm ("S eat
+
,
selSeat = - 1 ;
se le c t.p n g " ;
;
A ccep t?")
(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 _
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 " ;
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
document.g
e tE le m e n tB y ld ( " s e a t"
i ) . a l t
- "Your
/ /
" s e a t _ s e l e c t . p n g
v a r a c c e p t = c o n f ir m ("S e a t " + (i + D
+ " is
s e a t " ;
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
'
,
if
. ,
!
--------------------------------

^
iffor
(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"
document.getElementById("seat"
document.getElementById("seat"
+
+
+
+
+
+
i) .src = "seat_
i).alt = "Your
(i + l)).src =
(i + l)).alt =
(i + 2)).src =
(i + 2)).alt =
select.png";
seat";
"seat__select .png
"Your seat";
"seat_select.png
"Your seat";
//
v a r a c c e p t = c o n f i r m (" S e a t s " + ( i +
i f (accept) {
1)
+ " through " + (i +
3)
J
+ " a r e a v a i l a b l e . A c c e p t? " ) ;
// ,
break;
}
else {
// ,
s e l S e a t = - 1;
+
+
+
+
+
+
i).src = "seat_avail.png";
i).alt = "Available seat";
(i + l)).src = "seat_avail.png";
(i + l)).alt = "Available seat";
(i + 2)).src = "seat_avail.png";
(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
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

tr u e ,
tru e.

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

,
.
if ((largeDrink && largePopcorn)

freeCandyO ;
,
,
!
.
,
, . ,

.

.
244
|| coupon)

(free ca ndy)

.

,
.
Ti-
J
.
Q ; ,

,
t r u e f a l
s e .

.
,

, , . .

,
.
3 *
?
,
.
! .
. ,
,
.
l a r g e P o p c o r n , | | .
l a r g e D r i n k
&&
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

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
,
, .
.......
MachoMow
......

1
.
I
Seats 4 through 6 are avaitable. Accept
[andseaVii
('"C^cel j f
J
246
OK
U
M a n d a n g o ,
. ?
37 .
,
.
37 -
fo r ___

!
!
....

f o r .
. f o r ,
.

...

?

?
247
? ...
while
f o r
, .
f o r , w h i l e ,
.
(
).
w h i l e :
1
,

true.

,
.
1 U

.
,

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

,

.
while (!rockVisible)
takeStep ;
w h i l e :
, . ,
2, , .
.
t a k e S t e p ( ) .
t a k e S t e p ( ) .
takeStep
248
while
, f o r , w h i l e
:
,

tr u e false.
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");
,
count
.
if (count > 0) {
___
v a r X = count;
................

while.
while (x > O) {
................................................................................................................................................
a le r t( " S ta r tin g in..." + x);
........................................................................................................................................ X
1
.

.
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'" )
250
b r e a k ,
.
w h i l e ,
.
w h i l e
.

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

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

.
while (!finished)
dolt ;
___________
for (; !finished; )
dolt ;
\
f o r n w h i l e
. ,
.
251
fo r while

For While .
For:
, ,
.
,
.
,

.
,
, .
.

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

?
, ,
.
,

, .
,
. .
252
While;
For:
, ,
.
,
.
, . ,
. ,
.
! ,
.
!
, ... , ,
. .
. !
'^
1 1 | 1
3 * w h i l e
. - ?
; ... .
,

,
?
S .
.
t r u e . w h i l e
,
,
^ ; .
,
, , ,

w h i l e . ,
,

. ,

. ,

,
.

w h i l e ( t r u e ) ...?
f a l s 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; ++

while

!
takeStep();
f o r
_J

!

, ..
... !
? w h i l e
, , ...
M andango!
254
>
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
.
-
,
.
,
. (^ while.
J
,

"finished"
tru e.

"finished".
L
..!..??
..
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

"
a r e
a v a i l a b l e .
+ u
A c c e p t ? " ) ;
if_(acce0 ) , l ....................................................................................................... .........................

.....................
/ / ^ ^
finished - tru e;
.......................................................................................................
// 7''?10
256
"finished"
tr u e
.

break.
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));
_____

.
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
.
258
T rue - - ~ .

.
,
, .
,

X (
).
alert(18[1][3]);
___ 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++) (

,
( 1)
( j )
.
if (seats[i][j])
r t(" S e a t " + i -h " in ro w " + j + " is available.'');
alertC 'S ea t + i + " in ro w " +J + " is n o t available.");
,
(tru e )
(false),

.
'^
!

?
0 ; , .

--1-
.
. '
,

.

,
?
;

. ,
( 4).

s e a t s [ 4 ] .
p u s h ()
.
260
3 *

?
! . ,

,

. ,

,
.
,

.
Mandango
M an d an g o ,

. .

.

Mandango,
? ?
>
261
<htm l>
<head>
< title> M a n d a n g o - Ma4o</title>

M andango!
< 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 {

/ /
, co~
f o r ( v a r = 0; < 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 [ 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 {
/ / , 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 () ;
}
/ /
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 +
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
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 +
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 +
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
(
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
(

______

Find S e a ts,
(
.

w hile,
fo r

.
) ) .s r c = "seat_ select.p n g ";

) ) . a l t = "Your s e a t " ;
+ l) } .s r c = "seat_ select.p n g ";
+ 1 ) ) . a l t = "Your s e a t " ;
+ 2) ) . s r c = " s e a t _ s e l e c t .p n g " ;
+ 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
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"
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 "
d o c u m e n t.g e tE le m e n tB y Id (" s e a t'
d o c u m e n t.g e tE le m e n tB y Id { "se a 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 "
d o c u m e n t.g e tE le m e n tB y Id (" se at"
//
+
+
+
+
+
+
(
(
(
(i
{i
(i
sea ts[i].le n g th
s e a t s [ i ] . len g th
s e a t s [ i ] . le n g th
s e a t s [ i ] le n g th
sea ts[i].le n g th
s e a t s [ i ] . le n g th
i++;
< /scrip t>

< /head>
vT
in itSeatsQ

.
j ) ) . s r c = 's e a t _ a v a i l .p n g " ;
j ) ) . a l t = "A v ailab le s e a t" ;
j + l ) ) . s r c = " s e a t_ a v a il.p n g "
j + l ) ) . a l t = "A v ailab le s ea t"
j + 2) ) . s r c = " s e a t _ a v a i l . p n g "
2 ) ) , a l t = "A v ailab le s e a t"
<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/
V
<im g i d = ' " s e a t l S " s r c = " " a l t = " " / >
books/hfjs/).
^
^
"
a
l
t
=
"
/>
<img i d = ' " s e a t l G " s r c = "
<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 = " " / >
36
<img i d = " s e a t 2 3 " s r c = " " a l t = " " / >

...
"
/
x
b
r
"
a
l
t
=
"
/
>
<img i d = " s e a t 2 6 " s r c = "
!
<img i d = " s e a t 2? " s r c = " " a l t = " " / >
FindSeatsQ
,<im g i d = " s e a t 2 9 " s r c = " " a l t = " " / >
Find
Seats.
<img i d = " s e a t 3 1 " ' s r c = " " a l t = " " / >
<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 / >
< 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
Seats 2 through 4 in Row 3 are
iiip e
264
Cancel
available. Accept?
OK

,

.
?
\ } . . '!
,
.

.
.
:>
JavaScript ,
.
.
.
, .
, ,
.

-
.
.
?

. ,
; .
,
.
\
|1
1
, , ...
268

,
,
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();
}

,

,
,

().
270
, h e a t ()
. , .
, . ,
.
(1
,
.
, ,
. ;

fu n ctio n .
,

.
6

,

^> .
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
(i
document.getElementByld("seat
seats[i].length
seats[i].length
j)).src
j)).alt
"seatâvail.png";
"Available seat";
}
else {
//
seats[i].length + j)).src = "seat_unavail.png"

seats[i].length + j)).alt = "Unavailable seat"
i n i t S e a t s {) - M a n d an g o

o n l o a d .
.
iriitSeatsQ
M andanqo.
andango.
<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
^
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 ( ) .
.
, .
Request aisle s e a t.
Ask for refund
Throw popcorn
Receive tic k e t for aisle seat
G et refund
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

, ,
. ,
.
H e a t !
HEAT FIRST

.
.
12
heat (targetren*.) ;
h e a t ( ) .

. :
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

, ,
.
h e a t ( ) ,
:
heat (72) ;
------
6 .
h e a t () t a r g e t T e m p
, 72.
, .
72
function heat(targetTemp)
heatQ

.
alert (targetTeii5>) ;
}

ta r g e tT e m p .
,
.
,
9 10.
var ten^j = 80;

coollt (ten^)) ;
alert (teir^)) ;

,

.
te m p

.
function coollt(temperature)
temperature ;
>
277

, ; .
, ;
. ,
.
, - ,
,
:
// ,
1C
m a tin e e T ic k e t = a d u ltT ic .e t
/ /
(i
f/
_ . 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
r e tu r n
d is c o u n tP r ic e (p ric e ,
(p ric e
(1
p e rc e n ta g e )
(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 :
//
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
15%
= d iisco u n tP ric e (a d u ltT ic k e t,
20-s
childTicket = discountPrice(adultTicket,
278
20);
15);
fmJêatsO
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;
s e a t s [ i ] .l e n g t h +
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 ngth +
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
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
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 ] .length +
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 +
d o c u m e n t . g e t E l e m e n t B y l d ("seat" + (i
j) ) . s r c = " s e at_select.png";
j )).alt = "Your seat";
j + l) ) . s r c = " s e at_select.png";
j + l) ) . a l t = "Your s e a t ;
j + 2 ) ) . src = " s e a t _ s e l e c t . p n g " ;
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;
document.getElementByld("seat" +
(
(
(
(
(i
(
(
*
*
*
*
*
*
s e a t s [i]
s e a t s [i]
s e a t s [i]
s e a t s [i]
s e a t s [i]
s e a t s [i]
.l ength
.l ength
.l e n g t h
.l e n g t h
.l e ngth
.l e ngth
+
+
+
+
+
+
j)) .src
j) ) .alt
j + D ) .src
j + 1) ) .alt
j + 2) ) .src
j + 2) ) .alt
//
i++;
>
279
'^ ^
GnJêatsQ ^^ ]^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
s e a t s [[ Ji.J].l
eu
ng
tn
h -+I- j ) ) . a l t = " iYoouu r
seat";
-L * atiduto
. j.e
yc
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
d o c u m e n t .g e t E l e m e n t B y rai'"seat'"'"T
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
aocument.g e t E l e m e n t B y l d ("seat" + 7
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 +
.length 4seats[i .l e n g t h +
seats [i)'"iengETr+
seats[i].length +
j ) ) . a l t = "Ava i l a b l e s e a t ' T ^
-I- i)).gf'e' = "Sei r ^ a V a i i . p n l "
j
1 ) ) .alt = "__________
A v a i l a b l e _______
seat _
j'
^ "seat _ a v a i l . p n g ^
j + 2 ) ) . alt = "Ava i l a b l e seat";
N
//
i++;
280
len g th

.
^ 3 ^

:
, ^
, -
, 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
statusJ descrip tio n ) {
<^^Cj^_^^_>î.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
..........................
Mandango
s e t S e a t {) f i n d S e a t s ( ) .
function findSeatsO
6

setSeatQ .
//
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",

>'
* 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^
J se tS e a td
/ /
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)
" i n Row " + ( i + 1) + " a r e a v a i l a b l e . A c c e p t ? " ) ;

se tS e a tQ
.
^ ^ //^ ,
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
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) (
//
docvment.getElementById("seat" ^ (i
document. getElementBy Id ("seat" H (i
seats[i].length + j))-src
seats[i].length + j))-alt
"seat_avaxl.png
"Available seat
)
else {
//
document. getElementByld ("seat" (i
(i
document.getElementByld (' seat
}
)
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

,
setS e tO
.
e lse {
/ /
setSeat(i * seats[i].length + j
seat");
'Available seat");
"unavail", "Unavailable
, M a n d a n g o
, .
, .
s e t S e a t ( ) .

.

,
.

.
>
283
^
-
^ !
) ,

,

.

?
0 ; , .
,

. ,

,
,

.

,

.
! , .

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

.
,
,

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

,
, , , .
,
. ,
. ,
.
/ ^

} .

.

.
()
, ,
.
>
285

,
r e t u r n . ,
.
return
.
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) ;
return actualTea^;

r e tu r n -^

.

V

,
.
, g e tT e m p ()
:
while (getTen^sO < targetTemp)

// '
y e tT e m p Q

,
.
w hite
heatQ .
}
, g e tT e m p ( ) ,

w h ile .
286

r e t u r n ,
.

. h e a t ( ) :
function heat(targetTen^)
if (getTempO >

a c tu a lT em p ? g etT e m p O
.
targetTemp)"^
,, false
.
return false;
while (getTenÔ < 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 , .
{
r e tu r n
,

.
if (getTempO >= targetTemp)

return;
----- '
while (getTenÔ < targetTemp)
//

re tu rn .
return

.
*
287
return
^ ^
'
Head First: ,
.
.
, .
Return: .
, .
.
Head First: .
.
?
?
Head First: ?
Return: ,
- .
.
.
Head First: ?
Return: ,
, .
,
.
Head First:
, ,
-
. ?
Return: , .
, .

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

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

, .
,

, ,
.
Head First: ,
,
?
Return: , !
Head First: . ,
.
Return: .
!
, ! .
, , ,
. , ,
, .
, .
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

'^^,
^

^ .
-
if-else
_

,

.
,
Java5cripti^
constructClimateMsgO
var msg =
nisg += -1&-^; // "
\.
if
(getTemp 0
>
80)
msg += " ";

else
msg += "
if (getTempO <= 70)

return msg + "!";
else
return msg + "!";
function getTempO
/ /
var actualTemp = readSensor ();

return 44^ actualTemp; ^ _____ _

!
290

,

.

, 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 () ,
. , ,
. , .
, .
g e tS e a tS ta tu s ( s e a tN u m )
f u n c t i o n
i f
........... i =
-1
____________
+ 1)11
( .................r e t u r n
..................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
r e t u r n
{ .................. [ M a t h , f l o o r
( .............................../
" 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 ( ) .
function showSeatStatus(seatNum)
alert("This seat is " + getSeatStatus(seatNum) + ".");

}
292

,

g e tS e a tS ta tu sQ .
)
- 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
function findSeatsO
J a v a S c r ip t H T M L

H T M L - .
J ^ d y onload*"initSeats() ;">
<div style-'matgin-top:25px; text-align;center >
<img
<img
<img
<img
<img
<img
<img
<img
<img
<lmq
<ig

M andango

J a v a S c r ip t
HTML.
. _ 111
.. ..
_I alt
.howSea
id="seatO"
src=""
onclic)c="showSeatStatus (1); "
id="seatl" src="" alt="
o n c l i c k . = " showSeatStatus (2);"
id="seat2" src=" alt="
onclick="showSeatStatus(3);"
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);
id="seat4" src="" alt="
onclick="showSeatStatus(5);
ol
n
i'
c
t S t a t u s (8);
O
H.ciJl.J.
-lk'-= " s h o w S e a--id="seat8" src="" alt
id-"seat9" stc-"" a l t - - onolick="sboSeatStatus (9);
id-"seatlO stc--' a l t - - onclick-showSeatStatus 10
d-"seatll" src-" alt-"" onclick."sboSeatStatus 11
o n c l i c k = " s h o w S e a t S t a t u s ( 0 ) />
<img
alt=""
<img id="seatl2
alt=""
<img id*"seatl3' ' src="
alt=""
<img id="seatl4 ' src="
al t = " "
<img id="seatl5" src="'
<img id="seatl6" src=" alt"'
<img id="seatl7 src=" alt="
<img id="seatl8" src="' alt="
<img id="seatl9" src='" alt"
<img id="seat20" src=" ' alt=
<img id="seat21" src=" ' alt="
<img id="seat23" src=" alt="
<img id="seat25" src=" alt=""
<img id="seat26" src=" alt="
ait=""
<img id="seat27" src="
<img id="seat28" src="
<img id=seat29" src=" ' alt=""
<img id="seat30" src=" " alt=""
<img id="seat31" src=" " alt=""
/>
/>
/>
/>
/>
/>
/>
/xbr />
/>
1 />
, />
/>
o n c l i c k = " s h o w S e a t S t a t u s (12),
/>
o n c l i c k - " s h o w S e a t S t a t u s (13);
/>
onclick="showSeatStatus(14);
/>
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);"
o n c l i c k = s h o w S e a t S t a t u s (18); '
o n c l i c k = " s h o w S e a t S t a t u s (19);' '
o n c l i c k = " s h o w S e a t S t a t u s (20);'
/ X b r />
/>
/>
/>
/>
o n c l i c k = " s h o w S e a t S t a t u s (22);' />
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 ) ; />
o n c l i c k = " s h o w S e a t S t a t u s (25); " />

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
o n c l i c k = " s h o w S e a t S t a t u s ( 2 7 ) ; ' />
/>
" />
o n c l i c k * " s h o w S e a t S t a t u s (30); " />
o n c l i c k = " s h o w S e a t S t a t u s ( 3 2 ) ; " />
on c l ick='s h c w S e a t S t a t u s (29) ; " />
ait=""
<img id="seat32'" src="
<img id="seat33" src=^^"^ alt=""
<img id="seat34" src="" alt^
/--x b r -/>
o n c l i c k = " s h oi
wws
Se
eaa
ti
aitw
u-
s (\3 5 ) ;
i-toSuc
<img id="seat35" src="" alt
'Find Seats" onclick="findSeats0 ; "
<input type="button" id="findseats value
294
/>
)
? , .
- Jav aS crip t
, .
. ,
,
.
M an d an g o .
|
H T M L -

,
,
.
<style>
Bug
</style>
88-
,
,
.
<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-

, .
:
( ) ( ).
, , ,
.
, ,
. , ?
var myShowSeatStatus = showSeatStatus;
296
8
' .

.

,
. :
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 ---^
myShowSeatStatus
function() {
};
?
,
, .

,

.
var myShowSeatStatus = showSeatStatus;

yShow SeatStatusQ j

show SeatStatusQ .
myShowSeatStatus(23);

m y S h o w S e a tS ta tu s

.
, .
function doThis(num)
return num++;
}
function doThat(num)
return num ;
}
var X = doThis(11);
var Y = doThat;
var z = doThat(x);
X = (z);
= x;
alert(doThat(z - y));
OK
>
297
function doThis(num)
return num++;
}
function doThat(num)
return num ;
var X = doThis(11);
var = doThat;
var z = doThat (x) ;
X = (z);
= x;
alert(doThat(z - y));
X = 12.
'
= doThat
z - d o T h a t(lZ ) = 11
X = doThat(Xl-) = l O
= XO
a(eirt(doThat(XX - 1C))
_^

?

!, .
,
.
,
( ^ ; , .
.
, .
,
,
.
HTML,
CSS JavaScript-
, .
,

,

.

. ,
-
,
298
,
.
, ,
.
,
,
.
?
0 ; ,

.
,
. ,
(
),

.
,

?

,
. M a n d an g o
.
setSeat(i * seats [i] .length j, "select", "Your seat");
.
,
.

Mandango?
>
299
:
,
. ,
?
?
. ,
, ;
.
, .
,
.
, ,
, .
,
. ,
.
! ; ?
, .
, ,

. ,
, ?
. ,
.

,
.
. ,
.

.
,
, .
. .
, .
.
300
, HTML
,
, .
. , M an d an g o .
,

H T M L Jav aS crip t-

initSeatsQ
on/oadJ
^ ^ 1 S ii
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

onload.
C fb s m m onload
window.
Jav aS crip t ,
. o n l o a d
i n i t S e a t s () .
:
onload!
window.onload();
onload

window.onload...
initSeats ;
...
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

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)
};

s k o w S e a tS ta tu s (),
:

onclick
.

s h o w S e a t S t a t u s {),
. ,
.
.
, Jav aS crip t ,
,
e v t . .
e v e n 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 ;
<script>.
.
, initSeats ()
H T M L - onload <body>.
?

onload.
window.onload
//
f u n c t i o n ()
-------------- //
i n i t S e a t s ();

o n lo ad .
-----------
};
, onload
, . ,

.
304

onload

.
, ~~ o n lo a d ,

.
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

.
w i n d o w . o n l o a d = f u n c t i o n ()
11
fin d S e a ts O

o n c lic k
.
{
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)
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 =
{StpwSeatStatu^^^^
II
f u n c tio n (e v t)
initSeatsQ;
init5eats0

,
.

,
.

.
,
.
306

11, 1.
.
'
o n l o a d Mandango
?
;
.
o n l o a d .

w i n d o w . o n l o a d ,
,
.
Q ; . ,
< s c r i p t > . ,
.
, g e t E l e m e n t B y l d ()
.
o n l o a d ,
.
HTML-
JavaScript H T M L -
Mandango ,
.

HTML,
JavaScript.

o n l o a d ?

! ...
!
<body>
<div style"margin-top :75px; text-ali
gn;center">
<amg id-"seatO" src<img id="seatl" src-
<img id="seat2" src='
<img id"seat3" src-'
<irag ld"seat4" src-'
<img id-"seat5" src="
<lmg ld="seat6" src="
<img id-"seat7" src-"
<img id="seat8" src-"
<img id-"seat9" src-"
<img id-"seatlO" src<img id-"seatll" src-=
alt= .... />
<img id-"seatl2" src/>
alt='
<img id-"seatl3" srcalt= />
<lmg id-"seatl4" src- "" alt=
^
<img ld-"seatl5" src-'
alt=" />
<img id="seatl6" src-'
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 ld="seat39" src-"" alt=""
/ X b r />
<rnput type-"buttcn" id=
findseats" value-"Find Seats"
</aiv>
</body>
>
307
JavaScript
JavaScr^pt...
,
JavaScript.
, ,
,
, .
HEAT FIRST

Mandango. ,
...
34
i f 3
V-" -
_
through 3 in Row 4 are available. ?
308
Canctl

,

.
^
?
< -
---------
\ , ,!
< -
.
JavaScript
.
,
, 181.

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

11.
,
. ,
.

.
, -
. ,

.
,

.

,
.
Email
(1
.
312
HTML-

:
Sannerodty - P r s o a t i z e d ^ i J k y B a n n m
00
CD
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/
. ,
.
Enter the banner message;

Enter ZIP code of the location:
Enter the date for the message to be shown:
Enter vûr 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:
Enter your name:
1 1 ,2009
Seth Tinselman
/ iûr phone number: |(212)

Enter your email address:

.
March
555-5339
setht@mandango
^

, .biz.
7

/ / .
1
, JavaScript,
, .
, ,
.
32-
, //.
Enter the banner
message: | Mandango...
J a v a S c rip t
.
314
,

32 .
)
H T M L
!
, JavaScript
,
, 5811
...

. H T M L .
^ ^
id
~
id = "zip co d e " name="zipcode"
<input
type="text"
size="5"
/>
/

.
Enter ZIP code of the location: Iw o iT
------------

. -,
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 ) ;

};
, 8
< in p u t> .

,
.
,
g e tE le m e n tB y ld (),
.
>
315

^
'

form?
0:
I , ,
,
.

form.
,
.
Bannerocity.
(
) ?
?
0 :,I . JavaScript
form,
.
f rm [" j tn a m e " ]
v a l u e .
9 10.
,
JavaScipt.
.
, ?

.
,
? . ,

.
.
316

.

.
, ,
.
().

81.

(/).
(onf ocus).
...
0
onfocus!
------
Enter the banner message: | ^ ...

Enter Zip code of the location:
100012

onblur!
. 0 onfocus!
OonchangeT
Enter the date for the message to be shown;

Enter your name;
Enter your phone number:

,
.

, ,
.
317
-?
onblur

o n c h a n g e , ,
. ,
.
; o n b l u r ,
.
onfocus!
onblur

.
,

.
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 ; .
onkeypress, onkeyup, onkeydown . .

,
,
.

. ,
.
onblur.
318
o n f S. o n f o c u s
, o n b l u r
.
,
(),
.

.

. 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
Enter your name:
onchange?
e in w ^
Seth Tinselman
Enter your phone num

setht@mandango
onblur:
onchange:
>
319
onblur onchange
_ _ _
\
Enter your name:
onblur onchange
.
Seth Tinselman
iseiman
onbhtf!qj
onchange!
Enter your phone numb

setht@mandango
onchange!
onblur: ..^
onchange:

onblur onchange ,
.
onblur:
onchange:
,

. - .

. - .
.
. ,

... !
, .
,
.

.
,
?
320
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

,
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.");

false

-
return false;

,

tru e .
return true;
Please enter value.
,
: 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> , .
/ _
- input.
va lia a teN o n tm p

^
.
< 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 >
<span>
,
IP ,
phone
n u m b e r.

class

,
!

.
, span,
, ,
.
324
}

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)
h e lp te x t

.
if (InputField.value.length == 0) (
//
if (helpText != null)
-----
helpText.innerHTML = "Please enter a value.";

re tu rn
e ls e
fa ls e ;
/ / ,
if
(h e lp T e x t
!= n u l l )
,
h e lp te x t

(h e lp T e x t != n u ll),

in n e rH T M L

.
,

.
-^ "
helpText.innerHTML =
return true;
Bannerocity
.
JavaScript, .
Enter ZIP code of m e loMtior,: [

Enter the d ate for the m essag e to b e shown:

.
V
m m r a .
m a s e enter a value.
Enter your nam e: | S e th T in selm an

Enter your phone nymber: |
' Please enter a value.

' m e s s enter value.
Enter your email address: f

, .
,

.
325
>
,
, ,
? ,
.

...
.
326
...
,
32 ,
.
,
.
!
Enter the banner message:
5
,

00 .
Mandango... '

,
...

,
. ,
. ,
.
Enter the banner message: Mandangc-.. w

,
,
.

, ,
.
, .
>
327
~ m in L e n g tk
m a x L e n g th

i 7- .
,
.
, m axLenyth)
Else

v a l i d a t e L e n g t h () ,
.
Bannerocity ,

. . ,
,
.
h e lp T e x t) ;

,
.
.
m in U n g th
maxLength

.
............^ 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 {)
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
^
? o fo T T o T fo 7 f 7 Z 7 c ^ ^ a
.
>

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

'
function
v a l i d a t e L e n g t h ().
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

?
,
?
n a m e
i d
?
! ,
,
i d / n a m e
,

,
.

.
; i d h e l p t e x t
t h i s
o n b l u r .
?
ID _ h e l p .

,
.
h e l p t e x t
, ,

.
Q ; . HTML
t h i s
. t h i s
.
f o r m ,
. t h i s .
f o r m ,
o n b l u r , ,
.
t h i s . f o r m
Bannerocity
,

. , 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 ( ) ,

.

,
?
;

.
,

.
-
,
,
Q *
,

. ,

Bannerocity
.
.

.
,
helpText ,
null, ,
.
size

?
! , HTML- size

.
, ZIP code
Bannerocity size
5,
. ,
,
maxlength.

. ,

, ,
.
,
.
,
h e lp t e x t
?
>
331
)
,
.
,
.
,
.
1 2! 11 1<1;

I 4

1 .
^ '

.

!

. I
9, .
, I 1,
.
,
.
332

,
. .
,
, .
37205
# # # # #

^
-

v a lid a t e Z I P C o d e ( ) ,
.
function
//
if
validateZIPCode(inputField,
(
//
if
(helpText
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 .
function
'N.
validateZIPCode(InpLtField,
//
if
helpText)
in p u tF ie ld .v a lu e .le n g th
!=

( h e l p T e x t != n u l l )
//
if
h e l p T e x t .i n n e r H T M L
"
5.
.";
______
w ise.
//
else
//
if
if
(helpText
r e t u r n fa k e ........................ ........
~~
}
//
if
isN aN Q , N a N
( - ).
",
!= n u l l )
h e l p T e x t .i n n e r H T M L
else
^ ------------( is N a N (in p u tF ie ld .v a lu e )
) {
.........................................................
";
^
,
,
false.
(helpText
!= n u l l )
helpText.innerHTML
.

I
!
334
, .
,
, . ,
9 #####-####.
.
,
?

?
.
, ,

? Bannerocity

, ,
.

,

.
gantieroclw -
i t
/
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:
Enter the date (or the message to be shown:
"
"
Enter your nanne; |

Enter your phone number: j
8 enter a value,
nsase enter a vatas.
_
' Please enter a value.
Please enter value.
Enter your emaB address: |

Order Banner
,
O r d e r
B anner

.
, 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
fo r m ,
,
^ n Z t Z o K

^ ^ 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&

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 " ])
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 " ]))

//
__
a l e r t (",
5 ()

.
f o r m . s u b m i t ();
else
SS

_
' if/e ls e ,

.
")

,
.
Bonj>oCbi
p l a c e O r d e r ()
?
3 * ,
...
; i f / e l s e
,
,

,
. Order Banner
.

.
e l s e ,
a l e r t ( ) .
, s u b m i t ()
fo r m , .
,
s u b m i t ( ) . submit
HTML.
336

,
,
.
, , - ...
Enter thedate for the message to be shown: |05/1o/2008
337

, ,
, ,
. . ,
,
.
//
^ ,

.

.
- ...

3 0 0 0 !
>
,8,,|,.5 ;.1 ,
.
.
, ,
- ,
. .
, ,
.
:
,
.
"05"
,
, .
"05"
,
, .
,
, .
338

... .
"1 "
,
!
"2008"

,
.
"2 0 0 8 "
"1"
__
...
- .

...
?
339
)
JavaScript ,
,
. ,
, ,
... , !
, ,

.
340
,
.
.

,
,
.
.
"37205"
" 5 2 80"
3492"
"741265"
"0070"
, .
, ,

- .

.
,

:
!
...
= #####
,

S .
/
/ '\< 5 }$ /

-^_

.

, .
, ,
.

.
341
}
,
,
(/ /).

,
, .
.
:

.

,
.
\< 1

,
,

. .
,

.

.
.
\w

,
...
342
/ \ w /
/\d/<e

,

.

.
? :
/cat$/
[ \
c a t
...
!
/\d /
"2 n ite "

.^
"c a t c h 2 2 "
/\d\d$/
" 007"

.
1 ^ , .1
\ " / d /
/\d\d\d/
'
1
.
,
# # # # # - # # # # .
>
343

# # # # # - # # # # ,
.

.
^

.

...

.
, i^ b ip e .

, ,
. , ,
/howard/ howard
. , ,
. .
{ }

------
,

- ^3.
,
.
344

.

.

()

.
, ,
.
:
{}

?!.

,
.
/ + /
/ ( 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 ? ,

.
! .
.

,
.
,

.
346

?

.
Ql
1\ ,
!
JavaScript
,

.
1
:
,

Head First:
.
?
Head First: , ,
. ,
, ?
: , -
: .
, ,
, ,
. ,
. ,
, ,
.
.
, .
in d e x O f ()
, ,
, .
, , ,
.
...
.
Head First: ?
: ,
.
, , ,
, ,
.
Head First: i n d e x O f {)
S t r i n g ?
:
, .
,
, , ,
lam e, i n d e x O f () .
,
.
Head First:
?
: .

, -
,
. .

. ,
URL.
,
.
Head First:
?
:

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

, .
Head First: ,
.
: .
... ,
.
347
1

, , ,
Bannerocity
. JavaScript
R e g E x p , t e s t {).
.
test()
RegExp

.

RegEx.
,
,, .
var = /^\d{5}$/;
if (!regex test{inputField.-value))
/
te s t()

5 , ,
.
te s to

RegEx.
te s t o
tr u e
.
t e s t () ,
;
. v a l i d a t e R e g E x ().
:
,
.

; f a l s e .
validateRegEx(regex,

t r u e .
.

, .
348
inputStr,
helpText,
helpssage) ;
----------- --------- ------
fu n c t i o n validateRegEx(regex,
//
//
if (helpText != null)
.{
r e t u r n false;
if
h e lpMessage)
helpText. i n n e r H T M L = helpMessage;
" /
hllpText,
^ ^ ^
(iregex.tes
0
. e g e x . t e stt((ii n ppuut St bt rt r)n)
if
'
xnputStr,

, ,

.

,
.
- '
(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
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 ().

v a lid a t e N o n E m p t y ( )
,
.
function validateD ate(jnûtFieid, 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
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 ,
.

, .
, ,
.
.
,
, .

.
}
{}
.
, ,

.
:
{ m i n ^ ]

min ,
, max .
//

)
I
0 0|> 0 !

.

,
,

//
^

-

,

{}.

v a l i d a t e D a t e ()
, ,
.
351

'^
, .

{}

.
,

? ...

~

!
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
...

.
. , ,
|,
. ,
.
\

.
/ 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
'

.
( )

6 ,
.

,
, .

Bannerocity: .
...
ganterocity - P ersonateed Online S ^ S w n e f ^
# 0
b a n n e r o c i t y
^Vlandariga .. MecTa
Enter th e b an n er m essag e:
Enter ZIP co d e of the tocatton: jl 0012
Mano!
________ __
Enter th e d ate for th e m ess a g e to b e show n: j 03/11 /200 '

Enter youf nam e; j
Enter your phone nym ber;
___ _________ _____
Enter your em ail ad d ress; j

Order Banner
Done

,

.

,
.
354
m/14/1976}
?

, .
,
,
.
:
= # # # -# # # -# # # #

.

.
,
.
,
.

\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~^â
howard0bannerocity.com
sales@duncansdonuts.
puzzler0youcube.

.

/

/^ \w + (i\w + \
- \ \
.
.
,

.

. ,

.
41/
/ //
@

-
.

2., 3
4 .

?
, .
356

,
.

.
:
cube
lovers@youc\3be
aviator.howard0bannerocity.com
\_
.
i-love-donuts@duncansdonuts.com

.
------------- 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"
,

.
358

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

,
; .

1? .
LocalNameQDomainPrefix.DomainSuffix
,

~.
, ,

Z , 3 4
-
,

.
,
. .
. ,
,
.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
v a l i d a t e E m a i l ( ) ,
.
function validateEmail(inputField,
//
if
(!
helpText)
(inputField, helpText))
return false;
//
return validateRegEx(
.......................................
inputField.vaiue, helpText,
);
}
>
359
function
//
validateEmail (),
.
validateEmail(inputField,
helpText)
helpText))
return
//
false;
'^turn

validateN onEm ptyO -

,
.
validateRegEx (
inputField.vaiue,
helpText,
.9!}!^.\

, ,
, ., ,

,

4 .
( , 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, phmSo@Qecrm.oom).

Order Banner i
360

,

.
/
81 -?
|> , !
<-
Mandango... ! >
105012
03/11/200
212-555-5339
setht@mandango
/ ' " v a l ( l e y 1u e I k r i e ) /
... !
100012
March 11, 2009

(212) 555-5339
seth%t0mandango.us
/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.
00

...
.
Stick Fig ure Arfvem ure
VJelcOKG "to
STICK f m e
Clickeitlner
b u tto M "t
Sbri..
Please choose;

, .

...
364

,
.
.
:

://
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"
ID <div>
_______ ___ _____ ________^
?
,
"'^^^^'^-''changeScened) " />
f2 " value="2" onoHov .. ^
J
oncJ.iok= ChangeScene (2)" />
-v_
1
, .
11 <div> oyJavaScipt
. ,
...
i|
)
|>1

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

. id
HTML,
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

,

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

</body>
g e t E l e m e n t B y l d ( ) : ...... 4^f:'^jC (^.^nt.êtElem entByld[''oranQ e'')_

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

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

.
< id = " s to r y " >

<strong>oflMH</at;rong> ,

__

</>
innerHTML.
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
, innerH TM L

,
.
,

-,
.
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.
IP
, ,
, innerHTML.
<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
ripo
]|]= 1 1
< h tm l>
<head>
< title> npH K nra4eH M H
< sc rip t ty p e = "te x t/ja v a sc rip t">

//

var
cu rS cen e
4 e n O B 0 4 K a< /title>
fu n c tio n c h an g e S c e n e (d ec isio n )
/ /
var message =
sw itch
(cu rS cen e)
case 0:
cu rS cen e
( )
= 0;

message

.
message

.
= 1;
message = "yoar journey begins at a fork in the road.";

break;
case 1:
if
(d e c isio n
cu rS cen e
==
1)
= 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
//
document.getElementByld("scenetext").innerHTMb = message;
< /sc rip t>
< /h ead >

' message

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
< d iv
+ ".p n g ";
id = " sc en e te x t"> < /d iv x b r
P le a se
< in p u t
< in p u t
A d v en tu re"
/x b r
/>
o n c lic k = " c h a n g e S c e n e (1)"

o n c lic k = " c h a n g e S c e n e (2)"
/>
/>
/>
choose:
ty p e = "b u tto n id = " d e c isio n l"
ty p e = "b u tto n " id = " d e c isio n 2 "
v alu e = "l"
v a lu 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
HTML-?
Q ; ,
! . HTML - .
i d .

g e tE le m e n tB y ld ().
innerHTML.

, d iv ,
.
s p an ,
,
innerHTML?
! innerHTML

.
innerHTML.

innerHTML.
, , :
e le m .in n e rH T M L += "
.
,
innerHTML .
?
N.
1
)
. ?
innerHTML Microsoft
Internet Explorer.
,

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

-, , ,
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 .

element text.
document
DOM
.
ELEMENT
,

html.
H T M L -,
H T M L -.
ATTRIBUTE
TEXT
.

,
element.

,

element-.
DOCUMENT
, ,

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

^

,
.
ELEM ENT
elem ent
body
E LE M E N T
head
<strong>o</stro3>
.
</>
</body>
TEXT
TEXT
TEX T
" "
ELEM ENT
Jl
strongl
TEX T
'"
374
"b ."
8
head ,

.
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 "
tvpe=..btton.. id-..decisio2.. vale=..2~ on . .
</div>^\^
/>
D ocum ent
"=li=''-'t:hangescene(2)" />
element
html
,
. text.
head
ELEMENT
TEXT
im g g
1,^ I
- J
TEXT
TEXT
ELEMENT
376
ELEMENT
elem ent
elem ent
E ^ M ^ t te x t
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
node
11

,
.
,
DOCUMENT TEXT,
.
11
firstChild
lastChild
, ;

.
;
. ,

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

.
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 tE le m e n tsB y T a g N a m e ()
DOM?
,
JavaScript,
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
.
, ,
()
378
g e tE lem en tB y T ag N am e ().
CSS .
g e tE le m e n ts B y T a g N a m e ()
(),
.

...

?
_______ /
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
""
strong
TEXT
".'
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
, )^ ^ .

, ,
. ,
, ,
.
^
.
.
,

.
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, . " ) ) ;
^

.
& ,
( , ,

381
DOM
:
,

Head First: ,
D O M ,
H T M L -. ?
: , ,
, D O M
.
, D O M
...
!
Head First: ?

?
: ,

.
Head First:
- ?
- ,
, .
: D O M
,
. D O M
.
Head First: ? , ,
, - ?
: . ,
.
Head First: ! ?
: ,
?
.
.
D O M .
382
Head First: ?
?
: , .
,
< d i v > <sp an > .

, , .
,
. , ,
< d iv > ,
,
d iv .
Head First:
?
: , D O M
.
, :
ELEMENT,
TEXT.
Head First:

TEXT?
: . ,
no d e T y p e .
, TEXT 3,
ELEMENT 1. ,
,

.
Head First: . ,

DOM.
: . -

, .
!
pElem .childN odes[z]

1
,
.
,
-^ -J L
^ -
childNodes?
Strong
1
, ,
. ,
0 ='

strong
,
,
.

p E iem .ckM N o d e.s[0]
childNodes

.

.

childNodes [ ] .
<
.
,"
Ql
while(node.firstChild)
,

,
true,
.
,
.
node.firstChild
null,
false.
.

while,
?
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

, .
,

.
,
,
.

IP.
message
>^ ,

.

sceneTexI = d o c u m e n t . g e t E l e m e ^ ^ I d C
w h ile (
firstChild
sceneText
sceneText
removeChild (
sceneText
^ ^ ^ ^ p ^ ^ K h i W j ^ d o c u m e n t . createT extN o de {
,
) 00020

.

,

.
384
innerHTML, ,
.
DOM -
.
, DOM,

.
DOM

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

HTML,
innerHTML.
>
385

, .
,
)' 1 2!

,
-
.
Pleasechoose; I
,

,
.
,

. ,

, :

B rU ge
G a ise h te Stream
! ^
_

.

HTML,
.
CSS.
386
, ^

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 " ;

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

.
, <input>.
; CSS- decision.
Start Game
( ).
Pksiscchoose;
'>
:"'12'.'.

,

I!
SttrttSere
387
- ^
'
, ,
< in p u t > :
Please choose:
<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

?
U

, ,
span.

D OM . , -

: ...
388
, ^
, ,
.
.
:
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
'^
!
,
c r e a t e T e x t N o d e ( ) ?
d i v

s p a n ?
;
,

, d i v . ,

span.

c r e a t e T e x t N o d e ( )
Q ; .

,
DOM.

,
.
! .
in n e r H T M L
. DOM

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

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 ;

style.
b o r d e r : t h i n s o l i d # 000000;
p a d d i n g : 5px;
b a c k g r o u n d - c o l o r : #DDDDDD;
)
< /sty le >
D O M
className .
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 ) ;
className

.
decision
className

.
392
I
CSS
^ !

JavaScript.
t o
CSS
JavaScript

. CSS
,

,
JavaScript

.

10.

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 " ;

!
span.decisioninverse {
font-weight.
-bold,

, className.
font-color;#FFFFFF;
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)"

^^^~ônm ouseover= "tkis.classN am e - 'decisionhover'"
............... > S t a r t Game</span>
e m n u Z f^ n p u

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,'^,ômeoYer=4his.className - 'decisionkover'"
o nm ouseout-4kis.classN am e - 'decision'"
></span>
,
span. .
o n m ouseout
| 1
,
, CSS?

:
.
! .
, CSS
, JavaScript.
, JavaScript,
CSS. ,

.
span.decision {
font-weight:bold;
border;thin solid #000000;
padding:5px;
background-color:#DDDDDD;
41
span.decisionhover {
font-weight;bold;
border:thin solid #000000;
padding;5px;
background-color:#EEEEEE;
</style>
</style>
WaBt around Back Knock on Door
394
)
D O M

. .
Stick
M&p
Y have m ived
hfosefn * / d s.
I '
"^
BoiiJôCbi
'
|
g e t E l e m e n t B y l d {) ?
Q ; ,
JavaScript,
. ,
, HTML-

^ 1
o n m o u s e o v e r o n m o u s e o u t.
,
, .

, ,

0;; JavaScript
t h i s .

span.

,

6i
. ?
0:; !

.

JavaScript DOIV!
...
classN am e
t h i s . c la s s N a m e .
395

,
.
,
, . - ,
,
, .
stick Figure feJvervture

.
.
VJelcONVe {
STICK FIGURE
ADVENTURE

? ?
396
style
. ,
, style.
style
. , visibility
. -
:
style

.
<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

5 .
case 7:
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
className
visibility .
style
.
CSS
JavaScript .

display.
, ,
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
...
?
<

.

,

, .

.
>
401

.

.
, .
,
, .

.
.
...
1 .
2 .
3 .
8 .
11-
402

4.

_
,
.
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
HTML
1-
c r e a te E le m e n t ()
. , (),
"" ,
.

,
.
v a r d ec isio n E lem = document. c r e a t e E l e m e n t (" " );
, ,
.
,
.
d e c is io n E le m .a p p e n d C h ild C 'D e c is io n 1 -> 1 : . " ) ) ;

,
,

^
" D ecisio n 1 -> 1 : .'

d iv .
d o c u m e n t .g e t E l e m e n t B y I d ( " h i s to r y " ) . app en dC hild (d e cisio n E le m )

div,

.
<div id="history">
" D e c is io n 1 -> 1
.
^^<p>Decision 1 -> 1 : .</
</div>
,
.
404
-ft-
HTML-
c r e a t e E le m e n t
DOM,

d o c u m e n t.

. :
,
.
.
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
.
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);

div.
}
eise (
//
while (history.firstChild)_
,

.
406
)

.
.
------
VJelcoweto
STICK FIGURE
adventure
/->4
Vour journey begha at a f a t in ee io 3.

[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 t o 1
Sfc, * ^
407
, ...
,

,
, .
...

.
...
!
408

,

.
, 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:
95099
5280 Unravel Avenue

Conundrum, AZ 85399
USA
;
, .
412
+ =
581
. ,
, ,
.

JavaScript, :

var who;

function display(what, when, where)
function display!)
function deliver 0
var what;
var when;
var where;

.
invitation
. ,
,
, .

.
,
.
,
.
>
413

. ,
. - ,
,
.
*^
414
.
, ,
.
, .
"
/
.

, .
, , ,
, .
,
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 ;
"
"

invitation.

.
tru e
,,
false .
1
?
- ?
,
JavaScript

!
.
,
.
,
.
.
,

. ,

. ,
,
object.

JavaScript.

.
?
-
( ).
Q ; , ,
JavaScript,
.

S . ,

.
. , alert

,
,
.
416
alert().
. ,
,

.

,
3 ' .
,
?
; ,
.
,
, .
1\ ,
. ,
.
,
alert
{)
,

. ,
,
.
()
window,
window . alert () .
window

. ,

,
, ,
alert
() .
,
.

, .
,
.
, - , .

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

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

YouCube
>
417
YouCube
. ,
, , ,
JavaScript.
!
YouCube,
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

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";
when = "Sometime";
where = "Somewhere";
var who = "Somebody";

var what = "Something ,
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

. 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!^....
.
~~~~- -
^

this

.
................
tkis.dau =
}
blog
Blog ,
. ,
, .
, ,
new, ,
. ^

log.
,

n tt p : / / w w w .headfirstlabs.com /
books/hfjs/.
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
a reatpe^dT^'
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 . . . " ,

log().
422
6 .
" 0 8 /1 4 /2 0 0 8 " );
,
n e w ?
; ! n e w

.

n e w
.

n e w .
t h i s ?
,
.

Q l ,
. ,
. ,
. ,

-
. ,

, - .
, !
.
, ,

,

.
!

, .
. t h i s

.
t h i s . d a t e ,
S.
,
d a t e
, .
,
. ,
.
08/14/2008
^ r*v
B l o g b l o g ,

YouCube. ,
.
tfie new cuBe. I ordered. I t s

a reaCpearC.
got
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
onCtne. yiês! That one could be
a 0east.
7 x 7 x 7
423
rv
Blog
blog,
YouCube.
08/14/2008
got the new cube I ordered. It

a reaCpearC.
va r blog =
^ ordered...", "OS/X4-/ZOOS"),
08/19/2008
SoCvedthe new h u t o f
course, now I vored and
shopping f o r a new one.
BlogC'Solved the new cube b u t of course...", " 0 8 /1 9 /Z 0 0 8 " ) ,

^
new B io g f Managed to g e t a headache toiiing...", " 0 S /1 & /Z 0 0 8 " ),

new BlogC'Found a 7x7x7 cube for sale...", " 0 8 / Z t /Z 0 0 8 " )
* 08/16/2008
M a n a a e d to get a headache
toiCing o v e r the new cube,
gotta nap.
............................ ]i..............
Blog,

.
08/21/2008
f o u n d a 7X 7X 7û6e f o r sale
,
onCine. yike s! That one could be
a beast.
,

Blog,

YouCube.
YouCube 1.0
Blog JavaScript,
,
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
&
new cube
bu. coursenow
of
and tor a
M w
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
one
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
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;
}
1() .

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>

div
<body onload="show B log(5) ; ">
<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" />
4 Q1V ii d
a=
<div
= "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
Blog Entries?

innerHTML
DOM?
B l o g
?
0 1 DOM

-,
,
,
Q ;
.
.

,
.

.
.
Show Blog Entries
.
Q ; . ,

HTML-
B lo g
. .

. < >
< s t r o n g >
.
B lo g
.
innerHTML
YouCube.

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

.
,

.
!
for Cub,
viCube - The Blog for Cube Puâlers
'140008
Got t e new cube I ordered. Its a rca} peail.
s/imom
8 /21/2008
Found a 7x7x7 cube for sale oniine
Show A 3loaEnMc I
Done
426
xu
That one could be a beast.

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

P a te

Date
.
new
DateO;
P a te
. '
/ .
new .

j
.
428
now
D a te
. ,
,
D a te .
, . ,
D a te Y ouC ube:
v a r blo gD ate = new D a t e ( " 0 8 /1 4 /2 0 0 8 " ) ;

. , ,
.
,
, .
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
!,

.
getDaysBetween(datel, date2);
,

!
,
D a te ,
.
.
,
.

,
.
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 ,
.
Got the new

cube I ordered.
Its a real pearl."
d a te
Blog

P a te .
"08/ 14/ 2008"
, d a t e B lo g
D a te ?
430

,
. 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 "));
V
, Y o u C u b e
,
( S t r i n g D a te ). ,
B lo g .
b o d y.
D a te

'
n ew .
new

.
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 " ) ) ]
......................................... ........................

.

-B lo g
Date.
' !
D a t e
?
! , -, D a t e
.
Pause, .
, ,
. 1
1970 .
38 , 8 , 14 , 3 ,
29 11 .
. ,
.
,

1,218,702,551,000 . , , !
.

D a te ?
Q ; . D a t e
, ,
. ,
,
.
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

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

. ,
, ,
. ,
D a te !
YouCube - The for C ube ûzziers
YouCube - The Blog for Cube Pim lm
----Thu Aeg 14 7
Got new cttbe I orfcKd. It s a peari.
I .
Date
,
. ,

.
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 " );

a lert(b lo g D ate.to S tr in g {
, t o S t r i n g ()
, . ,

, :
Thu Atig 14 2008 00-00:00 CMT-0500 <COT)
to S trin q O
,

P a te
.
a lert(b lo g D ate);
to S trin g O

,

.
toString ()

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

.
,
, .
. , D a te
.
>
3- 3 1 .
(6 4
).

, |
I
]1! Date.
D a te
, , ;
.
.
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
,
JavaScipt

...
437

, ?
, ,
.
,
. ,
. M an d an g o ?
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)
r e tu r n b lo g 2 .d a te - b lo g l.d a te ;
' s o r tQ
.
}) ;
.
.
s o r t ().
. ,
.
, .

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

t o S t r i n g () ?

D a te objects?
; .
,
;
,
t o S t r i n g ( ) , JavaScript

.
,
.
, .

,

.

, (
t o S t r i n g ( ) ,
0).
3 A r r a y . s o r t ( )
,

?
; ,
s o r t ( )
.
.

.

.

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 ^
Found a 7x7x7 cube for sate
YikesS That one could be a beast.
8Solved
/19/2008
fee new cube but of couise
get a headacte ilfflg over
Im bored and shopping for a new one.
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

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."
444

8

.
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
, , , , , , , , , I Ml
20
1111 m
30
40
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
__
13 22
c u b e .
^
. ?.
"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
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
for
(var
1 = 0 ;
//
if
(blog[i].
a l e r t e ["
; i ++)
i <
.toLowerCase 0
(blog[i]
, 1 1 .....................*
blog[i] .
"l
" ^
) '
break;
}
}
//
if
(i = =
containing
alert("Sorry,
there
are
no
blog
the
search
text.
),
entries
date
searchText
searchtext
getMonthQ
>
447

( ) ,

.

.
function
searchBlogO
searchText
var
for
(var
i =
0;
//
if
(b lo g [i].
a l e r t (" ["
blog.length
X <
body
+
i ++)
').value;
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 ())
(blog[i] .
date 1
blog[i].date.getDate0
blog[i] .
searchtext
- d o c u m e n t . g e t E l e m e n t B y l d ('
bodi
'7-
getMonthO
+ blog[i].
jJ "
date
getFullYearO
"]
I I;
break;
}
}
//
if
(i = =
there
are
no
i le n g th
, , '
.
blog.length
'IWtC'Sorry,
448
blog
entries
containing
the
search
text.");
//,
!=-l)
" +
!
, Y o u C u b e 2.0 ,
S t r i n g . ,
.
( ) (
). ,
,
.
0
18/29/2008] Met yp with some fellow cubers to diseass

the prospect of a 7x7x7 cube. Mixed feelings.
Search
no - L
ry j
!
feelings.
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 *
?
! . JavaScript
. JavaScript
,
Ruby,
.
,
,
,
: ,

.
3 * ,

. ?
Q ; .
.
S t r i n g
,
,
. ,
,
.

,
( [ ]).
. ,
,

S trin g
s e a r c h B l o g ()
c h a r A t () i n d e x O f () ?
Q ; . 1\
charA t ()
,

. 1/1
i n d e x O f ,

.
s e a r c h B l o g ()
to L o w e r C a s e () ?
Q ;
.
, ,
cube, , ,
: cube,
Cube, CUBE . .

,
.
s e a r c h B l o g
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 ()
.

, ,
. ,
cube
11.
,
.
in d ex O f
() 11,
,
12. ,

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

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

, ,
, .
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
. , ,

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

.
Math.
Mah.round(Math.PI)
Math.ceiling(Math.PI)
.......
Math.random()
.......
Q u iB e i Cinj=>. 4 5 4 -
452
. '
'
Head First: . ,

.
,
.

.
Math: , ,

.
, , .
Head First:

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

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

, .
,
.
Head First:

JavaScript?
Math: . :
.
,
,
.
Head First: .
.
Math: ... ,
.
453
Math.
4 3.
5 4
ooepXj 4.
Math.round(Math.PI)
Math.ceiling(Math.PI)
4 ^ 7 7 3 7 ----------------
Math.random()
/K
,

!

.

,

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
,
1, Math.
f l o o r () ,
.
.
f '- ; ^
0 - 5
var
ttt
f
454
oneToSix
= Math.floor(Math.random(
1-6
6)
1;

Math?
Q ;
, .

M ath

f l o o r
ro u n d
Math?
,
. ,

,

. ,
10,

.
Math?
Q ; . ,
,
Q ; r o u n d ( )

. ,
m in () max (),

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 ( )
, ,
.

'
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
^^ x 7 x 7 c u b e fo r*a le o n lin e ,Y ik > .T h a t
{8/16/2008) Managed to get a headache tolling over the
|^ 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
456
,
^ ,
- .
B lo g
,
.
,
...
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)
/ /
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 )
+ ( 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 + " / "
ale rt("
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 .
/ / ( )
. 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
r m m F .n
1 - -i
^
.
Entries)
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) {
/ 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>";
n iM L - .
/ / 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 ;
/ / 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 . " )
/ / 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

458

,
BlogContalnsTextQ

.
^
,
.
^
B o n j> o c ; b i
,
?
0 ; ,

.

,
.

.
, B lo g

HTML,
. ,

B lo g , ,
.
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 ( ) . ^
:
,
, ,
c o n t a i n s T e x t () .
.
,
t h i s . b o d y .
to S tr in g
^
up w ith eoifcWP*
fe llo w c u b e rs
p
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 ,
--------
c o n t a in s T e x t( )

B lo g ()
t h i s . c o n t a in s T e x t .
459
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 ()
B lo g ,
.
f u n c t i o n B l o g (body, d a t e )
//
~

.
t h i s . body = body;
t h i s . date = date;
to S trin g Q

of
the b l o g
+ 1)

W
.
entry
+ "/"
t h i s .d a t e .g e t D a t e
this.body;
};
// 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 )
{
//
?
"<
toH TM L()

-.
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;
-
};
460
/>"
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
};
<
^ ' ^ '
// 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
t h i s . toString = f u n c t i o n 0
{
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 + "]
b lo g H T M f \lg h lig h t
0 ) != -1);
YouCube?
, -
B log (
http://www.headfirstlabs.com/boohs/hjjs/). ,
B log,
.
Blog

YouCube.
/ / Show t h e l i s t o f b lo g e n t r i e s
/ / ( )
. 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) {
blogListHTML += [i] . toHTML ( i % 2 == 0) ;
i+-i-;
}
toHTMLQ
sAOAHOcmbH)
HTM Lih op
.
/ / HTML-
d ocum ent.getE lem entB yld("blog").innerH T M L = blogListHTML;
}

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 ;
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;

II
^

,
.
/ / ,
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 . " ) ;
}
/ /
/ / . 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
...
...
...
YouCube - Tht
100
Blog for Cube Piwzlers
the ffloa i|7x7x7
feelings.
18/29/20081 Met up with some fellow cubers to discuss

the prospect o f a 7x7x7 cube. Mixed 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
462
-
Blogl

,

.
^

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î-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
"Found 7x7x7 cube.
toString
.
body^
date
X ^ J ^ s t 21st, 2008
/FunctionO
functionO
'
{ ...
{ ... }
.^functiîTo^^
..
body "Met up with some..."

A

date
.
toString
toHTML
August 29th, 2008
f functionO
- N
function() { ... }
containsText V functionO
- J
>
469
this
.
.
,
t h i s .
f u n c t i o n B log(body, d a te )
this

.
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

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

prototype

YouCube.
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 . 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 '>"
// 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 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
return blogHTML;
: " <p>";
+ t h i s .d a t e .g e t D a t e () +
+ "</p>";
"/"
};
// ,
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

'
f u n c t i o n B l o g ( b o d y , d a te) {
//
______
, ,
, p r o t o t y p e .
/ /
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 ()
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^;
1
^ "
~ ~ ---------- 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
. .
, B lo g ,
. ,
Y o uC ub e .
2^=> Blog
-1^ .
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.

.
, C++ Java,
JavaScript .

.
,
p rototyp e,

, .

JavaScript.
p r o t o t y p e , , ,
,
.
,
.
t h i s
prototype?

. ,
X
th is
. X .
Q ;
,
.

,
.

.
, ,
Q ; ,
JavaScript
^ ! t h i s
.
3 *
.
,
.
?
.

JavaScript.

,
.
,
Blog,
[ ]
b lo g E n t r y
,
. /

()

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 .
0 ! -

,
.

.
-

. ,
11
. ,

,
.
S/l4/2oo8
* ,
.
?
signature
?
OS/,g/2oos
S o fv e tf tfie
^^Sfioyyptn
^ ru z z C e ri
S /ie/2008
I
A
M anagecC to a e t n
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

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

d a te

.
s i g n a t u r e
B lo g , ,
.
, ?
478
10
August 29th,2008 !

,
,
.
__ _
:
-

.

.
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 r o to ty p e .
" P u z z l e r Ruby";
/7
this.d
ate
= date;

, s i g n a t u r e
. : ,
B lo g .
>
479
'
,
s i g n a t u r e .
I r t ( t h i s . s i g n a t u re );
Puzzler Ruby
r ~ w
,
,

t h is !
^
| 1
YouCube
?

?
; ,
,
,
.

,
. ,
.

HTML .
,

-
.
-
.
,
, ,
.
3 *
,
?
480
10
Q ;
,
.
,
B l o g ()
.
,

.
,

, .

YouCube
,
,
?
! ,

s i g n a t u r e
.
,
B l o g {) ,

.

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

.
?
Q ;
,

.

, .
,
, ,
. ,

.
.

?
Q ; ,

p r o t o t y p e ,

.
t h i s ,
.
,

.
toH TM LQ
,

.
s i g n a t u r e
, , .
,
, toHTML ().
Blog.prototype.toHTML
= function(highlight)
11
var blogHTML =
hrghiight , "< style^'bao.groun.-color:
"
this.date.getFuliyearO
^
. "</strongXbr />
"<p>"
. .. .................................... ^
. thrs.bo
"</emX/p>";
return blogHTML;
,

.
9 /1

sig n a tu re

.
S^9/20ee
h'P uziier Ruby
liscusstei
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
,

,
.
//
/ / ^
var blogHTML - " ;
"<p
style='b a c k g r o u n d - c o l o r :
"<p>";
#EEEEEE'>"
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 ,
(?

.
484
10

J a v a S crip t.

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

.
prototype

^ 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
W e ^ e a d and oidered the scary 7x7x7 cube. :.tarui g
a m e n ta l e x e rc ise
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
Found 7x7x7
cube fo r sate on lin e. Y ik e s ! T h a t one could be abeasi.
b y P u z z le r

P a te .
486
10
e c n c w c u b e b u .o ,c o u n e ,n o w
by Puzzler Ruby
I 'm
bod anti shopping for a new one.
shortFormat {) Date
.
.
,
.
, , , signature Blog.
fviewc>3b!

c6oiXcwSo.M
.1

.
prototype
,
, .
Biog.showSignature =
functionO

p r o to ty p e .
alertC'This blog created by " + Blog.prototype.signature +
};
,
.
,
.
sig n a tu re

.
B l o g .showSignature

YouCube,
Blog?
>
487
Blog
,
, ; ,
, Blog.
showBlog ().
C O 'P '^S *'
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
.
io o tli
UiOlOC
o oi lo
toiom
Blog
, , body.
cube777.png

^'^^^

7 7 7 . .
492
10
Blog

.
body
im age
S lo g ,
}
, B lo g
im a g e , ,
. , ,
.
, .
f u n c t i o n Blog(body,
date)
,

? ,
null?
//

,
, 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.
.........
,, . ;
image,,

im age.
.
,
.
,
M , - d . t e =.

J :Z 7 T Z Z Z ?

'^^^
< :
............................................
, th is.im age = image;

}
^
B o iij^ o c b i

im a g e

B l o g ( ) ,
, , .
:
B l o g ()
?

,
Y ouC ube.
Q j ,
.

.
, ,
.
.

.

.

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

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 .
t o H T M L ( ) .
H T M L - ,
i m a g e ,
, .
,
.
If ( )

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
if (
tkis.im age
' ................
toHTML () Blog
,
.
~~
I <
----- - image
, -
, *=
'
"</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 | |
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
Image
deliver()
/ - -

,
- .
,
. !
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,

.
500
11
,
60
.
JavaScript,
51
, .
, -
. , .
^
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,
,

. In te r n e t
E x p lo rer...
I n ^ r n e t & p lo i
In te rn et
Explorer
~
^
1

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

,

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

. ,
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Âjocijwsnis%20er>d,20SeUings/Mid58e%2Qf^.,
etse>fsv?ece<50
;^/">ia!ho9t^::>ftM
T)
t9%20arj%2^ttngs;'M
ichael%204o<-,5on^34sktop/b9.^S9e3_l,M
ml
-! ttead: iosw
E rro r
Consoles

^^

J a v a S c rip t.
502
11
Emjr;
name:^.'
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
S a fa ri
^ 1 ^
f j ^ f y x u m e ,
.
- . O p e ra ,
, Safari, , , .
, ,
; F irefox...
Firefox
6>^<\ 1^
.
BSI Case 1: tQCaicuJatof __
0 ,..
F ir e fo x
Firefox

.
trror Console
fii
* Atl
ih
Wafnings
Error*
ErroR
Soi4rcriie:
calculate the average IQ.
Messages
{befsffi
Clear
eiae if .avsrage SQ <
<htmi>
<head>
Do
<tltle>BSI Case
1: IQ Caloulator</title>
;rsr;r.rs:>,
f<Jnction showIQClass (data)
dOOuJnt!get\llentBy?d?"outpuj
.innerHTML; = "You
ralcIQClass(data)
).innerHTMr.
function calcIQClass(data)
Xa!
,
.
'aviL e ^ :
'
- e r a g e . Math.noor,average
/ data.length);
if
)
Should
else if average < 50 {
their tvs";
else If (average < 70) (

)
Should hit the boo.s";
Firefox
,
cm poK aj

.
else If (averag < 81) (

<
lse if (average < 9i) ^
"--r
. r a m exercises
, - 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êturn ..people of
very superio
else {
intelligence"
return ..geniuses..;
</script>
</head>
I K
>
503
Firefox
Firefox
,
, .
Firefox-cnacumeAb
, F irefo x
,
;.
,
.
Firefox
, Firebug,

.
http://w w w .getfirebug.com /.
EfforConsote
II
J.
E r ro r s ,
W a r n in g s
M essages
________
: _ *
,
.
<^>
<>

,
- .
,,

,
.
'
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 ?
* ut
iiS
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
24, ,
25.
, F irefo x ,
.
504
11
e l s e i f a v e r a g e < 50 {
if

.

; ,
?
Q ; , ,
JavaScript - .
, Safari
Debug,
.

. ,

, Firefox
JavaScript.
3*
Internet Explorer?
Tenninal ( ):
defaults write c o m .apple.Safari

IncludeDebugMenu 1
, ,
, . Firefox
' Console Tools.
! , , . ,
, ,
Internet Explorer,
JavaScript.
, i q s
,
i q s .
! Firefox ?
:
?
;
.
)

. ,
, . ,
.
else
if
(average
<
8 ,

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

..
505
, I Q ,
F irefo x , .
, , ,
.
,
,
!,

8 .
<html>
<head>
function ShowIQClassMata, i
alert("Click Off u .
document.9etEleetByM("outpuj
iOClass,data, .

,

.
' "Vou are CeaU,
,4 r "
alculate the average IQ

var average = ofor (var 1 . 0,- 1 < 0 a 0
average +- data
average , Math, floor tillgi ^

B o m ,

Firefox
ih
// Return the class! |AB EffOfS

If (average < 20) (
r
return "people ho
Warnings
Messages
eise if (ave^^^^ <

retijrii.>pg^le who
Error: ffiTssingIafterfafictionbofly
Source Flfe^ :/ f /Users
lse if (average < ?C

J return "people who :
t'
else if (averag < 81) '

J iêturn "people who
else if (average < 9i)
^ return "people who c'"
EiTon shov^^Class is not defineil
^S&yrcFik;
else if (average < ur

J return "people of av
else if (average < 121)
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
Error Console
11
l;
Une:.i
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";
}
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";
)
return "people of average intelligence";
}
return "people of superior intelligence";
)
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ôB ejniipb
<html>
<head>
<title>BSI Case 1: IQ Calculator</title>
] cUeHap*uu ,
HuMu .
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
calclQClass(data) + "</em>.";
function calclQClass (data)f{%

I I Calculate the averagee TQ
var average = 0;
for (var i = 0; i < data.length; i++)((

average += data[i];
^^verage = Math, floor (average / data, length) ;
a d d itio n
eturn ..people k ^ o u i d k i l l th e ir tvs";

3aK pt> i-(T)
--
6afOU4a S ! ^ s e
CKo Sk A.
"You are dealing with <em>" +
^^

........^
..........

^

^m
!
if (average < 5 0 ) ^ 0 - __
___________
"people who shiuld really hit th e b o o k s ^
aise if (average < 70)

----return "people who should hittte books "~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 ^
^
CKo6ig.
, ,

fo r,

.

.
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>
<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

181.
,

.

, , 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
// Calculate the=
r, , ,
average - 0
^0
for (var i . o-'i < H

^ erage
ditall,;
''re't:"^"'"
--age
T ' 9e < 50)
IQ
one
,

!
:
reall,
th
"people .o 3.old M t
--------------------------------
t.e
e lse if
(average < 81)
r eturn "people w ho s h o u l d c o n s i d e r
b r a i n exercises";
if (average <
else If (average < ,
,

.
if -average <
"
i-elllg.,,,.
(average < ip-i\

superior
Calculator
lîiigence";
averag
average
Ready to calculate the average IQ.
Click OK to begin IQ caiculat
Done
510
11
^
!
undefined
not defined?
; . ,

, .

undefined
undefined null
,
, ,

,
i f .
,
?
i f
false. if
(someObject)
,
.
null?
3 ?
,
, .
7811 ?

Q l .
undefined null
,
,
. , null
,
.
undefined,
,
.

null.
,
,
.
average
?

0:!

average
, JavaScript
averag
average ,
. JavaScript
averag
shazbot lederhosen.
, 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.
/books/hfjs/), , .
, ,
, .

fo r m

ckeckW innerQ .

>1

,

.

^
' .
Call

ckeckW innerQ .
, , , ,
.
513

IX
'
/

...
( # 1 )
,
, ,
F irefox.
,
JavaS crip t.
caiiHm 4.
else i
ost caller

.
.
caiierPield.select();

.
.
514
11
LoUay s w-sner: }

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

c a l l e r c a llN u m .
if
(callNum
alert(caller
winningNum)
+
callNum
J a v a S c ip t .
, Jav aS crip t
, .
, ,
.
.
:
if
(callNum
alert(caller
if
(callNum
al e r t (caller
winningNum)
+
",
caller
numbei^^^
callNum
"...
today's
winner!")
winningNum)
+
",
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
- ,
Jav aS crip t,
, .
, :
<input type='button' value='Call'
J a v a S c r ip t ./>1

XHTML

( .
)
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
.
,
.
X H T M L , H T M L ,
, ,
Jav aS crip t .
,
, , ,
:
alert{'It's so exciting!'
516
11
181

.

,
,
?
$-

.
.
Jav aS crip t ,
, . ,
,
( \ ) . 8- .
alert('It\'s so exciting!');
Jav aS crip t ,
, . ,
,
.
alert("It's so exciting!
_ Esc -
.
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
S J -
CaEer n a m e : jH ow ard
0 0 6
'
1 All

Call
,

checkW innerQ .
&
Errors
Error Console
iL
Warnings
m
Messages
Clear
Ermr. chectoRnf Is not defined

Source
- m o

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

,
,
H T M L .

Jav aS crip t . ,
, .
,rm, caller, winningNum)

, cKosJ ..
, ^
//
callNum +
form, submit ;
else
" ^"irertirw "^1

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

ckeckW in n erQ

.
</script
</head>
</form>
</body>
</html>

, , ,
.
I I
.,
I I .

.

.
- .
>
519
,
.
_
.

.
- .
ckeckW in n erQ
ck e c kw in n erQ j
w.

,
.

w W
t y p e="butt||fi"
# 2
y c n f -
UC-
J
<input
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) (
a l e r t (caller + , caller number
callNum + "... todayX's
winner!");
NaN
aiiVimi1".(W
, 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
>^. .
OiC
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-
,
!,
, .

=
==,
.

!
esc-

?
; , JavaScript
esc-. ,
\t .
\ .
\ \ .
. KaKoif

JavaScript .

0 ;
,
,
.

HTIVIL- ,
,
.

, JavaScript.

. \
t \
.
3 *
esc- HTML-?
Q ; , HTML-
JavaScript ,
,
. esc JavaScript,
HTML-,

.
HTML
,
.
,
.
HTIV1L esc-
.

- ,
JavaScript
. ,

JavaScript .

,
.

811,

; , .
,
.

callNum
NaN
1 f?
! .
, -
. ,
...
, .
>
525
, .
.
, ?
! ,
,
.
, . ,
. .
,
;.
,
.
.
. .
. ,
.
,
, .
,
!
? ,
.
, ,
,
.
,
, .
. ,

, .
. !
, . ,
?
526
11
;
, Jav aS crip t
.
;
. .

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

. ,
.
,
,
.

!

. ,

.
.
,
-
.
-
,
. ,
.
.
! .
!
>
527
8! ( # 4 )
, ,
.
, ,
. ,
. ,
.
..
528
81 Cas Wtn
11
3.

c a llN u m .

,
. ,
...

,
callN um
c m
.
,

...
>
529

,
; .
, .
, F irefox.
SyntijiErf'!
.-'
tsij
ass

^ cm i ^
^^^^^âcue-~

Firefox.

?
.......
.
*
Efrors ws*9
*(**

.
,
.

,
.
530
11
E r ro r C e n s o te
Oear

, ,
,
.
, .
,
, .
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
.
"callNum:
532
11
div
2'
JavaScript
.
,
.
function DebugConsoleO
//
);
var
consoleElem
consoleElem.id
document.
"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.
//
( " h r " ) );
(document.
consoleElem.
. - . ,
this.
= false;
}
DebugConsole.prototype.displayMsg
//
var msgElement = d o c u
m e n t
function(msg)
.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
var
consoleElem
d o c u m e n t
this.shaded
this.shaded
"#EEEEEE"
.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;
msgElement
appendChild
"debug''
createElement
createTextNode
533

,
1 .
function
//
DebugConsoleO
var
consoleElem
consoleElem.id
createElement
document.
"debug"
c o n s o l e E l e m . s t y l e .c o l o r
appendChild
consoleElem.
11
this.
shaded
"monospace
consoleElem);
document
false;
"# 3 3 3 3 3 3 ";
appendChild
d o c u m e n t .b o d y .
div
,

c o n s o leElem. style. f o n t F a m i l y
ichr"));
createElement
^
^ .
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 " );
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 .
msgElement.style.backgroundColor
var
consoleElem
createTextNode
=
this.shaded
document.getElementByld

false
(msg) ) ;

div.
; "#EEEEEE"
; "#FFFFFF";
"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 ">
var
console
new

DebugConsole
? .
DebugConsoleO;
r ^ ~ ~ - _________
, .
,
, .
_____ _ ____
S i
Alt ? Errors
ch
Error Con ole
Messages
CD
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
s : : ~
~ .
c a l lerField.select o';
<body>
___
<form name="callform a
'
'
--- --------
-tbod...posT..>
"'oncLc\"-":?r " '
</html>
-------
type...te.. />
____ _____
^811
.

,
- .
, , ,
.
536
11

?
?

.

. , ,
.
.
DebugConsole ,
.
DebugConsole,
.
. . .
? . . . .
4.-. . .?.-^?.'
console %
,
onload'......
<body onload="console = new DebugConsole (); ">
, ^ KoHcojTbjo
__ __________

onload.

.

. ,
.
,
.
Error Console
Hj
All Errors
!,
warninas
Mtsses
Oear
[ Evaluate
f r r o c diicumentiKHiy
^ sourfile,
538
11
no proiaertits
tins:

.

.

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^
;~nehua conaole global
----console * new D e b u g C o n s ^ ;
// Total number of calls

var callNum = 0;

,

, -
.
,
.
function checkwinner(form caller;

// Increment the call number
winningNum)
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 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)
CD
BSI Case 2; Winning Cailer
^ ..
callNum.
,

!
540
11
Caller ; |Next caller

callMums
caiiNums
callNums
callNumt
:
KaK
HaH
HaN
NaN
NaS
Call
)

, .
c a l l N u m ?

? ,
, , ,
.
?
,
,

.
Jav aS crip t ,
, .

, .

, .

.
541
,
.
.
function checkwinner(form, caller, winningNum)

console.displayMsgC'callNum; " + callNum);
/*<=-------

var callNum;
++callNum;
// Check for a wil iner

if (callNum == wil' ningNum) {
caller number
alert(caller +
winner!");
form.submit();
callNum
today\'S
}
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
0.
,

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

- "
.

// var callNum;
++callNum;
----------- "
e 0

----- ^
ca llN um
.
Check for
winner
if (callNum == winningNum) {
//
alert(caller + ", caller number
winner!");
11
//
callNum
today\'s
m Case 2: Wmning Caller
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;
'
!
544
11

,
6.
,
1

.

'
'^
!
0 ;
!. ,

.
.
, .
,
. ,
.

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

.
! ) .
,
-
JavaScript
15 2
!
3
! 4
!
1 1 8
!. 7...1*$ \1

.
>
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

-.
night Siuge was chasing , and St !rept i
backwMds...Ybur!
->
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
7*7*7 cube. CoaB be my last blog post for a whUe...
^ T M L += <stn
9^/2008
Attended a tally ouBide of a local store
that ssjpped carrying cube puzzles. Poweito ! puzzlers
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
'
-----------*-*-!*,
r uPwo e^rr t oto t the ou^,l.i7x7x7 cube. Could be .y lost blog
= * "
Date("09/03/2008")),
wh le... , new Date(09/05/2008")),
me a couple of weeks but the
f.nolly S O I , - , ne
-cube777.p,.)
0ateCm/ei/2m-))

...
550
12

,
H T M L - /
YouCube.

!: './/\ \ ^.
,
. ,
,
, ,
.
, , .
,
.
^ _
,

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

.
JavaScript

- .
JavaScript
H T M L -
YouCube, ,
. :
. ,
,
HTML, CSS JavaScript.
y<wCube The Blog for Cube P om U*
m
bfPtakr
>
youcube.html
blog.xml
>
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
ML H T M L
, H T M L
(), X M L , ,
. X!
,
.
?
IB 1 4 T M L
XML

.
- .
badtwaf(l.-.Yl!
X M L
. HTML,
, X M L
.
X M L -
.
554
12
!.. Powa- (he pusden
^ 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>

, , ,
.
,
<director>
!

<m ovie>.
,
: 2
HTML XML .
<itunes:author>
<span>
<title>
<strong>
<input>
15.
<prompt>
-.
>
555
.
^
....
.. <>
...
_
<ltunes :>
<111>
---- .
^ 4
<>-- --
\
.
.. <1>
------- [.
...
-.
<prompt>
X M L
HTML, X M L - ,
, . X M L
.xml, H T M L -
.html .htm.
L -

.x m l.
blog.xml
556
12
XHTML
HTML,

XML.
X M L + HTML = XHTML
, X M L H T M L
, X H T M L .
HTML,
XML. ,
. H T M L
, , , <>, .
HTM L
XHTM L
This is paragraph of text in HTML.<p>
<p>This is paragraph of text in XHTML.</p>
8 HTML <p>
no ce5e~

.
8 XHTML

.
H T M L X H T M L ,
<>,
, .
XHTM L
HTM L
This is just a sentence.<br>
This is just 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 TM L.

X H T M L
.
X H T M L ,
XML,
.
557
XHTM L XML

HTML XML .
^ T M L :
.--
HTML

XM L
X H 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
<entries>
<entry>
= "by Puzzler Ruby";

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 >
...................................................................................................... - --............
..........................
_

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

.......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
_ > ,
?
^ ! ,
,
. XML
,
, .
5= XML Ajax?
! Ajax
Asynchronous JavaScript And XML ( JavaScript
XML), XML Ajax.
Ajax ,
XML.
Ajax-,
.
XML
< e n t r i e s > ?
Q : ,
. ,
< e n t r i e s >
< 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
, Ajax XML
Ajax
JavaScript.
Ajax JavaScript XML,
.
, XML Ajax,
.
,
,
,
?
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 ?
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

A ja x

.
..., &~
fefPut*-*'
Y o u C u b e - T h e 1<% C u b e P u a d e rs
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
1 6 -
1 ~

.
1 ^ppedcarrying.pcvJ.
youcu5e.html
^

JavaScript,

Ajax .
JavaS cript
A jax ?
563
JavaScript
XMLHttpRequest
BJavaScript XMLHttpRequest,
Ajax .
,
Ajax.
readyState
;
(), 1 (), 2 ( ),
3 ( ), 4 (
).
status
(
\
X M LH ttpR equest

,
.
abort()
XMLHttpRequest
-
404 ( ) 200 ().

,

.

. 5

Ajax.
open

, U R L
.
onreadys tatechange
send()
,

.
responseText
S

A jax
.
t

,

.
564
12
responseXML

X M L -.

,

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

,
.
X M L H t t p R e q u e s t ,
;
var request = null;
if (window.XMLHttpRequest)
try {
XMLHttpRequest
,

.

X M L H ttp R e c ^ u e s tj
-

IE.
request = new XMLHttpRequest{); fer

} catch (e) {
request = null;
}
// ActiveX (IE)
} else if {window.ActiveXObject) {
try {
request = new ActiveXObject{"Msxml2.XMLHTTP ) ;
// ActiveX I E
} c a t c h () {
ttry
request = new ActiveXObject("Microsoft.XMLHTTP"
X M L H ttp R e q u e st
. 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 ,
,
. ,
, GET
, .
, POST, ,
.
Ajax
,

HTML-,
GET POST.
GET

.

URL. GET

X M L -.
PO ST
^^^

Pos

^ -.
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

,,

.
blog.xml

GET.
566
12
POST

PO ST.
1 .
XMLHttpRequest
,

. ,
, GET POST.
d E T URL
.
request.open("GET",
"blog.xml",
true);
//

XML

blog.xml
5()
GET.
request.send(null);
, ,

.
GET

POST.

POST
URL .
>
,
.
request.open("POST",
(true)
"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");
,
GET POST,

51() .
,

YouCube.
>
567
: ajax

XMLHttpRequest ,
, .
, ,
Ajax-.
XMLHttpRequest
JavaScript,
.

AâxRequest
^-.
, YouCube
,
XMLHttpRequest.
Ajax,
XMLHttpRequest .
Aj axRequest XMLHttpRequest
.
>
AjaxRequ&st
MU
XMLHttpRequest.
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,
Ajax ;
var
568
ajaxReq
12
new
A j a x R e q u e s t ()
_ 5(0
AjaRecest

.
AjaxRequest

XM LH ttpRequest.
JavaScript
Aj axRequest
XMLHttpRequest, Ajax . send ()
. , .
if
P = .t . a ,
( 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 = "
try
+ n e w Date (). g e t T i m e ;
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:
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. \
e)
handler
ty p e
postDataType
PostData
>
569
//

send () Aj axRequest.
sendQ
~
.
AjaxRequest.prototype.send=
if
fun c tion(type,
url,
handler,
postDat a T y p e ,
postData)
( 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 = "
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 h i s .r e q u e s t .open.(.
if
handler
true);
type
( t y p e .t o L o w e r C a s e ()
"get") {
^
// GET;
t h i s .r e q u e s t .s e n d (
pi"I
11
h a n d le r

.
+ n e w D a t e ()- g e t T i m e ();
II
POST;
11
ty p e
sendQ ,
Q E T
P O S T
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 " ,
~
"

POST.
t h i s .r e q u e s t .s e n d (
PostData
12
);
);
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.
oo
a ja x.js

A ja xR e q u e st.
570
(true)
+ e) ;
ajax.js
Ajax
Aj axRequest
, .
send (),
Ajax. GET
POST, HTML.
Ajax
.
AjaxRequest
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
,
, ,
- .
. YouCube

^.

Ajax

.
XMLHttpRequest Ajax.
Ajax , get post,

.
Aj axRequest
Ajax,
XMLHttpRequest.
572
12
send () Aj axRequest
Ajax .
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 .
,
A j a x R e q u e s t
?
Ajax,

.
3 * / Ajax
/
HTTP?
; HTTP

HTML- -.
Ajax .
: Ajax

. Ajax

.

. Ajax

.
.
^ 5 Ajax

?
,
.
,

.

.

G E T P O S T ?
; G E T P O S T

.

.

G E T P O S T ,

. ,
,
Q ; !

.
. 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 ;
- ___
G E T

.
^
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);

.
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 .
@
-&--
-- hlo^ptwU(^ ^ ^
576
12
handleRequest ;

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

handleRequest (),

.
,
,
?

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

Ajax .
g e t R e sponseXML()
,
.
getResponseXML (). ,
getResponseText ()
.

Ajax
X M L -.

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
<(>

, ~
.
.....
<>

.
578
12
XML, ; , .
YouCube ; ,
.
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)
if

te x t.
(child.childNodes[0].nodeValue)
text += child.childNodes[0].nodeValue;
return text;

. te x t ,

.
,
,
,

.
,
X M L
xmlData.
, Y o u C u b e
X M L -
<author>.
579
, YouCube
XML- <author>.
't-riM
\^^'^/< ^J< aK ^cu

zH ai'vvwM
M yp a

,

Blog.

y e tT e x tQ

< 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: ,
Ajax. ,
?
handleRequestO: .

.
handleRequestO:
, .
, ,

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

,
.
Head First: ,
?
handleRequestO: , AjaxRequest
,
,
.
Head First: ,
?
580
12
handleRequestO:

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

?
handleRequestO: , .
Head First; .
handleRequestO: .

^ >
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
1 -
iu n c tio iL
1 'J oC ogpH H ooxieU ,

y<3iemHo]viy ?
function
if
handleRequestO
(ajaxReq.getReadyState
11
var
//
xmlData
//

entries
for
(var
//
a j a x R e q . g e t S t a t u s ()
==
200)
XML
"by
"
Blog,
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])
i <
e n t r i e s .l e n g t h ;
i ++)
blog.push(new
new
&&
xmlData.getElementsByTagName("entry");
1 = 0 ;
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 " ) [ ];
var
==
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]),
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().

Ajax,
. '

<autkor>.
function
if
handleRequestO
(ajaxReq.getReadyState
//
var
//
xmlData
//
entries
for
(var
/ /
i =
&&
ajaxReq.getStatus
==
2 00)
XML
"by
"
Blog,
+ 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 :
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 " ) ; ^ --------- , 0;
i <
e n t r i e s .l e n g t h ;
i ++)
^^ -
blog.push(new
new
==
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 " )
var
X M L -
<>,

,

yetE lem entsByTagN am eQ .
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 ] ) ,
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>
__....,:*.':*'"'
- tor
<ttt>09/S/200e</(Jate>
<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
_
^
last meht
iff
Ruby

XML...
"
'
S S * = W 7.7.7 , . * , . . . . .
byPiuxterRniry
...
.

.
lo a d B lo g ( ) ,
wait.gif,
.
:
function
loadBlog
d iv
" ".
ajaxReq.send("GET",
"blog.xml",
handleRequest);
583
function loadBlog
loadBlog ().
.7.
ajaxReq.sendC'GET",
"blog.xml", handleRequest);
src-w a it.g if' a j t - Loading... ' />";
YouCub - The Blog for Cube Puzzlers^
8

innerH TM L, DOM,
image
.
VuCub. - The Blog tor C b e P *
.
.
N
Hioioc
001 aic
X
X
N
Search the Biog
|j
wait.gif
S h o w All Bofl Entries |
View a Random Mofl Entry

:>
J'
|= 1
YouCube HTML
'I
readyState
status?
<strong> . XML?
!
I
, XML-
. , ,
-,

, (0) ,
, (4) , ,
HTML-, .
,
HTML-, XML-
404 (not found), 200 ().

. , ,
4 (loaded), 200 ().
, .
, ^
,
HTIVIL-, XML-.
YouCube HTML-,
. ,
YouCube .
584
12
XMLHttpRequest
handleRequest (),

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" />
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"
f:.;ction h a n d l e R e q u e ^ O
if
a j a x R e q . g e t S t a t u s () == 200)
( 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"
:?SufSe:Corid="sbowall"
name-searchtext"
value-"
/>
/>
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"
"viewrandom"
| disabled
false
"disabled"
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 >
ocript
src="ajax.js"> </script>
s r c = " d a t e .j s"> < / s c r i p t >
type="text/ javascript">
function h a n d l e R e q u e s t O {
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 ! )
onn^
=- 200)
//
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"
disabled
</body>
</html>
588
12
|.=
id="viewrandom"
"disabled"
v a l u e = " V i e w a R a n d o m B l o g Entry"
o n c l i c k = " r a n d o m B l o g {) ;" />
, ^
YouCube
, .
.
X M L -,
.

FTP.
YouCube
!
V
= !

. ,

-.
YouCube - ArfdtaB totht o9fofC ubg_gugk
1; Adding to the Blog for Cube Pmriers
Image (optional):
Add tht New B o g Entry
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.
blog.xml

JavaScript, ...

X M L - !
591
^ o in o B b i

blog.xml.

XML $rawB!og.
<?php
$filename
if
"blog.xml";
(file_exists($filename)) (
// X ML
$rawBlog = file_get_con t e n t s ( $ f i l e n a m e ) ;

,

XML.
}
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>";
$rawBlog
.=
"<author>Puzzler Ruby</author><entries></entriesX/blog>" ;
$xml = new SimpleXmlElement($rawBlog);

XMLj

DOM
JavaScript.
//
$ 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",
$entry->addChild("body",
if
-- -

XML.
$ _ R E Q U E S T [" d a t e " ]);

s t r i p s l a s h e s ( $ _ R E Q U E S T [" b o d y " ])
( $ _ 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 " ]);
//
$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 .
,
.
, Perl (CGI),
, .

Ajax-.
592
12
; . ,
Ajax,
,

,
.
Ajax,

,
. ,

, blog.xml,

. ,

.

JavaScript,
,
. -
,
.
.
YouCube .
, -^

PHF
,

.
,
-. ,
- JavaScript.

. .
addblogentry.php
-,

YouCube.
youcube.html
blog.xml
ajax.js
593
php
-
, -
X M L -.
Ajax ,
.
,
, , .
Date

-
iâx.
Body
Date; 10/04/2008
Body; "I'm really looking..."
Image;
Image
.
JavaScript

,

Ajax.

Ajax.
blog.xml.
\iZ 3j

A jax

.
<entry>
<blog>
<author>..
<entries>
<entry>

blog.xml

594
12
blog.xml
<date>10/04/2008</date>
<body>I'm really looking...</body>
<imageX/image>
</entry>
PHP
X M L
blog.xml.
, -,
,

Ajax. ,
,
.

'
- YouCube,
.
A jax
PO ST
:
~

.
*
*
YouCube ~ Addif to the fof Cubt Poaaiefs .
YouCube - Adding to the Blog for Cube Puidcrs

: |l0/04/Z008~_____________________________________
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.

U R L -.
(&),
.
Date: 10/04/2008
Body: "I'm really looking.
Image:
------------------------"date=10/04/2008&body=Im really looking forward... simage="

"
&

.

, (=), /
(&).
U R L ,
Ajax POST.

- URL,

POST.
"application/x-www-form-urlencoded; charset~UTF-8"
,
, 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,
?
! ,
.
,

.

GET?
Ajax

,
Add ?
Q ; Add

.
,

,

.
Add
,
.

I
.
JavaScript

,
G E T ,
, .
URL . ,
,

GET
,
,
URL?
.
blog.xml
.

, Ajax
P O S T ,

.
598
12
Q l

?
0 ; , .

,
URL :
"date=...&=...&1="

,
.
-
,
, ,
,
,
.
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
ajaxReq.sendC'POST",
if
handleRequestO
//
alert("The
new
Add
==
entry
&&
blog
busy
Ajax
handleRequest,
charset=UTF-8",
(ajaxReq.getReadyState0
//
"addblogentry.php",
"application/x-www-form-urlencoded;
function
was
a j a x R e q . g e t S t a t u s ()
==
2 00)
successfully
added.
599
addBlogEntry {) handleRequest ()
YouCube .
' A d d .
8

b u sy ,
f u n c t i o n a d d B l o g E n t r y () {
, .
//
Add
busy
= tru e ;
POST.
//
------------ ^
Ajax
-------------- ---------------
ajaxReq.sendC'POST",
"addblogentry.php",
"application/x-www-form-urlencoded;
handleRequest,
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
function
if
handleRequestO
(ajaxReq.getReadyState 0
//
POST
date, body image.
Add
==
&&
a j a x R e q .g e t S t a t u s ()
==
200)
-- -
= 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 '
^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
I dteamed last night a huge cHbe was

by P v ^ r Ruby
9/19/200S
j,
chastog me, and it kept yelimg my backwajds-.Ybm-t
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
__________ _ _ _ _ _ _ _
Image (optional);|

,
602
12
Add the Mew Biofl Entry |
.............
- I

, 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
,
.
, , 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>

JavaScript

<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>
date.js

<script>.

, .
604
12
J a v a S c rip t
,, -
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();

body.
document.getElementByldC'body").Focus();
}

body.

- , YouCube.
Ajax ,
,
.
Adding to

date

.
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
by Pmder Ruby
Done
606
12
T h (teams just keep geniiig weWer...now I'm seeingacube take itself apart, Whal
lioesitraean?

Язык

Добро пожаловать в Scribd!

0909661 43F68 Morrison m Izuchaem Javascript

Загружено:

Сведения о документе

Дата загрузки

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Описание:

Авторское право:

Доступные форматы

0909661 43F68 Morrison m Izuchaem Javascript

Загружено:

Описание:

Авторское право:

Доступные форматы

Похожие издания

J

Head First JavaScript

JavaScript. .: , 2012. 608 .: .

Authorized Russian translation of the English edition of Head First

, 198206, -, , 73, . 29.

Head First JavaScript

HTM L, CSS JavaScript

ft is good to meet you, Paul.

getElem entB yId()

function display(what, when, where) {

,. , . - , " " " "

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

Ready to find a new house?

Please enter a number.

H ouse Finder - Matches_

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

110 Etm Street View

400 Map! Lane

847 Main Street

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

HTML, CSS JavaScript

HTM L, CSS JavaScript -. HTM L

document.getE l e m e n t B y I d ( " i n c o m e ) .value

alert("You can afford a house that costs up to

Rgfirfy tn flndanew bouse?

Enter your annual income: |

Ready to find a new house?

Enter the number of tiedrooms:

Calculate Wee 1 Shop for H q u ^

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

HTML + CSS + JavaScript =

function findHouses (form) {

f^I^ction validateZIPCode (value) {

function findHouses (form) {

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

<input id="zip" type="te::-.aiz^l0j^

< script >

Ready to find a new house?

Enter your annual Income; jsoooo

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

'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;

function findHouses (form) {

(^Ja va S crlp Q Custom

(JavaS cript)/ Custom

< d i v > CSS?

, Iam your petrock.

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

Hello, i am your pet rock.

What is your name?

il Is good to meet you, Pau*.

touchR ock; (),

............... = " .............................; " />

<body onload =" alert |(

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

(Rock - The Virtual Pet Rode

R eady to find a new h o u se ?

Ouncan's Just-irvTime Donuts

All donuts 50 cents each, cake or ^azed.

------ --------------------- ...._