HTML and CSS Reference
In-Depth Information
Building the Web Application
You have now learned the basic technology required to create the sample web application.
Although we have some working code on the existing web page, it is not structured in a
manner that would allow it to scale to become a large web application.
In the first section of this chapter are going to refactor the code that we have created into a
structure that follows a more rigorous design. This will then allow us to add additional func-
tionality to the web application.
As a first step, we will extract the jQuery plugin that we wrote to serialize and de-serialize
objects into forms, and place this in a file called jquery-serialization.js in the scripts folder.
We will also want to move most of the JavaScript code from tasks.html into a JavaScript file
called tasks-controller.js. To start with, we will just create an empty file called tasks-control-
ler.js in the scripts folder.
We will then import these 2 script files in the head section of the HTML page. (Ensure that
these are added after the jQuery import).
<script src="scripts/jquery-serialization.js"></script>
<script src="scripts/tasks-controller.js"></script>
In addition to this change, we are going to add id attributes to a few other elements. These
will be highlighted in bold below.
One of the elements that will be given an
id
is a
main
element that will be giving this the id
taskPage
. The reason we have added this is to encapsulate all the task related functionality.
This ensures this could co-exist in the same Document Object Model as other functionality,
and have these functional areas remain separate.
For instance, we may have a second page for managing a calendar, but it could exist in the
same HTML page if required. We would then simply replace the header, footer and main
elements with the appropriate elements for the new page.
This approach allows us to change page without a browser refresh, and allows for a single-
page web application (SPA). With a single-page application, all content needed by the entire
web-application is loaded on the initial request (or with subsequent AJAX calls), and from
that point forward content is swapped in and out of the DOM to simulate page changes.
The entire HTML page should now look like this:
<!DOCTYPE html>
<html lang="en">
