de:modul:m288:learningunits:lu04:01

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m288:learningunits:lu04:01 [2025/09/25 15:05] – vdemirde:modul:m288:learningunits:lu04:01 [2025/10/21 13:45] (aktuell) – [Elemente hinzufügen oder entfernen] vdemir
Zeile 1: Zeile 1:
-====== LU03a - Arrays ======+====== LU04a - Arrays ======
     
 ===== Einleitung =====  ===== Einleitung =====
Zeile 18: Zeile 18:
   let namen = ["Anna", "Ben", "Clara"];    let namen = ["Anna", "Ben", "Clara"]; 
              
-===== Zugriff auf Array-Elemente ===== + +===== Methoden ===== 
-Jedes Element in einem Array hat einen Index, beginnend bei 0. +  +Methoden sind Fähigkeiten (verhalten), die Objekte können bestimme Aktionen ausüben. 
-   + 
-  let farben = ["rot", "gruen", "blau"]; +==== Zugriff auf Array-Elemente ====  
 +Jedes Element in einem Array hat einen Index, beginnend bei 0. 
 + 
 +  let farben = ["rot", "gruen", "blau"];
   console.log(farben[0]); // "rot"    console.log(farben[0]); // "rot"
   console.log(farben[1]); // "gruen"    console.log(farben[1]); // "gruen"
   console.log(farben[2]); // "blau"    console.log(farben[2]); // "blau"
     
-===== Methoden ===== +==== Array-Laenge ====
  
-*Hinweis:** Wir müssen etwas vorgreifen mit dem Thema //Methoden//. +  let zahlen = [10, 20, 30];  
 +  console.log(zahlen.length); // 3  
 + 
 +==== Elemente hinzufügen oder entfernen ====  
 +JavaScript stellt praktische Methoden bereit:  
     
-In JavaScript sind Methoden nichts anderes als Funktionen, die an Objekte wie beispielsweise //ARRAYS// gebunden sind.  
-   
-  * Eine Methode wird wie eine normale Funktion definiert, aber als Eigenschaft eines Objekts gespeichert.  
-  * D.h. man kann diese Objekte zum reagieren bringen wie beispielsweise:   
  
-  * Hey //myArray//, sag doch bitte wie lang Du bist --> myArray.length()  
  
-Sie kann dann mit der Punkt-Notation aufgerufen werden. +  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 ====
  
-**Beispiel** +  * map → erstellt ein neues Array basierend auf jedem Element.  
 +  * filter → filtert Elemente nach Bedingung. 
 +  * find → findet das erste passende Element. 
 +  * includes → ist das Element vorhanden? 
  
-  const person = {   +==== Übersicht über Array-Methoden ====  
-    name: "Anna",   +    
-    greet: function() {   +{{:de:modul:m288:learningunits:lu03:lu03a_2.png?800|}}  
-      return "Hallo, mein Name ist " + this.name;  + 
-    }   +===== Lernvideos =====   
-  };   +| {{: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}} |  
--    +
--   console.log(person.greet());  +
     
--     +   for (let i = 0; i < Employee.length; i++) {  +===== Zusatzmaterial =====  
-- Das Objekt mit dem Namen //Anna// hat eine Greet-Methode, kann also grüssen. die Ausgabe ist in diesem Falle "Hallo, mein Name ist Anna". +     console.log("ID:", Employee[i][0], "Name:", Employee[i][1], "Stadt:", Employee[i][2]);   +  * [[https://www.w3schools.com/js/js_arrays.asp|W3School- JavaScript Arrays]]  
-  +   } +  * [[https://wiki.selfhtml.org/wiki/Array|SelfHTML - JS Arrays ]] 
-   + 
-  + **Ausgabe:** +---- 
-  + ID: 100 Name: Ram Stadt: Agra +[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir
-  + ID: 101 Name: Shyam Stadt: Aligarh +
-  + ID: 102 Name: Amit Stadt: Gwalior +
-   +
--     + ===== Arrays mit Attributen bauen =====  +
-- ==== Array-Laenge ==== + Wenn wir, zusätzlich zu den Daten, auch Tabellenspalten speichern wollen, tun wir dies in den Array-Attributen. +
-   +
-- Mit der Eigenschaft (=Methode) //.length// erfährst du, wie viele Elemente im Array sind: +   var Employee2 = [  +
-  +     {id: 100, name:'Ram', vorname: 'Agra'},  +
-  +     {id: 101, name: 'Shyam', vorname: 'Aligarh'},  +
-  +     {id: 102, name: 'Amit', vorname: 'Gwalior'}  +
-  +   ]; +
-   +
--   let zahlen = [10, 20, 30];   +
--   console.log(zahlen.length); // 3   +
--    +
-- ==== Elemente hinzufügen oder entfernen ====  +
-- JavaScript stellt praktische Methoden bereit:  +
-   +
--   let tiere = ["Hund", "Katze"]; + ===== Weitere Methoden =====  +
--     + Grundsätzlich verhält sich ein mehrdimensionale Array genau so wie ein normales Array. Sprich alle Methoden, die für ein normales Array gelten, gelten auf für das mehrdimensionale Array. +
--   // 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"] +  +
--     +  +
-- +  +
--     +  +
-- ==== Besondere Methoden ==== +  +
--   * map → erstellt ein neues Array basierend auf jedem Element. +  +
--   * filter → filtert Elemente nach Bedingung. +  +
--   * find → findet das erste passende Element. +  +
--   * includes → ist das Element vorhanden? +  +
--     +  +
-- ==== Übersicht über Array-Methoden ==== +  +
-   +
-- {{:de:modul:m288:learningunits:lu03:lu03a_2.png?800|}} + ^Methode ^Beschreibung | Anwendungsbeispiel |  +
-  + ^push() | Fügt ein Element ans Ende eines Arrays hinzu. |  +
-  + ^pop() | Entfernt das letzte Element.|  +
-  + ^shift() | Entfernt das erste Element. |  +
-  + ^unshift() | Fügt ein Element am Anfang hinzu.  |  +
-  + ^filter() | Gibt ein neues Array zurück mit allen Elementen, die eine Bedingung erfüllen. |  +
-  + ^find() | Gibt das erste Element zurück, das eine Bedingung erfüllt.  |  +
-  + ^findIndex() | Gibt den Index des ersten passenden Elements zurück. |   +
-  + ^splice() | Manipulation des Arrays an einer beliebigen Position. |   +
-  + ^slice() | Erstellt eine Kopie eines Array-Ausschnitts, ohne das Original zu verändern.|  +
-   +
-- ===== Lernvideos =====  +
-- | {{: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}} |  +
-   +
-  ===== Zusatzmaterial ===== ===== Zusatzmaterial ===== +
--   * [[https://www.w3schools.com/js/js_arrays.asp|W3School- JavaScript Arrays]] +   * [[https://www.w3schools.com/java/java_arrays_multi.asp|W3School- JavaScript Mehrdimensionale Arrays]]  +
--   * [[https://wiki.selfhtml.org/wiki/Array|SelfHTML - JS Arrays ]]+
  • de/modul/m288/learningunits/lu04/01.1758805518.txt.gz
  • Zuletzt geändert: 2025/09/25 15:05
  • von vdemir