This commit is contained in:
Philippe Torrel
2026-09-16 14:37:18 +02:00
parent 70329bd0bc
commit 0a2a7481a2
10 changed files with 603 additions and 1 deletions
+113
View File
@@ -0,0 +1,113 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 33: Hello, dear ${recipient}</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 33: Hello, dear ${recipient}</h2>
<ol>
<li>
<p>
Stell dir vor, du arbeitest für ein Unternehmen, das Veranstaltungen organisiert. Du sollst für diesen
Auftraggeber Einladungen verschicken:
</p>
<code>
<pre>
Dear Heribert,
Thank you for your registration.
Event Details:
- Event: Tech Conference
- Date: July 24
- Venue: Main Hall, Conference Center
We look forward to seeing you at the event!
Best regards,
The Event Team
</pre>
</code>
<p>
Programmiere eine Funktion, die eine Einladung, simuliert durch eine Konsolenausgabe, für die Teilnehmer
generiert. Dabei soll statt Heribert ein beliebiger Name verwendbar sein.
</p>
<p>Folgende Aufrufe erfolgen später aus der Datenbank:</p>
<code>
<pre>
showInvitationFor('Heribert');
showInvitationFor('Goldy');
showInvitationFor('Ladislaus');
</pre>
</code>
</li>
<li>
<p>
Da unser Auftraggeber verschiedene Veranstaltungen zu verschiedenen Zeitpunkten organisiert, sollen im
nächsten Schritt zwei weitere Parameter angegeben werden, in dem die Art der Veranstaltung, sowie ein
Datum, jeweils als Text, übergeben wird.
</p>
<p>
Einen zweiten Parameter kannst du bei der Funktionsdefinition innerhalb der Klammern durch Komma
getrennt angeben.
</p>
<code>
<pre>
let showInvitationFor = (recipient, event, date) => {
// ...
}
</pre>
</code>
<p>
Es sind auch weitere Parameter möglich, aber hier benötigst du nur drei. Innerhalb des Rumpfes kannst du
die neuen Parameter wie gewohnt wie eine Variable verwenden.
</p>
<p>Folgende Aufrufe erfolgen später aus der Datenbank:</p>
<code>
<pre>
showInvitationFor('Heribert', 'Tech Conference', 'July 24');
showInvitationFor('Goldy', 'Art Workshop', 'August 15');
showInvitationFor('Ladislaus', 'Music Festival', 'September 10');
</pre>
</code>
</li>
<li>
<p>
Dein Auftraggeber bietet auch einen VIP-Status für Teilnehmer an. Fall ein Teilnehmer diesen Status
gebucht hat, soll der einleitende Text der Einladung entsprechend angepasst werden:
</p>
<h3>Standard-Version</h3>
<p><code>Thank you for your registration.</code></p>
<h3>VIP-Version</h3>
<p><code>You have registered as a VIP! Enjoy exclusive benefits and access to VIP areas.</code></p>
<p>Folgende Aufrufe erfolgen später aus der Datenbank:</p>
<code>
<pre>
showInvitationFor('Heribert', 'Tech Conference', 'July 24', true);
showInvitationFor('Goldy', 'Art Workshop', 'August 15', false);
showInvitationFor('Ladislaus', 'Music Festival', 'September 10', true);
</pre>
</code>
</li>
</ol>
</div>
</div>
</main>
<script>
'use strict';
/*
TODO: showInvitationFor Function
*/
</script>
</body>
</html>
@@ -0,0 +1,80 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 34: Der transformierte Ladislaus, 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 34: Der transformierte Ladislaus, Teil 3</h1>
<p>
Schreiben Sie eine Funktion <code>transformName</code>, die Vor- und Nachname als Parameter entgegennimmt
und einen String der Form
</p>
<p>
<code>&lt;Nachname&gt;, &lt;Anfangsbuchstabe des Vornamens&gt;.</code>
</p>
</div>
<h3 class="mt-3">Formular:</h3>
<form class="form-transform">
<div class="row">
<div class="col-12 col-sm-6">
<div class="mb-3">
<label class="form-label" for="input-firstname">Vorname:</label>
<input
type="text"
class="form-control"
name="firstname"
id="input-firstname"
placeholder="Vorname eingeben..." />
</div>
</div>
<div class="col-12 col-sm-6">
<div class="mb-3">
<label class="form-label" for="input-lastname">Nachname:</label>
<input
type="text"
class="form-control"
name="lastname"
id="input-lastname"
placeholder="Nachname eingeben..." />
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="mb-3">
<!-- <input type="submit" value="Transform name" class="btn btn-dark input-transform" /> -->
<button type="submit" class="btn btn-dark button-transform button">Transform name</button>
<button type="reset" class="btn btn-danger button-transform button">resetted</button>
</div>
</div>
</div>
</form>
<h3 class="mt-3">Transformierter Name:</h3>
<div class="output alert alert-secondary"></div>
</div>
</main>
<script>
'use strict';
const formTransformEl = document.querySelector('.form-transform');
const outputEl = document.querySelector('.output');
const inputFirstnameEl = document.querySelector('input[name="firstname"]');
const inputLastnameEl = document.querySelector('input[name="lastname"]');
// Funktionsdefinition
formTransformEl.addEventListener('submit', (e) => {
e.preventDefault();
});
// console.log(transformName('Max', 'Mustermann')); //=> 'Mustermann, M.'
</script>
</body>
</html>
@@ -0,0 +1,90 @@
<!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 =========
//
// EventHandler =======
const onSubmit = (e) => {
e.preventDefault();
};
formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz
</script>
</body>
</html>
@@ -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>
@@ -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>
@@ -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>
Binary file not shown.
+13 -1
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array - ar.sort())</title> <title>Array - ar.sort()</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head> </head>
<body> <body>
@@ -38,8 +38,20 @@
'Stefan', 'Stefan',
]; ];
const numbers = [1, 28, 44, 3, 8, 38];
// Array - Methode ar.sort() // Array - Methode ar.sort()
// IN-PLACE-MUTATION // IN-PLACE-MUTATION
const namesCopy = [...names];
const namesSorted = namesCopy.sort();
console.log(namesSorted); // => ['Benjamin', 'Christian', 'Florian', 'Stefan']
console.log(namesCopy); // => ['Benjamin', 'Christian', 'Florian', 'Stefan']
// Lexikographische Sortierung
console.log(numbers.sort()); // => [1, 28, 3, 38, 44, 8]
</script> </script>
</body> </body>
</html> </html>
@@ -0,0 +1,53 @@
<!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() - ar.lastIndexOf()</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() - ar.lastIndexOf()</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', 'Max', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus', 'Max'];
const names = [
'Florian', //
'Benjamin',
'Christian',
'Stefan',
];
const numbers = [1, 28, 44, 3, 8, 38];
// Array - Methode ar.indexOf()
console.log(names.indexOf('Benjamin')); //=> 1
console.log(names.indexOf('Stefan')); //=> 3
console.log(names.lastIndexOf('Stefan')); //=> 3
console.log(customersOnline.indexOf('Max')); //=> 1
console.log(customersOnline.lastIndexOf('Max')); //=> 6
console.log(names.indexOf('Philippe')); //=> -1
console.log(names.indexOf('X')); //=> -1
</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.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', 'Max', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus', 'Max'];
const names = [
'Florian', //
'Benjamin',
'Christian',
'Stefan',
];
const numbers = [1, 28, 44, 3, 8, 38];
// Array - Methode ar.join(delimiter)
console.log(names.join(', ')); // => Florian, Benjamin, Christian, Stefan
console.log(names.join(' - ')); // => Florian - Benjamin - Christian - Stefan
console.log(names.join()); // => Florian,Benjamin,Christian,Stefan
console.log(names.toString()); // => Florian,Benjamin,Christian,Stefan
outputEl.innerHTML = `<ol type="a"><li>${names.join('</li><li>')}</li></ol>`;
</script>
</body>
</html>