Kurswahl für die Oberstufe

Mache dich nun mit verschiedenen Formularelementen vertraut. Deine nächste Aufgabe ist es, ein Formular zur Wahl der Oberstufenkurse zu entwerfen. Entscheide dich für ein Profil und lege ein passendes Formular mit Auswahllisten zu den Prüfungsfächern an. Das sollte dann so aussehen:

Ziel dieses Programms ist es, zu überprüfen, ob jeweils ein Fach gewählt wurde. Hilfe gibt's wie immer bei SelfHTML.

  • Um die Formularelemente in Javascript ansprechen zu können, musst du sie mit einem Namen versehen: <select name="P1" .... > 
  • Mit diesem Namen kannst du dann in Javascript abfragen, was ausgewählt wurde:
    vAuswahl = document.Kurswahl.P1.selectedIndex;
    Die Funktion gibt dann die Nummer des gewählten Eintrags zurück, die Nummerierung beginnt mit 0, der Wert -1 bedeutet, dass noch keine Auswahl erfolgt ist.

A) Schreibe eine Funktion Auswahl_pruefen(), die feststellt, ob jeweils ein Fach ausgewählt wurde und dann entsprechende Rückmeldung gibt. Die Funktion soll aufgerufen werden, wenn der Fertig-Button geklickt wird. Du kannst das Programm die Meldung zunächst mit alert() Anweisungen erfolgen lassen.

Eine elegantere Lösung wäre es, Text per Javascript in einen Absatz zu schreiben:

  • Ein Absatz mit einer ID (Identifikation) versehen werden, damit er später angesprochen werden kann:
    <p id="Meldung"><p>
  • Dem Absatz kann dann ein Inhalt zugewiesen werden:  
    document.getElementById("Meldung").innerHTML = "Du musst noch das P1-Fach wählen.";

B) Passe dein Programm entsprechend an (du kannst die Rückmeldung jetzt auch per HTML passend gestalten). Wenn mehrere Fächer nicht gewählt wurden, muss die Rückmeldung über alle Fächer gegeben werden.

Überlege, wie du es schaffst, auch dann eine Rückmeldung zu geben, wenn alle Fächer gewählt wurden. 

Zusätzlich wäre es noch hilfreich, wenn angezeigt würde, in welchem Bereich noch eine Eingabe fehlt. In diesem Formular ist das natürlich recht übersichtlich und so nicht erforderlich, bei einer vollständigen Kurswahl sähe das schon anders aus. Die Rückmeldung könnte dann so aussehen:

Dazu bedienen wir uns der gleichen Methode des Zugriffs auf Elemente des Dokuments wie bei der vorherigen Version und ändern eine andere Eigenschaft, nämlich den Rand. Um den Zugriff auf die Formularlemente zu erhalten, müssen wir sie ebenso wie bei B) mit einer Id (Identifikation) kennzeichnen, z.B. das P1-Fach mit:
<select name="P1" id="P1" size="4"> Dabei sind Name und Id identisch, müssen aber einzeln deklariert werden. Der Name ist beim Absenden des Formulars zur Auswertung auf einem Server relevant, für die Gestaltung der Seite erfolgt der Zugriff über die Id.

Wenn das Element entsprechend gekennzeichnet ist, kann mit document.getElementById("P1").style.border = "5px solid green"; ein solider Rahmen in der Farbe Grün angelegt werden. Nähere Informationen zur Gestaltung des Randes gibt es bei SelfHTML.

C) Ergänze nun die Funktion Auswahl_pruefen() so, dass es die nicht gewählten Fächer rot und die gewählten Fächer grün umrandet.

Die etwas fortgeschrittenere Gestaltung von Internetseiten Seite wird mit Stylesheets (CSS) vorgenommen.

Clemens-August-Gymnasium

Bahnhofstraße 53
49661 Cloppenburg

Tel. 0 44 71 / 94 81 0
Fax 0 44 71 / 94 81 50

E-Mail: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!

 - Impressum -

Umweltschule

(Bewerbung  als Umweltschule läuft)

 

Europaschule200

Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Ok