Testen Sie Ihre Fähigkeiten: Events

DOM-Manipulation: als nützlich erachtet

Einige der unten stehenden Fragen erfordern, dass Sie etwas DOM Manipulationscode schreiben, um sie zu beantworten — wie zum Beispiel neue HTML-Elemente zu erstellen, deren Textinhalte auf bestimmte Zeichenfolgenwerte zu setzen und sie in vorhandene Elemente auf der Seite zu verschachteln — alles über JavaScript.

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

Events 1

Unsere erste auf Events bezogene Aufgabe beinhaltet einen <button>, der bei einem Klick sein Text-Label aktualisiert. Das HTML sollte nicht geändert werden, nur das JavaScript.

Um die Aufgabe abzuschließen, erstellen Sie einen Event-Listener, der bewirkt, dass sich der Text innerhalb des Buttons (btn) ändert, wenn er angeklickt wird, und sich wieder zurückändert, wenn er erneut 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";
  }
});

Events 2

Jetzt betrachten wir Tastaturevents.

Um diese Aufgabe abzuschließen, 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 die folgenden Parameter als Eingaben annimmt:

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

Events 3

In der nächsten auf Events bezogenen Aufgabe wird Ihr Wissen über Event-Bubbling getestet. Wir möchten, dass Sie einen Event-Listener auf das übergeordnete Element der <button>s (<div class="button-bar"> … </div>) setzen, der beim Klicken auf einen der Buttons 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 einen 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);

• Zurück
• Übersicht: Dynamische Skripterstellung mit JavaScript
• Weiter