Hændelser, manipulation af siden og asynkron datahentning
HTML og CSS beskriver, hvordan siden ser ud, når den indlæses. JavaScript er det, der får den til at reagere bagefter: åbne en menu ved et klik, validere en formular, hente nye data og opdatere indholdet, uden at hele siden skal hentes forfra. Nøglen til det hele er DOM'en.
Når browseren indlæser HTML, bygger den en model af siden i hukommelsen kaldet DOM (Document Object Model). Det er et træ af elementer, som JavaScript kan læse og ændre. Ændrer du noget i DOM'en, opdaterer browseren det, brugeren ser — det er sådan en side bliver levende efter indlæsningen. Du finder elementer i træet, læser eller ændrer deres indhold og egenskaber, og tilføjer eller fjerner elementer.
Det meste interaktion bygger på hændelser: et klik, en tast, at en formular sendes, at siden er færdig med at indlæse. Man lytter efter en hændelse på et element og knytter en funktion til den, som kører, når hændelsen sker. Sådan kobler man brugerens handlinger sammen med kode, der gør noget. Hold disse funktioner små og lad dem kalde andre funktioner, så koden bliver til at læse.
Noget tager tid — især at hente data over nettet. Det må ikke fryse hele siden, mens man venter. Derfor er JavaScript asynkront: man beder om dataene og får besked, når svaret er der, mens resten af siden bliver ved at virke. Når svaret kommer — typisk som JSON fra et API — opdaterer man DOM'en med det nye indhold. Det er den teknik, der lader en side hente mere uden at genindlæse.
Læg ikke JavaScript-kode direkte ind i HTML-elementerne. Hold koden samlet i sine egne filer og knyt opførslen til siden derfra. Det holder de tre ansvarsområder — struktur, udseende og opførsel — adskilt, præcis som med CSS, og gør siden meget lettere at læse og rette i.
“JavaScript uden DOM er bare et regnestykke. Det er mødet med siden, der gør sproget til web.”
— Almindelig læreregel i frontendudvikling