HTML5, JavaScript, and jQuery 24-Hour Trainer E-Book

Dane Cameron

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 551

Veröffentlichungsjahr: 2015

Beschreibung

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.

Leseprobe

Table of Contents

Introduction

Who This Book Is For

What This Book Covers

How This Book Is Structured

What You Need to Use This Book

Conventions

Source Code

Errata

p2p.wrox.com

Part I: HTML and CSS

Lesson 1: Introduction to HTML5

What Is a Markup Language?

The Simplest HTML Page Possible

An HTML Template

Understanding Elements and Attributes

Try It

Lesson 2: Basic HTML

Structuring Text

Links and Images

Try It

Lesson 3: Lists and Tables

Lists

Tables

Try It

Lesson 4: Introduction to CSS

CSS Selectors

CSS Files and Inline Styles

Specificity

Inheritance

Browser Defaults

Chrome Scratch Pad

Try It

Lesson 5: Structuring Pages with CSS

The Box Model

Display Type

Positioning Elements

Controlling Positions

Try It

Lesson 6: HTML Forms

What Is a Form?

Adding Fields to a Form

HTML5 Input Fields

Try It

Lesson 7: Semantic Tags

Grouping and Segmenting Content

Styling Semantic Tags with CSS

Microformats

Summing Up

Try It

Lesson 8: HTML5 Validation

Adding Validation Rules

Customizing Validation

Disabling Validation

Try It

Lesson 9: Drag and Drop

Understanding Events

Drag and Drop Example

Try It

Lesson 10: Dynamic Elements

Summary and Details Tags

Progress Bar and Meter

Range Element

Polyfills

Try It

Part II: Dynamic HTML5 Web Applications with JavaScript and jQuery

Lesson 11: JavaScript

JavaScript Console

Data Types

Control Structures

Truthy and Falsy Values

Dynamic Typing

Try It

Lesson 12: Debugging

Try It

Lesson 13: Functions

Closures

Hoisting and Block Scope

Arguments

Bind

Try It

Lesson 14: Objects

Object Literals

Prototypes

Constructor Functions

Modules

Try It

Lesson 15: JSON

Replacing and Reviving

Try It

Lesson 16: Document Object Model

Nodes and Objects

Try It

Lesson 17: jQuery Selection

Loading jQuery

Selecting Elements

Pseudo-selectors

Selection Within a Context

Wrapped Objects

Try It

Lesson 18: jQuery Traversal and Manipulation

Traversal

Chaining

Manipulation

Changing Elements

Iteration

Try It

Lesson 19: jQuery Events

Registering Event Listeners

Delegated Event Listeners

Form Events

Screen Events

Animation

Try It

Lesson 20: Data Attributes and Templates

Template Tag

Data Attributes

Using the Template

Try It

Lesson 21: jQuery Plugins

jQuery UI

Writing a Plugin

Try It

Part III: HTML5 Multimedia

Lesson 22: HTML5 Audio

File Formats

Audio Tag

Controlling Playback

Try It

Lesson 23: HTML5 Video

File Formats

Controlling Volume

Controlling Playback Speed

Controlling Video Size

Media Source Extensions

Encrypted Media Extensions

Web Cryptography

Try It

Lesson 24: Canvas: Part I

Simple Drawing

Drawing Lines

Circles and Curves

Drawing Text

Try It

Lesson 25: Canvas: Part II

Linear Gradients

Shadows

Images

Transforming Shapes

Basic Animation

Try It

Lesson 26: CSS3: Part I

Selectors

CSS Borders

Custom Fonts

Try It

Lesson 27: CSS3: Part II

Linear Gradients

Calc Function

Text Effects

2D Transformations

Transitions

Try It

Lesson 28: CSS3 Media Queries

Adding Media Queries

External Stylesheets

Try It

Part IV: HTML5 APIs

Lesson 29: Web Servers

URLs

Choosing a Web Server

Try It

Lesson 30: Web Storage

Client-Side Storage

Web Storage API

Storing Structured Data

