Student Instructions

What's happening in this lesson and next

We are going to take the next two lessons to learn about how to work with variables and then incorporate them into our clicker game in order to keep score. Here's the breakdown:

This lesson:

• Moving memory around: Get your hands dirty with some of the basic mechanics and properties of working with variables.

• Basic mechanics: To keep things simple we're going to complete some bare-bones examples so you get the basic ideas behind creating and using memory through variables. We'll primarily just be displaying text in the console rather than enhancing an app for now.

• Establishing a good "mental model" for working with variables: We all want to make cool apps, but having a good mental model before you get in too deep will allow you to go further and faster later on.

• Getting past misconceptions: Understanding the typical pitfalls of learning variables for the first time, combined with establishing a good mental model will make working with memory and variables in the future much easier.

Next lesson:

• Adding variables to our apps.
• Understanding when and where and to create variables so you can use them the way you want.
• Useful things you can do with variables in apps.
• Making decisions based on variables.

The Basic Mechanics of Variables

Next section acquaints you with the bare-bones basic mechanics of using variables in programs, creating, assigning a value and displaying the value to the screen or console, so you can see what's going on.

You will:

• Know how to create a variable and assign it a value.
• Know how to display to the screen.
• Debug common problems with creation and display.

Continue

Student Instructions

Questions to Consider

• What are variables used to do?
• How do you create a variable and assign it a value?
• What can go into a variable?

Student Instructions

Variables Toolbox

Let's get started with the most basic example of using and controlling the computer's memory with variables. The toolbox has a couple of new commands for working with variables.

We've given you some starter code that does three things:

1. Creates a variable called score
2. Assigns the value 0 to score
3. Displays the value of the score to the console (see hint below about quotes)

Do This:

You're going to add another variable, assign it a value, and then display it to the console. Use the starting code as a model for what you need to create now.

• Create a new variable by dragging out the var block.
• Change the name of the variable from the default x to lives (see animation at right).
• Set the value of lives to be 3.
• Add console.log messages to show the value of lives.

The output in the debug console should look like this:

Student Instructions

Do This:

We've given you some code with some errors in it. Look at the error messages and try to figure out the problem.

• Run the program.
• Locate and fix the error.

When you get it right the output to the console should look like this:

As a reminder, App Lab gives you hints about errors in two ways:

• Hover your mouse over the yellow triangles or red squares next to line numbers in the code to see what they say.
• As usual, the Debug Console will also tell you about any errors while your program is running.

Student Instructions

Debugging Variables

There is a simple command called write in the UI Controls toolbox that is a fast and easy way to display text in the app itself. The way you use it is very similar to console.log. Let's debug another problem only using write instead of console.log.

You may have already run into this problem! But it's worth mentioning again. To display the value of a variable you should not use quotes. Notice the difference between these two statements - the comments next to each line explains the differences:

 write("score");  // will display the literal characters s-c-o-r-e
 write(score);    // will retrieve the value of score and display it

Do This:

To solve these problems you should only add or remove quotation marks. Run the starter code Locate and fix the problems

GOAL: Make the app display what's shown at right by only adding or removing quotation marks from the code given.

Student Instructions

Create and Assign At Once

It's so common to want to create a variable and give it an initial value, that JavaScript has a shortcut that lets you create and assign with one line of code like this:

You'll also see a new block in the toolbox for this (see right).

Do This:

We'll just quickly practice using this form of variable creation and assignment. The code you write will achieve the same thing as the previous level in fewer lines of code.

• Create a variable called lives and assign it the value 3 using the new one-line version of this command. (See animation at right.)

• Add console.log statements to display the value of lives just as before.

• The output in the console should (again) look like this:

  

Student Instructions

Give Text Mode a Try!

The block-based mode of programming is useful for getting code into your app fast and error free. But sometimes those little tiny edits are a pain. Use text mode instead! Text mode is designed to make typing code fast and easy, and it also gives a lot of help to make your code error free.

Let's re-create these variables again, but explore some features of text mode this time.

Try Each of These 3 Things

We've given you the first two lines of code in a program. Expand each box below and try what's suggested - each builds on the previous one, so you might want to go in order.

Student Instructions

Controlling Memory - Other ways to store values

Tip: Say "gets" instead of "equals"

