Steps

Step 1

Open up your browser's developer tools, and click over to the console tab. Type the following code:

console.log('programming!')

Press enter. Your browser should now look like this:

Congrats, you just wrote your first lines of JavaScript code! console.log is an important function – it allows you to print information to the browser's console. It's very helpful in debugging! You can also use the alert function to make a message pop up in the browser. Try it out!

Step 2

Next try some simple math that's built into JavaScript. Type these lines into console:

3 + 3
7 * 6

Step 3

Variables are names with values assigned to them.

var myVariable = 5

This assigns the value 5 to the name myVariable.

Step 4

You can also do math with variables:

myVariable + 2
myVariable * 3

Step 5

Variables can also hold more than one value. This is called an array.

var fruits = ["kiwi", "strawberry", "plum"]

Here we're using the variable fruits to hold a collection of fruit names.

Step 6

Arrays are a type of object in JavaScript. Objects often include helpful attributes!

fruits.length

Objects can also have functions, which can be helpful for altering objects and learning more about them. Functions are invoked with parentheses, which causes them to run.

fruits.push("orange")
fruits.slice(1)

The push function allows us to add new items to an array. The slice function returns a new array with with everything to the right of the index we provided. Here, we passed the function the number 1, so slice returned an array with everything after the first element in the array. (Note that the first element is assigned 0 as its index rather than 1.)

Step 7

You can also make your own functions:

var pluralize = function(word) {
  return word + "s"
}
pluralize("kiwi")

Functions take parameters, which are the variables they work on. In this case, we made a function called pluralize that takes one parameter, a word.

Functions can also return data. In this case, pluralize returns the word with an 's' added to the end of it. In order for a function to return something, you have to use the return keyword.

Step 8

Arrays have a function called forEach which iterates through the list running code on each item. It takes another function as a parameter.

fruits.forEach(function(fruit) {
  console.log(fruit)
})

This takes the first item from the fruits array ("strawberry"), assigns it to the variable fruit, and runs the code between curly brackets. Then it does the same thing for each other item in the list. The code above should print a list of the fruits.

Step 9

A conditional runs code only when a statement evaluates to true.

if(myVariable > 1) {
  console.log('YAY')
}

This prints YAY! if the value stored in myVariable is greater than 1.

Try changing the > in the conditional to a <.