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

45
01_grundlagen/uebungen/#o01_palindrom.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Optionale Übung optional 01: Palindrom Checker</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">
<h2>Optionale Übung 01: Palindrom Checker</h2>
<p>
Ein Palindrom ist ein Wort, das vorwärts und rückwärts gelesen dasselbe ist. Ein guter Weg, um das zu
überprüfen, ist, das Wort umzukehren und zu sehen, ob es dem Original entspricht. Allerdings sollte man
dabei die Groß- und Kleinschreibung sowie Leerzeichen oder Sonderzeichen berücksichtigen.
</p>
<p>
Schreibe eine JavaScript-Funktion namens <code>isPalindrom</code>, die eine Zeichenkette (string) als
Eingabe akzeptiert. Die Funktion soll <code>true</code> zurückgeben, wenn es sich bei der Zeichenkette um
ein Palindrom handelt, und <code>false</code> andernfalls.
</p>
<h3>Beispiele:</h3>
<ul>
<li>"anna"</li>
<li>"Lagerregal"</li>
<li>"Ein Esel lese nie"</li>
</ul>
<h3>Anforderungen:</h3>
<ul>
<li>
Die Funktion soll nicht zwischen Groß- und Kleinschreibung unterscheiden (z. B. 'Anna' ist ein Palindrom).
</li>
<li>Leerzeichen und Satzzeichen sollen ignoriert werden.</li>
</ul>
</div>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>

50
01_grundlagen/uebungen/#u30_quiz-dark-side.html
View File

@@ -1,50 +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 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</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 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</h1>
<p>
Es wird Zeit, das Spiel weiter zu optimieren. Nimm dir eine der Fragen vor, die schon implementiert ist:
</p>
<p>»Was heißt if auf Deutsch?« (Mehrere Lösungsmöglichkeiten: wenn, falls).</p>
<p>
Der Code deckt schon drei verschiedene Lösungsmöglichkeiten ab. Aber was ist, wenn jemand statt
<code>wenn</code> <code>Wenn</code> oder <code>WENN</code> schreibt?
</p>
<p>
Das Thema Groß- und Kleinschreibung wird dir bei Benutzereingaben öfter begegnen. Für das Spiel würde es zum
Beispiel helfen, wenn der Spieler die Eingabe immer komplett kleinschreibt. Sicher ist der Spieler verwirrt,
wenn das Spiel seine Antwort Wenn als falsch quittiert.
</p>
<p>
Optimiere die betreffende Stelle im Spiel, indem du die Benutzereingabe in Kleinbuchstaben umwandelst — vor
Prüfung der if-Bedingung.
</p>
</div>
</div>
</main>
<script>
'use strict';
// const QUESTION_1 = 'es geht los! Sag mir mal, welcher Operator die höhere Priorität hat: * oder + ?';
// const SOLUTION_1 = '*';
// const QUESTION_2 = 'Was ist das deutsche Wort für if?';
// const SOLUTION_2A = 'falls';
// const SOLUTION_2B = 'wenn';
// const QUESTION_3 = 'Jetzt gib bitte einen String mit einer Länge von 8 bis 15 Zeichen ein';
// const SOLUTION_3A = 8;
// const SOLUTION_3B = 15;
</script>
</body>
</html>

88
01_grundlagen/uebungen/#u36_kekse-array.html Normal file
View File

