My oldest son is learning programming in his 7th-grade class. He's been using MIT's Scratch, which is a visual coding language, and he is about to begin coding by hand. It reminded me of this introduction to the JavaScript series I wrote a few years back while working at Amazon so I thought it would be a good time to clean it up and re-release it for anyone else new to programming.
I learned how to code around my son's age, but there was no internet, and all I had was the book that came with the language and a dictionary of API calls. Fortunately, there are so many resources to help you get started, and these next few posts should give any beginner a high-level introduction to coding. I chose JavaScript because it's easy to create something within the browser, there are lots of resources out there, and it can be written locally with tools like Visual Studio Code or in a browser with JSFiddle.
If you are just getting started with JavaScript, consider this series is a cheat sheet of sorts that you can refer back to as needed. I hope you find this a helpful series.
Variables
The first thing you will ever hear in programming is that "a variable is a container." We use variables to store data. In JavaScript, we use var to denote a variable. Here is an example:
var playerName = "Jesse Freeman";
There are three basic types of "primitive" types:
- Strings – this is text and is always put into quotes
- Numbers – these are numbers and can be positive, negative, whole number, or fractions
- Booleans – this is a true or false statement. Also, you can use the value 0 for false or 1 for true as well.
The most common thing you would probably want to store in a game would be things like the player's name, their score, and whether the player is alive or not. Here are some examples:
//String
var playerName = "Jesse Freeman";
//Number
var score = 0;
//Boolean
var isAlive = true;
In addition to these three examples, you can store anything inside of a variable. JavaScript is a dynamic language which means you can start a variable as a string then change it to a number at any time. However, primitive types can only store one value at a time. To keep more data in a variable, we'll need to look at more complex data structures.
Arrays
Arrays are similar to variables, but they can contain more than one value. Think of arrays as lists. In games, we could use arrays to keep track of items in the player's inventory. Here is how you set up an empty array:
var inventory = [];
Likewise, you can also create an array with items inside of it like so:
var inventory = ["item0", "item1", "item2"];
In this example, we have 3 strings inside of the inventory array, but we could have numbers or booleans as well. To get the value of an array, we have to access its index. This is a unique ID related to the position of the item in the array. In JavaScript, arrays are zero-based, so the first item is always index 0. Here is an example of how we would get the value of the first item:
inventory[0];
As you can see, we reference the array itself and use brackets to supply the index we want to access. Arrays also have specific actions called functions, which we'll learn about later. These functions allow you to add and remove items from the array. For example, we can use push() to add a new item to the end of an array:
inventory.push("item4");
You can also get the total number of items in an array like this:
inventory.length;
Notice that length doesn't have parentheses at the end. That's because it's a property of an array. The array's length value is part of the array itself and will always return how many items are in it. If we looked at the length, it would return 4 since we added "item4" above. However, remember that if you wanted to use this to find out the last value of the Array, you would need to subtract 1 from it since the starting index is 0. Here is how you get the last item in the array:
inventory[inventory.length-1];
Arrays are incredibly versatile and are used to hold lots of different kinds of data structures. One of the most common is a table-like structure with rows and columns. This is the basic structure we would use for tilemaps. When we have an array with nested arrays for values, we call it a 2D Array. Here is an example:
var map = [
[1,1,1,1,1],
[1,0,0,0,1],
[1,0,1,0,1],
[1,0,0,0,1],
[1,1,1,1,1]
];
This simple map example uses two tile values: 0 for empty and `1' for solid. If we were to visualize this map, it would be a square room with a solid block of right in the middle. Accessing the value of these tiles is similar to how we did with our inventory array. Let's say that we want to get the center wall in our room. Here is how we would access it:
map[2][2];
One way to understand how to access data in a 2D Array is to remember that the first index is the row and the second index is the column like this:
map[row][column];
Remember that arrays can contain any primitive type. So a nested array might not necessarily store numbers. They could also have strings or even booleans.
Variables and arrays are the cornerstones of programming, and once you get your head around how they work, you can begin building event more complex data structures.
In the next post, we'll cover how to create objects and functions, so you can build more complex logic.
If you found this helpful, please give it a 👍 and leave a comment. You can also follow me on Twitter (@JesseFreeman).