Bilder-Workshop

Die Aufgabenstellung wird in diesem Workshop problemorientiert anhand von Videos dargestellt. Versuchen Sie, die gezeigte Funktionalität mithilfe der zur Verfügung stehenden Materialien zu erzeugen. Sollten Sie Schwierigkeiten haben, einen Ansatz zu finden, wenden Sie sich bitte an Frau Kurz.

Als Anhang der Abgabe auf Ilias und im Materialordner finden Sie einen Zip-Ordner mit verschiedenen Dateien:

  • Jeweils eine HTML- und CSS-Datei mit einem grundsätzlichen Aufbau
  • Einen Bilderordner mit unterschiedlichen Tierbildern, deren Dateiname aus der Tierart, einem Unterstrich und der Anzahl der darauf abgebildeten Tiere besteht
  • Eine JS-Datei mit vorgefertigten Funktionen, die während des Workshops ausgefüllt werden müssen

Videos

Einzelausgabe

Mehrfachausgabe

Arrayausgabe

Zusatzaufgabe

Ausführliche Aufgabenstellung

Schauen Sie sich diese Dateien bitte genau an und erstellen folgende Funktionalität:

  1. Funktion Einzelausgabe()
    Über den Button „Einzelausgabe“ soll ein ausgesuchtes Bild in dem vorhandenen, einzelnen Bildcontainer angezeigt werden. Dazu können Nutzende über die vorhandenen Select-Elemente eine Anzahl und eine Tierart auswählen. Nutzen Sie diese Angaben, um den Bilderpfad des entsprechenden Bildes zusammenzubauen und weisen Sie diesen dem einzelnen Bildcontainer zu. Denken Sie beim Zusammensetzen des Pfades auch an den Bilderordner und die Dateiendung.
    Kontrollieren Sie über console.log, ob der Pfad korrekt zusammengesetzt ist.
  2. Funktion Mehrfachausgabe()
    Über den Button „Alle ausgeben“ sollen alle Bilder der von den Nutzenden im Select-Element ausgewählten Tierart ausgegeben werden. Bauen Sie auch hierfür wieder den Pfad zusammen und weisen Sie diese den vier Bildcontainern zu. Nutzen Sie dafür eine for-Schleife, die automatisch jedem Bild den richtigen Bildcontainer zuweist. Achten Sie dabei auf die IDs der Bildcontainer.
    Erstellen Sie zusätzlich eine Ausgabe im Paragraphen-Element „textausgabe2“, welche Tierart ausgewählt wurde.
  3. Funktion Arrayausgabe()
    In der Funktion ist bereits ein Array mit unterschiedlichen Zeichenketten vorhanden. Nutzen Sie eine Schleife, um alle Namen aus diesem Array innerhalb des div-Containers „arrayinhalt“ auszugeben.

Zusatzaufgaben, wenn noch Zeit und Energie vorhanden:

Versuchen Sie innerhalb der Funktion Einzelausgabe() jeweils auf den Text des aktuell ausgewählten option-Elementes von Anzahl und Tierart zuzugreifen und diese Werte im Paragraphen-Element „textausgabe1“ auszugeben (Stichworte: options[], selectedIndex).

Greifen Sie in der Funktion ZeigeAuswahl() auf die Position des ausgewählten Wertes im option-Array und auf den Text des entsprechenden option-Elementes zu. Nutzen Sie dafür die Parameter der Funktion. Denken Sie daran, die entsprechenden Werte im Funktionsaufruf zu übergeben.

Anmerkungen

  • HTML- und CSS-Dateien müssen nicht verändert werden, dürfen aber natürlich angepasst werden, wenn Sie möchten
  • Mit „Variable = Wert“ wird die Variable mit dem Wert belegt. Mit „Variable += Wert“ wird der Wert zu dem bereits vorhandenen Inhalt hinzugefügt
  • Auch die ID eines Elementes ist eine Zeichenkette, die zusammengesetzt werden kann