JavaScript
JavaScript is the engine of the modern web. It turns static documents into interactive applications, handling logic, data, and user events.
JavaScript Overview
If HTML is the skeleton and CSS is the skin, JavaScript is the Brain and Muscles. It's the part of your site that thinks, reacts, and moves.
The Light Switch
Think of JS as the wiring that allows a light switch (HTML) to actually turn on the bulb.
State Management
JS keeps track of information (state) and updates the page when that info changes.
Variables
Variables are how we store and name data so we can use it later.
let xp = 100;
// We can change let, but not const
xp = xp + 15;
Think of variables as labeled boxes. const is a box you tape shut once it's full. let is a box you can reopen and swap the contents of.
Data Types
JavaScript needs to know what kind of data it's working with.
JS is dynamically typed. This means a variable can hold a string, then later be reassigned to a number. Be careful - this can lead to bugs!
let notAssigned; // undefined
let explicitEmpty = null;
Functions
Functions are reusable recipes of code. They take inputs (parameters), perform logic, and return outputs.
The Blender
You put fruit in (params), press a button (logic), and get a smoothie back (return).
return a + b;
}
// Arrow Function (modern)
const multiply = (x, y) => x * y;
The DOM
The Document Object Model is how JS talks to your HTML. It's a tree structure where every element is a "node" you can change.
Events
Events are how your app "hears" the user. Clicks, scrolls, and keypresses are all events.
Try it out
Practice connecting logic to user actions in our interactive playground.
btn.addEventListener("click", () => {
console.log("User clicked!");
});