Lesson Title: Understanding and Working with JavaScript Objects
Objective:
Students will be able to define, create and use JavaScript objects effectively to implement the rules and algorithms for the Domain of their applications. Customarily, we discover our objects from the UP Methodology.
Objects are wrappers for business processes.
Materials:
Laptops or computers with a code editor installed
A projector or a large screen to display the code
Whiteboard and markers
Duration: 2 hours
Introduction (15 min):
Introduce the topic of JavaScript objects and why they are important.
Show examples of how objects are used in real-world applications.
Ask the students to define what an object is and write the definitions on the whiteboard.
Review the definitions and provide a clear and concise explanation of objects are handled in the von Neuman Memory Model.
Section 1: Defining Objects (30 min):
Teach the students how to define objects using the object literal notation.
Demonstrate how to add properties and methods to objects.
Write examples on the whiteboard and ask the students to follow along.
Have the students practice creating objects and adding properties and methods.
String Object:
var str = "Hello World!";
Number Object:
var num = 123;
Array Object:
cssCopy code
var arr = [1, 2, 3, 4, 5];
Boolean Object:
goCopy code
var bool = true;
Date Object:
javascriptCopy code
var date = newDate();
Math Object:
javascriptCopy code
var pi = Math.PI;
RegExp Object:
javascriptCopy code
var pattern = newRegExp("\\d+", "g");
JSON Object:
var json = { "name": "John", "age": 30, "city": "New York"}
The dot accessor notation is used to access properties and methods of an object in JavaScript.
It is a way of accessing an object's properties by using a period (.) followed by the property name. For example, if we have an object called person, we can access its name property with person.name.
Examples of dot notation:
// Accessing a property
const person = {
name: 'John',
age: 30
};
person.name; // returns 'John'
// Accessing a method
const person = {
name: 'John',
age: 30,
greet: function() {
console.log(`Hi, my name is ${this.name}`);
}
};
person.greet(); // logs 'Hi, my name is John'
Show how to make JavaScript Arrays, objects, and data structures
Here's how to create JavaScript arrays, objects, and data structures:
Arrays:
Arrays are ordered lists of values, represented using square brackets [].
var numbers = [1, 2, 3, 4, 5];
var colors = ["red", "blue", "green"];
Objects:
Objects are collections of key-value pairs, represented using curly braces {}.
var person = {
name: "John Doe",
age: 30,
city: "New York"
};
Multi-dimensional Arrays:
Multi-dimensional arrays are arrays of arrays, used to store arrays within arrays.
var matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
Associative Arrays:
Associative arrays are arrays with named keys, which can be used to store key-value pairs.
javascriptCopy code
var grades = {
"John": 85,
"Jane": 90,
"Jim": 95
};
Maps:
Maps are collections of key-value pairs that can be used to store and retrieve values based on keys.
pythonCopy code
var map = new Map();
map.set("name", "John");
map.set("age", 30);
map.set("city", "New York");
Sets:
Sets are collections of unique values, used to store values that need to be distinct.
csharpCopy code
varset = new Set();
set.add("red");
set.add("blue");
set.add("green");
Tuple:
Tuples are arrays with fixed length, where each element has a specific type.
javascriptCopy code
var tuple = [1, "John", true];
These are some of the basic data structures used in JavaScript. You can also use advanced data structures like trees, graphs, and linked lists.
Here's an example of how to create a JavaScript object from a JavaScript class:
kotlinCopy code
classPerson {
constructor(name, age, city) {
this.name = name;
this.age = age;
this.city = city;
}
}
var person1 = new Person("John Doe", 30, "New York");
var person2 = new Person("Jane Doe", 25, "London");
In this example, the Person class is defined using the class keyword. The constructor method is used to initialize the object's properties. To create an object from the class, you can use the new keyword followed by the class name and pass in the required arguments.
Now you can access the properties of the objects using the dot notation, like this:
javascriptCopy code
console.log(person1.name); // Output: John Doe
console.log(person2.age); // Out
Section 2: Accessing Object Properties and Methods (30 min):
Teach the students how to access the properties and methods of objects.
Write examples on the whiteboard and ask the students to follow along.
Have the students practice accessing properties and methods of objects.
Encourage the students to ask questions and provide feedback.
Section 3: Modifying Object Properties and Methods (30 min):
Teach the students how to modify object properties and methods.
Write examples on the whiteboard and ask the students to follow along.
Have the students practice modifying object properties and methods.
Encourage the students to ask questions and provide feedback.
Section 4: Creating Objects using Constructor Functions (30 min):
Teach the students how to create objects using constructor functions.
Write examples on the whiteboard and ask the students to follow along.
Have the students practice creating objects using constructor functions.
Encourage the students to ask questions and provide feedback.
Conclusion (15 min):
Summarize what was covered in the lesson.
Ask the students to complete a review quiz to assess their understanding of the material.
Provide feedback on the quiz results and address any remaining questions.
Assessment:
Review quiz
Observing students as they practice creating, accessing and modifying objects.
Homework:
Have the students complete a project that involves using objects in JavaScript.
Encourage the students to explore and practice using objects in different ways.
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
