JavaScript og DOM — gør siden levende

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.

§Hvad DOM'en er

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.

§Hændelser — at reagere på brugeren

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.

§Asynkront arbejde og datahentning

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.

• 01DOM: browserens model af siden, som JavaScript kan ændre
• 02Hændelse: noget der sker — klik, tast, indsendelse — som kode kan reagere på
• 03Lytter: en funktion knyttet til en hændelse på et element
• 04Asynkront: at vente på et svar uden at blokere resten af siden
• 05JSON: det tekstformat, et API typisk svarer med

§Skil logik fra struktur

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