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:29] – vdemirde:modul:m288:learningunits:lu02:01 [2025/09/09 14:10] (aktuell) – [const] 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?800|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?1000|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 45: Zeile 63:
   demoLet();   demoLet();
      
-{{:de:modul:m288:learningunits:lu02:lu02_02.png?600| Terminalausgabe des keywords let}}+{{:de:modul:m288:learningunits:lu02:lu02_02.png?1000| Terminalausgabe des keywords let}}
  
 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.
Zeile 54: Zeile 72:
 **Wichtig:** Das bedeutet nicht, dass der gespeicherte Wert „eingefroren“ ist – bei Objekten und Arrays lassen sich Inhalte weiterhin ändern. **Wichtig:** Das bedeutet nicht, dass der gespeicherte Wert „eingefroren“ ist – bei Objekten und Arrays lassen sich Inhalte weiterhin ändern.
  
-**Beispiel 1 - einfache Varibale**+**Beispiel 1 - einfache Varible**
  
   const id = "1234";    const id = "1234"; 
Zeile 61: Zeile 79:
   console.log("2: ", id); // 1234"    console.log("2: ", id); // 1234" 
      
-{{:de:modul:m288:learningunits:lu02:lu02_03.png?600| mit const deklarierte variable}}+{{:de:modul:m288:learningunits:lu02:lu02_03.png?1000| 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. 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)**+**Beispiel 2 - Komplexe Variable (Objekt/Array)**
  
   const user = { name: "Doe",   const user = { name: "Doe",
Zeile 74: Zeile 92:
   user.vorname = "Max";   // erlaubt, Objektinhalt änderbar   user.vorname = "Max";   // erlaubt, Objektinhalt änderbar
   console.log("2: ", user); // { "name: "Doe", vorname: "Joan" }   console.log("2: ", user); // { "name: "Doe", vorname: "Joan" }
-  user = {name: "Suter", +  user = {name: "Suter", vorname: "Thierry"};  // Fehler: Neuzuweisung nicht erlaubt
-          vorname: "Thierry"  +
-         };  // Fehler: Neuzuweisung nicht erlaubt+
   console.log("3: ", user); // { "name: "Doe", vorname: "Joan" }   console.log("3: ", user); // { "name: "Doe", vorname: "Joan" }
      
-  {{:de:modul:m288:learningunits:lu02:lu02_04.png?600|Const mit assoziativen Arrays}}+{{:de:modul:m288:learningunits:lu02:lu02_04.png?1000|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. 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.1756726186.txt.gz
  • Zuletzt geändert: 2025/09/01 13:29
  • von vdemir