Webanwendungen: Aufgabensatz 2

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.

Ausgangslage

Die Stadtwerke Lahnaue bieten ein Kundenportal an. Dort sollen Kundinnen und Kunden ihren Stromzählerstand melden. Die Seite zeigt den zuletzt gemeldeten Stand an, prüft die Eingaben im Browser und schickt sie an das Skript melden.php auf dem Server.

Material

Material 1: HTML-Quelltext des Formulars (Auszug)

<form id="zaehlerForm" action="melden.php" method="post">
  <label for="nummer">Zählernummer:</label>
  <input type="text" id="nummer" name="nummer" placeholder="ZN-123456" required>

  <label for="alt">letzter Stand (kWh):</label>
  <input type="text" id="alt" name="alt" value="4210.5" readonly>

  <label for="neu">neuer Stand (kWh):</label>
  <input type="text" id="neu" name="neu" required>

  <button type="submit">Melden</button>
</form>
<p id="hinweis"></p>
<p id="verbrauch"></p>

Material 2: JavaScript-Quelltext (zaehler.js, mit defer eingebunden)

const formular = document.getElementById('zaehlerForm');              // (1)

formular.addEventListener('submit', (event) => {                      // (2)
  const nummer = document.getElementById('nummer').value.trim();
  const neu = parseFloat(document.getElementById('neu').value.replace(',', '.'));  // (3)
  const alt = parseFloat(document.getElementById('alt').value);
  const hinweis = document.getElementById('hinweis');

  if (!pruefeZaehlernummer(nummer) || isNaN(neu) || neu < alt) {       // (4)
    event.preventDefault();                                            // (5)
    hinweis.textContent = 'Bitte prüfe Zählernummer und neuen Stand.';
  }
});

Material 3: Format der Zählernummer

Eine Zählernummer beginnt mit den Großbuchstaben ZN, dann folgt ein Bindestrich, dann genau sechs Ziffern. Beispiel: ZN-104733.

Aufgaben

2.1 Webseite oder Webanwendung? (2 BE) leicht

Die Stadtwerke nennen ihr Kundenportal eine Webanwendung. Erläutere am Beispiel des Portals, was eine Webanwendung von einer Webseite unterscheidet, die nur Informationen anzeigt.

Erwartungshorizont

2.2 Wer macht was? (2 BE) leicht

Gib für das Melden eines Zählerstands je zwei Aufgaben an, die der Browser übernimmt, und zwei, die der Server übernimmt.

Erwartungshorizont

2.3 Attribute im Formular (3 BE) leicht

Beschreibe, wozu die Attribute for (im label), name und readonly in Material 1 dienen.

Erwartungshorizont

2.4 Code kommentieren (5 BE) mittel

Ergänze in Material 2 die Kommentare (1) bis (5). Beschreibe jeweils, was die Zeile bewirkt.

Tipp 1

Bei (3) stecken drei Schritte in einer Zeile: von innen nach außen lesen. Bei (4) jede der drei Teilbedingungen einzeln übersetzen.

Erwartungshorizont

2.5 Zählernummer prüfen (3 BE) mittel

Die Funktion pruefeZaehlernummer(nr) soll true zurückgeben, wenn nr dem Format in Material 3 entspricht, sonst false.

Implementiere die Funktion pruefeZaehlernummer(nr).

Tipp 1

Zerlege die Regel: Länge genau 9 Zeichen? Beginnt mit ZN-? Sind die letzten sechs Zeichen alle Ziffern?

Tipp 2

Ein einzelnes Zeichen ist eine Ziffer, wenn es zwischen '0' und '9' liegt. nr.slice(3) liefert alles ab dem vierten Zeichen.

Erwartungshorizont

2.6 Reicht die Prüfung im Browser? (3 BE) schwer

Ein Kollege meint: „Weil zaehler.js alle Eingaben prüft, muss melden.php nichts mehr prüfen.“

Nimm Stellung zu dieser Aussage.

Tipp 1

Wer hat die Kontrolle über den Browser und alles, was darin läuft? Gibt es Wege, Daten an melden.php zu schicken, ohne das Formular zu benutzen?

Erwartungshorizont

2.7 GET oder POST? (3 BE) mittel

Das Formular verwendet method="post".

Gib an, wie die Adresse aussähe, wenn das Formular mit method="get" die Werte ZN-104733, 4210.5 und 4522.9 abschicken würde. Begründe, warum POST hier die bessere Wahl ist.

Tipp 1

Bei GET hängt der Browser die Daten nach einem ? an die Adresse, als Paare name=wert, getrennt mit &. Siehe GET: Daten in der Adresse.

Erwartungshorizont

2.8 Verbrauch anzeigen (4 BE) schwer

Schon während der Eingabe des neuen Stands soll im Absatz verbrauch der Verbrauch seit der letzten Meldung erscheinen, auf eine Nachkommastelle gerundet. Beispiel für die Eingabe 4522,9:

Verbrauch seit der letzten Meldung: 312.4 kWh

Ist die Eingabe keine Zahl oder kleiner als der letzte Stand, erscheint stattdessen „Bitte einen Stand ab 4210.5 kWh eingeben.“ (mit dem jeweiligen letzten Stand).

Implementiere diese Erweiterung.

Tipp 1

Welches Ereignis tritt bei jeder Änderung in einem Eingabefeld ein? Siehe Ereignisse.

Tipp 2

Rechne einmal im Kopf nach, was 4522.9 - 4210.5 in JavaScript ergibt. Kommazahlen werden intern nicht immer genau gespeichert. Zum Runden für die Ausgabe gibt es toFixed.

Erwartungshorizont

Auswertung

Teilaufgabe	2.1	2.2	2.3	2.4	2.5	2.6	2.7	2.8	Summe
BE	2	2	3	5	3	3	3	4	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. Die Stadtwerke und alle Nummern sind erfunden.