JavaScript Kurs für Einsteiger: Teil 4 - Arrays und Schleifen

Willkommen bei dem 4. Teil meines JavaScript Kurses für Einsteiger. Heute sprechen wir über JavaScript Arrays und Schleifen.

Alle bis jetzt erlernten Fähigkeiten können fast eins zu eins auf andere Programmiersprachen übertragen werden. Das sind die absoluten Grundbausteine einer jeden Programmierung. Die Syntax, also die Auszeichnung, kann sich von Sprache zu Sprache leicht unterscheiden, theoretisch ändert sich an diesen Strukturen und Ideen jedoch nichts.

Heute möchte ich dir JavaScript Arrays und Schleifen erklären, die ebenfalls noch zu den coding basics gehören.

Wir steigen also gleich ein.

• Variablen ✓
• if else und Vergleichsoperatoren ✓
• JavaScript in einer HTML Datei nutzen ✓
• Funktionen (functions) ✓
• Neu: Arrays
• Neu: Schleifen (loops)

Teil 4

Wir nutzen wieder die index.html und die main.js Dateien für unseren Code.
Beide Dateien habe ich in meinem Editor geöffnet und nebenbei ist der Browser mit der geöffneten index.html.

Die JavaScript Console im Google Chrome öffnest du wieder mit der Tastenkombination CTRL + ⇧ + J (Windows und Linux) oder ⌥ + ⌘ + J (Mac).

JavaScript Arrays

Ein Array ist eine Liste von Werten, gespeichert in einer Variable. Es kann auch nur ein Wert sein, oder aber viele.
Eher selten wird in der deutschen Sprache auch Feld anstatt des englischen Namens Array gesagt.

Zur Erinnerung und zum Verständnis der Vergleich von Variable und Array.

Beispiel Variable:

var auto = 'Mercedes';

Beispiel Array:

var auto = ['Mercedes', 'Audi'];

Variablen und Array unterscheiden sich erst mal gar nicht so sehr. Die einzelnen Werte werden innerhalb von eckigen Klammern [] gesetzt und durch einen Beistrich getrennt.
Das Array auto besitzt zwei Werte.

Achtung, in der Programmierung wird immer von Null an gezählt, nicht von Eins.

Die einzelnen Werte eines Arrays sind über den sogenannten Index ansprechbar und werden Elemente genannt.

Möchte ich nun einer neuen Variable teuer den Wert Mercedes aus dem Array auto zuweisen, kann ich das wie folgt machen:

var teuer = auto[0];

Innerhalb der eckigen Klammern wird also der Index angegeben. Da wir das erste Element ansprechen möchten, heißt der Index 0.

Beispiele aus dem Video

var myList = ['apples', 'oranges', 'bananas'];

myList[3] = 'pineapples';

myList[0] = 'watermelon';

Zuerst erstellen wir das Array myList mit den drei Elementen ‚apples‘, ‚oranges‘ und ‚bananas‘.
In der Chrome JS Console kannst du dir nun das Array anzeigen lassen, indem du einfach den Namen eingibst und Enter drückst. Mit dem Pfeil davor kann das Array aufgeklappt werden und es werden die Indizes mit den Werten dazu ausgegeben.

Mit der zweiten Zeile wird ein weiteres Element dem Array myList angehängt.

Die dritte Zeile ändert den Wert des ersten Elements von ‚apples‘ auf ‚watermelon‘.

In der JS Console kannst du die Änderungen immer überprüfen und besser nach verfolgen.

Arrays können alle Datentypen erhalten, nicht nur Strings! Sogar Funktionen.

Das folgende Beispiel zeigt ein Array mit einem String, einer Number und am Schluss wird innerhalb des Arrays ein weiteres Array eingefügt. Auch das ist möglich.

var myList = ['apples', 12, ['Will', 'Laura']];

Array Methoden

Die Stärke der JavaScript Arrays liegt in den Array Methoden. Man könnte auch sagen, das sind Aktionen, die auf Arrays ausgeführt werden können.
In der Praxis werden die Methoden mit einem Punkt dem Array angehängt: array.methode()

shift()
Shift entfernt das erste Element aus der Liste und bewegt (englisch shift) alle weiteren Elemente nach Links. Wird davor eine andere Variable oder Funktion gesetzt, wird der Wert des ersten Elements zurückgegeben.

var myList = ['apples', 'oranges', 'bananas'];

myList.shift();

pop()
Pop hingegen entfernt das letzte Element deines Arrays.

forEach()
Die Methode forEach ist besonders mächtig und praktisch.
Sie ruft eine Funktion auf, für jedes einzelne Element deines Arrays. Hat ein Element keinen Wert, wird jenes übersprungen.

var myList = ['apples', 'oranges', 'bananas'];

myList.forEach(function(value, index) {
	console.log(value, index);
});

forEach läuft alle Elemente durch und gibt den Wert und den Index in der Console aus.

Das war nur eine kleine Auswahl an Methoden, mit denen du Arrays manipulieren kannst. Weitere findest du hier.

Für eine Einführung reicht das. Weiter geht es mit den Schleifen.

JavaScript Schleifen

Während Arrays am Anfang etwas verwirrend sind, werden Schleifen in der Regel einfacher verstanden.