@@ -0,0 +1,88 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 36: Kekse backen mit Arrays</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">
<h2>Übung 36: Kekse backen mit Arrays</h2>
<img
src="https://trainers.atp.wpicert.org/system/wpi_curriculum/file/images/files/000/006/526/800-534/53f6cb7feb9e9a7580d88ce5fa5a6d5c.jpg?1739200429"
alt=""
width="300"
class="img-thumbnail" />
<p>
Du möchtest ein digitales Rezeptbuch schreiben. Die Zutaten für das jeweilige Rezept stellst du in einem
Array zur Verfügung.
</p>
<ol>
<li>
Lege für das erste Rezept — Haferflocken-Kekse — ein Array mit den folgenden Zutaten an:
<code>
<pre>
1/4 cup vegetable oil
1 separated egg
1/2 cup sugar
1 tsp baking powder
</pre>
</code>
</li>
<li>Da in der Liste das Mehl fehlt, musst du 1 EL Mehl (1 tsp flour) noch nachträglich ergänzen.</li>
<li>
Beim Durchlesen der Liste fällt auf, dass die wohl wichtigste Zutat ebenfalls fehlt. Füge noch 100 g
Haferflocken (1 cup rolled oats) an die erste Position in die Zutatenliste ein.
</li>
<li>
Für Kekse ist es eigentlich besser, Butter statt Öl zu verwenden. Tausche das Öl in der Liste
dementsprechend gegen 75 g Butter (1/3 cup butter) aus.
</li>
<li>
Wandle das Array nun in einen String um und speichere diesen in einer Variablen. Dabei sollen die Zutaten
als Liste ausgegeben werden.
</li>
<li>
Und damit die Rezeptspielerei nicht total sinnlos war, bekommst du natürlich noch die Anleitung von uns
dazu. Speichere auch diese in einer Variable und gib das komplette Rezept in der Konsole aus.
</li>
</ol>
<p>Anleitung:</p>
<blockquote>
Melt the butter in a pan, add the rolled oats and mix everything well. Remove the mixture from heat and let
it cool. Add the sugar to the egg white and beat until stiff. Mix in the yolk, baking powder and flour. Now
mix in the cooled oat mixture. Shape small mounds of batter onto a baking sheet. These mounds should not be
too large, since the batter will spread out a little as it is baked. Bake for 15 minutes at 350 °F in a
pre-heated oven.
</blockquote>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const introduction = `Melt the butter in a pan, add the rolled oats and mix everything well. Remove the mixture from heat and let it cool. Add the sugar to the egg white and beat until stiff. Mix in the yolk, baking powder and flour. Now mix in the cooled oat mixture. Shape small mounds of batter onto a baking sheet. These mounds should not be too large, since the batter will spread out a little as it is baked. Bake for 15 minutes at 350 °F in a pre-heated oven.`;
const receipeAr = [
'1/4 cup vegetable oil', //
'1 separated egg',
'1/2 cup sugar',
'1 tsp baking powder',
];
</script>
</body>
</html>

81
01_grundlagen/uebungen/#u37-bus-stations.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 37: Die Kurzstreckenfahrt</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">
<h2>Übung 37: Die Kurzstreckenfahrt</h2>
<p>
Nach dem Backen möchtest du ein bisschen Zug fahren. Du selbst befindest dich in New York in der Nähe der
Haltestelle Astoria-Ditmars Blvd. Deine Freunde, die dich und deine Kekse schon freudig erwarten, wohnen bei
der Haltestelle Queensboro Plaza. Da du aber nur ein Kurzstrecken-Ticket lösen möchtest, musst du den Rest
der Strecke laufen. Deswegen benötigst du die Haltestellen-Liste (siehe Grafik) nur bis zur Haltestelle
Broadway.
</p>
<p><strong>Hinweis:</strong> Für diese Übung bietet es sich an, mit `slice` und `indexOf` zu arbeiten.</p>
<img
src="https://trainers.atp.wpicert.org/system/wpi_curriculum/file/images/files/000/006/527/800-590/3b5ac28c38d961b21846b5adfe676dc1.png?1739200430"
width="400"
alt=""
class="img-thumbnail" />
<ol>
<li>
Erstelle ein Array mit den Haltestellen der Linie W:
<code>
<pre>
'use strict';
const LINE_W = [
'Astoria-Ditmars Blvd',
'Astoria Blvd',
'30 Av',
'Broadway',
'36 Av',
'39 Av',
'Queensboro Plaza',
];
</pre>
</code>
</li>
<li>Finde die Position der gewünschten Zielhaltestelle Broadway heraus.</li>
<li>Entferne alle Haltestellen nach Broadway aus dem Array.</li>
<li>
Schreibe eine Funktion, die dir nach Übergabe einer beliebigen Zielhaltestelle ein Array mit allen
Haltestellen ab Astoria-Ditmars Blvd bis zur Zielhaltestelle zurückgibt.
</li>
<li>Erweitere die Funktion, sodass du auch die Starthaltestelle übergeben kannst.</li>
</ol>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const LINE_W = [
'Astoria-Ditmars Blvd',
'Astoria Blvd',
'30 Av',
'Broadway',
'36 Av',
'39 Av',
'Queensboro Plaza',
];
</script>
</body>
</html>

