Testen Sie Ihre Fähigkeiten: Funktionen

Einige der folgenden Fragen erfordern von Ihnen, dass Sie etwas DOM-Manipulationscode schreiben, um sie zu lösen — wie das Erstellen neuer HTML-Elemente, Setzen ihrer Textinhalte auf bestimmte Zeichenfolgenwerte und das Einfügen dieser in bestehende Elemente auf der Seite — alles über JavaScript.

Wir haben dies bisher im Kurs nicht ausdrücklich gelehrt, aber Sie haben einige Beispiele gesehen, die dies verwenden, und wir würden von Ihnen erwarten, dass Sie etwas Recherche betreiben, welche DOM-APIs Sie benötigen, um die Fragen erfolgreich beantworten zu können. Ein guter Ausgangspunkt ist unser DOM-Scripting-Einführung-Tutorial.

Für die erste Aufgabe müssen Sie eine einfache Funktion — chooseName() — erstellen, die einen zufälligen Namen aus dem bereitgestellten Array (names) in den bereitgestellten Absatz (para) druckt und sie dann einmal ausführen.

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

Für unsere zweite auf Funktionen bezogene Aufgabe müssen Sie eine Funktion erstellen, die ein Rechteck auf das bereitgestellte <canvas> (Referenzvariable canvas, Kontext verfügbar in ctx) zeichnet, basierend auf den fünf bereitgestellten Eingabevariablen:

• x — die x-Koordinate des Rechtecks.
• y — die y-Koordinate des Rechtecks.
• width — die Breite des Rechtecks.
• height — die Höhe des Rechtecks.
• color — die Farbe des Rechtecks.

Sie sollten die Leinwand vor dem Zeichnen löschen, damit im Fall der Live-Version, wenn der Code aktualisiert wird, nicht viele Rechtecke übereinander gezeichnet werden.

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

In dieser Aufgabe kehren Sie zum in Aufgabe 1 gestellten Problem zurück, mit dem Ziel, es zu verbessern. Die drei Verbesserungen, die wir von Ihnen erwarten, sind:

1. Refaktorieren Sie den Code, der die Zufallszahl generiert, in eine separate Funktion namens random(), die als Parameter zwei generische Grenzen entgegennimmt, zwischen denen die Zufallszahl liegen soll, und das Ergebnis zurückgibt.
2. Aktualisieren Sie die chooseName()-Funktion, sodass sie die Zufallszahl-Funktion verwendet, das Array, aus dem ausgewählt werden soll, als Parameter entgegennimmt (um sie flexibler zu machen) und das Ergebnis zurückgibt.
3. Drucken Sie das zurückgegebene Ergebnis in den textContent des Absatzes (para).

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

In dieser Aufgabe haben wir ein Array von Namen und verwenden Array.filter(), um ein Array von nur Namen zu erhalten, die kürzer als 5 Zeichen sind. Der Filter erhält momentan eine benannte Funktion isShort(), die die Länge des Namens überprüft und true zurückgibt, wenn der Name kürzer als 5 Zeichen ist, und false andernfalls.

Wir würden gerne, dass Sie dies in eine Pfeilfunktion umwandeln. Sehen Sie, wie kompakt Sie es gestalten können.