HTML5, JavaScript and jQuery (Programmer to Programmer) - 2015
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:
1. Go to http://p2p.wrox.com and click the Register link.
2. Read the terms of use and click Agree.
3. Complete the required information to join, as well as any optional information you wish to provide, and click Submit.
4. 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.