You are on page 1of 10

Contents

Preface

xix

Lesson 1: addIng JavasCrIpt to a Web page

AL

part I: IntroduCtIon to JavasCrIpt

The <script/> Element


Tag Placement

RI TE MA D TE GH

3
5

Try It
Lesson Requirements Step-by-Step

6
6 6

Lesson 2: varIabLes and JavasCrIpt syntax

Variables

9
12 21

Primitive Data Types in JavaScript Determining a Variables Data Type

Keywords and Reserved Words Try It


Lesson Requirements Step-by-Step

22 22
22 23

Lesson 3: FunCtIons

RI

25

Lesson Requirements Step-by-Step

CO

Function Declarations Functions as Values Passing Functions to Other Functions Returning Functions Try It

PY

26 29 30 31 32
32 32

Lesson 4: MakIng deCIsIons

35

Conditional Statements
Comparison Operators Logical Operators Assigning the Results of Conditions

35
35 38 41

647837ftoc.indd 9

10/27/10 1:46:19 AM

CONTENTS

Executing Code Based on Conditions


The if Statement The switch Statement The Ternary Operator

41
41 43 45

Try It
Lesson Requirements Step-by-Step

45
45 46

Lesson 5: Loops

49

Loop Basics The for Loop The while Loop The do-while Loop Try It
Lesson Requirements Step-by-Step

49 50 52 52 53
53 54

Lesson 6: sCope

57

Global Scope Functional Scope No Block-Level Scopes Variable Declarations Identifier Lookup Try It
Lesson Requirements Step-by-Step

57 58 60 61 61 62
62 63

Lesson 7: obJeCts and buILt-In types

65

What Are Objects? Using JavaScript Objects Built-In Data Types


Array Date

65 66 67
67 73

Number
String

75
76

Try It
Lesson Requirements Step-by-Step

79
79 79

647837ftoc.indd 10

10/27/10 1:46:20 AM

CONTENTS

Lesson 8: CustoM obJeCts

83

The Object Data Type


Outputting Objects Objects as Input

83
85 86

Creating Custom Data Types Try It


Lesson Requirements Step-by-Step

86 88
88 88

Lesson 9: prototypes and InherItanCe (the FunCtIon obJeCt)

91

Using the prototype Object Inheriting Members from Other Objects Try It
Lesson Requirements Step-by-Step

92 94 96
96 96

part II: prograMMIng the broWser


Lesson 10: the WIndoW obJeCt 10 1

The Global Scope


Variables and Functions Are Properties and Methods The this Variable

101
102 103

Showing and Using Dialog Boxes


The Alert Dialog Box The Prompt Dialog Box The Confirm Dialog Box

103
103 104 104

The Location Object


Reloading the Page Navigating to Another Page

105
105 106

Try It
Lesson Requirements Step-by-Step

106
106 107

Lesson 11: sCrIptIng WIndoWs

109

Opening New Windows Manipulating Windows Coding between Windows Security Try It
Lesson Requirements Step-by-Step

109 112 115 117 117


118 118
xi

647837ftoc.indd 11

10/27/10 1:46:20 AM

CONTENTS

Lesson 12: sCrIptIng FraMes

121

Frames and the window Object Try It


Lesson Requirements Step-by-Step

121 125
125 126

Lesson 13: the doCuMent obJeCt ModeL

129

What Is the DOM? Navigating the DOM Selecting Element Nodes Try It
Lesson Requirements Step-by-Step

129 132 133 135


135 135

Lesson 14: addIng htML WIth JavasCrIpt

137

DOM Creation Methods


Creating Elements Adding Elements to the Document Creating and Adding Text Nodes

137
138 139 140

Using the innerHTML Property Try It


Lesson Requirements Step-by-Step

142 142
142 143

Lesson 15: ModIFyIng eLeMent styLe

147

Using the style Property Using the className Property Try It


Lesson Requirements Step-by-Step

147 150 150


150 151

Lesson 16: IntroduCtIon to events

155

Mouse Events
Movement-Based Events Button-Based Events

157
157 157

Keyboard Events Basic Events Try It

158 158 159

xii

647837ftoc.indd 12

10/27/10 1:46:20 AM

CONTENTS

Lesson 17: assIgnIng event handLers WIth htML attrIbutes

161

Wiring Up Event Handlers Cancelling Default Behavior Try It


Lesson Requirements Step-by-Step

161 163 164


165 165

Lesson 18: usIng earLy doM event handLers

17 3

Assigning Event Handlers Try It


Lesson Requirements Step-by-Step

173 175
175 176

Lesson 19: usIng standard doM and Ie event handLers

185

Standard Event Handlers IE Event Handlers Try It


Lesson Requirements Step-by-Step

186 188 189


189 190

Lesson 20: WrItIng Cross-broWser event handLers

195

Writing an Event Utility Object Modernizing Your Event Utility Try It


Lesson Requirements Step-by-Step

197 199 200


200 201

Lesson 21: the standard event obJeCt

205

Accessing the Event Object Event Objects


Determining the Event That Occurred Accessing the Event Target

205 206
206 207

Try It
Lesson Requirements Step-by-Step

