Testen Sie Ihre Fähigkeiten: Funktionen

Einige der unten stehenden Fragen erfordern von Ihnen, etwas DOM-Manipulationscode zu schreiben, um sie zu vervollständigen — etwa neue HTML-Elemente zu erstellen, deren Textinhalte auf spezifische Zeichenfolgenwerte festzulegen und sie innerhalb bestehender Elemente auf der Seite zu verschachteln — alles über JavaScript.

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

Zunächst geben wir Ihnen eine unterhaltsame, interaktive Herausforderung, die Rückgabewerte von Funktionen behandelt, erstellt von unserem Lernpartner, Scrimba.

Sehen Sie sich das eingebettete Scrim an und erfüllen Sie die Aufgabe auf der Zeitachse (das kleine Geistersymbol), indem Sie den Anweisungen folgen und den Code bearbeiten. Wenn Sie fertig sind, können Sie das Scrim weiter beobachten, um zu überprüfen, wie die Lösung des Lehrers mit Ihrer übereinstimmt.

Um unsere erste Aufgabenstellung zu Funktionen abzuschließen:

1. Definieren Sie eine Funktion — chooseName() — die einen zufälligen Namen aus dem bereitgestellten Array (names) in den bereitgestellten Absatz (para) ausgibt.
2. Rufen Sie die Funktion chooseName() einmal auf.

<p></p>

* {
  box-sizing: border-box;
}

p {
  color: purple;
  margin: 0.5em 0;
}

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

// ...
// 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();

Diese Aufgabe erfordert, dass 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.

<canvas width="240" height="160"></canvas>

canvas {
  border: 1px solid black;
}

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

// ...
// 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);

In dieser Aufgabe kehren Sie zum Problem aus Aufgabe 1 zurück, mit dem Ziel, drei Verbesserungen daran vorzunehmen.

Um die Aufgabe zu vervollständigen:

1. Refaktorisieren Sie den Code, der die zufällige Zahl generiert, in eine separate Funktion namens random(), die als Parameter zwei generische Grenzen nimmt, zwischen denen die Zufallszahl liegen soll, und das Ergebnis zurückgibt.
2. Aktualisieren Sie die Funktion chooseName(), sodass sie die Zufallszahlenfunktion nutzt, das Array, aus dem gewählt werden soll, als Parameter nimmt (um sie flexibler zu machen) und das Ergebnis zurückgibt.
3. Geben Sie das zurückgegebene Ergebnis in den textContent des Absatzes (para) aus.

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();

// ...
// Don't edit the code above here!

function random(min, max) {
  const num = Math.floor(Math.random() * (max - min)) + min;
  return num;
}

function chooseItem(array) {
  const choice = array[random(0, array.length)];
  return choice;
}

para.textContent = chooseItem(names);

In dieser Aufgabe haben wir ein Array von Namen und verwenden Array.filter(), um ein Array zu erhalten, das nur die Namen enthält, die kürzer als 5 Zeichen sind. Der Filter bekommt 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, andernfalls false.

Um die Aufgabe zu vervollständigen, aktualisieren Sie den Code so, dass die Funktionalität innerhalb von isShort() stattdessen direkt in den filter()-Aufruf als Pfeilfunktion einbezogen wird. Sehen Sie, wie kompakt Sie es machen können.

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;

// ...
// Don't edit the code above here!

// Update the code below here

const shortNames = names.filter((name) => name.length < 5);
para.textContent = shortNames;