Your First Program

The tradition in programming is to start with a tiny program that prints “Hello, World!” — it proves your tools work and gives you a win in seconds. In JavaScript this takes just one line, and because JS runs in your browser you do not need to install anything to try it. This page walks you through logging to the console, making a small visible change to the page, and reading the output, so you finish with a program that actually does something.

The classic one-liner

The most direct way to produce output in JavaScript is console.log(). It writes whatever you pass it to the console — the developer log panel in your browser or terminal. Open your browser’s DevTools (F12, then the Console tab), type the line below, and press Enter:

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

Output:

Hello, World!

That is a complete program. console.log is a function, the parentheses call it, and the text inside the double quotes is a string — a piece of text. The semicolon ends the statement. You can log numbers, calculations, or several values at once, separated by commas:

console.log("2 + 2 =", 2 + 2);
console.log("JavaScript", "is", "running");

Output:

2 + 2 = 4
JavaScript is running

Tip: console.log does not change your web page — it only writes to the developer console, which visitors never see. It is for you, during development and debugging.

Saying hello with variables

Real programs store values in variables so they can be reused and changed. Declare a variable with const (for values that will not be reassigned) and build your message with a template literal — a string in backticks where ${...} inserts a value:

const name = "World";
const message = `Hello, ${name}!`;
console.log(message);

Output:

Hello, World!

Swap "World" for your own name and run it again. Use let instead of const when the value needs to change later; avoid the old var keyword in new code.

Changing the page

Logging is great for checking your work, but the real fun is making the page react. The browser exposes the page through the DOM (Document Object Model), and document.body is the visible content of the page. This snippet replaces the page content and paints the background:

document.body.textContent = "Hello, World!";
document.body.style.fontFamily = "system-ui, sans-serif";
document.body.style.fontSize = "3rem";
document.body.style.padding = "2rem";
document.body.style.background = "#0f172a";
document.body.style.color = "#38bdf8";
console.log("The page was updated!");

Output:

The page was updated!

The console line confirms the script ran, while the rest changes what you see: the page now shows a large “Hello, World!” on a dark background. Each style.property = value assignment is the JavaScript equivalent of a single CSS rule.

Putting it in an HTML file

To run this without DevTools, save it as a real web page. Create a file named index.html, paste the markup below, and double-click it to open in your browser:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Program</title>
  </head>
  <body>
    <h1 id="greeting">Loading…</h1>

    <script>
      const heading = document.getElementById("greeting");
      heading.textContent = "Hello, World!";
      console.log("Script executed");
    </script>
  </body>
</html>

The heading starts as “Loading…”, then JavaScript finds it by its id and rewrites the text to “Hello, World!”. The <script> sits just before </body> so the <h1> already exists when the code runs.

Running it outside the browser

The same console.log line works in Node.js, which runs JavaScript from your terminal. Save the line to a file and run it:

node hello.js

Output:

Hello, World!

Here is how the three output methods compare:

Approach	Where output appears	Setup needed
`console.log` in DevTools	Browser console	None
`document.body` change	The visible page	An HTML file
`node hello.js`	Terminal	Node.js installed

Gotcha: console.log and a DOM change are not the same thing. If you expect text on the page but only see it in the console, you logged it instead of writing it to the document.

Best Practices

Reach for console.log to check values, and the DOM (like document.body.textContent) to show things to users.
Prefer const for values that do not change and let when they do — skip var in new code.
Use template literals (`Hello, ${name}`) instead of clumsy string concatenation.
Set textContent rather than innerHTML when you are inserting plain text — it is simpler and safer.
Keep page scripts just before </body> (or use defer) so the elements they touch already exist.
Open the console early and keep it open; it is where errors and your log messages appear.

Your First Program

The classic one-liner

Saying hello with variables

Changing the page

Putting it in an HTML file

Running it outside the browser

Best Practices

Related Topics