JavaScript is the language that makes web pages do things. HTML gives a page structure, CSS gives it appearance, and JavaScript gives it behaviour — reacting to clicks, updating the screen, and fetching data.
You already have everything you need to run it: any browser.
Run something in the next thirty seconds#
Open your browser’s developer tools (F12, or right-click and choose Inspect), click the Console tab, type this and press Enter:
console.log("Hello from JavaScript");That is a complete JavaScript program. No installation, no setup. More on the console in browser DevTools for beginners.
Where JavaScript runs#
- In the browser — the original job, and still the main one
- On a server, with Node.js — back-end APIs and command-line tools
- In apps — React Native for mobile, Electron for desktop
Learning it for the browser first gives you the fastest feedback: change a line, refresh, see it.
Putting it in a page#
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Hello</h1>
<button id="btn">Click me</button>
<script src="script.js"></script>
</body>
</html>Put the script tag just before the closing body tag so the elements exist by the time your code runs.
const button = document.querySelector("#btn");
const title = document.querySelector("#title");
button.addEventListener("click", function () {
title.textContent = "You clicked it!";
});Five lines and the page responds to a person. That is the whole appeal.
The core syntax#
Variables#
let score = 0; // may change
const name = "Ada"; // will not be reassignedUse const by default and let when you genuinely need to reassign. Ignore var — see JavaScript variables explained.
Text#
const first = "Ada";
const message = "Hello, " + first;
const better = `Hello, ${first}. You have ${2 + 3} messages.`;That last form uses backticks and is called a template literal. It is the neatest way to build text.
Conditions#
const age = 20;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}Note the round brackets around the condition and the curly braces around the block. JavaScript ignores indentation — the braces do the work.
Loops#
const fruits = ["apple", "banana"];
for (const fruit of fruits) {
console.log(fruit);
}
for (let i = 0; i < 3; i++) {
console.log(i); // 0 1 2
}Functions#
function area(w, h) {
return w * h;
}
const areaArrow = (w, h) => w * h; // arrow function, same result
console.log(area(3, 4));Both forms are everywhere in real code. See JavaScript functions explained.
Arrays and objects#
const scores = [10, 8, 9];
const person = { name: "Ada", age: 36 };
console.log(scores[0]); // 10
console.log(person.name); // AdaThree ways JavaScript differs from Python#
- It converts types silently.
"5" + 1gives"51"rather than an error. Python would stop and tell you. - Braces, not indentation. Your formatting is for humans only.
- Some things happen later. Network requests do not block the rest of your code, which is why async and await exist.
A learning order that works#
- Variables, types, template literals
- Conditions and loops
- Functions, including arrow syntax
- Arrays with map, filter and reduce
- Objects
- The DOM — changing the page
- Events — reacting to the user
- Async and await, then fetch
- A real project. Do not skip it.
Do not start with a framework. React makes far more sense once plain JavaScript is comfortable.
Questions people ask#
Is JavaScript the same as Java?
No. Unrelated languages with a confusingly similar name, chosen for marketing reasons in the 1990s.
Do I need Node.js to start?
No. The browser runs JavaScript already. Install Node when you want to build back-end code or use build tools.
What is ES6?
A major 2015 update that added let, const, arrow functions, template literals and classes. Old tutorials predating it will look noticeably different.
Should I learn TypeScript instead?
Learn JavaScript first. TypeScript adds type checking on top; it makes much more sense once you have felt the problems it solves.
Where to go next#
- JavaScript variables: let, const and var
- JavaScript DOM basics
- Build a quiz app
- The full JavaScript learning path — every guide here in reading order
- JavaScript array methods reference