problem

With our current tool set, the code we write is hard to keep organized. The ideas can get lost and hard to maintain going forward

solution

Use code paradigm to help give us guidelines to organize our code

object oriented programming

new words

Class - a blueprint for representing an idea or thing in our code
Object - an instance of a class;
Encapsulation - "hiding" how something is done from other pieces of code
Abstraction - putting all logic that pertains to a feature in one place

parts of a class

Constructor - what is called when an instance is created
this - a reference to the current instance of the class
method - a function that is defined on that the class and can only be called on a instance
properties - data associated with that class

When to use a class?

When we have an entity (a thing) inside our system (our webpage) that has both functionality and properties

our first class

class Cat {
  constructor (name) {
    this.name = name
  }

  meow () {
    return this.name + ' goes meow'
  }
}

const main = () => {
  const _mine = new Cat('Iroh')
  console.log(_mine.meow())
}

a more in depth class

class Cat {
  constructor (name) {
    this.name = name
    this.happiness = 0
  }

  speak () {
    if (this.happiness > 5) {
      return 'purrrrr'
    } else if (this.happiness >= 0) {
      return this.name + ' goes meoow'
    } else {
      return 'hiss'
    }
  }

  chase () {
    this.happiness -= 3
  }

  eat () {
    this.happiness++
  }

  pet (location) {
    if (location === 'behind ears') {
      this.happiness += 2
    } else if (location === 'mouth') {
      this.happiness -= 1
    } else if (location === 'butt') {
      this.happiness += 3
    }
  }
}

const myCat = new Cat('Ozai')

// add 2 to happiness
myCat.pet('behind ears')

// add 3 to happiness
myCat.pet('butt')

// add 1 to happiness
myCat.eat()

// will print out "purrrr"
console.log(myCat.speak())

more abstract class

Displaying Error Messages

class ErrorMessageList {
  constructor (parentSelector) {
    this.parent = document.querySelector(parentSelector)
  }

  addMessage (message) {
    const msg = document.createElement('p')
    msg.textContent = message
    this.parent.appendChild(msg)
  }
}

// somewhere else

const list = new ErrorMessageList('.errors')
list.addMessage(message)

problem

solution

object oriented programming

new words

parts of a class

When to use a class?

our first class

a more in depth class

more abstract class

Displaying Error Messages

refactor time

object oriented programming

object oriented programming

Mark Dewey

problem

solution

object oriented programming

new words

parts of a class

When to use a class?

our first class

a more in depth class

more abstract class

Displaying Error Messages

refactor time

object oriented programming

More from Mark Dewey