Book Image

HTML5 Web Application Development By Example : Beginner's guide

By : Jody Gustafson
Book Image

HTML5 Web Application Development By Example : Beginner's guide

By: Jody Gustafson

Overview of this book

HTML5's new features have made it a real application development platform with widespread adoption throughout the industry for this purpose. Being able to create one application that can run on virtually any device from phone to desktop has made it the first choice among developers. Although JavaScript has been around for a while now, it wasn't until the introduction of HTML5 that we have been able to create dynamic, feature-rich applications rivaling those written for the desktop. HTML5 Web Application Development By Example will give you the knowledge you need to build rich, interactive web applications from the ground up, incorporating the most popular HTML5 and CSS3 features available right now. This book is full of tips, tools, and example applications that will get you started writing your own applications today. HTML5 Web Application Development By Example shows you how to write web applications using the most popular HTML5 and CSS3 features. This book is a practical, hands-on guide with numerous real-world and relevant examples. You will learn how to use local storage to save an application's state and incorporate CSS3 to make it look great. You will also learn how to use custom data attributes to implement data binding. We'll use the new Canvas API to create a drawing application, then use the Audio API to create a virtual piano, before turning it all into a game. The time to start using HTML5 is now. And HTML5 Web Application Development by Example will give you the tips and know-how to get started.
Table of Contents (18 chapters)
HTML5 Web Application Development By Example Beginner's guide
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Time for action – building a data model


Before we can begin implementing data binding, we need a data model to bind to. If you recall, we are only saving the task names to localStorage. Our data model is simply an array of strings. Now that each task has multiple details fields we will need something a little more substantial to hold all of that data. You can find the source code for this section in Chapter 3\example3.2.

Let's start by defining a task object for our data model. We will create a new file, taskList.js to put it in:

function Task(name)
{
    this.name = name;
    this.id = Task.nextTaskId++;
    this.created = new Date();
    this.priority = Task.priorities.normal;
    this.status = Task.statuses.notStarted;
    this.pctComplete = 0;
    this.startDate = null;
    this.dueDate = null;
}
// Define some "static variables" on the Task object
Task.nextTaskId = 1;
Task.priorities = {
    none: 0,
    low: 1,
    normal: 2,
    high: 3
};
Task.statuses = {
    none: 0,
    notStarted...