Classes and Methods

JavaScript Classes and Methods: Building a Game Character

1. Reference Guide

Key Vocabulary

Term	Definition	Example
Class	A blueprint for creating objects.	`class Player { }`
Constructor	Runs when a new object is created.	`constructor(name) { ... }`
Property	Data stored on an object.	`player.health`
Method	An action an object can perform.	`player.heal()`
Object	A value created from a class.	`new Player("Alex")`
Built-in method	A method already provided by JavaScript.	`items.push("sword")`
Static method	A method called on a built-in object such as `Math`.	`Math.max(10, 25)`

A class describes what an object has and can do.
A constructor sets starting values.
Properties store information; methods perform actions.
heal() is created by the programmer. push() and join() are built into JavaScript.

Class Structure

Part	Purpose	Example
`class`	Defines a class blueprint.	`class Player { }`
`constructor()`	Sets starting properties.	`constructor(name) { ... }`
`this.property`	Stores a value on the current object.	`this.health = health`
Method name	Defines an object action.	`heal() { ... }`
`new`	Creates an object from a class.	`new Player("Alex")`
Method call	Runs a method.	`player.heal()`

Common Built-in Methods

JavaScript provides many methods for common data tasks. Use dot notation for methods that belong to a value. Some built-in methods, such as Math.max(), are called on a built-in object.

String

Method or property	Purpose	Example	Output
`.trim()`	Removes spaces at the beginning and end.	`" Alex ".trim()`	`"Alex"`
`.toUpperCase()`	Changes letters to uppercase.	`"Alex".toUpperCase()`	`"ALEX"`
`.length`	Counts characters. This is a property, not a method.	`"Alex".length`	`4`

Array

Method	Purpose	Example	Output
`.push(value)`	Adds a value to the end.	`["potion"].push("sword")`	Array length: `2`
`.includes(value)`	Checks whether an array contains a value.	`["potion", "sword"].includes("sword")`	`true`
`.join(separator)`	Combines array values into a string.	`["potion", "sword"].join(", ")`	`"potion, sword"`

Math

Method	Purpose	Example	Output
`Math.max(a, b)`	Returns the larger number.	`Math.max(-10, 0)`	`0`
`Math.min(a, b)`	Returns the smaller number.	`Math.min(120, 100)`	`100`

Using Classes and Methods

Define a class with class.
Add a constructor for starting properties.
Add methods that use this to read or change properties.
Create an object with new.
Call your own methods with dot notation, such as player.heal().
Use built-in methods when JavaScript already provides the operation you need.

2. LxD Cycle

Define:

POV: CSSE students need to understand how classes and methods work because classes organize the properties and behaviors of objects, while methods allow objects to perform actions.
Learning Goal: Students will explain what a class, object, and method are, create a simple class with properties, and create and call methods that perform actions.

Ideate:

HMW Question: How might we help students understand the difference between a class, an object, and a method?
HMW Question: How might we help students connect methods to actions that an object can perform?
Activity: Students will create a simple class based on something from everyday life, such as a Student, Dog, or Car. They will add properties to describe the object and methods to describe what the object can do.

Prototype & Test: In our trial run, students understood the class and constructor examples, but needed more guidance when creating their own methods. We added comments that explain each step and simplified the Popcorn Hack.

3. CS111 Requirements

This lesson covers introductory object-oriented programming concepts from MiraCosta College CS 111. The lesson ensures students understand how classes and methods encapsulate data and behavior into reusable objects.

The CS 111 concepts covered in this lesson include:

Understanding class blueprints and constructors: Students learn how classes act as blueprints and how constructor functions define and initialize an object’s default properties (such as initial player health or coins).
Understanding property encapsulation: Students understand how instance variables (this.property) store and protect object state, keeping related data organized inside a single structure.
Creating and invoking class methods: Students learn to design methods inside classes to define character actions (such as heal() or takeDamage()) and invoke them on objects.
Understanding state mutation via methods: Students practice mutating an object’s internal state safely by calling its methods rather than manually overwriting variables.
Mastering object instantiation: Students learn how to use the new keyword to create independent object instances from a class blueprint and interact with their methods.
Understanding state boundary validation: Students learn to apply conditional logic (if statements or helper functions) inside methods to enforce game bounds (e.g., preventing health from dropping below 0 or exceeding maximum health).
Distinguishing custom vs. built-in methods: Students learn to differentiate between custom instance methods and built-in library utilities provided by the environment.
Understanding the value of classes: Students recognize why using classes and methods is better for managing multiple entities compared to declaring dozens of individual variables.

