MINT lernen

Ereignisse und Klicks

Zwei Textaufgaben mit Hinweisen und Erwartungshorizont — eine Ampel per Klick und eine Figur per Pfeiltasten.

Dein Fortschritt:
0 / 0 Aufgaben
1

Die Fußgängerampel

AFB I–II

Für ein Verkehrsprojekt schaltet ein Knopf eine gezeichnete Ampel weiter:

let phase = "rot";
knopf.addEventListener("click", weiter);
function weiter() {
  if (phase === "rot") {
    phase = "grün";
  } else if (phase === "grün") {
    phase = "gelb";
  } else {
    phase = "rot";
  }
  anzeige.textContent = phase;
}
  1. Beschreibe, was beim ersten Klick nacheinander passiert.
  2. Ermittle die Anzeige nach 1, 2, 3 und 4 Klicks.
  3. Erkläre, warum in Zeile 2 weiter ohne Klammern steht.

Hinweise

Hinweis zu Aufgabe a)
Ereignis → Bedingung prüfen → Zustand → Anzeige.
Hinweis zu Aufgabe b)
Die Phasen wiederholen sich.
Hinweis zu Aufgabe c)
Was würde weiter() an dieser Stelle tun?

Erwartungshorizont

Erwartungshorizont zu Aufgabe a)

Der Browser erzeugt ein click-Ereignis und ruft weiter auf. phase === "rot" ist true, also wird phase zu „grün“; die anderen Zweige werden übersprungen. Zum Schluss zeigt die Anzeige „grün“.

Erwartungshorizont zu Aufgabe b)

1 Klick: grün · 2: gelb · 3: rot · 4: grün.

Erwartungshorizont zu Aufgabe c)

Der Browser soll die Funktion bei jedem Klick selbst aufrufen — also wird ihm die Funktion übergeben. Mit Klammern würde sie sofort beim Laden einmal laufen (Anzeige „grün“) und ihr Ergebnis undefined übergeben; Klicks bewirkten dann nichts.

2

Figur mit Pfeiltasten

AFB II–III

In einem Spiel steht eine Figur in einem Feld. Ihre Höhe steht in y (0 unten bis 300 oben). Tom hat angefangen:

let y = 0;
document.addEventListener("keypress", bewege);
function bewege(event) {
  if (event.key === "ArrowUp") {
    y = y + 20;
  }
  figur.style.bottom = y + "px";
}

Beim Drücken von ↑ passiert nichts. Hinweis: Das veraltete Ereignis keypress wird für Pfeiltasten nicht ausgelöst.

  1. Überprüfe Toms Programm und gib die nötige Korrektur an.
  2. Entwickle die Funktion weiter: ↓ soll die Figur um 20 senken, und y darf nie unter 0 oder über 300 liegen.
  3. Beurteile, ob die Steuerung für alle Nutzer geeignet ist, und mache einen Verbesserungsvorschlag.

Hinweise

Hinweis zu Aufgabe a)
Welches Ereignis kennst du für gedrückte Tasten?
Hinweis zu Aufgabe b)
Nach dem Ändern prüfen und notfalls auf die Grenze setzen.
Hinweis zu Aufgabe c)
Denke an Handys und Tablets.

Erwartungshorizont

Erwartungshorizont zu Aufgabe a)

Das Ereignis muss "keydown" heißen: document.addEventListener("keydown", bewege);.

Erwartungshorizont zu Aufgabe b)

Zusätzlich else if (event.key === "ArrowDown") { y = y - 20; }, danach if (y < 0) { y = 0; } und if (y > 300) { y = 300; }, erst dann figur.style.bottom = y + "px";.

Erwartungshorizont zu Aufgabe c)

Auf Handys und Tablets gibt es keine Pfeiltasten — dort ist das Spiel nicht bedienbar. Vorschlag: zusätzlich zwei Knöpfe ▲/▼ mit click-Listenern, die dieselbe Änderung von y auslösen (am besten über eine gemeinsame Funktion).