Forstå koden bag

1) Design & ID’er

I Design-fanen giver du hver komponent et ID. ID’et er navnet, koden bruger for at finde den rigtige ting på skærmen.

Hvorfor? Uden et ID kan koden ikke vide, hvilket felt/label/knap der menes.
Gode navne: korte, beskrivende, uden mellemrum, kan bruge bindestreg eller underscore. De gode navne starter med hvilken slags UI objekt det er, f.eks. "lbl" for en label, "text" for en text, "btn" for en knap, osv.

Eksempler på gode ID-navne

inputBelob, lblSvar, btnBeregn, lblValuta
Undgå: TextInput1, label2, knap (for uklart)

Mini-demo (ID bruges i koden)

// Antag at du i Design har en label med ID "lblSvar"
setText("lblSvar", "Klar! Skriv et tal.");

Mini-øvelse

Giv et tekstfelt ID’et inputBelob og en label ID’et lblSvar.
Skriv én linje kode der sætter lblSvar til teksten “Hej!”

2) Funktioner/metoder

Du styrer UI’et med funktioner. De vigtigste i starten:

setText(id, tekst) – sætter tekst i fx label, knap eller tekstfelt.
getText(id) – læser tekst fra et tekstfelt/label.
getNumber(id) – læser tal (konverterer tekst til tal).

Mini-demo (uden events)

// Antag disse ID’er i Design: inputBelob, lblValuta, lblSvar
setText("lblValuta", "DKK → EUR");
setText("inputBelob", "150"); // forfylder tekstfeltet

var kr = getNumber("inputBelob");
var kurs = 7.45;
var eur = kr / kurs;
setText("lblSvar", eur.toFixed(2) + " €");

Mini-øvelse

Skift kurs til 7.46 og se forskellen på resultatet.
Ændr teksten i lblValuta til noget, du selv vælger.

3) Events

onEvent binder det hele sammen. Koden kører, når brugeren gør noget (fx klikker).

// ID’er antaget i Design: inputBelob, btnBeregn, lblSvar
onEvent("btnBeregn", "click", function() {
  var kr = getNumber("inputBelob");
  var kurs = 7.45;
  var eur = kr / kurs;
  setText("lblSvar", eur.toFixed(2) + " €");
});

Mini-øvelse

Tilføj en ny knap btnNulstil, og skriv kode der sætter inputBelob og lblSvar tomme ved klik.
Lav en onEvent der også beregner, når man trykker Enter i tekstfeltet (eventtype: change kan bruges).

4) Fejlfinding

Tjek ID-match: Stav ID’er i koden præcis som i Design. Et enkelt forkert bogstav = ingen ændring.
Brug konsollen: console.log() viser værdier, så du kan se, hvad der sker.
Tal vs. tekst: Hvis du regner med tekst, får du NaN. Brug getNumber() til beregninger.

// Eksempel: find fejl ved klik
onEvent("btnBeregn", "click", function() {
  var kr = getNumber("inputBelob");
  console.log("kr =", kr, "(type:", typeof kr + ")");
  if (isNaN(kr)) {
    console.log("OBS: input er ikke et tal:", getText("inputBelob"));
  }
});

Mini-øvelse

Bevidst fejlstav et ID i koden (fx lblSvar → lblSvaa). Ret det igen – hvad skete der?
Log værdien fra getText("inputBelob") før du kalder getNumber().

🔚 Tjekliste (exit ticket)

[ ] Jeg har givet mine komponenter gode ID’er.
[ ] Jeg kan forklare forskellen på getText og getNumber.
[ ] Jeg kan bruge onEvent til at køre kode ved klik.
[ ] Jeg kan logge til konsollen for at finde fejl.
[ ] Min app opdaterer en label med setText.