HTML5 Data and Services Cookbook: Take the fast track to the rapidly growing world of HTML5 data and services with this brilliantly practical cookbook. Whether building websites or web applications, this is the handbook you need to master HTML5.

The Number object contains the toFixed([digits]) method that can be used to display numbers; here the digits parameter can have a value between 0 and 20. The number will either get rounded automatically if needed, or the number will get padded with additional zeros if necessary. Ok, so let's see it in action.

Perform the following steps do demonstrate working with the Number object:

The result retrieved from executing the code will print out the numbers with their respective toFixed representation, which should be straightforward.

Let's take a look at some of the characteristic values:

The toFixed() method works mostly as expected so long as we don't need the higher precision or are only using it to display numbers where the type of rounding is not mission critical.

Additionally, we cannot rely on toFixed() when we need rounding in cases where we have numbers such as 1.446 and others that fall in the same category; calling 1.446.toFixed(1) would result in inconsistent and unpredictable results.

There are various ways to solve this. The quick and dirty solution would be to redefine the Number.prototype.toFixed() function, but we encourage you to not do so, as doing this may have side effects that are not apparent. Any redefinition of the functions from the built-in objects is considered an anti-pattern if it is not absolutely essential. The problem arises if another library or a piece of code is using the same function. The other library might expect our redefined function to work a certain way. These types of redefinitions are hard to track; even if we are to add a function instead of redefining it, someone else might do the same thing. For example, say we decided to add some function to the Number object:

Number.prototype.theFunction = function(arg1,arg2){}

There are no guarantees that someone else has not already added theFunction to the Number object. We could do additional checks to verify if the function already exists, but we cannot be sure if it does what we want it to do.

Instead, using a utility function for achieving consistent data would be a better option.

One way of tackling the problem is to first multiply the number with 10 ^ digits and then call the Math.round(number) method on the result, or you can call Math.ceil(number). For example, if you need to have the value rounded upwards to the nearest integer, use the following:

    function round(number, digits) {
        if(typeof digits === "undefined" || digits < 0){
          digits = 0;
        }
        var power = Math.pow(10, digits),
         fixed = (Math.round(number * power) / power).toString();
        return fixed;
    };

Now, as the number gets multiplied with 10 ^ digits and then gets rounded, we do not observe the problems with toFixed(). Note that this method has a different behavior from toFixed() not just in the way of how rounding is being handled, but also the addition of trailing zeroes.

