Testen Sie Ihre Fähigkeiten: Ereignisse
Ziel dieses Fähigkeitstests ist es, Ihnen zu helfen einzuschätzen, ob Sie unseren Artikel Einführung in Ereignisse verstanden haben.
Hinweis: Um Hilfe zu erhalten, lesen Sie unseren Leitfaden zur Nutzung der Tests. Sie können sich auch über einen unserer Kommunikationskanäle an uns wenden.
DOM-Manipulation: als nützlich erachtet
Einige der unten stehenden Fragen erfordern, dass Sie etwas DOM-Manipulationscode schreiben, um sie zu vervollständigen — wie z.B. neue HTML-Elemente zu erstellen, ihre Textinhalte mit bestimmten Zeichenfolgen zu versehen und sie in bestehende Elemente auf der Seite einzubetten — alles über JavaScript.
Wir haben dies im Kurs noch nicht explizit gelehrt, aber Sie haben einige Beispiele gesehen, die es verwenden, und wir möchten, dass Sie etwas Forschung dazu betreiben, welche DOM-APIs Sie benötigen, um die Fragen erfolgreich zu beantworten. Ein guter Ausgangspunkt ist unser DOM-Scripting-Leitfaden.
Ereignisse 1
Unsere erste auf Ereignissen basierende Aufgabe beinhaltet ein <button>, das beim Klicken sein Textlabel aktualisiert. Der HTML-Code sollte nicht geändert werden; nur das JavaScript.
Um die Aufgabe zu vervollständigen, 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.
Der Startpunkt der Aufgabe sieht wie folgt aus:
Hier ist der zugrundeliegende Code für diesen Startpunkt:
const btn = document.querySelector("button");
// Add your code here
Das aktualisierte Beispiel sollte sich so verhalten (versuchen Sie, den Button zu drücken):
Klicken Sie hier, um die Lösung anzuzeigen
Ihr fertiges JavaScript sollte ungefähr so aussehen:
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 betrachten wir Tastaturereignisse.
Um diese Aufgabe zu vollenden, 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.
Warnung: Beim Testen Ihres Codes müssen Sie zunächst auf die Leinwand fokussieren, bevor Sie Ihre Tastaturbefehle ausprobieren (z.B. darauf klicken oder mit der Tastatur darauf tabben). Andernfalls werden sie nicht funktionieren.
Der Startpunkt der Aufgabe sieht wie folgt aus:
Hier ist der zugrundeliegende Code für diesen Startpunkt:
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
Das aktualisierte Beispiel sollte sich so verhalten (klicken Sie darauf und probieren Sie dann die Tastatursteuerung aus):
Klicken Sie hier, um die Lösung anzuzeigen
Ihr fertiges JavaScript sollte ungefähr so aussehen:
// ...
// 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 Event-Listener auf das Elternelement der <button>s setzen (<div class="button-bar"> … </div>), der, wenn er durch Klicken auf einen der Buttons ausgelöst wird, den Hintergrund der button-bar auf die im data-color-Attribut des Buttons enthaltene Farbe setzt.
Wir möchten, dass Sie dies ohne Schleifen durch alle Buttons lösen und jedem einen eigenen Event-Listener geben.
Der Startpunkt der Aufgabe sieht wie folgt aus:
Hier ist der zugrundeliegende Code für diesen Startpunkt:
const buttonBar = document.querySelector(".button-bar");
// Add your code here
Das aktualisierte Beispiel sollte sich so verhalten (versuchen Sie, die Buttons zu klicken):
Klicken Sie hier, um die Lösung anzuzeigen
Ihr fertiges JavaScript sollte ungefähr so aussehen:
const buttonBar = document.querySelector(".button-bar");
function setColor(e) {
buttonBar.style.backgroundColor = e.target.getAttribute("data-color");
}
buttonBar.addEventListener("click", setColor);