Your First JavaScript Program
Tradition says the first program in any language prints "Hello, World!" — a tiny output that proves the whole toolchain works. We will do exactly that, three ways:
In the browser console, with no files at all.
In an HTML page, where the JavaScript reaches into the page and changes it.
In Node.js, where the JavaScript runs as a plain command-line program.
1. In the browser console
Open any web page in Chrome, Edge, Firefox or Safari.
Press F12 (or right-click → Inspect) to open DevTools.
Switch to the Console tab.
Type the line below and press Enter.
console.log("Hello, World!");Hello, World!
That's a full program. console.log is the JavaScript way of saying "print this somewhere I can see it". In the browser, "somewhere" is the console panel.
2. In an HTML page
Save the following as index.html in any folder, then double-click it to open it in your browser.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My first JavaScript</title>
</head>
<body>
<h1 id="greeting"></h1>
<script>
// 1. Find the element
const heading = document.getElementById("greeting");
// 2. Set its text
heading.textContent = "Hello, World!";
// 3. Also log to the console
console.log("page is ready");
</script>
</body>
</html>The page renders an empty heading. The script runs after the heading exists, finds it by its id, and fills it in. Open the console and you will also see "page is ready".
<script src="main.js"></script>
main.js
const heading = document.getElementById("greeting");
heading.textContent = "Hello, World!";
console.log("page is ready");External files are the norm for anything beyond a few lines — easier to read, easier to reuse, cacheable by the browser.
3. In Node.js (no browser involved)
Make sure Node is installed (node --version should print a version number — see Setup if not). Then:
hello.js
console.log("Hello, World!");Run it
node hello.js
Hello, World!
No browser, no HTML, no page — just the JavaScript engine and the system terminal.
What the line actually does
Take the canonical example apart:
console.log("Hello, World!");console— a built-in object provided by the host environment (browser or Node)..log— a property ofconsole; it happens to be a function.(...)— calls that function. Whatever is between the parentheses is passed as an argument."Hello, World!"— a string literal: a piece of text wrapped in double quotes. Single quotes and back-ticks also make strings.;— the optional semicolon that ends a statement.
Making it a touch more interactive
In the browser you can ask the user for input:
const name = prompt("What is your name?");
alert("Hello, " + name + "!");In Node, you can read from the command-line arguments:
hello.js
const name = process.argv[2] ?? "World";
console.log(`Hello, ${name}!`);node hello.js Alice
Hello, Alice!
Common first-time mistakes
Typos in property names.
console.Log("hi")(capital L) will throwTypeError: console.Log is not a function.Mismatched quotes. Mixing single and double quotes breaks the string.
Forgetting to save the file. The browser reads the file from disk; an unsaved buffer in your editor is invisible to it.
Opening file:/// URLs and getting CORS errors when you try to
fetchsomething. Local files have restrictions; serve the folder with a simple dev server (e.g.npx serve .or VS Code's Live Server) when you need real HTTP behaviour.