Firsts steps with JavaScript – Dominating the browser console

Hello future developers! It’s time to dive into the first steps of programming with JavaScript. If you’ve always wanted to know how to make those interactive web pages, you’re in the right place!

JavaScript is the language that gives life to web pages. It’s what makes the buttons work, the animations happen, and the site react to what you do. And the best part? You can start practicing right now, without even installing anything!

The browser console: Your first laboratory

The browser console is like a secret playground where you can test your JavaScript code in real time. To open it, press F12 in your browser (Chrome, Firefox, Edge) and click on the “Console” tab.

Here are the first commands a JavaScript programmer should know:

//Your first alert
alert("Good morning, world!");

//Creating a variable (always with semicolon!)
var name = "Dragon";

// Showing in console (more discreet than alert)
console.log(name);

Understanding variables

Variables are like little boxes where we store information. Imagine you have a box and put a label “name” on it. Whenever someone asks “what’s in the name box?”, you can answer with what’s stored inside.

var age = 20;
var school = "KidCoders Academy";
var approved = true;

console.log(age);      // Shows: 20
console.log(school);   // Shows: KidCoders Academy
console.log(approved); // Shows: true

Important rules for variables

1. Keywords can’t be variables: words like “if”, “for”, “while” are reserved for JavaScript (in other programming languages we can have similar keywords);
2. Use descriptive names: var n = "John" is worse than var userName = "John".
3. Case sensitive: “name” is different from “Name”.
4. Cannot start with numbers: var 1name doesn’t work but var name1 works.

Diference betwen alert() e console.log()

• alert(): shows a pop-up notification on the screen – everyone can see it.
• console.log(): shows only in the console, more discreet and profissional.

var message = "Hello, programmers!"; 
alert(message); //pop-up notification on the screen
console.log(message); //in the console

Practical challenge 1

Now it’s your turn!! Open the console on the browser (F12 → Console) and try:

1. Create a variable with your name.
2. Create a variable with your age.
3. Show both of them in the console.
4. Make a alert() with a personalize message.

Golden tips

• Always end commands with semicolon(;) – it’s a good practice.
• Use console.log() to debug – programmer’s most important tool.
• Test small pieces of code – don’t try everything at once.
• Read error messages – they’re your friends not enemies.