Master web app development with hands-on practice and video demonstration 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.
Table of Contents:
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
