Testen Sie Ihre Fähigkeiten: Ereignisse

DOM-Manipulation: als nützlich erachtet

Einige der folgenden Fragen erfordern, dass Sie etwas DOM Manipulationscode schreiben, um sie zu vervollständigen — wie das Erstellen neuer HTML-Elemente, das Setzen ihrer Textinhalte auf bestimmte Zeichenfolgenwerte und das Einfügen in vorhandene Elemente auf der Seite — alles über JavaScript.

Wir haben dies noch nicht explizit in dem Kurs unterrichtet, aber Sie werden einige Beispiele gesehen haben, die davon Gebrauch machen, und wir möchten, dass Sie etwas Forschung darüber betreiben, welche DOM-APIs Sie benötigen, um die Fragen erfolgreich zu beantworten. Ein guter Ausgangspunkt ist unser DOM-Scripting-Einführung Tutorial.

Ereignisse 1

Unsere erste auf Ereignissen basierende 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 zu vervollständigen, erstellen Sie einen Ereignis-Listener, der bewirkt, dass sich der Text innerhalb des Buttons (btn) ändert, wenn darauf geklickt wird, und erneut ändert, wenn erneut darauf geklickt 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";
  }
});

Ereignisse 2

Nun wollen wir uns Tastaturereignisse ansehen.

Um diese Aufgabe zu vervollständigen, erstellen Sie einen Ereignis-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 die folgenden 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);
});

Ereignisse 3

In der nächsten auf Ereignissen basierenden Aufgabe wird Ihr Wissen über das Ereignis-Bubbling getestet. Wir möchten, dass Sie einen Ereignis-Listener auf dem Eltern-Element der <button>s (<div class="button-bar"> … </div>) setzen, der, wenn er durch Klicken auf einen der Buttons aufgerufen wird, 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 alle Buttons zu durchlaufen und jedem seine eigenen Ereignis-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);

• Zurück
• Übersicht: Dynamisches Scripting mit JavaScript
• Weiter