Try It

Lesson 31: IndexedDB

Creating a Database

Storing Data

Reading Data

Deleting Data

Try It

Lesson 32: Application Cache

Manifest Files

Updating Resources

Cache Events

Try It

Lesson 33: Web Workers

JavaScript Event Model

Web Workers

Try It

Lesson 34: Files

FileReader API

Other File-Related APIs

Try It

Lesson 35: AJAX

AJAX Requests

Try It

Lesson 36: Promises

Working with Promises

Creating Promises

Try It

Part V: Mobile

Lesson 37: Responsive Web Design

Testing Screen Resolution

Flexible Grids

Media Queries

Try It

Lesson 38: Location API

Monitor Movement

Loading the Application

Try It

Lesson 39: jQuery Mobile: Part I

Understanding jQuery Mobile

JQUERY Mobile Pages

Try It

Lesson 40: jQuery Mobile: Part II

UI Components

Events

Try It

Copyright

About the Author

Credits

Acknowledgments

Advertisement

End User License Agreement

Pages

xvii

xviii

xix

xx

xxi

xxii

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

19

20

21

22

23

24

25

27

28

29

30

31

32

33

34

35

36

37

39

40

41

42

43

44

45

46

47

48

49

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

69

70

71

72

73

74

75

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

151

152

153

154

155

156

157

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

185

186

187

188

189

190

191

192

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

253

254

255

256

257

261

262

263

264

265

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

285

286

287

288

289

290

291

293

294

295

296

297

298

299

300

301

303

304

305

306

307

308

309

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

369

370

371

372

373

374

375

376

377

Guide

Cover

Table of Contents

Introduction

Begin Reading

List of Illustrations

Figure 1.1

Figure 1.2

Figure 1.3

Figure 1.5

Figure 1.6

Figure 2.1

Figure 2.2

Figure 2.3

Figure 2.4

Figure 2.5

Figure 3.1

Figure 3.2

Figure 3.3

Figure 3.4

Figure 3.5

Figure 3.6

Figure 3.7

Figure 4.1

Figure 4.2

Figure 4.3

Figure 4.4

Figure 4.5

Figure 5.1

Figure 5.2

Figure 5.3

Figure 5.4

Figure 5.5

Figure 5.6

Figure 5.7

Figure 5.8

Figure 5.9

Figure 5.10

Figure 5.11

Figure 6.1

Figure 6.2

Figure 6.3

Figure 6.4

Figure 6.5

Figure 6.6

Figure 6.7

Figure 6.8

Figure 6.9

Figure 7.1

Figure 8.1

Figure 8.2

Figure 8.3

Figure 8.4

Figure 8.5

Figure 9.1

Figure 9.2

Figure 10.1

Figure 10.2

Figure 10.3

Figure 10.4

Figure 10.5

Figure 10.6

Figure 10.7

Figure 11.1

Figure 11.2

Figure 11.3

Figure 12.1

Figure 12.2

Figure 12.3

Figure 12.4

Figure 12.5

Figure 12.6

Figure 12.7

Figure 12.8

Figure 12.9

Figure 12.10

Figure 15.1

Figure 16.1

Figure 16.2

Figure 16.3

Figure 17.1

Figure 17.2

Figure 18.1

Figure 18.2

Figure 18.3

Figure 18.4

Figure 18.5

Figure 19.1

Figure 19.2

Figure 20.1

Figure 21.1

Figure 21.2

Figure 21.3

Figure 21.4

Figure 22.1

Figure 22.2

Figure 22.3

Figure 22.4

Figure 23.1

Figure 24.1

Figure 24.2

Figure 24.3

Figure 24.4

Figure 24.5

Figure 24.6

Figure 24.7

Figure 24.8

Figure 24.9

Figure 24.10

Figure 24.11

Figure 24.12

Figure 25.1

Figure 25.2

Figure 25.3

Figure 25.4

Figure 25.5

Figure 25.6

Figure 25.7

Figure 25.8

Figure 25.9

