Testen Sie Ihre Fähigkeiten: Events
Ziel dieses Tests ist es, zu beurteilen, ob Sie unseren Artikel Einführung in Events verstanden haben.
Hinweis: Sie können Lösungen ausprobieren, indem Sie den Code herunterladen und in einem Online-Editor wie CodePen, JSFiddle oder Glitch einfügen. Bei einem Fehler wird dieser im Ergebnisbereich auf der Seite oder in der JavaScript-Konsole des Browsers protokolliert, um Ihnen zu helfen.
Wenn Sie nicht weiterkommen, können Sie uns über einen unserer Kommunikationskanäle kontaktieren.
DOM-Manipulation: als nützlich erachtet
Einige der untenstehenden Fragen erfordern, dass Sie ein wenig DOM-Manipulationscode schreiben, um sie zu lösen – wie das Erstellen neuer HTML-Elemente, das Setzen ihrer Textinhalte auf bestimmte Zeichenfolgenwerte und das Verschachteln 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 darauf aufbauen, 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 DOM-Scripting-Einführung Tutorial.
Events 1
In unserer ersten Aufgabe zu Events müssen Sie einen Event-Handler erstellen, der bewirkt, dass sich der Text im Button (btn) ändert, wenn er angeklickt wird, und sich wieder zurückändert, wenn erneut darauf geklickt wird.
Das HTML sollte nicht verändert werden; nur das JavaScript.
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Events 2
Nun schauen wir uns Tastatur-Events an. Um diese Bewertung zu bestehen, müssen Sie einen Event-Handler erstellen, der den Kreis über die bereitgestellte Leinwand bewegt, wenn die WASD-Tasten auf der Tastatur gedrückt werden. Der Kreis wird mit der Funktion drawCircle() gezeichnet, welche die folgenden Parameter als Eingaben benötigt:
x— die x-Koordinate des Kreises.y— die y-Koordinate des Kreises.size— der Radius des Kreises.
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Events 3
In der nächsten Aufgabe zu Events müssen Sie einen Event-Listener auf das Elternelement der <button>s (<div class="button-bar"> … </div>) setzen, der beim Klicken eines 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.
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.