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

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^e.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>
^^idii'*idi"heIdsr">Ready to find a new house?</dlv>
<div id="left">
<img src-"house.png" alt-'House

/>

</div>
<form name=
<style type="text/css">
<div clas
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

Ready to find a new house?


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 >
<script type="text/javascript">
function validateNumber(value)

//
// if (!isNumber(value))
a l e r t (", .");

}
/ J ^ t i o n validateZIPCode (value)

//
// if (iisZIPCode(value))
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^e;:;^
/></div>
onblur="validateZIPCode W j i ^ a l u e
"
<input type="button" 1="1
oncliclc="calcPrice()
/>
^innnt f.vpe="button" 1 = " ^
, H ^ Tcl?^itodHouses (this .f o r m ) 7 > /
</fOrifL5
</div>
</body>
</html>

43

.
, .

<html>
<head>
< t i t l e > n o M C K flOMOB</title>

<script type="text/javascript">
function validateNumber(value)
//
//if

(!i s N u m b e r ( v a l u e ) )

a l e r t (",

.");

f^I^ction validateZIPCode (value) {


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

1 ---------------------

,
.

");

function findHouses (form) {


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

//
form.submit ();
</script>
</head>

I
<ody>
<div id="frame">
<dlv id="header">oo ? < ^ 0 ^
<div id="left">
<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...

...

Ready to find a new house?

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>
<script type="text/javascript">
function validateNumber(value)
//
/ / 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

function findHouses (form) {


valuevar bedrooms = document. getElementById( bedrooms^)-val
var
document.getElementByld( zip ).
//

findHouses

JavaScript ( j^u 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">
function touchRockO {
var userName = promptC'KaK ?", " .");
if (userName) {
alert (" , " + userName + ".");
document.getElementByld("rocklmg").src = "rock_happy.png";

}
}
</script>
</head>
<body ....... =" .........( ................................ ) ;">
<div style="margin-top:lOOpx; text-align:center">
<img id="rockImg" src="rock.png" alt="iRock" style="cursor:pointer"

............... = " .............................; " />


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

touchRock 0

alert

script
onclick
'Hello. I am your pet rock. '

59



<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

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

}
^ ^

(i

..

,
,

.
What is your name?
It is good to meet you, Paul
Paul

( C a n c ^ ) f~ O K

61

IRock !

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

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

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


" N a m e T jp a u l^

of cake do n u ts: ^

# o f g la zed do n uts; pL2


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

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

Done


JavaScript ,
,

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" />
<script type="text/javascript">
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


, -
.
g e t E l e m e n t B y l d ()

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

Duncan's Just-In-Time Donuts


A ll c k m u ts 5 c e n ts e a c h , c a k e o r g la z e d !
Name
# o f cake donuts: |3 dozen

p a rs e ln tO

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

^ucAOj
.


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

<

(^IsStL'Ske^D^nu^sn^"^^""''
"glazeddonuts")":aiue
numCakeDonuts = 0;
.if- -- 6 .
If (isNaN (numGlazedDonuts) )
,
numGlazedDonuts = 0;
G

var to ta l

s u b lo ta l + t a , ;

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

Duncan's Just-In-Time Donuts


All donulB 50 cents each, cake or giszedi
Name; {Alan
# of donuts; fl5

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

Tax: jS 2 jT
Total:

Place Order

Done

112


,

.


?
. , -'!


. ,

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

~~^iO .

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^i/\/

'
.......

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

,
.

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

else {
userName = prompt("What is your name?", "Enter your name here.");
if (userName) {
,
alert ("It is good to meet you, " + userName + ".");

writeCookie("irock_username", userName, 5 * 365);
.

K~

document.getfelementByldV"rocklmg") .src\ = "rock_happy.png";


setTimeout ("nocument.getElementByld ('roNcklmg') .src = 'rock, png
5 *

60

/OOO)

,



.



.

,


.

/
< im g

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

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

else {
userName = prompt("What is your name?", "Enter your name here.");
if (userName) {
r-,,
1 4- /4-
,
alert( It is good to meet you, " + userName + "."); , ...
--------- -----uAume uMi
if (n a vig a to r.co o kieE n a b lec^:;--''''''^
/
writeCookie("irock_username", userName, 5 * 365);
else
alertC 'Sorry. Cookies a ren t sup p o rted /en a b led in uour brow ser I w ont

f'em-ember -y o u -in te r. ............................................... .................. . ............................. .


\

/\a u m e ,
-

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


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^u 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^eHHi^iu order
" order -r ...
8t>!


\\\\

1
.


1 ,


1,

if (curScene == ) I

, -

curScene = 1;

^ ,

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

^else if (curScene - - 1) {
if (decision == i ) {

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 ^o 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^E
Click either
b u tto N f o

start...

>

189


, .
,
. -
.
- 0.

-
?
WelcOHG t o

STICK FIGURE
A D V E M T i i Pc

CZ5HZ3

choose:

, 0.
5 6 , .
,
, .
c h a n g e S c e n e () ,
0:
else if (curScene == 5
curScene = 0;

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

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

</script>

m essage

changeSceneQ .


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

196


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

<script type="text/javascript">
// 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
, .
( } ) .

_^
|=;
s w i t c h / c a s e

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



.
.

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

211

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

212


,

.

if/e lse ...


_

, Jiyiffle

f,OMV^O
(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^ogHo
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.getElementByld("seat"
document.getElementByld("seat"
document.getElementById("seat"
document.getElementByld("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;
document.getElementByld("seat"
document.getElementByld("seat"
document.getElementByld("seat"
document.getElementByld("seat"
document.getElementByld("seat"
document.getElementByld("seat"

+
+
+
+
+
+

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 = " " / >
<img i d = " s e a t 2 4 " s r c = " " a l t = " " / >

<img i d = " s e a t 2 5 " s r c = " " a l t = " " / >


...
"
/
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
<img i d = " s e a t 2 8 " s r c = " " a l t = " " / >
,<im g i d = " s e a t 2 9 " s r c = " " a l t = " " / >
Find
<img i d = " s e a t 3 0 " s r c = " " a l t = " " / >
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
document.getElementByld("seat"
(i
document.getElementByld("seat

seats[i].length
seats[i].length

j)).src
j)).alt

"seat^avail.png";
"Available seat";

}
else {
//
document.getElementByld("seat"
document.getElementByld("seat"

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^eatsO
us ]\|EnJango.
,

' ,

<|>.

function f i n d S e a t s {
// ,
if

(selSeat >= 0)
s e l S e a t = -1;
initSeats ;

//
v a r i = , f i n i s h e d = false;
w h i l e (i < s e a t s . l e n g t h && Ifinished) {
for (var j = 0; j < s e a t s [ i ] .length; j++) {
// ,
if (seats[i][j] && s e ats[i][j + 1] &s seats[i][j + 2]) {
//
s e l S e a t = i * s e a t s [ i ] .l e n g t h + j;
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
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 I d ( " s e a t " + (i
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 ] .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;
d o c u m e n t .g e t E l e m e n t B y l d ("seat" +
document.getElementByld("seat" +
d o c u m e n t .g e t E l e m e n t B y l d ("seat" +
d o c u m e n t .g e t E l e m e n t B y l d ("seat" +
d o c u m e n t .g e t E l e m e n t B y l d ("seat" +
d o c u m e n t .g e t E l e m e n t B y l d ("seat" +

(
(
(
(
(i
(
(

*
*
*
*
*
*

s e a t s [i]
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^eatsQ ^^ ]^14

1^ , cBojo ]=>,

.

function f i n d S e a t s

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

}
//
va r 1 = 0 ,
f i n i s h e d = false;
w h i l e (i < s e a t s . l e n g t h && Ifinished) {
for (var j = 0; j < s e a t s [ i ] .length; j++) {
// ,
if (seats[i][j] &s sea t s [ i ] [ j + 1] && seats[i][j + 2]) {
//
s e l S e a t = i * s e a t s [ i ] .l e n g t h + j;
- d o c u m e n t .g e t E l e m e n t B y l d (" s e a t '.+ (1 ~ ~ ^ ^ ~ ^ 7 - 1 ~ ^ ~ ^ ^
^ o c u m e n t . g e t E l e m e n t B y I d (V
" s e a t " -r
+ v
(i
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^_^^_>^i.g_etElementByld('seat'' + sea tN u m ).src ~ " s e a tj + s ta tu s + ".png";


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

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

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

function heat(targetTemp)

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^O < targetTen^)

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

//

_ ,
tru e.
}


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

function heat(targetTemp)

{
r e tu r n
,

.

if (getTempO >= targetTemp)


return;

----- '

while (getTen^O < 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);
id="seat5" src="" alt="
o n c l i c k = " s h o w S e a t S t a t u s (6);
id="seat6" src="" alt="
o n c l i c k = " s h o w S e a t S t a t u s (7);
id="seat7" src="" alt="
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="seat22" src=" ' alt="
<img id="seat23" src=" alt="
<img id="seat24" 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 (15);
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 (21);
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 (31); " />
o n c l i c k = " s h o w S e a t S t a t u s ( 3 2 ) ; " />
o n c l i c k = " s h o w S e a t S t a t u s (33); " />
o n c l i c k = " s h o w S e a t S t a t u s (34); " />

o n c l i c k = " s h o w S e a t S t a t u s (28);
on c l ick='s h c w S e a t S t a t u s (29) ; " />

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 id-"seat37" src-"" alt=""
/>
<img id-"seat38" 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^ur name:
Enter your phone number;
Enter your email address;

>

313

,,

32- ,

.



,
.

Enter the banner message:

Mandango...

Enter ZIP code of the (ocatton: 100012 ^


Enter the date for the message to be shown:
Enter your name:

1 1 ,2009

Seth Tinselman

/ i^ur 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:
Enter your email address:


,
.

, ,
.

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


Enter your email address:

setht@mandango

onblur:
onchange:

>

319

onblur onchange

_ _ _
\

Enter your name:

onblur onchange
.

Seth Tinselman
iseiman

onbhtf!qj
onchange!

Enter your phone numb


Enter your email address:

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.

,
validateNonEmpty ().
: true,
, false .
,

.

323

)

,
.
.
,
.
.
,

H T M L -

-

1 , -
.
.

Enter your phone number:

P fe a s e e n t e r a v a lu e .

H T M L - .
<span> , .

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

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

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


v a lid a t e N o n E m p t y ( )

,
.

function validateD ate(jn^utFieid, helpText) {


// ,
if (Jva(idateN onEm pty(inputFie!d, helpText))

/ / , \(
re tu rn va lid a teR eg E x (/'^\d iZ }V \d {Z }\/\d {4 -}$ /, inputField.vaiue, kelpText,
^

", ^ ( ^^ / 75).");
}


,

.

/
/
, .

,


Z 1 0 0 ?

2100 ...
,
, ,
. -
JavaScript 90
. Bannerocity
, , ,
,
.

350

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


'^

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


{}



.

,

? ...


~

!
Ente the date for the message to be shown; [03/01/200



.
L



JavaScipt
.
,

.
,

.

.
JavaScript

R e g E x p ,

.
t e s t {)
R e g E x p


.

352

...

.
. , ,
|,
. ,
.

\


.

/ s m a l l I m e d ii im | l a r g e /

/ ( r e d Ib lu e )

p ill/



' re d ,

blue pill.

353

.
IX
'


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

( )

6 ,
.


,
, .


Bannerocity: .
...
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~^^a

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.^etElem 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 t E l e m e n t B y l d ()
g e tE le m e n tsB y T a g N a m e ()
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

g e t E l e m e n t B y l d
.

, ,

()

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

g e t E l e m e n t B y l d
.



...

?
_______ /

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




!

<style type="text/css">
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)"


^^^~^onm 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,'^,^omeoYer=4his.className - 'decisionkover'"
o nm ouseout-4kis.classN am e - 'decision'"

></span>

,
span. .

o n m ouseout

| 1
,
, CSS?




:
.

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

.

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

<style type="text/css">

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

'
|

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.


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

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

/ /

405

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

changeSceneQ

decision,

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

/ / _^
var history = d o cu m en tg etE !em en tB yfd ("h isto ry);
if (curScene != ) {

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

history.appendChi!d(decisionElem);


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^es! 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^u6e 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^alers

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

s/imom

8 /21/2008
Found a 7x7x7 cube for sale oniine
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 ^uzziers

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)
num Entries = b l o g . l e n g t h ;
/ /
v a r 1 = 0 , b logT ext =
w h ile ( i < b l o g . l e n g t h && i < num Entries) {
/ /
i f (i % 2 == 0)
b lo g T e x t += "< s t y l e = ' b a c k g r o u n d - c o l o r : #'>";
else
b lo g T ex t += "<p>";
/ / HTML-
b lo g T ex t += "< stron g> " + ( b l o g [i ] . d a t e . g etM o n th ()
b lo g [ i] .d a te .g e tD a te 0 + "/" +
b lo g [i] . d a t e . g e t F u l lY e a r O + " < / s t r o n g X b r />"
b l o g [ i ] . b o d y + "</p>";
i++;
/ / HTML-
docum ent. g e tE le m e n tB y ld (" b l o g " ) . innerHTML = b lo g T e x t;
}

f u n c t i o n se a rc h B lo g O {
v a r s e a rc h T e x t = d o c u m e n t .g e t E l e m e n t B y I d ( " s e a r c h t e x t " ) .v a lu e ;
f o r (var 1 = 0 ; i < b l o g . l e n g t h ; i++) {
/ / ,
i f ( b l o g [ i ] . b o d y .t o L o w e r C a s e .in d e x O f(s e a rc h T e x t.to L o w e rC a s e (
!= - 1 )
+ ( 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 .

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

^

/ /
v a r i = , b lo g T ex t =
w h ile (i < b l o g . l e n g t h && i < num Entries) {
/ 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 ;
f o r (var 1 = 0 ; i < b l o g . l e n g t h ; i++) {
/ / 0 ..---1.- . _____________
i f Q b l o g [ i ] . body. toLowerCase () . indexOf ( s e a r c h T e x t . to L o w e r C a 's ^ ^
a l g g e - r - r - -b (bTog [ 11-^ ?57~ - ^ - "7 " '''~-:7^
(_ b l o g [ i ] . d a t e . g e t F u l l Y e a r 0 + "] " + b l o g [i 1 . b o d v );
" ----------------- ------------------------------------------------ -------------------------- ---

^~

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

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

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

M em

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


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

459

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


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

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

V
\ _ ,


this.

blog

,

!

c o n t a i n s T e x t ()
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
f u n c t i o n showBlog(numEntries) {
/ / ( )
. s o r t ( f u n c t io n ( b l o g l , 2) { r e t u r n b l o g 2 . d a t e - b l o g l . d a t e ; ) ) ;
/ / ,
i f ( [n u m E n tries)
num Entries = . l e n g t h ;
/ /
v a r 1 = 0 , blogListHTML =
w h ile (i < b l o g . l e n g t h && i < num Entries) {
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 ;
f o r (var 1 = 0 ; i < b l o g . l e n g t h ; i++) {
containsT extQ
/ / ,
6
i f (b lo g [i].co n ta in sT ex t(sea rch T ex t)) {
.
a l e r t ( b l o g l i ] );
to S trin g O
break;

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

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

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

>

461

YouCube 3 .0 !
,
Y o u C u b e 3.0
, , ...
p m c o p m u p o t o
...

...
...

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^i-urn -[" + (this.date.getMonthO + 1) + /


thS.dlte.getEullYearO . " 1 ^ this.body;

};
// HTML-
t h i s.toHTML - function(highlight)

//

b S g ^ i "

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

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

^
t ..</.ttongXb. />" .

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

};
// ,

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

466

10


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

Texto

!^

Blog

contalnsTextO

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



B log ,
?

>

467

...



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

468

10

^
,

^^ .

,

.
,
.

body/ "Managed to get a


date'' August 16th, 2008


,
,

toString
toHTML
containsText

"Found 7x7x7 cube.

toString
.

body^

date

X ^ J ^ s t 21st, 2008
/FunctionO
functionO

'

{ ...
{ ... }

.^functi^iTo^^

..

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 . b o d y = body;
t h i s . d a t e = date;

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

"/"

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

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

//
t h i s . b o d y = body;
t h i s . d a t e = date;


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

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


B lo g ()
,

image.

>

493

'

B l o g ( ) ,
image.

.........

,, . ;

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^Ajocijwsnis%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^eturn ..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^eturn "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";

}
else if (average < 70) {
return "people who should hit the books";

)
else if (averag < 81) (
return "people who should consider brain exercises";

)
else if (average <91) {
return "people who could be considered dull";

)
else if (average < 111) {
return "people of average intelligence";

}
else if (average < 121) {
return "people of superior intelligence";

)
else if (average < 141) {
return "people of very superior intelligence";

}
else {
return "geniuses";

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

507

^ 1^ nj^oB ejniipb
<html>
<head>
<title>BSI Case 1: IQ Calculator</title>

] cUeHap*uu ,
HuMu .

<script type="text/javascript">
var iqs = [ 113, 97, 86, 75, 92, 105, 146, 77, 64, 114, 165, 96, 97, 88, 108 ];
function showIQClass(data) {
alert("Click OK to begin IQ calculation.");
document.getElementByld("output").innerHTML
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^iiigence";

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 ^

^^^^^^acue-~


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

/*<=-------

// Increment the call number


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



- "
.

// Increment the call number


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

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

Blog.prototype.signature

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

Blog.prototype.signature

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

<script type="text/javascript"
<script type="text/javascript"
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 (
d o c u m e n t .g e t E l e m e n t B y l d (
d o c u m e n t .g e t E l e m e n t B y l d (

)
</script>
</head>
< b o d y o n l o a d = " l o a d B l o g ();">
< h 3 > Y o u C u b e - The B l o g for C u b e P u z z l e r s < / h 3 >
< i m g s r c = " c u b e . p n g " a l t = " Y o u C u b e " />
< i n p u t t y p e = " b u t t o n " i d = " s e a r c h " v a l u e = " S e a r c h the Blog"

"disabled"

disabled
<input type="text"

id="searchtext"

name="searchtext" value-""

/>

<div i d = " b l o g " x / d i v >


,
< i n p u t t y p e = " b u t t o n " i d = " s h o w a l l " v a l u e = " S h o w A ll B l o g E n t r i e s

"disabled"

discjsled
<input type="button"

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

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?

Оценить