Figure 26.1

Figure 26.2

Figure 26.3

Figure 26.4

Figure 26.5

Figure 26.6

Figure 26.7

Figure 27.1

Figure 27.2

Figure 27.3

Figure 27.4

Figure 27.5

Figure 27.6

Figure 27.7

Figure 27.8

Figure 27.9

Figure 28.1

Figure 28.2

Figure 28.3

Figure 29.1

Figure 29.2

Figure 30.1

Figure 31.1

Figure 31.2

Figure 31.3

Figure 32.1

Figure 32.2

Figure 33.1

Figure 33.2

Figure 33.3

Figure 33.4

Figure 34.2

Figure 34.1

Figure 34.3

Figure 34.4

Figure 34.5

Figure 35.1

Figure 35.2

Figure 35.3

Figure 35.4

Figure 36.1

Figure 37.1

Figure 37.2

Figure 37.3

Figure 37.4

Figure 37.5

Figure 37.6

Figure 37.7

Figure 37.8

Figure 37.9

Figure 37.10

Figure 38.1

Figure 38.2

Figure 38.3

Figure 38.4

Figure 38.5

Figure 38.6

Figure 38.7

Figure 38.8

Figure 39.1

Figure 39.2

Figure 39.3

Figure 39.4

Figure 39.5

Figure 39.6

Figure 40.1

Figure 40.2

Figure 40.3

Figure 40.4

Figure 40.5

Figure 40.6

Figure 40.7

Figure 40.8

List of Tables

Table 22.1

Table 23.1

Table 26.1

Introduction

THE BASIC TECHNOLOGIES BEHIND THE WEB are now almost a quarter of a century old. HTML dates all the way back to 1993, the same year the first popular web browser, Mosaic, appeared on the scene.

You may have thought, therefore, that the technologies behind the Web would have entered a comfortable middle-age—still improving around the edges maybe—but not innovating with the pace and excitement of their early years.

In fact, nothing could be further from the truth. The last ten years have been some of the most ­exciting and innovative in the history of the Web, and this pace of change is continuing to ­accelerate. As a result, the Web is no longer the preserve of simple “websites.” It is the realm of “web ­applications”: feature-rich applications that just happen to run inside web browsers.

A whole new class of computing devices has accentuated the pace of this change. Web browsers are no longer the preserve of desktops and laptops: They now appear on a myriad of devices from smart phones to smart TVs. The fact that web browsers are the one universal feature across these diverse devices has served to enhance the appeal of browser-based web applications: You write the web application once, and your users use it from any device they choose.

This innovation of the last decade did not happen by accident. Various standards committees have been hard at work for more than a decade devising a set of standards that have been grouped under the umbrella of “HTML5.” These standards have now made their way into all the major web-browsers.

If you are familiar with HTML, the term HTML5 may simply imply a new version of the HTML markup language—which may be interesting—but not revolutionary. In fact, HTML5 is far more than a markup language; it is a set of programming APIs, implemented by browsers, that allow web pages to perform tasks that had never before been possible.

For example, it is now possible for an HTML page to store massive amounts of data in your browser, operate without a network connection, request more information from a web server as and when it needs it, and perform complex computations in the background without interfering with your browsing experience.

The goal of this book is to teach you how to write web applications. In order to achieve this, you need to understand more than HTML5. You need to understand a set of related technologies. More importantly, however, you need to understand how these technologies work together.

HTML5, for instance, is closely tied to JavaScript. In many cases, if you want to use HTML5, you need to do so through a JavaScript API. It is thus not possible to master HTML5 without also mastering JavaScript.

JavaScript is also approaching middle age, yet it too continues to evolve in tandem with HTML5. Historically considered something of an oddity, JavaScript has turned into a rich and expressive programming language, capable of much more than the simple tasks (such as form validation) that it was consigned for so many years.

A large part of the appeal of JavaScript is the myriad of enormously useful, freely available libraries that are written in the language. Chief among these is jQuery, a JavaScript library that has taken on a life of its own and come to redefine the way programmers add dynamic features to their web pages. You can write web applications without learning jQuery, but your code will lack the conciseness of expression the jQuery library affords.

