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
Where do we store data temporarily in our logic? Variables! In JavaScript, modern variables are defined using const and let.
RAM vs Database
Temporary data is stored in RAM, not permanently saved in a database.
let xp = 100;
// playerName = "John"; // ❌ ERROR!
// We can change let, but not const
xp = xp + 15; // ✅ OK!
Variables declared with const cannot be reassigned. They are primarily used for values that should remain constant throughout your application.
Variables declared with let can be reassigned. They are ideal for storing temporary data that you plan to update later on.
This is the legacy way of declaring variables. It is generally avoided in modern JavaScript development.
Data Types
JavaScript needs to know what kind of data it's working with. The two most fundamental types you'll use every day are Strings and Numbers.
Strings Need Quotes
A string must be enclosed in quotes. If you omit the quotes, JavaScript will treat the word as a variable name, which will lead to an error if that variable isn't defined.
Jeremiah // Error: Variable not defined
Numbers do Math
Numbers allow you to perform mathematical operations, such as addition, subtraction, multiplication, and division.
Unlike some other programming languages that distinguish between integers and floats (decimals), JavaScript represents all of them simply as numbers.
The Concatenation Quirk
When you use the plus operator (+) with strings, JavaScript concatenates them. If you add a number to a string, JavaScript will automatically convert the number to a string and combine them.
Functions
Functions are reusable recipes of code. They take inputs (parameters), perform logic, and return outputs.
return a + b;
}
// Arrow Function (modern)
const multiply = (x, y) => x * y;
The DOM
The Document Object Model is how JavaScript talks to your HTML. It's the bridge that allows us to change our page dynamically.
HTML as Objects
JavaScript treats all HTML elements as objects. This concept is fundamental to the Document Object Model (DOM) and forms the basis for how modern popular frontend frameworks interact with the web page.
Targeting Elements
Styling with JS
You don't always need CSS to style elements. With DOM manipulation, you can directly apply styles to elements using JavaScript. Any CSS property can be controlled dynamically through code.
footer.style.fontSize = "45px";
Events
Events are how your web page detects and responds to user interactions, like clicks, scrolls, and keypresses.
addEventListener
The addEventListener method takes two arguments: the type of event to listen for (like "click" or "doubleclick"), and the function you want to execute when that event happens.
The Callback Rule
When passing a function as an event listener, do not include parentheses. If you add parentheses, the function will execute immediately rather than waiting for the user to click.
btn.addEventListener("click", handleClick);
btn.addEventListener("click", handleClick());
Try it out
Practice selecting elements and connecting logic to user actions in our interactive playground.