Your First JavaScript Program

Learn three ways to run JavaScript as a complete beginner: the browser developer console, an HTML script tag, and Node.js. And understand exactly what console.log does and why.

If you’ve been following this JavaScript series from the start, you’ve already put in some real effort. The Introduction to JavaScript gave you the big picture: what the language is, where it runs, and why every web developer ends up needing it. Then in How JavaScript Runs, you went deeper and saw exactly what happens when your code meets the browser: the V8 engine, the call stack, the event loop.

That context is genuinely valuable. But now it’s time to actually write something.

Today you’re going to write your first JavaScript program, understand it piece by piece, and run it in three different ways. No fluff, no abstract theory. Just real code that you type, run, and see work.

By the end of this, you’ll know:

How to run JavaScript in the browser console with zero setup
How to attach JavaScript to an HTML file using the script tag
How to run a .js file with Node.js on your computer
What console.log actually does, and why developers use it every single day

Let’s get into it.

01You Already Have Everything You Need to Start

Here’s something that trips up a lot of beginners: they think you need to install a bunch of tools before you can run your first JavaScript line. A server, a build tool, a whole environment setup…

But that’s Not true.

Your browser already has a JavaScript engine built right into it. Chrome runs V8 (the same one we talked about in the previous article). Firefox runs SpiderMonkey. Edge also uses V8 as of now. Every one of them ships with a developer console where you can type JavaScript and run it live, right now.

Zero downloads. Zero config. Just open a browser.

That said, there are three solid methods worth knowing. We’ll go through all of them because they serve different purposes, and you’ll eventually use all three.

02Three Ways to Run JavaScript

🖥️

Browser Console

Fastest method. No files, no setup. Open DevTools and start typing immediately.

📄

HTML Script Tag

JavaScript inside an HTML file. The standard approach for actual web projects.

⚙️

Node.js

Runs JavaScript outside the browser. Great for backend, tools, and scripts.

Let’s walk through each one. You’ll see the same console.log("Hello, World!") in all three, which is the point: the code doesn’t change, just where and how it runs.

03Method 1: The Browser Console

This is the fastest way to run JavaScript. Nothing to install, no files to create, no folder to navigate to. You open the console and start typing.

Opening the Developer Console

In Chrome, Edge, or Brave, use one of these:

Win/Linux
Ctrl
+
Shift
+
J

Mac
⌘ Cmd
+
⌥ Option
+
J

Or right-click anywhere on any webpage, click “Inspect,” then click the “Console” tab.

In Firefox, it’s Ctrl+Shift+K on Windows/Linux, or Cmd+Option+K on Mac.

You’ll see a panel open with a > prompt. That’s your JavaScript input. Click next to it, type the following, and press Enter:

console.log("Hello, World!");

You’ll see Hello, World! appear immediately below your line. That’s JavaScript executing in real time, right inside your browser. Try it in the simulator below:

Elements

Console

Sources

Network

Performance

>
console.log(“Hello, World!”);

Click “Run Code” to see the output…

Hello, World!
VM:1

💡
Important note: The browser console is temporary. Refresh the page and whatever you typed is gone. It’s built for experimenting and debugging, not for writing code you want to keep. For that, you’ll use method 2.

04Method 2: JavaScript Inside an HTML File via the Script Tag

This is how JavaScript actually lives in web projects. You write your code inside a <script> tag in an HTML file, and the browser runs it when it loads the page.

Create a new file, name it index.html, and open it in any text editor. VS Code is excellent for this (and free), but even Notepad works fine to start. Paste this in:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>

    <h1>My First JavaScript Program</h1>

    <script>
        console.log("Hello, World!");
    </script>

</body>
</html>

Save it, then double-click the file to open it in your browser. The page will just show the heading. Nothing else appears on screen. That’s because console.log outputs to the developer console, not to the webpage itself. Open the console (Ctrl+Shift+J) and “Hello, World!” will be waiting there.

Why Does the Script Tag Go at the Bottom?

Notice the <script> tag sits just before the closing </body> tag, not up in the <head>. That’s intentional and it matters.

