Webanwendungen: Aufgabensatz 3

Prüfungsvorbereitung · Teil Webanwendungen · 25 BE · Bearbeitungszeit etwa 60 Minuten

So arbeitest du wie in der Prüfung:

Stell dir einen Wecker auf 60 Minuten.
Schreib deine Antworten und deinen Code auf Papier.
Öffne die Tipps und Lösungen erst danach.

Die Stufen leicht, mittel und schwer entsprechen grob den Anforderungsbereichen I, II und III. Dieser Satz orientiert sich an den Aufgabenformen der Prüfungen 2026.

Ausgangslage

Der Wanderverein Lahnaue entwickelt die Webanwendung „WegWeiser“. Sie zeigt Wanderwege der Region, lässt sich nach Länge filtern und soll später die Lieblingswege der Nutzerinnen und Nutzer speichern.

Material

Material 1: Daten und Anzeige (wege.js, Auszug)

const WEGE = [
  { id: 1, name: 'Uferweg Lahnaue', region: 'Lahntal', laenge: 12.5, hoehenmeter: 120, rundweg: true },
  { id: 2, name: 'Burgenpfad Felsheim', region: 'Taunus', laenge: 8, hoehenmeter: 410, rundweg: false },
  { id: 3, name: 'Auenrunde', region: 'Lahntal', laenge: 5.5, hoehenmeter: 60, rundweg: true },
  { id: 4, name: 'Kraterpfad Hohenberg', region: 'Vogelsberg', laenge: 15, hoehenmeter: 520, rundweg: true }
];

function zeigeWege(liste) {
  const ziel = document.getElementById('wegeDiv');
  let html = '';
  for (const weg of liste) {
    const art = weg.rundweg ? 'Rundweg' : 'Strecke';
    html += '<article class="weg">';
    html += '<h3>' + weg.name + '</h3>';
    html += '<p>' + weg.laenge + ' km, ' + weg.hoehenmeter + ' Hm, ' + art + '</p>';
    html += '</article>';
  }
  if (liste.length === 0) {
    html = '<p>Keine passenden Wege gefunden.</p>';
  }
  ziel.innerHTML = html;
}

Material 2: Filter (wege.js, Auszug; filterKnopf und maxInput wurden vorher mit getElementById gefunden)

filterKnopf.addEventListener('click', () => {
  const maxKm = Number(maxInput.value);
  const passend = WEGE.filter((w) => w.laenge <= maxKm && w.rundweg);
  zeigeWege(passend);
});

Material 3: JSON-Text vom Server (enthält Fehler, siehe Aufgabe 3.7)

[
  { "id": 5, "name": 'Schlossrunde', "laenge": 7, "rundweg": true },
  { "id": 6, name: "Talweg", "laenge": 9.5, "rundweg": false },
]

Aufgaben

3.1 Eine Konstante, die wächst? (2 BE) mittel

Neue Wege sollen mit WEGE.push(neuerWeg) ergänzt werden. Eine Mitschülerin meint, das gehe nicht, weil WEGE mit const deklariert ist.

Erkläre, ob sie recht hat.

Erwartungshorizont

3.2 Ablauf beschreiben (3 BE) mittel

Beschreibe Ablauf und Zweck des Quelltexts in Material 2 in eigenen Worten. Gib an, welche Wege angezeigt werden, wenn im Eingabefeld 10 steht.

Tipp 1

Gehe die Bedingung im filter für jeden der vier Wege durch. Beide Teile müssen wahr sein (&&).

Erwartungshorizont

3.3 Erzeugtes HTML (4 BE) mittel

Die Funktion zeigeWege wird mit einer Liste aufgerufen, die genau die ersten beiden Wege aus WEGE enthält.

Entwickle den HTML-Code, der danach im Element mit der ID wegeDiv steht. Gib außerdem an, was dort steht, wenn die Funktion mit einer leeren Liste aufgerufen wird.

