diff --git a/web/10/demos/01_hello.html b/web/10/demos/01_hello.html new file mode 100644 index 0000000..6db8560 --- /dev/null +++ b/web/10/demos/01_hello.html @@ -0,0 +1,15 @@ + + + + + + + + Hello Studierende + + + +

Grüße an alle Studierenden

+ + + \ No newline at end of file diff --git a/web/10/demos/02_hello.html b/web/10/demos/02_hello.html new file mode 100644 index 0000000..b2de9af --- /dev/null +++ b/web/10/demos/02_hello.html @@ -0,0 +1,18 @@ + + + + + + + Hello World + + + +

Grüße an alle

+

TH Mannheim

+ +

Welt

+ + + + \ No newline at end of file diff --git a/web/10/demos/02_hello.js b/web/10/demos/02_hello.js new file mode 100644 index 0000000..4fde3b0 --- /dev/null +++ b/web/10/demos/02_hello.js @@ -0,0 +1 @@ +alert("Hallo Studierende!"); \ No newline at end of file diff --git a/web/10/demos/03_basics.js b/web/10/demos/03_basics.js new file mode 100644 index 0000000..c324e65 --- /dev/null +++ b/web/10/demos/03_basics.js @@ -0,0 +1,105 @@ +// DATENTYPEN +let zahl = 42; +let text = "Hallo Welt"; +let wahr = true; +let undefiniert; +let leer = null; +let symbol = Symbol("id"); // erzeugt einzigartigen Wert +let gross = 123n; // bigint: für sehr große Ganzzahlen + +// UNTERSCHIED ZWISCHEN null UND undefined +console.log(typeof undefiniert); // "undefined" +console.log(typeof leer); // "object" +console.log(undefiniert == null); // true → lose Gleichheit, beide gelten als "leer" +console.log(undefiniert === null); // false → strikte Gleichheit, Typen sind verschieden + +// OBJEKTE MIT METHODEN + +// Beispiel: const mit Objekt +const person = { name: "Moritz" }; +person.name = "Max"; +// person = {} //nicht erlaubt, weil const + +// Beispiel: Objekt mit Methode +let benutzer = { + name: "Galinda", + alter: 25, + begruessen: function() { + console.log("Hallo, ich bin " + this.name); + } +}; +benutzer.begruessen(); // Methode aufrufen +console.log(benutzer["alter"]); // Zugriff via Schlüssel + +// KONTROLLFLUSS +if (zahl > 40) { + console.log("Zahl ist größer als 40"); +} else if (zahl === 40) { + console.log("Zahl ist genau 40"); +} else { + console.log("Zahl ist kleiner als 40"); +} + +switch (text) { + case "Hallo Welt": + console.log("Begrüßung erkannt"); + break; + case "Hi": + console.log("Kurzform erkannt"); + break; + default: + console.log("Unbekannter Text"); +} + +switch (42) { + case "42": // kein Match, da Typ unterschiedlich -> Vergleich basiert auf strikter Gleichheit (===) + console.log("String"); + break; + case 42: + console.log("Number"); + break; +} + +for (let i = 0; i < 3; i++) { + console.log("Zähler:", i); +} + +// ARRAYS +let obst = ["Apfel", "Banane", "Kirsche"]; +obst.push("Mango"); +console.log(obst[1]); +obst.forEach(function(f) { + console.log("Frucht:", f); +}); +const zahlen = [1, 2, 3]; +// map erzeugt ein neues Array +const verdoppelt = zahlen.map(n => n * 2); +console.log(verdoppelt); // [2, 4, 6] + +// SPREAD-OPERATOR +const extendedZahlen = [...zahlen, 4]; +console.log(extendedZahlen); + +const extendedBenutzer = {...benutzer, beiname: "die Gute"} +console.log(extendedBenutzer["name"] + " " + extendedBenutzer["beiname"]) + +// ERROR HANDLING +// try-catch-finally funktioniert ähnlich wie in Java +try { + // Fehler absichtlich auslösen + throw new Error("Etwas ist schiefgelaufen"); +} catch (e) { + console.error("Fehler:", e.message); // Fehlerbehandlung +} finally { + console.log("Cleanup abgeschlossen"); // wird immer ausgeführt +} + +// JSON +// Objekt → JSON-String +const obj = { name: "Margaret", alter: 13 }; +const jsonStr = JSON.stringify(obj); +console.log(jsonStr); + +// JSON-String → Objekt +const parsed = JSON.parse(jsonStr); +console.log(parsed.alter); \ No newline at end of file diff --git a/web/10/demos/04_functions.js b/web/10/demos/04_functions.js new file mode 100644 index 0000000..afed174 --- /dev/null +++ b/web/10/demos/04_functions.js @@ -0,0 +1,53 @@ +// Normale Funktionsdeklaration +function add(a, b) { + return a + b; +} +console.log("Normale Funktion:", add(2, 3)); + + +// Anonyme Funktion +const multiply = function(x, y) { + return x * y; +}; +console.log("Anonyme Funktion:", multiply(4, 5)); + + +// Arrow Function +const subtract = (a, b) => a - b; +console.log("Arrow Function:", subtract(10, 3)); + +const square = x => x * x; +console.log("Quadrat:", square(6)); + +const greet = (name) => { + return "Hallo " + name; +}; +console.log(greet("Hans")); + + +// Funktionen als Parameter (Callbacks) +function doMath(a, b, operation) { + return operation(a, b); +} + +// Übergabe einer anonymen Funktion +console.log("Callback anonym:", doMath(3, 4, function(x, y) { + return x + y; +})); + +// Übergabe einer Arrow Function +console.log("Callback arrow:", doMath(3, 4, (x, y) => x * y)); + + +// Higher-Order Functions mit Arrays (map) +let zahlen = [1, 2, 3, 4, 5]; + +// Mit anonymer Funktion +let verdoppelt = zahlen.map(function(n) { + return n * 2; +}); +console.log("Verdoppelt (anonym):", verdoppelt); + +// Mit Arrow Function +let verdoppeltArrow = zahlen.map(n => n * 2); +console.log("Verdoppelt (arrow):", verdoppeltArrow); \ No newline at end of file diff --git a/web/10/demos/05_dom.html b/web/10/demos/05_dom.html new file mode 100644 index 0000000..30e394c --- /dev/null +++ b/web/10/demos/05_dom.html @@ -0,0 +1,48 @@ + + + + + + Node-Typen und Manipulation + + + +

