Learning JavaScript

Tim Wright has been a web designer and front-end developer since 2004, primarily focusing on CSS, HTML, accessibility, and building applications that scale from desktop to mobile device. Wright has worked at various universities nationwide, fostering Web standards at each of them. Wright has written on front-end development for popular online web design  publications such as Smashing Magazine, SitePoint, and Web Designer Depot, and has spoken at events including  Future of Web Design.

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