We know that the = sign, in a JavaScript statement like a = b, isn't a statement of mathematical equality. It's an instruction to move memory around. We'll talk about how to do mathematical equalities in JavaScript soon, but for now we'll just focus on the meaning of =.

One tip is to read a statement like var score = 0 as: "The variable score gets the value 0" or maybe just "score gets 0" to be brief. Another example: a = b + 7 should be read as "a gets b plus 7"

When you read the = sign as "gets", and say it out loud that way, you'll prevent confusing yourself, and other programmers will know what you're talking about.

As we're about to see there are other ways to store values in variables besides just hard-coding single numbers. But in all cases, even when it's more complicated, using the word "gets" when you see a single = sign will help your mental model of what's happening.

In the next several levels we're going to see how to:

• Assign the result of an arithmetic expression.
• Assign the value returned by randomNumber.
• Assign a value given by the user through promptNum.

Continue

Student Instructions

Variables and Arithmetic Expressions

A common thing to want to do is store the result of an arithmetic expression. The 4 basic arithmetic operations + - * / are available.

Here is a quick table that shows the arithmetic operators with code examples [click to expand]

operation	block	text	example	result
add		`+`	`result = 7 + 3;`	stores 10 in result
subtract		`-`	`value = 7 - 3;`	stores 4 in value
multiply		`*`	`score = 7 * 3;`	stores 21 in score
divide		`/`	`bonus = 7 / 3;`	stores 2.3333 in bonus
parentheses	none	`()`	`avg = (99 + 85 + 93) / 3;`	stores 92.3333 in avg

Misconception Alert

When you have a statement like result = 5 + 7; realize that this does NOT store a mathematical expression in the variable.

Rather, with this instruction you are asking to compute 5 + 7 and THEN store the answer (a single number) in the variable.

Do This:

GOAL: the goal here is mostly to acquaint yourself with typing arithmetic expressions - the answers to the questions below are less important, and should be used as interesting things to investigate.

We've given you some starting code with 5 statements similar to ones in the table above. Add console.log or write statements to display the values of each of the variables. Experiment with arithmetic expressions, try to make really big and really small numbers.

Things to Try: Using multiplication: what's the biggest a number you can store in a variable? * How many digits are in the biggest number before it starts using scientific notation? Using subtraction (or multiplication with negative numbers): what's the lowest number you store? (low means a negative number with a lot of digits) * Using parentheses make a crazy-big arithmetic expression.
* NOTE: composing arithmetic expressions is much easier in text mode, and is actually almost unreadable in block mode. Try doing this in text mode.

Student Instructions

Text and Variables Living Together!

Sometimes it’s useful to display text along with the value of a variable in the same line of output. To do this you use + to attach a variable onto a literal string of characters. Here is an example:

Notice that the + operator has two different meanings in JavaScript depending on what type of data you're applying it to. Click the explanations below for more details.

TIP: It's common to want to sandwich a variable between some text when displaying it. You can string together multiple pieces of text and variables using the + operator. For example, you can do this:

On the next screen we'll have you play with this a little bit, but you'll write statements to display a mix of text and strings from here on out.

Do This:

We have given you the starting code shown below. You should modify the write statement on line 3 to combine text and variables together to make the app display a single line of text as shown.

starting code	output

Student Instructions

Expressions with Variables

Arithmetic becomes much more interesting when we use other variables in our expressions. For example you can do this:

Mental Model 

The end result of an expression with variables is the same as one without. The major difference is that values are retrieved from memory in order to do the calculation rather than simply hard-coded.

Mental Model Check

Watch the animation above. To compute the expression the computer will: first retrieve each of the values of the variables used in the expression; then the arithmetic expression can be evaluated; finally the computed value can be stored in memory.

Do This:

• Scenario: In the starting code we have provided you with variables that might be the kinds of things you would keep track of in a game: totalTime, points and lives. (see right).

• Right now the totalScore is just set to 0. We want you to compute a final score so that the person is rewarded for having a lot of points and lives, but penalized for taking a lot of time.

• Write an expression that calculates the player's total score and stores it in the totalScore variable. The calculation is: the player's points times lives divided by the total time.

• For the values provided the app display should look like this:

Student Instructions

Other Ways to Assign Values to Variables