Hallo Welt!

+

...

+ + + + + + \ No newline at end of file diff --git a/web/10/labor/10_aufgaben.md b/web/10/labor/10_aufgaben.md new file mode 100644 index 0000000..5751db6 --- /dev/null +++ b/web/10/labor/10_aufgaben.md @@ -0,0 +1,43 @@ +# Übungsblatt 10 + +## 1. Javascript-Übung: Grundlagen + +**Aufgabenstellung**: Machen Sie sich zunächst mit den Grundlagen der Programmiersprache vertraut und schreiben Sie dann ein Programm, das über ein vorgegebenes Array von Zahlen iteriert und für jede Zahl ausgibt: + - "Null" wenn die Zahl 0 ist + - "Gerade Zahl" wenn die Zahl gerade ist + - "Ungerade Zahl" wenn die Zahl ungerade ist + +*Ausgangsdaten*: +```js +const zahlen = [38, 0, 226, 384, 111, 500383]; +``` + +#### Arbeitsschritte +1. Arbeiten Sie mindestens die folgenden Kapitel auf [Javascript Tutorial](https://www.w3schools.com/js/default.asp) durch: + - JS Syntax + - JS Variables + - JS If Conditions + - JS Loops +2. Verwenden Sie zur Lösung der Aufgabe eine **for‑Schleife** und den **ternären Operator**. +3. _Tipp_: `zahlen.length` liefert die aktuelle Länge des Arrays. + +## 2. Javascript-Übung: Arrow-Function + +**Aufgabenstellung**: Die Produktdaten eines kleinen Online-Supermarkts liegen als Array von Objekten vor, jedes Objekt enthält den Namen und den Preis eines Produkts. Schreiben Sie eine kleine Javascript-Funktion, die ein neues Array erstellt, in dem alle Preise um 10 % reduziert sind. Die Preise sollen dabei auf zwei Nachkommastellen gerundet werden. + +*Ausgangsdaten*: + +```json +[ + { "produkt": "Joghurt", "preis": 2.49 }, + { "produkt": "Brot", "preis": 3.29 }, + { "produkt": "Käse", "preis": 8.99 }, + { "produkt": "Duschgel","preis": 2.79 } +] +``` + +#### Arbeitsschritte +1. Verwenden Sie `map`, um ein neues Array zu erzeugen. +2. Nutzen Sie eine Arrow-Function, um den Rabatt zu berechnen. +3. Mit `.toFixed(2)` können Sie die Preise auf zwei Nachkommastellen formatieren. +4. Geben Sie das neue Array in der Konsole aus. \ No newline at end of file