HTML5, JavaScript, and jQuery 24-Hour Trainer

HTML5, JavaScript, and jQuery 24-Hour Trainer shows you how to build real-world HTML5 apps ? both web-based and mobile ? in combination with JavaScript, jQuery, and CSS/CSS3. You'll learn progressively more advanced skills as you work through the series of hands-on video lessons. Exercises and screencasts walk you step-by-step through the process of building web applications, and give you the opportunity to experiment and extend the examples to create your own working web app. You'll gain a solid understanding of the fundamental technologies, and develop a skillset that fully exploits the functionality of web development tools.

Although HTML5 is at the forefront of web development, it exists within an ecosystem that also includes CSS/CSS3, JavaScript, and JavaScript libraries like jQuery. Building robust, functional web applications requires a clear understanding of these technologies, and more importantly, the manner in which they fit together. This is your step-by-step guide to building web apps, with a hands-on approach that helps you learn by doing.

• Master the fundamentals of HTML and HTML5
• Explore multimedia capabilities and CSS3
• Integrate offline data storage, background processes, and other APIs
• Adapt web applications for mobile phones and tablets

Whether you're looking for a quick refresher or a first-time lesson, HTML5, JavaScript, and jQuery 24-Hour Trainer will quickly get you up to speed.

INTRODUCTION xvii

PART I: HTML AND CSS

CHAPTER 1: INTRODUCTION TO HTML5 3

What Is a Markup Language? 3

The Simplest HTML Page Possible 4

An HTML Template 6

Understanding Elements and Attributes 8

Try It 9

CHAPTER 2: BASIC HTML 11

Structuring Text 11

Links and Images 14

Try It 16

CHAPTER 3: LISTS AND TABLES 19

Lists 19

Tables 21

Try It 24

CHAPTER 4: INTRODUCTION TO CSS 27

CSS Selectors 28

CSS Files and Inline Styles 32

Specificity 32

Inheritance 33

Browser Defaults 34

Chrome Scratch Pad 34

Try It 36

CHAPTER 5: STRUCTURING PAGES WITH CSS 39

The Box Model 39

Display Type 41

Positioning Elements 42

Controlling Positions 46

Try It 48

CHAPTER 6: HTML FORMS 51

What Is a Form? 51

Adding Fields to a Form 53

HTML5 Input Fields 56

Try It 59

CHAPTER 7: SEMANTIC TAGS 61

Grouping and Segmenting Content 62

Styling Semantic Tags with CSS 64

Microformats 65

Summing Up 66

Try It 66

CHAPTER 8: HTML5 VALIDATION 69

Adding Validation Rules 69

Customizing Validation 72

Disabling Validation 74

Try It 74

CHAPTER 9: DRAG AND DROP 77

Understanding Events 78

Drag and Drop Example 78

Try It 82

CHAPTER 10: DYNAMIC ELEMENTS 85

Summary and Details Tags 85

Progress Bar and Meter 86

Range Element 88

Polyfills 88

Try It 90

CHAPTER 11: JAVASCRIPT 95

JavaScript Console 95

Data Types 96

Control Structures 101

Truthy and Falsy Values 103

Dynamic Typing 104

Try It 105

CHAPTER 12: DEBUGGING 107

Try It 108

CHAPTER 13: FUNCTIONS 115

Closures 118

Hoisting and Block Scope 120

Arguments 121

Bind 122

Try It 122

CHAPTER 14: OBJECTS 125

Object Literals 125

Prototypes 127

Constructor Functions 130

Modules 131

Try It 133

CHAPTER 15: JSON 135

Replacing and Reviving 138

Try It 140

CHAPTER 16: DOCUMENT OBJECT MODEL 141

Nodes and Objects 141

Try It 147

CHAPTER 17: JQUERY SELECTION 151

Loading jQuery 151

Selecting Elements 153

Pseudo-selectors 154

Selection Within a Context 155

Wrapped Objects 156

