HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB ///

HTML5 APIs

Extend browser capabilities. Manipulate location, storage, and graphics directly with JavaScript.

api_demo.js
1 / 12
12345
🔌

Console:HTML5 brought powerful APIs to the browser. Instead of just static content, we can now access device hardware and storage directly via JavaScript.


API Matrix

UNLOCK NODES BY MASTERING JS APIs.

Concept: Geolocation

Access the user's location via navigator.geolocation. Requires user consent.

System Check

Is the Geolocation API synchronous or asynchronous?

Dev Network

Share Your Demos

ONLINE

Created a cool Canvas game or a Geo-fencing app? Push your code to the repo.

Support Us

HTML5 APIs

Author

Pascual Vila

Full Stack Instructor // Code Syllabus

Modern browsers are more than document viewers; they are application platforms. HTML5 APIs provide standardized interfaces to hardware and system capabilities.

Geolocation

The navigator.geolocation object is used to locate the user's position. It respects privacy by prompting the user for permission before sharing location data.

Web Storage

Before HTML5, application data had to be stored in cookies, included in every server request. localStorage and sessionStorage provide a more secure way to store large amounts of data locally.

Canvas

The <canvas> element is a container for graphics. You must use JavaScript to actually draw the graphics. It is commonly used for game graphics, data visualization, and image editing.

View Full Transcript+

This transcript covers the window.navigator object methods, the distinction between synchronous and asynchronous calls in Geolocation, the synchronous nature of LocalStorage, and the context retrieval method for the HTML5 Canvas element.

API Glossary

API
Application Programming Interface. A set of functions that allows applications to access data and interact with external software components or operating systems.
localStorage
A web storage object that allows JavaScript sites and apps to store and access data right in the browser with no expiration date.
Canvas Context
An object with properties and methods that you use to render graphics inside the canvas element. Obtained via getContext('2d').
Navigator
An object that contains information about the browser (like user agent, language, and geolocation capabilities).