Übungen für die Sitzung am 29.04.21

Vorbereitung

Bitte laden Sie sich von Ilias 210429Start.zip herhunter. Dort finden Sie das Ausgangsmaterial für die Übungen.

Videotutorials

Bitte schauen Sie sich zunächst das Video "Zuweisungs- und Vergleichsoperatoren" an.
Anschließend die beiden Videoerklärungen zu "if/else-Bedingung" und "If/else Verschachtelung mit radio.checked" .

WICHTIG

Ich weiß, dass die folgenden Aufgaben nicht leicht sind. Bitte verzweiflen Sie nicht daran, wenn Sie nicht von alleine darauf kommen. Hätten wir ein Seminar bei Zoom gehabt, hätte ich Ihnen die Lösung auch gezeigt. Also erst einmal alleine darüber nachdenken und dann gerne die Ergebnisse anschauen und Zeile für Zeile nachvollziehen.

Versuchen Sie dann, eine vergleichbare eigene Lösung auf Ihre Webseite zu integrieren und nicht nur mit Copy&Paste zu arbeiten.

1. Aufgabe

  • Bitte schreiben Sie eine JS Funktion, die den ausgewählten Wert der Radiobuttonliste erkennt und lassen Sie nach Klick auf den Button einen entsprechenden Satz in ein <p> Tag schreiben. Z.B. Du bist zwischen 0 - 30 Jahre alt.
    Eine mögliche Lösung dazu finden Sie bei Ilias unter 210429RadioButtonCheck1.zip
  • Finden Sie nun eine Möglichkeit, dass sofort bei Klicken auf den Radiobutton die Ausgabe erfolgt.
    Eine mögliche Lösung dazu finden Sie bei Ilias unter 210429RadioButtonCheck2.zip

Videotutorials

Bitte schauen Sie sich das Video "Arrays" an.
Anschließend die beiden Videoerklärungen zu "Die for-Schleife" und "Die while-Schleife" .
Zum Schluss dann ein Anwendungsbeispiel in dem Video "Selektor GetElementsByName"

2. Aufgabe

Bitte ergänzen Sie Ihre JS Funktion um die Ausgabe aller möglichen Werte der Radiobuttonliste in einem Satz wie bspw. diesen: "Du hattest folgende Möglichkeiten: bis 30 Jahre, bis 60 Jahre, bis 100 Jahre,". Dazu können Sie als Vorlage das Anwendungsbeispiel aus dem Video verwenden und müssen dann eine Möglichkeit finden, den Ausgabesatz Stück für Stück aufzubauen. Sie können dazu das Attribut value der radio Button verwenden. Es ist nicht möglich, es in einem Ausgabeschritt zu realisieren, so wie in der 1. Aufgabe. Eine mögliche Lösung dazu finden Sie bei Ilias unter 210429RadioButtonCheck3.zip

Für alle, die noch ein wenig tüfteln möchten: Die Ausgabe in meinem Beispiel endet mit einem Komma, was natürlich nicht der deutschen Grammatik entspricht. Schaffen Sie es, dass der Satz grammatikalisch korrekt ausgegeben wird? :)

PS: in dem bisherigen Code hatte sich ein Fehler eingschlichen. Haben Sie ihn entdeckt? In diesem Beispielcode habe ich es korrigiert.

Arbeiten mit Checkboxes

Jetzt kommt eine weitere Übung zur Verwendung von Arrays. Checkboxen sind im Gegensatz zu Radiobutton und einer Selectbox so konzipiert, dass mehrere Optionen auswählbar sind. Sie stellen aslo eine MultipleChoice Funktionalität zur Verfügung, währenddessen die Radiobutton und Selectboxen eine SingleChoice Funktionalität bereitstellen. Integrieren Sie bitte eine Checkboxliste auf Ihrer Seite. Wenn Sie möchten, können Sie auch den vorbereiteten Code 210429CheckboxStart.zip von Ilias verwenden.

3. Aufgabe

Nun integrieren Sie eine Funktion, die die Optionen ausliest und ausgibt, so wie bei 2. Aufgabe. Z.B. This were your options: Bikes, Cars, Boats,
Anschließend soll in einer neuen Zeile eine Ausgabe der ausgewählten Optionen erfolgen. Z.B. You have Bikes,

Wichtig dazu: Sie können nur dann etwas auf ein Array pushen, wenn dieses bereits angelegt ist. Deshalb müssen Sie die Variable, die Sie deklarieren, um anschließend mit .push darauf zuzugreifen, wie so erzeugen: var arrayname = []; Andernfalles gibt es ein undefined auf der Konsole.

Eine mögliche Lösung dazu finden Sie bei Ilias unter210429CheckboxErgebnis.zip

Und wieder nur für die Tüftler:innen: Wie könnte eine grammatikalische korrekte Ausgabe generiert werden? Als Tipp: Sie können immer arrayname.length und die aktuelle Durchlauf-Position i miteinander abgleichen, um herauszufinden, wie viele Elemente noch im Array enthalten sind.