Skip to content

JavaScript

Learn JavaScript — the programming language of the web that makes pages interactive.

What you'll learn

  • What JavaScript is and why it runs in browsers
  • How JS interacts with HTML through the DOM
  • How event handlers respond to user actions
  • The difference between JavaScript and Java

Concept

JavaScript

JavaScript is the programming language of the web. Every modern browser has a built-in JavaScript engine, so JS code runs directly on the user's device without any installation. HTML gives a page structure; CSS gives it style; JavaScript gives it behavior.

Interactivity Through the DOM

The DOM (Document Object Model) is the browser's in-memory representation of your HTML. JavaScript can read and modify the DOM — change text, add elements, update styles — in response to user actions.

// Find an element and change its text
const heading = document.getElementById("title");
heading.textContent = "Welcome back!";

Event Handlers

An event is something that happens — a click, a keypress, a page load. You attach a handler — a function that runs when the event fires:

const button = document.querySelector("#myButton");
button.addEventListener("click", () => {
  alert("You clicked the button!");
});

This is how every interactive web feature works: forms that validate, menus that open, data that loads without a page refresh.

JavaScript vs. Java

Despite the name, JavaScript and Java are completely different languages. JavaScript was named "JavaScript" as a marketing move in 1995 to ride on Java's popularity. They have different syntax, different runtimes, and different use cases. Do not confuse them.

Where JS Runs

  • In the browser — manipulating the DOM, handling events, fetching data.
  • On the server — via Node.js, handling files, databases, and APIs.

The same language, two environments. This is why JavaScript is called "the one language you can use everywhere."

Example

              // A counter that updates the DOM when a button is clicked
let count = 0;
const display = document.getElementById("count");
const button = document.getElementById("increment");

button.addEventListener("click", () => {
  count++;
  display.textContent = `Clicked ${count} times`;

  // Change color based on count
  if (count > 5) {
    display.style.color = "red";
  } else {
    display.style.color = "black";
  }
});

addEventListener listens for clicks. Each click increments the counter, updates the DOM text, and conditionally changes the color. This is the pattern behind most interactive UI.

Try it

  • Markdown Previewer

    This tool is built with JavaScript — it reacts to your typing in real time, just like interactive web apps.

Common mistakes

The mistake

Thinking JavaScript and Java are related.

The fix

They are entirely different languages. JavaScript runs in browsers and Node.js; Java runs on the JVM. The similar name is a historical marketing accident.

The mistake

Modifying the DOM before it has loaded.

The fix

Wrap DOM code in DOMContentLoaded, or place your <script> at the end of <body>. Otherwise document.getElementById may return null because the element does not exist yet.

Related Resources

Related Snippets

Related Cheatsheets

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors