2026-06-25 10:35:17 +02:00
parent ccff1b73d6
commit db2ec6838a
7 changed files with 170 additions and 3 deletions
--- a/01_grundlagen/uebungen/u37-bus-stations.html
+++ b/01_grundlagen/uebungen/u37-bus-stations.html
@@ -0,0 +1,103 @@
+<!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',
+      ];
+
+      // Finde die Position der gewünschten Zielhaltestelle Broadway heraus.
+      console.log(LINE_W.indexOf('Broadway')); //=> 3
+
+      // Entferne alle Haltestellen nach Broadway aus dem Array.
+      const lineCopy = [...LINE_W];
+      console.log(lineCopy.splice(lineCopy.indexOf('Broadway') + 1, lineCopy.length - lineCopy.indexOf('Broadway')));
+      console.log(lineCopy);
+
+      const calcStartStopPlan = (start, destination, withStart = false) => {
+        const posStart = withStart ? LINE_W.indexOf(start) : LINE_W.indexOf(start) + 1;
+        const posEnd = LINE_W.indexOf(destination);
+        // Guard
+        if (posStart === -1 || posEnd === -1) return [];
+
+        return LINE_W.slice(posStart, posEnd + 1);
+      };
+
+      const schedule = calcStartStopPlan('Astoria-Ditmars Blvd', 'Broadway').join(' --- ');
+      // const schedule = calcStartStopPlan('Astoria-Ditmars Blvd', 'Broadway', true).join(' --- ');
+
+      outputEl.textContent = schedule;
+    </script>
+  </body>
+</html>