Testen Sie Ihre Fähigkeiten: Funktionen

Einige der unten stehenden Fragen erfordern es, dass Sie etwas DOM-Manipulationscode schreiben, um sie zu beantworten — z.B. das Erstellen neuer HTML-Elemente, das Setzen ihres Textinhalts auf bestimmte Zeichenfolgenwerte und das Einfügen in vorhandene Elemente auf der Seite — alles über JavaScript.

Wir haben dies im Kurs noch nicht explizit gelehrt, aber Sie werden einige Beispiele gesehen haben, die es 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 Dokumente manipulieren-Tutorial.

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

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

Für unsere zweite, funktionsbezogene Aufgabe müssen Sie eine Funktion erstellen, die ein Rechteck auf dem bereitgestellten <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 beim Aktualisieren des Codes im Falle der Live-Version nicht viele Rechtecke übereinander gezeichnet werden.

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

In dieser Aufgabe kehren Sie zu dem Problem aus Aufgabe 1 zurück, um es zu verbessern. Die drei Verbesserungen, die wir von Ihnen erwarten, sind:

1. Refaktorisieren Sie den Code, der die Zufallszahl generiert, in eine separate Funktion namens random(), die zwei allgemeine Grenzen als Parameter hat, zwischen denen die Zufallszahl liegen soll, und geben Sie das Ergebnis zurück.
2. Aktualisieren Sie die chooseName()-Funktion, sodass sie die Zufallszahlenfunktion nutzt, das Array, aus dem ausgewählt werden soll, als Parameter nimmt (was sie flexibler macht) und das Ergebnis zurückgibt.
3. Geben Sie das zurückgegebene Ergebnis in den textContent des Absatzes (para) aus.

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

In dieser Aufgabe haben wir ein Array von Namen und verwenden Array.filter(), um ein Array nur mit 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 überprüft und true zurückgibt, wenn der Name weniger als 5 Zeichen lang ist, sonst false.

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