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-24 15:06:38 +02:00
parent 3da605979d
commit 3d73f1617b
33 changed files with 1359 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
01_grundlagen/unterricht/tag06/11_str-substring.html
View File

@@ -53,6 +53,12 @@
console.log('lorem ipsum'.substring(999)); // => ''
console.log('lorem ipsum'.substring(-999)); // => 'lorem ipsum'
console.log('lorem ipsum'.substring(999, -999)); // => 'lorem ipsum'
console.log('Philippe'.substring(0, 4)); //=> 'Phil'
console.log('Philippe'.substr(0, 4)); // => 'Phil'
console.log('Philippe'.substring(4, 2)); //=> 'il'
console.log('Philippe'.substr(4, 2)); //=> 'ip'
</script>
</body>
</html>

2
01_grundlagen/unterricht/tag07/04_str-replace-replace-all.html
View File

@@ -44,6 +44,8 @@
// String Methode - str.replace('searchValue', 'replaceValue')
const regex = new RegExp(newProductName);
console.log('I love JS. JS is the best language'.replace('JS', 'TS'));
// => 'I love TS. JS is the best language'

10
01_grundlagen/unterricht/tag07/07_str-pad-start-pad-end.html
View File

@@ -42,11 +42,21 @@
console.log(String(12345).padStart(10, '0')); //=> '0000012345'
console.log((12345).toString().padStart(10, '0')); //=> '0000012345'
const creditNumber = '1234 5678 4332 12';
console.log('1234 5678 4332 12'.replaceAll(' ', '').substr(-4).padStart(14, '#')); // => '##########3212'
console.log(
creditNumber
.replaceAll(' ', '') // => '12345678433212'
.substring(creditNumber.length - 4) // => substring(10) -> '3212'
.padStart(14, '#'),
); // => '##########3212'
// String Methode - str.padEnd(targetLength[, fillValue])
console.log('lorem'.padEnd(10)); //=> 'lorem ';
console.log('12345'.padEnd(10, '0')); //=> '1234500000'
console.log('1234'.padEnd(1)); //=> '1234'
</script>
</body>
</html>

32
01_grundlagen/unterricht/tag08/01_volume-tube.html Normal file
View File

@@ -0,0 +1,32 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zylindervolumen berechnen (tube)</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>Zylindervolumen berechnen (tube)</h1>
</div>
</main>
<script>
'use strict';
const BASE_COST_PER_UNIT = 0.7;
const COST_PER_CC = 0.001;
const height = 80;
const diameter = 10;
// cylindricalVolume = π × radius² × height
const mailingTubeVolume = Math.PI * Math.pow(diameter / 2, 2) * height;
// shippingCost = volume × costPerCC + costPerUnit
const shippingCost = mailingTubeVolume * COST_PER_CC + BASE_COST_PER_UNIT;
console.log(shippingCost); // => 6.983185307179587
</script>
</body>
</html>

58
01_grundlagen/unterricht/tag08/02_function-volume-tube.html Normal file
View File

@@ -0,0 +1,58 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zylindervolumen berechnen (tube) mit Funktion</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>Zylindervolumen berechnen (tube) mit Funktion</h1>
</div>
</main>
<script>
'use strict';
const BASE_COST_PER_UNIT = 0.7;
const COST_PER_CC = 0.001;
const height = 80;
const diameter = 10;
/**
* Funktion zum Berechnen vom Zylindervolumen
*/
const calcTubeVolume = (diameter, height) => {
const radius = diameter / 2;
// cylindricalVolume = π × radius² × height
const volume = Math.PI * Math.pow(radius, 2) * height;
return volume;
};
/**
* Funktion zum Berechnen vom Zylindervolumen (Kurzschreibweise)
*/
const calcTubeVolumeShort = (diameter, height) => Math.PI * Math.pow(diameter / 2, 2) * height;
/**
* Funktion zum Berechnen der Versandkosten
*/
const calcShippingCost = (volume) => {
// shippingCost = volume × costPerCC + costPerUnit
const cost = volume * COST_PER_CC + BASE_COST_PER_UNIT;
return cost;
};
/**
* Funktion zum Berechnen der Versandkosten (Kurzschreibweise)
*/
const calcShippingCostShort = (volume) => volume * COST_PER_CC + BASE_COST_PER_UNIT;
console.log(calcShippingCost(calcTubeVolume(diameter, height))); // => 6.983185307179587
console.log(calcShippingCost(calcTubeVolume(8, 120))); // => 6.731857894892403
</script>
</body>
</html>

