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-22 14:40:35 +02:00
parent 781b2c357b
commit a7461f3573
29 changed files with 1376 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
01_grundlagen/uebungen/#u19-u20-quiz-1.html Normal file
View File

@@ -0,0 +1,106 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 19 und 20: Die dunkle Seite von JavaScript</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 19: Die dunkle Seite von JavaScript</h2>
<p>
Programmieren Sie nun Stück für Stück ein kleines Quiz, in dem ein Spieler Fragen zu JS beantworten muss und
damit gegen Fehler und schlechten Code — also die dunkle Seite von JS — antritt. Möge der Source mit Ihnen
sein.
</p>
<ol class="list">
<li>
<p>
Als ersten Schritt fragen Sie den Spieler nach seinem Namen, speichern diesen in eine Variable und
begrüßen ihn mittels einer Alert-Box. Ergänzen Sie den folgenden Code:
</p>
<pre>
<code> 'use strict'; let username = … alert(…); </code></pre>
</li>
<li>
<p>
Stellen Sie dem Spieler die Frage, ob er sich fit genug fühlt, um gegen das dunkle JavaScript
anzutreten. Es ist sinnvoll, bei der Frage die Antwortmöglichkeiten anzugeben. Die Antwort speichern Sie
in einer neuen Variable und erstellen als Nächstes eine
<code>if</code>-Verzweigung. Der Rumpf des <code>if</code> soll nur ausgewertet werden, wenn der Spieler
bestätigt, dass er sich stark genug fühlt, das Spiel zu beginnen. In den Rumpf schreiben wir ein
<code>alert</code>, das den Spielstart bestätigt und den Spieler anfeuert.
</p>
<p>
Für den Fall, dass der Spieler zu feige ist und einen mangelnden Fitness-Grad angegeben hat, schreiben
Sie eine weitere
<code>if</code>-Verzweigung, die den Fall abfängt und den Spieler mit Schimpf und Schande verabschiedet.
Natürlich dürfen Sie auch freundlich bleiben — ganz wie Sie mögen.
</p>
<blockquote>
<strong>Tipp:</strong> Schon während Sie das Programm entwickeln, sollten Sie es immer wieder testen.
Führen Sie nach jeder Änderung das Programm erneut aus!
</blockquote>
</li>
<li>
<p>
Nun kann es losgehen. Stellen Sie den Spieler vor seine erste Aufgabe. Deklarieren Sie nach dem alert
eine neue Variable, in der Sie die Antwort des Spielers zu folgender Frage speichern:<br />
<code>»Which Operator has the higher priority: * or + ?«</code>
</p>
<p>
Um auf die Antwort reagieren zu können, schreiben Sie eine weitere
<code>if</code>-Verzweigung, deren Rumpf nur ausgewertet wird, wenn die Antwort stimmt.
</p>
<p>
<code>alert</code> gratuliert hier zur korrekten Antwort. Wenn Sie mögen, können Sie noch weitere
Verzweigungen mit Fragen einbauen.
</p>
</li>
<li>
<p>
Fügen Sie ein weiteres <code>if</code> für die Variante ein, in der der Spieler eine falsche Antwort
gibt.
</p>
</li>
</ol>
</div>
<div class="alert alert-primary">
<h2>Übung 20: Die dunkle Seite von JavaScript</h2>
<p>
Für Ihr Spiel ist else ebenfalls hilfreich. Zum Beispiel bei der Frage, ob der Spieler bereit zum Spielen
ist. Statt hier ein zweites
<code>if</code> einzubauen, können Sie <code>else</code> verwenden.
</p>
<p>Ersetzen Sie die <code>if</code>-Anweisungen an den richtigen Stellen durch ein <code>else</code>:</p>
</div>
<div class="alert alert-primary">
<h2>Übung 23: Die dunkle Seite schlägt zurück…</h2>
<p>
Endlich setzen Sie Ihren Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellen zwei neue
»Kampf-Sequenzen«:
</p>
<ul class="list">
<li>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</li>
<li>»Now, please enter a string with a length between 8 and 15 characters…«</li>
</ul>
</div>
</div>
</main>
<script>
'use strict';
const QUESTION_1 = 'Which Operators has the higher priority: * or + ?';
const SOLUTION_1 = '*';
// 1.Als ersten Schritt fragen Sie den Spieler nach seinem Namen, speichern diesen in eine Variable und begrüßen ihn mittels einer Alert-Box.
// 2.Stellen Sie dem Spieler die Frage, ob er sich fit genug fühlt, um gegen das dunkle JavaScript anzutreten. Es ist sinnvoll, bei der Frage die Antwortmöglichkeiten anzugeben.
// 3.Nun kann es losgehen. Stellen Sie den Spieler vor seine erste Aufgabe.
</script>
</body>
</html>

44
01_grundlagen/uebungen/#u21_schaltjahr.html Normal file
View File

