🎨
[JS] Intro to Computational Media 2.0
CS4All Resources
  • Curriculum Overview
  • How to Use this Curriculum
  • 📬Leave Us Feedback
  • Curriculum Extras
    • 🔮Curriculum Extras Overview
    • Imposter Syndrome (pt. 1)
      • Imposter Syndrome (pt. 2)
    • Timers in p5.js
    • Time Functions: Crazy Clock Mini Project
    • Using Sliders
    • Pathfinding Algorithms && Facial Scanning
    • Playing with Pixels
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Draw & Draw With Functions
    • 🔮Unit 1 Overview
    • U1LA1.1: p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4: Other Shapes && Styling
    • 🗃️U1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1: Intro to Color with RGB && HSB
    • 🤓EXTRA: Color & Data Storage
    • 🤓EXTRA: Color Palette Practice
    • ✨U1LA3.1: Introducing Variables
    • ✨U1LA3.2: Creating Custom Variables
    • ✨U1LA4.1: What is Abstraction?
    • ✨U1LA4.2: Intro to Functions && Function Calls
    • U1LA4.3: Draw with Functions
    • U1LA4.4: Using the Random Function
    • 🗃️U1LA4 Mini Project: Custom Emoji
    • U1LA5.1: Your Custom Function Library
    • 🎨Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond and Draw on Canvas
    • 🔮Unit 2 Overview
    • ✨U2LA1.1: Conditionals and If Statements
    • ✨U2LA1.2: Conditionals and if, else if, and else statements
    • ✨U2LA1.3: Logical Operators And/Or
    • 🗃️U2LA1 Mini Project: Make a Traffic Light
    • U2LA2.1: Draw with Mouse
    • U2LA2.2: The Map Function
    • ✨U2LA3.1: Data Type Scavenger Hunt
    • ✨U2LA3.2: Functions that Return Values
    • 🤓U2LA3.3: Functions with Purpose
    • U2LA4.1: Collision Functions && Collide2D
    • U2LA4.2: Mouse Clicks && Shapes as Buttons
    • 🗃️U2LA2 Mini Project: Light Switch Game
    • U2LA5.1: Key Presses && Nested Conditionals
    • 🎨Unit 2 Final Project: Interactive Drawing App
  • Unit 3: Arrays, Loops, Media
    • 🔮Unit 3 Overview
    • U3LA1.1: While Loops
    • U3LA1.2: For Loops Pt 1
    • U3LA1.3: Nested For Loops (For Loops pt 2)
    • 🗃️U3LA1 Mini Project: Wallpaper Design
    • U3LA2.1: Introduction to Arrays
    • U3LA.2.2: Arrays with floor() and random()
    • 🗃️U3LA2 Mini Project 1: Fortune Teller
    • U3LA2.3: Loops and Arrays
    • U3LA2.4: Updating and Deleting from Arrays
    • 🗃️🤓 U3LA2 Mini Project 2: CodeWars Array Challenges
    • U3LA3.1: Preload, Images, Tint
    • 🤓U3LA3.2: Images and Arrays with ml5
    • U3LA3.3: Fonts && Text Styling
    • 🗃️U3LA4 Mini Project 4: Typography
    • U3LA4.1: Loading & Playing Sound Files
    • 🎨Unit 3 Final Project: Patatap
  • Unit 4: Motion, Objects, Transformation
    • 🔮Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move in All Directions && Make it Bounce
    • U4LA2.1: Introduction to Classes and Objects
    • U4LA2.2: Reading and Updating Object Properties
    • U4LA2.3: Methods Off Canvas
    • U4LA2.4: Objects on Canvas
    • 🗃️U4LA2 Mini Project: Build a Tamagotchi
    • U4LA3.1: Creating Many Objects
    • 🤓🗃 Optional U4LA3 Mini Project: Rebuild with Objects
    • U4LA4.1: Translation Battleship
    • U4LA4.2: Rotations
    • 🤓U4LA5.1: Sine && Oscillating Motion
    • 🤓U4LA5.2: Cosine && Circular Motion
    • 🎨Unit 4 Final Project: Animated Greeting Card || PSA
  • Unit 5: Final Project
    • 🔮Unit 5 Overview
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Teacher Notes && Overview
  • Objectives
  • Suggested Duration
  • NYS Standards
  • Vocabulary
  • Planning Notes && Materials
  • Resources
  • Assessments
  • Do Now/Warm Up (3-5 minutes)
  • Introducing Class Methods (5 - 10 minutes)
  • Creating Methods: Code Along (10 -15 minutes)
  • Student Challenge: Cart and Player Class (15 - 25 minutes)
  • Wrap-Up (3-5 min)
  • Extensions
  1. Unit 4: Motion, Objects, Transformation

U4LA2.3: Methods Off Canvas

How can I add methods to a class to give more functionality to my objects?