34
01_grundlagen/uebungen/#u38_alte-listen.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 38: Alte Listen</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">
<h2>Übung 38: Alte Listen</h2>
<p>
NerdWorld stellt dir eine neue Aufgabe: Die Mitarbeiter haben Produkte früher in Excel-Listen verwaltet. Zu
Migrationszwecken haben die Mitarbeiter sie nun als CSV-Dateien (comma separated values) exportiert. Damit
sind dann alle Elemente in einer Liste durch Kommas getrennt.
</p>
<p>
Schreibe eine Funktion handleCsv, die einen übergebenen CSV-String in ein Array splittet und alphabetisch
sortiert. Logge das fertig verarbeitete Array als Liste (pro Produkt eine Zeile) in die Konsole.
</p>
</div>
</div>
</main>
<script>
'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';
</script>
</body>
</html>

9
01_grundlagen/uebungen/#u27-zerlegter-heribert.html → 01_grundlagen/uebungen/u27-zerlegter-heribert.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -25,6 +25,13 @@
const outputElement = document.querySelector('.output');
const name = 'Heribert Gold '.trim();
const spacePosition = name.indexOf(' ');
const firstName = name.substring(0, spacePosition);
const lastName = name.substring(spacePosition + 1).trim();
console.log(firstName);
console.log(lastName);
</script>
</body>
</html>

12
01_grundlagen/uebungen/#u28_transformierte-ladislaus.html → 01_grundlagen/uebungen/u28_transformierte-ladislaus.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -27,6 +27,16 @@
const outputEl = document.querySelector('.output');
const name = 'Ladislaus Jones'.trim();
const firstSpacePos = name.indexOf(' ');
const lastSpacePos = name.lastIndexOf(' ');
const firstName = name.substr(0, firstSpacePos);
const secondName = name.substr(lastSpacePos);
const firstNamefirstLetter = firstName.substr(0, 1).toUpperCase();
outputEl.textContent = `${secondName}, ${firstNamefirstLetter}.`;
</script>
</body>
</html>

10
01_grundlagen/uebungen/#u29_fuehrende-nullen.html → 01_grundlagen/uebungen/u29_fuehrende-nullen.html
View File

@@ -26,12 +26,20 @@
<li>007 =&gt; 007</li>
</ul>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
let itemNumber = '123';
const outputEl = document.querySelector('.output');
const itemNumber = '123';
// const correctedItemNr = (itemNumber.charAt(0) !== '0' ? '0' : '') + itemNumber;
const correctedItemNr = (itemNumber.startsWith('0') ? '' : '0') + itemNumber;
outputEl.textContent = `ItemNr: ${itemNumber}, CorrectedItemNr: ${correctedItemNr}.`;
</script>
</body>
</html>

88
01_grundlagen/uebungen/u30_quiz-dark-side.html Normal file
View File

