Tilbage til Forms med JavaScript

1. semester / Tema 4: Grundlæggende UI

JavaScript recap til forms

Få styr på de få JS-greb, der går igen i simple formular-øvelser.

Se undervisningsslides

Relevante links

TL;DR

  1. Du kommer langt med querySelector(), addEventListener(), textContent og classList.
  2. Først finder du et element. Derefter reagerer du på en handling.
  3. Brug funktioner til at samle det, der skal ske.
  4. Hold koden lille og konkret i starten.

Hvis du kun husker én ting: Du kommer langt med få JS-greb: find elementer, lyt efter en handling og opdatér noget på siden.

De vigtigste grundgreb

Til simple form-opgaver er der nogle få JavaScript-metoder, som går igen hele tiden:

Det er nok til overraskende mange begynderscenarier.

Først: find elementerne

Det første skridt er næsten altid at lave en henvisning til et element i DOM’en:

const form = document.querySelector("form");

Samme mønster gælder for knapper, overskrifter, output-felter og inputs. Hvis du ikke har fat i elementet endnu, kan du heller ikke ændre noget på siden.

Derefter: reagér på en handling

En typisk begyndermodel ser sådan ud:

// 1. find elementerne
const heading = document.querySelector("h1");
const btn = document.querySelector("button");


// 2. beskriv, hvad der skal ske
function sayHello() {
  heading.textContent = "Hello World!";
}


// 3. kobl det til en handling
btn.addEventListener("click", sayHello);

Her sker der tre ting:

  1. Et element bliver fundet med querySelector()
  2. En funktion beskriver, hvad der skal ske
  3. addEventListener() kobler funktionen til en brugerhandling

Det samme mønster går igen, når du senere arbejder med forms.

textContent og classList

To af de mest brugbare egenskaber i simple øvelser er:

Det er derfor de passer så godt sammen med forms. Enten viser du data i et outputfelt, eller også ændrer du en class for at vise en ny tilstand.

Øvelse

Hvis du vil varme op med de grundlæggende DOM-greb, er denne et godt sted at starte. Lav henvisninger til hhv. h1 og button ved hjælp af const og querySelector(). Erstat document.querySelector('h1') og document.querySelector('button') med dine variabler: