Eingabefelder und Auswahllisten

01 - Aufgabe 1 04 - Aufgabe 4
02 - Aufgabe 2 05 - Aufgabe 5
03 - Aufgabe 3 06 - Aufgabe 6

 

Erstelle die praktischen Aufgaben in den Ordner "CLISS1\Aufgaben\04\" und erstelle für jede Aufgabe einen neuen Unterordner. Antworte auf die Fragen in einer neuen Webseite die du in den Ordner "CLISS1\Fragen\04\" speicherst.

01

Aufgabe 1

  1. Praktische Aufgabe: Erstelle eine Webseite mit den drei Eingabefeldern Zahl1, Zahl2 und Summe und der Schaltfläche Addieren. Beim Klicken auf die Schaltfläche soll der Wert der Eingabefelder Zahl1 und Zahl2 addiert werden und in das Eingabefeld Summe geschrieben werden. Wenn eines der beiden Eingabefelder leer ist oder keine Zahl beinhaltet, dann soll mittels Meldungsfenster eine Fehlermeldung angezeigt werden und das Eingabefeld Summe soll geleert werden.
  2. Erweitere die Webseite um die Schaltflächen Subtraktion, Multiplikation und Division. Welche zusätzliche Kontrolle muss man für die Grundrechenart Division programmieren?

02

Aufgabe 2

Praktische Aufgabe: Erstelle eine Webseite mit zwei Eingabefeldern, einer Schaltfläche und einem DIV Container zur Ausgabe. Das Ganze soll ungefähr so aussehen:

Untitled-1.jpg

Der Benutzer soll im ersten Eingabefeld eine Zahl eingeben die einer Distanz in Metern entspricht. In das zweite Eingabefeld gibt er eine Einheit ein, in die er die Distanz umrechnen will. Die erlaubten Einheiten sind: millimeter, zentimeter, dezimeter und kilometer. Alle Einheiten müssen in Kleinbuchstaben geschrieben sein. Beim Klicken auf die Schaltfläche soll dann die Distanz in die entsprechende Einheit umgerechnet werden und in dem Ausgabe-Container angezeigt werden.

Wenn der Benutzer eines der beiden Eingabefelder leer lässt, im ersten Eingabefeld keine Zahl eingibt oder eine unerlaubte Einheit eingibt, dann soll der Ausgabe-Container rot gefärbt werden und der Inhalt soll entfernt werden.

Untitled-2.jpg

03

Aufgabe 3

Praktische Aufgabe: Benutze die Webseite aus Aufgabe 2 als Vorlage. Verändere sie dann so um, dass das zweite Eingabefeld durch eine Auswahlliste ersetzt wird.

04

Aufgabe 4

Praktische Aufgabe: Erstelle eine Webseite, die es dem Benutzer erlaubt eine Tabelle seiner Schulkameraden zusammenzustellen. Die Webseite besteht aus zwei Teilen:

  1. Ein Formular mit einem Eingabefeld erlaubt es den Namen des Schulkameraden einzugeben. Über eine Schaltfläche kann der Schulkamerad in die Tabelle hinzugefügt werden.
  2. Eine Tabelle zeigt die Schulkameraden an, ein Schulkamerad pro Zeile.

Wenn der Benutzer auf die Schaltfläche klickt, muss zuerst kontrolliert werden ob das Eingabefeld nicht leer ist. Dann soll der Schulkamerad der Tabelle hinzugefügt werden und das Eingabefeld soll geleert werden.

Die fertige Webseite könnte z.B. folgendermaßen aussehen:

 

tabelleMitInnerHTML.PNG

05

Aufgabe 5

Praktische Aufgabe: Erweitere die Webseite aus Aufgabe 4 so, dass der Benutzer nicht nur den Namen des Schulkameraden eingeben kann sondern auch:

  1. sein Geschlecht in einer Auswahlliste auswählen kann
  2. sein Alter eingeben kann
  3. seine E-Mail eingeben kann

Folgende Kontrollen müssen durchgeführt werden:

  1. der Name darf nicht leer sein
  2. das Alter darf nicht leer sein und muss eine Zahl sein (zusätzliche Kontrollen?)
  3. die E-Mail darf nicht leer sein

Die Informationen in der Tabelle müssen folgendermaßen dargestellt werden:

  1. sein Name muss links bündig angezeigt werden
  2. sein Geschlecht muss in Form eines Bildes dargestellt werden (z.B. mit diesen Bildern)
  3. sein Alter muss rechtsbündig angezeigt werden. Die Zahl soll rot sein wenn er minderjährig ist und grün sein wenn er volljährig ist
  4. seine E-Mail muss ein E-Mail Link sein

06

Aufgabe 6

Praktische Aufgabe: Erweitere die Webseite aus Aufgabe 5 so, dass über der Tabelle folgende Statistiken angezeigt werden:

  1. Anzahl an Schulkameraden in der Tabelle
  2. Durchschnittsalter
  3. Anzahl an Jungen
  4. Anzahl an Mädchen
Sign In