Construction

[jugglinmike]

Lets define a JavaScript "class" to describe a Mole. This will hold all the
information (and code) required for a Mole to be a Mole. It won't do much at
first, but we'll add to it as we go.

• mole.js (new file)
  • Create a JavaScript constructor named Mole that defines an el
    property as a DOM element
• main.js (new file)
  • Create an instance of this class and append its element to the DOM
• Stylesheet(s)
  • Define some styling for the element so that you can actually see it.
    This can be minimal (just a width, height, and background-color) or
    you can apply your designer powers and provide a sketch.

A class lets us define a kind of "template" or "mold" for creating custom
objects. We make a class by defining a "constructor" and (optionally) attaching
functions to its "prototype" (we'll work with the prototype later).

In JavaScript, a constructor is just a function that you invoke with new.
Inside the constructor, this refers to the "instance", or the the thing being
created.

// This is a "Car constructor".
function Car() {
  // We call `wheels` an "instance property"
  this.wheels = 4;
}

// later, we can use the constructor to make as many cars as we want. Here,
// we'll create two Car "instances":
var firstCar = new Car();
var secondCar = new Car();

// each "instance" has its own `wheels` property, since we defined it in the
// constructor
console.log(firstCar.wheels);
console.log(secondCar.wheels);