Testen Sie Ihre Fähigkeiten: Schleifen

DOM-Manipulation: als nützlich erachtet

Einige der unten stehenden Fragen erfordern, dass Sie etwas DOM-Manipulationscode schreiben, um sie zu vervollständigen — wie zum Beispiel das Erstellen neuer HTML-Elemente, das Setzen ihres Textinhalts auf bestimmte Zeichenfolgen und das Einfügen in bestehende Elemente auf der Seite — alles über JavaScript.

Wir haben dies im Kurs noch nicht explizit gelehrt, aber Sie haben einige Beispiele gesehen, in denen dies verwendet wird, und wir möchten, dass Sie etwas Nachforschung darüber betreiben, welche DOM-APIs Sie benötigen, um die Fragen erfolgreich zu beantworten. Ein guter Ausgangspunkt ist unser Einführung in das DOM-Scripting Tutorial.

Schleifen 1

In unserer ersten Schleifenaufgabe möchten wir, dass Sie eine grundlegende Schleife schreiben, die alle Elemente im bereitgestellten myArray durchläuft und sie innerhalb von Listenelementen (<li>-Elementen) auf dem Bildschirm ausgibt. Sie sollten der bereitgestellten list hinzugefügt werden.

<section></section>

* {
  box-sizing: border-box;
}

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

Der Ausgangspunkt der Aufgabe sieht so aus (noch nichts wird angezeigt):

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

const myArray = ["tomatoes", "chick peas", "onions", "rice", "black beans"];
const list = document.createElement("ul");
const section = document.querySelector("section");
section.appendChild(list);

// Don't edit the code above here!

// Add your code here

Die aktualisierte Ausgabe sollte so aussehen:

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

for (let item of myArray) {
  const listItem = document.createElement("li");
  listItem.textContent = item;
  list.appendChild(listItem);
}

const myArray = ["tomatoes", "chick peas", "onions", "rice", "black beans"];
const list = document.createElement("ul");
const section = document.querySelector("section");
section.appendChild(list);

for (let item of myArray) {
  const listItem = document.createElement("li");
  listItem.textContent = item;
  list.appendChild(listItem);
}

Schleifen 2

In dieser nächsten Aufgabe möchten wir, dass Sie ein einfaches Programm schreiben, das, basierend auf einem Namen, ein Array von Objekten mit Namen und Telefonnummern durchsucht und, wenn es den Namen findet, den Namen und die Telefonnummer in einem Absatz ausgibt.

Ihnen werden drei Variablen zur Verfügung gestellt:

• name: Enthält einen Namen, nach dem gesucht werden soll.
• para: Enthält eine Referenz zu einem Absatz, der verwendet wird, um die Ergebnisse zu berichten.
• phonebook: Enthält die Telefonbucheinträge, die durchsucht werden sollen.

Um die Aufgabe abzuschließen:

1. Schreiben Sie eine Schleife, die das (phonebook) Array durchläuft und nach dem bereitgestellten name sucht. Sie sollten eine Art von Schleife verwenden, die Sie in der vorherigen Aufgabe nicht verwendet haben.
2. Wenn der name gefunden wird, schreiben Sie ihn und die zugehörige number in den textContent des bereitgestellten Absatzes (para), in der Form „<name>'s number is <number>“. Beenden Sie danach die Schleife, bevor sie ihren Lauf abgeschlossen hat.
3. Wenn keines der Objekte den name enthält, drucken Sie "Name not found in the phonebook" in den textContent des bereitgestellten Absatzes.

Der Ausgangspunkt der Aufgabe sieht so aus (noch nichts wird angezeigt):

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

const name = "Mustafa";
const para = document.createElement("p");

const phonebook = [
  { name: "Chris", number: "1549" },
  { name: "Li Kang", number: "9634" },
  { name: "Anne", number: "9065" },
  { name: "Francesca", number: "3001" },
  { name: "Mustafa", number: "6888" },
  { name: "Tina", number: "4312" },
  { name: "Bert", number: "7780" },
  { name: "Jada", number: "2282" },
];

const section = document.querySelector("section");
section.appendChild(para);

// Don't edit the code above here!

// Add your code here

Die aktualisierte Ausgabe sollte so aussehen:

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

for (let i = 0; i < phonebook.length; i++) {
  if (phonebook[i].name === name) {
    para.textContent = `${phonebook[i].name}'s number is ${phonebook[i].number}.`;
    break;
  }

  if (i === phonebook.length - 1) {
    para.textContent = "Name not found in the phonebook";
  }
}

const name = "Mustafa";
const para = document.createElement("p");

const phonebook = [
  { name: "Chris", number: "1549" },
  { name: "Li Kang", number: "9634" },
  { name: "Anne", number: "9065" },
  { name: "Francesca", number: "3001" },
  { name: "Mustafa", number: "6888" },
  { name: "Tina", number: "4312" },
  { name: "Bert", number: "7780" },
  { name: "Jada", number: "2282" },
];

const section = document.querySelector("section");
section.appendChild(para);

for (let i = 0; i < phonebook.length; i++) {
  if (phonebook[i].name === name) {
    para.textContent = `${phonebook[i].name}'s number is ${phonebook[i].number}.`;
    break;
  }

  if (i === phonebook.length - 1) {
    para.textContent = "Name not found in the phonebook";
  }
}

Schleifen 3

In dieser letzten Aufgabe testen Sie jede Zahl von 500 bis 2, um zu sehen, welche Primzahlen sind, indem Sie die bereitgestellte Testfunktion verwenden und die Primzahlen ausgeben.

Ihnen werden folgende Dinge zur Verfügung gestellt:

• i: Beginnt mit einem Wert von 500; gedacht als Iterator.
• para: Enthält eine Referenz zu einem Absatz, der verwendet wird, um die Ergebnisse zu berichten.
• isPrime(): Eine Funktion, die, wenn eine Zahl übergeben wird, true zurückgibt, wenn es sich um eine Primzahl handelt, und false, wenn nicht.

Um die Aufgabe abzuschließen:

1. Schreiben Sie eine Schleife, die jede Zahl von 500 bis 2 durchläuft (1 zählt nicht als Primzahl), und die bereitgestellte isPrime() Funktion auf jede ausführt.
2. Für jede Zahl, die keine Primzahl ist, fahren Sie mit der nächsten Schleifeniteration fort. Für jede, die eine Primzahl ist, fügen Sie sie dem textContent des Absatzes zusammen mit einer Art von Trennzeichen hinzu.

Sie sollten eine Art von Schleife verwenden, die Sie in den vorherigen zwei Aufgaben noch nicht verwendet haben.

Der Ausgangspunkt der Aufgabe sieht so aus (noch nichts wird angezeigt):

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

let i = 500;
const para = document.createElement("p");
const section = document.querySelector("section");
function isPrime(num) {
  for (let i = 2; i < num; i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return true;
}
// Don't edit the code above here!

// Add your code here

// Don't edit the code below here!

section.appendChild(para);

Die aktualisierte Ausgabe sollte so aussehen:

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

do {
  if (isPrime(i)) {
    para.textContent += `${i}, `;
  }
  i--;
} while (i > 1);

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

let i = 500;
const para = document.createElement("p");
const section = document.querySelector("section");
function isPrime(num) {
  for (let i = 2; i < num; i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return true;
}

do {
  if (isPrime(i)) {
    para.textContent += `${i}, `;
  }
  i--;
} while (i > 1);

section.appendChild(para);

• Zurück
• Übersicht: Dynamische Skripterstellung mit JavaScript
• Weiter