These requirements are taught through reference examples, step-by-step code snippets, class challenges, interactive Popcorn Hack code runners, and a homework exercise. The final practice exercises check whether students understand how objects encapsulate both state and behavior, rather than only memorizing syntax.

The lesson is intended to introduce these fundamental CS 111 object-oriented concepts before students move on to object interactions, class inheritance, and data structures.

4. Lesson Plan

Learning Objective: By the end of this lesson, you will be able to create a simple JavaScript class with properties and methods, then use methods to change an object’s information.

Success Criteria: You can create a class using a constructor, identify its properties and methods, create an object using new, and use its methods to change the object’s properties.

Tech Talk

A class is a blueprint. An object is created from that blueprint. A method is an action the object can perform.

This example defines a Player class, creates an alex object, and calls the sayHello() method.

%%js
class Player {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log("Hello, " + this.name + "!");
  }
}

let alex = new Player("Alex");
alex.sayHello();

5. Code Example

A. Creating the Class

Code Runner Challenge

Define a class, create an object, and print its properties.

View IPYNB Source

%%js
// CODE_RUNNER: Define a class, create an object, and print its properties.
class Player {
  // The constructor gives the new object its starting properties.
  constructor(name, health, maxHealth, items) {
    this.name = name;
    this.health = health;
    this.maxHealth = maxHealth;
    this.items = items;
  }
}

// Create an object after defining the class.
let player = new Player("Alex", 80, 100, ["potion"]);

// Print the object's property values.
console.log("Name: " + player.name);
console.log("Health: " + player.health);
console.log("Max health: " + player.maxHealth);
console.log("Items: " + player.items.join(", "));

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

The Player class is a blueprint. The player object is created with new Player(...), and the code runner prints its property values.

B. Creating Your Own Method

Code Runner Challenge

Create an object with a heal() method and call the method.

View IPYNB Source

%%js
// CODE_RUNNER: Create an object with a heal() method and call the method.
class PlayerWithHeal {
  constructor(name, health, maxHealth) {
    this.name = name;
    this.health = health;
    this.maxHealth = maxHealth;
  }

  // heal() is a method created by the programmer.
  heal() {
    this.health += 10;
    this.health = Math.min(this.health, this.maxHealth);
  }
}
// Create an object
let healingPlayer = new PlayerWithHeal("Alex", 80, 100);
// Call the heal() method
healingPlayer.heal();
// Print the object's property values after healing
console.log("Name: " + healingPlayer.name);
console.log("Health after healing: " + healingPlayer.health);

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

The heal() method is created by the programmer. The object calls it with dot notation: healingPlayer.heal().

C. Using Built-in Methods

Code Runner Challenge

Use built-in methods on an object's properties.

View IPYNB Source

%%js
// CODE_RUNNER: Use built-in methods on an object's properties.
class Player {
  // The constructor gives the new object its starting properties.
  constructor(name, health, maxHealth, items) {
    this.name = name;
    this.health = health;
    this.maxHealth = maxHealth;
    this.items = items;
  }
}

let player = new Player("  Alex  ", 80, 100, ["potion"]);

// The built-in string method trim() removes spaces from the beginning
let cleanName = player.name.trim();

// player.items is an array that currently contains "potion".
// The built-in array method push() adds a new item to the end of an array.
// After this line, player.items contains ["potion", "sword"].
player.items.push("sword");

// The built-in string method toUpperCase() makes all letters uppercase.
console.log("Name: " + cleanName.toUpperCase());

// Read the health property and join its value to the label.
console.log("Health: " + player.health);

// The built-in array method join(", ") combines the array items
// into one string, placing a comma and a space between each item.
console.log("Items: " + player.items.join(", "));

// The built-in array method includes() checks whether the array
// contains "sword". It returns true if found, or false if not.
console.log("Has sword: " + player.items.includes("sword"));

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

This runner uses methods that JavaScript already provides. trim() and toUpperCase() work with Strings, while push(), join(), and includes() work with Arrays.

6. Hacks & Practice Tasks

Prepare for your IPYNB submission

Submit your work by creating a notebook in VS Code, saving it in your portfolio repository as an .ipynb file, committing it to GitHub, and then submitting the link to your GitHub portfolio repository through the Google Form.

Follow these steps:

Open VS Code and create a new notebook file in your portfolio repository under “notebook” folder. (we recommend you to create a new folder “homework” under the notebook folder for organization.)
Have a clear name for the notebook such as YYYY-MM-DD-classes-and-methods-hw.ipynb.
Add one raw cell at the top with the frontmatter:

layout: post
codemirror: true
title: Variables and Data Types HW
categories: [JavaScript]
lesson_language: JavaScript
lesson_topic: Classes-and-Methods HW
lesson_part: interactive
lesson_type: lesson
permalink: /javascipt/classes/hw
author: yourGithubID