Finally, in order to produce visually appealing web applications you will need to learn Cascading Style Sheets. Just like all other web technologies, CSS also continues to grow and evolve, and the newest version of CSS—called CSS3—means that web pages can achieve dazzling visual effects.

Who This Book Is For

This book is for anyone who wants to learn how to build dynamic websites and web applications using standards-based technologies.

You may have experience with HTML4, although that is not required because the early lessons provide an in-depth look at all of the most important features of HTML. More experienced readers may, on the other hand, choose to skip these lessons.

This book contains many code examples based on JavaScript. It is expected that you have some programming experience before reading this book, although not necessarily with JavaScript. If you have no experience with programming, you may want to prepare with some online tutorials and exercises before beginning.

Finally, this book is for programmers who want to learn by doing.

What This Book Covers

HTML5 is a “versionless” standard. The specifications behind HTML5 continue to grow and evolve, but this evolution is not matched with “official” or versioned releases.

As such, this book does not focus on a specific version of HTML5; instead, it focuses on the aspects of HTML5 that have achieved widespread adoption in all of the most common web browsers.

The JavaScript language does contain versioned releases, but unlike most programming languages, you have no control over the version that your users will choose because this is a byproduct of the browser that they select. As a result, this book will not focus on a specific version of JavaScript: It will focus on the features that are universally available in all the major browsers.

This book will use a number of JavaScript libraries that are subject to change over time. Whenever a library is used, a specific version will be specified. In many cases, a more recent version of the library will work without issue, although the code is only guaranteed to work with the specified version.

This book is intended as a hands-on guide. Each lesson includes code and exercises that you can follow along with, and even augment if you choose. It is important that you follow along with these exercises because it is this process that will consolidate your understanding of how the technologies really work.

How This Book Is Structured

This book is split into five sections. The first two sections are intended to be read in order because they provide you with the foundation knowledge required to add more complex functionality. The remaining three sections can be read in any order you choose.

The first section of the book provides an introduction to HTML and CSS and looks at how to build static web pages with these technologies. By the end of this lesson, you will have a solid foundation on which to start adding more complex functionality.

In the second section, you turn your attention to JavaScript and jQuery, and look at how a static web page can be converted into a dynamic web application.

The third section of the book looks at the multimedia capabilities of web browsers and how you can harness these through technologies such as the Canvas API and CSS3.

Once you have an understanding of JavaScript, you can turn your attention to the HTML5 APIs that allow you to store data inside the browser, access data from web servers, and execute tasks on background processes. It is these features that truly turn your website into a feature-rich web application.

In the final section of the book, you will turn your attention to mobile devices and address the question of how you can convert your web application into a mobile web application that functions on any mobile device your users may choose to use.

A large portion of this book is structured around the development of a sample web application. If you choose to skip a lesson, you will therefore need to download a completed version of that lesson's web application before starting the next lesson.

What You Need to Use This Book

In order to complete most of the exercises in this book, you will need nothing more than a text editor and the Chrome web browser.