78
01_grundlagen/unterricht/tag08/03_guard-function-volume-tube.html Normal file
View File

@@ -0,0 +1,78 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zylindervolumen berechnen (tube) mit Funktion und Guard</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>Zylindervolumen berechnen (tube) mit Funktion und Guard</h1>
</div>
</main>
<script>
'use strict';
const BASE_COST_PER_UNIT = 0.7;
const COST_PER_CC = 0.001;
const height = 80;
const diameter = 10;
/**
* Funktion zum Berechnen vom Zylindervolumen mit Guard
*/
const calcTubeVolume = (diameter = 10, height = 80) => {
// Guard
if (isNaN(diameter) || isNaN(height) || diameter < 0 || height < 0) return NaN;
const radius = diameter / 2;
// cylindricalVolume = π × radius² × height
const volume = Math.PI * Math.pow(radius, 2) * height;
return volume;
};
/**
* Funktion zum Berechnen vom Zylindervolumen (Kurzschreibweise) mit Guard
*/
const calcTubeVolumeShort = (diameter, height) =>
isNaN(diameter) || isNaN(height) || diameter < 0 || height < 0
? NaN
: Math.PI * Math.pow(diameter / 2, 2) * height;
/**
* Funktion zum Berechnen der Versandkosten
*/
const calcShippingCost = (volume) => {
// Guard
if (isNaN(volume)) {
console.error('wrong data type');
return NaN;
}
// shippingCost = volume × costPerCC + costPerUnit
const cost = volume * COST_PER_CC + BASE_COST_PER_UNIT;
return cost;
};
/**
* Funktion zum Berechnen der Versandkosten (Kurzschreibweise)
*/
const calcShippingCostShort = (volume) => volume * COST_PER_CC + BASE_COST_PER_UNIT;
console.log(calcShippingCost(calcTubeVolume(diameter, height))); // => 6.983185307179587
console.log(calcShippingCost(calcTubeVolume(8, 120))); // => 6.731857894892403
console.log(calcShippingCost('ja')); //=> NaN
console.log(calcShippingCost(10)); //=> 0.71
console.log(calcTubeVolume(10, 80)); //=> 6283.185307179587
console.log(calcTubeVolume(10)); //=> 6283.185307179587
console.log(calcTubeVolume()); //=> 6283.185307179587
console.log(calcTubeVolume(5)); //=> 1570.7963267948967
console.log(calcTubeVolume(5, 2)); //=> 39.269908169872416
</script>
</body>
</html>

58
01_grundlagen/unterricht/tag08/04_rest-default-parameter.html Normal file
View File

@@ -0,0 +1,58 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rest- und Defaultparameter</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>Rest- und Defaultparameter</h1>
</div>
</main>
<script>
'use strict';
// Defaultparameter
const add = (n1 = 0, n2 = 0) => {
return Number(n1) + Number(n2);
};
console.log(add(1, 2)); //=> 3
console.log(add(5, '12')); //=> 17
console.log(add(1)); //=> 1
console.log(add()); //=> 0
// Restparameter (...)
const sum = (...numbers) => {
console.log(numbers); // Argumentenliste wird als Array Menge aufgefangen
return numbers.reduce((a, b) => Number(a) + Number(b), 0);
};
console.log(sum(1, 2, 10, 23, 105)); // => 141
// Restparameter (...names)
const greetWith = (greeting, ...names) => {
console.log(names); // =>  ['Adel', 'Ersin', 'Andreas', 'Kahleel']
names.forEach((name) => {
console.log(`${greeting}, ${name}!`);
});
// return `${greeting}, ${names}!`;
};
console.log(greetWith('Hey', 'Goldy'));
console.log(greetWith('Hi', 'Adel', 'Ersin', 'Andreas', 'Kahleel'));
// reduce kurz erklärt
console.log(
[1, 2, 3, 4].reduce((sum, n) => {
return Number(sum) + Number(n);
}, 0),
); //=> 10
</script>
</body>
</html>

