Testen Sie Ihre Fähigkeiten: Events

Einige der unten stehenden Fragen erfordern, dass Sie ein wenig DOM-Manipulationscode schreiben, um sie zu beantworten – zum Beispiel das Erstellen neuer HTML-Elemente, das Setzen ihrer Textinhalte auf bestimmte Zeichenfolgen und das Verschachteln dieser innerhalb bestehender Elemente auf der Seite – alles über JavaScript.

Wir haben dies im Kurs noch nicht explizit gelehrt, aber Sie haben einige Beispiele gesehen, die davon Gebrauch machen, und wir möchten, dass Sie ein wenig recherchieren, welche DOM-APIs Sie benötigen, um die Fragen erfolgreich zu beantworten. Ein guter Ausgangspunkt ist unser Einführung in 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, erstellen Sie einen Event-Listener, der verursacht, dass der Text innerhalb des Buttons (btn) sich ändert, wenn er angeklickt wird, und wieder zurückwechselt, wenn er nochmals angeklickt wird.

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";
  }
});

Nun betrachten wir Tastatur-Events.

Um diese Aufgabe zu erfüllen, 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 nimmt:

• x — die x-Koordinate des Kreises.
• y — die y-Koordinate des Kreises.
• size — der Radius des Kreises.

<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);
});

Die nächste auf Events bezogene Aufgabe testet Ihr Wissen über Event-Bubbling. Wir möchten, dass Sie einen Event-Listener auf dem Eltern-Element der <button>s (<div class="button-bar"> … </div>) setzen, der, wenn durch Klicken auf einen der Buttons ausgelöst, den Hintergrund der button-bar auf die Farbe setzt, die im data-color Attribut des Buttons enthalten ist.

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

<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);