@@ -0,0 +1,44 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 21: Die Sache mit dem Schaltjahr</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 21: Die Sache mit dem Schaltjahr</h2>
<p>
Vielleicht gehören Sie zu den Menschen, die »die Sache mit dem Schaltjahr« spannend finden. Und falls Sie es
nicht spannend finden, schreiben Sie einfach trotzdem ein Programm, das berechnet, ob es sich bei einem Jahr
um ein Schaltjahr handelt.
</p>
<p>Fragen Sie den Anwender nach dem gewünschten Jahr und speichern Sie die Eingabe in einer Variable.</p>
<p>
Falls das betreffende Jahr ein Schaltjahr ist, soll die Konsole z.B. den Satz »0000 ist ein Schaltjahr!«
ausgeben; ansonsten »0000 ist KEIN Schaltjahr« — mit dem eingegeben Jahr statt 0000.
</p>
<h4>Ein Jahr ist ein Schaltjahr, wenn das betreffende Jahr</h4>
<ul>
<li>ganzzahlig durch 400 teilbar ist.</li>
<li>nicht ganzzahlig durch 100, aber ganzzahlig durch 4 teilbar ist.</li>
</ul>
<div class="alert alert-warning">
Die Berechnung ist übrigens nicht zu 100 Prozent genau, aber für die nächsten 2000 Jahre passt es noch.
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</div>
</main>
<script>
'use strict';
const year = Number(prompt('please enter year:'));
const outputEl = document.querySelector('.output');
</script>
</body>
</html>

43
01_grundlagen/uebungen/#u22-23-if-else-quiz-2.html Normal file
View File

@@ -0,0 +1,43 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 22: Die dunkle Seite schlägt zurück …</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>Übung 22: Die dunkle Seite schlägt zurück …</h1>
<p>
Endlich setzt du deinen Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellst zwei neue
»Kampf-Sequenzen«:
</p>
<p>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</p>
<p>»Now, please enter a string with a length between 8 and 15 characters …«</p>
</div>
<div class="alert alert-primary">
<h2>Übung 23: Die dunkle Seite schlägt zurück…</h2>
<p>
Endlich setzen Sie Ihren Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellen zwei neue
»Kampf-Sequenzen«:
</p>
<ul class="list">
<li>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</li>
<li>»Now, please enter a string with a length between 8 and 15 characters…«</li>
</ul>
</div>
</main>
<script>
'use strict';
// const username = prompt('Wilkommen. Wie heißen Sie?');
/*
TODO: Your Code
*/
</script>
</body>
</html>

55
01_grundlagen/uebungen/#u24_leap-year-2.html Normal file
View File

@@ -0,0 +1,55 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 24: Die Sache mit dem Schaltjahr — Teil 2</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 24: Die Sache mit dem Schaltjahr — Teil 2</h2>
<p>
Verschaffe deinem Schaltjahr-Tool aus Lektion 10 ein Facelifting. Mithilfe der logischen Operatoren kannst
du einige <code>else</code> einsparen und den Code einfacher, kürzer und übersichtlicher gestalten.
</p>
<h4>Ein Jahr ist ein Schaltjahr, wenn das betreffende Jahr</h4>
<ul>
<li>ganzzahlig durch 400 teilbar ist.</li>
<li>nicht ganzzahlig durch 100, aber ganzzahlig durch 4 teilbar ist.</li>
</ul>
</div>
<div class="alert alert-warning">
Die Berechnung ist übrigens nicht zu 100 Prozent genau, aber für die nächsten 2000 Jahre passt es noch.
</div>
<div class="mb-3">
<label for="input-year" class="form-label">Jahr</label>
<input
type="number"
min="0"
step="1"
name="year"
class="form-control input-year"
id="input-year"
placeholder="insert year..." />
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const inputEl = document.querySelector('.input-year');
const outputEl = document.querySelector('.output');
inputEl.addEventListener('input', (e) => {
const val = e.currentTarget.value;
// TODO: check if it is a leap year or not.
});
</script>
</body>
</html>

46
01_grundlagen/uebungen/#u25_suche-im-heuhaufen.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 25: Wenn sie doch endlich mal jemand finden könnte… die Nadel im Heuhaufen…</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<div class="alert alert-primary">
<h1>Übung 25: Wenn sie doch endlich mal jemand finden könnte… die Nadel im Heuhaufen…</h1>
<p>
Die meisten Menschen verwenden die Redewendung nur symbolisch. Sie heute aber nicht, denn Sie erhalten von
uns den Auftrag, die Nadel wirklich zu finden!
</p>
<img
src="https://de.webmasters-europe.org/system/course_management/file/images/files/000/014/031/640-426/251d5925f63d895854646ece67dc3de4.jpg?1617534590"
alt=""
style="width: 300px"
class="img-thumbnail" />
<p>
Natürlich wollen wir Sie nicht wirklich im Heu wühlen lassen. Stattdessen erhalten Sie von uns einen
sauberen heulosen String. Das ist vermutlich auch angenehmer, falls Sie an Heuschnupfen leiden
</p>
<p>
Finden Sie nun heraus, an welcher Position sich die Nadel befindet, und loggen Sie diese Position in die
Konsole.
</p>
<blockquote class="blockquote">Übrigens: Zählen gilt nicht!</blockquote>
</div>
<div class="output alert alert-secondary"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const text =
'Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Nadel Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen';
</script>
</body>
</html>

