JavaScript: Verzweigungen, Schleifen, Arrays

Описание: #Vorlesung #Webbasierte #Systeme an der #Technischen #Hochschule #Mannheim

JavaScript: Verzweigungen, Schleifen, Arrays

In diesem Kapitel werden die Grundlagen der prozeduralen Programmierung in JavaScript behandelt, insbesondere Verzweigungen, Schleifen und Arrays. Die klassische „if“-Verzweigung kann allein oder in Kombination mit „else“ und beliebig vielen „else if“-Blöcken verwendet werden. Solche Abfragen ermöglichen das gezielte Steuern des Programmablaufs, indem verschiedene Bedingungen geprüft und entsprechende Anweisungen ausgeführt werden. Die Ausgabe erfolgt dabei üblicherweise in der JavaScript-Konsole des Webbrowsers.

Die „for“-Schleife entspricht in Aufbau und Funktionsweise den aus C oder Java bekannten Strukturen. Sie beginnt mit der Initialisierung einer Laufvariablen, prüft nach jedem Durchlauf eine Bedingung und erhöht die Variable entsprechend. Der Schleifenrumpf wird so oft ausgeführt, bis die Abbruchbedingung nicht mehr erfüllt ist. Enthält der Schleifenrumpf nur eine Anweisung, kann der Block weggelassen werden. Ein „break“ verlässt die Schleife sofort. Über eine „for-in“-Schleife lassen sich alle aufzählbaren Eigenschaften eines Objekts durchlaufen, wobei die Reihenfolge nicht garantiert ist. Da Arrays in JavaScript spezielle Objekte sind, können auch deren Indizes mit „for-in“ iteriert werden. Mit der moderneren „for-of“-Schleife werden dagegen ausschließlich die Werte eines iterierbaren Objekts – wie eines Arrays oder einer Map – in der vorgesehenen Reihenfolge durchlaufen.

Neben der klassischen „for“-Schleife gibt es die kopfgesteuerte „while“-Schleife und die fußgesteuerte „do-while“-Schleife. In beiden Fällen wird der Schleifenrumpf so lange ausgeführt, wie eine bestimmte Bedingung erfüllt ist, wobei bei „do-while“ die Ausführung mindestens einmal erfolgt.

Arrays spielen eine zentrale Rolle in JavaScript. Beim Anlegen eines Arrays muss weder eine feste Größe noch eine maximale Anzahl an Elementen angegeben werden – JavaScript verwaltet das dynamisch im Hintergrund. Arrays können Werte aller Datentypen enthalten. Wird ein weiter entfernter Index gefüllt, dehnt sich das Array automatisch auf die neue Länge aus, und die dazwischenliegenden Elemente bleiben „undefined“. Ein Array kann auch mit einer initialen Größe über den Konstruktor angelegt werden, wächst aber dennoch bei Bedarf.

Die Initialisierung kann direkt durch Wertelisten in eckigen Klammern oder über den Konstruktor mit mehreren Werten erfolgen. Einzelne Elemente können mit „delete“ entfernt werden, wobei die Länge des Arrays unverändert bleibt, und es entstehen Lücken. Mit der vielseitigen „splice“-Methode können beliebig viele Elemente entfernt oder hinzugefügt werden, ohne Lücken entstehen zu lassen. Neue Werte lassen sich mit „push“ einfach an das Ende des Arrays anhängen.

JavaScript unterstützt außerdem sogenannte assoziative Arrays, bei denen Strings als Indizes dienen. Dies ist vergleichbar mit Maps in Java oder Dictionaries in Python. Assoziative Arrays werden wie gewöhnliche Objekte angelegt, und der Zugriff auf die Werte erfolgt über eckige Klammern mit String-Index. Über „for-in“-Schleifen kann über alle Schlüssel eines solchen Objekts iteriert werden. Ein typisches Beispiel ist ein Übersetzer, der englische Begriffe als Schlüssel und deren deutsche Entsprechungen als Werte speichert. Die alternative Initialisierung als Objekt mit geschweiften Klammern erlaubt eine kompakte Definition von Schlüssel-Wert-Paaren.

Abschließend zeigt das Kapitel, wie diese Strukturen und Kontrollmechanismen im Zusammenspiel grundlegende Bausteine für jede interaktive oder datengetriebene Webanwendung darstellen. Sie sind Voraussetzung für weiterführende Themen wie DOM-Manipulation, Event-Handling und asynchrone Programmierung.

0:00 if Verzweigung
0:23 for Schleife
1:08 Iteration durch Eigenschaften eines Objekts
1:26 Iteration durch iterierbare Objekte
1:40 while und do-while Schleife
1:47 Beispiele für Arrays
2:39 Array Initialisierung und Elementlöschung
3:08 splice Methode
4:15 Arten Elemente anhängen
4:32 Assoziatives Array
5:10 Beispiel für assoziatives Array
5:47 Alternativbeispiel für ein assoziatives Array