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

new class js -advanced

Browse Source
This commit is contained in:
Philippe Torrel
2026-06-29 11:35:03 +02:00
parent ee8a87bf2a
commit 31c13250b0
104 changed files with 2632 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
01_grundlagen/agenda.md
View File

@@ -1,223 +0,0 @@
---
marp: true
theme: default
---
## JavaScript Grundlagen Teil 1.
---
#### Tag 01
**Inhalt:**
- Vorstellungsrunde
- Einrichtung der IDE
- Tools für die Webentwicklung (Emmet, Markdown, VS-Code)
- Arbeiten mit VSCode
- Konsolenausgaben mit `console.log()`
**Übungen:**
- Übungen Content Factory
---
#### Tag 02
**Inhalt:**
- Dialogfenster in JS `prompt()`, `alert()`, `confirm()`
- Kommentare in JS
- Rechnen in JS
- Datentyp String, Number, Boolean
- literal und typeof
- Prioritätsreihenfolge
**Übungen:**
Übung 3 - 6
---
#### Tag 03
**Inhalt:**
- Variablen und Konstanten in JS
- Zusammengesetzte Zuweisungsoperatoren
- Increment & Decrement
- Strings verketten mit +
**Übungen:**
Übung 7 - 12
---
#### Tag 04
**Inhalt:**
- Escape-Notation
- Implizite und explizite Typkonvertierung
- NaN - Paradoxon
- Math Object
- Number.toFixed()
**Übungen:**
Übung 14 - 18
---
#### Tag 05
**Inhalt:**
- Repetition der Inhalte
- Relationale Operatoren & Vergleichoperatoren
- isNaN
- Lexikographische Vergleiche
- **Exkurs: HTML-Formularfelder**
- 1:1 Meeting
**Übungen:**
Übung Kontaktformular mit HTML und BS
---
#### Tag 06
**Inhalt:**
- **Exkurs: HTML Formularfelder mit BS**
- if else Verzweigung und ternärer Operator
- logische Operatoren UND und ODER
- unärer Operator (!)
- String Methoden Part I
**Übungen:**
Übung 19 - 26
---
#### Tag 07
**Inhalt:**
- String Methoden Part II
- Funktionen in JS
- Funktionen mit Übergabeparameter
- Funktionen mit Rückgabewerten
**Übungen:**
Übung 26 - 35
---
#### Tag 08
**Inhalt:**
- Funktionen mit Übergabeparameter
- Funktionen mit Rückgabewerten
- Guards
- Array Part 1
**Übungen:**
Übung 35 - 38
---
#### Tag 09
**Inhalt:**
- Array Methoden toSorted, toReversed, toSpliced
- toSorted, toReversed
- Array sort mit "compare function"
- Array: Higher Order Funktionen Part (sort map, forEach, reduce, some, every)
**Übungen:**
Übung 39 - 48
---
#### Tag 10
**Inhalt:**
- Array.find und Array.findIndex
- Alle Array Higher Order Funktionen im Überblick
- local scoping
- **Exkurs: Schleifen**
**Übungen:**
Übung 46 - 48
---
## JavaScript für Fortgeschrittene
---
#### Tag 11
**Inhalt:**
- Einführung in JS für Fortgeschrittene
- Objekte in JS
- Destructuring von Objekten und Arrays
**Übungen:**
Übung 01 - 03
---
#### Tag 12
**Inhalt:**
- Rekursion
- Promises
- Callback-Hell
**Übungen:**
Übung 04 - 06
---
#### Tag 13
**Inhalt:**
- Installation von node (npm)
- **Exkurs: Switch Case Abfragen**
- **Exkurs: Statische Webseite mit Sass und HTML**
- **Exkurs: Versionierung mit Github Part I**
**Übungen:**
---
#### Tag 14
**Inhalt:**
- commonjs vs esm
- async await
- Wiederholung der Inhalte
- 1:1 Meeting
**Übungen:**
Übung 05 - 10

13
01_grundlagen/faq/xyz-example.js Normal file
View File

@@ -0,0 +1,13 @@
'use strict';
let x = () => {
a = 3;
};
let y = () => (a = 5);
let z = () => {
console.log(a);
};
x();
y();
z();

34
01_grundlagen/linksammlung.md
View File

