U4LA2.1: Introduction to Classes and Objects

How can I use a class to construct multiples of an object?

Teacher Notes && Overview

In this lesson, students will build on their prior knowledge - including use of object literals - to work towards object oriented programming (OOP). They will begin by considering what classes and objects are and will work into creating their own classes and objects from those classes.

Object oriented programming can be a little confusing at first, so this lesson sequence is a slow build that begins off-canvas and works up to creating things on canvas.

Objectives

Students will be able to:

• Define objects and classes

• Give examples of real life classes and objects

• Create a class with a constructor function and generate new object instances

Suggested Duration

~1-2 Periods (~45 - 90 minutes)

NYS Standards

9-12.CT.4 Implement a program using a combination of student-defined and third-party functions to organize the computation.

9-12.DL.1 Type proficiently on a keyboard.

Vocabulary

• class - a template of something to be created with specific attributes and actions

• object - an instance of a class made from the original template

• constructor() - a function that is part of a class and runs automatically when we create a new object to initialize object attributes

Planning Notes && Materials

Planning Notes	Materials
Classes and objects can be tricky - be sure to preview so you have many real world examples ready to help this go smoothly for your students.	No specific materials needed for this lesson

Resources

• Starter Code (p5 editor | repl.it)

• Intro to Classes and OOP (Youtube Video)

• Classes and Constructors (Youtube Video)

• Happy Coding: Creating Classes (Extra Learning Resource)

Assessments

Formative:

• Student Practice Activity

Summative:

• Upcoming Mini Project

• Upcoming End of Unit Project

Do Now/Warm Up (~3-5 min)

Think back to the last lesson where we made things bounce - what if you wanted to make many things fly around the screen and bounce? What if you wanted to make at least a hundred?

What could you try to make this happen? What would be difficult or frustrating about this process?

Image of woman sitting amidst many bouncey balls

Introducing: Classes and Objects (10 - 15 min)

Students should rightfully feel like it would be annoying to manually create that many object literals and program them all to bounce. Some students may realize they could use for loops - both to generate the object literals and to animate them - but that is a stretch at this point in their learning.

What they should start wanting is to create something that will make many versions from the same template. In the example, this would be many bouncing balls - they each have the same shape and behavior, but they may exist at different places on the canvas/have different speeds/colors/etc. Luckily, JavaScript has something that will make this easy: the class constructor.

Classes allow us to generate objects which are based off of the blueprint of the class. We can think of a class as the template of something that should be created. That something is an object which has specific attributes and actions they can do. The object is the instance of a class.

An easy example is a waffle maker and a waffle. The Waffle Maker here represents the class - as long as you give it batter, it will create a perfect waffle in that size and shape. The waffle itself is the object and while it's always a waffle, it can vary by the type of batter you put in, the cook time, the color, etc.

Gif of waffle maker getting batter and creating a Ninja Turtles waffle

Another easy example are cars. There is a car class which is a general type of car that we understand to have an engine, four wheels, windows, breaks, a steering wheel, etc. But specific instances from that class are unique - those are our car objects, like pointing to a specific car or model (think VW Beetle, Toyota Camry, etc). Cars are more complex than the waffle example, but they still have things in common that come from the class and things that vary in each instance.

Pause here and ask students: what are things in your life that may be an object made from a class, like the examples we just gave? This is super common in programming, so it could be things that are tech related - Tiktoks are an example of an object where the video varies, but they still have a like count, comments tied to the videos, a creator name, a caption, etc.

Give students think and potential discussion time and then ask them to share out. These are great responses to capture on chart paper or in slides so that you can refer back to them later if students feel like they need more clarity.

Creating A Class (10 - 15 min)

For this example, we are going to be considering minions. What characteristics make minions different? Display a few pictures, then come up with a list.

NB: Minions are fun, visual, and relatively topical; if you need more images, just google search 'minions despicable me' but you could substitute this with any other accessible reference you'd like. Zoombinis, anyone?

Image of three minions with different featuers

You may have a list of features that looks somthing like this:

• Name

• Number of eyes

• Color

• Evil/Good

• Job

• Hair

• Outfit

Or similar, depending on what your students think up! Then, let's dive into creating a Minion class for this example. Open up the starter code (p5 editor | repl.it) which has space at the top for the code along task.

We will begin by declaring that we are making a class in our code and giving it a name:

class Minion{

}

As a general rule, class names usually start with an Uppercase letter to help distinguish them from variables and function names. This isn't a hard and fast rule, and they will certainly run regardless of case, but it is considered a best practice in coding.

Once we've established our class, we need to make the template it will use to create each minion. This is our constructor() function - it's a function that each class MUST have to create new objects, and it runs automatically when the object is created.

class Minion{
    constructor(){
    
    }
}

Now, let's start out by adding an attribute that must be true of all minions - let's say that their color is always going to be yellow. To name the attribute in the class, it would look like:

class Minion{
    constructor(){
        this.color = "yellow"
    }
}

See the this.? That is new and unique to creating attributes in classes/for objects! Essentially, it says that this isn't just any variable, it's the variable for this class and this instance as an object. We have to use the this. in order to make things work correctly.

So far, so good, and as minions are very yellow, this works great. But what about minion attributes that are different, like perhaps their name, or height? For that, we need to add parameters to our constructor. Just like in our other functions, these are values that we input when we call the constructor - in this case when we make a new object - that will then become a part of that object. For us, it would look like this:

class Minion{
    constructor(name, height){
        this.color = "yellow"
        this.name = name
        this.height = height
    }
}

Here, we are saying that we will feed the name in when we make the object, but that value will serve as this.name for this specific instance of the class. Ditto with height! This can all be a little confusing, but as with many things, it will make more sense with practice.

Before we add more attributes, let's try to create a minion and make sure that this worked:

class Minion{
    constructor(name, height){
        this.color = "yellow"
        this.name = name
        this.height = height
    }
}

//Save a minion object to a variable
let minion1 = new Minion("Steve", 2.5)

//We can test if it worked by printing our variable value to the console:
console.log(minion1)

When we print this, we should see an object with each value saved. If we don't see this immediately, we can use the arrows in our console to navigate to the appropriate information. If we wanted to access just some of an object's information instead of all of it at once, we would use a similar notation to accessing information from an object literal:

class Minion{
    constructor(name, height){
        this.color = "yellow"
        this.name = name
        this.height = height
    }
}

//Save a minion object to a variable
let minion1 = new Minion("Steve", 2.5)

//We can test if it worked by printing our variable value to the console:
console.log(minion1)

//Get only the minion's name
console.log(minion1.name)

And just like that, you've created your first class and objects from that class! Before beginning the tasks, ask students to add two more attributes - one with a fixed value and one with a value given when the objects are created - and to create a new object and save it in the minion2 variable. Review as a class before students move into work time!

Class and Object Student Practice (15 - 30 min)

Once students have practiced with the minions, they can continue into the starter code to complete the challenges of making other new classes and object instances from each class. The practice is leveled - students should start with mild and only advance once they've completed a working version. You can ask students to collaborate or work independently to complete the assignment.

Wrap Up (5 - 10 minutes)

Spend some time reviewing answers to the student practice - you may want to share solutions or have students share what they came up with as well as any struggles they experienced or common questions that came up during the activity.

Extensions

Classes and objects can be tricky, and we have only started looking at a very small amount of what they can do. Consider having students think on places in prior projects they could implement this rather than racing ahead to try a new and more difficult piece of programming.