October 8, 2011

HTML5 APIs

HTML5 introduces lots of new and exciting things for web authors, among these are new APIs. Here are some of them.

An API to interact with the application cache, which is a set of cached resources.

You can do window.applicationCache to get the ApplicationCache object that applies to the active document of that window. More on application caches here.

DataTransfer API
The DataTransfer objects are used to expose the drag data store that underlies a drag-and-drop operation. More on drag and drop here.

Command API
A command is the abstraction behind menu items, buttons, and links. They are defined to have facets (label, hint, icon, etc.) and are exposed on elements using this API.

As of this writing, there is no proper definition to this. But we can assume it'll extend our client-side validation tool arsenal.

The History objects provide a representation of the pages in the session history of browsing contexts.

For example, you can go back (window.history.back()) and forward (window.history.forward()). More on session history here.

An API to interact with the <audio> and <video> elements.

You can do things like play (controller.play()) and pause (controller.pause()). More on media elements here.

Text Track API
An API to interact with the <audio> and <video> associated text tracks, like subtitles or captions.

You can get a media element and get a track from it like media.textTracks[0] (for the first one).
textTrack element has it's own API which can return things like the language, readyState, mode, etc. More on media elements here.

APIs for the text field selections
The input and textarea text elements define an API for handling their selection.

You can select everything in a text field with the select() function, or use selectionStart and selectionEnd to get the currently selected text.

By the way, this is not it. There are, of course, other interfaces and current elements that are being extended with new properties and functions.

Related specifications
Now I present to you:
  • Specs that were originally in the HTML5 spec, but were later moved out into their own.
  • Specs worked on by the Web Apps Working Group (in charge of HTML5).
  • Other related/interesting specs.

Canvas 2D Context
Defines the 2D Context for the HTML <canvas> element.

Clipboard API and events
Describes APIs for clipboard operations such as copy, cut and paste in web applications.

Editing APIs
Defines commands to edit HTML documents programmatically.

File API
This specification provides an API for representing file objects in web applications, as well as programmatically selecting them and accessing their data.

File API: Directories and System
This specification defines an API to navigate file system hierarchies.

File API: Writer
This specification defines an API for writing to files from web applications.

Defines two mechanisms for communicating between browsing contexts in HTML documents.

Indexed Database API
Formerly WebSimpleDB API, this document defines APIs for a database of records holding simple values and hierarchical objects.

Server-Sent Events
This specification defines an API for opening an HTTP connection for receiving push notifications from a server in the form of DOM events.

The Web Sockets API
This specification defines an API that enables Web pages to use the WebSocket protocol for two-way communication with a remote host.

Web Storage
This specification defines an API for persistent data storage of key-value pair data in Web clients.

Web Workers
This specification defines an API that allows Web application authors to spawn background workers running scripts in parallel to their main page. This allows for thread-like operation with message-passing as the coordination mechanism.

Enhances the XMLHttpRequest object with new features, such as cross-origin requests, progress events, and the handling of byte streams for both sending and receiving.


And, again, these are not it. There are other working groups in the W3C besides the Web Apps one, each one with specifications they're working on. It's crazy, I know, but hopefully this will give you an idea of what's coming. I strongly recommend you to research more about it and experiment.

Thanks for reading and let me know your comments.