HTML5 APIs For JavaScript - A Course For Web Developers

Explore how browser APIs provide libraries to control web pages, validate forms, fetch server data with Ajax, and store data locally using local storage, audio, video, geolocation, and file handling.

Learn to handle browser differences through feature detection rather than browser sniffing, using XMLHttpRequest availability to select options, with fallbacks like ActiveX and concise ternary patterns.

Explore the window object, the core browser and JavaScript entity that exposes global variables and functions, and learn to use alerts, prompts, print, and window.open for popups.

Explore the location object and window.location to inspect and modify the url, including protocol, domain, port, path, query string, and hash, and how to navigate to another page.

Learn how JavaScript manipulates the DOM to insert, move, copy, and delete elements by traversing the document tree and using the document object.

Learn to locate and select elements in the document object model using getElementById, getElementsByTagName, getElementsByClassName, and querySelector and querySelectorAll; understand live collections and the difference between first and all matches.

Discover how to locate notes and fetch related ones using DOM navigation, and build utilities to extract real element nodes and navigate parents, children, and siblings while ignoring whitespace.

Explore how to change DOM element styles to create animations by modifying the style property inline, using camelCase for CSS properties, and applying a predefined animate class with className.

Explore how to change a paragraph's text by selecting its DOM node, using textContent and child nodes (first and last child), and optionally inserting HTML with nonstandard methods.

Learn how to create and insert new elements from scratch into the DOM, use appendChild, createElement, createTextNode, and cloning to manage dynamic content efficiently.

demonstrates removing elements from the dom with removeChild, looping to delete all children, and replacing nodes with replaceChild, illustrated on articles and paragraphs.

Explore browser events, register handlers, and use event objects to respond to interactions; learn bubbling, delegation, and how to cancel default actions or attach multiple handlers.

Develop and attach event handlers using addEventListener, prevent default, and manage click events while avoiding inline handlers; learn how browser behavior and legacy IE events shape robust event handling.

Explore the event object in event handlers, properties and methods like prevent default. Understand currentTarget and target, how they reveal the clicked link, and note mouse coordinates with cross-browser properties.

Explore event propagation by applying a single table-level handler to highlight the current row and column on mouseover and mouseout, using an active class for efficient, scalable interactivity.

Explore form validation in HTML5 forms and the balance between client-side and server-side checks. Learn about submit, change, and keypress events, and how HTML5 input types improve forms across browsers.

Define a register form submit listener to validate email and password fields, display errors, and prevent submission when data is invalid, plus email change listener and no spaces in passwords.

Explore simple custom controls built with native browser support and progressive enhancement, including styled form controls and a dynamic password strength indicator driven by regex-based scoring.

Explore browser animation techniques using JavaScript to rapidly update CSS properties, canvas, SVG, and video, compare CSS animations, transitions, 3D transforms, and timers, with plugins like Flash, and mindful use.

Learn how JavaScript timers setTimeout and setInterval control a bouncing ball animation, with an animate function detecting edges, reversing direction, and using clearInterval to pause.

Learn how html5's requestAnimationFrame schedules animations when the browser can render, delivering smoother frames without a fixed interval, and compare it to setTimeout for game programming and broader browser support.

Learn how Ajax enables asynchronous JavaScript to fetch server data and update parts of a page without reload. Explore XMLHttpRequest, JSON, and script injection for autocomplete and live conversations.

This lesson explains web services and Ajax output formats, showing a PHP speed converter that returns XML, JSON, or text with optional JSONP callbacks.

Learn to implement ajax calls using xmlhttp requests to a web service, handle asynchronous get or post, and render json data with progressive enhancement and debugging.

Explore script insertion techniques as a fast, cross-domain, cross-browser alternative to AJAX calls, using script tags injected into the DOM, with JSONP-style callbacks and security considerations.

Explore HTML5 video and audio elements, use the video tag with multiple sources (mp4 and webm), and build custom controls with JavaScript.

Learn how the HTML5 canvas provides a programmable image you draw with JavaScript on a 2d context to create lines, circles, text, and shapes, then clear and redraw as needed.

Learn how scalable vector graphics (SVG) deliver crisp shapes at any size, manipulate SVG via the DOM and JavaScript, and animate elements for charts and diagrams.

Explore geolocation with HTML5 APIs to determine a user's latitude, longitude, and accuracy, load a map via Google Maps, and handle success or failure callbacks for mobile and web apps.

Learn to implement drag-and-drop file handling in the browser, read images and text with the file reader, show previews, and prepare uploads via ajax.

Web workers enable JavaScript threading to run long tasks in the background, preventing browser unresponsiveness, using postMessage with onmessage for communication; they cannot access global variables.

Discover how cookies maintain web state by sending small text data with each request, enabling logons and shopping baskets, and manage cookies with JavaScript using set, get, and delete operations.

Explore local storage and session storage as client-side name-value stores in the browser, unlike cookies. Learn how local storage persists across tabs, while session storage stays within a tab.

Learn to build offline-capable web apps by using a cache manifest, detect online status with navigator.onLine, and manage offline storage and synchronization.

Explore managing browser history in web apps using the window history API, back and forward navigation, and pushState to track actions in Ajax-powered interfaces without leaving the page.

Explore the browser development console tools with Firebug and similar browsers, learning to inspect the DOM, monitor cookies and AJAX calls, and debug JavaScript with breakpoints and console messages.

Compare Safari's webkit inspector and Chrome's inspector, using elements, properties, resources, network, and sources tabs to inspect cookies, local storage, and page data; record timelines and profiles to analyze performance.

Opera dragonfly, the opera developer console, with inspector, network, storage, profiler, and remote debugging features to analyze and optimize web apps across devices.

Trace the history of Internet Explorer and its impact on web development. Learn to use Internet Explorer developer tools, from console to network tab, for debugging, profiling, and testing.