Try It 157

CHAPTER 18: JQUERY TRAVERSAL AND MANIPULATION 159

Traversal 159

Chaining 160

Manipulation 161

Changing Elements 163

Iteration 164

Try It 165

CHAPTER 19: JQUERY EVENTS 167

Registering Event Listeners 167

Delegated Event Listeners 170

Form Events 172

Screen Events 173

Animation 174

Try It 174

CHAPTER 20: DATA ATTRIBUTES AND TEMPLATES 177

Template Tag 177

Data Attributes 178

Using the Template 180

Try It 182

CHAPTER 21: JQUERY PLUGINS 185

jQuery UI 185

Writing a Plugin 188

Try It 191

CHAPTER 22: HTML5 AUDIO 195

File Formats 195

Audio Tag 198

Controlling Playback 199

Try It 201

CHAPTER 23: HTML5 VIDEO 203

File Formats 203

Controlling Volume 205

Controlling Playback Speed 207

Controlling Video Size 207

Media Source Extensions 209

Encrypted Media Extensions 209

Web Cryptography 210

Try It 210

CHAPTER 24: CANVAS: PART I 213

Simple Drawing 214

Drawing Lines 216

Circles and Curves 216

Drawing Text 218

Try It 219

CHAPTER 25: CANVAS: PART II 221

Linear Gradients 221

Shadows 222

Images 223

Transforming Shapes 224

Basic Animation 227

Try It 228

CHAPTER 26: CSS3: PART I 231

Selectors 231

CSS Borders 233

Custom Fonts 237

Try It 239

CHAPTER 27: CSS3: PART II 241

Linear Gradients 241

Calc Function 243

Text Effects 243

2D Transformations 245

Transitions 248

Try It 250

CHAPTER 28: CSS3 MEDIA QUERIES 253

Adding Media Queries 254

External Stylesheets 256

Try It 257

CHAPTER 29: WEB SERVERS 261

URLs 262

Choosing a Web Server 262

Try It 263

CHAPTER 30: WEB STORAGE 267

Client-Side Storage 268

Web Storage API 269

Storing Structured Data 271

Try It 273

CHAPTER 31: INDEXEDDB 275

Creating a Database 276

Storing Data 278

Reading Data 279

Deleting Data 281

Try It 281

CHAPTER 32: APPLICATION CACHE 285

Manifest Files 285

Updating Resources 288

Cache Events 289

Try It 290

CHAPTER 33: WEB WORKERS 293

JavaScript Event Model 294

Web Workers 296

Try It 300

CHAPTER 34: FILES 303

FileReader API 304

Other File-Related APIs 307

Try It 308

CHAPTER 35: AJAX 311

AJAX Requests 312

Try It 316

CHAPTER 36: PROMISES 319

Working with Promises 320

Creating Promises 322

Try It 325

CHAPTER 37: RESPONSIVE WEB DESIGN 329

Testing Screen Resolution 330

Flexible Grids 331

Media Queries 336

Try It 340

CHAPTER 38: LOCATION API 343

Monitor Movement 345

Loading the Application 349

Try It 353

CHAPTER 39: JQUERY MOBILE: PART I 355

Understanding jQuery Mobile 356

JQUERY Mobile Pages 358

Form-Based Pages 362

JavaScript 365

Try It 366

CHAPTER 40: JQUERY MOBILE: PART II 369

UI Components 369

Events 373

Try It 376

INDEX 379

Dane Cameron is a professional software engineer and a senior solutions architect for an IT consultancy in Wellington, New Zealand. An expert on HTML5 technologies, Dane played a hands-on role in the development of several large-scale, innovative web applications. He is the author of the Amazon bestselling guide A Software Engineer Learns HTML5, JavaScript and jQuery.

Wrox guides are crafted to make learning programming languages and technologies easier than you think. Written by programmers for programmers, they provide a structured, tutorial format that will guide you through all the techniques involved.