Das Team

Schreiben Sie ein Javascript-Programm, welches die Mitglieder eines Teams in einer dynamisch erstellten Tabelle wie folgt ausgibt!
Name
Geschlecht
Geburtsjahr
Harry
m
1999
Elli
w
2000
Martin
m
1998
usw.


  1. Die Einträge für die Männer werden in blauer und die Einträge für die Frauen in roter Schrift angezeigt.
  2. Alle Texte auf der Seite sollen zentriert ausgegeben werden.
  3. Die Eingaben werden beendet durch die Eingabe des Wortes "Ende" bei der Namenseingabe.
Hinweise:
  • Verwenden Sie ein fehlerfreie HTML-Vorlage mit dem richtigen Zeichensatz, meta/author-Tag, title usw.!
  • Die HTML-Seite ohne Javascript soll bereits enthalten:
    • das table-Tag,
    • die Kopfzeile der Tabelle mit Beschriftung!
  • Für die Tabellen-Überschriften werden th-Tags verwendet!
  • Das script-Tag wird innerhalb des table-Tags plaziert!
  • Verwenden Sie den Befehl document.write für die Ausgaben!
  • Schreiben Sie eine Schleife, welche die Zeilen mit den tr-Tags erzeugt!
  • Sie benötigen für die Erstellung einer solchen Team-Tabelle jeweils drei Eingaben pro Tabellenzeile: Name, Geschlecht und Geburtsjahr!
  • Da Sie nicht wissen, wie viele Einträge vorzunehmen sind, müssen Sie sich eine Abbruchbedingung überlegen, wie z.B. die Eingabe von "Ende" bei der Eingabe des Namens o.ä.!
  • Die Eingaben werden in Variablen zwischengespeichert!
  • Für die Verwendung verschiedener Farben müssen Sie eine Bedingung prüfen und entsprechend verzweigen!
  • Zentrieren Sie die Texte und die Tabelle (Tipp: table/margin auto)!

Erweiterungen

  • Eine weitere Eingabe könnte eine Überschrift enthalten, z.B. "Rugbyteam 2016".
  • Für die Überschrift verwenden Sie einen Platzhalter, d.h. ein div-Tag mit einer id an der Position der späteren Überschrift.
    • Sie verwenden für die Ausgabe der Überschrift den Befehl document.getElementById("MeineId").innerHTML=...
  • Verwenden Sie eine leichte Transparenz, so dass der Hintergrund der gesamten Seite leicht durch die Tabelle scheint.
  • Ändern Sie das Aussehen der Tabelle. Anregungen finden Sie im Internet bei der Suche nach "css table generator"
  • Zeichnen Sie ein Struktogramm Ihres Programms!

Bewertung

Je mehr der Anweisungen Sie korrekt anwenden und "zum Laufen bringen", desto besser ist Ihre Note.
  • Eine 6 haben Sie sich erarbeitet, wenn Sie gar nichts tun.
    D.h. auch Abwesenheit bei Krankheit mit fehlender unaufgeforderter Nachlieferung entspricht einer 6.
  • Eine 5 haben Sie sich verdient, wenn erkennbar ist, dass Sie den Arbeitsauftrag verstanden haben, aber Ihnen noch die handwerklichen Fähigkeiten fehlen, die Arbeit korrekt umzusetzen.
  • Eine 4 haben Sie sich verdient, wenn Sie eine dynamische Tabelle ausgeben können.
  • Eine 3 haben Sie sich verdient, wenn Sie es schaffen, zusätzlich die Eingaben für die Teammitglieder zu tätigen und korrekt in der Tabelle auszugeben.
  • Eine 2 haben Sie sich verdient, wenn Sie meine obigen Hinweise berücksichtigt und größtenteils realisiert haben.
  • Für die Erreichung einer 1 sollten Sie zusätzlich mindestens einen Punkt in den angeregten Erweiterungen abgearbeitet haben.