From 141a2ab60992490f9cd454fedd42d6e2a3b49614 Mon Sep 17 00:00:00 2001 From: Philippe Torrel Date: Mon, 19 Oct 2026 10:27:26 +0200 Subject: [PATCH] --- .../frontend-gulp/TODO.md | 6 +- .../dev/scripts/utils/helpers.js | 11 +++ .../frontend-vite/src/html/pages/contact.html | 9 +- 05_typescript/agenda.md | 6 +- .../uebungen/u10_assertions/src/main.ts | 87 ++++++++++++++----- .../uebungen/u11_literals/assets/js/bundle.js | 50 +++++++++++ .../uebungen/u11_literals/package.json | 4 +- .../uebungen/u11_literals/src/main.ts | 73 +++++++++++----- .../tag30/01_ts-types/src/01_type-literale.ts | 2 +- 9 files changed, 188 insertions(+), 60 deletions(-) create mode 100644 05_typescript/uebungen/u11_literals/assets/js/bundle.js diff --git a/04_browser-api/unterricht/tag30/01_website-refactored/frontend-gulp/TODO.md b/04_browser-api/unterricht/tag30/01_website-refactored/frontend-gulp/TODO.md index 998a2a1..6c8f1c6 100644 --- a/04_browser-api/unterricht/tag30/01_website-refactored/frontend-gulp/TODO.md +++ b/04_browser-api/unterricht/tag30/01_website-refactored/frontend-gulp/TODO.md @@ -1,6 +1,6 @@ ## Refactoring ProductManager -- [ ] Aktualisierung der Produktpositionen nach Veränderung durch Drag n' Drop -- [ ] fetch Anfragen durch `api.request()` Methode zusammenfassen (DRY-Prinzip) -- [ ] Anzahl an EventListener auf Zeilenebene durch Eventlistener auf Tabellenebene reduzieren. +- [x] Aktualisierung der Produktpositionen nach Veränderung durch Drag n' Drop +- [x] fetch Anfragen durch `api.request()` Methode zusammenfassen (DRY-Prinzip) +- [x] Anzahl an EventListener auf Zeilenebene durch Eventlistener auf Tabellenebene reduzieren. - [ ] HTML Elemente, die derzeit eine einmalige Zuweisung (z.B. `id`, `for`, `aria-labelledby` Attribut) im Produktmanager besitzen sollen über JS eine einmalige ID über `uuid` erhalten. \ No newline at end of file diff --git a/04_browser-api/unterricht/tag30/01_website-refactored/frontend-gulp/dev/scripts/utils/helpers.js b/04_browser-api/unterricht/tag30/01_website-refactored/frontend-gulp/dev/scripts/utils/helpers.js index 419c157..a04a589 100644 --- a/04_browser-api/unterricht/tag30/01_website-refactored/frontend-gulp/dev/scripts/utils/helpers.js +++ b/04_browser-api/unterricht/tag30/01_website-refactored/frontend-gulp/dev/scripts/utils/helpers.js @@ -7,6 +7,17 @@ export function parents(el, selector) { return parents; } +export const parent = (el, selector, boundary = document) => { + let current = el; + while (current && current !== document) { + if (current.matches(selector) && (!boundary || current.parentElement === boundary)) { + return current; + } + current = current.parentElement; + } + return null; +}; + export function addClass(el, className) { if (Array.isArray(className)) { el.classList.add(...className); diff --git a/04_browser-api/unterricht/tag30/01_website-refactored/frontend-vite/src/html/pages/contact.html b/04_browser-api/unterricht/tag30/01_website-refactored/frontend-vite/src/html/pages/contact.html index e6facab..3adf3a8 100644 --- a/04_browser-api/unterricht/tag30/01_website-refactored/frontend-vite/src/html/pages/contact.html +++ b/04_browser-api/unterricht/tag30/01_website-refactored/frontend-vite/src/html/pages/contact.html @@ -1,14 +1,11 @@ - {% set title = 'Contact' %} - {% set active = 'contact' %} - {% include "head.html" %} + {% set title = 'Contact' %} {% set active = 'contact' %} {% include "head.html" %} - {% include "header-main.html" %} - {% include "menu-main.html" %} + {% include "header-main.html" %} {% include "menu-main.html" %}
-

