Your First JavaScript Program: console.log, alert and Comments

Your first JavaScript program uses console.log to print messages, plus comments to explain your code. You will also meet alert, prompt and confirm, and learn to read error messages.

How to use console.log in JavaScript

console.log() is the command you will use most while learning. It prints a message in the browser console. Think of it as your code talking to you: "Here is what I'm doing right now."

Open the console (press F12) and type:

console.log('Hello, world!');
console.log(10 + 5);
console.log('My name is', 'Sara', 'and I am', 28);
// Output:
// Hello, world!
// 15
// My name is Sara and I am 28

What happens here:

• Text must be inside quotes: 'Hello, world!'. Text in code is called a string.
• Numbers don't need quotes. 10 + 5 is calculated first, so the console shows 15.
• You can pass several values separated by commas. The console prints them with spaces between them.

console.warn, console.error and console.table

The console has a few more useful commands:

console.warn('Your password is weak.');
console.error('Could not load the user profile.');

const products = [
  { name: 'T-shirt', price: 15 },
  { name: 'Mug', price: 8 },
  { name: 'Poster', price: 12 }
];
console.table(products);

• console.warn() shows the message with a yellow warning style.
• console.error() shows it in red, like a real error.
• console.table() shows a list of data as a neat table, with one row per product and columns for name and price. You'll learn about lists (arrays) and objects later in the course.

These commands are only for you, the developer. Normal visitors never open the console, so they never see these messages.

alert, prompt and confirm: popup boxes

The browser also has three built-in popup boxes that visitors can see:

alert('Welcome to my quiz!');

const visitorName = prompt('What is your name?');
console.log('Hello, ' + visitorName + '!');
// Output (if you type Sara): Hello, Sara!

const ready = confirm('Are you ready to start?');
console.log(ready);
// Output: true if you click OK, false if you click Cancel

• alert() shows a message with an OK button.
• prompt() asks a question and gives back whatever the user types (or null if they click Cancel).
• confirm() asks a yes/no question and gives back true (OK) or false (Cancel).

These are fun for your first experiments. But real websites almost never use them. They look old-fashioned, you can't style them with CSS, and they block the page: nothing else works until the user clicks a button. Modern sites use HTML forms and custom pop-up windows instead, which you'll build later in the course.

Comments in JavaScript

A comment is a note in your code that JavaScript ignores. Comments are for humans: for you next month, or for a teammate. JavaScript has two kinds:

// This is a single-line comment. It ends at the end of the line.
const taxRate = 0.2; // A comment can also go after code.

/*
  This is a multi-line comment.
  It starts with slash-star and ends with star-slash.
*/
console.log('Comments are ignored');
// Output: Comments are ignored

Good comments explain why you did something, not what every line does. You can also "comment out" a line to switch it off for a moment while testing.

Tip: In most code editors, including VS Code, you can press Ctrl + / (or Cmd + / on Mac) to turn the current line into a comment, or back again.

Statements and semicolons

A JavaScript program is a list of statements. A statement is one instruction, like one step in a recipe. The browser runs statements from top to bottom, one after another.

Most statements end with a semicolon ;, like a full stop at the end of a sentence. JavaScript can often add missing semicolons for you (this is called automatic semicolon insertion), but it sometimes guesses wrong. In this course we always write semicolons. It's a clear, safe habit.

console.log('Step 1: Preheat the oven');
console.log('Step 2: Mix the ingredients');
console.log('Step 3: Bake for 30 minutes');

The three messages always appear in this order, because statements run in order.

How to read JavaScript error messages

Errors are normal. Every developer sees them many times a day. An error message is not the computer being angry; it is a clue. Try this code in the console. It has a spelling mistake on purpose:

const city = 'Lisbon';
console.log(ctiy);

Uncaught ReferenceError: ctiy is not defined
    at <anonymous>:2:13

How to read it:

1. The error type: ReferenceError means you used a name that JavaScript doesn't know.
2. The message: ctiy is not defined tells you exactly which name is the problem.
3. The location: 2:13 means line 2, character 13. In your own files, the console shows the file name too, like script.js:2, and you can click it to jump to the line.

Other errors you will meet often are SyntaxError (you wrote something JavaScript can't understand, like a missing bracket or quote) and TypeError (you tried to do something with a value that doesn't support it).

Common mistake: Ignoring the console. If your page doesn't work and you don't know why, open the console first. The answer is often written there in red.

Practice exercise

Create a small "about me" program in the console or in script.js. Use console.log to print your name, your city and your favorite food on three lines. Add a comment above each line. Then use prompt to ask for the visitor's favorite color and log a message like "Nice, blue is a great color!". Finally, misspell a word on purpose and read the error message.

Hint: store the answer with const color = prompt('What is your favorite color?'); and then join it into a sentence with 'Nice, ' + color + ' is a great color!'.

Key takeaways

• console.log() prints messages in the console; warn, error and table give special formats.
• alert, prompt and confirm show popup boxes, but real websites avoid them because they block the page.
• Comments (// and /* */) are notes for humans and are ignored by JavaScript.
• A program is a list of statements that run from top to bottom; end each one with a semicolon.
• Error messages tell you the error type, what went wrong and the line number.