Testen Sie Ihre Fähigkeiten: Funktionen

DOM-Manipulation: als nützlich erachtet

Einige der folgenden Fragen erfordern, dass Sie etwas DOM-Manipulationscode schreiben, um sie zu vervollständigen — wie das Erstellen neuer HTML-Elemente, das Setzen ihrer Textinhalte auf bestimmte Zeichenfolgenwerte und das Verschachteln innerhalb bestehender Elemente auf der Seite — alles über JavaScript.

Wir haben dies im Kurs noch nicht explizit gelehrt, aber Sie haben einige Beispiele gesehen, die es nutzen, und wir möchten, dass Sie einige Recherchen darüber machen, 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

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

Sehen Sie sich das eingebettete Scrim an und vervollständigen Sie die Aufgabe auf der Zeitleiste (das kleine Geistersymbol), indem Sie die Anweisungen befolgen und den Code bearbeiten. Wenn Sie fertig sind, können Sie das Scrim fortsetzen, um zu überprüfen, wie die Lösung des Lehrers mit Ihrer übereinstimmt.

Aufgabe 1

Um unsere erste Funktionsaufgabe abzuschließen:

1. Definieren Sie eine Funktion — chooseName() — die einen zufälligen Namen aus dem bereitgestellten Array (names) in den bereitgestellten Absatz (para) schreibt.
2. Rufen Sie die chooseName()-Funktion 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();

Aufgabe 2

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

Aufgabe 3

In dieser Aufgabe kehren Sie zu dem in Aufgabe 1 gestellten Problem zurück, mit dem Ziel, drei Verbesserungen daran vorzunehmen.

Um die Aufgabe abzuschließen:

1. Überarbeiten 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 von der Zufallszahlenfunktion Gebrauch macht, das Array zum Auswählen als Parameter nimmt (um es flexibler zu machen), und das Ergebnis zurückgibt.
3. Schreiben Sie das zurückgegebene Ergebnis in den textContent des Absatzes (para).

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

Aufgabe 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 mit einer benannten Funktion isShort() aufgerufen. 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.

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;

• Zurück
• Übersicht: Dynamisches Skripting mit JavaScript
• Weiter