79
01_grundlagen/unterricht/tag08/05_array-object.html Normal file
View File

@@ -0,0 +1,79 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array Object</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 - Object</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array">Array Object</a>
- Das JavaScript-Array ist ein globales Objekt und Konstruktor für das Erstellen von Arrays, welche
listenähnliche Objekte sind.
</p>
</div>
</main>
<script>
'use strict';
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
];
// names = 'Wert'; // Uncaught TypeError: Assignment to constant variable.
const mixedArray = [
'Max', //
33,
true,
['Tennis', 'Netflix'],
'Jane',
24,
false,
['Zeichnen', 'Boxen'],
];
// Indexoperator []
console.log(mixedArray[0]); // => 'Max'
console.log(mixedArray[1]); // => 33
console.log(mixedArray[3]); // => ['Tennis', 'Netflix']
console.log(['Tennis', 'Netflix'][1]); // => 'Netflix'
console.log(mixedArray[3][1]); // => 'Netflix'
const trainerArray = []; // leeres Array
trainerArray[0] = 'Elmar';
trainerArray[1] = 'Oliver';
trainerArray[2] = 'Sonja';
trainerArray[3] = 'Kaumon';
trainerArray[7] = 'Philippe';
console.log(trainerArray); // => ['Elmar', 'Oliver', 'Sonja', 'Kaumon', empty × 3, 'Philippe']
// Sonderfall: Array über Konstruktor-Objekt erstellen
const lottoNumbers = new Array(6); //=> [empty,empty,empty,empty,empty,empty ]
lottoNumbers.fill(); //=> [0,0,0,0,0,0]
// Array -- Eigenschaft ar.length
console.log(lottoNumbers.length); //=> 6
console.log(names.length); //=> 4
console.log(typeof names); //=> 'object' vom Typ Array
console.log(Array.isArray([1, 2, 3])); //=> true
console.log(Array.isArray(names)); //=> true
console.log(Array.isArray(123)); //=> false
</script>
</body>
</html>

48
01_grundlagen/unterricht/tag08/06_ar-push.html Normal file
View File

@@ -0,0 +1,48 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array - ar.push()</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.push()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/push">
ar.push()
</a>
- Die <strong>push()</strong> Methode fügt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die
neue Länge des Arrays zurück.
</p>
</div>
</main>
<script>
'use strict';
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
];
// Array Methode - ar.push(entry[, ...entries])
names.push('Philippe');
console.log(names); // => ['Ersin', 'Andreas', 'Adel', 'Kahleel', 'Philippe']
const namesAmount = names.push('Tick', 'Trick', 'Track');
console.log(names); // =>  ['Ersin', 'Andreas', 'Adel', 'Kahleel', 'Philippe', 'Tick', 'Trick', 'Track']
console.log(names.length); // => 8
console.log(namesAmount); // => 8
</script>
</body>
</html>

41
01_grundlagen/unterricht/tag08/07_ar-pop.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>Array - ar.pop()</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.pop()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">
ar.pop()
</a>
- Die <strong>pop()</strong> Methode entfernt das <strong>letzte</strong> Element eines Arrays und gibt dieses
zurück. Diese Methode ändert die Länge des Arrays.
</p>
</div>
</main>
<script>
'use strict';
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
];
// Array Methode - ar.pop()
const lastEntry = names.pop();
console.log(names); // => ['Ersin', 'Andreas', 'Adel']
console.log(lastEntry); // => 'Kahleel'
</script>
</body>
</html>

