Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m288:learningunits:lu04:01 [2025/09/23 08:33] – angelegt vdemir
+++ de:modul:m288:learningunits:lu04:01 [2025/10/21 13:45] (aktuell) – [Elemente hinzufügen oder entfernen] vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU04a - Loops/Schleifen Übersicht ======
+====== LU04a - Arrays ======
+===== Einleitung =====
+In der Programmierung stösst man schnell auf Situationen, in denen man nicht nur einen einzelnen Wert, sondern eine **Sammlung von Werten speichern** möchte – zum Beispiel eine Liste mit Namen, Zahlen oder Objekten.
+In JavaScript gibt es dafür den Datentyp //Array//. Ein //Array// ist eine geordnete Liste, in der jedes Element über einen Index angesprochen werden kann (beginnend bei 0).
-===== Einleitung bzw. Problemstellung =====
+{{:de:modul:m288:learningunits:lu03:lu03a_1.png?500|JS Array Methoden}}
-Stellen Sie sich vor, Sie sollen 100 Zahlen auf die Konsole schreiben. Das ginge mit:
+Arrays sind unglaublich vielseitig: Man kann Elemente hinzufügen, entfernen, sortieren oder mit speziellen Methoden wie //map// und //filter// weiterverarbeiten.
+===== Was ist ein Array? =====
+Ein Array ist eine geordnete Sammlung von Werten. Diese Werte können Zahlen, Strings, Objekte oder sogar andere Arrays sein. Arrays sind besonders praktisch, wenn man mehrere Werte unter einem Namen speichern möchte.
-  console.log(1);
+**Beispiel:**
-  console.log(2);
-  console.log(3);
+  let zahlen = [1, 2, 3, 4, 5];
-  // ... bis 100
+  let namen = ["Anna", "Ben", "Clara"];
-Das eben gezeigte Beispiel umfasst nur 100 Zahlen-Elemente, aber stellen Sie sich vor es seien tausende oder Millionen (Ergebnis einer Google-Suche). Sehr unpraktisch und in der Realität so nicht handhabbar. Wir brauchen also eine Verarbeitungsstruktur, die dynamisch die Lösungsmenge verarbeitet. Wir brauchen also stattdessen **Schleifen** – sie wiederholen Anweisungen, solange eine bestimmte Bedingung erfüllt ist.
+===== Methoden =====
+Methoden sind Fähigkeiten (verhalten), die Objekte können bestimme Aktionen ausüben.
-{{:de:modul:m288:learningunits:lu04:lu04_01.png?300|Wiederholungen braucht es um Datenlisten anzuzeigen}}
+==== Zugriff auf Array-Elemente ====
+Jedes Element in einem Array hat einen Index, beginnend bei 0.
-===== Lösung: Schleifen =====
+  let farben = ["rot", "gruen", "blau"];
-Um eine grosse Anzahl von Elementen, die beispielsweise in Arrays gepeichert sind verarbeiten zu können, verwenden wir am besten Schleifen. Man könnte sogar sagen, dass //Schleifen// und //Arrays// ein perfektes Paar abgeben, weil
+  console.log(farben[0]); // "rot"
+  console.log(farben[1]); // "gruen"
+  console.log(farben[2]); // "blau"
+==== Array-Laenge ====
-  * **Arrays** können eine beliebige Anzahl von Elementen speichern/aufnehmen.
+  let zahlen = [10, 20, 30];
-  * **Schleifen** können diese beliebige Anzahl von Elemente verarbeiten.
+  console.log(zahlen.length); // 3
-In fast jeder Programmiersprache, so auch in JavaScript, gibt es die nachfolgende Typen:
+==== Elemente hinzufügen oder entfernen ====
+JavaScript stellt praktische Methoden bereit:
-{{:de:modul:m288:learningunits:lu04:javascript-loops-1200x675.jpg?500|}}
-Wir haben nicht Zeit für alle Loop-Arten. Innerhalb des Moduls 288 werden wir uns daher auf die nachfolgenden drei Loops konzentrieren.
+  let tiere = ["Hund", "Katze"];
+  // Hinzufügen
+  tiere.push("Maus");     // ans Ende
+  tiere.unshift("Vogel"); // an den Anfang
+  console.log(tiere);     // ["Vogel", "Hund", "Katze", "Maus"]
+  // Entfernen
+  tiere.pop();    // entfernt letztes Element
+  tiere.shift();  // entfernt erstes Element
+  console.log(tiere); // ["Hund", "Katze"]
+==== Weitere Methoden ====
-  - **for-Schleife:** Zählerschleife, kopfgesteuert
+  * map → erstellt ein neues Array basierend auf jedem Element.
-  - **while-Schleife:** Bedingung, kopfgesteuert
+  * filter → filtert Elemente nach Bedingung.
-  - **for ... in:** Bedingung, kopfgesteuert
+  * find → findet das erste passende Element.
+  * includes → ist das Element vorhanden?
-===== Wann ist welche Schleife passend? =====
+==== Übersicht über Array-Methoden ====
+{{:de:modul:m288:learningunits:lu03:lu03a_2.png?800|}}
-^Typ ^Wann nutzen? ^
+===== Lernvideos =====
-| for | Wenn die Anzahl der Wiederholungen bekannt sind. |
+| {{:de:modul:m288:learningunits:lu03:javascript_arrays_tutorial_-_javascript_lernen_in_deutsch.mp4 |JavaScript-Tutorial - 8:31 Minuten}} | {{:de:modul:m288:learningunits:lu03:arrays_javascript_tutorial_deutsch_teil_12.mp4|JavaScript-Tutorial - 20:30 Minuten}} |
-| while | Wenn nur eine Bedingung überprüfen werden soll. |
-| for...in | Wenn Objekte durchgegangen erden sollen. |
+===== Zusatzmaterial =====
+  * [[https://www.w3schools.com/js/js_arrays.asp|W3School- JavaScript Arrays]]
-**Achtung:** Endlosschleifen sind der Klassiker für eingefrorene Programme.
+  * [[https://wiki.selfhtml.org/wiki/Array|SelfHTML - JS Arrays ]]
-===== Lernvideos =====
-{{:de:modul:m288:learningunits:lu04:javascript_loops_tutorial_-_schleifen_in_javascript_lernen.mp4|Schleifen im JavaScript}}
-===== Zusatzmaterial =====
-  * [[https://www.w3schools.com/js/js_loops.asp|W3School- JavaScript Loops]]
-  * [[https://wiki.selfhtml.org/wiki/JavaScript/Kontrollstruktur#Schleifen|SelfHTML - Schleifen ]]
 ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir