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