This lecture discusses how to store data, how to compute values from data, and how to use changing values of data to affect program behavior.
It’s useful to be able to store values in the computer’s memory for later use. A variable is a name that refers to a location in the computer’s memory where a piece of information can be stored. A simple example:
The statement var meaningOfLife = 42; is called a variable assignment and it causes Javascript to do three things:
meaningOfLife to that location.Later, when the value of the variable is needed (in the print(meaningOfLife); statement) the central processing unit of the computer (sometimes called the CPU) determines the location in memory with which the name meaningOfLife is associated, goes to that location, and fetches the value it finds there, making that value available to Javascript. Because this value is used in a print statement, Javascript prints the value 42.
This syntax should look familiar. Recall the syntax for defining a function:
var sayHello = function() {
print( "I say hello." );
};Both the variable and function definition follow the same pattern: the keyword var followed by a name, an equal sign, then either a value or the rest of the function definition, and finally a semicolon.
We’ll see soon how to use variables to compute and store values. But one important use of variables is to change the behavior of code. First, we write the code in terms of some variables. Changing the values of those variables then changes the behavior of the code. The example below shows how this works. First, run the code. Then change the value of x to 60 and y to 120 and run the code again. How does the behavior of the program change?
In the previous example, there are several lines of code that include the symbols //, followed by some text in English. This text is a comment intended for human beings to read; the // indicates that the Javascript interpreter should ignore whatever text occurs afterwards on that line. The liberal use of helpful comments is a hallmark of an experienced coder, and code without comments should be considered bad code.
Comments explain code at a high-level in a way that is helpful when the code is modified or adapted, for either the original coder, or the next maintainer of the codebase.
Variable names are sequences of letters, digits, and underscores. The first letter cannot be a digit, and variable names cannot contain spaces. Javascript is case-sensitive: uppercase and lowercase letters are considered to be different characters in variable names, so that the names meaningOfLife and Meaningoflife refer to different variables. You should choose variable names that are descriptive of the value that will be stored.
By convention, letters appearing in variable names in Javascript are mostly lowercase, and variable names start with a lowercase letter. If you want to make up a variable name from multiple words, use capital letters for each new word. (Some programmers call this “camel case”: meaningOfLife. Other languages, like Python, use underscores to separate words, but this is not the time to strike a bold blow for independence – you should follow Javascript conventions in your Javascript code.)
You can use Javascript to compute.
The plus sign is called an operator. An operator takes one or more operands, computes a result, and makes that result available to Javascript for further use. In this example, the operand on the left is 18, and the operand on the right is 24. An expression is an operator and its operands; we say that the expression can be evaluated to give a single value. In our example, the expression is 18 + 24; when evaluated, this expression’s value is 42, which we then assign to the variable sum. The second line of code then prints the value of this variable.
If we are only interested in printing the sum of 18 and 24 and not in storing the sum for future use, then we can combine the above two lines of code.
In this example, the parameter to print is an expression that is evaluated and the result of which is printed.
Similarly, an expression can be an operand to an operator:
print( (3 * 6) + 24 );Here, the expression (3 * 6) is the left operand to the operator +.
The character * denotes multiplication in Javascript, to avoid confusion with the letter x. If Javascript needs the value of an expression, Javascript computes that value. In this example, the value of the expression (3 * 6) is needed before the addition can be done, and so the value 18 is computed first, by the multiplication operator *. That value, 18, can then be used as an operand to the addition operator.
Arithmetic operators such as +, -, *, and / (division) follow the same order of operations as you are used to from mathematics. * and / have higher precedence than + and -, meaning that they are evaluated first. Operators with the same precedence are evaluated left to right. Parentheses make the order of operations explicit. When in doubt, use parentheses to make your code as easy to read as possible.
For example:
The arithematic operators work for integers (… ,-2, -1, 0, 1, 2, …) and floating-point numbers (1.3, 2.5, 7.391, etc.). For example, if we divide two integers 5 and 2, Javascript will return a floating-point number.
+, -, *, /, %The operators defined on integer and floating-point numbers are
+: addition-: subtraction*: multiplication/: division, either integer or floating, as just discussed%: modulus, which gives the remainder of dividing two numbers. 9 / 4 is 2 with a remainder of 1, so 9 % 4 equals 1.The equals sign we saw earlier to assign a value to a variable is not the same as the equals sign you see in mathematics.
In mathematics, the equals sign is used to write down facts: the expression or variable on the left-hand side of the equation is now, and always will be, equal to the expression or variable on the right-hand side.
In mathematics, x = 5 is a fine equation. So is x = 6. But if I gave you both equations, you’d say I screwed up, because then x would equal both 5 and 6, and it just can’t. But in Javascript, the following works just fine:
Notice that we declared the variable x first, on a separate line, using the keyword var; this informs Javascript that x will be a variable. Declaring the variable reserves space in memory for values of that variable. Previously, we have combined decaration of the variable with setting the variables value into a single line of code.
The = operator in Javascript does not mean “mathematically equals.” In Javascript, the assignment operator, written with an equals sign, does two things:
So the first line of code copies the value 5 into the variable x. The second line of code copies the value 6 into the variable x. When the program is finished, x has the value 6.
Here are a few statements that wouldn’t work in mathematics, but do work in Javascript:
In mathematics, x = x + 1 would mean something like “x is the number that is one greater than itself”. There is no such number.
In Javascript, there’s no problem. Evaluate the expression on the right-hand side. Fine—because x has the value 5, we know that x + 1 evaluates to 6. Assign that value to the variable on the left-hand side. Fine—now the variable x has the value 6.
When you see or write an equals sign in Javascript, do not think “mathematically equals.” Say in your mind, “assignment operator.” Compute the value on the right-hand side. Put the computed value into the variable on the left-hand side. That’s all.
Will the code 5 = x work in Javascript? No. The left-hand side operand of the assignment operator must be a variable name. 5 is not a variable name.
Have a look at the code below and predict what the output will be. Then run the code to verify your answers.
The first two lines assigns values of 1 and 2 to the variables x and y, respectively. The third line assigns to the variable z the sum of x and y, so z is assigned the value 3, which is then printed on line 4. On line 6, we assign the value of x to 2. When we print z, we see that z still has the value of 3. This is because z has the value 3, not x + y. The variable z knows nothing about the variables x and y or how it got the value 3 – so any changes to the variables x or y after z has been assigned has no impact on z.
We’ve seen that the values of variables can be used to control the effect of code; in the example of the smiley face above, changing the values of x and y changes where the smiley is drawn on the screen.
A picture can be moved on the screen in the following way:
You know how to do most of this. To clear the screen, you can use the function call background(). The only thing you don’t know how to do is step 5. We’ll learn more about techniques to repeat code later, but for now we’ll use a simple trick. If you write a function draw(), then that function will be called repeatedly by the browser. (In general, this is not a good way to repeat most things. Use draw() only when you are building an animation.)
Let’s just see part of this first, without the drawing parts:
This code has three parts. First, the variables are created with initial values. Then the draw function is called. The browser will call draw over and over again. Within draw, we print the x value, and increase the value of x. Run the program and see what happens.
It’s important that the variables are defined outside of draw, since otherwise their values would be reset each time draw is called.
Objective: use a draw function that is called repeatedly by the browser, and some variables that change values, to animate a moving shape.
Write a program to draw a smile that moves from left to right across the screen. (Feel free to copy in whatever code you need from previous examples, including the one where the smile is drawn.)
Here is a solution.
As we saw in the first lecture, there are many different types of data to store. Numbers are one type; letters of the alphabet are another. The string type of data represents one or more letters of the alphabet, symbols (such as @ or ~), or digits.
When you type a string value into Javascript, it must be surrounded by quotes, so that the string does not look like the name of a variable.
var lastLetter = "Z";
print( lastLetter );We call "Z" a string literal, since it should be interpreted by Javascript literally as the character “Z” and not as some variable name or anything else. (In x = 42, the number 42 is an integer literal.)
print( "hello" );The quotes say that "hello" is a string, and not a variable name. More examples:
The quotes just identify the data as a string; the quotes aren’t part of the string.
Javascript is unusual in that you can use either single quotes or double quotes around the string, as long as you use the same kind of quotes before and after a given string. So the following lines do the same thing:
print( "hello" );
print( 'hello' );But print( "hello' ); would be an error.
The plus sign, +, behaves differently depending on the types of the data that are on either side of it. If there are integers on either side, the plus sign is the integer-addition operator, and it adds the two integers to get another integer. If there are floating-point numbers on each side, they are added to get another floating-point number.
print( 3 + 4 ); // prints 7
print( 3.1 + .041592654 ); // prints 3.141592654What if there are strings on each side? Then the plus sign is the string-concatenation operator. Concatenation means to “combine two strings together”.
There are a few special functions that convert between types of data: Number and String are useful for the types of data we’ve seen so far.
A function is itself a data type in Javascript. You can think of the name of the function as a variable that contains the address of the function’s lines of code. What this means is that other variables can also store a reference to the function. Here is an example:
Notice that the keyword function creates a new function in the function header var sayHello = function() {. A reference to this new function is then stored in the variable sayHello. Later, the value of the variable sayHello, which is a reference to the function, is copied into the variable s. Now both variables sayHello and s contain references to the same function.
!There’s one more basic type of data, which we’ll use in the next lecture, called a boolean. There are only two possible values: true and false.
There is an operator that computes the opposite of a boolean value, !. So the value of the expression !true is false, and the value of the expression !false is true.
When a function is called, the program counter jumps to the first line of the function body, some lines of code are executed, and then the program counter returns back to the point of call. During the process of running those lines of code, a value might be computed and made available.
An expression is anything that computes a value and makes it available. If you wanted to print the square of the number 3, you could write print(9), or your could write print(3 * 3); the expression 3 * 3 computes the number 9 and makes it available for further use. What if you wanted to print the square root of 25? You could write print(5). Or you could write print(Math.sqrt(25)); The function call Math.sqrt() is itself an expression that computes a value and makes it available. (For now, think of the period in the function name as just part of the function name. We’ll see later that it has a special meaning.)
You can use an expression anywhere a value is needed. For example, you could store the results of computing an expression in a variable x = Math.sqrt(25), use the results as part of another expression x = 4 + Math.sqrt(25), or use the results as a parameter to another function call print(Math.sqrt(25));.
The Math object has other built-in functions that return values. Math.random() returns a random number between 0 and 1.
Notice that to ensure that we got the same random color when drawing the outline of the face and the arc for the mouth, we saved the random values we first computed in variables r, g, and b, rather than calling random again later.
Here is a simple simulator for a drone robot; we’ll use it to explore a few concepts. There is some code at the top, simInit, that sets up the simulator; ignore this part. After that, the function forward() is called four times to drive the robot forward four squares. Try the code now, and experiment with the other robot command functions, left() and right().
Let’s add a wall to the world, using the addWall(x, y) function that places a new wall at location x, y.
Run it. Hmm, the robot just crashed through the wall. Incredible hulk mode! To fix this bad behavior, we will need another function, blocked(). The blocked function does not cause the robot to move, but it does return a value, indicating whether or not there is a wall in front of the robot.
It’s important to know what type of values we are working with. We’ve seen a function that returns a number value, Math.sqrt(). The blocked() function returns a boolean value.
The following code prints out false, since that is the value that blocked() returns before the robot has driven anywhere. Change the code by either adding a wall or modifying the order of lines of code so that the line of code that prints the return value of blocked() prints true.
There is some repeated code in the previous example: the robot goes forwards many times. It would be nice if we could somehow indicate that some lines of code should be executed many times. In fact, there is such a construct: a loop. Here is the basic structure:
while(condition) {
// lines of code to repeat
}The condition is a boolean value: it must be either true or false. When the program counter reaches the while instruction, one of two things happen. If the condition is true, then the next lines of code (inside the while loop) are executed. If the condition is false, then the program counter skips the code in the braces and goes on to whatever line of code is after that.
Write a while loop that causes the robot to go forward as long as it is not blocked by a wall. A few hints. The body of the while loop is simple: it should just have a line of code that makes the robot go forwards. The condition in parentheses is a bit trickier: you want the robot to go forwards as long as it is not blocked, but you only have a function call that tells you if the robot is blocked. Remember the boolean negation operator?
Driving forward until reaching a wall might be a useful higher-level behavior. Write a function driveToWall that causes the robot to drive forwards until it reaches a wall. Test the function by having the robot drive to the East side of the screen, turn left, drive to the North, turn left, drive to the West, turn left, and drive to the South. (Note: blocked() returns true at the edge of the screen, as well as at walls.`)
You might notice that there is some repeated code in your solution. Here’s a solution.