48
01_grundlagen/unterricht/tag08/08_ar-unshift.html Normal file
View File

@@ -0,0 +1,48 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array - ar.unshift()</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.unshift()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift">
ar.unshift()
</a>
- Die <strong>unshift()</strong> Methode fügt ein oder mehrere Elemente am Anfang eines Arrays hinzu und gibt
die neue Länge des Arrays zurück.
</p>
</div>
</main>
<script>
'use strict';
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
];
// Array Methode - ar.unshift(entry[, ...entries])
names.unshift('Philippe');
console.log(names); // => ['Philippe', 'Ersin', 'Andreas', 'Adel', 'Kahleel']
const namesAmount = names.unshift('Tick', 'Trick', 'Track');
console.log(names); // =>  ['Tick', 'Trick', 'Track', 'Philippe', 'Ersin', 'Andreas', 'Adel', 'Kahleel']
console.log(namesAmount); // => 8
console.log(names.length); // => 8
</script>
</body>
</html>

41
01_grundlagen/unterricht/tag08/09_ar-shift.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>Array - ar.shift()</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.shift()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/shift">
ar.shift()
</a>
- Die <strong>shift()</strong> Methode entfernt das <strong>erste</strong> Element eines Arrays und gibt
dieses zurück. Diese Methode ändert die Länge des Arrays.
</p>
</div>
</main>
<script>
'use strict';
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
];
// Array Methode - ar.shift()
const firstEntry = names.shift();
console.log(names); // => ['Andreas', 'Adel', 'Kahleel']
console.log(firstEntry); // => 'Ersin'
</script>
</body>
</html>

93
01_grundlagen/unterricht/tag08/10_ar-splice.html Normal file
View File

@@ -0,0 +1,93 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array.splice()</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.splice()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">
ar.splice()
</a>
- Die <strong>splice()</strong> Methode ändert den Inhalt eines Arrays durch das Entfernen vorhandener
Elemente und/oder Hinzufügen neuer Elemente.
</p>
</div>
</main>
<script>
'use strict';
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
// Array Methode - ar.splice(startIndex [,deleteCount [, toAddValue, toAddValue...]])
let cuttedNames;
let namesCopy;
// Mehrere Werte gezielt löschen =====================
console.log('Mehrere Werte gezielt löschen ===========');
// Kopie eines Arrays
namesCopy = [...names]; // alternativ names.slice()
// ar.splice(startIndex, deleteCount)
cuttedNames = namesCopy.splice(2, 2);
console.log(cuttedNames); //=> ['Adel', 'Kahleel'];
console.log(namesCopy); //=> ['Ersin', 'Andreas', 'Philippe'];
// Mehrere Werte gezielt ersetzen =====================
console.log('Mehrere Werte gezielt ersetzen ===========');
// Kopie eines Arrays
namesCopy = [...names]; // alternativ names.slice()
// [
// 'Ersin', //
// 'Andreas',
// 'Adel',
// 'Kahleel',
// 'Philippe',
// ];
// ar.splice(startIndex, deleteCount, ...addValueN)
cuttedNames = namesCopy.splice(1, 2, 'Jane', 'John');
console.log(cuttedNames); //=> ['Andreas', 'Adel'];
console.log(namesCopy); //=> ['Ersin', 'Jane', 'John', 'Kahleel', 'Philippe']
// Mehrere Werte gezielt am Ende hinzufügen =====================
console.log('Mehrere Werte am Ende hinzufügen ===========');
// Kopie eines Arrays
namesCopy = [...names]; // alternativ names.slice()
// [
// 'Ersin', //
// 'Andreas',
// 'Adel',
// 'Kahleel',
// 'Philippe',
// ];
// ar.splice(startIndex, deleteCount, ...addValueN)
cuttedNames = namesCopy.splice(namesCopy.length, 0, 'Tick', 'Trick', 'Track');
console.log(cuttedNames); //=> []
console.log(namesCopy); // => ['Ersin', 'Andreas', 'Adel', 'Kahleel', 'Philippe', 'Tick', 'Trick', 'Track']
</script>
</body>
</html>

