User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 282

C H A P T E R 7
User Interaction and the HTML5 APIs
Included in the HTML5 specification is documentation on how HTML elements, as well
as the wider web browser environment, can be accessed from a programmed script. This
is a component of the specification that is interwoven throughout the specification. Each
component that can be scripted is broken into application programming interfaces
(APIs) that define how the script can interface with specific elements on the page and
specific aspects of the web browser. Some of these APIs are included as part of HTML5,
such as the History API for manipulating the browser's forward and back buttons pro-
grammatically, while others are part of associated technologies and are covered in sep-
arate (but interlinked) specifications to HTML5, such as the geolocation API—which
provides web pages with geographic location-aware capabilities. What these APIs are
built around is the idea that the page and its environment are represented by a series of
objects, such as the geolocation object, which contains location data for the page. In
the context of just the page's content, these objects form the means by which a web page's
Document Object Model (DOM) may be traversed, as discussed in Chapter 1 .
The goal of this chapter is to get you versed in how to explore and use the scripting
capabilities defined in the HTML specification so you have the necessary tools to explore
on your own beyond what can be shown in this chapter. As examples, we will look at
using scripting to interact with the browser's history, as well as the video and canvas
elements. Lastly, we'll also look at how to add drag-and-drop support to any element.
Using JavaScript in this chapter
JavaScript has been sprinkled throughout the chapters in this topic, but in this chapter
we will be working with it more formally, so you'll want to set up a testing environment
for JavaScript code. As discussed in Chapter 2 , JavaScript can be embedded using the
script element, or it can be loaded from an external file, which is the preferable meth-
od. Moving it to its own file creates a clearer separation between the markup and scripting
on your website.