Teacher Notes && Overview

In this lesson, students are introduced to methods within classes. They will work to create methods for two different classes that work entirely off-canvas. In the next lesson, we will reintroduce the canvas and allow students to apply their knowledge of objects to make something visual.

Objectives

Students will be able to:

  • Define and describe methods

  • Create custom methods within their classes

  • Call methods on objects

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.

9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

Vocabulary

  • methods - functions that are part of a class and can only be utilized by objects of that class.

Planning Notes && Materials

Planning Notes
Materials

Be sure to review the starter code so you have an idea of how to address all of the challenges.

No specific materials needed

Resources

Assessments

Formative:

  • Student Challenge Activity

Summative:

  • Upcoming Mini Project

  • Upcoming Unit Final

Do Now/Warm Up (3-5 minutes)

Imagine that you were just hired by an online retail company. They've told you that they need to build out their website to create a customer shopping experience, and they want to do this through object oriented programming. What do you think you would need to include in the class so the User can successfully shop?

Introducing Class Methods (5 - 10 minutes)

After reviewing the Do Now, explain to students that in addition to the properties they may want to store in a User object (name, email, address, credit card info, etc) they probably also want the user to be able to do things. Maybe they can change their address and have it verify with password, or, save favorite items, or add things to their cart, or check out with a coupon.

All of these things represent actions - the kind we usually associate with functions! When we are dealing with Classes and objects, we refer to these functions as methods. Methods are a special type of function that are part of a Class and are only usable by objects in that class. We've actually seen this before - when we do myArray.push(), that .push() is actually a method that only works on arrays (which are actually a special type of object in JavaScript!).

So far, the only method we've seen is the constructor(). This one is required to create our objects and it runs automatically when we create a new object. Other methods will be specific to the needs of the Class. Let's think back to our Minion class. In the Minion class, we might have a method called helpGru() and we could define what happens when it is called within our class. If we wanted to use that method, it would look like: minion1.helpGru()

Today, the focus will be on writing and testing our own methods for different classes. Everything will remain off-canvas - we are still going to be looking at what's coming up in the terminal - for today. This is strictly to keep us from focusing on making a visual perfect or getting distracted! In our next lessons, we will begin applying what we know to our canvas designs!

Creating Methods: Code Along (10 -15 minutes)

To begin, let's take a look at the Code Along: we are being asked to create a Cart class with some specific properties. We can think of this Cart as a class that might work with our User class from the Do Now - we could even have a Cart object as a property of the User (what a crazy world)!

To begin, let's build this out together:

class Cart{
    constructor(email){
        this.email = email
        this.total = 0
        this.itemList = []
    }
}

Once this is built and any initial questions ahve been clarified, ask students to independently complete #1-3, which test to see the Cart works. Circulate to assist/answer questions as needed, then take a brief poll to make sure everyone has a working Cart class and testCart object.

We now are asked to make a method called updateEmail() - this will seem redundant, as we have learned to change values without a function, but let's do it to get used to syntax. Methods are made within the class, so we will be scrolling back up to our class definition at the top of our code and adding in:

class Cart{
    constructor(email){
        this.email = email
        this.total = 0
        this.itemList = []
    }
    
    updateEmail(newEmail){
        this.email = newEmail
        console.log("Email updated.") //this is optional but a great check to see if things are working!
    }
}

Important things to note:

  1. Unlike our previous function writing experience, we don't need to use the word 'function' when defining methods. We just ensure they follow a function structure (name, parentheses, curly braces) and exist within our Class.

  2. Pay very close attention to the curly braces! Remember, indentation is never required in JavaScript, but it's helpful to make things more readable.

  3. We didn't use a return statement - that is because in this example, we aren't dealing with a value from outside our object that needs to be returned back to the program. We are just updating the object itself.

Student Challenge: Cart and Player Class (15 - 25 minutes)

From here, students will be working to complete the rest of the challenges. As always, you can choose to have them work independently, to pair program with a partner, or to work as part of a small group. While students work, circulate to assist. At any point, if you feel like many students are becoming hung up on the same issue, feel free to pause to review as a class.

Wrap-Up (3-5 min)

Review answers with the class by having students/pairs/groups share some of their solutions or sticking points to talk through.

Extensions

Students will find a spicy challenge at the end of the starter code that they can use to challenge themselves if they have raced through everything else.

PreviousU4LA2.2: Reading and Updating Object PropertiesNextU4LA2.4: Objects on Canvas

Last updated 2 years ago

Starter Code ( | )

(Extra Learning Resource)

Ask students to open and duplicate the starter code ( | ). They should see that there is an initial code along followed by a few tests they will be asked to uncomment and try, as well as the rest of the project challenges that they will work on later.

p5 editor
repl.it
Happy Coding: Creating Classes
p5 editor
repl.it