Main content
Course: Getting Started Teacher Training (U.S.) > Unit 6
Lesson 1: Teaching Computer Programming in the classroom- Programming content overview
- Tracking progress of programming students
- Classroom debugging guide
- Pair programming in the classroom
- Teaching guide: Intro to JS - Drawing Basics
- Teaching guide: Intro to JS - Coloring
- Teaching guide: Intro to JS - Variables
- Teaching guide: Intro to JS - Animation basics
- Teaching guide: Intro to JS - Interactive Programs
- Teaching guide: Intro to JS - Resizing with variable expressions
- Teaching guide: Intro to JS - Text and strings
- Teaching guide: Intro to JS - Functions
- Teaching guide: Intro to JS - Logic and if statements
- Teaching guide: Intro to JS - Looping
- Teaching guide: Intro to JS - Arrays
- Teaching guide: Intro to JS - Objects
- Teaching guide: Intro to JS - Object-oriented design
- Programming classroom handouts
- Additional programming projects
- Lesson plans: teaching programming in the classroom
- Programming case study: Encouraging cross-disciplinary projects
- Programming case study: Going beyond the KA curriculum
- Programming case study: Teaching an elementary school class
© 2024 Khan AcademyTerms of usePrivacy PolicyCookie Notice
Teaching guide: Intro to JS - Objects
This is a teaching guide for the Intro to JS lesson on Objects.
What the student will learn
- How to create objects to store various related properties in one variable.
- How to access or change properties of an object using both “bracket notation” and “dot notation”.
- How to create arrays where each element is an object.
- How to iterate through an array of objects using a for loop.
The student will be able to write code like:
Where students struggle
- Students may mess up the syntax at first - like typing ‘=’ instead of ‘:’ inside the brackets, forgetting commas after properties, or using square instead of curly brackets.
- Students may not understand the difference between arrays and objects. They are actually quite similar, especially in JS. When they're deciding how to store their data, ask them to think about whether there is a natural sequence to the data they’re storing and if they plan to iterate through the data a lot - if so, an array is often best; if not, an object may be a better fit.
- Students may not see the point of objects at first, because they can accomplish the same thing using multiple variables. Once their program needs to track a lot of information, however, multiple variables get quite unwieldy. Imagine if they had to store 10 properties about 20 students in the class - that’d be 200 variables without objects, but just 20 variables with objects, and just one variable using an array of objects.
Additional materials: Discussion questions
These are questions that you can ask students individually after they've done the lesson, or lead a group discussion around, if everyone's gotten to the same point.
- Some JS programmers actually create business cards that describe themselves using a JavaScript object. How would your students describe themselves with an object? Encourage them to store different types of properties, like strings, numbers, arrays, and more objects. Maybe you can even print business cards on cardstock for your students!
Additional materials: Trivia questions
These can be fun to do as a class after everyone’s gotten through the lesson. They can also lead to discussion about which questions are the hardest. Play them on Quizizz.
Want to join the conversation?
- I do not know alot of coding(2 votes)
- Looping through an array is such a common task, the language provides boilerplate code in the array's
forEach
method. See documentation for details. Using the forEach method makes iterating through the array a one line command:var words = [
{a: 100, y: 100, label: "CODING"},
{a: 200, y: 200, label: "FOR"},
{a: 300, y: 300, label: "FUN"}
];
var drawWord = function(word){
var x = sin(word.a)*100;
word.a += 3;
text(word.label, 200+x, word.y);
};
textFont(createFont("impact", 44), 44);
fill(255, 0, 0);
draw = function() {
background(255);
words.forEach(drawWord);
};(0 votes)