A different option would be to use an arbitrary precision library such as Big.js if precision is crucial (https://github.com/MikeMcl/big.js).

First, we need to take a look at some of the functions that we are going to use. Let's take a look at the Array.join(separator) method that can be applied to create joined text from a list of elements:

new Array('life','is','life').join('*')

This will result in "life*is*life" that shows fairly simple elements that are joined with a given separator. Another method that is of interest is Array.slice(begin[, end]) that returns a copy of a portion of an array. For our use, we are only interested in the begin parameter that can have both positive and negative values. If we use a positive value, it means that this will be the starting index for the slice using zero-based indexing; for example, consider the following line of code:

new Array('a','b','c','d','e','f','g').slice(4);

The preceding line of code will return an array with the elements 'e','f', and 'g'.

If, on the other hand, using a negative value for the begin element indicates an offset from the end of the array, consider the same example using a negative value as follows:

new Array('a','b','c','d','e','f','g').slice(-3);

The result would be 'e','f','g', as we are slicing from the end.

Let's get back to our problem: how do we create a clean solution for prepending zeros to a number? For an iterative solution, we create a method that accepts the number, the size of the formatted result, and the character that will be used for padding; let's take '0' for example:

function iterativeSolution(number,size,character) {
   var strNumber = number.toString(),
    len = strNumber.length,

    prefix = '';
   for (var i=size-len;i>0;i--) {
      prefix += character;
   }
 return prefix + strNumber;
}

Here we converted the number to a string in order to get the length of its representation; afterwards, we simply create prefix that will have the size–len characters of the character variable, and just return the resulting prefix + strNumber that is the string representation for that number.

You may notice that in the case where size is smaller than len, the original number is returned, and this should probably be changed in order to have the function working for that corner case.

Another way would be to use the Array.slice() method to achieve similar results:

function sliceExample(number,prefix){
   return (prefix+number).slice(-prefix.length);
}
sliceExample(42,"00000");

This will just prepend a prefix to a number and slice off the extra '0' counting from the end, making the solution a lot cleaner and, additionally, enabling us to be more flexible around what will be part of the prefix. The downside of this is that we are manually constructing the prefix that will be part of the method call sliceExample(42,"00000"). In order to make this process automatic, we can make use of Array.join:

function padNumber(number,size,character){
  var prefix = new Array(1 + size).join(character);

We create an array of the expected size + 1 as on joining, we'll get the total array size-1 joined elements. This will construct the prefix with the expected size, and the other part will remain the same:

  return (prefix + number).slice(-prefix.length);
 }

A sample method call will be padNumber(42,5,'0'); this will not have the flexibility of the previous method, but it will be a lot simpler to use in larger numbers.

The recipe is fairly straightforward, but an important thing to note is the functional approach. If there is one thing to take with you from this recipe, it is that the iterative solution is not always the best. When it comes to JavaScript, there are usually a few other ways to complete the task that you have; they are not always that straightforward and sometimes not even faster, but they can be much cleaner.

If, for some reason, we are padding numbers very often, it might make sense to add the function into the Number object and remove the input parameter number with the this keyword:

Number.prototype.pad=function(size,character){
     //same functionality here
}

As the function is now part of every Number object, we can use it directly from any number; let's take the following example:

  3.4.pad(5,'#');

Additionally, if the '.' character should not be included in the calculation of the padding, we could add an additional check that would reduce the size of the prefix.

The formula for calculating the body mass index (BMI) is as follows:

BMI = (Weight in kilograms / (height in meters x height in meters))

We're going to use BMI = 22 to calculate the "ideal weight".

This plugin will be explained in the next section.

HTML elements have no notion of measurement units. To support unit conversion, we added our own data attributes. These allow us to give a special meaning to certain elements—the specifics of which are then decided by our own code.

Our convention is that an element with a data-measurement attribute will be used to display values and units for the specified measurement. For example, a field with the data-measurement="weight" attribute will be used to display weight.

This element contains two types of subelements. The first type has a data-display-value attribute, and displays the value of the measurement (always a number). The second type has a data-display-unit attribute, and displays the unit of the measurement (for example, "kg"). For measurements expressed in multiple units (for example, height can be expressed in the form of "5 ft 3 inch"), we can use multiple fields of both types.

When we change our unit system, setMeasurementUnits adds additional data attributes to the following elements:

As a result, $.unitval() knows both the values and units displayed on every measurement element on our page. The function reads and converts the measurement to SI before returning it. We do all our calculations using the SI units. Finally, when calling $.unitval(si_value), our value is automatically converted to the appropriate units before display.

This system minimizes the amount of error-prone unit conversion code by recognizing that conversions are only really needed when reading user input and displaying output. Additionally, the data-driven approach allows us to omit conversions entirely from our code and focus on our application logic.

Just like most programming languages, JavaScript uses Unix time. This is actually a system for representing a given instance of time, for how many seconds or, in JavaScript's case, milliseconds have passed since midnight January 1, 1970 in Universal Coordinated Time, commonly known as UTC.

This number is actually not fully compliant with UTC, nor does it account for the various atypical situations such as leap seconds, but this is acceptable in most cases.

In JavaScript, we have the Date object that can be constructed in different ways:

new Date() // uses local time
new Date(someNumber) //create date with milliseconds since epoch
new Date(dateString) // create date from input string representation
new Date(year, month, day [, hour, minute, second, millisecond])

During construction, if you supply some of the arguments and leave out the optional ones, they get defaulted to zero. And one other thing to note is that months in JavaScript are zero based while days are not.

What we can usually do is return the millisecond representation from the server side and have the number formatted in the local time zone. So let's say that our API returned us the milliseconds 1355270400000 that is actually 12.12.2012, which is also known as the end-of-the-world date.

The creation of the date is as follows:

var endOfTheWorld= new Date(1355270400000);

When printing in the local string, there are few available options; one of them is toLocaleDateString:

   endOfTheWorld.toLocaleDateString()

This method uses the underlying operation system to get the formatting convention. For example, in the U.S. the format is month/day/year while in other countries it is day/month/year. For our case, the end of the world is on "Wednesday, December 12, 2012". You could also manually construct the printed date using the appropriate getX methods.

There is also a method of printing out the local time called toLocaleTimeString that can be used on our end-of-the-world date. Because this method also uses the operating system's local time for us, it is 01:00:00, because we are in the UTC+1 time zone. For us, this means that we have one extra hour to live; or maybe not?

In order to get the offset for the local user, there is a method in the Date object called getTimezoneOffset() that returns the time zone offset from the date to UTC in minutes. The problem is that there is no such method for hours and, additionally, it is contraintuitive as we usually want to know the difference from UTC to the given date.

If working with dates is something common that you need for your application, it makes sense to use a library, such as Moment.js (http://momentjs.com/).

Moment.js provides support for internationalization and the more advanced manipulation of dates. For example, removing 10 days from the current date can simply be accomplished with the following code:

moment().subtract('days', 10).calendar();

For getting the time from today's start of day, use the following code:

moment().startOf('day').fromNow();

We are going to use a jQuery plugin called timeago that has especially been designed for this purpose that can be retrieved from http://timeago.yarp.com/.

We will create a simple page where we will display the passed time by performing the following steps:

And that is it; you now have a fully working time example that will calculate the time since a given date and update it, and additionally, the second part selected with page-opened will be autoupdated as the user spends more time on the page.

The first thing you might be wondering is about the abbr and time tags. The first one, in actuality, is a representation of "abbreviation" and optionally provides a full description for it. If the full description is present, the title attribute must contain this full description and nothing else. The full description is usually presented as a tool tip in the browsers, but this is a noting standard. Why have we picked the abbr tag to display time? Well, there is the new HTML5 time element named time that had some controversies surrounding it, as it was pulled from the spec but then gotten back. This element is more semantically correct and, additionally, represents the date in a machine-readable format that can be used by browsers to enable something like the "add to calendar" feature. The rationale for the use of the abbr element is only supported for older browsers, but this becomes more and more irrelevant as time passes. Currently, most modern browsers for desktops and mobiles provide support for the semantically correct time element—even IE 9+ has support for it.

The rest of the HTML consists of standard, well-known tags and a few markers, such as different CSS classes added in order to later select those elements.

Let's take a look at the JavaScript; first we use the standard jQuery document-ready function:

$(document).ready(function() {

Afterwards, we set the setting for allowFuture to true to enable the timeago plugin to work with future dates, as this has not been set by default:

jQuery.timeago.settings.allowFuture = true;

If timeago is applied directly on the selected abbr or time elements, there is no need for us to do anything else as the calculations are done automatically:

 $(".timeago").timeago();
 $("time").timeago();

You can also notice that we can get the text for a given date directly from JavaScript, and work with it in whatever way we see fit:

$(".page-opened").text( $.timeago(now));

There are a few questions that come in mind when working on internationalized and localized applications. One of them is time zone support that timeago handles automatically. The only thing we need to make sure of is that our timestamps follow the ISO 8601 (http://en.wikipedia.org/wiki/ISO_8601) time format and have a full time zone designator (http://en.wikipedia.org/wiki/ISO_8601#Time_zone_designators). The other issue that often comes up is language support, but we are mostly covered in that area as there are localized versions of the plugin for many languages, and you can even create your own version and contribute it to the community. To do this, you can use the code hosted on https://github.com/rmm5t/jquery-timeago/tree/master/locales.

There are a few other implementations that perform a similar job, like for example, pretty date by John Resig available at his blog at http://ejohn.org/blog/javascript-pretty-date/.

Mathematical Markup Language (MathML) is a standardized way for an application to describe a formula, and is intended not only to enable integration for the Web, but also to be used in other applications.

There is a list of software that uses MathML maintained by the W3C; it can be found at http://www.w3.org/Math/Software/. Few revisions of the specification are done from the working group (http://www.w3.org/Math/), with the latest being number 3 (http://www.w3.org/TR/MathML3/).

HTML5 adds the support for embedding MathML documents inside HTML.

What we are going to do in this recipe is describe a formula, as shown in the previous continued fraction of Pi, with MathML where we have an example of a different representation of the number π.

The use of raw MathML without the MathJax library will not work on most browsers, but with the library, the output is automatically rendered either as an SVG or as a standard image. In the MathML example, we use XML nesting to designate where the elements will be contained, and elements such as mrow and mfrac are all defined in the MathML namespace (http://www.w3.org/1998/Math/MathML) with a root element called math. Although the concept is very simple, in practice it is extremely hard to create expressions like this one without the help of external software.

An additional downside to MathML is the fact that it is not fully supported in all browsers.

ASCIIMath, on the other hand, is very simple to use and very intuitive; basically, anything enclosed in "`" or the Grave accent character will get rendered to HTML and CSS or any other rendering method that has been configured.

The ASCIIMath method is very simple and extremely popular with major websites such as Khan Academy (https://www.khanacademy.org/) and Math StackExchange (http://math.stackexchange.com/). If you are interested to get more details on how ASCIIMath can be used, you can get more info on its official web page at http://www1.chapman.edu/~jipsen/mathml/asciimath.html. Using MathJax you can also render other markup format languages such as Tex and Latex.

You must already have a service that provides the content on a page-by-page basis. This example works without such a service by default, but to make it fully functional, an actual HTTP server is needed in order for the Ajax requests for the next page to work.

Let's write the HTML page, CSS style, and JavaScript code.

The visible area of the browser (also called the viewport) has its own dimensions that can be fetched by calling jQuery's $.fn.height() function on the $(window) object. On the other hand, $(document).height() provides us with the height of the entire content of the page. Finally, $(window).scrollTop() gives us the scroll offset.

Using these functions, we can calculate the remaining pixels to be scrolled. Then we recalculate and check this value every time the user scrolls the page. If the value is sufficiently small, we call our loading function. At the same time, we make sure to stop loading new pages until the current loading process is finished. (Otherwise, the user's scrolling actions might load a couple of more pages while they wait for the content to load.)

Here is a possible Ajax implementation of the getPage function. This function sends Ajax requests to a request handler hosted on the same domain at the path /pages/<number> to retrieve the HTML contents of the next page:

function getPage(cb) {
    $.get('/pages/' + page)
        .success(function(html) { cb(null, html); })
        .error(function() { cb("Error"); }
    page += 1;
}

To make this version work, you will need to implement the request handler in your server-side code.

Your server-side code can return an error, such as 404, to indicate that there is no more content available. As a result, jQuery will never call our success callback, and our code will stop loading new pages.

The endless scrolling list recipe provides great user experience, but it has one significant drawback. We must make sure that we don't have any important page content below the contents element. This means that page elements placed at the bottom (usually the footer links and copyright messages) might become unreachable.

We assume that a service provides the data in a JSON object, containing a data property that is an array of arrays:

{data:[["object1col1", "object1col2"], ["object2col1", "object2col2"],  …]}

In our example, we're going to display a list of people near us. Every person in the table will have their own ID number, name, age, distance from us, and transportation method.

We're going to display the distance in km, and would like to be able to sort the list of people by their last names.

As table display problems quickly grow beyond the original simple problem, we're not going to build our own solution. Instead, we're going to use the excellent jQuery DataTables plugin available at http://datatables.net/.

Let's write the HTML page, CSS style, and JavaScript code.

The following image shows the resulting table:

To initialize the table we use the dataTable initialization function. We can pass multiple options to the function. For example, we can specify that we want 10 items per page by setting the value of the iDisplayLength property to 10.

Because we're going to render the Distance column (column 3) slightly differently than just displaying it, we add an item to the aoColumnDefs option for target column 3 that sets a custom rendering function for that column. This is a function that simply appends the km string to our number; but we could also use a more elaborate function (involving custom date formatting, unit conversions, and so on).

Paging works automatically with DataTables—the plugin appends a pager control that provides access to the previous/next page. Sorting also mostly works automatically. However, in our particular example, we need special sorting for the Name column (by last name) even though it's displayed in the format "firstname lastname". To do this, we specify a custom sort type for that column called lastname-sort. We also specify a special sort type for the Distance column called unitnumber.

DataTables allows us to define custom sort types as plugins. Custom sorters have the following properties:

These properties allow us to implement sorting by last name for the Name column, as well as by number for the Distance column.

Here is a simple Ajax replacement of the fetchData function, sending an Ajax request to a request handler hosted on the same domain at the path /people to retrieve the array data:

function fetchData(cb) {
    $.get('/people/').success(cb);
}

Note that this solution doesn't work very well for large datasets. While modern clients have the performance to manipulate a lot of data, bandwidth is also a consideration. A careful consideration of bandwidth requirements and the target clients (desktop or mobile) should be exercised before using this solution.

We're going to assume that we're using the code and data from the previous recipe. We have a list of people with their transportation methods displayed in a sortable, paginated table using the DataTables jQuery plugin. We will copy the files from the previous recipe, and then add to them.

The data that we need to filter is already available in the tableData global variable; we can filter this data and then use the global tableSetData function to display the filtered table.

The filter is going to work on the Transportation field.

Let's modify the previous code to add multiple-choice filters to our table:

The easiest way to implement a user interface for a multiple-choice filter is to use a multiple-choice select element.

We also need to populate the element when the data becomes available. To do this, we trigger our new custom event table:data after fetching the data (either from our server or otherwise). The listener extracts the unique values from the Transportation column of the data and populates the select list with options for the values.

When the selection changes, we extract the selected values (as an array) and create a new filter function using choiceFilter, a higher-order function. The higher-order function returns a new filtering function. This filtering function takes a table row argument and returns true if the value of the fourth column of that row is contained within the specified list.

The filtering function is passed to Array.filter; it applies this function to every row and returns an array containing only the rows for which the filtering function returns true. The filtered data is then displayed instead of the original data.

We're going to assume that we're using the code and data from the Creating a sortable paginated table recipe. We have a list of people with their age displayed in a sortable, paginated table using the DataTables jQuery plugin. We will copy the files from the recipe and then add some extra filtering code.

The data that we need to filter is already available in the tableData global variable; we can filter this data and then use the tableSetData global function to display the filtered table.

The filter is going to work on the Age field.

Let's modify the previous code to add range filters to our table:

The easiest way to filter array data is to use JavaScript's built-in Array.filter function. This is a higher-order function; its first argument is a function that takes a row argument and returns true if the row is to be added to the filtered array or false if the row is to be left out.

To provide such a function, we create our own higher-order function. It takes the start and end ranges and the specified column. The return result is a function that filters every row.

To ignore empty or invalid values from the input, we use the number function. If the input field is empty or contains non-number data, a default value is provided (-Infinity for the start of the range and +Infinity for the end). This also enables us to do one-sided range filtering.

The Array.filter function returns an array of all the elements that pass the filter. We display this array in our table.

We're going to assume that we're using the code from the Creating a sortable paginated table recipe, and we're going to add our filters as described in the previous two recipes. This time we're going to allow for the combination of filters.

Let's modify the previous code to add multiple filters to our table:

Like in the previous recipes, we use the Array.filter function to filter the table. This time we apply multiple filters in succession. We store all of the filter functions in an array.

Whenever there is a change in the inputs, we update the appropriate filter function and rerun filterAndShow() to display the filtered data.

DataTables is a highly flexible table library with many options and a rich API. More information and examples can be found on the official website at http://www.datatables.net/.

The only requirement for this recipe is that the data that will be displayed needs to be properly escaped; this means that <p>awesome </p> needs to be translated into <p>awesome </p>. This can be done either on the server side or escaped before saving.

The prettyprint class automatically selects all the blocks marked with the appropriate CSS class, and autodetects the programming language used, and does the highlighting afterwards.

The lexer should work on most languages; in the common languages there are custom scripts for specific languages, for example, for the lisp-based ones.

Because prettyprint automatically detects the source language, we could additionally specify it ourselves if we want to get better results. For example, if we wanted to display XML, the code would be as follows:

<pre class="prettyprint"><code class="language-xml">...</code></pre>

There are CSS classes for most of the common languages.

prettyprint is one of the older scripts available, and there are few alternatives that can offer many more customization options and better JavaScript APIs.

Some of them, such as SyntaxHighliger (http://alexgorbatchev.com/SyntaxHighlighter/), Rainbow (http://craig.is/making/rainbows), and Highlight.js (http://softwaremaniacs.org/soft/highlight/en/), are commonly found on most of the sites.

Rendering markdown is very simple. A minimal example is as follows:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Render markdown</title>
        <style type="text/css">
            #markdown, #render { width: 48%; min-height:320px; }
            #markdown { float: left; }
            #render { float: right; }
        </style>
    </head>
    <body>
        <textarea id="markdown">
# Markdown example.
This is an example of markdown text. We can link to [Google](http://www.google.com)
or insert Google's logo:
![Google Logo](https://www.google.com/images/srpr/logo3w.png)

## Text formatting
We can use *emphasis* or **strong** text,
> insert a quote
etc.</textarea>
        <div id="render"></div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="https://raw.github.com/spion/markdown-js/master/lib/markdown.js"></script>
        <script type="text/javascript">
            function rendermd(val) { $("#render").html(markdown.toHTML($("#markdown").val())); }
            $("#markdown").on('keyup', rendermd); $(rendermd);
        </script>
    </body>
</html>

When the page is loaded, the markdown text in the textarea element is rendered into the #render element on the right-hand side. Every key press will also cause the script to update the rendered element.

Find out more about the markdown format from its official website at http://daringfireball.net/projects/markdown/.

For this recipe, we only need a basic knowledge of jQuery and a simple formula to convert the temperatures between Celsius and Fahrenheit and vice versa:

Celsius = (Fahrenheit -32) x (5/9)

Or:

Fahrenheit = Celsius  x(9/5) +32

This will connect and automatically calculate the temperature back and forward.

Let's first take a look at the display part where there is nothing specific; here we use a simple input type text and add the appropriate labels for each field. Furthermore, we can use the escaped character ° that will show the degree character.

If we take a look at the jQuery keyup event, we can see that it's executed when a user releases a key on the keyboard on a given element. This event can be attached on any HTML element, but it will only work when the element is in focus; so it mostly makes sense to use it on input elements. As the keyup event has an option to execute a function that will accept the event object, so for our case, it is as follows:

$('#celsius').keyup(function(event) {

In the event object, we can access the element that fired the event and access its value:

event.currentTarget.value

After that, we can do the calculation (celsius *(9/5) + 32) and set the result as a value to the other element that displays it in Fahrenheit:

$('#fahrenheit').val(fahrenheit);

As we wanted the binding to work both ways, we can do the same on the input field for Fahrenheit:

$('#farenheit').keyup(function(event) {

And of course, you need to use the appropriate formula (fahrenheit-32)*(5/9)) for returning back to Celsius.

While this recipe shows a simple use of jQuery event to make an instant update on input text, it can also be applied for creating autocomplete boxes or features, such as Google's instant search. The idea here is that we can and should use one- or two-way binding for various HTML elements, especially when we are talking about derived data or data that is a representation of the same source.