Webanwendungen: Aufgabensatz 1

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. Deinen Code kannst du anschließend im Spielplatz ausprobieren.

Die Stufen leicht, mittel und schwer entsprechen grob den Anforderungsbereichen I, II und III.

Ausgangslage

Der Sportverein TV Lahnaue bietet im Herbst Kurse an. Mitglieder sollen auf einer Webseite sehen, welche Kurse es gibt und wo noch Plätze frei sind, und sich anmelden können. Ein erster Entwurf ist fertig (Material 1 bis 3).

Material

Material 1: HTML-Quelltext (kurse.html)

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Kursanmeldung TV Lahnaue</title>
  <link rel="stylesheet" href="kurse.css">
  <script src="kurse.js" defer></script>
</head>
<body>
  <h1>Kurse im Herbst</h1>
  <button id="nurFreie">Nur Kurse mit freien Plätzen</button>
  <div id="kursliste"></div>
  <h2>Anmeldung</h2>
  <form id="anmeldung">
    <label for="name">Name:</label>
    <input type="text" id="name" required>
    <label for="alter">Alter:</label>
    <input type="number" id="alter">
    <button type="submit">Anmelden</button>
  </form>
  <p id="meldung"></p>
</body>
</html>

Material 2: JavaScript-Quelltext (kurse.js)

const KURSE = [
  { nr: 101, titel: 'Yoga für Einsteiger', tag: 'Montag', plaetze: 4, preis: 30 },
  { nr: 102, titel: 'Volleyball', tag: 'Dienstag', plaetze: 0, preis: 25 },
  { nr: 103, titel: 'Klettern', tag: 'Donnerstag', plaetze: 2, preis: 45 },
  { nr: 104, titel: 'Laufgruppe', tag: 'Samstag', plaetze: 12, preis: 0 }
];

function zeigeKurse(liste) {
  const ziel = document.getElementById('kursliste');
  let html = '';
  for (const kurs of liste) {
    html += '<div class="kurs">';
    html += '<h3>' + kurs.titel + '</h3>';
    html += '<p>' + kurs.tag + ', ' + kurs.preis + ' €</p>';
    if (kurs.plaetze === 0) {
      html += '<p class="voll">ausgebucht</p>';
    } else {
      html += '<p>noch ' + kurs.plaetze + ' Plätze</p>';
    }
    html += '</div>';
  }
  ziel.innerHTML = html;
}

zeigeKurse(KURSE);

Material 3: CSS-Quelltext (kurse.css, Auszug)

.kurs {
  border: 1px solid #999999;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}
.voll {
  color: #b00020;
  font-weight: bold;
}

Aufgaben

1.1 HTML, CSS und JavaScript (3 BE) leicht

Beschreibe die Aufgaben von HTML, CSS und JavaScript in dieser Webanwendung. Gib zu jeder Sprache ein Beispiel aus Material 1 bis 3 an.

Erwartungshorizont

1.2 Wo entsteht die Kursliste? (3 BE) mittel

Im Entwurf werden alle Dateien vom Webserver unverändert ausgeliefert, und die Kursliste entsteht erst im Browser. Der Verein überlegt, die Kursliste stattdessen auf dem Server mit einem PHP-Skript erzeugen zu lassen.

Stelle die Schritte eines Seitenaufrufs für beide Varianten dar.

Tipp 1

Beginne in beiden Fällen mit der Anfrage des Browsers. Frage dich dann: Was schickt der Server zurück, und wer baut die Kurse in das HTML ein? Wiederholen: Statisch und dynamisch.

Erwartungshorizont

1.3 Erzeugtes HTML angeben (4 BE) mittel

Gib den HTML-Code an, den die Funktion zeigeKurse für die ersten beiden Kurse (Nummer 101 und 102) in das div-Element mit der ID kursliste schreibt.

Tipp 1

Gehe die Schleife für jeden Kurs einzeln durch und schreibe bei jeder Zeile html += … auf, was angehängt wird. Achte auf die Bedingung kurs.plaetze === 0.

Erwartungshorizont

1.4 Ansicht skizzieren (2 BE) leicht

Skizziere, wie der Browser den Kurs Volleyball darstellt. Berücksichtige Material 3.

Erwartungshorizont

1.5 Nur freie Kurse (4 BE) mittel

Bei einem Klick auf den Knopf „Nur Kurse mit freien Plätzen“ sollen nur noch die Kurse angezeigt werden, in denen mindestens ein Platz frei ist.

Implementiere diese Erweiterung in kurse.js. Nutze die vorhandene Funktion zeigeKurse.

Tipp 1

Du brauchst zwei Dinge: eine Ereignisbehandlung für den Knopf mit der ID nurFreie und eine neue Liste, die nur passende Kurse enthält.

Tipp 2

filter liefert eine neue Liste mit allen Einträgen, für die die Bedingung wahr ist. Siehe Filtern.

Erwartungshorizont

1.6 Gesamtpreis berechnen (4 BE) mittel

Mitglieder können mehrere Kurse auswählen. Die Funktion gesamtpreis(nummern) bekommt ein Array mit Kursnummern, zum Beispiel [101, 103], und gibt die Summe der Preise zurück (hier 75). Nummern, die es nicht gibt, werden ignoriert.

Implementiere die Funktion gesamtpreis(nummern).

Tipp 1

Durchlaufe die Nummern. Suche zu jeder Nummer den passenden Kurs in KURSE und addiere seinen Preis. Siehe Suchen.

Tipp 2

find liefert undefined, wenn nichts passt. Prüfe das, bevor du auf kurs.preis zugreifst.

Erwartungshorizont

1.7 Anmeldung prüfen (5 BE) schwer

Anmelden dürfen sich nur Personen von 16 bis 99 Jahren. Beim Absenden soll geprüft werden, ob ein Alter als ganze Zahl in diesem Bereich eingegeben wurde. Ist das nicht der Fall, soll das Absenden verhindert werden und im Absatz mit der ID meldung der Text „Bitte gib ein Alter von 16 bis 99 Jahren an.“ erscheinen.

Erkläre, an welchen Stellen du den Quelltext anpassen musst, und implementiere die Anpassungen.

Tipp 1

Welches Ereignis tritt beim Absenden eines Formulars ein, und an welchem Element? Wie verhinderst du, dass das Formular abgeschickt wird? Siehe Prüfen mit JavaScript.

Tipp 2

value liefert Text. Wandle ihn in eine Zahl um. Ein leeres Feld ergibt mit Number('') die Zahl 0, also ebenfalls ungültig.

Erwartungshorizont

Auswertung

Teilaufgabe	1.1	1.2	1.3	1.4	1.5	1.6	1.7	Summe
BE	3	3	4	2	4	4	5	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. Der Verein ist erfunden.