Programs become much more interesting when the values in variables change while the program is running. We can also assign to a variable the value returned by a function. For example:

Because the randomNumber function evaluates to a number it means we can treat it as though it were a number. We've used it before by just "plugging it in" to some function that needed a number as a parameter like:

Because the randomNumber function generates a new and different number each time you call it, one thing we could not do before we had variables was generate a random number, and use that same number for two different things in a program. Now we can.

Do This:

Write a program that simulates the rolling of two dice and reports their individual values as well as the sum. The program should: Generate two random numbers between 1 and 6 and store each result in its own variable. Display the individual values of the two dice. Display the sum of the two dice (see right). Every time you run the program the result will be a little different.

We have given you starting code that shows what to do for the first die. The rest of the code is up to you! When you're done the output in the app display should look like what's above.

Student Instructions

Getting User Input - A Simple Calculator

Programs become even more interesting when we can interact with the user. A short way to ask a user for a number is with the promptNum command, which pops up a dialog box asking the user to enter a number.

This very simple app demonstrates a new behavior: getting input from the user. You will write code to re-create this program on the next page.

Do This:

• Click "Run" on the app.
• You will be prompted for two numbers, one right after the other.
• See what happens.
• Re-run the program and enter different numbers until you get the idea.

Click Finish to move on.

Student Instructions

Assigning User Input to Variables

Let's use promptNum to make a simple calculator. The promptNum command appears in the variables toolbox because it's typically used as a way to get a value from the user that you want to hold on to while the program runs.

promptNum is similar to randomNumber in that it is a function whose return value evaluates to a number. The difference here is that promptNum pops up an input dialog box and waits for the user to type a number. Once they do and hit "OK" the number they typed is returned and we can store it in a variable to use in our programs.

Do This:

Write a program that acts as a simple calculator. (An animation of the end result is shown at right.) Ask the user to enter a number. Then ask the user to enter a second number. Display the result of some* calculation. * The example shows division but you may choose something else if you like.

We have given you starting code that shows you how to get the first number. The rest of the code is up to you.

Student Instructions

Variable Reassignment - Part 1

So far we have only set a variable's value once. But it's called a variable for a reason - its value can change (or vary) throughout a program. This is useful and necessary for keeping track of things like a score in a game.

To re-assign a value to a variable all you have to do is maintain the mental model of what's happening:

• Variables are containers for information.
• The = sign is an instruction to set the value.
• A series of assignment statements (see example to right) is a list of instructions to execute one at a time - it's not a series of equations that define the state of the world.

Do This:

• Make a prediction.

  The code on the following screen looks like what is shown at right. Study it and make a prediction about what will happen when you run the code. What will the values of a and b be at the end of the program?

• Add console.log statements.

  Prove it to yourself by adding console.log statements at the end of the program to find out what the value of a and b are.

• NOTICE: in the code above, after the variable a has been created using var, to change a variable's value, you only need to refer to the variable by its name. The word var only needs to be used once - when the variable is created for the first time.

• It's a common mistake to use var everytime you want to use a variable but just remember var means CREATE a new variable. When you create a new variable it will lose its old value. We'll look at errors related to this later.

Student Instructions

Student Instructions

Variables - The Mental Model

A piece of code like the one to the left can cause confusion to early programmers (but not you!). Below we show you a technique you can use to trace out what's happening in memory as you mentally go through the code line by line. Even pros do this to verify for themselves that the code is doing what they think it will. This is also a form of making a prediction which really helps you see and learn what's happening faster.

Here's what you do. You know that the code involves two variables (or two chunks of memory) so on a piece of paper make two boxes to represent the containers for values, then fill in the containers with values as you trace out each line of code.

Code / Instruction	State of Memory (write on paper)
Before code is executed
Create a variable called a that gets a value of 3.	Label one of the containers a and write 3 in the box.
Create a variable called b and it gets a value of 7.
Copy the current value of b into a.	Scratch out the old value in a - its value is being changed -- write in the new value.
Copy the current value of a (which is now 7) into b.	NOTE: the value of a changed on the last line! So you must use the value that's currently in a for this line. Also note that even though it's the same value (7) you're still instructing the computer to put a value into memory, and the computer will just follow whatever instructions you give.

You'll get a chance to practice this technique in the next few challenges.

Continue

