The course is part of this learning path
- Watch the video
- Pause it at the appropriate places to execute the commands on your local environment
This activity should take you around two hours to complete.
Please click here to download your HTML template.
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.
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."
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.