hdm/223015c
1
0
Fork 0
Code Pull Requests Activity

update termin 3 slides based on feedback

Browse Source 
- convert all german variable names to english
- change email to mail@librete.ch
- change website to codescripsi.es
- simplify overflow slides (loops, fetch, frameworks)
- improve feedback slide for psychological safety
This commit is contained in:
libretech
2025-12-17 23:09:46 +01:00
parent 44b1aa29dc
commit 18800ca731
1 changed files with 85 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slides/2026-01-24-termin-3-interaktivitaet-javascript.md
+85 -146
View File
@@ -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)
```
<!--
typeof prüft den Typ
Template Literals mit Backticks!
Keine Unterscheidung int/float
-->
---
@@ -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
```
<!--
Index startet bei 0!
farben[3] = viertes Element
Arrays sind veränderbar auch bei const
-->
@@ -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";
```
<!--
Key-Value-Paare
Punkt-Notation oder Bracket-Notation
Verschachtelt möglich
Key-Value-Paare, Punkt- oder Bracket-Notation
-->
---
@@ -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;
```
<!--
function = klassische Syntax
Arrow Functions = modern, kürzer
Parameter = Eingabe
return = Rückgabe
-->
---
@@ -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";
```
<!--
Bedingung in Klammern
Code-Block in geschweiften Klammern
Ternär für einfache Fälle
-->
---
@@ -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));
```
<!--
for = wenn Anzahl bekannt
for...of = für Arrays/Iterables
forEach = Array-Methode
while = solange Bedingung wahr
for = Anzahl bekannt, for...of = Arrays, forEach = Array-Methode
-->
---
@@ -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
```
<!--
Funktionale Programmierung
Sehr mächtig für Datenverarbeitung
Originales Array bleibt unverändert
Funktionale Programmierung, Original-Array bleibt unverändert
-->
---
@@ -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);
}
}
```
<!--
APIs = Schnittstellen zu Daten
JSON = JavaScript Object Notation
async/await = lesbarere Syntax
APIs = Schnittstellen zu Daten, JSON = JavaScript Object Notation
-->
---
@@ -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
```
<!--
Daten bleiben nach Browser-Neustart
Max 5-10 MB
Nur Strings → JSON.stringify/parse
Daten bleiben nach Browser-Neustart, nur Strings → JSON.stringify/parse
-->
---
@@ -1009,26 +955,15 @@ Nur Strings → JSON.stringify/parse
function Button() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>
Klicks: {count}
Clicks: {count}
</button>;
}
```
**Vue.js** (Evan You)
```vue
<template>
<button @click="count++">Klicks: {{ count }}</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
```
**Weitere:** Vue.js, Svelte, Angular
<!--
Frameworks für größere Apps
Komponenten-basiert
State Management eingebaut
Frameworks für größere Apps, Komponenten-basiert
-->
---
@@ -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/
---