This commit is contained in:
Philippe Torrel
@@ -36,6 +36,14 @@
|
||||
|
||||
- [Microsoft PowerToys](https://learn.microsoft.com/de-de/windows/powertoys/)
|
||||
|
||||
## Passwordmanager
|
||||
|
||||
- [Enpass](https://www.enpass.io/pricing/)
|
||||
- [1password](https://1password.com/de/pricing/password-manager)
|
||||
- [KeepassXC](https://keepassxc.org/)
|
||||
- [Safe in cloud](https://safe-in-cloud.com/)
|
||||
- [BitWarden](https://bitwarden.com/de-de/)
|
||||
<!-- - [Dashlane](https://www.dashlane.com/) -->
|
||||
|
||||
## Fonts
|
||||
|
||||
|
||||
@@ -28,10 +28,12 @@
|
||||
'use strict';
|
||||
|
||||
const productList =
|
||||
'3Doodler 3D Printing Pen, Game of Thrones Wax Seal Coasters, 10th Doctor Sonic Screwdriver Exclusive Programmable TV Remote, Electronic Butterfly in a Jar, Aquafarm: Aquaponics Fish Garden, Cassette Adapter Bluetooth, Marvel Comics Lightweight Infinity Scarf, Ollie - The App Controlled Robot, Sound Splash Bluetooth Waterproof Shower Speaker, PowerCube, Backpack of Holding, Retro Duo Portable NES/SNES Game System, Universal Gadget Wrist Charger, USB Squirming Tentacle, USB Fishquarium, Space Bar Keyboard Organizer & USB Hub Pop, USB Pet Rock, Powerstation 5- E. Maximus Chargus, Dual Heated Travel Mug, Crosley Collegiate Portable USB Turntable, Meh Hoodie, Magnetic Accelerator Cannon, 8-Bit Heat-Change Mug';
|
||||
|
||||
const handleCsv = (list) => list.split(', ').sort();
|
||||
'3Doodler 3D Printing Pen, Game of Thrones Wax Seal Coasters , 10th Doctor Sonic Screwdriver Exclusive Programmable TV Remote, Electronic Butterfly in a Jar , Aquafarm: Aquaponics Fish Garden, Cassette Adapter Bluetooth, Marvel Comics Lightweight Infinity Scarf, Ollie - The App Controlled Robot, Sound Splash Bluetooth Waterproof Shower Speaker, PowerCube, Backpack of Holding, Retro Duo Portable NES/SNES Game System, Universal Gadget Wrist Charger, USB Squirming Tentacle, USB Fishquarium, Space Bar Keyboard Organizer & USB Hub Pop, USB Pet Rock, Powerstation 5- E. Maximus Chargus, Dual Heated Travel Mug, Crosley Collegiate Portable USB Turntable, Meh Hoodie, Magnetic Accelerator Cannon, 8-Bit Heat-Change Mug';
|
||||
|
||||
const handleCsv = (list) => {
|
||||
const games = list.split(/\s*,\s*/); // list.split(', ');
|
||||
return games.sort();
|
||||
};
|
||||
console.log(handleCsv(productList).join('\n'));
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>String.split()</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>String - str.split()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/split">
|
||||
str.split()
|
||||
</a>
|
||||
- Die <strong>split()</strong> Methode teilt ein String Objekt in ein Array von Strings auf, indem der String
|
||||
in Teilstrings zerteilt wird, wobei ein angegebenes Trennzeichen verwendet wird, um zu bestimmen, wo die
|
||||
Aufteilung erfolgen soll.
|
||||
</p>
|
||||
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const customersOnline = ['Heribert', 'Max', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus', 'Max'];
|
||||
|
||||
const names = [
|
||||
'Florian', //
|
||||
'Benjamin',
|
||||
'Christian',
|
||||
'Stefan',
|
||||
];
|
||||
|
||||
const text = 'Ich bin ein Text.';
|
||||
|
||||
// String Methode - str.split('delimiter')
|
||||
|
||||
const words = text.split(' ');
|
||||
console.log(words); // => ['Ich', 'bin', 'ein', 'Text.']
|
||||
|
||||
console.log(names[0].split('')); // => ['F','l','o','r','i','a','n']
|
||||
|
||||
console.log(
|
||||
names[0]
|
||||
.split('') // => ['F','l','o','r','i','a','n']
|
||||
.reverse() // => ['n', 'a', 'i', 'r', 'o', 'l', 'F']
|
||||
.join('') + names[0].length,
|
||||
); // => nairolF7
|
||||
|
||||
console.log(names[1].split('').reverse().join('') + names[1].length); // => nimajneB8
|
||||
console.log(names[2].split('').reverse().join('') + names[2].length); // => naitsirhC9
|
||||
console.log(names[3].split('').reverse().join('') + names[3].length); // => nafetS6
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array.reverse()</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>Array.reverse()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse">
|
||||
ar.reverse()
|
||||
</a>
|
||||
- Die Methode von Array Instanzen kehrt ein Array <code>in place</code> um und gibt die Referenz auf dasselbe
|
||||
Array zurück, wobei das erste Array-Element nun zum letzten und das letzte Array-Element zum ersten wird. Mit
|
||||
anderen Worten, die Reihenfolge der Elemente im Array wird in die entgegengesetzte Richtung gedreht.
|
||||
</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const customersOnline = ['Heribert', 'Max', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus', 'Max'];
|
||||
|
||||
const names = [
|
||||
'Florian', //
|
||||
'Benjamin',
|
||||
'Christian',
|
||||
'Stefan',
|
||||
];
|
||||
|
||||
const text = 'Ich bin ein Text.';
|
||||
|
||||
// Array Methode - ar.reverse()
|
||||
|
||||
const namesCopy = [...names];
|
||||
|
||||
const reversedNames = namesCopy.reverse();
|
||||
|
||||
console.log(reversedNames); // => ['Stefan', 'Christian', 'Benjamin', 'Florian']
|
||||
console.log(namesCopy); // => ['Stefan', 'Christian', 'Benjamin', 'Florian']
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - Neue Methoden seit Juni 2023</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>Array - Neue Methoden seit Juni 2023</h1>
|
||||
<hr />
|
||||
<h2>Array - ar.toSorted()</h2>
|
||||
<p>
|
||||
Die
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted">
|
||||
toSorted()
|
||||
</a>
|
||||
Methode von Array Instanzen ist die kopierende Version der <code>sort()</code> Methode. Sie gibt ein neues
|
||||
Array mit den Elementen in aufsteigender Reihenfolge zurück.
|
||||
</p>
|
||||
<hr />
|
||||
<h2>Array - ar.toReversed()</h2>
|
||||
<p>
|
||||
Die
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed">
|
||||
toReversed()
|
||||
</a>
|
||||
Methode von Array Instanzen ist das kopierende Gegenstück der <code>reverse()</code> Methode. Sie gibt ein
|
||||
neues Array mit den Elementen in umgekehrter Reihenfolge zurück.
|
||||
</p>
|
||||
<h2>Array - ar.toSpliced()</h2>
|
||||
<p>
|
||||
Die
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced">
|
||||
toSpliced()
|
||||
</a>
|
||||
Methode von Array-Instanzen ist die kopierende Version der <code>splice()</code>-Methode. Sie gibt ein neues
|
||||
Array zurück, bei dem einige Elemente entfernt und/oder an einem bestimmten Index ersetzt wurden.
|
||||
</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const customersOnline = ['Heribert', 'Max', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus', 'Max'];
|
||||
|
||||
const names = [
|
||||
'Florian', //
|
||||
'Benjamin',
|
||||
'Christian',
|
||||
'Stefan',
|
||||
];
|
||||
|
||||
const text = 'Ich bin ein Text.';
|
||||
|
||||
// Array Methode - ar.toSorted()
|
||||
|
||||
console.log(names.toSorted()); // => ['Benjamin', 'Christian', 'Florian', 'Stefan']
|
||||
console.log([...names].sort()); // => ['Benjamin', 'Christian', 'Florian', 'Stefan']
|
||||
|
||||
console.log(names); // => SIDE EFFFECT FREE - angesprochenes Array bleibt unverändert.
|
||||
|
||||
// Array Methode - ar.toReversed()
|
||||
|
||||
console.log(names.toReversed()); // => ['Stefan', 'Christian', 'Benjamin', 'Florian']
|
||||
console.log([...names].reverse());
|
||||
|
||||
console.log(names); // => SIDE EFFFECT FREE - angesprochenes Array bleibt unverändert.
|
||||
|
||||
// Array Methode - ar.toSpliced()
|
||||
|
||||
// [
|
||||
// 'Florian', //
|
||||
// 'Benjamin',
|
||||
// 'Christian',
|
||||
// 'Stefan',
|
||||
// ];
|
||||
|
||||
console.log(names.toSpliced(2, 1, 'Trick')); // Das Array mit seiner Veränderung wird zurückgegeben
|
||||
// => ['Florian', 'Benjamin', 'Trick', 'Stefan']
|
||||
|
||||
const copyNames = [...names];
|
||||
copyNames.splice(2, 1, 'Trick');
|
||||
console.log(copyNames); // => ['Florian', 'Benjamin', 'Trick', 'Stefan']
|
||||
|
||||
console.log(names); // => SIDE EFFFECT FREE - angesprochenes Array bleibt unverändert.
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.sort(compareFn)</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>Array - ar.sort(compareFn)</h1>
|
||||
<hr />
|
||||
<img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Bubble-sort-example-300px.gif"
|
||||
alt="Bubble sort"
|
||||
class="img-thumbnail" />
|
||||
<hr />
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">
|
||||
ar.sort(compareFn)
|
||||
</a>
|
||||
- Die <strong>sort()</strong> Methode sortiert die Elemente eines Arrays <code>in-place</code> und gibt das
|
||||
Array zurück. Standardmäßig werden alle Elemente in Strings umgewandelt und dann anhand ihrer UTF-16
|
||||
Codepoints miteinander verglichen.
|
||||
</p>
|
||||
<div class="alert alert-warning">
|
||||
Das angesprochene Array wird durch <code>in-place-mutation</code> ebenfalls sortiert.
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<h3>Rückgabewerte der Vergleichfunktion:</h3>
|
||||
<ul class="list">
|
||||
<li>Rückgabewert 0: Positionen bleiben stehen</li>
|
||||
<li>Rückgabewert < 0: Positionen bleiben stehen</li>
|
||||
<li>Rückgabewert > 0: Positionen vertauscht</li>
|
||||
</ul>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const lottoNumbers = [16, 10, 2, 12, 1, 33];
|
||||
|
||||
// Array Methode - ar.sort(compareFn)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,91 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.sort(compareFn)</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>Array - ar.sort(compareFn)</h1>
|
||||
<hr />
|
||||
<img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Bubble-sort-example-300px.gif"
|
||||
alt="Bubble sort"
|
||||
class="img-thumbnail" />
|
||||
<hr />
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">
|
||||
ar.sort(compareFn)
|
||||
</a>
|
||||
- Die <strong>sort()</strong> Methode sortiert die Elemente eines Arrays <code>in-place</code> und gibt das
|
||||
Array zurück. Standardmäßig werden alle Elemente in Strings umgewandelt und dann anhand ihrer UTF-16
|
||||
Codepoints miteinander verglichen.
|
||||
</p>
|
||||
<div class="alert alert-warning">
|
||||
Das angesprochene Array wird durch <code>in-place-mutation</code> ebenfalls sortiert.
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<h3>Rückgabewerte der Vergleichfunktion:</h3>
|
||||
<ul class="list">
|
||||
<li>Rückgabewert 0: Positionen bleiben stehen</li>
|
||||
<li>Rückgabewert < 0: Positionen bleiben stehen</li>
|
||||
<li>Rückgabewert > 0: Positionen vertauscht</li>
|
||||
</ul>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const customersOnline = ['Heribert', 'Max', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus', 'Max'];
|
||||
|
||||
const names = [
|
||||
'Florian (Admin)', //
|
||||
'Benjamin',
|
||||
'Christian (Admin)',
|
||||
'Stefan (Admin)',
|
||||
'Philippe',
|
||||
'Kaumon',
|
||||
];
|
||||
|
||||
const lottoNumbers = [16, 10, 2, 12, 1, 33];
|
||||
|
||||
// Array Methode - ar.sort(compareFn)
|
||||
|
||||
const isAdmin = (name) => name.trim().endsWith('(Admin)');
|
||||
|
||||
console.log(isAdmin(names[0])); //=> true
|
||||
console.log(isAdmin(names[1])); //=> false
|
||||
|
||||
// SESE - Single Entrance Single Exit Principle
|
||||
const sortedNames = [...names].sort((a, b) => {
|
||||
let sortValue = 0;
|
||||
|
||||
// Wenn beide Admins sind, sortieren
|
||||
if (isAdmin(a) && isAdmin(b)) sortValue = a > b ? 1 : -1;
|
||||
|
||||
// Wenn kleinerer Index bereits Admin, Position bleibt bestehen
|
||||
if (isAdmin(a) && sortValue === 0) sortValue = -1;
|
||||
|
||||
// Wenn größerer Index bereits Admin, Position wird vertauscht (rückt vor)
|
||||
if (isAdmin(b) && sortValue === 0) sortValue = 1;
|
||||
|
||||
// Wenn beide keine Admins, dann lexikographische Sortierung
|
||||
if (sortValue === 0) {
|
||||
sortValue = a > b ? 1 : -1;
|
||||
}
|
||||
|
||||
return sortValue;
|
||||
});
|
||||
console.log(sortedNames);
|
||||
|
||||
outputEl.innerHTML = `<ul><li>${sortedNames.join('</li><li>')}</li></ul>`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.map()</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>Array - ar.map()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map">ar.map()</a>
|
||||
- Die <strong>map()</strong> (engl. abbilden) Methode wendet auf jedes Element des Arrays die bereitgestellte
|
||||
Funktion an und gibt das Ergebnis in einem neuen Array zurück. (<code>side-effect-free</code>)
|
||||
</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Florian', //
|
||||
'Benjamin',
|
||||
'Christian',
|
||||
'Stefan',
|
||||
'Philippe',
|
||||
'Kaumon',
|
||||
];
|
||||
|
||||
// Array Methode - ar.map((currentValue [, index] [, array]) => {...})
|
||||
|
||||
const namesFirstLetter = names.map((name) => {
|
||||
return `${name.charAt(0).toUpperCase()}.`;
|
||||
});
|
||||
|
||||
console.log(namesFirstLetter); // => ['F.', 'B.', 'C.', 'S.', 'P.', 'K.']
|
||||
|
||||
console.log([1, 2, 3, 4].map((n) => n * n)); // => [1, 4, 9, 16]
|
||||
|
||||
console.log(
|
||||
[1, 2, 3, 4].map((n) => {
|
||||
n * n;
|
||||
}),
|
||||
); // => [undefined, undefined,undefined,undefined]
|
||||
|
||||
console.log([1, 2, 3, 4].map(() => 2)); // => [2, 2, 2, 2]
|
||||
|
||||
// ===============================
|
||||
const createPassword = (str = '') => {
|
||||
return `${str.split('').reverse().join('')}${str.length}`;
|
||||
};
|
||||
|
||||
console.log(createPassword('Florian')); // => nairolF7
|
||||
console.log(createPassword('Benjamin')); // => nimajneB8
|
||||
|
||||
const passwords = names.map((name) => {
|
||||
return createPassword(name);
|
||||
});
|
||||
|
||||
const passwords2 = names.map(createPassword); // Funktionsreferenz
|
||||
|
||||
console.log(passwords); // => ['nairolF7', 'nimajneB8', 'naitsirhC9', 'nafetS6', 'eppilihP8', 'nomuaK6']
|
||||
console.log(passwords2); // => ['nairolF7', 'nimajneB8', 'naitsirhC9', 'nafetS6', 'eppilihP8', 'nomuaK6']
|
||||
|
||||
outputEl.textContent = passwords.join(' - ');
|
||||
|
||||
// Optionale Parameter von Map ========================
|
||||
|
||||
// Array Methode - ar.map((currentValue [, index [, array] ]) => {})
|
||||
console.log(
|
||||
names
|
||||
.map((name, idx, ar) => {
|
||||
return `Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`;
|
||||
})
|
||||
.join('\n'),
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user