Testen Sie Ihre Fähigkeiten: Events

Einige der folgenden Fragen erfordern, dass Sie etwas DOM-Manipulationscode schreiben, um sie zu lösen — wie zum Beispiel neue HTML-Elemente zu erstellen, deren Textinhalt auf bestimmte Zeichenfolgenwerte zu setzen und sie in bestehende Elemente auf der Seite zu nisten — alles über JavaScript.

Wir haben dies im Kurs noch nicht explizit gelehrt, aber Sie haben einige Beispiele gesehen, die dies verwenden, und wir möchten, dass Sie einige Recherchen anstellen, welche DOM-APIs Sie benötigen, um die Fragen erfolgreich zu beantworten. Ein guter Ausgangspunkt ist unser Einführung in das DOM-Scripting-Tutorial.

Unsere erste auf Events bezogene Aufgabe beinhaltet einen <button>, der, wenn er angeklickt wird, sein Textlabel aktualisiert. Das HTML sollte nicht geändert werden; nur das JavaScript.

Um die Aufgabe abzuschließen:

1. Klicken Sie im Codeblock unten auf „Play“, um das Beispiel im MDN Playground zu bearbeiten.
2. Erstellen Sie einen Event-Listener, der den Text innerhalb des Buttons (btn) ändert, wenn er angeklickt wird, und wieder zurückändert, wenn er erneut angeklickt wird.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit der Zurücksetzen-Schaltfläche im MDN Playground löschen. Wenn Sie wirklich feststecken, können Sie die Lösung unter der Live-Ausgabe einsehen.

p {
  color: purple;
  margin: 0.5em 0;
}

* {
  box-sizing: border-box;
}

button {
  display: block;
  margin: 20px 0 20px 20px;
}

canvas {
  border: 1px solid black;
}

<button class="off">Machine is off</button>

const btn = document.querySelector("button");

// Add your code here

const btn = document.querySelector("button");

btn.addEventListener("click", () => {
  if (btn.className === "on") {
    btn.textContent = "Machine is off";
    btn.className = "off";
  } else {
    btn.textContent = "Machine is on";
    btn.className = "on";
  }
});

Jetzt schauen wir uns Tastaturereignisse an.

Um diese Aufgabe abzuschließen:

1. Klicken Sie im Codeblock unten auf „Play“, um das Beispiel im MDN Playground zu bearbeiten.
2. Erstellen Sie einen Event-Listener, der den Kreis auf der bereitgestellten Leinwand bewegt, wenn die WASD-Tasten auf der Tastatur gedrückt werden. Der Kreis wird mit der Funktion drawCircle() gezeichnet, die folgende Parameter als Eingaben verwendet:
   • x — die x-Koordinate des Kreises.
   • y — die y-Koordinate des Kreises.
   • size — der Radius des Kreises.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit der Zurücksetzen-Schaltfläche im MDN Playground löschen. Wenn Sie wirklich feststecken, können Sie die Lösung unter der Live-Ausgabe einsehen.

<canvas width="480" height="320" tabindex="0"> </canvas>

* {
  box-sizing: border-box;
}

canvas {
  border: 1px solid black;
}

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

function drawCircle(x, y, size) {
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.fillStyle = "black";
  ctx.arc(x, y, size, 0, 2 * Math.PI);
  ctx.fill();
}

let x = 50;
let y = 50;
const size = 30;

drawCircle(x, y, size);
// Don't edit the code above here!

// Add your code here

// ...
// Don't edit the code above here!

window.addEventListener("keydown", (e) => {
  switch (e.key) {
    case "a":
      x -= 5;
      break;
    case "d":
      x += 5;
      break;
    case "w":
      y -= 5;
      break;
    case "s":
      y += 5;
      break;
  }

  drawCircle(x, y, size);
});

In der nächsten auf Events bezogenen Aufgabe wird Ihr Wissen über Event-Bubbling getestet.

Um diese Aufgabe abzuschließen:

1. Klicken Sie im Codeblock unten auf „Play“, um das Beispiel im MDN Playground zu bearbeiten.
2. Setzen Sie einen Event-Listener auf das Eltern-Element der <button>s (<div class="button-bar"> … </div>), das beim Klicken auf einen der Buttons den Hintergrund der button-bar auf die im data-color-Attribut des Buttons enthaltene Farbe setzt.

Wir möchten, dass Sie dies lösen, ohne durch alle Buttons zu schleifen und jedem einen eigenen Event-Listener zu geben.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit der Zurücksetzen-Schaltfläche im MDN Playground löschen. Wenn Sie wirklich feststecken, können Sie die Lösung unter der Live-Ausgabe einsehen.

<div class="button-bar">
  <button data-color="red">Red</button>
  <button data-color="yellow">Yellow</button>
  <button data-color="green">Green</button>
  <button data-color="purple">Purple</button>
</div>

* {
  box-sizing: border-box;
}

html,
body,
.button-bar {
  height: 100%;
}

.button-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

button {
  padding: 5px 10px;
}

const buttonBar = document.querySelector(".button-bar");

// Add your code here

const buttonBar = document.querySelector(".button-bar");

function setColor(e) {
  buttonBar.style.backgroundColor = e.target.getAttribute("data-color");
}

buttonBar.addEventListener("click", setColor);