2026-09-17 14:38:37 +02:00
parent 1e045985be
commit 67d5a1dc16
10 changed files with 506 additions and 0 deletions
@@ -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>Übung optional 02: 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>Übung 02 optional: 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>
@@ -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>Übung 39: Stadt, Land, Fluss</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 39: Stadt, Land, Fluss</h1>
+        <p>
+          Bei dem bekannten deutschen Quiz-Spiel »Stadt, Land, Fluss« müssen die Spieler zu bestimmten Kategorien Wörter
+          finden, die mit einem bestimmten Buchstaben beginnen. Jeder schreibt die Wörter für sich alleine auf. Sobald
+          einer der Spieler für jede Kategorie ein Wort gefunden hat, ruft er »Stop« und alle müssen das Aufschreiben
+          einstellen. Dann wird verglichen. Mehrfach gefundene Wörter werden gestrichen, alle anderen erhalten je nach
+          Spielregel und Variante Punkte.
+        </p>
+        <p>
+          Bei einer Variante des Spiels ist zusätzlich die Wortlänge ausschlaggebend. Das längste Wort bringt dabei die
+          meisten Punkte. Natürlich möchte niemand tatsächlich die Buchstaben der Wörter zählen. Dafür gibt es
+          schließlich JS.
+        </p>
+        <p>
+          Schreiben Sie eine Funktion, die Wörter einer Kategorie nach Länge sortiert. Das längste Wort soll dabei vorne
+          stehen.
+        </p>
+        <div class="outputA alert alert-secondary"></div>
+        <div class="outputB alert alert-secondary"></div>
+        <div class="outputC alert alert-secondary"></div>
+      </div>
+    </main>
+
+    <script>
+      'use strict';
+
+      // Variablen Ausgabe
+      const outputElA = document.querySelector('.outputA');
+      const outputElB = document.querySelector('.outputB');
+      const outputElC = document.querySelector('.outputC');
+
+      // Variablen
+      const cities = ['Barcelona', 'Basel', 'Belgrade', 'Berlin', 'Budapest'];
+      const countries = ['Belgium', 'Bulgaria', 'Brazil', 'Bolivia', 'Bosnia and Herzegovina'];
+      const rivers = ['Bode', 'Brahmaputra', 'Beuvron', 'Black River', 'Belaja'];
+
+      // Sortieren nach Länge
+
+      // TODO: do it
+    </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 40: Lückentext zu map</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 40: Lückentext zu map</h1>
+        <p>
+          Wir wollen Sie bei der ersten Übung zu <strong>map</strong> nicht gleich ins kalte Wasser werfen. Stattdessen
+          haben wir einen kleinen Lückentext vorbereitet, bei dem Sie nur wenig ergänzen müssen. Ersetzen Sie die
+          Kommentare <code>/* ??? */</code> durch den richtigen Code, um das angegebene Ergebnis zu erzielen.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      let results;
+      let inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+      //double
+      results = inputs.map();
+      console.log(results); // => [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
+
+      //squares
+      results = inputs.map();
+
+      console.log(results); // => [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]
+      //
+    </script>
+  </body>
+</html>
@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 41: Der transformierte Ladislaus, Teil 4</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 41: Der transformierte Ladislaus, Teil 4</h1>
+          <p>
+            Passen Sie die Funktion transformName aus Übung 34 so an, dass sie beliebig viele Vornamen (als Array)
+            verwerten kann.
+          </p>
+          <p>Zum Beispiel: <code>'L. C. B. Jones'</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">Vornamen</label>
+                <div class="input-group">
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="firstname"
+                    id="input-firstname"
+                    placeholder="Bitte mehrere Vornamen getrennt hinzufügen" />
+                </div>
+
+                <div class="tags mt-2"></div>
+              </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="my-3">
+                <!-- <input type="submit" value="Transform name" class="btn btn-dark input-transform" /> -->
+
+                <button type="submit" class="btn btn-dark button-transform">Transform name</button>
+              </div>
+            </div>
+          </div>
+        </form>
+
+        <div class="alert alert-secondary">
+          <h3 class="mt-2">Transformierter Name:</h3>
+          <div class="output"></div>
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const formTransformEl = document.querySelector('.form-transform');
+      const intputFirstname = formTransformEl.querySelector('input[name="firstname"]');
+
+      const inputLastname = formTransformEl.querySelector('input[name="lastname"]');
+      const outputEl = document.querySelector('.output');
+
+      // Übung 03
+      const transformName = (firstNames = [], lastName) => {
+        /* TODO: do it */
+      };
+
+      formTransformEl.addEventListener('submit', (e) => {
+        e.preventDefault();
+
+        const firstNames = intputFirstname.value.trim().split(' ');
+        const lastName = inputLastname.value.trim();
+
+        outputEl.textContent = transformName(firstNames, lastName);
+      });
+
+      outputEl.textContent = transformName(['Ladislaus', 'Coolio', 'Barry'], 'Jones');
+    </script>
+  </body>
+</html>
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 42: Friedemann Friese</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 42: Friedemann Friese</h1>
+          <p>
+            Ferdinand Füller mag Brettspiele von Friedemann Friese. Filtern Sie nur die Spiele aus der angegebenen Liste
+            der Brettspiele heraus, die mit dem Buchstaben F beginnen.
+          </p>
+          <p>Ersetzen Sie dazu die Kommentare <code>/* ??? */</code> durch den richtigen Code.</p>
+        </div>
+        <div class="output alert alert-secondary"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+      const outputEl = document.querySelector('.output');
+
+      const videogames = ['Far Cry', 'Among Us'];
+
+      const boardgames = [
+        'Caverna',
+        'Puerto Rico', //
+        'Agricola',
+        'Black Friday',
+        'Funny Friends',
+        'Fauna',
+        'Eclipse',
+        'Codenames',
+        'Dominion',
+        'Fairy Tale',
+        'few time',
+        'Fast Flowing Forest Fellers',
+        'Fearsome Floors',
+      ];
+
+      const boardgamesStartingWithF = boardgames.filter((name) => {
+        /* TODO: do it */
+      });
+
+      console.log(boardgamesStartingWithF); //=> ['Funny Friends', 'Fauna', 'Fairy Tale', 'Fast Flowing Forest Fellers', 'Fearsome Floors']
+    </script>
+  </body>
+</html>
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 43: Lückentext zu filter</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 43: Lückentext zu filter</h1>
+          <p>
+            Auch zu <code>filter</code> haben wir einen kleinen Lückentext vorbereitet. Ersetzen Sie wieder die
+            Kommentare <code>/* ??? */</code> durch den richtigen Code, um das angegebene Ergebnis zu erzielen.
+          </p>
+        </div>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+      const inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+      const names = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
+      const text = 'Hi this is a short text';
+
+      let results;
+      let result;
+
+      //1. even numbers
+
+      results = inputs.filter();
+
+      console.log(results); // => [2, 4, 6, 8, 10]
+
+      //2. names ending with letter 'e' or 'a'
+
+      results = names.filter();
+
+      console.log(results); // => [ 'Friedlinde', 'Tusnelda',
+
+      //3. words with at least three letters
+
+      const wordAr = text.split(' ');
+
+      result = wordAr.filter();
+
+      console.log(result); // => 'this short text'
+    </script>
+  </body>
+</html>
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 44: Quersumme berechnen</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 44: Quersumme berechnen</h1>
+          <p>
+            Schreibe eine Funktion <code>getDigitSum</code>, die die Quersumme einer übergebenen Zahl zurückgibt.
+            <strong>Hinweis:</strong> Die Quersumme ist die Summe aller Ziffern einer Zahl. <br /><strong>Tipp:</strong>
+            Verwenden Sie split('').
+          </p>
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const number = 4566;
+
+      const getDigitSum = (n) => {};
+
+      console.log(getDigitSum(4242)); //=> 12
+      console.log(getDigitSum('13')); //=> 4
+
+      //========
+    </script>
+  </body>
+</html>
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 45: Quersumme berechnen und Ergebnisse sortieren</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 45: Quersumme berechnen und Ergebnisse sortieren</h1>
+          <p>
+            Na, haben wir den Mathematiker in dir geweckt? Verwende die Funktion <code>getDigitSum</code> aus der
+            letzten Übung. Nutze die Funktion dieses Mal, um gleich ein ganzes Array von Zahlen nach ihrer Quersumme zu
+            sortieren.
+          </p>
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const numbers = [99, 5, 8, 12, 111, 123];
+
+      const getDigitSum = (n) => {};
+
+      const getSortedArrayByDigitSum = (numbers) => {};
+
+      console.log(getSortedArrayByDigitSum([4, 12])); //=> [12, 4]
+
+      console.log(getSortedArrayByDigitSum(numbers)); //=> [12, 111, 5, 123, 8, 99]
+
+      console.log(numbers);
+    </script>
+  </body>
+</html>
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array - ar.reduce()</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.reduce()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce">
+            ar.reduce()
+          </a>
+          - Die <strong>reduce()</strong>-Methode reduziert ein Array auf einen einzigen Wert, indem es jeweils zwei
+          Elemente (von links nach rechts) durch eine gegebene Funktion reduziert.
+        </p>
+        <div class="alert alert-warning">side-effect-free</div>
+
+        <div class="alert alert-secondary output"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+      (() => {
+        const outputEl = document.querySelector('.output');
+
+        const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
+
+        const names = [
+          'Florian', //
+          'Benjamin',
+          'Christian',
+          'Stefan',
+          'Philippe',
+          'Kaumon',
+        ];
+
+        const products = [
+          'Game of Thrones Wax Seal Coasters',
+          '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',
+        ];
+
+        const cartItemPrices = [9.99, 19.99, 5.99];
+
+        // Array Methode - ar.reduce((value1, value2 [, index] [, array]) => {...}, initialValue)
+
+        const totalPrice = cartItemPrices.reduce((a, b) => {
+          return a + b;
+        }); // => 35.7
+
+        console.log([1, 2, 3, 4, 5].reduce((n1, n2) => n1 + n2)); // => 15
+
+        console.log([5].reduce((n1, n2) => n1 + n2)); // => 5
+
+        // console.log([].reduce((n1, n2) => n1 + n2)); // => Uncaught TypeError: Reduce of empty array with no initial value
+
+        // reduce mit Initialwert (RECOMMENDED)
+        console.log([].reduce((n1, n2) => n1 + n2, 0)); // => 0
+
+        // =======
+        console.log([1, 5, 10].reduce((n1, n2) => Number(n1) + Number(n2), 10)); // => 26
+        console.log([1, 5, 10].reduce((sum, n) => sum + Number(n), 0)); // => 16
+
+        console.log('-------');
+        // Optionale Parameter von forEach ========================
+
+        // Array Methode - ar.names((value1, value2 [, index [, array] ]) => {}, initialValue)
+
+        names.reduce((str, name, idx, ar) => {
+          console.log(`String: ${str}, Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
+          return str + ' - ' + name;
+        }, '');
+      })();
+    </script>
+  </body>
+</html>