Object Oriented Programming and OOP with JavaScript
Clone or download

readme.md

Object-Oriented Programming in Javascript

Learning Objectives

  • Answer the question, what is Object-Oriented Programming (OOP)?
  • Identify and define: a class, an instance, a constructor and inheritance
  • Use the new keyword to create instances of a class
  • Create a class that inherits from another using the extends and super keywords

Overview

This day-long workshop on Object Oriented Programming and Object Oriented JavaScript is broken up in to 3 sections followed by a mini-lab.

The first section covers Object Oriented Programming generally and at a high level. This will be one of the few times during WDI where we "lecture". For the first hour and a half of today's lesson, we'll present the basics of object oriented programming as they apply across object-oriented programming languages. We'll then dive into the JavaScript syntax of OOP in the second section - how we define a class, how we create attributes, how we extend classes - all things that will make sense after the first section of the class.

After we break for lunch, we'll continue discussing OOP in JavaScript but it'll be more practical: we'll define and work with classes together and you'll complete a couple of short exercises, all as part of section three of this workshop. We'll finish off the workshop with a mini-lab where you will take what you've learned about OOP and go build something.

Why is this workshop structured this way? The principles of OOP that we're going to discuss apply generally across languages, not just JavaScript. So it'll be important to understand them when we go to learn our second object oriented programming language: Ruby. It's also important to understand OOP at a high level and separate from a particular language. At the end of the day, OOP is a paradigm: it's a way of thinking about software development.

Part 1:

Title Description
Object Oriented Programming Define and discuss the key concepts of OOP as a paradigm of software development.
Object Oriented JavaScript Learn how to organize your code in an OOP style in JavaScript.

Part 2:

Title Description
OOJS Practice Practice designing and implementing OOP solutions in JavaScript.
Gladiator Mini-lab on using OOJS to implement a simple Gladiator game.

Quiz Questions (10 minutes / 2:00)

  • What are the benefits to using an OOP approach to programming?
  • What is a class? What is new? How are they related?
  • What does it mean to use "inheritance" when working with classes?
  • How do we indicate that one class inherits from another?
  • What does super do?

Homework: Geometry

Additional Reading

Prototypal Inheritance