Designer, Meet JavaScript

JavaScript is a powerful and complex language. You can work with it for 10 years and still have more to learn. However, don't let that frighten you away. You don't have to know everything about it to be able to take advantage of what it has to offer. In fact, you just have to get down to a few basics.

This section introduces some JavaScript basics and JavaScript syntax. Don't be scared away by that developer word, syntax. Syntax just means the rules for writing a language, much like we have rules of grammar to write English.

Variables

Let's start with something simple:

var x = 5;

This is a "sentence" in JavaScript. In English, we end a sentence with a period or maybe a question mark or an exclamation mark. In JavaScript, we end our sentences with a semicolon.

In this sentence, we're creating a variable (var), x. A variable is just a container for holding something. In this case, x holds the number 5.

We can do math with JavaScript as shown in the following code snippet:

var x = 5;
var y = 2;
var z = x + y;

Just like algebra, our variable z now holds the value of the number 7 for us.

However, variables can also hold things other than numbers. For example:

var text = 'A short phrase';

Here, we've named our variable text and it's holding some alphabetical characters for us. This is called a string. A string is a set of alphanumeric characters.

Objects

Objects might be the hardest thing for a newcomer in JavaScript to grasp, but that's often because we overthink it, convinced it has to be more complicated than it actually is.

An object is just what it sounds like—a thing, anything, just as a car, a dog, and a coffee maker are objects.

Objects have properties and methods. A property is a characteristic of an object. For example, a dog could be tall or short, have pointy ears or floppy ears, and could be brown or black or white. All of these are properties of a dog. A method is something an object can do. For example, a dog can run, bark, walk, and eat.

Let's take my dog, Magdelena von Barkington, as an example to see how we'd deal with objects, properties, and methods in JavaScript:

var dog;

Here, I've created a variable dog that I'm using as a container to hold my dog, mostly because I don't want to have to type out her full name each time I refer to her in my code. Now, let's say I wanted to get my dog's color:

var color = dog.color;

I created a container called color and I'm using it to hold my dog's color property—color is now equal to my dog's color.

Now, I've trained my dog very well and I'd like her to roll over. The following line of code shows how I'd tell her to roll over with JavaScript:

dog.rollOver();

The rollOver() method is something that my dog can do. After my dog rolls over, I might like to reward her with a treat. The following line of code shows how my dog eats a treat with JavaScript:

dog.eat('bacon');

Wait, what's going on here? Let's take it one step at a time. We have dog, which we know is a container for my dog, Magdelena von Barkington. We have the eat method, which we know is something that my dog can do. However, my dog can't just eat—she has to eat "something". We can use some extra code inside the parentheses to say what it is that she is eating. In JavaScript, we call the code inside the parentheses an argument. In this case, my lucky dog is eating bacon. So in JavaScript, we'd describe this bit of code by saying we are passing bacon to the eat() method of the dog object.

So you see, objects aren't so difficult—they're just things. Properties are like adjectives—they describe traits or characteristics of an object. Methods are like verbs—they describe actions that an object can do.

Functions

A function is a bit of reusable code that tells JavaScript to do something. For example, have a look at the following code:

function saySomething() {
  alert('Something!');
}

This function tells JavaScript to pop up an alert box that says Something!. We always start a function with the word function and then we name our function. This is followed by a set of parentheses and a set of curly brackets. The lines of instruction go inside the curly brackets.

Now, my saySomething() function won't actually do anything until it's called, so I need to add a line of code to call my function, as follows:

function saySomething() {
  alert('Something!');
}
saySomething();

You might wonder what those parentheses are for. Do you remember how we could pass arguments to a method by including them in parentheses? We used the following line of code:

dog.eat('bacon');

In this case, we passed bacon to say what the dog was eating. We can do the same thing for functions. In fact, methods actually are functions; they're just functions that are specialized to describe what an object can do. Let's look at how we modify our saySomething() function so that we can pass text to it, as follows:

function saySomething(text) {
  alert(text);
}
saySomething('Hello there!');

In this case, when I wrote the saySomething() function, I just left a generic container in place. This is called a parameter. In JavaScript, we'd say the saySomething() function takes a text parameter, as I've called my parameter text. I chose the name text because it's a short and handy descriptor of what we're passing in. We can pass in any bit of text to this function, so text is an appropriate name. You can name your parameter anything you'd like, but you'll make your code easier to read and understand if you apply some sensible rules when you're selecting names for your parameters. A parameter behaves very much like a variable—it's just a container for something.