HTML5 Data and Services Cookbook

HTML5 Data and Services Cookbook

Overview of this book

HTML5 is everywhere. From PCs to tablets to smartphones and even TVs, the web is the most ubiquitous application platform and information medium bar. Its becoming a first class citizen in established operating systems such as Microsoft Windows 8 as well as the primary platform of new operating systems such as Google Chrome OS. "HTML5 Data and Services Cookbook" contains over 100 recipes explaining how to utilize modern features and techniques when building websites or web applications. This book will help you to explore the full power of HTML5 - from number rounding to advanced graphics to real-time data binding. "HTML5 Data and Services Cookbook" starts with the display of text and related data. Then you will be guided through graphs and animated visualizations followed by input and input controls. Data serialization, validation and communication with the server as well as modern frameworks with advanced features like automatic data binding and server communication will also be covered in detail.This book covers a fast track into new libraries and features that are part of HTML5!

HTML5 Data and Services Cookbook

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Display of Textual Data

Introduction

Rounding numbers for display

Padding numbers

Displaying metric and imperial measurements

Displaying formatted dates in the user's time zone

Displaying the dynamic time that has elapsed

Displaying Math

Creating an endless scrolling list

Creating a sortable paginated table

Creating multiple-choice filters

Creating range filters

Creating combined complex filters

Displaying code in HTML

Rendering Markdown

Autoupdating fields

Display of Graphical Data

Introduction

Creating a line chart

Creating a bar chart

Creating a pie chart

Creating an area chart

Displaying combined charts

Creating a bubble chart

Showing a map with a marked location

Showing a map with a path

Displaying gauges

Displaying a tree

LED scoreboard using web fonts

Animated Data Display

Introduction

Making a motion chart

Displaying a force directed graph

Making a live range chart filter

Making an image carousel

Zooming and panning a chart

Using the web notifications API

Creating interactive Geo charts from a dataset

Using HTML5 Input Components

Introduction

Using the text input field

Using single-choice dropdowns

Using multiple-choice select lists

Getting geographical location input

Using file inputs at the client side

Using a drag-and-drop file area

Custom Input Components

Introduction

Using contentEditable for basic rich text input

Advanced rich text input

Creating a drop-down menu

Creating custom dialogs

Creating autocomplete for input

Creating a custom single-selection list

Creating a multiple-selection list

Geographic location input using maps

Data Validation

Introduction

Validating text by length

Validating numbers by range

Using the built-in pattern validation

Advanced use of built-in constraints and custom validations

Calculating password strength

Validating US zip codes

Using asynchronous server-side validation

Combining client-side and server-side validation

Data Serialization

Introduction

Deserializing JSON to JavaScript objects

Serializing objects to a JSON string

Decoding base64 encoded binary data

Encoding binary data or text into base64

Serializing binary data into JSON

Serializing and deserializing cookies

Serializing a form into request strings

Reading XML documents with DOMParser

Serialization of XML document at the client side

Communicating with Servers

Creating an HTTP GET request to fetch JSON

Creating a request with custom headers

Versioning your API

Fetching JSON data with JSONP

Reading XML data from server

Using the FormData interface

Posting a binary file to the server

Creating an SSL connection with Node.js

Making real-time updates with Ajax Push

Exchanging real-time messages using WebSockets

Client-side Templates

Introduction

Rendering objects using Handlebars

Rendering objects using EJS

Rendering objects using Jade

Rendering arrays using Handlebars

Rendering arrays using EJS

Rendering arrays using Jade

Simplifying templates with helpers in Handlebars

Reusing templates with partials in Handlebars

Reusing templates with partials in EJS

Using filters in Jade

Using mixins in Jade

Using layouts and blocks in Jade

Data Binding Frameworks

Introduction

Creating a basic Angular view with data binding

Rendering lists and using Angular controllers

Routing, filters, and backend services in Angular

Using Angular's client-side validation

Making a chart component with Angular directives

Structuring applications for Meteor.js

Reactive programming and data in Meteor.js

Live HTML and user-specific data in Meteor.js

Security mechanisms in Meteor.js

Data Storage

Introduction

Data URI

Session and local storage

Reading data from files

Using IndexedDB

Limits of the storage and how to ask for more

Manipulating the browser history

Multimedia

Introduction

Playing audio files

Playing video files

Customizing controls for media elements

Adding text to your video

Embedding multimedia

Converting text to speech using HTML5 audio

Installing Node.js and Using npm

Introduction

Installing Node.js

Using npm

Community and Resources

WHATWG

World Wide Web Consortium

Other resources

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Creating range filters

Tables can also be filtered by their numerical columns. For example, given a table where each row is a person and one of the columns contain data about the person's age, we might need to filter this table by specifying the age range. To do this, we use range filters.

Getting ready

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.

How to do it...

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

In the index.html file from the previous recipe, add two input elements after the opening <body> tag:
```
 Age: <input id="range1" type="text">
 to <input id="range2" type="text"> <br>       
```
Add a script element for filter.js before the closing </body> tag:
```
<script type="text/javascript" src="filter.js"></script>
```

Finally, we create our filter.js script:

(function() {
    function number(n, def) {
        if (n == '') return def;
        n = new Number(n);
        if (isNaN(n)) return def;
        return n;
    }
    function rangeFilter(start, end, col) {
        var start = number(start, -Infinity),
            end = number(end, Infinity);
        return function filter(el) {
            return start < el[col] && el[col] < end;
        }
    }
    $("#range1,#range2").on('change keyup', function() {
        var filtered = window.myTable.data.filter(
            rangeFilter($("#range1").val(), $("#range2").val(), 2));
        window.myTable.setData(filtered);
    });
}());

How it works...

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.

HTML5 Data and Services Cookbook

HTML5 Data and Services Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

HTML5 Data and Services Cookbook

Creating range filters

Getting ready

How to do it...

How it works...