JUMP START HTML5

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xixWho Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxConventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxCode Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxTips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiiSupplementary Materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiiTools You’ll Need . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiiDo You Want to Keep Learning? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxivChapter 1 Basics: What is HTML5? . . . . . . . . . . . . . . . . 1A Brief History of HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2HTML: The Early Years . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2A Detour Through XHTML Land . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3The Battle for World DOM-ination . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4Applets and Plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4What HTML5 Isn’t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5A Note on the HTML5 Specification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Chapter 2 Basics: The Anatomy ofHTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Your First HTML5 Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8The Two Modes of HTML5 Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9HTML Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10To Quote or Not Quote: Attributes in HTML5 . . . . . . . . . . . . . . . . . . 12A Pared-down HTML5 Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12"XHTML5": HTML5’s XML Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix

Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx

Conventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx

Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx

Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii

Supplementary Materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii

Tools You’ll Need . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii

Do You Want to Keep Learning? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiv

Chapter 1 Basics: What is HTML5? . . . . . . . . . . . . . . . . 1

A Brief History of HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

HTML: The Early Years . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

A Detour Through XHTML Land . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

The Battle for World DOM-ination . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Applets and Plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

What HTML5 Isn’t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

A Note on the HTML5 Specification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Chapter 2 Basics: The Anatomy of

HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Your First HTML5 Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

The Two Modes of HTML5 Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

HTML Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

To Quote or Not Quote: Attributes in HTML5 . . . . . . . . . . . . . . . . . . 12

A Pared-down HTML5 Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

"XHTML5": HTML5’s XML Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Chapter 3 Basics: Structuring Documents . . . . . . 17

The article Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Putting It Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

The section Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

div Versus section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Other Document Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

figure and figcaption . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

main Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Chapter 4 Basics: HTML5 Forms . . . . . . . . . . . . . . . . . . 33

Starting an HTML5 Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

The input Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Collecting Names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Using Form Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Requiring Form Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Styling Required Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Collecting Email Addresses, Phone Numbers, and URLs . . . . . . . . . . 38

Uploading Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

The datalist Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Other Input Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Date and Time Inputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Chapter 5 Basics: Multimedia, Audio and

Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Adding Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Autoplaying and Looping Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Video-only Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Place Holding with poster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Controlling Video Dimensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Bandwidth Use and Playback Responsiveness . . . . . . . . . . . . . . . . . . . . . . 55

Cross-browser Audio and Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Using Multiple Video or Audio Files . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Chapter 6 Multimedia: Preparing Your

Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Codec Showdown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

The Current Landscape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Converting Files Using Miro Video Converter . . . . . . . . . . . . . . . . . . . . . . 61

Converting Media Using FFmpeg . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

Resizing Video Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Using FFmpeg to Generate a Poster Image . . . . . . . . . . . . . . . . . . . . 67

Using a Hosted Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Quality Versus File Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Chapter 7 Multimedia: Using Native HTML5

Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

The audio Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

The autoplay Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Looping Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Muting Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Buffer Hinting with the preload Attribute . . . . . . . . . . . . . . . . . . . . . . . 72

preload="auto" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

preload="none" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

preload="metadata" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Fallback Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Chapter 8 Multimedia: Using Native HTML5

Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Setting Video Dimensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Percentages for Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Setting a Poster Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

What We've Learned So Far . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Chapter 9 Multimedia: The source

Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

The source Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

Format Hinting With the type Attribute . . . . . . . . . . . . . . . . . . . . . . . . . 88

Troubleshooting Media Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Responsive Video With the media Attribute . . . . . . . . . . . . . . . . . . . . . . 90

Serving Videos With Different Aspect Ratios . . . . . . . . . . . . . . . . . . 90

So Far We've Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Chapter 10 Mutimedia: The track Element . . . . . 93

The State of track Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Captions, Subtitles, and audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Adding the track Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Specifying Subtitles, Captions, and Metadata . . . . . . . . . . . . . . . . . . . . . . 96