HTML Document Structure

<!DOCTYPE html><html lang="en"> <head> <title>Hello World</title> </head> <body> <h1>My First JavaScript Program</h1> ... page content loads here ... <script> console.log("Hello, World!"); </script> ← placed here, before </body> </body></html>

👆
Placing <script> before </body> ensures the HTML content is fully loaded before your JavaScript runs. If it were in <head>, your JS might try to interact with page elements that don’t exist yet.

The browser reads HTML top to bottom, like reading a page. If your script is in the <head>, it runs before the page content loads. That’s a problem the moment you want JavaScript to interact with anything on the page. Bottom of the body is the safe, standard placement.

✨
There are also defer and async attributes for the script tag that handle this more elegantly, and there’s the approach of linking an external .js file instead of writing code directly in the HTML. We’ll cover all of that properly later in this series. For now, bottom of body is exactly what you need.

05Method 3: Running JavaScript with Node.js

The browser console and the script tag both run JavaScript inside a browser. Node.js does something fundamentally different: it lets you run JavaScript directly on your computer, no browser involved at all.

This is how JavaScript is used for backend servers, command-line tools, automation scripts, and anything that doesn’t involve a webpage. If you’ve heard of Express, Next.js server-side rendering, or just running .js files from a terminal, that’s all Node.js territory.

Installing Node.js

Go to nodejs.org and download the LTS version (Long-Term Support). This is the stable, well-tested release. The installer is straightforward, just follow the steps through.

Once installed, open your terminal:

Windows: Search “PowerShell” or “Command Prompt” in the Start menu
Mac: Press Cmd + Space, type “Terminal,” hit Enter
Linux: You already know where it is

Verify Node installed correctly by typing:

node --version

You should see a version number like v20.x.x or v22.x.x. If you do, you’re good to go.

Creating and Running Your First .js File

Create a new file anywhere on your computer called hello.js. Open it and type:

console.log("Hello, World!");

Save it. In your terminal, navigate to the folder where you saved it, then run:

node hello.js

Terminal

user@machine ~/projects $ node –versionv22.11.0 user@machine ~/projects $ node hello.jsHello, World! user@machine ~/projects $

“Hello, World!” printed right in the terminal. Same JavaScript, same console.log, but this time running completely outside the browser, as a standalone program on your machine.

🎯
Which method should you use right now? For following along with this series, go with method 2: the HTML file with a script tag. It’s the most realistic setup for web development. Method 1 (the console) is perfect for quick one-line experiments. Method 3 (Node.js) becomes important later when we move into more advanced topics. But knowing all three already puts you ahead.

06Your First JavaScript Hello World Program

You’ve typed it a few times already. Let’s be intentional about it.

console.log("Hello, World!");

That single line is a complete JavaScript program. It’s small, but it’s complete. And there’s a tradition behind it: writing “Hello, World!” as your first program in any language goes back to 1974, introduced in a Bell Labs internal tutorial by Brian Kernighan. Every programmer, in every language, has written this at some point.

Now you have too.

But let’s actually understand what’s happening in that one line instead of just accepting that “it works.”

07What console.log Does (The Real Explanation)

A lot of beginner tutorials just say “console.log prints things” and move on. That’s technically true but it leaves you with a surface-level understanding. When something breaks later, you want to know the parts. So let’s break it down properly.

consoleBuilt-in Object.logMethod(Calls It“Hello, World!”String Argument) ;

console: built-in object.log: method on the object(): calls the function“…”: the value you’re printing

Here’s what each piece actually means:

console is a built-in JavaScript object. You didn’t create it and you don’t need to import it. It comes pre-loaded in every browser’s JavaScript environment and in Node.js automatically. It represents the developer console: the panel in your browser’s DevTools, or the terminal output when you’re in Node. Think of it as a tool that JavaScript hands you for free.

.log is a method belonging to the console object. The dot (.) is how JavaScript accesses something that lives inside an object. So console.log means: “look inside the console object and find the function named log.”

() are what actually run the function. Without parentheses, the function just sits there referenced but never called. The moment you add (), JavaScript says: “okay, execute this now.” This rule applies to every function in JavaScript, not just console.log.

