Let's imagine you want to model a real-world object in your webpage, like a person or a place. How do you do this? The best way is to use Object-Oriented JavaScript. Now, this topic can become complex pretty quickly, so we recommend that throughout this video, you pause and take a moment to test the code in your own environment.

We'll be using Chrome as our web browser and Visual Studio Code or VS Code as our Local Integrated Development Environment or IDE. VS Code is a powerful and flexible Code editor, developed by Microsoft. It supports plugins from many different languages and features. If you don't have VS Code installed on your local machine, we recommend that you install it as soon as you can.

You can search online for Visual Studio Code download. You can download the starting HTML template from the URL in the notes for this tutorial. Once you have it, you can open it in VS Code. Alternatively, you can create your own simple starter template, as long as it has the same sections as our example.

You should also open the HTML template in Chrome as well. In Chrome, open developer tools so you can experiment with JavaScript commands in the console. You can open developer tools using the keyboard shortcut, Ctrl + Shift + I or from the menu items shown on screen now. It's important that you can see the console, as you'll be typing JavaScript commands into it.

To start, we'll update the HTML page by defining an empty object called "Person". Enter your line of JavaScript with </script> tags already in our file. Then save and refresh the page. As with many JavaScript tasks, creating an object often begins with defining and initializing a variable. After refreshing the web browser, type "Person" into the console and hit Enter. You have just created your first object. Well done! However, this is an empty object, so we can't do a lot with it yet.

The next step is to update the JavaScript object in the file to contain some useful data. In this "Person" object, there is a string, a number, two arrays and two functions. The first four items are data items, and they're referred to as the object's properties. The last two items are functions that allow the object to do something with the data, and are referred to as the object's methods.

An object like this is referred to as an object literal. You've literally written out the object contents as we've come to create it. You access the object's properties and methods using dot notation. The object name, in the case "Person", acts as a namespace. It must be entered first to access anything inside the object. Now save and refresh the browser again. At this point, returning to the console allows us to start seeing how to access this object data.

To do this, start by typing "Person.name" and hitting Enter. You can now see the array of two elements containing the values "Bob" and "Smith". Now we'll access the first element of the name array. Bear in mind, that arrays are zero index, which means the first element has the index of zero. And we get "Bob" as the result. Great. Now try "Age", and you should see "32". To continue, try to access the element in the Interests array with the key of one. You'll see "Skiing."

Now let's look at a JavaScript object to see what else you can reference. There is an attribute called "Bio", which is actually a method because we've given it a function definition. So if you call this code, within the "Bio" function, we'll execute. And you'll see a browser alert as the code specifies. And the last step is to try calling the "Greeting" method.

Again, you should see a browser alert as expected. To recap, the value of an object member can be anything within reason. You can also use sub namespaces. Let's change our "Person" object to demonstrate this. Now save the code and refresh the browser. You have effectively created a sub namespace. To access these items, you just need to chain the extra step onto the end with another dot.

Let's do this in the JS console. You can also use bracket notation in a similar way to dot notation, to access the same data. So far, you've accessed data from an existing object but you'll now see how you can update the object data in the console type. "Person.age=45" Next, let's check the value of age on the "Person" object. You should see the successful updated value of our object age property. You can also create completely new members of an object.

Let's create a new method called "farewell". Entering "person.farewell" in a console will execute the method and you should see a browser alert. And that's it for this video.We've covered how to create a JavaScript object, how to assign properties and methods to an object and how to access those properties and methods. We also looked at dot notations and bracket notation for accessing property values and finally, how you can use sub namespaces within an object to create more flexible data structures.

Introduction to Object Oriented JavaScript

About