Student Instructions

Variable Re-assignment - Part 2: Updating Values

All of our examples so far have shown how to set the value of a variable by using combinations of numbers and other variables. But what if you wanted to do something like add 10 to the current value of a variable?

Because updating the value in a variable is just moving memory around, the process has to go something like this: Read the current value of a variable. Add 10 to it. * Store the new value back into the same variable.

The technical term for this is called variable re-assignment - when you change the value of a variable based on its current contents. To increase the value of num1 by 10 you actually need to do this:

num1 = num1 + 10;

The diagram at right shows a picture of what's happening (it assumes the value of num1 is 7 before the line is executed). It's actually very similar to what happens with plain old arithmetic: compute a value, then store it in a variable. Because the computation has to happen before storing the result in a variable, there is no contradiction here.

Do This:

• Make a prediction. We start you out with some code again (see below).

  

  Trace the code and predict what you think will be printed to the console. (NOTE: We're serious about this "make a prediction" stuff. When you force yourself to make a prediction about what code will do you will learn faster since it triggers you to apply your mental model of what's happening.)

  • Run the program to see if you were right.

  • Add a console.log statement.

We've left you with a little bit of programming to do: add a console.log statement at the end of the program to see the last value of someNum to see if your full prediction is correct.

Student Instructions

Moving Memory - Challenge 1

The next several levels all present challenges related to "moving memory" around in your program.

GOAL: Set the value of the variable(s) to make the console.log statement display what it's supposed to.

Rules:

• You may only add lines of code that re-assign values of variables provided.
• You may only use assignment (=) and arithmetic operators (+ - * ).
• You MAY NOT type or introduce any numbers.
• You MAY NOT add or create any new variables.
• You MAY NOT change or alter the console.log statement at all.

Example:

Code Provided
The code you're given will have a few variables initialized to some values. The last line will be one or more console.log statements with a comment indicating what the expected value to display should be.
A Possible Solution
You need to add a line (or multiple lines) of code to re-assign the values in variables so the console.log statement displays what's expected. In this example we show a solution on line 5. Please note that there are several different things you could do. For example, you could go crazy and do something like: y = x + x + (x/x);. What you do is up to you.

Try this example yourself...

Student Instructions

Moving Memory - Challenge 2

Try another one!!

• Click through to see a new problem provided in the starter code.
• A reminder of the rules and example are below if you need to sneak a peek.

Reminder of the rules (click to expand)

GOAL: Set the value of the variable(s) to make the console.log statement display what it's supposed to.

**Rules**:

You may ONLY add lines of code that re-assign values of variables provided.

You may ONLY use assignment (=) and arithmetic operators (+ - * /).

You MAY NOT type or introduce any numbers.

You MAY NOT change or alter the `console.log` statement at all.

Example:

Code Provided
The code you're given will have a few variables initialized to some values. The last line will be one or more `console.log` statements with a comment indicating what the expected value to display should be.
A Possible Solution
You need to add a line (or multiple lines) of code to re-assign the values in variables so the `console.log` statement displays what's expected. In this example we show a solution on line 5. Please note that there are several different things you could do. For example, you could go crazy and do something like: y = x + x + (x/x);. What you do is up to you.

Student Instructions

Moving Memory - Challenge 3

Try another one. Here is the starting code:

var x = 2;
var y = 3;
// your code here

console.log("The value of x is: " + x + " (x should be 7)");

Reminder of the rules (click to expand)

**GOAL:** Set the value of the variable(s) to make the `console.log` statement display what it's supposed to.

**Rules**:

You may ONLY add lines of code that re-assign values of variables provided.

You may ONLY use assignment (=) and arithmetic operators (+ - * /).

You MAY NOT type or introduce any numbers.

You MAY NOT change or alter the `console.log` statement at all.

Example:

Code Provided
The code you're given will have a few variables initialized to some values. The last line will be one or more `console.log` statements with a comment indicating what the expected value to display should be.
A Possible Solution
You need to add a line (or multiple lines) of code to re-assign the values in variables so the `console.log` statement displays what's expected. In this example we show a solution on line 5. Please note that there are several different things you could do. For example, you could go crazy and do something like: y = x + x + (x/x);. What you do is up to you.

Student Instructions

Moving Memory - Challenge 4

