Introduction to JavaScript

JavaScript is the language that makes web pages do things. HTML provides the content, CSS controls how it looks, and JavaScript responds to what people do — clicking, typing, scrolling — and changes the page in response. It also runs on servers, in mobile apps and on small devices, but the browser is where nearly everyone meets it first.

The three languages of a web page#

Every web page you have ever visited is built from three things:

• HTML is the content and structure — headings, paragraphs, images, buttons.
• CSS is the presentation — colours, spacing, layout, fonts.
• JavaScript is the behaviour — what happens when someone interacts with it.

A page with only HTML works fine; it is just static. Add CSS and it looks designed. Add JavaScript and it can respond, fetch new data, validate a form before it submits, or update a total as you change a quantity.

Your first script#

Save this as index.html and open it in a browser:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>First script</title>
</head>
<body>
  <h1 id="greeting">Hello</h1>
  <button id="change">Change the heading</button>

  <script>
    const heading = document.querySelector("#greeting");
    const button = document.querySelector("#change");

    button.addEventListener("click", () => {
      heading.textContent = "You clicked it at " + new Date().toLocaleTimeString();
    });
  </script>
</body>
</html>

Click the button and the heading changes. That is the whole pattern of browser JavaScript in five lines: find an element, listen for something, change something.

The console#

Press F12 in any browser and choose Console. You can type JavaScript there and see the result immediately — no file, no saving, no reloading.

2 + 2
"hello".toUpperCase()
document.title
[1, 2, 3].map(n => n * 10)

The console is also where error messages appear. When a page “does not work”, the console is the first place to look, and it usually names the file and line.

console.log("value is", value);
console.table(arrayOfObjects);

Where JavaScript runs#

Same language, different surroundings. Browser JavaScript can touch the page but not your files; Node can read files but has no page. The core language — variables, functions, loops, objects — is identical.

What the language looks like#

// Variables
const name = "Ana";        // cannot be reassigned
let count = 0;             // can be reassigned

// Functions
function double(n) {
  return n * 2;
}

const triple = (n) => n * 3;   // arrow function, same idea

// Decisions
if (count > 10) {
  console.log("lots");
} else {
  console.log("not many");
}

// Loops
for (const item of ["a", "b", "c"]) {
  console.log(item);
}

// Objects and arrays
const person = { name: "Ana", age: 34 };
const scores = [88, 72, 95];

If you have seen Python, most of this will feel familiar — the main visible differences are the braces, the semicolons and const versus let.

Changing the page#

// Find things
const title = document.querySelector("h1");
const items = document.querySelectorAll(".item");

// Change them
title.textContent = "New heading";
title.classList.add("highlight");
title.style.color = "crimson";

// Respond to things
document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();     // stop the page reloading
  console.log("form submitted");
});

The collection of objects representing the page is called the DOM — the Document Object Model. Most browser JavaScript is reading from it and writing to it.

Fetching data#

async function loadUsers() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  if (!response.ok) {
    throw new Error("Request failed: " + response.status);
  }
  const users = await response.json();
  console.log(users[0].name);
}

loadUsers();

This is what lets a page update without reloading. It is also where JavaScript first feels genuinely powerful, so it is worth reaching reasonably early.

What to learn, in order#

1. Variables and types — const, let, strings, numbers, booleans
2. Functions — including arrow functions, since you will see them everywhere
3. Arrays and objects — nearly all real data is one or the other
4. The DOM — finding and changing elements
5. Events — responding to clicks, input and submissions
6. Async and fetch — getting data from elsewhere
7. Modules — splitting code across files

Frameworks such as React, Vue and Svelte come after all of that. They are built on these ideas, and learning them first makes the framework far easier.

Where to go next#

• JavaScript basics — the syntax in detail.
• Arrays and objects in JavaScript — the two structures everything is built from.
• Web development for beginners — how the three languages fit together.