Learn To Code Part II: Working With Variables

In our second “Learn to Code” lesson, we’ll be taking a look at how to actually work with the variables and data types we learned about in the first lesson. Get excited—it’s time to put your new knowledge to work!

These lessons work best with the video, which you can see above, but we’re also providing text for reference below. Even if you do prefer to read, the videos will be more explicit and demonstrate how to do everything we’re discussing. If the text seems a bit too complicated, be sure to watch the video.

Creating A Variable Statement

We’re going to create a variable statement so you can see how useful variables can be. Everything we’ll be doing in this lesson will take place between the script tags you created in your myscript.html in the previous lesson. First we’re going to create four variables and then we’re going to use them to make a sentence. Here are the four variables you want to create:

var myName = “Adam”;

var foodType = “apples”;

var numberEaten = 3;

var numberTotal = 7;

You don’t have to set their values to what you see above. For example, if your name is Melissa then you might want to set the value of the myName variable to “Melissa” instead. If your name is really terrible and embarrassing (e.g. Herpe), it’s okay if you use mine. Anyway, let’s make a new variable called myStatement and combine our four variables to make a sentence. To do that we just set myStatement like this:

var myStatement = myName + ” ate ” + numberEaten + ” ” + foodType + “.”;

You’ll notice that I added some words and spaces to make it a coherent sentence and a period so it’s properly punctuated. You can assemble this sentence however you’d like, but the above example will give you something that works well. Now, let’s test it. Use the alert() function to view what we came up with:

alert(myStatement);

What you should see in the alert is: Adam ate 3 apples.

Okay, great, so you just wrote a useless sentence and didn’t even use one of the variables. Now what? Let’s do a little math. Try this sentence:

var myStatement = myName + ” ate ” + numberEaten + ” ” + foodType + “, leaving ” + (numberTotal – numberEaten) + ” ” + foodType + ” left over.”;

What just changed? Well, we altered the statement a little bit to also inform the user of how many apples were left over after you or I had our way with the apples available to us.

The important thing to notice here is the part of the code that says (numberTotal – numberEaten). When you add a string variable to practically anything (even a number), it creates another string. If you add two numbers together, it actually does the math (meaning 2 + 3 will equal 5 and not 23). Because we have other strings in the mix, we need to make sure this mathematical operation is carried out as maths first. By putting the mathematical statement in parenthesis, the computer will know to perform that operation first before considering it part of the big long string variable we’re creating. Obviously we’re not adding these two numbers together, but the same rules apply for all mathematical operations.

With the changes to myStatement made, alert(myStatement) should now show: Adam ate 3 apples, leaving 4 apples left over.

That’s all we’re really going to cover today, but before you call it quits be sure to change the contents of your variables and see how myStatement automatically updates when you reload the page in your web browser. This is your first small look at what makes programming so useful. Tomorrow things are going to get a bit tougher, as we’ll be looking at arrays—a more complex kind of variable—and logic statements and loops. Stay tuned!