Core idea: User does something-> JavaScript responds -> HTML/CSS changes -> Browser updates visually.
DOM= Document Object Model.
document.addEventListener('DOMContentLoaded', () => {
});Meaning:
"Wait until the HTML page fully loads before running JavaScript."
Why this matters:
If JavaScript runs too early, it may try to access elements that do not exist yet.
The DOM is the live HTML page inside the browser.
JavaScript changes the DOM.
Examples:
Change text:
element.textContent = 'Hello';
Add HTML:
parent.appendChild(child);
Create elements:
const div = document.createElement('div');
Add/remove classes:
element.classList.add('active');
JavaScript must first "find" HTML elements before interacting with them.
Examples:
const button = document.getElementById('next-btn');
const pages = document.querySelectorAll('.page');
Variables store data.
Example:
let currentPage = 0;
Meaning:
Store the current page number.
Examples:
let score = 10;
const totalPages = 5;
Functions are reusable blocks of instructions.
Example:
function flipNext() {
}
Event listeners wait for user interaction.
Example:button.addEventListener('click', flipNext);
Meaning:"When the button is clicked, run flipNext()."
This is one of the MOST IMPORTANT frontend concepts.
Arrays store lists of items.
Example:const pages = Array.from(document.querySelectorAll('.page'));
“Go through the webpage, grab every element with class page, turn the results into a real array, and store it inside a variable named pages.”
pages = [page1, page2, page3]
Access order:
pages[0]//page 1
pages[1]//page 2
pages[2]//page 3
Loops repeat actions.
Example:
pages.forEach((page) => {
});
"Do something for every page."
JavaScript often changes CSS classes.
Example:
page.classList.add('flipped');
Equivalent HTML change:
FROM:
<div class="page">
TO:
<div class="page flipped">
CSS then handles the animation or appearance.
REMINDER: Most frontend JavaScript works by: - adding classes - removing classes - toggling classesConditionals make decisions.
Example:
if (currentPage < totalPages - 1) { }
"Only continue if more pages exist."
Common operators:
== = equal
!= = not equal
> = greater than
< = less than
>= = greater/equal
<= =less/equal
localStorage stores data in the browser.
Example:
localStorage.setItem('theme', 'dark');
Retrieve data:
localStorage.getItem('theme');
Used for:
Data remains after page refresh.
page.style.zIndex = 10;
Equivalent CSS:
z-index: 10;
You can change:
Allows variables inside strings.
Old way: 'Page ' + currentPage Modern way: `Page ${currentPage}` Much cleaner.<button>data-page="#">Button Label</button>
button.dataset.page
e.stopPropagation();Prevents events from bubbling upward.
Example:
document.addEventListener('keydown', (e) => {
});
Example:
if (e.key === 'ArrowRight')