App Lab (code.org) – cheat sheet

1. Arbejdsgangen: Design ↔ Code ↔ Data

Design-fanen: træk knapper, tekstfelter og billeder ind på skærmen. Hvert element får et id (fx "navnInput") – giv dem gode navne med det samme. Code-fanen: her skriver du JavaScript, der refererer til elementernes id. Data-fanen: her opretter du tabeller med kolonner, som koden kan læse og skrive i.

2. Events: få appen til at reagere

onEvent("gemKnap", "click", function() {
  setText("statusLabel", "Gemt!");
});

onEvent("navnInput", "change", function(event) {
  console.log("Feltet blev ændret");
});

onEvent("skærm2", "click", function(event) {
  console.log(event.targetId); // hvilket element?
});

Typiske events: "click" (knapper), "change" (input, dropdown, slider, checkbox), "input" (hvert tastetryk). I skærm-events giver event.targetId id'et på det element, der blev klikket på – praktisk når ét event skal håndtere mange elementer.

3. Læs og skriv elementer

setText("overskrift", "Hej verden");
var navn = getText("navnInput");      // altid tekst!

var alder = getNumber("alderInput");  // som tal
setNumber("pointLabel", 42);

// Dropdowns og checkboxes
var valg = getText("frugtDropdown");
var tilmeldt = getChecked("nyhedsbrevBox");

// Billeder
setImageURL("foto", "kat.png");

4. Flere skærme og navigation

setScreen("resultatSkærm");

// Send data videre via variabler:
var brugerNavn = getText("navnInput");
onEvent("startKnap", "click", function() {
  setScreen("spilSkærm");
  setText("hilsenLabel", "Hej " + brugerNavn);
});

Hver skærm er selv et element med id. Variabler overlever skærmskift, så gem input i variabler før du skifter – elementerne på den gamle skærm kan stadig læses, men det er pænere at have data i variabler.

5. Vis/skjul og flyt ting

hideElement("hjælpPanel");
showElement("hjælpPanel");
deleteElement("midlertidigLabel");

// Placering og størrelse
setPosition("spiller", 100, 150);   // x, y
setSize("logo", 80, 60);
var x = getXPosition("spiller");

Trick: lav en "popup" ved at lægge et panel ovenpå i Design og skjule det med hideElement, når appen starter – vis det ved behov.

6. Data-tabeller: sådan er de bygget

En tabel oprettes i Data-fanen med navngivne kolonner (fx navn, point). Hver række er et record-objekt med kolonnenavnene som properties plus et automatisk id:

// Tabel "highscores" med kolonnerne navn, point
// En række i koden ser sådan ud:
{ id: 1, navn: "Ada", point: 42 }

id er nøglen: den bruges til updateRecord og deleteRecord. Kolonnenavne er case-sensitive, ligesom element-id'er.

7. Opret og læs records (med callback)

// Gem ny række
createRecord("highscores",
  { navn: "Ada", point: 42 },
  function(record) {
    console.log("Gemt med id " + record.id);
  });

// Læs ALLE rækker som en liste
readRecords("highscores", {}, function(records) {
  for (var i = 0; i < records.length; i++) {
    console.log(records[i].navn + ": " + records[i].point);
  }
});

8. Filtrér, opdatér og slet

// Filter: kun rækker der matcher
readRecords("highscores", { navn: "Ada" },
  function(records) {
    // kun Adas rækker
  });

// Opdatér: hent id, ret, gem
readRecords("highscores", { navn: "Ada" },
  function(records) {
    var r = records[0];
    r.point = r.point + 10;
    updateRecord("highscores", r, function() {
      console.log("Opdateret");
    });
  });

// Slet på samme måde via id
deleteRecord("highscores", r, function() {});

Mønsteret er altid det samme: readRecords med filter → find rækken og dens id → updateRecord/deleteRecord. Husk at sende hele record-objektet (inkl. id) tilbage til update.

9. Vis tabel-data på skærmen

// Trick: byg én lang tekst af en liste
readRecords("highscores", {}, function(records) {
  var linjer = [];
  for (var i = 0; i < records.length; i++) {
    linjer.push(records[i].navn + " – " +
                records[i].point);
  }
  setText("listeLabel", linjer.join("\n"));
});

join("\n") samler listen med linjeskift. getColumn("tabel", "kolonne") henter én hel kolonne som liste – god til at regne sum eller finde max. drawChartFromRecords laver et diagram direkte fra en tabel.

10. Nøgle-værdi-lageret (simpel gemning)

setKeyValue("sidsteLevel", 3, function() {
  console.log("Gemt");
});

getKeyValue("sidsteLevel", function(værdi) {
  if (værdi === undefined) {
    værdi = 1; // fandtes ikke endnu
  }
  console.log("Start på level " + værdi);
});

Til én enkelt værdi (fx højeste level) er setKeyValue/getKeyValue nemmere end en tabel. Også asynkron – brug callbacken.

11. Timere og løkker

// Kør én gang efter 2 sekunder
setTimeout(function() {
  hideElement("startSkærmBillede");
}, 2000);

// Kør igen og igen (spil-loop)
timedLoop(100, function() {
  setPosition("bold",
    getXPosition("bold") + 2,
    getYPosition("bold"));
});

stopTimedLoop(); // stop den igen

timedLoop(ms, f) er App Labs svar på et game loop – perfekt til animation og spil. Brug setInterval/clearInterval som alternativ.

12. Ekstra værktøjer

playSound("sound://category_hits/point.mp3");
playSpeech("Du vandt!", "female", "da-DK");

var tal = randomNumber(1, 6); // terning
var tid = getTime();          // millisekunder nu

// Web-API (kræver tilladt domæne)
startWebRequest("https://api.dk/vejr",
  function(status, type, content) {
    var data = JSON.parse(content);
  });

13. Hurtig oversigt

14. Typiske faldgruber

• Id'et i koden matcher ikke Design – tjek store/små bogstaver.
• getText giver tekst, ikke tal: brug getNumber til regning.
• Data-funktioner er asynkrone: kode efter kaldet kan IKKE bruge resultatet – det skal ind i callbacken.
• Tabellen skal oprettes i Data-fanen med de rigtige kolonnenavne, før koden virker.
• updateRecord uden id på recorden fejler – brug recorden fra readRecords.
• Kolonnenavne med mellemrum eller danske tegn giver bøvl – hold dem simple, fx point ikke Antal Point.
• Debug med console.log og Debug-konsollen nederst i App Lab.