Objects in Javascript

Getting Started

Objects work in a similar way to arrays - in arrays we can store lots of different things in one variable.

Objects can also store lots of different things, a key difference is that you objects store a range of different variables in them, usually different pieces of information about that object.

For example a car may have the following properties:
Make: Nissan - Model: Primera - Year: 1999 - Price: $5000 - Color: Blue

If we were to make this into an object in JavaScript it would look like this:
let car = {make:"Nissan", model:"Primera", year:1999, color:"blue"};

To show the make of this car object we could write:
alert(car.make);

If you look to the right there is a  better way of laying this out.

Task: Create a new folder called "Classes". In this create a new HTML file and a new JS file.

1.) In the HTML create a new template that contains a single button
2.) Declare the object like you see to the right in the JS file.
3.) Create a function so that when you click on the button it alerts one of the properties of your object.

Console.log()

When you're first learning to code, using alert() is a very handy way of giving feedback to yourself/the user. Now that you're more advanced, it's time to move away from alert and start using the console.

Console.log() is used in the same way as alert() but has many advantages, including:
  1. It doesn't lock up your interface - it puts the info into the console and lets you keep going
  2. It can print lots of things at once
  3. It prints things better, for example arrays - you can see all of the contents and look through everything easily

To access the console hit F12 (or right-click and select "Inspect"), then press the "Console" tab along the top.

Task: Change your code from the previous task to use console.log() instead of alert()

Note: In the example images on the right we are using "const" (a constant) instead of "let". When we are using data that should never change - like days of the week - we should use a const variable which does not allow changes like a normal "let" variable will.

Objects in String

In order to tell a story about a the car previously I might write:

console.log(`Once a young man went to buy a ${car.make} ${car.model} however, it cost $${car.price} so he couldn't afford it`);

Notice: we are combining our object variables in togther with the text - to do this we use ` ` instead of " ". The ` ` key can be found at the top left of your keyboard.

Task: Create the story above, use a classmate instead.

Now it is your turn.

Task: Create a story using two objects (i.e. a pet and a book). Use your own predefined objects that have at least 3 properties.

Class Constructors & JavaScript

Often at times we don't just want to create one object.

Like if we worked in a car yard we wouldn't want just one car object, when you have 40.

We can create was is known as a class or a constructor, which is basically a blue print in which we make the classes.

The class with the constructor looks like this:
Note that this is not an object, this is merely a mold for an object.

To actually create an object we type in this:
Task 1: Get rid of the object in the previous instruction, and make two new car objects using the class method

Task 2: Create 2 class constructors in Javascript for any object of your choice. Then use then create 2 objects for each class.

Use them to tell a story
Picture
A class is like a machine for creating instances (objects)
Picture
A class is also similar to a mold used for making chocolates etc.

Methods within Objects

As you notice from my story earlier, I used this code a couple of times:
${car.make} ​${car.model} ​

We can make our own methods to do this automatically.

We simply add this as a property into the class (in addition to the constructor):
Now if I were to run newCar.MM it would automatically combine the two together.
Tasks: Create some Methods
1.) Create the method that joins the Make and Model together
2.) Console.log to display this.
3.) Create another method that is a new price with GST included
4.) Console.log to show the new price.
5.) Create a method that will update the price of the car by asking the user for a new amount.

Custom HTML from classes

Now that we have a class we can make custom HTML from it.

Task: List the Make and Models of the Cars with buttons that when pressed will load a picture.

1.) Modify your HTML so that it it has two div tags with ID's for carPhoto and an ID for Car list
2.) Create a button called load cars, that calls a function called load cars into a list
3.) Add an extra parameter to the class of car called img, insert a reference to an image of each car. (check picture to right to get an idea.)
4.) Create a method that will automatically create an image tag using that variable.
5.) Create a method that loads the picture text into the div tag called carPhoto
6.) Create a button next to each listed car that calls this function.


Arrays, and Classes

Lets start again. This time we are going to make 4 objects.

Lets choose an object of your choice (Game Consoles, Burgers, etc).
I am going to go with burgers because at the time of writing this I am hungry.

This time we are going to store the objects in an array.

This would look like this:

let burgers = [];
burgers.push(new Burger("CheeseBurger", "beef", 5, "cheeseburger.jpeg"));

Task: Create a similar program using an array to store the objects.

Task 2: Load the array up with 4 different versions of your object.

Task 3: Using a for loop display all 4 of your objects on your web page

Click and Show Message

When we create our object, if we store the position of the object in the array then we can do a bit more with it.

To do this we can just use the array.length command.

Now we can use this to make it so that when you click on an image it alerts you the name of that burger.

Task: make it so that when you click on one of the images, a message appears somewhere on the page (ideally above the images) saying it has been selected.

Hint: you might want to use a div dedicated to the message, something like
<div id="message"></div>

A button that will create another object from an object.

Your Final Task:

Create another class called shopping item. It should contain hold name, price and array position

When you click on the image it should add the name and price to a shopping list.

It should update with the price and total.

Check it out below: