Your Favorite Games
Incremental Lesson 4 - Introducing Variables
About this tutorial
In lesson 3, we explored the possibilities of classes and learned how to display objects side by side and centered. This lesson will focus on giving you the basic knowledge to start using javascript to store information and relay it to the user.
In our project, we have the spaces lined up to display information to the user. Now we're going to start taking information from the user and storing it so that we can modify it and return it to the user with the new value.
First things first: What is a variable? A variable is a name or identifier that can be used to store information, whether it be text, numbers, etc, so that it can be relayed back to the user or even modified in some way. Variables can be considered as the computer's short term memory; while the program is running, the values are stored, however when the program is turned off, the information is lost.
In this lesson, we are going to give the user a button to click, store the number of times that button was clicked, and give that information back to the user. Not exactly a game as yet, but a great leap forward.
Open your HTML file to edit and find your "clickables" div. In there, we will be adding a button. There are a number of ways to do this, but the simplest is to use an input object. Add this line in place of the text inside that div:
This new tag creates an input object. There are a number of these available to use, so we have to define which one we want. In our case, a button. Secondly, we must set a value for this button. The value is the text that appears on it. Once you've added this line, save and load the page in your browser. The button has appeared, and you can click it, but it doesn't do anything yet.
This is where our javascript comes into play. Open you javascript file into the browser.
Before we do anything, we need to "declare" our variable that will store our money. It is good practice to declare your variables to the browser so that it knows what the variable is for. On the first line of your javascript file, enter the following:
Similar to CSS, ; denotes the end of the line and the end of that particular input. We have, however, a few new elements here. "var" is used to tell the browser that the following information is a variable declaration. Whatever you want to call your variable comes next. There are a few simple rules, but as long as you keep your name simple and start it with a letter or an underscore (_), you'll be fine. Following your variable name is the = sign. This tells the browser that you are assigning a value to your variable. The 0 is simply your value. Javascript is pretty clever, and it know what a number is and what text is, so we don't need to spell that out for it.
So we have our first variable. Now we need a way to add to that variable every time it is clicked. This is where functions come in.
A function is simply a list of programmed instructions that the browser must run whenever the function is "called". You call a function to run the code within in. It our case, we'll make a function to gather money. Enter the following:
Note how the end of the line doesn't have a ;? That's because we need to denote the start and end of the function. Similar to CSS, use { } to tell the browser where the function starts and ends. Everything between these lines will be run whenever the function is called.
Now to add our money. We'll add 1 money every click for now. Inside your function, add the following line:
This line should be relatively simple to understand. You're telling the browser to take your money variable, then set its value. You can use a variable here, or a simple calculation, or both, to set a new value. We're telling the computer here to take the existing value of money and add 1. For example; if the value of money was 138 before the function was called, it would be 139 after the function was called.
So how do we tell the browser to call the function? Back to the HTML file we go! Find your input tag. We'll be adding a new option to this tag, "onclick", and use that to call the function. Change your input tag to the one below:
Note how the function name is the same here as it was when we wrote it in javascript? Function calls are case sensitive, meaning that if you have a capital letter in the function name, you have to have it in the function call. We also include the ()s (something that will be explained in a later tutorial) and end the call with a ;. We add the final symbol because we can add more than one function call. More on that later, however.
Save it all and load it up. The button now does something, but we can't see it! We need to show this information to the user now.
Head back over to your stats div. We'll replace the text here with two more divs:
Feel free to leave these on one line each, as they won't be containing anything inside them, at least for a while. Notice how they both have a label class? That means we can set their stylings together. Head over to your css file and create a new class call to set their display as inline block. You should know how to do this from a previous lesson.
Save everything and head back over to your javascript file. This is the last step now! In your function, we need to tell the browser to change the value of the money element. Javascript handles this a little strange. We need to load the object into javascript, then set the "innerHTML" value of it. Enter the following after your money variable change:
The first half of this line handles getting the element from the page. "document" is the page that is currently being display, and "getElementById" (case sensitive) tells javascript that you want to find an object with the ID in the brackets. Note that IDs are case sensitive, that no # is required, and that it must be contained within "". innerHTML tells the browser that you want to change the value of EVERYTHING contained within it. By using =, you will overwrite anything that is contained within the object, even other objects! It can have devastating effects if not used corrently, so proceed with caution, otherwise you might find half your page disappear if you select the wrong div. Don't worry, it's only short term memory, and the files won't be affected.
The final part of the line tells the browser what to put inside the object. In our case, we're using the value of the variable "money". Save everything and give it a whirl.
Congratulations! You've made your first function and relayed information back to the user.