@@ -1,34 +0,0 @@
# Linksammlung
## Repo
- <https://git.gkontra.de/ptorrel/JS>
## Allgemeine Links
- [StackOverflow Survey 2023](https://survey.stackoverflow.co/2023)
- [StackOverflow Survey 2024](https://survey.stackoverflow.co/2024)
- [StackOverflow Survey 2025](https://survey.stackoverflow.co/2025)
- [State Of JS 2023](https://2023.stateofjs.com/en-US)
- [State Of JS 2024](https://2024.stateofjs.com/en-US)
- [State Of JS 2025](https://2025.stateofjs.com/en-US)
- [Bootstrap 5](https://getbootstrap.com/)
- [MDN - Mozilla Developer Network](https://developer.mozilla.org/)
- [JavaScript Historie](https://de.wikipedia.org/wiki/JavaScript)
- [Can I Use](https://caniuse.com/)
- [ASCII Table](https://asciitable.xyz/)
- [HTML Entities Liste (W3c)](https://dev.w3.org/html5/html-author/charref)
- [HTML Entities & Tastaturkürzel](https://www.key-shortcut.com/html-entities/alle-entitaeten)
- [What the f\*ck JS?](https://github.com/denysdovhan/wtfjs)
- [CSS BEM (Block-Element-Modifier)](https://getbem.com/introduction/)
## Tools/ Software
- [Microsoft Powertoys](https://learn.microsoft.com/de-de/windows/powertoys/)
## CSS/SCSS Tuts
- [CSS Reference](https://cssreference.io/)
- [CSS Tricks - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [CSS Flexboxfroggy](https://flexboxfroggy.com/#de)
- [CSS Gridgarden](https://cssgridgarden.com/#de)

20
01_grundlagen/uebungen/#o01_palindrom.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -40,6 +40,24 @@
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const isPalindrom = (toCheckString) => {
const reverseString = toCheckString
.replace(/[$%!.,]/g, '')
.split('')
.reverse()
.join('');
return toCheckString.trim().toLowerCase() === reverseString.trim().toLowerCase() ? true : false;
};
const toTest = ` Lagerregal`;
const result = isPalindrom(toTest);
console.log(toTest, result);
outputEl.textContent = `${toTest} ist ${result ? 'ein' : 'KEIN'} Palindrom`;
</script>
</body>
</html>

47
01_grundlagen/uebungen/#u46_richtige-gewinner.html
View File

@@ -1,47 +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 46: Richtige Gewinner</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-primary">
<h1>Übung 46: Richtige Gewinner</h1>
<p>
Die Ausgabe der Gewinner aus dem letzten Beispiel (Codebeispiel 324) ist immer noch nicht ideal. Am Besten
wäre das folgende Ergebnis-Array:
</p>
<pre>
<code>
[
'1st place: Heribert',
'2nd place: Friedlinde',
'3rd place: Tusnelda',
'Oswine',
'Ladislaus',
]
</code>
</pre>
</div>
<div class="output alert alert-secondary"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const winners = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
// Beispiel
const getWinners = (winners) => {};
console.log(getWinners(winners));
outputEl.innerHTML = `<ul><li>${getWinners(winners).join('</li><li>')}</li></ul>`;
</script>
</body>
</html>

79
01_grundlagen/uebungen/#u47_higher-order-fn-lueckentext.html
View File

@@ -1,79 +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 47: Lückentext zu Higher-Order-Funktionen</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>Übung 47: Lückentext zu Higher-Order-Funktionen</h1>
<p>
Das ist garantiert der letzte Lückentext für diese Lektion. Ersetzen Sie wieder die Kommentare
<strong>/* ??? */</strong> durch den richtigen Code, um das angegebene Ergebnis zu erzielen.
</p>
</div>
</main>
<script>
'use strict';
let result;
let results;
let inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let text = 'Hi this is a short text';
let names = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
//odd numbers
//results = inputs
console.log(results); // => [ 1, 3, 5, 7, 9 ]
//sum
//result = inputs
console.log(result); // => 55
//product
//result = inputs
console.log(result); // => 3628800
//longest word length
result = text.split(' '); //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
//
console.log(result); // => 5
//longest word
result = text.split(' '); //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
//
console.log(result); // =>'short'
//avg word length =========================
// result =
console.log(result); // => 3
//sort by 3rd letter
// ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names2 = [...names];
// results =
console.log(results); // => [ 'Ladislaus', 'Friedlinde', 'Heribert', 'Tusnelda', 'Oswine' ]
// Are there names with more than 8 letters?
// ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
// result = names
// Has every name at least 8 letters?
// result = names
console.log(result); // false
// What is the lowest value from the inputs?
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// result = inputs
console.log(result);
</script>
</body>
</html>

100
01_grundlagen/uebungen/u46_richtige-gewinner.html Normal file
View File

@@ -0,0 +1,100 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 46: Richtige Gewinner</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-primary">
<h1>Übung 46: Richtige Gewinner</h1>
<p>
Die Ausgabe der Gewinner aus dem letzten Beispiel (Codebeispiel 324) ist immer noch nicht ideal. Am Besten
wäre das folgende Ergebnis-Array:
</p>
<pre>
<code>
[
'1st place: Heribert',
'2nd place: Friedlinde',
'3rd place: Tusnelda',
'Oswine',
'Ladislaus',
]
</code>
</pre>
</div>
<div class="output alert alert-secondary"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const winners = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
// const PlaceWinner = () => {
// console.log(winners());
// };
// Beispiel
const getWinners = (winners) => {
const results = [];
const restAr = [];
for (let i = 0; i < winners.length; i++) {
if (i === 0) {
results.push(`1st Place: ${winners[i]}`);
} else if (i === 1) {
results.push(`2nd Place: ${winners[i]}`);
} else if (i === 2) {
results.push(`3rd Place: ${winners[i]}`);
} else {
restAr.push(winners[i]);
}
}
//return [results, restAr];
return results.concat(rest);
};
// Beispiel
const getWinners2 = (names = []) => {
const results = names.map((name, idx) => {
if (idx === 0) {
return `1st place: ${name}`;
}
if (idx === 1) {
return `2nd place: ${name}`;
}
if (idx === 2) {
return `3rd place: ${name}`;
}
return name;
});
return results;
};
const labels = ['1st', '2nd', '3rd'];
// Beispiel
const getWinners3 = (names = []) => {
const results = names.map((name, idx) => {
// if (idx < 3) {
// return `${labels[idx]} place: ${name}`;
// } else {
// return name;
// }
return idx < labels.length ? `${labels[idx]} place: ${name}` : name;
});
return results;
};
console.log(getWinners3(winners));
outputEl.innerHTML = `<ul><li>${getWinners3(winners).join('</li><li>')}</li></ul>`;
</script>
</body>
</html>

173
01_grundlagen/uebungen/u47_higher-order-fn-lueckentext.html Normal file
View File

@@ -0,0 +1,173 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 47: Lückentext zu Higher-Order-Funktionen</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>Übung 47: Lückentext zu Higher-Order-Funktionen</h1>
<p>
Das ist garantiert der letzte Lückentext für diese Lektion. Ersetzen Sie wieder die Kommentare
<strong>/* ??? */</strong> durch den richtigen Code, um das angegebene Ergebnis zu erzielen.
</p>
</div>
</main>
<script>
'use strict';
let result;
let results;
let inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let text = 'Hi this is a short text';
let names = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
//odd numbers
//results = inputs
//let inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
results = inputs.filter((n) => n % 2 !== 0);
const ungeradeZahlen = [];
for (let i = 0; i < inputs.length; i++) {
if (inputs[i] % 2 !== 0) {
ungeradeZahlen.push(inputs[i]);
}
}
console.log(ungeradeZahlen); // => [ 1, 3, 5, 7, 9 ]
console.log(results); // => [ 1, 3, 5, 7, 9 ]
// ==================================================================
// sum
inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// a und b wrd addiert (1+2 = 3) speichert in a und ( a + b ( 3 +3 = 6))
const sum = inputs.reduce((a, b) => a + b, 0);
console.log('sum: ', sum); // => 55
// ======================================================================
//product
//result = inputs
const gesamtsumme = inputs.reduce((a, b) => a * b, 1);
console.log(gesamtsumme); // => 3628800
// ========================================================================
//longest word length
// let text = 'Hi this is a short text';
const longestWordLength = text.split(' ').reduce((a, b) => {
if (a.length > b.length) {
return a;
} else {
return b;
}
}).length;
console.log(longestWordLength); //=> 5
// longest word length
results = text.split(' '); //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
const getWordLength = (word) => {
return word.length;
};
const wordLength = results.map(getWordLength); // => [2,4,2,1,5,4]
result = wordLength.sort((n1, n2) => {
return n2 - n1;
});
result = result[0];
console.log(result); // => 5
result = text
.split(' ') //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
.map((a) => a.length) // => [2,4,2,1,5,4]
.reduce((a, b) => Math.max(a, b)); // => 5
// .reduce((a, b) => (a < b ? b : a)); // => 5
console.log('Max word length: ', result);
//longest word length
result = text.split(' ').sort((a, b) => b.length - a.length)[0].length;
//=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
console.log(`Länge des längsten Wortes: ${result}`); // => 5
// ======================================================
//longest word
//result = text.split(' '); //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
const longestword = text.split(' ').reduce((a, b) => {
if (a.length > b.length) return a;
else return b;
});
result = text.split(' ').sort((a, b) => b.length - a.length)[0];
console.log('longestword: ', result); // =>'short'
console.log(longestword); // =>'short'
// =========================================================
//avg word length =========================// => 3
const avgword = text.split(' ');
const AnzahlSum = avgword.length; // 6
const AvgSum = AnzahlSum / 2;
console.log(AvgSum); // 3
result =
text
.split(' ') //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
.map((a) => a.length) // => [2,4,2,1,5,4]
.reduce((a, b) => a + b, 0) / text.split(' ').length;
console.log(`Avg word length: ${result}`); // => 3
result =
text
.split(' ')
.map((text) => text.length)
.reduce((n1, n2) => n1 + n2, 0) / text.split(' ').length;
console.log(`Durchschnittliche Wortlänge: ${result}`); // => 3
result = text.replaceAll(' ', '').length / text.split(' ').length;
console.log(`Durchschnittliche Wortlänge: ${result}`); // => 3
// ============================================================
//sort by 3rd letter
// ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names2 = [...names];
const sortedByThirdLetterAr = names2.sort((a, b) => a.charAt(2).localeCompare(b.charAt(2)));
results = [...names].sort((a, b) => (a.charAt(2) < b.charAt(2) ? -1 : 1));
console.log(`sort by 3rd letter: ${results}`); // => [ 'Ladislaus', 'Friedlinde', 'Heribert', 'Tusnelda', 'Oswine' ]
console.log(sortedByThirdLetterAr); // => [ 'Ladislaus', 'Friedlinde', 'Heribert', 'Tusnelda', 'Oswine' ]
// ========================================================================
// Are there names with more than 8 letters?
// ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names3 = [...names];
const moreThenEightLetters = names3.filter((name) => name.length > 8);
result = names.some((name) => name.length > 8);
console.log(moreThenEightLetters.length > 0); // => true
console.log(result); // => true
//===================================================================
// Has every name at least 8 letters?
result = [...names].every((name) => name.length <= 8);
console.log('Has every name at least 8 letters?: ', result);
//====================================================
// What is the lowest value from the inputs?
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// result = inputs
result = Math.min(...inputs);
console.log(result);
</script>
</body>
</html>

20
01_grundlagen/uebungen/#u48_froehliches-mixen.html → 01_grundlagen/uebungen/u48_froehliches-mixen.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -28,7 +28,13 @@
<script>
'use strict';
const honoluluFlip = ['Maracuja Juice', 'Pineapple Juice', 'Lemon Juice', 'Grapefruit Juice', 'Crushed Ice'];
const honoluluFlip = [
'Maracuja Juice', //
'Pineapple Juice',
'Lemon Juice',
'Grapefruit Juice',
'Crushed Ice',
];
const ingredientsFromMyBar = [
'Pineapple',
@@ -49,14 +55,16 @@
// 1. Schreibe eine Funktion, `hasIngredient`, die `true` zurückgibt, wenn eine angegebene Zutat in einer Rezeptliste vorhanden ist. Rufe deine Funktion mit Maracujsasaft und Honolulu Flip auf.
const hasIngredient = (listOfIngredients, searchedIngredient) => {
/* ??? */
const hasIngredient = (cocktailAr = [], searchStr) => {
return cocktailAr.includes(searchStr);
};
//alert(hasIngredient(honoluluFlip, 'Maracuja Juice'));
// 2. So richtig sinnvoll ist unsere Funktion noch nicht. Viel hilfreicher wäre es, wenn wir eine Funktion hätten, die anhand unserer vorhandenen Zutaten herausfindet, ob wir den Cocktail auch tatsächlich machen können. Dafür benötigst du die komplette Liste aller bei dir vorhandenen Zutaten (ingredientsFromMyBar). Du möchtest wissen, ob du alle Zutaten vorrätig hast, die du zum Mixen des Cocktails benötigst.
const isMixableWith = (cocktailRecipe, availableIngredients) => {
/* ??? */
const isMixableWith = (cocktailAr, allAr = []) => {
return cocktailAr.every((str) => hasIngredient(allAr, str));
};
//honoluluFlip isMixableWith ingredientsFromMyBar?

4
01_grundlagen/unterricht/tag10/08_prefer-const.html
View File

@@ -19,6 +19,10 @@
const transform = (fullName) => {
const nameParts = fullName.split(' '); // => ['Ladislaus', 'Coolio', 'Barry', 'Crazy', 'Jones'];
const lastName = nameParts.slice(nameParts.length - 1); // => 'Jones'
// nameParts = nameParts.slice(0, nameParts.length - 1); // => ['Ladislaus', 'Coolio', 'Barry', 'Crazy']
// Wenn Variable mit "let" deklarariert wäre, könnten wir die Variable neu befüllen. Bezeichner wäre aber dann nicht mehr sinnvoll.
const firstNames = nameParts.slice(0, nameParts.length - 1); // => ['Ladislaus', 'Coolio', 'Barry', 'Crazy']
return firstNames.map((firstName) => firstName.charAt(0) + '.').join(' ') + ' ' + lastName;