209
209 210

xiii

647837ftoc.indd 13

10/27/10 1:46:20 AM

CONTENTS

Lesson 22: Internet expLorers event obJeCt

217

Accessing the event Object The event Object


Determining the Event That Occurred Accessing the Event Target

217 218
218 219

Try It
Lesson Requirements Step-by-Step

220
220 221

Lesson 23: WrItIng Cross-broWser event Code

225

Acquiring the Event Target Canceling Default Behavior Redux Try It


Lesson Requirements Step-by-Step

225 226 228


228 229

Lesson 24: draggIng and droppIng

235

Getting the Mouse Pointers Location


Client Coordinates Element Coordinates

235
236 237

Events Used in Drag-and-Drop Try It


Lesson Requirements Step-by-Step

238 238
239 239

Lesson 25: tIMers and anIMatIng eLeMents

249

Setting a Delay the setTimeout() Method Setting an Interval the setInterval() Method Try It
Lesson Requirements Step-by-Step

249 252 252


253 253

Lesson 26: ForMs a prIMer

261

Forms and the DOM Form Control Elements


The name Property The value Property The form Property The type Property

261 262
263 263 264 264

xiv

647837ftoc.indd 14

10/27/10 1:46:20 AM

CONTENTS

The disabled Property The focus() and blur() Methods

264 264

Try It
Lesson Requirements Step-by-Step

265
265 265

Lesson 27: sCrIptIng buttons

267

Try It
Lesson Requirements Step-by-Step

269
269 270

Lesson 28: sCrIptIng text eLeMents

27 3

The Textbox The Password Textbox The Hidden Textbox The Multiline Textbox Try It
Lesson Requirements Step-by-Step

273 274 274 275 275


275 276

Lesson 29: sCrIptIng seLeCtIon boxes

283

Removing Options Adding Options Try It


Lesson Requirements Step-by-Step

284 285 287


287 287

Lesson 30: sCrIptIng CheCkboxes and radIo buttons

295

Scripting Checkboxes Scripting Radio Buttons Try It


Lesson Requirements Step-by-Step

295 297 297


297 298

Lesson 31: an IntroduCtIon to aJax

305

What Is Ajax?
Google Suggest Google Maps

306
306 306

Requirements for Ajax

308

xv

647837ftoc.indd 15

10/27/10 1:46:20 AM

CONTENTS

Lesson 32: usIng xMLhttprequest obJeCts

311

Creating XHR Objects


Browsers with Native Support Browsers that Support XmlHttp

311
312 312

Using XHR Objects Determining the Success of a Request Security Try It


Lesson Requirements Step-by-Step

313 315 316 317


317 317

Lesson 33: MakIng aJax requests usIng get

321

Making GET Requests Asynchronous Programming Try It


Lesson Requirements Step-by-Step

321 323 325


325 325

Lesson 34: MakIng aJax requests usIng post

329

Assembling Data Making POST Requests Try It


Lesson Requirements Step-by-Step

329 332 333


333 334

Lesson 35: Json

339

XML Rules the WorldOr Does It? JavaScript Object Notation Saves the World Converting to and from JSON Try It
Lesson Requirements Step-by-Step

339 341 343 346


346 347

part III: handLIng errors, debuggIng, and best praCtICes


Lesson 36: CoMMon CodIng MIstakes 353

Undefined Variables Case-Sensitivity

353 354

xvi

647837ftoc.indd 16

10/27/10 1:46:20 AM

CONTENTS

Closing Braces and Parentheses Operator Misuse


Lesson 37: handLIng errors

355 356
357

Preventing Errors The trycatch Statement Throwing Exceptions Try It


Lesson Requirements Step-by-Step

357 358 359 360


360 360

Lesson 38: debuggIng WIth FIrebug

367

Getting Familiar with the UI


Setting Breakpoints Stepping through Code

368
371 372

Try It
Lesson Requirements Step-by-Step

373
373 374

Lesson 39: CodIng guIdeLInes

37 7

Use Whitespace Variable Declarations Avoid the Global Scope Use Literals
Lesson 40: separatIng JavasCrIpt and htML

377 378 379 379


381

Try It
Lesson Requirements Step-by-Step

382
383 383

Lesson 41: separatIng JavasCrIpt and Css Lesson 42: avoIdIng gLobaL sCope

387 389

Using Functions Emulating Namespaces Try It


Lesson Requirements Step-by-Step

390 392 393


393 393

xvii

647837ftoc.indd 17

10/27/10 1:46:20 AM

CONTENTS

Lesson 43: optIMIzIng your Code

399

Refactoring Code
Refactoring Duplicate Code Reducing Statements

399
400 401

Optimizing DOM Code


Using Document Fragments Using innerHTML

402
403 404

Use Event Delegation Try It


Lesson Requirements Step-by-Step

405 406
406 407

appendIx: Whats on the dvd?

413

System Requirements Using the DVD on a PC Using the DVD on a Mac Whats on the DVD Troubleshooting Customer Care
Index

413 414 414 414 415 415


417

xviii

647837ftoc.indd 18

10/27/10 1:46:20 AM