@@ -0,0 +1,88 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</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 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</h1>
<p>
Es wird Zeit, das Spiel weiter zu optimieren. Nimm dir eine der Fragen vor, die schon implementiert ist:
</p>
<p>»Was heißt if auf Deutsch?« (Mehrere Lösungsmöglichkeiten: wenn, falls).</p>
<p>
Der Code deckt schon drei verschiedene Lösungsmöglichkeiten ab. Aber was ist, wenn jemand statt
<code>wenn</code> <code>Wenn</code> oder <code>WENN</code> schreibt?
</p>
<p>
Das Thema Groß- und Kleinschreibung wird dir bei Benutzereingaben öfter begegnen. Für das Spiel würde es zum
Beispiel helfen, wenn der Spieler die Eingabe immer komplett kleinschreibt. Sicher ist der Spieler verwirrt,
wenn das Spiel seine Antwort Wenn als falsch quittiert.
</p>
<p>
Optimiere die betreffende Stelle im Spiel, indem du die Benutzereingabe in Kleinbuchstaben umwandelst — vor
Prüfung der if-Bedingung.
</p>
</div>
</div>
</main>
<script>
'use strict';
const QUESTION_1 = 'Welcher Operator hat eine höhere Priorität: * oder + ?';
const SOLUTION_1 = '*';
const QUESTION_2 = 'Was ist das deutsche Wort für if?';
const SOLUTION_2_1 = 'wenn';
const SOLUTION_2_2 = 'falls';
const QUESTION_3 = 'Geben Sie bitte einen String mit einer Länge von 8 bis 15 Zeichen ein';
const SOLUTION_3_1 = 8;
const SOLUTION_3_2 = 15;
const outputEl = document.querySelector('.output');
const username = prompt('Bitte geben Sie ihren Vornamen ein: ');
alert(`Willkommen beim Spiel, die dunkle Seite von JS, ${username}!`);
const playerFitness = prompt(
`${username}, fühlen Sie sich bereit gegen die dunkle Seite von JS anzutreten? Bitte antworten Sie mit ja oder nein (y/n)`,
)
.trim()
.toLowerCase();
if (playerFitness === 'ja' || playerFitness === 'y') {
alert('Okay, mögen die Spiele beginnen');
const answer1 = prompt(QUESTION_1).trim().toLowerCase();
if (answer1 === SOLUTION_1) {
alert(`Richtige Antwort, ${username}! Die helle Seite ist stark in dir!`);
} else {
alert(`${username}, leider lagst du falsch. Die dunkle Seite von JS hat gewonnen!`);
}
const answer2 = prompt(QUESTION_2).trim().toLowerCase();
if (answer2 === SOLUTION_2_1 || answer2 === SOLUTION_2_2) {
alert(`Richtige Antwort, ${username}! Die helle Seite ist weiterhin stark in dir!`);
} else {
alert(`${username}, leider lagst du falsch. Die dunkle Seite wächst in dir!`);
}
const answer3 = Number(prompt(`${username}! ${QUESTION_3}`));
if (answer3.length >= SOLUTION_3_1 && answer3.length <= SOLUTION_3_2) {
alert(`Richtige Antwort, ${username}! Die helle Seite ist stark in dir!`);
} else {
alert(`${username}, leider lagst du falsch. Die dunkle Seite ist stark in dir!`);
}
} else {
alert(`${username}, die dunkle Seite ist stark in dir!`);
}
</script>
</body>
</html>

21
01_grundlagen/uebungen/#u31_function-console.html → 01_grundlagen/uebungen/u31_function-console.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -19,9 +19,22 @@
const outputEl = document.querySelector('.output');
/*
TODO: Schreibe eine Funktion, die deinen Namen in der Konsole ausgibt.
*/
const outputName = (name) => {
console.log(name);
alert(name);
};
outputName('Max Power');
// =====
const getName = (name) => {
return name[0].toUpperCase() + name.substring(1).toLowerCase();
};
console.log(getName('philippe'));
alert(getName('adel'));
outputEl.textContent = getName('KaHlEeL');
</script>
</body>
</html>

10
01_grundlagen/uebungen/#u32-tranformed-ladislaus.html → 01_grundlagen/uebungen/u32-tranformed-ladislaus.html
View File

