This commit is contained in:
Philippe Torrel
2026-09-15 14:44:47 +02:00
parent 06904e2f3c
commit 99007ffc89
16 changed files with 582 additions and 0 deletions
@@ -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>
@@ -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 23: Von guten und bösen Eingaben</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 23: Von guten und bösen Eingaben</h2>
<ol class="list">
<li>
Nimm Angaben zu Vorname, Nachname, Alter und dem liebsten Heißgetränk eines Anwenders entgegen und
speichere diese in Variablen.
</li>
<li>
Diese Eingaben sollst du nun folgendermaßen validieren:
<ul class="list">
<li>Vorname und Nachname müssen zwischen 2 und 100 Zeichen lang sein.</li>
<li>Das Alter muss eine Zahl unter 150 sein.</li>
<li>Die Eingabe für das Getränk muss c (coffee) oder t (tea) sein.</li>
</ul>
</li>
</ol>
</div>
</div>
</main>
<script>
'use strict';
// Aufgabe
const firstName = prompt('Wilkommen. Wie heißen Sie mit Vornamen?');
const lastName = prompt('Und mit Nachnamen?');
const age = Number('Wie alt sind Sie?');
const favoriteHotDrink = prompt('Und was ist ihr liebstes Heißgetränk? (tee | kaffee)');
</script>
</body>
</html>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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.8/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>
@@ -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>Ü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>
@@ -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>
@@ -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>
Binary file not shown.
Binary file not shown.
@@ -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>JS - Funktionsdefinition</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>JS - Funktionsdefinition</h1>
</div>
</main>
<script>
'use strict';
// Funktionsdefinition mit "function" statement
function showNewsLetter() {
console.log('Dear Customer,\n');
console.log(
`We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
);
console.log('Happy nerding,\nYour NerdWorld Team');
}
// Funktionsausdruck - (function expression) vor ES6 (ECMAScript 2015)
var showNewsLetter2 = function () {
console.log('Dear Customer,\n');
console.log(
`We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
);
console.log('Happy nerding,\nYour NerdWorld Team');
};
// Seit ES6 (2015) Funktionsausdruck mit arrow - (arrow function expression)
const showNewsLetter3 = () => {
console.log('Dear Customer,\n');
console.log(
`We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
);
console.log('Happy nerding,\nYour NerdWorld Team');
};
// Funktionsaufruf
showNewsLetter();
console.log('=========');
showNewsLetter2();
console.log('=========');
showNewsLetter3();
</script>
</body>
</html>
@@ -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>JS - Funktionsausdruck (function expression) ohne hochziehen</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>JS - Funktionsausdruck (function expression) ohne hochziehen</h1>
</div>
</main>
<script>
'use strict';
// nichtHochgezogen(); // Uncaught ReferenceError: Cannot access 'nichtHochgezogen' before initialization
// Funktionsausdruck mit arrow (ES6) ========================
const nichtHochgezogen = () => {
console.log('"Function expression" wird nicht hochgezogen.');
};
nichtHochgezogen(); // => "Function expression" wird nicht hochgezogen.
// Funktionsausdruck vor ES6 ================================
// nichtHochgezogen2(); // => Uncaught ReferenceError: Cannot access 'nichtHochgezogen' before initialization
var nichtHochgezogen2 = function () {
console.log('"Function expression" wird nicht hochgezogen.');
};
nichtHochgezogen2(); // => '"Function expression" wird nicht hochgezogen.'
// Funktiondefinition mit "function" - statement ============
hochgezogen(); // <---- FUNKTIONIERT - Funktion mit "function" wird vo dem Ausführen hochgezogen
function hochgezogen() {
console.log('"Functiondefinition" mit "function" eingeleitet bezitzt hochziehen (hoisting).');
}
hochgezogen();
</script>
</body>
</html>
@@ -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>Arrow expression (=>) vs. function expression (function)</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>Arrow expression (=>) vs. function expression (function)</h1>
<!-- button.btn.btn-dark.button-click{Click me} -->
<button class="btn btn-dark button-click">Click me</button>
</div>
</main>
<script>
'use strict';
const btn = document.querySelector('.button-click');
console.log(this); // => window
// Function expression "classic" -> "this" new reference to main Object
btn.addEventListener('click', function (e) {
console.log('event: ', e);
console.log('this: ', this); // => <button class="btn...">Click Me</button>
});
// Function expression with arrow -> "this" without new reference
btn.addEventListener('click', (e) => {
console.log('event: ', e);
console.log('e.currentTarget: ', e.currentTarget); // => <button class="btn...">Click Me</button>
console.log('this: ', this); // => window
});
//============================
const onMouseLeave = (e) => {
console.log('event: ', e);
console.log('e.currentTarget: ', e.currentTarget); // => <button class="btn...">Click Me</button>
const btn = e.currentTarget;
btn.textContent = 'Button (mouse left)';
console.log('this: ', this); // => window
};
// ... viel code dazwischen (oder verschiedene JS Dateien)....
btn.addEventListener('mouseleave', onMouseLeave); // => Funktionsreferenz
</script>
</body>
</html>