Home > JavaScript > Hello JavaScript

Hello JavaScript

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.

About these ads
Categories: JavaScript Tags: , ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: