Lesson 1: Where JavaScript Runs: Meet the Browser Console

JavaScript lives in the browser

If you've written a little HTML, you know it describes what a page is: a heading, a list, a button. HTML doesn't do anything, though. Click an HTML button with nothing attached and nothing happens. JavaScript is the language that makes things happen.

Think of a web page as a theatre production. HTML is the set and the props, CSS is the lighting and costumes, and JavaScript is the actors, who move things around and react to the audience. The stage they all perform on is the browser. Chrome, Firefox, Edge and Safari each have a JavaScript engine built in, so you don't install anything to run JavaScript. If you're reading this in a browser, you already have one.

Over this course you'll build a small to-do list app. Today we'll set up its files and make the browser prove that our JavaScript actually runs.

Your workbench: the DevTools console

Every modern browser comes with DevTools, a set of panels for looking inside a page. The one we care about today is the Console. You can type JavaScript into it and see the result straight away, and it's also where the browser reports errors.

How to open it:

Open it now, click in the input area at the bottom and type:

2 + 3            // press Enter
// → 5

console.log("Hello from the console!")
// → Hello from the console!
// → undefined

Here's what happened:

• 2 + 3 is an expression, a piece of code that produces a value. The console works it out and shows the result, 5.
• console.log(...) is a built-in command that prints whatever you give it to the console. It's the tool you'll use most when you want to see what your code is doing.
• The extra undefined on the next line often confuses beginners. The console always shows what the line you typed produced. console.log prints your message but doesn't produce a value of its own, so the console shows undefined. That's normal and nothing is broken.

You can log more than one thing at once by separating them with commas:

console.log("Tasks to do:", 3, "Done:", 1)
// → Tasks to do: 3 Done: 1

Gotcha: pasting into Chrome's console. The first time you paste code into Chrome's console, it may block you and ask you to type allow pasting. This protects people from scammers who tell victims to paste harmful code. Only paste code you understand, and that includes code from this course. Typing it out yourself is a good way to learn anyway.

Moving code into a file: script.js

The console is good for quick experiments, but anything you type there disappears when you refresh the page. Real code goes in a file that the page loads. Make a folder called todo-app with two files in it.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My To-Do List</title>
  <!-- Load our JavaScript file. -->
  <!-- src = path to the file, relative to this HTML file. -->
  <!-- defer = wait until the HTML has been read before running it. -->
  <script src="script.js" defer></script>
</head>
<body>
  <h1>My To-Do List</h1>
</body>
</html>

script.js

// Everything in this file runs when the page loads.
console.log("To-do app loaded!");
console.log("Today's tasks:", 0);

A few points about that <script> tag:

• src tells the browser which file to fetch. If script.js sits in the same folder as index.html, the plain filename is enough.
• defer tells the browser to keep reading the HTML and run the script only after the whole page has been parsed. You'll need this later, when your code changes elements on the page, because those elements have to exist first. defer only works on scripts that use src.
• The tag needs its closing </script>, even though nothing goes between the two tags.

Check it works

1. Double-click index.html to open it in your browser. You should see the heading My To-Do List.
2. Open the console (Ctrl+Shift+J / Cmd+Option+J in Chrome).
3. You should see:

To-do app loaded!                    script.js:2
Today's tasks: 0                     script.js:3

The grey text on the right shows which file and line each message came from. If you see nothing, look for a typo in the src filename, check that both files are in the same folder, and refresh the page. Code in the file only runs when the page loads.

Reading your first error

You'll break things a lot, and that's how everyone learns. Add this deliberate typo as line 4 of script.js:

consol.log("This line has a typo");   // 'console' is missing its 'e'

Save the file, refresh, and the console shows something like this in red:

❌ Uncaught ReferenceError: consol is not defined      script.js:4

Read it from left to right:

• ReferenceError is the kind of error. Here it means you used a name the browser doesn't recognise.
• consol is not defined names the exact word that confused it.
• script.js:4 is the file and line number. Click it and DevTools opens the file with that line highlighted.
• Uncaught means nothing in your code handled the error, so the script stopped there. Any lines after line 4 won't run.

Fix the typo, save, refresh, and the red message goes away. You've just done your first debugging: read the error, go to the file and line, fix it, and run the page again. Safari words this error differently (Can't find variable: consol), but it means the same thing.

Best practice: keep the console open while you work. A page that "does nothing" often has a red error in the console that explains why.

Key takeaways

• JavaScript runs inside the browser alongside HTML and CSS. You don't need to install anything.
• Open the console with Ctrl+Shift+J / Cmd+Option+J (Chrome) or Ctrl+Shift+K / Cmd+Option+K (Firefox).
• console.log(...) prints values. The undefined shown after it is normal.
• Link a file with <script src="script.js" defer></script>, refresh, and check the console for your message.
• Error messages tell you the kind of error, what went wrong, and the file:line where it happened. Click that link to go straight to the problem.