ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-06-30 14:56:20 +02:00
parent a83ec66c07
commit 41efb8a5ab
14 changed files with 635 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
02_advanced/unterricht/tag11/01_objekte.html
View File

@@ -29,7 +29,7 @@
const ar = []; const ar = [];
const ar2 = new Array(); // oder Array() const ar2 = new Array(); // oder Array()
const str = ''; // "" | ``` const str = ''; // "" | ``
const str2 = new String(); // oder String(); const str2 = new String(); // oder String();
const zahl = 123; const zahl = 123;
@@ -49,6 +49,7 @@
console.log(typeof str); // 'string' - Objekt vom Typ String console.log(typeof str); // 'string' - Objekt vom Typ String
console.log(typeof false); // 'boolean' - Objekt vom Typ Boolean console.log(typeof false); // 'boolean' - Objekt vom Typ Boolean
console.log(typeof zahl); // 'number' - Objekt vom Typ Number console.log(typeof zahl); // 'number' - Objekt vom Typ Number
console.log(typeof Infinity); // 'number' - Objekt vom Typ Number
console.log(typeof NaN); // 'number' - Objekt vom Typ Number console.log(typeof NaN); // 'number' - Objekt vom Typ Number
console.log(typeof (() => {})); // 'function' - Objekt vom Typ Function console.log(typeof (() => {})); // 'function' - Objekt vom Typ Function
console.log(typeof undefined); // undefined console.log(typeof undefined); // undefined
@@ -81,6 +82,7 @@
}; };
// Object.freeze(personObj); // Object.freeze(personObj);
// personObj.lastname = 'Wock';
personObj.hairColor = 'Braun'; personObj.hairColor = 'Braun';

15
02_advanced/unterricht/tag11/03_objekte-mit-this.html
View File

