Situationsaufgabe: HTML/CSS/JS Frontend
Frontend-Entwicklung kommt im FIAE AP Teil 2 als ergänzende Teilaufgabe – selten als alleiniges Hauptthema, aber regelmäßig kombiniert mit API-Design oder Datenbankaufgaben. Die Prüfung testet, ob du ein Formular semantisch korrekt in HTML bauen, mit CSS layouten und mit JavaScript interaktiv machen kannst – inklusive Validierung und asynchroner Datenkommunikation (fetch/AJAX). Diese Lektion arbeitet eine vollständige Frontend-Situationsaufgabe durch.
1) Das Szenario
Betrieb: Die TaskFlow GmbH (aus der API-Lektion) braucht ein Web-Frontend für ihre Projektmanagement-Plattform. Du sollst die Seite „Neues Projekt erstellen" implementieren.
Anforderungen:
- Formular mit Feldern: Projektname (Pflicht, max. 100 Zeichen), Beschreibung (optional, Textarea), Startdatum (Datum-Picker, Pflicht), Enddatum (optional, muss nach Startdatum liegen)
- Client-seitige Validierung vor dem Absenden: Pflichtfelder prüfen, Datum-Reihenfolge validieren, Fehlermeldungen anzeigen
- Bei gültigem Formular: asynchrone POST-Anfrage an
/api/projekte(kein Neuladen der Seite) - Responsives Layout: auf mobilen Geräten einspaltig, ab 600px zweispaltig
- Erfolgsmeldung/Fehlermeldung nach API-Response anzeigen
2) Teilaufgaben mit Musterlösungen
3) HTML-Semantik – die wichtigsten Elemente
| Element | Semantik | Wann nutzen |
|---|---|---|
<main> | Haupt-Content der Seite | Einmal pro Seite – der primäre Inhalt |
<section> | Thematischer Abschnitt | Inhaltlich zusammengehörige Blöcke mit Überschrift |
<article> | Eigenständiger Inhalt | Blog-Posts, Produkt-Karten, Nachrichten |
<nav> | Navigation | Hauptmenü, Breadcrumbs, Tab-Navigation |
<label for="id"> | Verknüpft mit Eingabefeld | Immer! Klick auf Label fokussiert das Input |
<fieldset> + <legend> | Grupp von Formularfeldern | Formulare mit mehreren Sektionen |
<button type="submit"> | Formular absenden | Nicht <input type="submit"> – button ist flexibler |
4) Häufige JavaScript-Fehler in Prüfungsaufgaben
- innerHTML statt textContent für User-Input.
element.innerHTML = userInputist XSS-anfällig. Für Text:element.textContent = userInput. - Event-Listener per onclick im HTML. Schlechte Praxis (Vermischung von Struktur und Verhalten). Immer:
button.addEventListener('click', handler). - Formular-Standardverhalten nicht verhindern.
event.preventDefault()vergessen → Seite lädt neu beim Absenden, fetch()-Aufruf hat keine Chance. - fetch() ohne Error-Handling.
.catch()odertry/catchbei async/await immer! Netzwerkfehler werden sonst stumm verschluckt. - DOM-Abfrage vor DOMContentLoaded. Script im
<head>ohnedeferoder DOMContentLoaded-Listener → Elemente noch nicht vorhanden → null.
Zusammenfassung
Frontend-Aufgaben kombinieren immer: (1) semantisches HTML (label, fieldset, button – keine div-Suppe), (2) CSS-Layout mit Flexbox/Grid und Media Queries für Responsivität, (3) JS-Validierung mit preventDefault() und gezielten Fehlermeldungen, (4) asynchrone Kommunikation mit fetch() und async/await. XSS-sicher: textContent statt innerHTML für dynamischen Text. Event-Listener immer per addEventListener().
Verwandte Lektionen: Situationsaufgabe API · Situationsaufgabe Secure Coding · Fachgespräch vorbereiten · und mehrWeitere relevante LektionenHTML-GrundlagenCSS Flexbox & GridJavaScript DOM