Finish the popcorn hack and homework section inside your notebook with code cells.
Save the file and commit it to your portfolio repository on GitHub.
Submit your deployed portfolio link to the form when you are done.

Important:

The notebook must be an .ipynb filet
The notebook should be stored inside your portfolio repository.
Make sure your portfolio is deployed.

Submit Your Homework:

You should submit your homework through Open Coding Society
If it doesn’t work here is a Google Form link: https://forms.gle/Fa7nMk8ewzzqdoTi6

Popcorn Hack: Add a Method

The starter code is incomplete. Complete the small task below before running it.

Add a takeDamage() method that subtracts 10 from health.
Call takeDamage() and print the final health with a label such as "Health after damage: " Use the completed heal() method as a model. Predict the output before running your code.”

Code Runner Challenge

Add takeDamage() and complete the final two lines.

View IPYNB Source

%%js
// CODE_RUNNER: Add takeDamage() and complete the final two lines.
class Player {
  constructor(name, health) {
    this.name = name;
    this.health = health;
  }

  // This method is already complete. Use it as a model.
  heal() {
    this.health += 10;
  }

  // TODO 1: Create takeDamage() and subtract 10 from health.
}

let player = new Player("Alex", 50);
player.heal();
console.log("Health after healing: " + player.health); // 60

// TODO 2: Call takeDamage() and print "Health after damage: " with the final health.

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

Homework Hack: Build Your Own Class

Create your own JavaScript class like, Player, Enemy, Pet, etc.

Your class must include a constructor, at least two properties, one built-in method, one self-created methods and an object created using new.

Code Runner Challenge

Create your own game character class with at least two properties and two methods.

View IPYNB Source

%%js
//CODE_RUNNER: Create your own game character class with at least two properties and two methods.
// Use the steps below as a guide for your own solution.
// 1. Define a class.
// 2. Add a constructor with two properties.
// 3. Add one method that increases a value.
// 4. Add one method that decreases a value.
// 5. Create an object with new and test both methods.

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

Grading Plan

This assignment is worth 1 point total. Earn 0.2 points for each completed requirement:

0.2 points: Class is correctly defined with a constructor.
0.2 points: At least two properties are included.
0.2 points: At least two methods are included.
0.2 points: One method increases a value and one method decreases a value.
0.2 points: A new object is created and the methods are tested successfully.

7. Lesson Revisions

Revision Made: We simplified the interactive tasks by cutting out one redundant Popcorn Hack so students could focus deeply on practicing property mutation via takeDamage(). We updated the Code Examples section by adding dedicated interactive Code Runners to each individual step (Class Definition, Custom Methods, and Built-in Methods), allowing students to run and observe object state changes incrementally instead of swallowing all concepts at once. Furthermore, we introduced a new section covering JavaScript built-in methods (such as .push(), .trim(), and Math.max()) after realizing that learning custom class methods alone was insufficient for building complete applications.

8. Feedback Evidence

Feedback Received: During our practice run with the project team, we noted that having multiple back-to-back Popcorn Hacks made the practice feel repetitive and overly lengthy. During review with our teacher he mentioned that placing all example code in static blocks made it difficult to visualize how each step worked dynamically. Lastly, team feedback highlighted that students needed to see how custom class methods interact alongside JavaScript’s built-in methods, as real-world projects frequently combine both.

9. References

MiraCosta College. (2026). CS 111: Introduction to Computer Science I. MiraCosta College Catalog. https://catalog.miracosta.edu/disciplines/computerscience/ (https://catalog.miracosta.edu/disciplines/computerscience/)

Mozilla. (2026). Classes - JavaScript. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)

Submit Assignment

Need to update a submission later? Open the submissions dashboard.

Create Microblog Post

Reply to Post

JavaScript Classes and Methods: Building a Game Character

1. Reference Guide

Key Vocabulary

Class Structure

Common Built-in Methods

String

Array

Math

Using Classes and Methods

2. LxD Cycle

3. CS111 Requirements

4. Lesson Plan

Tech Talk

5. Code Example

A. Creating the Class

Code Runner Challenge

B. Creating Your Own Method

Code Runner Challenge

C. Using Built-in Methods

Code Runner Challenge

6. Hacks & Practice Tasks

Prepare for your IPYNB submission

Popcorn Hack: Add a Method

Code Runner Challenge

Homework Hack: Build Your Own Class

Code Runner Challenge

Grading Plan

7. Lesson Revisions

8. Feedback Evidence

9. References

Submit Assignment