Lesson Weekend

Instead of listing only the first name in our list of contacts, let's create a fullName method on the Contact prototype so we can easily see the full name of each person in our address book. We don't need to add a new fullName property, because each contact already includes a firstName and lastName property. We just need to add a prototype method that returns the full name based on those two properties.

Business Logic - Prototype Method

We'll add the following prototype method to the business logic section of our scripts:

js/scripts.js
//business logic
function Contact(first, last) {
  this.firstName = first;
  this.lastName = last;
}

Contact.prototype.fullName = function() {
  return this.firstName + " " + this.lastName;
}

As you can see, this method is meant to be called upon a Contact object, and simply returns the Contact's firstName and lastName properties concatenated together.

Remember, a prototype method is a method meant to be called on a specific type of object. For instance, the Contact objects in our address book. fullName() is a prototype method because it's specifically meant to return the full name of a Contact object. Therefore, we define it in a special way that denotes the type of object this method is meant for when we state Contact.prototype.fullName = function().

User Interface Logic to Use Prototype Method

Let's also update our user interface logic to use our new fullName() method.

This line of code:

js/scripts.js
...
  $("ul#contacts").append("<li><span class='contact'>" + newContact.firstName + "</span></li>");
...

Should be changed to reflect the following:

js/scripts.js
...
  $("ul#contacts").append("<li><span class='contact'>" + newContact.fullName() + "</span></li>");
...

This will append the contact's full name, as returned from our new fullName() prototype to our list of contacts, instead of just their first name. Perfect! In upcoming lessons we'll continue to build our address book application by adding address properties to Contact objects.


Example GitHub addressBook Repo at this point

Examples


js/scripts.js
//business logic
function Contact(first, last) {
  this.firstName = first;
  this.lastName = last;
}

Contact.prototype.fullName = function() {
  return this.firstName + " " + this.lastName;
}

// user interface logic
$(document).ready(function() {
  $("form#new-contact").submit(function(event) {
    event.preventDefault();

    var inputtedFirstName = $("input#new-first-name").val();
    var inputtedLastName = $("input#new-last-name").val();

    var newContact = new Contact(inputtedFirstName, inputtedLastName);

    $("ul#contacts").append("<li><span class='contact'>" + newContact.fullName() + "</span></li>");

    $(".contact").last().click(function() {
      $("#show-contact").show();
      $("#show-contact h2").text(newContact.firstName);
      $(".first-name").text(newContact.firstName);
      $(".last-name").text(newContact.lastName);
    });

    $("input#new-first-name").val("");
    $("input#new-last-name").val("");
  });
});