Wichtige Datenstrukturen einfach erklärt

Datenstrukturen Überblick

Jede Datenstruktur ist wie ein spezieller Container für deine Daten - je nachdem, was du vorhast, brauchst du den richtigen Container. Stell dir vor, du organisierst dein Zimmer: Für Bücher nimmst du ein Regal, für Kleidung einen Schrank.

Arrays sind wie nummerierte Schubladen - alle enthalten den gleichen Datentyp und du kannst direkt zu jeder Schublade springen. Verkettete Listen funktionieren wie eine Kette, wo jedes Glied zum nächsten zeigt - flexibel, aber du musst der Reihe nach durchgehen.

Der Stapelspeicher (Stack) arbeitet wie ein Tellerstapel - der letzte Teller kommt als erstes wieder runter (LIFO). Warteschlangen sind wie an der Kasse - wer zuerst kommt, wird zuerst bedient (FIFO). Bäume organisieren Daten hierarchisch wie ein Familienstammbaum.

Merktipp: LIFO = Last In, First Out | FIFO = First In, First Out

Arrays in JavaScript - Grundlagen

Arrays sind deine Geheimwaffe, wenn du mehrere zusammengehörige Werte speichern willst. Du kannst sie dir wie ein Regal vorstellen, wo jedes Fach eine Nummer hat (den Index).

Es gibt zwei Wege, ein Array zu erstellen: Entweder du machst erst ein leeres Array und füllst es dann (var himmelsrichtung = []), oder du packst gleich Werte rein (var primzahlen = [2, 3, 5, 7]). Beide Methoden führen zum Ziel.

Wichtig: Der Index startet bei 0, nicht bei 1! Das erste Element hat also Index 0, das zweite Index 1, und so weiter. Mit himmelsrichtung[1] greifst du auf das zweite Element zu.

Die length-Eigenschaft ist super praktisch - sie zeigt dir, wie viele Elemente dein Array hat. Das brauchst du oft für Schleifen oder um zu prüfen, ob dein Array leer ist.

Praxis-Tipp: Arrays können in JavaScript nachträglich erweitert werden - sie sind nicht starr!

Arbeiten mit Arrays - Schleifen und Änderungen

For-Schleifen sind perfekt, um alle Array-Elemente durchzugehen. Mit i++ zählst du hoch, mit i-- runter - so navigierst du durch dein Array. Die Variable i ist dein Zeiger, der von Element zu Element springt.

Du kannst Arrays jederzeit ändern: Mit training[0] = "Dienstag" überschreibst du ein Element, mit training[2] = "Freitag" fügst du ein neues hinzu. JavaScript-Arrays sind flexibel und wachsen automatisch mit.

Variablendeklaration mit var passiert immer zuerst, egal wo sie im Code steht. Das nennt man "Hoisting" - JavaScript zieht alle Deklarationen nach oben.

Die window.alert() Funktion zeigt dir Inhalte in einem Popup an - perfekt zum Testen deiner Arrays. Du kannst einzelne Elemente oder das ganze Array ausgeben lassen.

Debug-Trick: Nutze console.log() statt window.alert() - das nervt weniger beim Testen!

Funktionen und Parameter mit Arrays

Funktionen machen deinen Code wiederverwendbar - statt denselben Code zu kopieren, packst du ihn in eine Funktion. Mit Parametern übergibst du verschiedene Arrays an dieselbe Funktion.

Im ersten Beispiel ist das Array fest programmiert, im zweiten wird es als Parameter übergeben. So kannst du eine Funktion für verschiedene Jahrgänge verwenden - viel cleverer!

Die For-Schleife mit String-Verkettung baut dir schrittweise eine Ausgabe zusammen. anzeige = anzeige + "\n" + "Position " + (i+1) fügt jedes Element mit Zeilenwechsel hinzu.

Arrays addieren in JavaScript funktioniert mit dem Plus-Operator, aber Achtung: Du bekommst einen String, nicht ein neues Array! Für echtes Zusammenfügen nutzt du besser die concat()-Methode.

Profi-Tipp: Parameter machen Funktionen flexibel - eine Funktion, viele Einsatzmöglichkeiten!

Array-Zusammenfassung und wichtige Methoden

Hier hast du alle Array-Grundlagen kompakt: Deklaration mit [], Initialisierung direkt oder nachträglich, Zugriff über Index und Ausgabe einzelner Werte.

Parameter sind Übergabewerte für Funktionen - sie stehen in den Klammern der Funktionsdefinition. So machst du deine Funktionen flexibel für verschiedene Eingaben.

Für die Ausgabe aller Array-Elemente hast du zwei Optionen: Entweder das komplette Array auf einmal oder mit einer For-Schleife Element für Element. Die Schleife gibt dir mehr Kontrolle über die Formatierung.

Arrays verbinden geht mit dem Plus-Operator, aber das Ergebnis ist ein String. Willst du die Arrays wirklich zusammenführen, brauchst du andere Methoden.

Übungs-Tipp: Schreib diese Beispiele selbst ab und experimentiere damit - Learning by Doing!

DOM-Manipulation mit innerHTML

getElementById() ist dein Werkzeug, um HTML-Elemente zu finden und zu bearbeiten. Du gibst die ID an und bekommst das Element zurück - wie eine Fernbedienung für deine Webseite.

innerHTML liest oder verändert den Inhalt eines HTML-Elements. Mit += hängst du neuen Inhalt an den vorhandenen an, ohne ihn zu löschen. Das ist perfekt für Listen oder Ausgaben, die wachsen sollen.

parseFloat() wandelt Text-Eingaben in Zahlen um - wichtig für Berechnungen! Ohne diese Funktion rechnet JavaScript mit Strings statt Zahlen.

Die Kombination aus For-Schleife und innerHTML ist mächtig: Du kannst dynamisch Listen erstellen, Inhalte wiederholen oder Array-Inhalte schön formatiert anzeigen.

Web-Trick: Mit value = "" leerst du Eingabefelder nach der Verarbeitung!

Praktische DOM-Anwendungen

innerHTML-Operationen erweitern deine Möglichkeiten enorm: Du kannst Rechenergebnisse direkt in die Webseite schreiben oder dynamische Inhalte erstellen.

Die Kombination aus parseFloat() und getElementById() holt Zahlen aus Eingabefeldern und macht sie berechnungsbereit. So baust du interaktive Rechner oder Formulare.

String-Wiederholung mit Schleifen ist ein klassisches Programmierbeispiel: Du nimmst einen Text und wiederholst ihn beliebig oft. Mit <br/> fügst du Zeilenwechsel hinzu.

Der += Operator bei innerHTML ist genial - du baust schrittweise längere Ausgaben auf, ohne vorherige Inhalte zu verlieren. Perfect für Chat-Apps, Listen oder Protokolle.

Real-World-Anwendung: Diese Techniken nutzt du später für Formulare, Spiele und interaktive Webseiten!