Try another one. Here is the starting code:

var x = 2;
// your code here

console.log("The value of x is: " + x + " (x should be 8)");

Reminder of the rules (click to expand)

**GOAL:** Set the value of the variable(s) to make the `console.log` statement display what it's supposed to.

**Rules**:

You may ONLY add lines of code that re-assign values of variables provided.

You may ONLY use assignment (=) and arithmetic operators (+ - * /).

You MAY NOT type or introduce any numbers.

You MAY NOT change or alter the `console.log` statement at all.

Example:

Code Provided
The code you're given will have a few variables initialized to some values. The last line will be one or more `console.log` statements with a comment indicating what the expected value to display should be.
A Possible Solution
You need to add a line (or multiple lines) of code to re-assign the values in variables so the `console.log` statement displays what's expected. In this example we show a solution on line 5. Please note that there are several different things you could do. For example, you could go crazy and do something like: y = x + x + (x/x);. What you do is up to you.

Student Instructions

Moving Memory - Challenge 5

Try another one. Here is the starting code:

var x = 2;
var y = 3;
var z = 0;
// your code here

console.log("The value of x is: " + x + " (x should be 3)");
console.log("The value of y is: " + y + " (y should be 2)");

Reminder of the rules (click to expand)

GOAL: Set the value of the variable(s) to make the console.log statement display what it's supposed to.

Rules:

• You may only add lines of code that re-assign values of variables provided.
• You may only use assignment (=) and arithmetic operators (+ - * ).
• You MAY NOT type or introduce any numbers.
• You MAY NOT change or alter the console.log statement at all.

Example:

Code Provided
The code you're given will have a few variables initialized to some values. The last line will be one or more `console.log` statements with a comment indicating what the expected value to display should be.
A Possible Solution
You need to add a line (or multiple lines) of code to re-assign the values in variables so the `console.log` statement displays what's expected. In this example we show a solution on line 5. Please note that there are several different things you could do. For example, you could go crazy and do something like: y = x + x + (x/x);. What you do is up to you.

Try it yourself...

Student Instructions

Moving Memory - Challenge 6

Try another one. Here is the starting code:

var x = 5;
var y = 11;
var z = 4;
// your code here

console.log("The value of x is: " + x + " (x should be 2)");
console.log("The value of y is: " + y + " (y should be 6)");
console.log("The value of z is: " + z + " (z should be 8)");

Reminder of the rules (click to expand)

GOAL: Set the value of the variable(s) to make the console.log statement display what it's supposed to.

Rules:

• You may only add lines of code that re-assign values of variables provided.
• You may only use assignment (=) and arithmetic operators (+ - * ).
• You MAY NOT type or introduce any numbers.
• You MAY NOT change or alter the console.log statement at all.

Example:

Code Provided
The code you're given will have a few variables initialized to some values. The last line will be one or more `console.log` statements with a comment indicating what the expected value to display should be.
A Possible Solution
You need to add a line (or multiple lines) of code to re-assign the values in variables so the `console.log` statement displays what's expected. In this example we show a solution on line 5. Please note that there are several different things you could do. For example, you could go crazy and do something like: y = x + x + (x/x);. What you do is up to you.

Try it yourself...

Student Instructions

Wrapping Up Variables - This is Not Math Class

Hopefully you now understand the gist of working with variables. The major thing to remember is that every time you see an = sign it means that you are instructing the computer to set a variable to a new value.

The example to the right is something that definitely wouldn't make sense in math class, but you should be able to reason about it as a piece of code. Because it's code, you can also insert statements to display the value of variables as they change. You don't have to guess!

Do This:

• Make a prediction.

  As usual you should first look at the code given to you and reason about what it does. You should try to predict what the value of num will be after all lines have executed.

• Insert 3 console.log statements.

  Insert console.log statements into the existing code to display each value of num immediately after it's changed. (The animation below shows how to get started.)

  

• Was your prediction right?

  After you figure out the answer, if your prediction was off, try to understand why. Where was your misunderstanding?

Student Instructions

Can you figure out the values of a, b, and c?

Using what you know about variables and re-assignment you should be able to trace this code and keep track of the values of a, b, and c as they change. You should also have a sense of any possible errors that could occur.

Trace the code, and choose the option that correctly shows what will be displayed.