de:modul:m288:learningunits:lu02: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:lu02:01 [2025/09/01 13:04] – vdemirde:modul:m288:learningunits:lu02:01 [2025/09/01 19:52] (aktuell) – vdemir
Zeile 5: Zeile 5:
  
 Variablen dienen in JavaScript dazu, Werte zu speichern und wiederzuverwenden. Sie können Zahlen, Texte, Objekte, Funktionen und vieles mehr aufnehmen. Variablen dienen in JavaScript dazu, Werte zu speichern und wiederzuverwenden. Sie können Zahlen, Texte, Objekte, Funktionen und vieles mehr aufnehmen.
 +
 +===== Beispiele =====
 +  // Beispiele fuer Werte
 +  let n = 42;          // Number
 +  let s = "Hallo";     // String
 +  let ok = true;       // Boolean
 +  let list = [1, 2, 3];
 +  let user = { name: "Volkan" };
 +
 +===== Deklaration vs. Zuweisung =====
 +  * Deklaration: Variable bekannt machen (let x;)
 +  * Zuweisung: Wert setzen oder aendern (x = 5;)
 +  * Beides gemeinsam ist ueblich: let x = 5; 
 +
  
 ===== Keywords ===== ===== Keywords =====
Zeile 11: Zeile 25:
   * let    * let 
   * const   * const
 +
 +Das nachfolgende Schaubild veranschaulicht die Gültigkeit von Variablen in JavaScript.
 +
 +{{:de:modul:m288:learningunits:lu02:lu02b_01.png?600|Scope von Variblen}}
  
 ==== var ==== ==== var ====
Zeile 27: Zeile 45:
   demoVar();   demoVar();
      
-{{:de:modul:m288:learningunits:lu02:lu02_01.png?600|Fehlerfreie Ausgabe der Variable //name//}}+{{:de:modul:m288:learningunits:lu02:lu02_01.png?600|Fehlerfreie Ausgabe der Variable "name"}}
  
 Wie in der Abbildung zu sehen ist, ist die Ausgabe der Variable //name// fehlerfrei, obwohl diese ausserhalb des if-Blocks definiert wurde. Der Scope (Gültigkeitsbereich) ist bei var die Funktion. Wie in der Abbildung zu sehen ist, ist die Ausgabe der Variable //name// fehlerfrei, obwohl diese ausserhalb des if-Blocks definiert wurde. Der Scope (Gültigkeitsbereich) ist bei var die Funktion.
Zeile 48: Zeile 66:
  
 Wie in der Ausgabe zu sehen, wird //Markpoint 1:// fehlerfrei ausgegeben, //Markpoint 2:// liefer dann eine Fehlermeldung, weil let ausserhalb des IF-Blocks deklariert wurde. Wie in der Ausgabe zu sehen, wird //Markpoint 1:// fehlerfrei ausgegeben, //Markpoint 2:// liefer dann eine Fehlermeldung, weil let ausserhalb des IF-Blocks deklariert wurde.
-    + 
 +==== const ==== 
 +**const** gibt es ebenfalls seit ES6. const verhält sich wie let (block-skopiert), aber der Bezeichner darf nicht neu zugewiesen bzw. überschrieben werden. D.h. der Inhalt wird einmal geladen und ist gültig bis der Server neu gestartet wird. Dies ist beispielsweise bei Mehrwersteuer für eine Land der Fall, da diese sich über lange Zeit nicht verändern. 
 + 
 +**Wichtig:** Das bedeutet nicht, dass der gespeicherte Wert „eingefroren“ ist – bei Objekten und Arrays lassen sich Inhalte weiterhin ändern. 
 + 
 +**Beispiel 1 - einfache Varibale** 
 + 
 +  const id = "1234";  
 +  console.log("1: ", id); // Ausgabe des Inhalts 
 +  id = "3456"; // Versuch die Variable zu überschreiben 
 +  console.log("2: ", id); // 1234"  
 +   
 +{{:de:modul:m288:learningunits:lu02:lu02_03.png?600| mit const deklarierte variable}} 
 + 
 +Die Konsolenausgabe bei //Markpoint 1:// zeigt, dass der ursprüngliche Wert der Variable //name// 1234 war. Der Versuch den Inhalt zu überschreiben führt zu einer Fehlermeldung. //Markpoint 2:// zeigt, dass der Inhalt der Variable sich nicht verändert hat. 
 + 
 +**Beispiel 2 - Komplexe Variable (Objekt/Arra)** 
 + 
 +  const user = { name: "Doe", 
 +                 vorname: "Joan" 
 +               }; 
 +  console.log("1: ", user); // { "name: "Doe", vorname: "Joan" } 
 +  user.name = "Muster";   // erlaubt, Objektinhalt änderbar 
 +  user.vorname = "Max";   // erlaubt, Objektinhalt änderbar 
 +  console.log("2: ", user); // { "name: "Doe", vorname: "Joan" } 
 +  user = {name: "Suter", vorname: "Thierry"  
 +         };  // Fehler: Neuzuweisung nicht erlaubt 
 +  console.log("3: ", user); // { "name: "Doe", vorname: "Joan" } 
 +   
 +  {{:de:modul:m288:learningunits:lu02:lu02_04.png?600|Const mit assoziativen Arrays}} 
 +   
 +In der Abbildung ist zu sehen, dass der Versuch das Array neu zu schreiben eine Fehlermeldung herbeiführt. Hingegen kann der Inhalt des Arrays verändert werden. 
 + 
 + 
 +==== Lernvideo ==== 
 +{{:de:modul:m288:learningunits:lu02:lu02_05.mp4|Lernvideo Keywords: var, let, const}} 
 + 
 +==== Vergleich ==== 
 + 
 +^ ^Scope ^Redeclare   ^Reassign             ^Hoisted                        ^Binds this ^ 
 +^ ^Gültigkeitsbereich ^Neu anlegen ^Werte überschreibbar ^Wird an den Codeanfang gezogen ^this-Notation erlaubt ^ 
 +|var   |No          |Yes                  |Yes                            |Yes |Yes | 
 +|let   |Yes         |No                   |Yes                            |No  |No  | 
 +|const |Yes         |No                   |No                             |No  |No  | 
 +   
 ===== Zusatzmaterial ===== ===== Zusatzmaterial =====
   * [[https://www.w3schools.com/JS/js_variables.asp|W3School- JavaScript Varibles]]   * [[https://www.w3schools.com/JS/js_variables.asp|W3School- JavaScript Varibles]]
   * [[https://wiki.selfhtml.org/wiki/JavaScript/Variable|SelfHTML - JS Variablen ]]   * [[https://wiki.selfhtml.org/wiki/JavaScript/Variable|SelfHTML - JS Variablen ]]
- 
  
 ---- ----
  • de/modul/m288/learningunits/lu02/01.1756724681.txt.gz
  • Zuletzt geändert: 2025/09/01 13:04
  • von vdemir