Your First JavaScript App – III

As discussed earlier, this series is not about how the application looks, but it is more about how the application works and how to create it. We will be creating the entire view for the application in JavaScript and we will mount it on the root node of the HTML.

The view of the application will contain three main parts,

  1. A form to enter the following information,
    1. First name,
    2. Last name,
    3. Phone number,
    4. E-mail,
    5. A button to save the detail,
    6. A button to clear the form.
  2. A container that will contain the list of contacts.
  3. A component to display contact information,
    1. Full Name,
    2. Phone number,
    3. E-mail ID,
    4. A button to edit the contact,
    5. A button to delete the contact.

To start with, let us first create the HTML with a title and a heading, and, an empty node, and a footer. However you can add as many information as you like, but the empty node is the most important one, where we are going to mount our application.

Your index.html should look like this. There is not much in it, so you can go ahead and copy paste it in your index.html file.

The sequence of files included before the end of the body tag is important. In a real project or application, you will not have to load the JavaScript files individually. You will be using building tools like webpack, or task runners like grunt or gulp to combine and minify your all JavaScript files into one or more files. If you have not heard the terms like webpack, gulp, or grunt, ignore it.

Why is the sequence important?

The most important part of the index.html is the sequence of the JavaScript files. JavaScript is an interpreted language, and as you might have read earlier in this post, JavaScript is executed line-by-line. When we include a JavaScript file in a particular sequence, they appear to the JavaScript engine in the same sequence. So if the file included at the top requires access to something which is defined later in another file which is being loaded at the bottom, it will be able to access it.


There are 5 main JavaScript files which we need to create, and here is what we will be writing in them,

  • script/main.js– will work as the entry point for the entire application.
  • scripts/modules/contacts/contacts.js – will work as the entry point for the contacts module.
  • scripts/modules/contacts/contactItem.js- will contain each contact’s detail.
  • scripts/modules/contacts/contactsViewTemplates.js- will contain all the HTML templates.
  • scripts/modules/contacts/contactsController.js- controller
  • scripts/modules/contacts/contactsModel.js- model
  • scripts/modules/contacts/contactsView.js- view

Application Entry

Your main.js should look like this. Please note, at this point, it will not run and give an error in the console if you try to run the application.

// initialise contacts manager module
// main.js
var phonebook = window.contactsManager;
phonebook.init ();

// main.js
window.contactsManager.init ();

// main.js
contactsManager.init ();

We can write any of the three code mentioned above. All we are trying here is to execute the init function which is available in the contactsManager, and contactsManager is available in the window object.

In the next post, we will start with the contacts manager module’s code.