If you have a favorite text editor, you can continue to use it for this book. If you do not have a text editor installed, Notepad++ (http://notepad-plus-plus.org) is a good option for Windows, Text Wrangler (http://www.barebones.com/products/textwrangler) is a good choice for Macs, and EMacs is a good choice for Linux. You may also choose to use an Integrated Development Environment (IDE) such as Eclipse.

The Chrome web browser has been chosen for this book not so much for the capabilities of the browser itself, but for the developer tools that accompany it. You can choose to use an alternative web browser if you wish, but the examples will focus on Chrome.

The Chrome web browser is subject to frequent updates, and it is assumed that you will use the latest version of the browser.

In later sections of this book, you will also need a web server. A lesson is provided to guide you through the process of installing and configuring a web server.

The source code for the samples is available for download from the Wrox website at:

www.wrox.com/go/html5jsjquery24hr

Conventions

To help you get the most from the text and keep track of what's happening, we've used a number of conventions throughout the book.

Warning

Warnings hold important, not-to-be-forgotten information that is directly relevant to the surrounding text.

Note

Notes indicate notes, tips, hints, tricks, or asides to the current discussion.

As for styles in the text:

We

highlight

new terms and important words when we introduce them.

We show keyboard strokes like this: Ctrl+A.

We show filenames, URLs, and code within the text like so:

persistence.properties

.

We present code in two different ways:

We use a monofont type with no highlighting for most code examples.

We use bold to emphasize code that is particularly important in the present ­context or to show changes from a previous code snippet.

Source Code

As you work through the examples in this book, you may choose either to type in all the code manually or to use the source code files that accompany the book. All the source code used in this book is available for download at www.wrox.com. For this book, the code download is on the Download Code tab at:

www.wrox.com/go/html5jsjquery24hr

You can also search for the book at www.wrox.com by ISBN (the ISBN for this book is 978-1-1190-0116-4) to find the code. A complete list of code downloads for all current Wrox books is available at www.wrox.com/dynamic/books/download.aspx.

Most of the code on www.wrox.com is compressed in a .ZIP or .RAR archive, or a similar archive format appropriate to the platform. Once you download the code, just decompress it with an appropriate compression tool.

Errata

We make every effort to ensure that there are no errors in the text or in the code. However, no one is perfect, and mistakes do occur. If you find an error in one of our books, such as a spelling mistake or faulty piece of code, we would be very grateful for your feedback. By sending in errata, you may save another reader hours of frustration, and at the same time, you will be helping us provide even higher quality information.

To find the errata page for this book, go to

www.wrox.com/go/html5jsjquery24hr and click the Errata link. On this page you can view all errata that has been submitted for this book and posted by Wrox editors.

If you don't spot “your” error on the Book Errata page, go to www.wrox.com/contact/techsupport.shtml and complete the form there to send us the error you have found. We'll check the information and, if appropriate, post a message to the book's errata page and fix the problem in subsequent editions of the book.

p2p.wrox.com

For author and peer discussion, join the P2P forums at http://p2p.wrox.com. The forums are a Web-based system for you to post messages relating to Wrox books and related technologies and interact with other readers and technology users. The forums offer a subscription feature to email you topics of interest of your choosing when new posts are made to the forums. Wrox authors, editors, other industry experts, and your fellow readers are present on these forums.

At http://p2p.wrox.com, you will find a number of different forums that will help you, not only as you read this book, but also as you develop your own applications. To join the forums, just follow these steps:

Go to

http://p2p.wrox.com

and click the Register link.

Read the terms of use and click Agree.

Complete the required information to join, as well as any optional information you wish to provide, and click Submit.

You will receive an email with information describing how to verify your account and complete the joining process.

Note

You can read messages in the forums without joining P2P, but in order to post your own messages, you must join.

Once you join, you can post new messages and respond to messages other users post. You can read messages at any time on the Web. If you would like to have new messages from a particular forum emailed to you, click the Subscribe to this Forum icon by the forum name in the forum listing.

For more information about how to use the Wrox P2P, be sure to read the P2P FAQs for answers to questions about how the forum software works, as well as many common questions specific to P2P and Wrox books. To read the FAQs, click the FAQ link on any P2P page.

Part IHTML and CSS

Lesson 1: Introduction to HTML5

Lesson 2: Basic HTML

Lesson 3: Lists and Tables

Lesson 4: Introduction to CSS

Lesson 5: Structuring Pages with CSS

Lesson 6: HTML Forms

Lesson 7: Semantic Tags

Lesson 8: HTML5 Validation

Lesson 9: Drag and Drop

Lesson 10: Dynamic Elements

Lesson 1

Introduction to HTML5

This lesson is an introduction to the HTML5 markup language. The HTML5 markup ­language is a language for structuring and expressing the content of a web page in a manner that can be consistently interpreted by a web browser.