I>Chapter 1: Progressive Enhancement 3
Defining Progressive Enhancement 3
History 4
Purpose 5
Accessibility 5
Reusability 5
Progressive Enhancement Versus Graceful
Degradation 6
Structure Layer 6
Adding More Meaning with HTML5 8
Presentation Layer 9
Inline CSS 10
Linking Up Your Stylesheet 10
Behavior Layer 12
Inline JavaScript 12
Embedded JavaScript 13
External and Unobtrusive JavaScript 15
Benefits of Progressive Enhancement 16
Performance 17
Building for the Future 17
The Touch Interface 18
Final Words on Progressive Enhancement 19
Summary 20
Exercises 20
Chapter 2: JavaScript in the Browser 21
A People's History of JavaScript 21
Origins 22
Progressive Enhancement 23
The Behavior Layer 24
Moving Past Today 24
Browser Interactions with JavaScript 25
HTTP Requests 26
JavaScript and Rendering Engines 29
What JavaScript Can Do 30
Modifying HTML 31
Communicating with the Server 31
Storing Data 31
How You Should Use JavaScript 32
Improving User Experience 32
Using JavaScript Responsibly 32
Creating Fallbacks 34
Tools to Help You Use JavaScript 36
Tools Built into the Language 36
Tools Built into the Browser 37
Summary 38
Exercises 38
Chapter 3: JavaScript Terminology 39
Basics 39
Document Object Model (DOM) 39
Parents 40
Children 40
Siblings 41
Variables 41
Strings 43
Comments 43
Operators 44
Use Strict 45
Storage 45
Cache 45
Arrays 45
Cookies 46
JavaScript Object Notation (JSON) 46
Objects 47
Creating Interaction 47
Loops 48
Conditionals 48
switch Statement 49
Functions 50
Anonymous Functions 51
Callback Functions 52
Methods 53
Events 54
Ajax 54
Summary 55
Exercises 55
Chapter 4: Accessing the DOM 57
What Is the DOM? 57
The DOM Tree 58
Element Nodes 59
Text Nodes 60
Attribute Nodes 62
Working with the Element Node 62
Targeting by ID 63
Targeting by Tag Name 64
Targeting by Class 67
Using CSS Selectors in JavaScript to Target Nodes 68
Working with the Attribute Node 70
Getting an Attribute 71
Setting an Attribute 72
Removing an Attribute 73
Working with the Text Node and Changing Content 73
Moving Around the DOM 74
Accessing First and Last Child 76
Dynamically Adding and Removing Nodes from the
DOM 77
Adding Elements to the DOM 77
Removing Elements from the DOM 78
Summary 79
Exercises 79
Chapter 5: Storing Data in JavaScript 81
Variables 81
Strings 82
Numbers 83
Boolean 84
Performance in Variables 84
Arrays 85
Basic Array 85
Associative Array 87
Multidimensional Array 87
Pushing Data into an Array 89
Working with Array Methods 89
join 90
slice 90
shift and unshift 91
pop 92
concat 92
sort 93
Objects 93
Performance in Objects 94
JSON 95
Benefits of Using JSON 96
Using an API 96
Web Storage in HTML5 97
localStorage and sessionStorage 97
setItem 97
getItem 98
removeItem 98
Storing Chunks of Data with JSON 99
Using Web Storage Responsibly 100
Summary 101
Exercises 101
Chapter 6: Variables, Functions, and Loops 103
Defining Variables 103
Grouping Variables 104
Reserved Terms 104
Functions 105
Basic Functions 106
Anonymous Functions 107
Scope 108
Calling a Function with a Function 109
Returning Data 110
A Function as a Method 112
Loops 113
for Loop 114
Conditionals 116
if Statement 116
if/else Statement 117
switch Statement 118
if versus switch 119
Putting It All Together 120
Summary 121
Exercises 122
Chapter 7: Interacting with the User Through Events 123
Attaching an Event 124
Event Handlers 124
Event Listeners 125
Binding Events 128
Unbinding Events 129
Mouse and Keyboard Events 130
click 132
focus and blur 134
Accessibility 135
change 135
mouseover and mouseout (hovering) 136
submit 137
Preventing Default Behavior 139
keydown, keypress, and keyup 139
Putting It All Together 140
Touch and Orientation Events 143
touchstart and touchend 144
touchmove 145
orientationchange 145
Support for Touch Events 146
Putting It All Together 147
Summary 148
Exercises 148
Chapter 8: Communicating with the Server Through
Ajax 149
Ajax History 150
Server Communication 151
The XMLHttpRequest 152
Creating an Ajax Call 154
Sending a Request to the Server 155
Receiving Data Back from the Server 158
Making Repeat Ajax Calls 163
Ajax Data Formats 164
XML 165
HTML 166
JSON 167
Ajax Accessibility 168
Live Regions and ARIA 169
Common Ajax Mistakes 170
Providing Feedback 170
Putting It All Together 172
Where Is Ajax Going? 177
Summary 177
Exercises 178
Chapter 9: Code Organization 179
General Coding Style Rules 180
Scope 181
Failing Quickly 183
User Experience 185
Code Design 185
Files and Directories 186
In-document Script 187
Variable Declarations 188
Variable and Function Naming 189
Comments 190
Indentation 192
Whitespace 193
Statement Spacing 194
Line Breaks 195
Math and Operators 196
Using eval() 197
Taking Style Guides Too Far 199
Code Structure 200
Functions 200
Anonymous Functions 201
Functions as Variables 202
Functions as Methods 202
JavaScript Development Patterns 204
Summary 208
Exercises 209
Chapter 10: Making JavaScript Easier with Libraries 211
JavaScript Library Basics 212
The Library Learning Process 213
Syntax 214
Focusing on the Goal 214
Creating Shortcuts 215
Fixing Browser Issues 216
Popular Libraries 216
jQuery Basics 221
document.ready 222
Selectors 223
Traveling Through the DOM 225
Adding Style Information 226
Binding Events 227
Animation 227
jQuery Nonbasics 228
Using Ajax in jQuery 228
Looping Through Data in jQuery 230
Chaining Functions 232
Extending Libraries Through Plug-ins 233
Building a Plug-in 234
The Good of Libraries 236
Popularity and Community 236
Efficient Code 237
The Bad of Libraries 238
Overhead 238
Performance 239
Overreliance and Shelf Life 239
Using Microlibraries 240
The Good 240
The Bad 241
Summary 242
Exercises 242
Chapter 11: HTML5 JavaScript APIs 243
What Is HTML5? 244
The Markup (aka HTML) 244
Creating Better Semantics 245
Building More Accessible Content 245
The JavaScript APIs 248
The navigator Object 248
Geolocation 249
Audio and Video 251
History API 254
Web Workers 259
Device API 265
The Battery Status API 266
The Vibration API 267
The Network Information API 268
Using This Today with Feature Detection 270
Summary 271
Exercises 272
Chapter 12: Moving Forward with JavaScript 273
A Brief Review of Key Topics 274
Progressive Enhancement 274
DOM Manipulation 275
Data Storage 277
Server Communication 279
JavaScript for Designers 279
Advanced Interface Design 280
CSS Transforms in JavaScript 284
Interacting from the Desktop 289
JavaScript for Developers 293
JavaScript Templates 294
JavaScript on the Server with NodeJS 299
Summary 302
Exercises 303
Answers 305
Index 309