@@ -75,6 +75,14 @@
lauf: () => { lauf: () => {
return 'Person läuft'; return 'Person läuft';
}, },
// sayHello: function () {
// console.log(`${this.firstName} ${this.lastName} says "Hi"`);
// },
// Kurzschreibweise von "sayHello: function () {"
sayHello() {
console.log(`${this.firstName} ${this.lastName} says "Hi"`);
},
schiess: () => { schiess: () => {
console.log('pew pew'); console.log('pew pew');
}, },
@@ -87,6 +95,7 @@
console.log(personObj); console.log(personObj);
console.log(personObj.lauf()); // => 'Person läuft' console.log(personObj.lauf()); // => 'Person läuft'
console.log(personObj.schiess()); console.log(personObj.schiess());
console.log(personObj.sayHello());
console.log(personObj.age); // => 45 console.log(personObj.age); // => 45
@@ -120,13 +129,13 @@
}, },
// run: () => { // run: () => {
// console.log(this); // window // console.log(this); // window - keine neue Referenz
// console.log(`${this.fullName} is running!`); // console.log(`${this.fullName} is running!`); // undefined is running
// }, // },
// run: function () { // run: function () {
// console.log(this); // person - Object // console.log(this); // person - Object
// console.log(`${this.fullName} is running!`); // console.log(`${this.fullName} is running!`); // 'Ben Stiller' is running
// }, // },
run() { run() {

69
02_advanced/unterricht/tag12/01_csv-to-obj.html Normal file
View File

@@ -0,0 +1,69 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSV to Obj mit destructuring</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>CSV to Obj mit destructuring</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const productsCsv = `name, category, price
Klingon Letter Opener, Office Warfare, 19.99
Backpack of Holding, Travel, 29.99
Tardis Alarmclock, Merchandise, 15.99
`;
// Funktionen
const convertCsvToObj = (csv = '') => {
const rows = csv
.split('\n') // => ['name, category, price', 'Klingon Letter...']
.slice(1) // => [' Klingon Letter Opener, Office Warfare, 19.99', ...]
.map((row) => row.trim()) // "white spaces" des Strings werden entfernt
.filter((row) => row !== ''); // leere Einträge werden rausgefiltert
const ar = rows.map((row) => {
const fields = row.split(/\s*,\s*/); // => ['Klingon Letter Opener', 'Office Warfare', '19.99', ...]
// const name = fields[0];
// const category = fields[1];
// const price = fields[2];
// Destructuring von einem Array
const [name, category, price] = fields;
return {
// name: name,
// category: category,
name,
category,
price: Number(price),
};
});
// console.log(rows);
return ar;
};
const products = convertCsvToObj(productsCsv);
console.log(products);
outputEl.innerHTML = `<ol>${products
.map((product) => {
return `<li>Name: ${product.name} Price: <strong>${product.price.toFixed(2)}</strong></li>`;
})
.join('')}</ol>`;
</script>
</body>
</html>

110
02_advanced/unterricht/tag12/02_destructuring.html Normal file
View File

@@ -0,0 +1,110 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Destructuring von Objekten und Arrays in JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Destructuring von Objekten und Arrays in JS</h1>
</div>
</main>
<script>
'use strict';
// Destructuring von Arrays =============
const mixedArray = ['Max', 'Mustermann', 33, true, 5, 22, 17, 45, 32, 2];
// const vorname = mixedArray[0];
// const nachname = mixedArray[1];
// const alter = mixedArray[2];
// const istRaucher = mixedArray[3];
// const lottoZahlen = mixedArray.slice(4);
const [vorname, nachname, alter, istRaucher, ...lottoZahlen] = mixedArray;
console.log(vorname); // => 'Max'
// Destructuring von Objekten =============
const personObj = {
firstName: 'John',
lastName: 'Wick',
age: 52,
hobbies: ['Gassi gehen', 'Ballern'],
};
// const firstName = personObj.firstName;
// const lastName = personObj.lastName;
// const age = personObj.age;
// const hobbies = personObj.hobbies;
// Existierende Eigenschaften können bei der Definition mit ":" direkt umbenannt werden
const { firstName, age, lastName, hobbies: sports, isGamer = true } = personObj;
console.log(firstName); // => 'John'
console.log(sports); // => ['Gassi gehen', 'Ballern']
console.log(isGamer); // => true
console.log(age); // => 52
// const Slider = (options) => {
// if (options.controls) {
// const nav = document.querySelector('nav');
// nav.classList.add('controls');
// }
// // code logic
// if (options.showDots) {
// document.querySelector('.dots').classList.remove('show');
// }
// if (options.mode === 'gallery') {
// // ...logic
// } else if (options.mode === 'fade') {
// // ...logic
// } else if (options.mode === 'carousel') {
// // ...logic
// }
// };
const Slider = (options) => {
// Destructuring eines Objektes mit Defaultparametern und Umbenennung
const { controls = true, showDots: dots, mode = 'gallery', container: el } = options;
const slider = el; // options.container
if (controls) {
const nav = document.querySelector('nav');
nav.classList.add('controls');
}
// code logic
if (dots) {
document.querySelector('.dots').classList.remove('show');
}
if (mode === 'gallery') {
// ...logic
} else if (mode === 'fade') {
// ...logic
} else if (mode === 'carousel') {
// ...logic
}
};
Slider({
container: '.slider',
mode: 'gallery', // carousel | fade
controls: true,
showDots: false,
});
Slider({
container: '.slider',
showDots: false,
});
</script>
</body>
</html>

64
02_advanced/unterricht/tag12/03_destructuring-with-object.html Normal file
View File

@@ -0,0 +1,64 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS - Destructuring mit Objekten</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>JS - Destructuring mit Objekten</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
// Deklaration
const outputEl = document.querySelector('.output');
const product = {
name: 'Klingon Letter Opener',
category: 'Office Warfare',
price: 19.99,
};
// Funktionen
// const formatProduct = (product) => {
// return `- ${product.name} - buy now for only $${product.price.toFixed(2)}.`;
// };
// Destructuring eines Objektes
const formatProduct = (product) => {
const { name, price } = product;
return `- ${name} - buy now for only $${price.toFixed(2)}.`;
};
// Destructuring eines Objektes in der Parameterliste
const formatProduct2 = ({ name, price }) => {
return `- ${name} - buy now for only $${price.toFixed(2)}.`;
};
// Destructuring eines Objektes mit Umbennung
const formatProduct3 = (product) => {
const { name: productName, price: productPrice } = product; // zeigt Umbenennung. Umbennung in längere Bezeichnung ist jedoch unnötig
return `- ${productName} - buy now for only $${productPrice.toFixed(2)}.`;
};
// Destructuring eines Objektes mit Umbennung und Defaultparameter
const formatProduct4 = (product) => {
const { name: productName = 'no name', price: productPrice = 0 } = product; // zeigt Umbenennung. Umbennung in längere Bezeichnung ist jedoch unnötig
return `- ${productName} - buy now for only $${productPrice.toFixed(2)}.`;
};
// Ausgabe
console.log(formatProduct2(product));
outputEl.textContent = formatProduct4();
</script>
</body>
</html>

61
02_advanced/unterricht/tag12/04_destructuring-with-rest-operator.html Normal file
View File

@@ -0,0 +1,61 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS - Destructuring mir Rest-Parameter (...)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>JS - Destructuring mir Rest-Parameter (...)</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const productAr = ['Klingon Letter Opener', 'Office Warfare', '19.99'];
const product = {
name: 'Klingon Letter Opener',
category: 'Office Warfare',
price: '19.99',
};
// Destructuring eines Array mit rest-operator
const [name, ...everythingElse] = productAr;
console.log('name: ', name);
console.log('everythingElse: ', everythingElse.join(' - '));
// Destructuring eines Objektes mit rest-operator
const { name: productName, ...restObj } = product;
console.log('productName: ', productName);
console.log('restObj', restObj); // => {category: 'Office Warfare', price: '19.99'}
// Destructuring eines Objektes mit rest-operator
const user = {
_id: 123,
firstName: 'Adel',
lastName: 'Jabarkhel',
username: 'Megaman',
password: 'topsecret',
data: [{ avatar: '', profilePic: '' }],
};
console.log(user);
const { password, ...newUser } = user;
console.log(newUser); // User Object ohne sensbile Daten (password)
for (const prop in newUser) {
outputEl.innerHTML += `${prop} : ${newUser[prop]} <br />`;
}
</script>
</body>
</html>

33
02_advanced/unterricht/tag12/05_destructuring-in-paramerterliste.html Normal file
View File

@@ -0,0 +1,33 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS - Destructuring in der Parameterliste mit Defaultwerten</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>JS - Destructuring in der Parameterliste mit Defaultwerten</h1>
</div>
</main>
<script>
'use strict';
// Destructuring in der Parameterliste mit Defaultwert (Object)
const foo = ({ a = 1, b = 2 } = { a: 3, b: 4 }) => `a: ${a}, b: ${b}`;
const foo2 = (obj = {}) => {
const { prop1 = 'wert', prop2 = 'wert2' } = obj;
};
console.log(foo({ a: 7 })); // => 'a: 7, b: 2'
console.log(foo({ b: 7 })); // => 'a: 1, b: 7'
console.log(foo({ a: 7, b: 8 })); // => 'a: 7, b: 8'
console.log(foo({})); // => 'a: 1, b: 2'
console.log(foo()); // => 'a: 3, b: 4'
</script>
</body>
</html>

42
02_advanced/unterricht/tag12/06_rekursion.html Normal file
View File

@@ -0,0 +1,42 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rekursion in JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Rekursion in JS</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
// Funktionen
const getProductPrice = () => {
const price = Number(prompt('Please insert the product price.'));
// Basisfall
if (isNaN(price) || price < 0) {
console.warn('It is not a valid price.');
return getProductPrice(); // Rekursion
}
return price;
};
const price = getProductPrice();
const text = `Price: $${price.toFixed(2)}`;
// Ausgabe
console.log(text);
outputEl.textContent = text;
</script>
</body>
</html>

41
02_advanced/unterricht/tag12/07_rekursion-rate-zahl.html Normal file
View File

@@ -0,0 +1,41 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rekursion - Beispiel Zahl raten</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Rekursion - Beispiel Zahl raten</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const guessNumber = (rndN, round = 1) => {
const rndNumber = (!rndN) ? Math.floor(Math.random() * 10) + 1 : rndN; // prettier-ignore
console.log(rndNumber);
const userGuess = Number(prompt(`Round ${round}:Guess a number between 1 - 10.\nYour guess?`));
// Basisfall
if (userGuess > rndNumber) {
alert('Your guess was too high.\nGuess again.');
return guessNumber(rndNumber, ++round); // Rekursion
} else if (userGuess < rndNumber) {
alert('Your guess was too low.\nGuess again.');
return guessNumber(rndNumber, ++round); // Rekursion
}
return `Your guess: ${userGuess} is correct in round: ${round}`;
};
outputEl.textContent = guessNumber();
</script>
</body>
</html>

49
02_advanced/unterricht/tag12/08_rekursion-mit-closure.html Normal file
View File

@@ -0,0 +1,49 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rekursion - Beispiel Zahl raten</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Rekursion - Beispiel Zahl raten</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
// closure Function
const startGuessGame = () => {
const rndNumber = Math.floor(Math.random() * 10) + 1; // prettier-ignore
let round = 1;
const guessNumber = () => {
console.log(rndNumber);
const userGuess = Number(prompt(`Round ${round}:Guess a number between 1 - 10.\nYour guess?`));
// Basisfall
if (userGuess > rndNumber) {
alert('Your guess was too high.\nGuess again.');
round++;
return guessNumber(); // Rekursion
} else if (userGuess < rndNumber) {
alert('Your guess was too low.\nGuess again.');
round++;
return guessNumber(); // Rekursion
}
return `Your guess: ${userGuess} is correct in round: ${round}`;
};
return guessNumber();
};
outputEl.textContent = startGuessGame();
</script>
</body>
</html>

37
02_advanced/unterricht/tag12/09_rekursion-fakultaet.html Normal file
View File

@@ -0,0 +1,37 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rekursion Beispiel: Fakultät errechnen</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Rekursion Beispiel: Fakultät errechnen</h1>
</div>
</main>
<script>
'use strict';
const calcFactorial = (n) => {
// Base case
if (n === 0) {
return 1;
}
// Recursive case
return n * calcFactorial(n - 1); // => 3 * (calcFactorial(2) ->) 2 * (calcFactorial(1) ->) 1 * (calcFactorial(0))) 1 )
};
// TODO: mit while Schleife
const calcFactorialWithWhile = (n) => {};
// Test Cases:
console.log(calcFactorial(5)); //=> 120;
console.log(calcFactorial(3)); //=> 6
console.log(calcFactorial(0)); // => 1
</script>
</body>
</html>

64
02_advanced/unterricht/tag12/10_rekursion-fibonacci.html Normal file
View File

@@ -0,0 +1,64 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rekursion Beispiel: Fibonacci-Reihenfolge errechnen</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Rekursion Beispiel: Fibonacci-Reihenfolge errechnen</h1>
</div>
</main>
<script>
'use strict';
const fibonacci = (n) => {
// Base cases
if (n === 0) {
return 0;
}
if (n === 1) {
return 1;
}
// Recursive case
return fibonacci(n - 1) + fibonacci(n - 2);
};
// 0 + 1 = 1
// 1 + 1 = 2
// 2 + 1 = 3
// 3 + 2 = 5
// 3 + 5 = 8
// Test cases
console.log(fibonacci(0)); // => 0
console.log(fibonacci(1)); // => 1
console.log(fibonacci(2)); // => 1
console.log(fibonacci(3)); // => 2
console.log(fibonacci(4)); // => 3
console.log(fibonacci(5)); // => 5
console.log(fibonacci(6)); // => 8
console.log(fibonacci(7)); // => 13
console.log(fibonacci(8)); // => 21
console.log(fibonacci(10)); // => 55
// drawLine - mit char
const drawLine = (width, char = '*') => {
// Basisfall
if (width === 0) return '';
return char + drawLine(width - 1, char); // '🤡' + '🤡' + '🤡' + '🤡' + '🤡' + ''
};
console.log(drawLine(5, '🤡')); // => '🤡🤡🤡🤡🤡🤡'
console.log(drawLine(20, '🐣')); // => '🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣'
</script>
</body>
</html>

46
02_advanced/unterricht/tag12/11_rekursion-sum-ohne-reduce.html Normal file
View File

@@ -0,0 +1,46 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rekursion Beispiel: Summe eine Arrays errechnen</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Rekursion Beispiel: Summe eine Arrays errechnen</h1>
</div>
</main>
<script>
'use strict';
const sumArray = (arr) => {
// Base case: when the array is empty, return 0
if (arr.length === 0) {
return 0;
}
// Recursive case: add the first element to the sum of the rest of the array
return arr[0] + sumArray(arr.slice(1)); // => 1 + [2, 3, 4, 5] -> 2 + [3, 4, 5] -> 3 + [4, 5] -> 4 + [5] -> 5 + [] -> 0
};
const sumArrayReduce = (arr) => {
return arr.reduce((a, b) => a + b, 0);
};
const sumArrayWhile = (arr) => {
// TODO: while
};
// Test cases
console.time('rekursion');
console.log(sumArray([1, 2, 3, 4, 5])); // => 15
console.timeEnd('rekursion');
// Test cases
console.time('reduce');
console.log(sumArrayReduce([1, 2, 3, 4, 5])); // => 15
console.timeEnd('reduce');
</script>
</body>
</html>

4
02_advanced/unterricht/tag12/data/products.csv Normal file
View File

@@ -0,0 +1,4 @@
name, category, price
Klingon Letter Opener, Office Warfare, 19.99
Backpack of Holding, Travel, 29.99
Tardis Alarmclock, Merchandise, 15.99
1 name category price
2 Klingon Letter Opener Office Warfare 19.99
3 Backpack of Holding Travel 29.99
4 Tardis Alarmclock Merchandise 15.99