Before we start, I highly recommend you try the code samples yourself as you read the tutorials.
Your browsers developer tools can be accessed using the following shortcuts. The console tab is where you can enter your code and see it ran.
IE: F12 Firefox: Ctrl + Shift + K Firefox with Firebug: F12 Chrome: Ctrl + Shift + J Safari: Ctrl + Alt + C
Now lets write some JavaScript!
Everything in JavaScript is an object. Think of an object as a container.
An object is created like so:
var myFirstObject = {};
Lets walk through each part.
I will go into var in more detail later. For now think of it as a way to tell JavaScript that a new object is about to be named.
myFirstObject could be almost any name we wanted. Try to pick names that describe the contents of the object. In this case we are creating our first object so I chose a name to show that.
The equal sign assigns what is on the right to the left. So myFirstObject now contains {}. This is called an assignment.
{} is a shortcut to create a new empty object.
The semicolon at the end of the line is to let JavaScript know that you are done with that line of code. In JavaScript, a statement can span multiple lines. Without the semicolon, JavaScript would have to guess what you intended. It is best not to forget the semicolon.
We now have a new object named myFirstObject. To add another object to it we can use the dot or period.
myFirstObject.mySecondObject = {};
The dot operator looks for an object with the specific name. In this case it looks for mySecondObject inside myFirstObject. But we never created one called mySecondObject for it to find! How can this work at all? During an assignment, if the name given after the dot is not found, it is assumed that you want it to be created.
So we now have an object within another object. It could be represented like so:
myFirstObject = {
mySecondObject: {}
}
This is actually valid JavaScript which I will cover in the future. For now I hope it can help you visualize the structure (if it helps, think of the “:” as “=” instead). When an object starts out it is empty and that is represented like {}. As you add items to it, its gets filled by them { item1, item2, etc.. }.
I want to cover one more way to interact with objects.
These are the same:
myFirstObject["mySecondObject"] myFirstObject.mySecondObject
The braces [] let you specify the name you are looking up. The quotes are needed. More on why later.
I know the first lesson didn’t cover much, but I feel it is essential to understand the basics about objects before moving forward.
