104 lines
3.5 KiB
HTML
104 lines
3.5 KiB
HTML
<!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>
|