Okay, here's where the fun starts. Your web browser has a secret room hidden inside it, built just for developers. It's called the Developer Tools (or DevTools for short), and inside it there's a little window called the Console.
The console is a place where you can type JavaScript and the browser will run it instantly. It's the perfect playground for trying things out.
Here's how to open it:
| Browser | Windows / Linux | Mac |
|---|---|---|
| Chrome / Edge / Brave | Ctrl + Shift + J | Cmd + Option + J |
| Firefox | Ctrl + Shift + K | Cmd + Option + K |
| Safari | – | First turn on the developer menu in Safari's settings (Advanced section), then Cmd + Option + C |
You can also press F12 in most browsers, or right-click anywhere on a page, choose Inspect, and then click the Console tab.
Go ahead. Open it right now. We'll wait.
...
Done? Great! You should see a panel with a blinking cursor, probably next to a little > symbol. That's where you type.
The console is a calculator
Let's try something simple. Click in the console, type this, and press Enter:
The browser did math! (Lines starting with > are what you type. The line underneath is what the console answers.)
Try a few more:
In JavaScript, * means multiply and / means divide. Parentheses work just like they do in math class: whatever's inside gets done first.
You can also try some text. Text in JavaScript goes inside quotes:
When you use + on two pieces of text, JavaScript glues them together. We'll learn all about this in Grade 2.
Some browsers will show a warning if you try to paste code into the console, and might ask you to type something like allow pasting first. That's a safety feature! Scammers sometimes trick people into pasting code that steals their accounts. Never paste code into your console if you don't understand what it does, especially if a stranger sent it to you. (Code from this book is fine. We're friendly. Mostly.)