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

feat: webseite-js

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-03 13:07:49 +02:00
parent 9a1be89bd8
commit ddaae120a7
14 changed files with 1490 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
02_advanced/uebungen/#u09_level-rekursiv/index.html
View File

@@ -1,36 +0,0 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 9: Tiefste Ebene eines verschachtelten Arrays finden</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">
<div class="alert alert-warning">
<h2>Übung 9 (advanced): Tiefste Ebene eines verschachtelten Arrays finden</h2>
<p>
Schreibe eine rekursive Funktion in JavaScript, die die tiefste Ebene eines verschachtelten Arrays bestimmt.
Die Funktion soll die maximale Verschachtelungstiefe des Arrays zurückgeben.
</p>
</div>
</div>
</main>
<script>
'use strict';
const findDeepestLevel = (arr, currentLevel = 1) => {};
// Array.isArray()
// Test cases
console.log(findDeepestLevel([1, [2, [3, [4]], 5]])); // => 4
console.log(findDeepestLevel([1, 2, 3, 4, 5])); // => 1
console.log(findDeepestLevel([])); // => 1
console.log(findDeepestLevel([1, [2], [3, [4, [5]]]])); // => 4
console.log(findDeepestLevel([1, [2, [3]], [4, [5, [6]]]])); // => 4
</script>
</body>
</html>

148
02_advanced/uebungen/u09_level-rekursiv/index.html Normal file
View File

@@ -0,0 +1,148 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 9: Tiefste Ebene eines verschachtelten Arrays finden</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">
<div class="alert alert-warning">
<h2>Übung 9 (advanced): Tiefste Ebene eines verschachtelten Arrays finden</h2>
<p>
Schreibe eine rekursive Funktion in JavaScript, die die tiefste Ebene eines verschachtelten Arrays bestimmt.
Die Funktion soll die maximale Verschachtelungstiefe des Arrays zurückgeben.
</p>
</div>
</div>
</main>
<script>
'use strict';
const findDeepestLevel = (arr, currentLevel = 1) => {
if (arr.length === 0) {
return currentLevel;
}
let maxLevel = currentLevel;
// Array durchlaufen
for (let i = 0; i < arr.length; i++) {
// wenn element array
if (Array.isArray(arr[i])) {
/* currentlevel um eins erhöhen und rekursiv wieder aufrufen und neue tiefe ermitteln. Wenn der letzte Aufruf von findD... abgeschlossen wird, wird die dort ermittelte Tiefe zurückgegeben usw...*/
const depth = findDeepestLevel(arr[i], currentLevel + 1);
// wenn tiefe höher als momentan max Tiefe, neue tiefe setzen
if (depth > maxLevel) {
maxLevel = depth;
}
}
}
// neue tiefe zurückgeben
return maxLevel;
};
const findDeepestLevel2 = (arr, currentLevel = 1) => {
if (arr.length === 0) {
return currentLevel;
}
let maxLevel = currentLevel;
// Array durchlaufen
arr.forEach((item) => {
if (Array.isArray(item)) {
const depth = findDeepestLevel2(item, ++currentLevel); // Rekursion
if (depth > maxLevel) {
maxLevel = depth;
}
}
});
// neue tiefe zurückgeben
return maxLevel;
};
const numbers = [
1, //
[
2, //
[3],
],
[1],
];
console.log(numbers[0]); // => 1
console.log(numbers[2]); // => [1]
console.log(numbers[2][0]); // => 1
const data = [
'wert', //
[
'wert', //
'wert',
'wert',
[
'wert', //
'wert',
[
'wert', //
'wert',
['wert'],
],
],
],
];
console.log(findDeepestLevel(data)); // => 5
console.log(findDeepestLevel2(data)); // => 5
console.log(findDeepestLevel([1, [2, [3]], [1]])); // => 3
// const findDeepestLevelIte = (arr) => {
// if (arr.length === 0) {
// return 1;
// }
// console.log('Länge des Arrays: ', arr.length);
// let depth = 0;
// for (let i = 0; i < arr.length; i++) {
// // console.log('i: ', i, ' arr.length: ', arr.length);
// if (Array.isArray(arr[i])) {
// depth++;
// console.log('depth wird erhöht: ', depth);
// } else {
// console.log('kein Array');
// }
// }
// return depth;
// };
// Test cases
console.log(findDeepestLevel([1, [2, [3]], [1]])); // => 3
console.log(findDeepestLevel([1, [2, [3, [4]], 5]])); // => 4
console.log(findDeepestLevel([1, 2, 3, 4, 5])); // => 1
// console.log(findDeepestLevel([])); // => 1
// console.log(findDeepestLevel([1, [2], [3, [4, [5]]]])); // => 4
// console.log(findDeepestLevel([1, [2, [3]], [4, [5, [6]]]])); // => 4
// const $on = (el, ev, fn) => {
// Array.isArray(el) ? el.forEach((ae) => $on(ae, ev, fn)) : el.addEventListener(ev, fn);
// return el;
// };
// $on(Array.from(document.querySelectorAll('li')), 'click', (e) => {
// console.log('click');
// });
// Array.from(document.querySelectorAll('li')).forEach((el) => {
// el.addEventListener('click', (e) => {
// console.log('click');
// });
// });
</script>
</body>
</html>

BIN
02_advanced/uebungen/u11_pyramide-break.zip Normal file
View File

Binary file not shown.

61
02_advanced/uebungen/u11_pyramide-break/index.js Normal file
View File