Eine Schleife, oder ein Loop, führt einen Code-Block mehrere Male aufeinander aus.
Diese Art von Code ist sehr wichtig, wenn zb. Daten aus Datenbanken ausgegeben werden sollen. Vielleicht innerhalb einer HTML Tabelle.

Es gibt in JS vier Arten von Loops:

• for – Läuft mehrere Male durch einen Codebereich
• for/in – Läuft durch die Werte eines Objekts.
• while – Läuft so lange durch einen Codebereich, bis eine Bedingung wahr ist.
• do/while – Läuft ebenfalls so lange durch einen Codebereich, bis eine Bedingung erfüllt ist.

Drei davon schauen wir uns genauer an.

for Schleife

Zählschleife

Die for-Schleife ist die meist genutzte Schleife. Zumindest war das bei mir immer so.

Der Aufbau mag zunächst etwas verwirrend sein, hast du ihn erst mal verstanden, ist der for Loop sehr praktisch und einfach zu nutzen.

for (setup; comparison; change) {

}

Die for-Schleife erwartet drei Angaben. Oben als setup, comparison und change angegeben.

Setup ist der Wert wo die Schleife zu zählen beginnt. Meist 0.
Comparison ist der Vergleichswert, wie lange die Schleife laufen soll. Also die Bedingung.
Change verändert den Wert der Variable in Setup, ist also der Zähler.

Nun ein praktisches Beispiel, welches du eintippen und in der Browser Konsole überprüfen kannst.

for (var i=0; i < 10; i++) {
	console.log('tried it', i);
}

Der Variable i wird der Wert 0 zugewiesen.
Die Schleife soll so lange laufen, bis i kleiner als 10 ist.
i wird mit jedem Durchgang um 1 erhöht.

Das ist die typische Nutzung einer for-Schleife. Die wirst du noch unzählige Male so einsetzen, oder in anderen Projekten sehen.

while Schleife

Vorprüfende oder kopfgesteuerte Schleife

var times = 0;

while (times < 10) {
	console.log('tried it', times);
	times++;
}

Die Variable times hat den Wert Null.

Die while-Schleife wird solange ausgeführt, bis times nicht mehr kleiner als 10 ist.

Innerhalb der Schleife wird mit console.log() die Anzahl der Durchgänge ausgegeben.
Ganz wichtig ist die Erhöhung von times. Das geschieht mit times++. ++ erhöht den Wert immer um eins. Alternativ könnte auch times = times + 1. Würde das nicht geschehen, würde die Variable niemals den Wert 10 erreichen und die Schleife würde endlos laufen. Das Word Endlosschleife hast du wahrscheinlich schon mal gehört.

do Schleife

Nachprüfende oder fußgesteuerte Schleife

Die do-Schleife ist der while-Schleife sehr ähnlich. Lediglich die Prüfung wird am Ende gemacht. Während der do Loop mindestens einmal ausgeführt wird, kommt es beim do Loop vielleicht gar nicht so weit, weil die Bedingung schon falsch sein könnte.

var times = 0;

do {
	console.log('tried it', times);
	times++;
} while (times < 10);

Array und Schleife kombinieren

Zum Schluss verbinden wir noch das heute gelernte zu einem kleinen Beispiel, welches du dir sehr gut merken solltest. Grund dafür ist, die Praxisnähe des folgenden Codes. Kaum ein Programm kommt ohne das Durchlaufen eines Arrays aus.

var myList = ['Apples', 'Oranges', 'Bananas'];

for (var i=0; i < myList.length; i++) {
	console.log(myList[i]);
}

Das Array myList hatten wir ja schon weiter oben. Enthalten sind drei Elemente.

Danach nutzen wir die for-Schleife, genau so wie wir es gerade eben gemacht haben. Nur als Bedingung nutzen wir diesmal die Länge des Arrays myList.
Die Array Methode length() gibt den Index zurück. i < myList.length bedeutet also so viel wie i < 2, weil myList drei Elemente hat und bei Null zu zählen begonnen wird.

Innerhalb der Schleife geben wir mit console.log() die einzelnen Elemente des Array myList aus. Da i bei Null beginnt und immer um eins erhöht wird, nutzen wir diese Variable für den Index des Arrays (myList[i]).

Ergebnis ist, dass alle drei Elemente der Reihe nach ausgedruckt werden.

Hausaufgabe

Arrays und Schleifen sind schon etwas anspruchsvoller, zumindest wenn du ganz neu beim Programmieren bist.

Diese Logiken musst du aber wirklich verinnerlichen, da darauf die gesamte Programmierung aufsetzt. Nur durch aktives Nutzen kannst du dir merken wie zb. eine for-Schleife läuft. Bei so grundlegenden Dingen darfst du nicht nachsehen müssen.

Denke dir also kleine Aufgaben aus und vertiefe das gelernte. Spiele mit Arrays und Schleifen herum. Die müssen sitzen!

Das Video zum Kurs – Teil 4 (englisch)

Die Videos sind vom Youtube Channel LearnCode.

… cause Javascript ROCKS

Dieser JavaScript Kurs ist natürlich kostenlos.
Ich halte mich grob inhaltlich an den Kurs im Video. Ich mache das um selbst JS zu lernen und lade dich ein mit mir mitzumachen.

» Direkt weiter zu JavaScript Kurs Teil 5