Testen Sie Ihre Fähigkeiten: Funktionen
Der Zweck dieses Fähigkeitstests ist es, Ihnen zu helfen zu beurteilen, ob Sie unsere Artikel Funktionen — wiederverwendbare Codeblöcke, Erstellen Sie Ihre eigene Funktion und Funktions-Rückgabewerte verstanden haben.
Hinweis: Um Hilfe zu erhalten, lesen Sie unseren Testen Sie Ihre Fähigkeiten-Nutzungsleitfaden. Sie können sich auch über einen unserer Kommunikationskanäle an uns wenden.
DOM-Manipulation: als nützlich erachtet
Einige der folgenden Fragen erfordern, dass Sie etwas DOM-Manipulationscode schreiben, um sie zu beantworten – wie das Erstellen neuer HTML-Elemente, das Setzen ihrer Textinhalte auf bestimmte Zeichenfolgenwerte und das Einbetten dieser Elemente in vorhandene Elemente auf der Seite – alles über JavaScript.
Dies haben wir im Kurs noch nicht ausdrücklich gelehrt, aber es wurden einige Beispiele gezeigt, die darauf basieren, und wir möchten, dass Sie einige Recherchen darüber anstellen, welche DOM-APIs Sie benötigen, um die Fragen erfolgreich zu beantworten. Ein guter Ausgangspunkt ist unser Einführung in das DOM-Scripting-Tutorial.
Interaktive Herausforderung
Zuerst geben wir Ihnen eine lustige, interaktive Herausforderung zu Funktions-Rückgabewerten, erstellt von unserem Lernpartner, Scrimba.
Sehen Sie sich das eingebettete Skript an und vervollständigen Sie die Aufgabe auf der Timeline (das kleine Geistersymbol), indem Sie den Anweisungen folgen und den Code bearbeiten. Wenn Sie fertig sind, können Sie das Skript weiter ansehen, um zu überprüfen, wie die Lösung des Lehrers mit Ihrer übereinstimmt.
Funktionen 1
Um unsere erste Funktionaufgabe abzuschließen:
- Definieren Sie eine Funktion—
chooseName()—die einen zufälligen Namen aus dem bereitgestellten Array (names) in den bereitgestellten Absatz (para) druckt. - Rufen Sie die
chooseName()-Funktion einmal auf.
Der Ausgangspunkt der Aufgabe sieht so aus (es wird noch nichts angezeigt):
Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:
const names = [
"Chris",
"Li Kang",
"Anne",
"Francesca",
"Mustafa",
"Tina",
"Bert",
"Jada",
];
const para = document.querySelector("p");
// Don't edit the code above here!
// Add your code here
Ihr aktualisierter Code sollte einen zufälligen Namen ausgeben:
Klicken Sie hier, um die Lösung anzuzeigen
Ihr fertiges JavaScript sollte ungefähr so aussehen:
// ...
// Don't edit the code above here!
function chooseName() {
const randomNumber = Math.floor(Math.random() * names.length);
const choice = names[randomNumber];
para.textContent = choice;
}
chooseName();
Funktionen 2
Diese Aufgabe erfordert, dass Sie eine Funktion erstellen, die ein Rechteck auf das bereitgestellte <canvas>-Element zeichnet (Referenzvariable canvas, Kontext verfügbar in ctx), 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.
Der Ausgangspunkt der Aufgabe sieht so aus (es wird noch nichts auf dem <canvas> gezeigt):
Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const x = 50;
const y = 60;
const width = 100;
const height = 75;
const color = "blue";
// Don't edit the code above here!
// Add your code here
Das aktualisierte Output sollte so aussehen:
Klicken Sie hier, um die Lösung anzuzeigen
Ihr fertiges JavaScript sollte ungefähr so aussehen:
// ...
// Don't edit the code above here!
function drawSquare(x, y, width, height, color) {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
}
drawSquare(x, y, width, height, color);
Funktionen 3
In dieser Aufgabe kehren Sie zum Problem aus Aufgabe 1 zurück, mit dem Ziel, drei Verbesserungen daran vorzunehmen.
Um die Aufgabe abzuschließen:
- Refaktorieren Sie den Code, der die Zufallszahl generiert, in eine separate Funktion namens
random(), die als Parameter zwei generische Grenzen für die Zufallszahl übernimmt und das Ergebnis zurückgibt. - Aktualisieren Sie die Funktion
chooseName(), sodass sie die Zufallszahl-Funktion verwendet, das zu wählende Array als Parameter nimmt (um es flexibler zu machen) und das Ergebnis zurückgibt. - Drucken Sie das zurückgegebene Ergebnis in den
textContentdes Absatzes (para).
Der Ausgangspunkt der Aufgabe sieht so aus:
Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:
const names = [
"Chris",
"Li Kang",
"Anne",
"Francesca",
"Mustafa",
"Tina",
"Bert",
"Jada",
];
const para = document.querySelector("p");
// Don't edit the code above here!
// Update the code below here
function chooseName() {
const randomNumber = Math.floor(Math.random() * names.length);
const choice = names[randomNumber];
para.textContent = choice;
}
chooseName();
Wir haben für diese Aufgabe keine fertigen Inhalte bereitgestellt, da sie genauso aussieht wie der Ausgangspunkt. Der Code wurde nur refaktoriert.
Klicken Sie hier, um die Lösung anzuzeigen
Ihr fertiges JavaScript sollte ungefähr so aussehen:
// ...
// Don't edit the code above here!
function random(min, max) {
const num = Math.floor(Math.random() * (max - min)) + min;
return num;
}
function chooseName(array) {
const choice = array[random(0, array.length)];
return choice;
}
para.textContent = chooseName(names);
Funktionen 4
In dieser Aufgabe haben wir ein Array von Namen, und wir verwenden Array.filter(), um ein Array zu erhalten, das nur die Namen enthält, die kürzer als 5 Zeichen sind. Der Filter wird derzeit eine benannte Funktion isShort() übergeben. Diese überprüft die Länge des Namens und gibt true zurück, wenn der Name weniger als 5 Zeichen lang ist, und false andernfalls.
Um die Aufgabe abzuschließen, aktualisieren Sie den Code so, dass die Funktionalität innerhalb von isShort() stattdessen direkt im filter()-Aufruf als Pfeilfunktion enthalten ist. Sehen Sie, wie kompakt Sie es machen können.
Der Ausgangspunkt der Aufgabe sieht so aus:
Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:
const names = [
"Chris",
"Li Kang",
"Anne",
"Francesca",
"Mustafa",
"Tina",
"Bert",
"Jada",
];
const para = document.querySelector("p");
// Don't edit the code above here!
// Update the code below here
function isShort(name) {
return name.length < 5;
}
const shortNames = names.filter(isShort);
para.textContent = shortNames;
Wir haben für diese Aufgabe keine fertigen Inhalte bereitgestellt, da sie genauso aussieht wie der Ausgangspunkt. Der Code wurde nur refaktoriert.
Klicken Sie hier, um die Lösung anzuzeigen
Ihr fertiges JavaScript sollte ungefähr so aussehen:
// ...
// Don't edit the code above here!
// Update the code below here
const shortNames = names.filter((name) => name.length < 5);
para.textContent = shortNames;