@@ -0,0 +1,61 @@
// Variante 1
const sentence = 'Dies ist eine Übung um der callback Hölle zu entkommen.';
const printWords = (sentence) => {
const wordArr = sentence.split(' ');
for (let i = 0; i < wordArr.length; i++) {
setTimeout(() => {
console.log(wordArr[i]);
}, 1000 * i);
}
};
const printWordsRek = (sentence, idxWort = 0) => {
const wordArr = sentence.split(' ');
// Basis-Fall
if (idxWort >= wordArr.length) {
return '';
}
// rekursiver mist :)
setTimeout(() => {
printWordsRek(sentence, idxWort + 1);
}, 1000);
// Ausgabe des Wortes
console.log(wordArr[idxWort]);
};
printWords(sentence);
printWordsRek(sentence);
// setTimeout(() => {
// console.log('The');
// setTimeout(() => {
// console.log('pyramid');
// setTimeout(() => {
// console.log('of');
// setTimeout(() => {
// console.log('doom');
// setTimeout(() => {
// console.log('keeps');
// setTimeout(() => {
// console.log('growing.');
// }, 1000);
// }, 1000);
// }, 1000);
// }, 1000);
// }, 1000);
// }, 1000);
// Übung 11: Die Pyramide abbrechen
// Schreibe das Codebeispiel 96 so um, dass keine Pyramide entsteht. Benutze dazu, wie im Text angedeutet, eine Funktion, die das n-te Wort ausgibt und sich per setTimeout(…) mit n + 1 als Parameter aufruft, solange noch Wörter im Satz vorhanden sind.

105
02_advanced/unterricht/tag15/02_switch-case/index.html Normal file
View File

@@ -0,0 +1,105 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Switch Case</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>Switch Case</h1>
<p>
Die
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/switch">switch</a
>-Anweisung wertet einen Ausdruck aus, vergleicht den Wert des Ausdrucks mit einer Reihe von
<strong>case</strong>-Klauseln und führt Anweisungen nach der ersten <strong>case</strong>-Klausel mit
passendem Wert aus, bis eine <strong>break</strong>-Anweisung erreicht wird. Die default-Klausel einer
switch-Anweisung wird angesprungen, wenn keine <strong>case</strong>-Klausel den Wert des Ausdrucks trifft.
</p>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
let taxRate;
const category = 'books'; //prompt('What is the product category?').trim().toLowerCase();
const productPrice = 100;
// if (category === 'books') {
// taxRate = 1.07;
// } else if (category === 'vehicle') {
// taxRate = 1.19;
// } else if (category === 'fruits') {
// taxRate = 1.05;
// }
switch (category) {
case 'books':
taxRate = 1.07;
break;
case 'vehicle':
taxRate = 1.19;
break;
case 'software':
case 'fruits':
taxRate = 1.05;
break;
default:
console.warn('category not found');
taxRate = 1.19;
}
// ======
const getColorByName = (variant = '') => {
let color;
switch (variant.trim().toLowerCase()) {
case 'primary':
color = '#0d6efd';
break;
case 'secondary':
color = '#6c757d';
break;
case 'warning':
color = '#ffc720';
break;
case 'success':
color = '#13653f';
break;
case 'info':
color = '#25cff2';
break;
case 'danger':
color = '#a52834';
break;
case 'light':
color = '#babbbc';
break;
case 'dark':
color = '#373b3e';
break;
default:
console.warn('variant not found');
color: 'white';
}
return color;
};
document.querySelector('h1').style.backgroundColor = getColorByName('warning');
const totalPrice = productPrice * taxRate;
outputEl.textContent = `Total price: $${totalPrice.toFixed(2)}`;
console.log('weiter im code...');
</script>
</body>
</html>

1
02_advanced/unterricht/tag15/03_README.md Normal file
View File

@@ -0,0 +1 @@
# Exkurs: Webseite mit Sass und package.json (scripts)

8
webseite-sass-js/.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,8 @@
{
"workbench.colorCustomizations": {
"titleBar.activeForeground": "#333",
"titleBar.activeBackground": "#4cc354",
"titleBar.inactiveForeground": "#ddd",
"titleBar.inactiveBackground": "#28862e"
}
}

5
webseite-sass-js/assets/css/main.css Normal file
View File

@@ -0,0 +1,5 @@
body {
background-color: #333;
}
/*# sourceMappingURL=main.css.map */

1
webseite-sass-js/assets/css/main.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../dev/assets/scss/main.scss"],"names":[],"mappings":"AAIA;EACE,kBAHQ","file":"main.css"}

19
webseite-sass-js/assets/js/main.js Normal file
View File

@@ -0,0 +1,19 @@
'use strict';
(() => {
// === DOM & VARS =======
const DOM = {};
// === INIT =============
const init = () => {
console.log('init ...');
};
// === EVENTHANDLER =====
// === XHR/FETCH ========
// === FUNCTIONS ========
init();
})();

7
webseite-sass-js/dev/assets/scss/main.scss Normal file
View File

@@ -0,0 +1,7 @@
// sass dev/assets/scss/main.scss:assets/css/main.css
$bgColor: #333;
body {
background-color: $bgColor;
}

18
webseite-sass-js/index.html Normal file
View File

@@ -0,0 +1,18 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webseite mit SASS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="assets/js/main.js" defer></script>
</head>
<body>
<main>
<div class="container py-5">
<h1>Webseite mit SASS</h1>
</div>
</main>
</body>
</html>

1100
webseite-sass-js/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
webseite-sass-js/package.json Normal file
View File

@@ -0,0 +1,17 @@
{
"name": "webseite-sass",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"css": "sass dev/assets/scss/main.scss:assets/css/main.css -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "module",
"devDependencies": {
"http-server": "^14.1.1",
"sass": "^1.101.0"
}
}