HTML5 provides a number of new APIs that developers can call from client-side JavaScript. We will review a few of them here.

DETECTING BROWSER CAPABILITIES

Not every browser supports every new API. If you attempt to call an API not supported by the current, browser, the browser is likely to throw an exception, which could be a bad experience for your users. For Internet apps, it’s best to test if a feature is supported before calling it. Ideally, you should find an alternate way to provide similar functionality for unsupported browsers. At a minimum, though, your application should not crash.

In any event, the first step is figuring out whether the current browser supports the feature you are interested in. For HTML5 API features, the Modernizr library is a good tool to do this. You can download the latest Modernizr script from http://modernizr.com/ and you can use it in your web page by adding a script tag, pointing to the location on your server where you save the modernizer JavaScript file,  as in the example below

<script src="/scripts/modernizr-2.5.1.js">script> 

The script tag above must appear before any script you write that uses modernizr. The script above creates an object named “Modernizr” and that object contains a lot of Boolean properties, each corresponding to an HTML5 feature and each returning true only if that feature is supported in the current browser.

For example, Modernizr.canvas returns true if the current browser supports the tag and its associated APIs. In practice, you can write code like the following to avoid JavaScript errors

if (!Modernizr.canvas){
    // Code that uses the CANVAS APISs
}
else {
    // Alternate code for older browsers
} 

SELECTING ELEMENTS

HTML5 now provides more ways to select elements than the traditional document.getElementById()

Now, you can pass the name of a class to document.getElementsByClassName () to return a set of all elements to which the class is applied.

Also, document.querySelector and document.querySelectorAll allow accept a CSS selector, such as “#Div1” as an argument and return matching elements. The difference between the two methods is that querySelector returns the first match, while querySelectorAll returns the set of all matching elements.

You can even chain together these For example, you can do the following to select all spans with the class “MyClass”:

var x1 = document.querySelectorAll (".MyClass");  

var x2 = x1.querySelectorAll ("span");  

CANVAS

The tag allows you to create and manipulate images on a drawing surface. The advantage of the canvas is that you get control of these images down to the pixel level. The disadvantage is that you get control of the images down to the pixel level, which can be a lot of work.

To begin using this tool, add a tag to your markup and set appropriate properties, such as width, height, style, and id.  A canvas is simply a container for drawing objects. You will need to use JavaScript to draw objects onto its surface.

The key to working with a canvas object in JavaScript is to get a reference to the canvas’s Context. The code below gets this reference. Similar code appears in every canvas-manipulating script I write:

Once you have a reference to the canvas’s context (the ctx variable, in the example above), you can use this cccccontext to draw shapes on the canvas.

• beginPath(): Resets the current path. Necessary if you have been using the context object to draw something and now want to begin drawing something new.
  moveTo(): Move the current postion to a given x,y position in order to begin drawing from there
  lineTo(): Draw a line from the current position to a new position
  fill(): Complete a 2-dimensional shape (if not already complete) and fill it in with the current fill color and style
  fillRect(): Draw a rectangle and fill it with color
  arc()    Draw a curve

Below are several examples of using JavaScript drawing and filling simple shapes on a canvas with the id of “MyCanvas”.

JavaScript to draw a triangle on a canvas

var canvas = document.getElementById("MyCanvas");
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(75, 100);
ctx.lineTo(25, 100);
ctx.fill(); 

JavaScript to Draw and fill a rectangle on a canvas

var canvas = document.getElementById("MyCanvas");
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "rgb(500,0,0)"; 
ctx.fillRect(25, 150, 150, 100); 

JavaScript to Draw a circle on a canvas

var canvas = document.getElementById("MyCanvas");
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(125,375,100,0,2*Math.PI, false);
ctx.fillStyle = "Blue";
ctx.fill(); 

Here are the results of the JavaScript above:

“DATA DASH” ATTRIBUTES

In the past, HTML defined a finite list of tags and attributes that it considered valid markup. This changes with HTML5. Now, any attribute that begins with “data-” (pronounced “datadash”) is considered valid markup. In fact, such attributes have a super power, in that you can access them in JavaScript, via the object’s data collection.

For example, if I have the following markup in my page:

<div data-firstname="David" data-lastname="Giard" id="fName"> 

, I can access the data stored with the datadash attributes via the following JavaScript:

var div = getElementById("fName");
var fn = div.data("firstname");
var ln = div.data("lastname"); 

WEB STORAGE

Web storage is a feature of HTML5 that allows you to write JavaScript to store data on the client. This is useful if you want to maintain state as the user navigates from page to page or if they close the browser and return to your site at a later time.

There are two types of web storage – Local Storage and Session Storage. The difference between these two is that session storage is reset after the user closes the browser, while local storage persists between sessions.

The syntax of the two web storage types is very similar. The window object contains 2 properties – localStorage and sessionStorage to access local storage and session storage respectively. You can store data in these by assigning creating a property and assigning a value to it, as in the following JavaScript example:

var lStorage = window.localStorage;
lStorage.lastProductViewed = “Widget”;
var sStorage = window.sessionStorage;
sStorage.currentProduct = “Widget2”;
var product = lStorage.lastProductViewed; 

GEOLOCATION

Geolocation is a feature that allows the browser to determine the physical location of the user. Before describing the API, it is important to understand some limitations of Geolocation.

In order to use the geolocation API, the user must turn on location tracking in their browser. When a script first make a call to the geolocation API, the browser may prompt the user for permission to turn on this feature. 

Location is determined by one or more of the following methods: IP address tracking; GPS; Wi-Fi; Cell Phone Tower triangulation; and user-defined settings. Not all these features may be available and the accuracy and precision may vary from one feature to the next, or even from one day to the next.

The API is relatively straightforward: The navigator.geolocation exposes the getCurrentPosition method, which returns a position object. The only trick is that this method runs asynchronously, so you must pass to getCurrentPosition the name of a function to call when the method returns successfully. This function will accept the return value (a position object) as a parameter. The position object contains properties, such as

You may also pass to getcurrentPosition the name of a function to call if an error occurs.

A sample JavaScript syntax is below:

navigator.geolocation.getCurrentPosition(showPosition, showError);
var coords = position.coords;
var lat = coords.latitude;
var lng = coords.longitude;
position.coords contains a number of useful properties, including latitude, longitude, accuracy, altitude, altitudeAccuracy, heading (direction of movement), and speed. 

CONCLUSION

In this article, I described some of the new JavaScript APIs introduced with HTML5.

In this series, I introduced some of the concepts and features of HTML5 and CSS3.