Using Multiple track Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Specifying the Language of Your Text Tracks . . . . . . . . . . . . . . . . . . . . . . 98

Labeling Your Tracks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Creating Text Tracks With WebVTT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

What is WebVTT? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Creating a Simple WebVTT File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

WebVTT Cue Spans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Styling Subtitles and Captions with the ::cue

Pseudo-element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

What We've Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Chapter 11 Multimedia: Scripting Media

Players . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Event-Driven DOM Scripting: An Introduction . . . . . . . . . . . . . . . . . . . . 112

Step 1: Creating Our Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

Step 2: Retrieving Our Video Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Step 2: Playing and Pausing Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Step 3: Determining the File's Duration . . . . . . . . . . . . . . . . . . . . . . . . . . 117

Step 4: Indicating Time Elapsed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

Step 5: Seeking Using a range Input Type . . . . . . . . . . . . . . . . . . . . . . . 119

Step 6: Adjusting Volume . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Hinting at Bandwidth Consumption by Changing the Value of

preload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Chapter 12 Canvas & SVG: An Introduction to

Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

What Can Canvas Be Used For? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Before We Get Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

Canvas Looks Complex, Why Not Use Flash? . . . . . . . . . . . . . . . . . . . . . . 125

What About WebGL? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Chapter 13 Canvas & SVG: Canvas Basics . . . . . . 127

HTML5 Canvas Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Drawing a Simple Shape Onto the Canvas . . . . . . . . . . . . . . . . . . . . . . . 128

Canvas Coordinates and Paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

Drawing Circles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

Drawing Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

Drawing a Triangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

Canvas Sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

Scaling with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

Scaling with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

CSS Transforms Using JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

Chapter 14 Canvas & SVG: Handling

Non-supporting Browsers . . . . . . . . . . . . 137

Create Alternative Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

Chapter 15 Canvas & SVG: Canvas

Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Radial Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Playing with the Color Stops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

Chapter 16 Canvas & SVG: Canvas Images and

Videos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Using the image() Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

Chapter 17 Canvas & SVG: An Introduction to

SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

Why Use SVG Instead of JPEG, PNG, or GIF? . . . . . . . . . . . . . . . . . . . . . . 150 

Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Other Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

Gradients and Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Chapter 18 Canvas & SVG: Using SVG . . . . . . . . . . 159

Inserting SVG Images on Your Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

Which Method Should You Use? . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

SVG Tools and Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

Chapter 19 Canvas & SVG: SVG Bézier

Curves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

Quadratic Bézier Curves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

Cubic Bézier Curves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

Chapter 20 Canvas & SVG: SVG Filter

Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169

Using Filter Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

Playing with Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

Chapter 21 Canvas & SVG: Canvas or SVG? . . . 175

Creation Languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Typical Uses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Chapter 22 Offline Apps: Detecting When the

User Is Connected . . . . . . . . . . . . . . . . . . . . . . 179

Determining Whether the User Is Online . . . . . . . . . . . . . . . . . . . . . . . . . 179

Listening for Changes in Connectivity State . . . . . . . . . . . . . . . . . . . . . . 180

Online and Offline Events in Internet Explorer 8 . . . . . . . . . . . . . . 181

Limitations of navigator.onLine . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

Checking Connectivity With XMLHttpRequest . . . . . . . . . . . . . . . . . . 182

What You’ve Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

Chapter 23 Offline Apps: Application

Cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

Cache Manifest Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

Saving Files Locally with the CACHE: Section Header . . . . . . . . . 186

Forcing Network Retrieval with NETWORK: . . . . . . . . . . . . . . . . . . 187

Specifying Alternative Content for Unavailable URLs . . . . . . . . . . 188

Specifying Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188

Adding the Cache Manifest to Your HTML . . . . . . . . . . . . . . . . . . . . . . . 189

