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-25 10:35:17 +02:00
parent ccff1b73d6
commit db2ec6838a
7 changed files with 170 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
01_grundlagen/uebungen/#u36_kekse-array.html → 01_grundlagen/uebungen/u36_kekse-array.html
View File

@@ -83,6 +83,24 @@
'1/2 cup sugar', '1/2 cup sugar',
'1 tsp baking powder', '1 tsp baking powder',
]; ];
// 36.1
receipeAr.push('1 tsp flour');
// 36.2
receipeAr.unshift('1 cup rolled oats');
// 36.2
receipeAr.splice(1, 1, '1/3 cup butter');
receipeAr[1] = '1/3 cup butter';
// 36.3
const receipeStr = receipeAr.join('\n');
console.log(`Oat-Cookie Receipe:\n\n${receipeStr}\n\n${introduction}`);
outputEl.innerHTML = `<p>${introduction}</p>
<h3>Oat-Cookie Receipe:</h3>
<ol><li>${receipeAr.join('</li><li>')}</li></ol>`;
</script> </script>
</body> </body>
</html> </html>

24
01_grundlagen/uebungen/#u37-bus-stations.html → 01_grundlagen/uebungen/u37-bus-stations.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -76,6 +76,28 @@ const LINE_W = [
'39 Av', '39 Av',
'Queensboro Plaza', 'Queensboro Plaza',
]; ];
// Finde die Position der gewünschten Zielhaltestelle Broadway heraus.
console.log(LINE_W.indexOf('Broadway')); //=> 3
// Entferne alle Haltestellen nach Broadway aus dem Array.
const lineCopy = [...LINE_W];
console.log(lineCopy.splice(lineCopy.indexOf('Broadway') + 1, lineCopy.length - lineCopy.indexOf('Broadway')));
console.log(lineCopy);
const calcStartStopPlan = (start, destination, withStart = false) => {
const posStart = withStart ? LINE_W.indexOf(start) : LINE_W.indexOf(start) + 1;
const posEnd = LINE_W.indexOf(destination);
// Guard
if (posStart === -1 || posEnd === -1) return [];
return LINE_W.slice(posStart, posEnd + 1);
};
const schedule = calcStartStopPlan('Astoria-Ditmars Blvd', 'Broadway').join(' --- ');
// const schedule = calcStartStopPlan('Astoria-Ditmars Blvd', 'Broadway', true).join(' --- ');
outputEl.textContent = schedule;
</script> </script>
</body> </body>
</html> </html>

2
01_grundlagen/uebungen/#u38_alte-listen.html → 01_grundlagen/uebungen/u38_alte-listen.html
View File

@@ -38,6 +38,8 @@
return csvStr.split(/\s*,\s*/).sort(); return csvStr.split(/\s*,\s*/).sort();
}; };
console.log(handleCsv(productList));
outputEl.innerHTML = `<ul><li>${handleCsv(productList).join('</li><li>')}</li></ul>`; outputEl.innerHTML = `<ul><li>${handleCsv(productList).join('</li><li>')}</li></ul>`;
</script> </script>
</body> </body>

8
01_grundlagen/unterricht/tag08/05_array-object.html
View File

@@ -62,7 +62,7 @@
// Sonderfall: Array über Konstruktor-Objekt erstellen // Sonderfall: Array über Konstruktor-Objekt erstellen
const lottoNumbers = new Array(6); //=> [empty,empty,empty,empty,empty,empty ] const lottoNumbers = new Array(6); //=> [empty,empty,empty,empty,empty,empty ]
lottoNumbers.fill(); //=> [0,0,0,0,0,0] lottoNumbers.fill(0); //=> [0,0,0,0,0,0]
// Array -- Eigenschaft ar.length // Array -- Eigenschaft ar.length
@@ -74,6 +74,12 @@
console.log(Array.isArray([1, 2, 3])); //=> true console.log(Array.isArray([1, 2, 3])); //=> true
console.log(Array.isArray(names)); //=> true console.log(Array.isArray(names)); //=> true
console.log(Array.isArray(123)); //=> false console.log(Array.isArray(123)); //=> false
// console.log([1, 2, 3] === [1, 2, 3]); //=> false
// console.log([] === []); //=> false
console.log([1, 2, 3].toString() === [1, 2, 3].toString()); //=> true
console.log([1, 2, 3].toString() === [1, '2', 3].toString()); //=> true
</script> </script>
</body> </body>
</html> </html>

4
01_grundlagen/unterricht/tag08/10_ar-splice.html
View File

@@ -66,7 +66,11 @@
// ar.splice(startIndex, deleteCount, ...addValueN) // ar.splice(startIndex, deleteCount, ...addValueN)
cuttedNames = namesCopy.splice(1, 2, 'Jane', 'John'); cuttedNames = namesCopy.splice(1, 2, 'Jane', 'John');
// namesCopy[1] = 'Jane'
// namesCopy[2] = 'John'
console.log(cuttedNames); //=> ['Andreas', 'Adel']; console.log(cuttedNames); //=> ['Andreas', 'Adel'];
console.log(namesCopy); //=> ['Ersin', 'Jane', 'John', 'Kahleel', 'Philippe'] console.log(namesCopy); //=> ['Ersin', 'Jane', 'John', 'Kahleel', 'Philippe']
// Mehrere Werte gezielt am Ende hinzufügen ===================== // Mehrere Werte gezielt am Ende hinzufügen =====================

64
01_grundlagen/unterricht/tag09/01_str-split.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>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', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
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('')); //=>  ['E', 'r', 's', 'i', 'n']
// unsicheres Passwort für 'Ersin'
console.log(
names[0]
.split('') //=>  ['E', 'r', 's', 'i', 'n']
.reverse() //=>  ['n', 'i', 's', 'r', 'E']
.join('') + names[0].length,
); //=> nisrE5
console.log(names[1].split('').reverse().join('') + names[1].length); //=> saerdnA7
console.log(names[2].split('').reverse().join('') + names[2].length); //=> ledA4
console.log(names[3].split('').reverse().join('') + names[3].length); //=> leelhaK7
console.log('abcdefghijklmnopqrstuvwxyz'.toUpperCase().split(''));
</script>
</body>
</html>

51
01_grundlagen/unterricht/tag09/02_ar-reverse.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.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 - ar.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', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
const text = 'Ich bin ein Text.';
// Array Methode - ar.reverse()
const namesCopy = [...names];
const namesReversed = namesCopy.reverse();
console.log(namesReversed); // => ['Philippe', 'Kahleel', 'Adel', 'Andreas', 'Ersin']
console.log(namesCopy); //=> IN-PLACE-MUTATION -> ['Philippe', 'Kahleel', 'Adel', 'Andreas', 'Ersin']
</script>
</body>
</html>