51
01_grundlagen/unterricht/tag08/11_ar-slice.html Normal file
View File

@@ -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.slice()</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.slice()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/slice">
ar.slice()
</a>
- Die <strong>slice()</strong> Methode schreibt eine flache Kopie von einem Teil des Arrays in ein neues
Array-Objekt von <code>begin</code> bis <code>end</code> (end nicht enthalten). Das originale Array wird nicht
verändert. (<strong>side-effect-free</strong>)
</p>
<div class="alert alert-danger">side-effect-free</div>
<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 = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
// Array Methode - ar.slice(startIndex [, endIndex])
// SIDE-EFFECT-FREE
const cuttedNames = names.slice(3, 5);
console.log(cuttedNames); //=> ['Kahleel', 'Philippe']
console.log(names); // => ['Ersin', 'Andreas', 'Adel', 'Kahleel', 'Philippe']
outputEl.textContent = names.join(', ');
</script>
</body>
</html>

57
01_grundlagen/unterricht/tag08/12_ar-sort.html Normal file
View File

@@ -0,0 +1,57 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array.sort()</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()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">
ar.sort()
</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>
<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 = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
const numbers = [1, 29, 44, 3, 8, 38];
// Array Methode - ar.sort()
const namesCopy = [...names];
const namesSorted = namesCopy.sort();
console.log(namesSorted); // => ['Adel', 'Andreas', 'Ersin', 'Kahleel', 'Philippe']
console.log(namesCopy); // => ['Adel', 'Andreas', 'Ersin', 'Kahleel', 'Philippe']
// Lexikographische Sortierung
console.log(numbers.sort()); //=> [1, 29, 3, 38, 44, 8]
</script>
</body>
</html>

50
01_grundlagen/unterricht/tag08/13_ar-index-last-index-of.html Normal file
View File

@@ -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 - ar.indexOf()</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.indexOf()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf">
ar.indexOf()
</a>
- Die Methode <strong>indexOf()</strong> gibt den Index zurück, an dem ein bestimmtes Element im Array zum
ersten Mal auftritt oder <code>-1</code> wenn es nicht vorhanden ist.
</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 = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
// Array Methode - ar.indexOf('searchValue')
console.log(names.indexOf('Adel')); //=> 2
console.log(names.indexOf('Boris')); //=> -1
console.log(names.indexOf('adel')); //=> -1
// Array Methode - ar.lastIndexOf('searchValue')
console.log(names.lastIndexOf('Philippe')); //=> 4
console.log(names.indexOf('Philippe')); //=> 4
</script>
</body>
</html>

49
01_grundlagen/unterricht/tag08/14_ar-join.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>Array - ar.join()</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.join()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/join">
ar.join()
</a>
- Die <code>join()</code> Methode von Array Instanzen erstellt und gibt einen neuen String zurück, indem alle
Elemente in diesem Array verkettet werden, getrennt durch Kommas oder einem angegebenen Trennzeichen-String.
Wenn das Array nur ein Element hat, wird dieses Element ohne Verwendung des Trennzeichens zurückgegeben.
</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 = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
// Array Methode - ar.join()
console.log(names.join()); //=> 'Ersin,Andreas,Adel,Kahleel,Philippe'
console.log(names.toString()); //=> 'Ersin,Andreas,Adel,Kahleel,Philippe'
console.log(names.join(' - ')); //=> 'Ersin - Andreas - Adel - Kahleel - Philippe'
console.log(names.join(', ')); //=> 'Ersin, Andreas, Adel, Kahleel, Philippe'
outputEl.innerHTML = `<ol><li>${names.join('</li><li>')}</li></ol>`;
</script>
</body>
</html>