Tipp 1

weg.rundweg ? 'Rundweg' : 'Strecke' ist eine Kurzform von if … else: Ist rundweg wahr, bekommt art den ersten Wert, sonst den zweiten.

Erwartungshorizont

3.4 Einen Weg finden (3 BE) mittel

Implementiere die Funktion findeWeg(id), die aus WEGE den Weg mit der passenden id zurückgibt. Gibt es keinen solchen Weg, soll null zurückgegeben werden.

Tipp 1

Sobald der passende Weg gefunden ist, kannst du ihn sofort mit return zurückgeben. Erst nach der Schleife steht fest, dass es keinen gibt.

Erwartungshorizont

3.5 Ein Vorschlag zum Kürzen (3 BE) schwer

Ein Teamkollege schlägt vor, in zeigeWege auf die Variable html zu verzichten und jede Zeile direkt an das Element anzuhängen, zum Beispiel ziel.innerHTML += '<article class="weg">';.

Beurteile diesen Vorschlag.

Tipp 1

Was macht der Browser mit einem HTML-Text, in dem ein Element geöffnet, aber nicht geschlossen wird? Probiere es im Spielplatz aus, aber erst nach deiner Antwort.

Tipp 2

a.innerHTML += x bedeutet: den bisherigen Inhalt als Text auslesen, x anhängen und alles neu einlesen. Was passiert dabei mit Elementen, die schon da waren?

Erwartungshorizont

3.6 Nach Länge sortieren (4 BE) mittel

Implementiere die Funktion sortiereNachLaenge(liste, aufsteigend). Sie gibt eine neue Liste zurück, die nach der Länge sortiert ist: aufsteigend, wenn aufsteigend den Wert true hat, sonst absteigend. Die übergebene Liste soll nicht verändert werden.

Tipp 1

sort sortiert die Liste, auf der es aufgerufen wird. Lege deshalb zuerst eine Kopie an, zum Beispiel mit [...liste]. Siehe Sortieren.

Tipp 2

Die Vergleichsfunktion (a, b) => a.laenge - b.laenge sortiert aufsteigend. Was musst du für absteigend tauschen?

Erwartungshorizont

3.7 Daten vom Server (3 BE) mittel

Neue Wege sollen künftig als JSON vom Server geladen werden. Beim ersten Test meldet der Browser beim Einlesen von Material 3 einen Fehler.

Überprüfe den JSON-Text in Material 3. Gib die Fehler an und korrigiere den Text.

Tipp 1

JSON ist strenger als JavaScript. Achte auf Anführungszeichen bei Namen und Texten und auf Kommas. Siehe JSON.

Erwartungshorizont

3.8 Lieblingswege speichern (3 BE) schwer

Nutzerinnen und Nutzer sollen Wege als „Lieblingswege“ markieren können. Im ersten Test speichert die Anwendung die Markierungen nur in einer Variablen. Nach dem Neuladen der Seite sind sie weg. Außerdem sollen die Lieblingswege auf dem Handy und am Laptop gleich sein.

Erläutere zwei Möglichkeiten, die Markierungen dauerhaft zu speichern, und beurteile, welche die Anforderungen erfüllt.

Tipp 1

Eine Möglichkeit liegt im Browser selbst, die andere auf einem Server. Welche davon kennt das andere Gerät?

Erwartungshorizont

Auswertung

Teilaufgabe	3.1	3.2	3.3	3.4	3.5	3.6	3.7	3.8	Summe
BE	2	3	4	3	3	4	3	3	25

Zähle deine Punkte mit den Erwartungshorizonten zusammen. Wo du Punkte verloren hast, wiederhole das Thema über die Links in den Tipps oder in der Checkliste.

Quellen

Aufgaben, Situation, Quelltexte und Erwartungshorizont sind selbst erstellt, im Stil der Abschlussprüfung Fachoberschule Informationstechnik. Verein und Wanderwege sind erfunden.