Testen Sie Ihre Fähigkeiten: Funktionen

Einige der unten stehenden Fragen erfordern, dass Sie etwas DOM-Manipulationscode schreiben, um sie zu vervollständigen — wie z.B. das Erstellen neuer HTML-Elemente, das Setzen ihres Textinhalts auf bestimmte Zeichenfolgenwerte und das Verschachteln dieser Elemente in vorhandenen Elementen auf der Seite — alles über JavaScript.

Wir haben dies im Kurs noch nicht explizit gelehrt, aber Sie haben einige Beispiele gesehen, die dies verwenden, und wir möchten, dass Sie sich informieren, welche DOM-APIs Sie benötigen, um die Fragen erfolgreich zu beantworten. Ein guter Ausgangspunkt ist unser Leitfaden Einführung in das DOM-Skripting.

Für die erste Aufgabe müssen Sie eine einfache Funktion erstellen — chooseName() — die einen zufälligen Namen aus dem bereitgestellten Array (names) in den bereitgestellten Absatz (para) druckt und diese 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 dem bereitgestellten <canvas> (Referenzvariable canvas, Kontext verfügbar in ctx) zeichnet, basierend auf fünf bereitgestellten Eingangsvariablen:

• 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 möchten die Leinwand vor dem Zeichnen löschen, damit, wenn der Code im Falle der Live-Version 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 zu dem in Aufgabe 1 gestellten Problem zurück, mit dem Ziel, es zu verbessern. Die drei Verbesserungen, die Sie vornehmen sollen, sind:

1. Refaktorieren Sie den Code, der die Zufallszahl generiert, in eine separate Funktion namens random(), die zwei generische Grenzen als Parameter nimmt, zwischen denen die Zufallszahl liegen soll, und das Ergebnis zurückgibt.
2. Aktualisieren Sie die chooseName()-Funktion, so dass sie die Zufallszahlenfunktion verwendet, das Array, aus dem gewählt werden soll, als Parameter übernimmt (um es 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 wird derzeit an eine benannte Funktion isShort() übergeben, die die Länge des Namens prüft und true zurückgibt, wenn der Name weniger als 5 Zeichen lang ist, und false ansonsten.

Wir möchten, dass Sie dies in eine Pfeilfunktion umwandeln. Sehen Sie, wie kompakt Sie es machen können.