JavaScript Arrays und Loops: Eine Schritt-für-Schritt-Anleitung für dein CPSC1520-Projekt

Einführung: Arrays und Loops in JavaScript

Arrays sind eine der grundlegendsten Datenstrukturen in JavaScript und werden in fast jeder Programmiersprache verwendet. In diesem Tutorial zeigen wir dir, wie du mit Arrays und Schleifen eine interaktive Bildergalerie erstellst – ähnlich wie bei einer Instagram-Story oder einer TikTok-Slideshow. Du lernst, wie du Bilder in einem Karussell anzeigst, sie zu einer persönlichen Liste hinzufügst und wieder entfernst. Das ist genau das, was du für deine CPSC1520-Aufgabe brauchst.

Schritt 1: Das Bilderkarussell erstellen

Zuerst modifizierst du das Array images mit den Namen der Bilder aus dem Ordner. Achte darauf, dass du nur die Dateinamen angibst, nicht den Pfad. Danach erstellst du die Methode renderCarousel, die die Funktion createCarouselItem mit den richtigen Argumenten aufruft. Rufe dann renderCarousel auf – deine Seite sollte sich von leer zu einer Galerie mit Bildern ändern.

const images = ['cat.jpg', 'polarbear.jpg', 'dog.jpg'];

function renderCarousel() {
  images.forEach((img, index) => {
    createCarouselItem(img, index);
  });
}
renderCarousel();

Dieser Code verwendet die forEach-Methode, um über das Array zu iterieren – ein klassisches Beispiel für einen Array-Loop. Stell dir vor, du scrollst durch deine Snapchat-Story: Jedes Bild wird nacheinander angezeigt.

Schritt 2: Bilder zur Liste „Meine Bilder“ hinzufügen

Jetzt kommt der spannende Teil: Du willst Bilder speichern, aber ohne Duplikate. Beobachte den Event-Listener im JavaScript-Code. Wenn du auf ein Bild klickst, wird der Index des angeklickten Bildes ausgegeben. Mit der includes-Methode prüfst du, ob das Bild bereits im Array savedImages vorhanden ist. Falls nicht, fügst du es mit push hinzu. So stellst du sicher, dass jedes Bild nur einmal vorkommt – wie bei einer Playlist auf Spotify, wo ein Song nicht doppelt hinzugefügt wird.

const savedImages = [];

function saveImage(index) {
  if (!savedImages.includes(images[index])) {
    savedImages.push(images[index]);
    renderImageList();
  }
}

Dann erstellst du die Funktion renderImageList, die durch das savedImages-Array loopt und jedes Bild mit addToSavedImageList anzeigt. Vergiss nicht, vor dem Neuzeichnen savedList.innerHTML zurückzusetzen.

function renderImageList() {
  savedList.innerHTML = '';
  savedImages.forEach((img, index) => {
    addToSavedImageList(img, index);
  });
}

Wenn du jetzt dreimal auf „Katze“ und zweimal auf „Eisbär“ klickst, erscheinen beide nur einmal in der Liste – genau wie gewünscht.

Schritt 3: Bilder aus der Liste entfernen

Zum Schluss lernst du, wie du Bilder wieder löschst. Der Event-Listener auf der gespeicherten Liste liefert dir den Index des zu entfernenden Elements. Mit der splice-Methode entfernst du das Element aus dem Array. Danach rufst du erneut renderImageList auf.

function removeImage(index) {
  savedImages.splice(index, 1);
  renderImageList();
}

Stell dir vor, du sortierst deine Favoriten auf TikTok aus – ein Klick auf „Entfernen“ löscht das Video aus deiner Sammlung. Genau so funktioniert es hier.

Trend-Beispiel: Wie Instagram Stories Arrays nutzen

Hast du dich schon mal gefragt, wie Instagram deine Story-Reihenfolge speichert? Jedes Bild oder Video ist ein Element in einem Array. Wenn du ein neues hinzufügst, wird es ans Ende gepusht. Wenn du eines löschst, wird es gespliced. Und die Reihenfolge wird mit einem Loop angezeigt – genau wie in deiner Aufgabe. Dieses Prinzip findest du auch in Snapchat, TikTok oder sogar in YouTube-Playlists.

Wichtige Array-Methoden im Überblick

• push() – fügt ein Element am Ende hinzu
• includes() – prüft, ob ein Element existiert
• splice() – entfernt oder ersetzt Elemente an einer bestimmten Position
• forEach() – führt eine Funktion für jedes Element aus

Mit diesen Methoden kannst du fast jede Listen-Operation in JavaScript umsetzen.

Häufige Fehler und wie du sie vermeidest

• Duplikate nicht verhindert: Verwende includes vor dem Hinzufügen.
• Liste nicht neu gerendert: Rufe renderImageList immer nach Änderungen auf.
• Index verwechselt: Achte darauf, dass der Index im Event-Listener dem Array-Index entspricht.

Fazit

Mit Arrays und Loops hast du die Grundlage für viele JavaScript-Projekte gelegt. Ob für deine CPSC1520-Aufgabe oder für eigene Ideen – die Konzepte sind überall gleich. Probiere es aus und werde zum JavaScript-Profi!