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>

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

@@ -34,10 +34,12 @@
'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'; '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 = (csvStr) => { const handleCsv = (csvStr) => {
//return csvStr.split(', ').sort(); // return csvStr.split(',').sort();
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>