JavaScript in the Console
These exercises will familiarize you with writing JavaScript, using the console. Open it now. Google open javascript console if you don’t know how.
Let’s get started! Scroll to continue.
Strings and Variables
Type this into the console, then press Enter/Return:
console.log("learning javascript");
You logged the string "learning javascript" to the JavaScript console — so, below the statement you entered, that string was written, without quotes. Below that, the value undefined was written. Let’s not worry about undefined yet. You’ll see it every time you use console.log().
console.log means write it out, in the console.
Scroll to continue.
Strings and Variables
Type this into the console, then press Enter/Return:
let goal = "learning javascript";
Next, type this into the console, then press Enter/Return:
console.log(goal);
You made a variable ! let is a JavaScript keyword, signaling that a new variable is being created. goal is the variable name in this case. The value of the variable comes after the equals sign — you assigned the value "learning javascript" to the variable goal.
Then you used the console.log() command to write the value of the variable.
Scroll to continue.
Strings and Variables
- Use the
letkeyword and create a new variable. - Put the equals sign after the variable name.
- On the right side of the equals sign, write a new string. You must put a string inside quotation marks!
- Press Enter/Return.
- Use
console.log();to write the value.
Did you get any error messages in the console? One of the benefits of practicing JavaScript in the console is that you get instant feedback. Type it over again until you get it right. You're training your mind as well as your fingers.
Make some more variables with string values. What happens if you try to assign a different value to the same variable?
Scroll to continue.
You should be typing JavaScript and trying it out in the console while you’re scrolling through. Now look at a console example — yours should look similar!
Strings and Variables
You might not have tried one of the things shown in that screenshot: merging two strings together. Let’s do it now!
let goal2 = "eat more";
let food = "healthy food";
console.log(goal2 + " " + food);
Press Enter/Return after each line.
Using the plus sign to join strings together is called concatenation. It's an easy way to plug variables into a sentence, like Hello, _____. Today's weather is _____.
Go ahead — try to make that sentence with two variables.
Scroll to continue.
Strings and Variables
Right there, telling Mary Poppins the weather, you have a core tool for programming a web app. By getting values from variables, we make a web page customizable. Try it and see!
Strings and Variables
Well, it seems you did not type anything on the previous page, or you forgot to press the “Submit Values” button. Scroll back and try it!
Was that cool? I think it’s very cool!
Did you notice that your values were logged to the console too? Usually we do not use console.log(); when we’re using JavaScript to collect and use values in web apps, but the console can still be useful for testing things and seeing error messages.
Scroll to continue.
Using Numbers
We will continue using the console to see how numbers work in JavaScript. We won’t do any high-level math, just some simple arithmetic. Type these, followed by Return/Enter for each.
5 + 5
15 - 5
10 * 5
100 / 10
No surprises there, right? Okay, but — this one may surprise you (type it and see): 20 + 2 * 10
Scroll to continue.
Using Numbers
You probably learned PEMDAS in school: the order of operations. JavaScript follows it strictly, so anything inside parentheses (P) is executed first. Then exponents (E), followed by multiplication/division (MD), followed by addition/subtraction (AS).
Try some math with and without parentheses in the console. If you’re curious about exponents, try some of these:
2**4
8**2
10**10
Scroll to continue.
Using Numbers
Now let’s store some numeric expressions in variables. We can use letters such as x, y, z as our variable names. Create three new variables, each with a different value that includes a math operator such as +, -, *, or /.
Now use console.log(); and combine two or more variables inside the parentheses. Log three or four different combinations. Example:
console.log(x + y);
Scroll to continue.
What you should be noticing as you practice with numbers is that the expression on the right side of the equals sign is always evaluated down to its result, to be stored in the variable, on the left side of the equals sign.
You can’t store 2 + 2 — what is stored is 4.
End of Part 1
I hope you’ve learned to feel comfortable using the console to play with JavaScript, putting strings and numbers into variables and using console.log(); to write out results.