Running JavaScript in the Console and in a Script File

You don't need to install anything to run JavaScript. Your browser already has it. What you need is a place to type code and see the result, and a way to save that code so you're not retyping it. The console gives you the first. A script file gives you the second.

First, check what you have

• A browser: Chrome or Edge is easiest to follow here. Firefox is fine.
• A text editor. Notepad works, but a code editor like Visual Studio Code is free and shows mistakes in colour. Use it if you can.
• A folder for this course, for example js-course on your Desktop or in Documents.

That's it. No Node.js yet. That comes in JavaScript Intermediate.

Step 1: Open the console

Open any web page, even a blank tab. Then:

• Windows and Linux: press F12 or Ctrl+Shift+J (Chrome, Edge).
• Mac: press Cmd+Option+J.
• Or right-click the page, choose Inspect, then click the Console tab.

You'll see a panel with a > prompt. That's where you type.

Step 2: Run your first lines

Type this and press Enter after each line:

console.log("Hello from the console");
2 + 3 * 4;

Hello from the console

The console shows Hello from the console, then 14 for the second line. The console prints the value of the last expression you typed, so 2 + 3 * 4 shows 14 even without console.log. In a script file, that doesn't happen. Only console.log prints. Remember that, because it confuses people when they move code from the console into a file.

You might also see undefined after a line. That's the console telling you the line itself didn't produce a value. console.log prints something but returns nothing. It's not an error.

Step 3: Move the code into files

The console forgets everything when you reload the page. For anything longer than a few lines, use files. In your course folder, create two files.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JS practice</title>
</head>
<body>
  <h1>JS practice</h1>
  <script src="script.js"></script>
</body>
</html>

script.js:

const name = "Ana";
console.log("Hello, " + name);
console.log("script.js is loaded");

Hello, Ana
script.js is loaded

Now double-click index.html to open it in your browser, then open the console. You should see both lines. If you change script.js, save it and reload the page (F5 or Cmd+R). The page only runs the new code after a reload.

Why the script tag goes at the bottom

Put the <script> tag just before </body>, like above. The browser reads the page from top to bottom. If the script runs before the button or paragraph it wants to change exists, it can't find it and you'll get an error like Cannot read properties of null. Putting it at the bottom means the page is already there. You'll see a cleaner way to handle this (defer) later, but bottom-of-body is the simple, safe default.

Common mistakes

• Saving the file as script.js.txt. Windows hides extensions by default, and Notepad likes to add .txt. Turn on "File name extensions" in File Explorer's View menu and check.
• Wrong file name or folder in src. src="script.js" means "a file called script.js next to this HTML file". If the console says 404 or ERR_FILE_NOT_FOUND for script.js, the name or folder doesn't match.
• Editing the file and not reloading. The browser doesn't watch your files. Save, then reload.
• Typing code in the address bar. That's not the console. Use F12.

What happens if you skip this

You'll end up running everything in online playgrounds that hide the parts you need to understand: where the file lives, how the page loads it, where errors appear. That works until your first real project, where nobody set it up for you.

Before the next lesson, try this: change the name in script.js to your own, save, and look at the console without reloading. What does it show, and why?