Steps

Step 1: Launch your programming environment

When programming, you'll generally want these tools on hand:

• Your browser to see the code running (I recommend Chrome)
• A text editor to change the code (Railsbridge recommends Atom, but you can try a different editor)
• A javascript console so you can experiment and print out debugging messages. This is built into your browser.

Some helpful links for browser consoles:

• How to launch dev tools in chrome.
• How to launch dev tools in internet explorer.
• How to launch dev tools in firefox.
• How to launch dev tools in safari.

Once you have these tools available, we need to open the files we'll be working with:

• Open game/snake.js in your text editor
• Open game/index.html in your browser

Now 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 just numbers and text. Another type of data in Javascript is called an array.

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

Here we're using the variable fruits to hold a collection of fruit names. An array, designated by the [ ] (square-brackets), is a list of data that can be referenced by its index. The index is the position inside the array, each separated by a comma. Arrays use 0-based indices, so the first element in an array is at Index 0, the second is at index 1, and so on. For example, in the array above, to get the string 'strawberry' in Javascript, you would type 'fruits[1]', which Javascript understands as: get the value at index 1 in the array fruits.

Step 6

Arrays are a type of object in JavaScript that are designated by the use of square brackets. Objects of all types in javascript 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 <.