diff --git a/slides/2026-01-24-termin-3-interaktivitaet-javascript.md b/slides/2026-01-24-termin-3-interaktivitaet-javascript.md index 88dea87..0b8f43c 100644 --- a/slides/2026-01-24-termin-3-interaktivitaet-javascript.md +++ b/slides/2026-01-24-termin-3-interaktivitaet-javascript.md @@ -169,11 +169,11 @@ Fehler werden hier auch angezeigt ```javascript // Modern (empfohlen) -let alter = 25; // Kann geändert werden +let age = 25; // Kann geändert werden const name = "Max"; // Konstante (nicht änderbar) // Alt (vermeiden!) -var stadt = "Stuttgart"; // Problematisches Scoping +var city = "Stuttgart"; // Problematisches Scoping ``` **Regeln:** @@ -193,27 +193,26 @@ var = alte Syntax, hat Scoping-Probleme ```javascript // String (Text) -const text = "Hallo"; -const text2 = 'Welt'; -const text3 = `Hallo ${text2}`; // Template Literal +const text = "Hello"; +const text2 = 'World'; +const text3 = `Hello ${text2}`; // Template Literal // Number (Zahl) -const ganzzahl = 42; -const kommazahl = 3.14; +const integer = 42; +const decimal = 3.14; // Boolean (Wahrheitswert) -const istWahr = true; -const istFalsch = false; +const isTrue = true; +const isFalse = false; // Undefined & Null -let unbekannt; // undefined -const nichts = null; // null (bewusst leer) +let unknown; // undefined +const nothing = null; // null (bewusst leer) ``` --- @@ -221,27 +220,22 @@ Keine Unterscheidung int/float # Arrays: Listen ```javascript -const farben = ["rot", "grün", "blau"]; +const colors = ["red", "green", "blue"]; // Zugriff (0-basiert!) -console.log(farben[0]); // "rot" -console.log(farben[2]); // "blau" +console.log(colors[0]); // "red" +console.log(colors[2]); // "blue" // Länge -console.log(farben.length); // 3 +console.log(colors.length); // 3 -// Hinzufügen -farben.push("gelb"); // Am Ende -farben.unshift("weiß"); // Am Anfang - -// Entfernen -farben.pop(); // Letztes Element -farben.shift(); // Erstes Element +// Hinzufügen/Entfernen +colors.push("yellow"); // Am Ende hinzufügen +colors.pop(); // Letztes entfernen ``` @@ -251,27 +245,23 @@ Arrays sind veränderbar auch bei const ```javascript const person = { - vorname: "Max", - nachname: "Mustermann", - alter: 25, - hobbies: ["Lesen", "Sport"] + firstName: "Max", + lastName: "Smith", + age: 25, + hobbies: ["Reading", "Sports"] }; // Zugriff -console.log(person.vorname); // "Max" -console.log(person["nachname"]); // "Mustermann" +console.log(person.firstName); // "Max" +console.log(person["lastName"]); // "Smith" -// Ändern -person.alter = 26; - -// Hinzufügen -person.beruf = "Student"; +// Ändern/Hinzufügen +person.age = 26; +person.job = "Student"; ``` --- @@ -313,15 +303,15 @@ true || false // true (ODER) 1. Erstelle Variablen für dich: ```javascript - const name = "Dein Name"; - let alter = 20; + const name = "Your Name"; + let age = 20; const hobbies = ["Hobby1", "Hobby2"]; ``` 2. Gib sie aus: ```javascript - console.log(`Ich bin ${name}, ${alter} Jahre alt.`); - console.log("Meine Hobbies:", hobbies); + console.log(`I am ${name}, ${age} years old.`); + console.log("My hobbies:", hobbies); ``` 3. Erstelle ein `person`-Objekt und greife auf Properties zu @@ -332,28 +322,26 @@ true || false // true (ODER) ```javascript // Funktion definieren -function grüßen(name) { - return `Hallo ${name}!`; +function greet(name) { + return `Hello ${name}!`; } // Funktion aufrufen -const nachricht = grüßen("Max"); -console.log(nachricht); // "Hallo Max!" +const message = greet("Max"); +console.log(message); // "Hello Max!" // Arrow Function (modern) -const addieren = (a, b) => { +const add = (a, b) => { return a + b; }; // Kurzform (bei einem Ausdruck) -const verdoppeln = x => x * 2; +const double = x => x * 2; ``` --- @@ -361,24 +349,23 @@ return = Rückgabe # Kontrollstrukturen: if/else ```javascript -const alter = 18; +const age = 18; -if (alter >= 18) { - console.log("Volljährig"); -} else if (alter >= 16) { - console.log("Fast volljährig"); +if (age >= 18) { + console.log("Adult"); +} else if (age >= 16) { + console.log("Almost adult"); } else { - console.log("Minderjährig"); + console.log("Minor"); } // Ternärer Operator (Kurzform) -const status = alter >= 18 ? "Erwachsen" : "Kind"; +const status = age >= 18 ? "Adult" : "Child"; ``` --- @@ -392,29 +379,17 @@ for (let i = 0; i < 5; i++) { } // for...of (Arrays) -const farben = ["rot", "grün", "blau"]; -for (const farbe of farben) { - console.log(farbe); +const colors = ["red", "green", "blue"]; +for (const color of colors) { + console.log(color); } // forEach (Array-Methode) -farben.forEach(farbe => { - console.log(farbe); -}); - -// while -let count = 0; -while (count < 3) { - console.log(count); - count++; -} +colors.forEach(color => console.log(color)); ``` --- @@ -422,29 +397,23 @@ while = solange Bedingung wahr # Nützliche Array-Methoden ```javascript -const zahlen = [1, 2, 3, 4, 5]; +const numbers = [1, 2, 3, 4, 5]; // map: Transformieren -const verdoppelt = zahlen.map(x => x * 2); -// [2, 4, 6, 8, 10] +const doubled = numbers.map(x => x * 2); // [2, 4, 6, 8, 10] // filter: Filtern -const groß = zahlen.filter(x => x > 2); -// [3, 4, 5] +const large = numbers.filter(x => x > 2); // [3, 4, 5] // find: Erstes Element finden -const gefunden = zahlen.find(x => x > 3); -// 4 +const found = numbers.find(x => x > 3); // 4 // reduce: Aggregieren -const summe = zahlen.reduce((acc, x) => acc + x, 0); -// 15 +const sum = numbers.reduce((acc, x) => acc + x, 0); // 15 ``` --- @@ -455,16 +424,14 @@ Originales Array bleibt unverändert 1. Funktion die prüft ob Zahl gerade ist: ```javascript - function istGerade(zahl) { - // Dein Code - } + function isEven(num) { /* your code */ } ``` 2. Funktion die Array-Summe berechnet -3. Schleife die 1-10 ausgibt und "Fizz" für durch 3 teilbare, "Buzz" für durch 5 teilbare Zahlen +3. FizzBuzz: 1-10 ausgeben, "Fizz" bei /3, "Buzz" bei /5 -**Tipp:** `zahl % 2 === 0` prüft ob gerade +**Tipp:** `num % 2 === 0` prüft ob gerade --- @@ -902,21 +869,18 @@ Server-Validation trotzdem nötig! ```javascript const form = document.querySelector("#todoForm"); const input = document.querySelector("#todoInput"); -const liste = document.querySelector("#todoListe"); +const list = document.querySelector("#todoList"); form.addEventListener("submit", function(event) { event.preventDefault(); - if (input.value.trim() === "") return; - + const li = document.createElement("li"); li.textContent = input.value; - - // Löschen per Klick li.addEventListener("click", () => li.remove()); - - liste.appendChild(li); - input.value = ""; // Input leeren + + list.appendChild(li); + input.value = ""; }); ``` @@ -945,32 +909,20 @@ Node.js für Backend # Fetch: Daten laden ```javascript -// Daten von API laden -fetch("https://api.example.com/data") - .then(response => response.json()) - .then(data => { - console.log(data); - }) - .catch(error => { - console.error("Fehler:", error); - }); - -// Mit async/await (moderner) -async function ladeDaten() { +// Mit async/await (modern) +async function loadData() { try { const response = await fetch("https://api.example.com/data"); const data = await response.json(); console.log(data); } catch (error) { - console.error("Fehler:", error); + console.error("Error:", error); } } ``` --- @@ -980,10 +932,7 @@ async/await = lesbarere Syntax ```javascript // Speichern localStorage.setItem("name", "Max"); -localStorage.setItem("settings", JSON.stringify({ - darkMode: true, - language: "de" -})); +localStorage.setItem("settings", JSON.stringify({ darkMode: true })); // Laden const name = localStorage.getItem("name"); @@ -991,13 +940,10 @@ const settings = JSON.parse(localStorage.getItem("settings")); // Löschen localStorage.removeItem("name"); -localStorage.clear(); // Alles löschen ``` --- @@ -1009,26 +955,15 @@ Nur Strings → JSON.stringify/parse function Button() { const [count, setCount] = useState(0); return ; } ``` -**Vue.js** (Evan You) -```vue - - -``` +**Weitere:** Vue.js, Svelte, Angular --- @@ -1040,7 +975,7 @@ State Management eingebaut **Interaktiv lernen:** - HTML: https://nextlevelshit.github.io/html-over-js/ -- CSS: https://codecrispi.es/ +- CSS: https://codescripsi.es/ - JS Visualisierung: https://nextlevelshit.github.io/web-engineering-mandala/ **Kurse:** @@ -1100,11 +1035,16 @@ State Management eingebaut --- -# Feedback +# Feedback – Eure Meinung zählt! -**Was hat gut funktioniert?** -**Was könnte besser sein?** -**Welche Themen wünscht ihr euch für die Zukunft?** +Euer ehrliches Feedback hilft mir, den Kurs zu verbessern. +**Es gibt keine falschen Antworten!** + +- Was hat gut funktioniert? +- Was könnte besser sein? +- Welche Themen interessieren euch noch? + +*Feedback gerne auch anonym per E-Mail an mail@librete.ch* --- @@ -1112,12 +1052,11 @@ State Management eingebaut # Danke! -**Kontakt:** michael.czechowski@lehre.dhbw-stuttgart.de -**Repository:** git.librete.ch/hdm/223015b +**Kontakt:** mail@librete.ch **Ressourcen:** - https://nextlevelshit.github.io/html-over-js/ -- https://codecrispi.es/ +- https://codescripsi.es/ - https://nextlevelshit.github.io/web-engineering-mandala/ ---