@@ -24,6 +24,16 @@
</main>
<script>
'use strict';
const logTransformedName = (firstName, secondName) => {
const tName = `${secondName.charAt(0).toUpperCase() + secondName.substr(1).toLowerCase()}, ${firstName.charAt(0).toUpperCase()}.`;
console.log(tName);
};
logTransformedName('Max', 'Power');
logTransformedName('adEL', 'jabaRkHel');
logTransformedName('kAHlEel', 'johNson');
logTransformedName('andreAs', 'rohLedEr');
</script>
</body>
</html>

31
01_grundlagen/uebungen/#u33_newsletter.html → 01_grundlagen/uebungen/u33_newsletter.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -99,15 +99,38 @@ showInvitationFor('Ladislaus', 'Music Festival', 'September 10', true);
</li>
</ol>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
/*
const outputEl = document.querySelector('.output');
TODO: showInvitationFor Function
*/
const showInventationFor = (name, event, date, VIP) => {
return `Dear ${name},
${VIP ? 'You have registered as a VIP! Enjoy exclusive benefits and access to VIP areas.' : 'Thank you for your registration.'}
Event Details:
- Event: ${event}
- Date: ${date}
- Venue: Main Hall, Conference Center
We look forward to seeing you at the event!
Best regards,
The Event Team`;
};
console.log(showInventationFor('Heribert', 'Tech Conference', 'July 24', true));
console.log('==============================');
console.log(showInventationFor('Goldy', 'Art Workshop', 'August 15', false));
console.log('==============================');
showInventationFor('Ladislaus', 'Music Festival', 'September 10', true);
console.log(console.log('=============================='));
outputEl.innerHTML = showInventationFor('Andreas', 'JS Conference', 'June 24', true).replaceAll('\n', '<br />');
</script>
</body>
</html>

16
01_grundlagen/uebungen/#u34-tranformed-ladislaus.html → 01_grundlagen/uebungen/u34-tranformed-ladislaus.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -69,12 +69,24 @@
const inputLastnameEl = document.querySelector('input[name="lastname"]');
// Funktionsdefinition
const transformName = (firstName, secondName) => {
const tName = `${secondName.charAt(0).toUpperCase() + secondName.substr(1).toLowerCase()}, ${firstName.charAt(0).toUpperCase()}.`;
return tName;
};
formTransformEl.addEventListener('submit', (e) => {
e.preventDefault();
const name = transformName(inputFirstnameEl.value, inputLastnameEl.value);
outputEl.textContent = name;
});
// console.log(transformName('Max', 'Mustermann')); //=> 'Mustermann, M.'
// =====
console.log(transformName('Max', 'Mustermann')); //=> 'Mustermann, M.'
console.log(transformName('Max', 'Power'));
console.log(transformName('adEL', 'jabaRkHel'));
console.log(transformName('kAHlEel', 'johNson'));
console.log(transformName('andreAs', 'rohLedEr'));
</script>
</body>
</html>

18
01_grundlagen/uebungen/#u35_reichweite-verbrauch.html → 01_grundlagen/uebungen/u35_reichweite-verbrauch-1.html
View File

@@ -62,7 +62,7 @@
<script>
'use strict';
// DOM & Variabendeklaration ==
// DOM & Variabendeklaration ========
const formCalculatorEl = document.querySelector('.form-calculator');
const outputAEl = document.querySelector('#output');
const outputBEl = document.querySelector('#output2');
@@ -72,19 +72,27 @@
const tankGroesseEL = document.querySelector('input[name="tangroesse"]');
// 1. Schreiben Sie ein Programm zur Kraftstoffverbrauchsberechnung für Pkws.
//const benzinMenge = prompt('Geben Sie die verbrauchte Benzinmenge an!');
//const strecke = prompt('Geben Sie die Strecke an!');
// const benzinMenge = prompt('Geben Sie die verbrauchte Benzinmenge an!');
// const strecke = prompt('Geben Sie die Strecke an!');
// Funktionen =========
// Funktionen =========================
//
const berechneBenzinVerbrauch = (benzinMenge, strecke) => {
const verbrauch = (benzinMenge / strecke) * 100;
return Number(verbrauch.toFixed(1));
};
// EventHandler =======
const onSubmit = (e) => {
e.preventDefault();
console.log(berechneBenzinVerbrauch(benzinMengeEl.value, streckeEl.value));
outputAEl.textContent = berechneBenzinVerbrauch(benzinMengeEl.value, streckeEl.value);
};
formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz
// berechneBenzinVerbrauch(benzinMenge, strecke);
</script>
</body>
</html>

