Let's move on to the JavaScript file, app.js. Here we'll stub out a basic outline for our application template. If you don't know what the dollar signs are for, they are aliases for the jQuery library. We'll go over some jQuery basics in a moment.

"use strict";

function MyApp()
{
    var version = "v1.0";

    function setStatus(message)
    {
        $("#app>footer").text(message);
    }
    
    this.start = function()
    {
        $("#app>header").append(version);
        setStatus("ready");
    };
}

Starting at the top we will include "use strict" in our JavaScript files. This informs the JavaScript runtime to use newer and stricter standards when running our code. For example, in older versions of JavaScript it was completely legal to use a variable name without declaring it first using the var keyword. This had the side effect of making it a global variable attached to the window object. When "use strict" is defined, you will get an error if you try to do that. It helps you find bad coding mistakes that could lead to bugs in your program.

function strict()
{
    "use strict";
    // Everything inside here will use strict
// mode
}

Next we define the main application object, myApp. There are many ways to define an object in JavaScript, including using object literals and constructor functions. Object literals are the simplest way to define an object, but those objects are created as soon as the JavaScript is loaded, usually before the DOM is ready. Here's what our object would look like as an object literal:

var myApp = {
    version: "v1.0",
    setStatus: function(message)
    {
        $("#app>footer").text(message);
    },
    start: function()
    {
        $("#app>header").append(this.version);
        this.setStatus("ready");
    };
};

Since our applications are manipulating the Document Object Model (DOM), we don't want to create the object until the DOM is ready. That's why we will be using the function constructor form for creating an object.

The DOM, or Document Object Model, is the internal representation of the HTML markup. It's a hierarchical tree of objects that represents the HTML elements.

Another problem with using object literals is that everything defined in it is a member of the object, and therefore must be accessed using the this keyword. Notice in the preceding object literal form how we must use this to access version and setStatus(). However, when creating an object using a constructor, we can define functions and variables inside of the constructor without making them members of the object. Since they aren't members, you don't have to use the this keyword to access them.

So what's wrong with using this? After you've programmed in JavaScript for a while, you become aware that the this keyword can cause a lot of confusion because it can mean different things at different times. In other languages, such as C# and Java, this always points to the object that you are inside of. In JavaScript, this is a pointer to the object that called the function, which for event handlers is usually the window object. So the more we avoid using it, the better.

Another advantage of using a constructor is being able to define private and public methods. Notice that the setStatus() method is defined using a normal function declaration. This will make it a private method that can only be accessed from within the object that encloses it, and doesn't require using this to call it. The start() method, on the other hand, is assigned to the object using this. That will make start() a public method that can only be accessed from an instance of the object. We will use this paradigm throughout our JavaScript to implement the private and public members of our objects.

The last thing we need is a document-ready event handler. The document-ready event gets fired once the page has loaded and the DOM hierarchy has been fully constructed. There are two ways to add this event handler using jQuery. The first and more verbose way is what you would expect:

$(document).ready(handler);

However, since it is probably the most basic and important event you will need to implement, jQuery provides a shorthand form that is as simple as it gets:

$(handler);

Here is our document-ready event handler:

$(function() {
    window.app = new MyApp();
    window.app.start();
});

This is an important piece of code. It defines the starting point for our application. It is equivalent to the main() function in other languages, such as C, C++, C#, and Java.

Here we create an instance of our main application object, and then assign it to a global variable named app by attaching it to the window object. We make it global so it can be accessed throughout our application. Last but not least we call the start() method of our application object to get the application going.

$("div")

$("#main")

$(#main .selected")

$(#main .selected").hide()