Exercise Monday

Goal: The goal for this class session is to practice creating objects using constructors and prototypes. Practice adding properties and methods to objects and calling out those properties and methods in your webpage.

Warm Up

  • What is the difference between a Constructor and Prototype?
  • When would you use a Constructor, and when would you use a Prototype?
  • What functionality do they offer?


Address Book

Follow along with the Address Book lessons to add the new concepts discussed in the homework. Complete these items for it too:

  • Add functionality to record and display a contact's email address.
  • Add functionality to record and display a contact's physical address.
  • Then, add functionality that allows a user to record multiple addresses (email or physical) for a single Contact, and what type each address is (ie: "work", "personal", etc.) (Hint: Address will need to be an object with multiple properties saved within the Contact object.)
  • Remove any additional address fields when the form is submitted. (One way to do this would be to use the not() and remove() functions.)

If you wish, work on these too:

  • Refactor some of the other sections of the jQuery into more modular functions
  • Try a jQuery method from either the CSS or Effects options in the documentation (e.g. fadeIn() or css())
  • Try a jQuery method from the Events options (e.g. hover() or keypress())
  • Add support for multiple AddressBooks, each with their own unique set of Contacts. (For instance, you could have School, Personal, and Work address books to organize different types of friends, co-workers, and acquaintances.)

Movie Tickets

Create a webpage where a user can select the name of a movie, the time of day that they would like to see the movie and their age. The webpage should let them know how much their movie ticket will cost, based on those three factors. Consider that non-"first-release" movies, matinee and senior tickets tend to be cheaper than the regular priced ticket.

Your constructor and prototype could be called Ticket and you can come up with the formula for determining how the price is calculated depending on the input from the user.

Bank Account

Use constructor functions and prototypes to create a webpage where a user can create a single bank account with an initial deposit amount. Then allow the user to make withdrawals, deposits and see the balance of the account.

Remember to create a BankAccount constructor and a prototype that includes methods for deposit and withdrawal and any other properties needed. Here is an example wireframe to help you visualize the app:

A mock up of the bank account webpage

Your project is not required to look like this; this is only an example.

Peer Code Review

  • Does the web app work as expected?
  • Is business logic and user interface logic kept separate?
  • Were constructors and prototypes used to create new objects?

Lesson 20 of 23
Last updated October 21, 2021