112
01_grundlagen/uebungen/u35_reichweite-verbrauch-2.html Normal file
View File

@@ -0,0 +1,112 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 35: Reichweite & Verbrauch, Teil 3</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 35: Reichweite & Verbrauch, Teil 3</h1>
<p>
Überarbeiten Sie Reichweite & Verbrauch, Teil 2 (Übung 18). Erstellen Sie passende Funktionen, die die
Benutzereingaben zurückgeben.
</p>
</div>
</div>
<section class="section-calculator">
<div class="container">
<form class="form-calculator" method="get">
<div class="row">
<div class="col-12 col-sm-6">
<div class="mb-3">
<label for="input-strecke" class="form-label">Strecke</label>
<input type="number" class="form-control" name="strecke" id="input-strecke" />
</div>
</div>
<div class="col-12 col-sm-6">
<div class="mb-3">
<label for="input-benzinmenge" class="form-label">verbrauchte Benzinmenge</label>
<input type="number" class="form-control" name="benzinmenge" id="input-benzinmenge" />
</div>
</div>
</div>
<!-- ▲ /.row ▲ -->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-tankgroesse" class="form-label">Tankgröße</label>
<input type="number" class="form-control" name="tangroesse" id="input-tankgroesse" />
</div>
</div>
</div>
<!-- ▲ /.row ▲ -->
<div class="row">
<div class="col">
<!-- <input type="submit" value="Rechnen" class="btn btn-dark button-calculate" /> -->
<button type="submit" class="btn btn-dark button-calculate">Rechnen</button>
</div>
</div>
</form>
<div class="alert alert-secondary my-3" id="output"></div>
<div class="alert alert-secondary my-3" id="output2"></div>
</div>
</section>
</main>
<script>
'use strict';
// DOM & Variabendeklaration ========
const formCalculatorEl = document.querySelector('.form-calculator');
const outputAEl = document.querySelector('#output');
const outputBEl = document.querySelector('#output2');
const streckeEl = document.querySelector('input[name="strecke"]');
const benzinMengeEl = document.querySelector('input[name="benzinmenge"]');
const tankGroesseEL = document.querySelector('input[name="tangroesse"]');
// 1. Schreiben Sie ein Programm zur Kraftstoffverbrauchsberechnung für Pkws.
// const benzinMenge = prompt('Geben Sie die verbrauchte Benzinmenge an!');
// const strecke = prompt('Geben Sie die Strecke an!');
// Funktionen =========
const askFuelConsumption = () => {
return benzinMengeEl.value;
};
//
const askDistance = () => {
return streckeEl.value;
};
const askTankSize = () => {
return tankGroesseEL.value;
};
const calcConsumptionKm = (fuelConsumption, distance) => (fuelConsumption / distance) * 100;
const calcMaxDistance = (tankSize, distance, fuelConsumption) => (tankSize * distance) / fuelConsumption;
// EventHandler =======
const onSubmit = (e) => {
e.preventDefault();
const fuelConsumption = askFuelConsumption();
const distance = askDistance();
const tankSize = askTankSize();
const resultConsumption = calcConsumptionKm(fuelConsumption, distance);
const resultDistance = calcMaxDistance(tankSize, distance, fuelConsumption);
outputAEl.textContent = `Ihr Verbrauch liegt bei ${resultConsumption.toFixed(2)} l/100km`;
outputBEl.textContent = `Die maximale Reichweite beträgt ${Math.round(resultDistance)}km`;
};
formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz
</script>
</body>
</html>

BIN
01_grundlagen/uebungen/uebungen-35-38-o1.zip Normal file
View File

Binary file not shown.

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>