- In Firefox, you can find it under the Web Developer menu as "Web Console" (not "Browser Console), or by pressing Ctrl-Shift-K.
- Internet Explorer puts its console in one tab of the "Developer Tools" item of the browser menu, which you can launch by pressing F12.
The console should have a blinking cursor next to a ">", just waiting for you to start typing something. Type the following line, then press the "Enter" key.
2 + 2;
1 + 2 * 3;
(1 + 2) * 3;
Often, when we are working with expressions, we may want to store the result so that we can use it later. For example, when balancing your checkbook, you might keep track of several subtotals within your budget (entertainment, food, rent) in order to see where your money is going. You wouldn't want to have to add up each subtotal every time you compared rent money to gas money.
var result = 1 + 2 * 3;
In this statement, we do four things:
- Next we write the name of the variable (in this case, "result"). Variable names can be any combination of letters and numbers with no spaces between them, but they must start with a letter. Uppercase and lowercase letters mean different things, so dog and Dog are two different variables.
- Finally, we write the expression that will have its value assigned to the variable.
Our variable result now contains the value 7. If we want to use that value, we can just write the variable name into a new expression, like so:
21 * 3 / result
21 * 3 / 7
Once it's assigned, a variable holds onto its value until we reassign it. To reassign it, just use the = operator again. You don't have to write var this time, only the first time that you declare a variable (after that, the browser knows that it exists). So we might decide we want our new result to be 8:
result = 8
We can even reassign a variable to the value of an expression that includes itself, changing it relative to its previous value. For example, we might take the number that's currently in result, add some difference up or down, and save it back in the result for a running total.
result = result + .5;
var president = "Abraham Lincoln";
var route = 'Lincoln Tunnel';
Sometimes, though, we need to use both types of quotes inside of a string. If that's the case, we can escape the quotes that we want to go inside of the text by putting a backslash in front of them.
'"Four score and seven years ago," begins Lincoln\'s Gettysburg Address.'
Here, give it a try for yourself. In the following input boxes, there are some strings that haven't been escaped properly. As a result, they are going to break when the browser tries to run them. Add slashes before the quotes that need to be escaped, and the boxes will turn green.
var best = "It was the best of times.";
var worst = "It was the worst of times.";
var combined = best + " " + worst;
"It was the best of times. It was the worst of times."
var t = true;
var f = false;
Inspecting variables with typeof
var accountBalance = 123.45;
var remaining = "You have $" + accountBalance + " remaining in your account.";
"You have $123.45 remaining in your account."
In this case, the number will be converted to a string for us, and combined with the other strings into a single sentence. That's good! But sometimes this automatic conversion isn't what we want. If we add two values together, thinking that they're both numbers, but one is a string, they'll get combined end-to-end instead of added together. In this case, we wanted the value 3, but we're not going to get it.
var numeric = 1;
var text = "2";
var added = numeric + text;
typeof "this is a string"
var num = 2;
var text = String(num);
var text = "2";
num = Number(text);
var float = parseFloat(text);
Converting items to booleans is a somewhat more involved topic, and one we'll address in the next chapter. But first, we need to learn how to write scripts into our web pages, not just using the console.
var firstLegTime = 100 / 55;
var secondLegTime = 50 / 45;
var thirdLegTime = 230 / 70;
var totalHours = firstLegTime + secondLegTime + thirdLegTime;
var solution = "The total time required is " + totalHours + " hours";
The total time required is 6.2150072150072155 hours.