32
01_grundlagen/uebungen/#u26_vornamen-auslesen.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>Übung 26: Wenn ein Vorname nicht reicht…</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 26: Wenn ein Vorname nicht reicht…</h1>
<p>
Vielleicht ist Ihnen aufgefallen, dass die Zerlegung nur richtig funktioniert, wenn der Name in der Form
'Vorname Nachname' vorliegt.
</p>
<p>
Sollte ein Nutzer einen zweiten Vornamen angeben, ordnet das Programm den zweiten Vorname dem Nachnamen zu.
Sie würden für den Namen Ladislaus Coolio Jones fälschlicherweise Folgendes erhalten:
</p>
<p>Korrigieren Sie die Ausgabe des folgenden Codes mithilfe von lastIndexOf</p>
</div>
</div>
</main>
<script>
'use strict';
const name = ' Ladislaus Coolio Jones '.trim();
</script>
</body>
</html>

BIN
01_grundlagen/uebungen/uebungen-19-26.zip Normal file
View File

Binary file not shown.

30
01_grundlagen/uebungen/uebungen-27-35/u27-zerlegter-heribert.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 27: Der zerlegte Heribert</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 my-3">
<h1>Übung 27: Der zerlegte Heribert</h1>
<ol>
<li>Entfernen Sie die überflüssigen Leerzeichen.</li>
<li>Zerlegen Sie den Namen in Vor- und Nachnamen.</li>
</ol>
<div class="alert alert-secondary my-3 output"></div>
</div>
</div>
</main>
<script>
'use strict';
const outputElement = document.querySelector('.output');
const name = 'Heribert Gold '.trim();
</script>
</body>
</html>

32
01_grundlagen/uebungen/uebungen-27-35/u28_transformierte-ladislaus.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>Übung 28: Der transformierte Ladislaus</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 my-3">
<h1>Übung 28: Der transformierte Ladislaus</h1>
<p>Und weil es so viel Freude macht:</p>
<p>
Speichern Sie den Namen »Ladislaus Jones« in einer Variable und kreieren Sie eine Ausgabe nach dem Schema
'<code>&lt;Nachname&gt;</code>, <code>&lt;Anfangsbuchstabe des Vornamens&gt;</code>.', also
<code>'Jones, L.'</code>.
</p>
</div>
<div class="alert alert-secondary output"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const name = 'Ladislaus Jones'.trim();
</script>
</body>
</html>

37
01_grundlagen/uebungen/uebungen-27-35/u29_fuehrende-nullen.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 29: Führende Nullen, Teil 1</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<div class="alert alert-primary my-5">
<h1>Übung 29: Führende Nullen, Teil 1</h1>
<p>
NerdWorld hat vor einiger Zeit sein Artikelnummer-Konzept geändert. Die neuen Artikelnummern beginnen stets
mit einer 0 — z.B. 0123. Leider gibt es bei den alten Nummern viele, die nicht über eine führenden 0
verfügen. Sie können aber auch nicht einfach pauschal eine 0 ergänzen, da manche der alten Nummern bereits
mit einer 0 beginnen. In dem Fall soll keine weitere 0 vorangestellt werden. Ergänzen Sie das folgende
Programmfragment, so dass es für jede Belegung der Variable itemNumber (Artikelnummer) die richtige Nummer
im neuen Konzept ausgibt. Verwenden Sie dazu den ternären Operator!
</p>
<ul class="list">
<li>123 =&gt; 0123</li>
<li>7 =&gt; 07</li>
<li>07 =&gt; 07</li>
<li>007 =&gt; 007</li>
</ul>
</div>
</div>
</main>
<script>
'use strict';
let itemNumber = '123';
</script>
</body>
</html>

48
01_grundlagen/uebungen/uebungen-27-35/u30_quiz-dark-side.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>Ü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';
</script>
</body>
</html>

27
01_grundlagen/uebungen/uebungen-27-35/u31_function-console.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 31: In die Konsole geloggt, Teil 2</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>Übung 31: In die Konsole geloggt, Teil 2</h1>
<p>Schreiben Sie eine Funktion, die Ihren Namen in der Konsole ausgibt.</p>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
/*
TODO: Schreibe eine Funktion, die deinen Namen in der Konsole ausgibt.
*/
</script>
</body>
</html>

29
01_grundlagen/uebungen/uebungen-27-35/u32-tranformed-ladislaus.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 32: Der transformierte Ladislaus, Teil 2</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 32: Der transformierte Ladislaus, Teil 2</h1>
<p>
Schreiben Sie eine Funktion <code>logTransformedName</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>
<p>ausgibt.</p>
</div>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>

113
01_grundlagen/uebungen/uebungen-27-35/u33_newsletter.html Normal file
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>

80
01_grundlagen/uebungen/uebungen-27-35/u34-tranformed-ladislaus.html Normal file
View File

@@ -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>

90
01_grundlagen/uebungen/uebungen-27-35/u35_reichweite-verbrauch.html Normal file
View File

@@ -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>