Javascript Print Console.log

JavaScript Exercise 01, 02: Output

In this exercise, you will learn where to write your JavaScript code, the JavaScript console. And your first command: console.log().

Exercise 1.1. Where to write your JavaScript programs? Your browser!

One of the advantages of JavaScript is that you don’t need to install anything to begin with. It’s already in your browser. You can write programs directly in Google Chrome.

Open Google Chrome, click three keys at the same time on your keyboard: Command + Option + I , for Mac; Control + Shift + I , for Windows. In the popup window, click on the Console  tab. This is your playground of JavaScript. It’s called JavaScript Console.

JavaScript Console in Google Chrome
JavaScript Console in Google Chrome

There are two more ways to open JavaScript Console:

  1. Click the Menu button on the top right of your Google Chrome, choose More Tools, and the click on Developer Tools. you will see the same popup window, just click on Console tab.
  2. Right click on your Google Chrome, choose Inspect on the popup menu, and then click on Console.

Exercise 1.2. What is a computer program?

A program is a collection of commands you give to a computer to execute. But computers are not so clever as human, they can only understand certain commands. The first command you will learn is “Console.log()“. As we mentioned that we are playing with JavaScript Console, this command tells to log something in the console, which is the same as to print something in the console. Try to type in following command in the console, right after “>”:

console.log("Hello, JavaScript.");
JavaScript Console.log Tutorial
JavaScript Console.log Tutorial

As you can seeing above, after pressing on the Enter key, Hello, JavaScript got printed out. That’s what console.log() does, it prints out whatever inside of its parentheses. The double quotes tell console.log() that it’s text(we call it string) that we want to print. And the semicolon means the end of this command, although it will works perfectly without the semicolon, I suggest you to keep it there.

So can we print number? Sure. Type the following code:

console.log(2016);

We have numbers. Can we do some arithmetic? Of course:

console.log(135 + 246);

You will get 381, which is the sum of 135 and 246.

Here are some arithmetic operators:

+ : Addition
– : Subtraction
* : Multiplication
/ : Division

Now you understand console.log(), let’s do more exercises.

Exercise 1.3. Exercises for console.log()

  1. Print out your name in the console.
  2. Print out the sum of 1 to 10.
  3. Type in the following code and explain how it works:
    console.log("I'm a " + "programmer");
  4. Print whatever you want in the console. Tip: if you want to write multiline command, use Shift + Enter to change line.

Exercise 1.4. Checkpoint

In this tutorial, you have learned:

  1. To open JavaScript Console for writing JavaScript code.
  2. To use console.log() command to print string(text).
  3. To use console.log() to print numbers and to do some calculations.

Exercise 1.5. Conclusion

Now, you have the first taste of JavaScript. It’s easy to write computer code, right? In the next practice, you will learn a different way to “print” a message.

If you have any question about console.log(), feel free to ask in the comment below.

JavaScript Alert Exercises
JavaScript Alert Exercises

JavaScript Exercise 02: Popup Window with Alert

In this exercise, you will learn your second JavaScript command: alert(). You can use it to send a message with a popup window.

Exercise 2.1. Revise and warmup

Print to the JavaScript console:

  1. “Practice makes perfect.”
  2. The result of 2016 multiplies 2020.
  3. Use “+” to combine two phrases: “The father of JavaScript is ” and “Brendan Eich”. Print the result to the console.

Exercise 2.2. Popup message with alert()

Let’s try another interesting command in JavaScript: alert(). Try the following code line by line.

alert("I'm a popup alert. Click Okay to exit.");
window.alert("I'm also a popup alert. We are the same.");

Animation demo:

JavaScript Popup Alert
JavaScript Popup Alert

The difference between console.log() and alert() is obvious, console.log() print in JavaScript console and you got a popup window for alert(). As we know, console.log() is capable to do arithmetic, what about alert()? Let’s find out:

alert(135 + 246);
alert(2016 * 2020);

There you go, we got the answers. So we can print string(text) and number, can we print them together? Try the following code:

alert("The sum of 135 and 246 is " + 381);

alert("The sum of 135 and 246 is " + 135 + 246);

alert("The sum of 135 and 246 is " + (135 + 246));

The result of the first command is exactly what we want. But for the second, you got this:

JavaScript Alert String Number

It doesn’t do the sum, but combine the two numbers. How is that happened? Actually it’s very simple. JavaScript does addition from left to right. So the first addition is: “The sum of 135 and 246 is ” + 135. Yes, JavaScript can add a number to a string, because a number can also be a string. For strings, addition means combination. So you got your first result: “The sum of 135 and 246 is 135”. JavaScript will use this result to do the second addition: “The sum of 135 and 246 is 135” + 246, again, the number 246 will be converted to a string “246”, therefore you got: “The sum of 135 and 246 is 135246”.

If we want to do the addition for the numbers first, we need parentheses to change the execution order as in math. That’s how the third command works.

Exercise 2.3. alert()

Use alert() or window.alert() to send following messages:

  1.  “Milk costs $2.”
  2.  “Dinner costs $7.”
  3.  “Today I spent: $” followed by the sum of 2 and 7.

Exercise 2.4. Checkpoint

In this exercise, you have learned:

  1. To use alert() and window.alert() to send popup messages.
  2. Print strings and numbers in one command.
  3. To use parentheses to change execution order.
Tagged with: , ,

2 Comments

  1. Hi. Is it what I should get?

    • You should put a space in front of the “programmer”, like this: ” programmer”


Leave a Reply