“Hello, World!” is a string, which is JavaScript’s word for text. Wrapping text in quotes (single ' or double " both work) is how you tell JavaScript: “this is literal text, not a variable or a command.” You’re passing this string to the log function as an argument, which is just a fancy way of saying “the input you’re giving it.” The function receives it and displays it in the console.

When JavaScript reads that full line, it goes to the console object, finds the log method, calls it, and outputs whatever you passed inside the parentheses. That’s the whole picture.

console.log Handles More Than Just Text

Here’s where it gets genuinely useful. console.log isn’t limited to strings. You can pass it any type of value in JavaScript and it’ll display it:

console.log("Hello, World!");           // String
console.log(42);                         // Number
console.log(true);                       // Boolean
console.log([1, 2, 3, 4, 5]);           // Array
console.log({ name: "Alex", age: 25 }); // Object

Each one prints something slightly different. Click through the demo below to see what each type looks like when logged to the console:

You can also log multiple values in one call, separated by commas:

console.log("Name:", "Alex", "| Age:", 25, "| Active:", true);

Output: Name: Alex | Age: 25 | Active: true

This is actually one of the most useful debugging patterns you’ll use. When you want to see what value a variable holds at a specific point in your code, you log it with a label so you know what you’re looking at. Even developers with years of experience do this constantly.

08Three Mistakes Beginners Make with console.log

These are worth knowing upfront. Small things, but they’ll save you real confusion:

⚠ Getting the casing wrong

JavaScript is case-sensitive, and console.log is no exception. console.Log() throws an error. Console.log() throws an error. It must be exactly console.log(), lowercase all the way through. This applies to everything in JavaScript, not just this one function.

⚠ Forgetting quotes around text

console.log(Hello) is not the same as console.log("Hello"). Without quotes, JavaScript reads Hello as a variable name and looks for a variable called Hello in your code. If it doesn’t find one, you get: ReferenceError: Hello is not defined. Text always needs to be wrapped in quotes.

⚠ Skipping the parentheses

Writing console.log by itself doesn’t run anything. It just references the function without calling it. You need the () to actually execute it. And if you want to log something, that thing goes inside the parentheses. Even console.log() with nothing inside it works fine and prints an empty line.

09A Full Working Example to Save

Here’s the complete Hello World setup using method 2: an HTML file with a script tag. This is the version you’d actually build on going forward:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>

    <h1>My First JavaScript Program</h1>

    <script>
        // My first JavaScript program
        console.log("Hello, World!");
        console.log("JavaScript is running.");
        console.log("I wrote this myself.");
    </script>

</body>
</html>

Open this in your browser, open the developer console, and you’ll see all three messages printed one after another. Each console.log is a separate statement that runs in order, top to bottom.

Also notice // My first JavaScript program. That’s a comment: a line that JavaScript completely ignores. It’s there purely for the human reading the code, and it starts with //. We’ll go deep on comments in an upcoming article, but it’s worth seeing early because they’ll be in every code example from here on.

10Recap

Here’s everything you covered today:

Browser console: Open DevTools, click Console, type JavaScript, hit Enter. No setup needed, but nothing is saved.
Script tag in HTML: Write JavaScript between <script></script> tags, placed before </body> in your HTML file. This is the standard web development setup.
Node.js: Install from nodejs.org, create a .js file, run it with node filename.js in the terminal. JavaScript outside the browser.

And you now understand console.log("Hello, World!") properly: console is a built-in object, .log is its method, () calls it, and the text inside is what gets printed. Not just “it prints things,” but what each part actually does and why.

Next up: JavaScript Syntax Fundamentals, where we dig into what makes a valid JavaScript statement, the difference between statements and expressions, how the semicolon debate actually shakes out, and the habits that prevent silent bugs before they happen. That one clicks a lot of things into place.

You’re building this properly. Keep going.

Your First JavaScript Program

Choose a difficulty to load your challenge

Loading challenge…

Ready to Practice?

Select a difficulty level above to load your challenge.

Easy

Great Work!