Kontakt

+

Kontakt!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, iste?

diff --git a/05_typescript/agenda.md b/05_typescript/agenda.md index bd4c41c..fe2c015 100644 --- a/05_typescript/agenda.md +++ b/05_typescript/agenda.md @@ -496,13 +496,14 @@ Projekte & optionale Übungen **Inhalt:** - Typescript literale +- Projektvorstellung - **Exkurs: Vite vs Gulp** - **Produktmanager Refactoring mit Bootstrap 6** **Übungen:** Übungen 10 - 11 - +Projekt 1: TaskManager --- @@ -546,7 +547,8 @@ Projektarbeit - Einführung in REACT - VDOM von REACT -- ES6 Module mit ohne ohne Bundler +- ES6 Module mit ohne Bundler +- Build Tools im Vergleich & Einführung in Vite **Übungen:** diff --git a/05_typescript/uebungen/u10_assertions/src/main.ts b/05_typescript/uebungen/u10_assertions/src/main.ts index 3a52c34..770c105 100644 --- a/05_typescript/uebungen/u10_assertions/src/main.ts +++ b/05_typescript/uebungen/u10_assertions/src/main.ts @@ -1,34 +1,73 @@ -// [ ] Step 1: Create an object 'mysteryObject' with a property 'info' that holds a string. -// - The object should be of type 'unknown'. +{ + // [ ] Step 1: Create an object 'mysteryObject' with a property 'info' that holds a string. + // - The object should be of type 'unknown'. + const mysteryObject = ({ + info: 'string', + }) as { info: string }; -// [ ] Step 2: Use a type assertion to assert that 'mysteryObject' is of type '{ info: string }'. + // [ ] Step 2: Use a type assertion to assert that 'mysteryObject' is of type '{ info: string }'. + // const typedMysteryObject = mysteryObject as { info: string }; // Die Aufgabe war NICHT eine neue Variable zu erstellen! -// [ ] Step 3: Access the 'info' property and assign a new string to it. + // [ ] Step 3: Access the 'info' property and assign a new string to it. + mysteryObject.info = 'new string'; + // typedMysteryObject.info = 'Updated Info'; -// [ ] Step 4: Define a custom type 'ComplexObject' with a method 'compute' that returns a string. + // [ ] Step 4: Define a custom type 'ComplexObject' with a method 'compute' that returns a string. + type ComplexObject = { + compute(): string; + // compute: () => string + }; -// [ ] Step 5: Create an object 'basicObject' with a method 'compute'. -// - The method should return a string "Basic Computation". + // [ ] Step 5: Create an object 'basicObject' with a method 'compute'. + // - The method should return a string "Basic Computation". + const basicObject = { + compute() { + return 'Basic Computation'; + }, + // compute: () => 'Basic Computation' + } as unknown as ComplexObject; -// [ ] Step 6: Use a two-step type assertion to assert that 'basicObject' is of type 'ComplexObject'. + // [ ] Step 6: Use a two-step type assertion to assert that 'basicObject' is of type 'ComplexObject'. + // const complexObject = basicObject as unknown as ComplexObject; // Die Aufgabe war NICHT eine neue Variable zu erstellen! -// [ ] Step 7: Call the 'compute' method on 'basicObject' and log the result. + // [ ] Step 7: Call the 'compute' method on 'basicObject' and log the result. + console.log(basicObject.compute()); -// Test cases to verify your code implementation (comment out the code below to remove the initial errors) + // Test cases to verify your code implementation (comment out the code below to remove the initial errors) -// Verify that 'info' was correctly accessed and modified -console.log('Updated info:', typedMysteryObject.info); // => "Updated Info" + // Verify that 'info' was correctly accessed and modified + console.log('Updated info:', mysteryObject.info); // => "Updated Info" -// Verify that 'compute' method of 'complexObject' returns the expected result -if (complexObject.compute() === 'Basic Computation') { - console.log('compute method returned the expected result.'); -} else { - console.error('compute method did not return the expected result.'); -} - -// Verify 'info' type compatibility -if (typeof typedMysteryObject.info === 'string') { - console.log('info property is of type string.'); -} else { - console.error('info property is not of type string.'); + // Verify that 'compute' method of 'complexObject' returns the expected result + if (basicObject.compute() === 'Basic Computation') { + console.log('compute method returned the expected result.'); + } else { + console.error('compute method did not return the expected result.'); + } + + // Verify 'info' type compatibility + if (typeof mysteryObject.info === 'string') { + console.log('info property is of type string.'); + } else { + console.error('info property is not of type string.'); + } + + // Test cases to verify your code implementation (comment out the code below to remove the initial errors) + + // Verify that 'info' was correctly accessed and modified + // console.log('Updated info:', typedMysteryObject.info); // => "Updated Info" + + // Verify that 'compute' method of 'complexObject' returns the expected result + // if (complexObject.compute() === 'Basic Computation') { + // console.log('compute method returned the expected result.'); + // } else { + // console.error('compute method did not return the expected result.'); + // } + + // Verify 'info' type compatibility + // if (typeof typedMysteryObject.info === 'string') { + // console.log('info property is of type string.'); + // } else { + // console.error('info property is not of type string.'); + // } } diff --git a/05_typescript/uebungen/u11_literals/assets/js/bundle.js b/05_typescript/uebungen/u11_literals/assets/js/bundle.js new file mode 100644 index 0000000..3b21d6e --- /dev/null +++ b/05_typescript/uebungen/u11_literals/assets/js/bundle.js @@ -0,0 +1,50 @@ +(() => { + var __getOwnPropNames = Object.getOwnPropertyNames; + var __commonJS = (cb, mod) => function __require() { + try { + return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; + } catch (e) { + throw mod = 0, e; + } + }; + + // src/main.ts + var require_main = __commonJS({ + "src/main.ts"() { + { + let rateExperience3 = function(rating) { + return `You rated the experience as ${rating}`; + }; + rateExperience = rateExperience3; + const setStatus = (status) => { + console.log(status); + }; + let Ratings; + ((Ratings2) => { + Ratings2[Ratings2["ONE"] = 1] = "ONE"; + Ratings2[Ratings2["TWO"] = 2] = "TWO"; + Ratings2[Ratings2["THREE"] = 3] = "THREE"; + Ratings2[Ratings2["FOUR"] = 4] = "FOUR"; + Ratings2[Ratings2["FIVE"] = 5] = "FIVE"; + })(Ratings || (Ratings = {})); + const rateExperience2 = (rating) => { + return `You rated the experience as ${rating}`; + }; + const togglePower = (state) => { + return state === true ? "Power is ON" : "Power is OFF"; + }; + setStatus("success"); + setStatus("error"); + setStatus("complete"); + console.log(rateExperience3(5)); + console.log(rateExperience3(3)); + console.log(rateExperience3(5 /* FIVE */)); + console.log(rateExperience3(3 /* THREE */)); + console.log(togglePower(true)); + console.log(togglePower(false)); + } + var rateExperience; + } + }); + require_main(); +})(); diff --git a/05_typescript/uebungen/u11_literals/package.json b/05_typescript/uebungen/u11_literals/package.json index 285e9ca..177fa8b 100644 --- a/05_typescript/uebungen/u11_literals/package.json +++ b/05_typescript/uebungen/u11_literals/package.json @@ -4,7 +4,9 @@ "description": "", "main": "index.js", "scripts": { - "ts": "npx esbuild src/main.ts --watch --bundle --outfile=assets/js/bundle.js --loader:.ts=ts" + "ts": "npx esbuild src/main.ts --watch --bundle --outfile=assets/js/bundle.js --loader:.ts=ts", + "ts:enum": "npx tsx src/main.ts", + "tse": "node --experimental-transform-types src/main.ts" }, "keywords": [], "author": "", diff --git a/05_typescript/uebungen/u11_literals/src/main.ts b/05_typescript/uebungen/u11_literals/src/main.ts index 468d4b5..14e8365 100644 --- a/05_typescript/uebungen/u11_literals/src/main.ts +++ b/05_typescript/uebungen/u11_literals/src/main.ts @@ -1,30 +1,57 @@ -// [ ] Step 1: Create a function 'setStatus' that accepts a string literal type parameter 'status'. -// - The 'status' can only be "success", "error", or "loading". -// - The function should log the status to the console. +{ + // [ ] Step 1: Create a function 'setStatus' that accepts a string literal type parameter 'status'. + // - The 'status' can only be "success", "error", or "loading". + // - The function should log the status to the console. -// [ ] Step 2: Create a function 'rateExperience' that accepts a numeric literal type parameter 'rating'. -// - The 'rating' can only be 1, 2, 3, 4, or 5. -// - The function should return a message indicating the rating. + const setStatus = (status: 'success' | 'error' | 'loading') => { + console.log(status); + }; -// [ ] Step 3: Create a function 'togglePower' that accepts a boolean literal type parameter 'state'. -// - The 'state' can only be true or false. -// - The function should return a message indicating whether the power is ON or OFF. + // [ ] Step 2: Create a function 'rateExperience' that accepts a numeric literal type parameter 'rating'. + // - The 'rating' can only be 1, 2, 3, 4, or 5. + // - The function should return a message indicating the rating. -// [ ] Step 4: Test the functions with valid and invalid values to ensure the correct behavior and type safety. + enum Ratings { + ONE = 1, + TWO = 2, + THREE = 3, + FOUR = 4, + FIVE = 5, + } + const rateExperience2 = (rating: Ratings) => { + return `You rated the experience as ${rating}`; + }; + function rateExperience(rating: 1 | 2 | 3 | 4 | 5) { + return `You rated the experience as ${rating}`; + } -// Test cases (students should verify that these work as expected) + // [ ] Step 3: Create a function 'togglePower' that accepts a boolean literal type parameter 'state'. + // - The 'state' can only be true or false. + // - The function should return a message indicating whether the power is ON or OFF. -// Test 'setStatus' function -setStatus('success'); // OK -setStatus('error'); // OK -setStatus('complete'); // Error: Argument of type '"complete"' is not assignable to parameter of type '"success" | "error" | "loading"'. + const togglePower = (state: boolean) => { + return state === true ? 'Power is ON' : 'Power is OFF'; + }; -// Test 'rateExperience' function -console.log(rateExperience(5)); // => "You rated the experience as 5" -console.log(rateExperience(3)); // => "You rated the experience as 3" -console.log(rateExperience(6)); // Error: Argument of type '6' is not assignable to parameter of type '1 | 2 | 3 | 4 | 5'. + // [ ] Step 4: Test the functions with valid and invalid values to ensure the correct behavior and type safety. -// Test 'togglePower' function -console.log(togglePower(true)); // => "Power is ON" -console.log(togglePower(false)); // => "Power is OFF" -console.log(togglePower('on')); // Error: Argument of type '"on"' is not assignable to parameter of type 'true | false'. + // Test cases (students should verify that these work as expected) + + // Test 'setStatus' function + setStatus('success'); // OK + setStatus('error'); // OK + // setStatus('complete'); // Error: Argument of type '"complete"' is not assignable to parameter of type '"success" | "error" | "loading"'. + + // Test 'rateExperience' function + console.log(rateExperience(5)); // => "You rated the experience as 5" + console.log(rateExperience(3)); // => "You rated the experience as 3" + // console.log(rateExperience(6)); // Error: Argument of type '6' is not assignable to parameter of type '1 | 2 | 3 | 4 | 5'. + + console.log(rateExperience(Ratings.FIVE)); // => "You rated the experience as 5" + console.log(rateExperience(Ratings.THREE)); // => "You rated the experience as 3" + + // Test 'togglePower' function + console.log(togglePower(true)); // => "Power is ON" + console.log(togglePower(false)); // => "Power is OFF" + // console.log(togglePower('on')); // Error: Argument of type '"on"' is not assignable to parameter of type 'true | false'. +} diff --git a/05_typescript/unterricht/tag30/01_ts-types/src/01_type-literale.ts b/05_typescript/unterricht/tag30/01_ts-types/src/01_type-literale.ts index 62b0f70..ade4767 100644 --- a/05_typescript/unterricht/tag30/01_ts-types/src/01_type-literale.ts +++ b/05_typescript/unterricht/tag30/01_ts-types/src/01_type-literale.ts @@ -94,7 +94,7 @@ console.log(`Moving ${movement}`); }; - setDirection2(Move.Up); + setDirection2(Move.Down); setDirection2(Move.Right); setDirection2(Move.Down); setDirection2(Move.Right);