Serving the Cache Manifest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

Avoiding Application Cache “Gotchas” . . . . . . . . . . . . . . . . . . . . . . . . . . 189

Solving Gotcha #1: Loading Uncached Assets from a Cached

Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

Solving Gotcha #2: Updating the Cache . . . . . . . . . . . . . . . . . . . . . 190

Cache Gotcha #3: Break One File, Break Them All . . . . . . . . . . . . . 190

Testing for Application Cache Support . . . . . . . . . . . . . . . . . . . . . . . . . . 191

The Application Cache API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

The AppCache Event Sequence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

Setting Up Our Cache Manifest . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

Setting Up Our HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

Setting Up Our CSS and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 194

Chapter 24 Offline Apps: Web Storage . . . . . . . . . . . 197

Why Use Web Storage Instead of Cookies? . . . . . . . . . . . . . . . . . . . . . . . 198

Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

Inspecting Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

Testing for Web Storage Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

Setting Up Our HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

Saving Values With localStorage.setItem() . . . . . . . . . . . . . . . . 201

Adding an Event Listener . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

Using localStorage.setItem to Update Existing Values . . . . 203

Retrieving Values With localStorage.getItem() . . . . . . . . . . . . . 203

Alternative Syntaxes for Setting and Getting Items . . . . . . . . . . . 205

Looping Over Storage Items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Clearing the Storage Area With localStorage.clear() . . . . . . . . 207

Storage Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Listening for the Storage Event . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

The StorageEvent Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

Storage Events Across Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Determining Which Method Caused the Storage Event . . . . . . . . 209

Storing Arrays and Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Limitations of Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

Chapter 25 Offline Apps: Storing Data With

Client-side Databases . . . . . . . . . . . . . . . . . . 215

The State of Client-side Databases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

About IndexedDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

Setting up Our HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

Creating a Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

Adding an Object Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

Adding a Record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

Retrieving and Iterating Over Records . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Creating a Cursor Transaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Retrieving a Subset of Records . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

Retrieving or Deleting Individual Entries . . . . . . . . . . . . . . . . . . . . . . . . . 228

Updating a Record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

Deleting a Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

Wrapping Up and Learning More . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

Chapter 26 APIs: Overview . . . . . . . . . . . . . . . . . . . . . . . . . . 233

A Quick Tour of the HTML5 APIs Covered . . . . . . . . . . . . . . . . . . . . . . . . 233

What You Are Going to Learn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

Checking Browser Compatibility . . . . . . . . . . . . . . . . . . . . . . . . . . . 236

Setting Up the Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

Chapter 27 APIs: Web Workers . . . . . . . . . . . . . . . . . . . . . 239

Introduction and Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

Passing JSON data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

Web Worker Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

More Advanced Workers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

Inline Workers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

Creating Subworkers Inside Workers . . . . . . . . . . . . . . . . . . . . . . . . 246

Using External Scripts within Workers . . . . . . . . . . . . . . . . . . . . . . 246

Security Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Polyfills for Older Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

Chapter 28 APIs: The Geolocation API . . . . . . . . . . 249

Hitting the Surface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Continuously Monitoring Position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252

Accuracy of Geolocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254

Chapter 29 APIs: Server Sent Events . . . . . . . . . . . . . 255

The Motivation for SSEs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

The API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256

The EventStream Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

How About a Little JSON? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Associating an Event ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Creating Your Own Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

Handling Reconnection Timeout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

Closing a Connection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

A Sample Event Source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

Chapter 30 APIs: The WebSocket API . . . . . . . . . . . 263

The JavaScript API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Sending Binary Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

Sample Server Implementations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

Chapter 31 APIs: The Cross-document

Messaging API . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

The JavaScript API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Basic Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Detecting the Readiness of the Document . . . . . . . . . . . . . . . . . . . . . . . 275

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276