Objects
Time N/A

Difficulty Beginner
Prerequisites Arrays
Departments Science
Authors Sandra Kuipers
Groupings Individual
Minimum Year Group None

Blurb

Objects

License

This work is shared under the following license: Creative Commons BY-SA-NC

Outline

Learner Outcomes
Students will:
  • ...
Competency Focus
  • ...
Interdisciplinary Connections
  • ...
Reflection
What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
  • ...
Credits
Any CC attribution, thanks, credit, etc.

You do not have access to this action.
Introduction
Getting Started

Objects are similar to arrays, but rather than having a numeric index, they have named properties.

Thinking in Objects
Theory
  • Objects help us think about our code not as separate variables, but as sets of related data.
  • For example, if you had a racing game, you might have variables that look like:
var speed = 10;
var acceleration = 1.5;
var breakingPower = 1;
var turningPower = 1.8;
  • Each of these variables describes a property of the racing car.
  • By putting these variables together, we can create an object:
var raceCar = {
    speed: 10,
    acceleration: 1.5,
    breakingPower: 1,
    turningPower: 1.8,
};
  • This object contains all the variables of the racing car.
  • Variables inside an object like this are called properties.
  • Notice the difference in syntax.
Creating Objects
Examples
  • We can create objects using a specific syntax.
  • Just like arrays are created with [] square brackets, objects are created with {} braces.
  • Creating a new object looks similar to creating a new variable, with a few differences:
var myEmoji = {
    eyes: "sad",
    mouth: "grimmace",
    color: "blue",
    size: 10,
};
  • Properties are defined with a name followed by a : colon, and then the value of the property.
  • Multiple properties are separated by a comma , similar to separating multiple values in an array.
Modifying Objects
Examples
  • Once we've created an object, we can access it's properties using dot notation.
  • This means we use the name of the object, followed by a dot, then the name of the property.
myEmoji.eyes = "happy";
myEmoji.size = 50;
  • Properties can also be accessed with square brackets similar to arrays.
  • Instead of using an integer for the index, you can access an object with a string index.
myEmoji['eyes'] = "angry";
myEmoji['color'] = "red";
  • A property can be used in conditionals, expressions, arrays, and loops just like any other variable.
  • Check out the Mozilla documentation for more info about working with objects.
Advanced Syntax
Theory
  • Objects in JavaScript work a bit differently than in other more object-oritented programming languages.
  • Objects can represent a set of properties, but they can also be created and manipulated using a Class.
  • Using a class is a more advanced syntax for objects, and is closer to how other programming languages work.
  • Classes allow objects to contain not only properties, but also functions (which are called methods when they're inside a class).
  • Class methods enable an object to share similar sets of behaviour.
  • For this unit you don't need to learn the full class syntax, but if you're interested, be sure to check out the Mozilla documentation on Classes.
Infinite Variation
Evidence
  • Objects are great at representing code with a lot of different variations.
  • For example, the same object called Animal could have properties to describe the size and shape of a wide variety of animals.
  • For this unit, your goal is to use objects to create a scene with multiple objects that can mutate.
    • To mutate your objects, you'll need to create them, then change their properties.
    • Your scene could randomly generate your objects at the start.
    • Or, it could use user input such as buttons or mouse clicks to create and mutate the objects.
    • The goal is to display your objects on screen, and use their properties to modify them after creating the object.
  • Feel free to be creative and have fun with what kinds of objects you create and mutate!
  • Create your scene as a p5js sketch and submit it as your evidence of learning in this unit.
There are no records to display.
Powered by Gibbon v24.0.00dev | © Ross Parker 2010-2022
Created under the GNU GPL at ICHK | Credits | Translators