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.
|
This page requires you to be logged in to access it. Please login and try again.
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.