133 lines
4.5 KiB
HTML
133 lines
4.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',
|
|
];
|
|
|
|
// Position von Broadway finden und die Kurzstrecke ausschneiden.
|
|
|
|
// Finde die Position der gewünschten Zielhaltestelle Broadway heraus.
|
|
const destinationIndex = LINE_W.indexOf('Broadway');
|
|
|
|
// Entferne alle Haltestellen nach Broadway aus dem Array.
|
|
const shortTrip = LINE_W.slice(0, destinationIndex + 1);
|
|
|
|
console.log(shortTrip); // => ['Astoria-Ditmars Blvd', 'Astoria Blvd', '30 Av', 'Broadway']
|
|
|
|
const cuttedStations = [...LINE_W].splice(0, destinationIndex + 1);
|
|
console.log('cuttedStations: ', cuttedStations);
|
|
|
|
// Ohne zweite Angabe beginnt die Fahrt an der ersten Haltestelle.
|
|
function getStations(destinationStation, startStation = LINE_W[0]) {
|
|
const startIndex = LINE_W.indexOf(startStation);
|
|
const endIndex = LINE_W.indexOf(destinationStation);
|
|
|
|
// Guard
|
|
if (startIndex === -1 || endIndex === -1) {
|
|
return [];
|
|
}
|
|
|
|
// Auch Fahrten in die Gegenrichtung sind möglich.
|
|
if (startIndex > endIndex) {
|
|
return LINE_W.slice(endIndex, startIndex + 1).reverse();
|
|
}
|
|
|
|
return LINE_W.slice(startIndex, endIndex + 1);
|
|
}
|
|
|
|
const stationsFromStart = getStations('Broadway');
|
|
const stationsBetween = getStations('Broadway', 'Astoria Blvd');
|
|
|
|
console.log('Position von Broadway:', destinationIndex);
|
|
console.log('Kurzstrecke:', shortTrip);
|
|
console.log('Ab der ersten Haltestelle:', stationsFromStart);
|
|
console.log('Mit eigener Starthaltestelle:', stationsBetween);
|
|
|
|
outputEl.style.whiteSpace = 'pre-line';
|
|
outputEl.textContent = `Position von Broadway (Index): ${destinationIndex}
|
|
|
|
Kurzstrecke bis Broadway:
|
|
${shortTrip.join(' → ')}
|
|
|
|
Funktion mit Standardstart:
|
|
${stationsFromStart.join(' → ')}
|
|
|
|
Funktion mit eigener Starthaltestelle:
|
|
${stationsBetween.join(' → ')}`;
|
|
</script>
|
|
</body>
|
|
</html>
|