Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m307:learningunits:lu03:aufgaben:10 [2026/05/27 10:07] – ↷ Seite von de:modul:m307:learningunits:lu02:aufgaben:10 nach de:modul:m307:learningunits:lu03:aufgaben:10 verschoben vdemir
+++ de:modul:m307:learningunits:lu03:aufgaben:10 [2026/05/27 10:07] (aktuell) – gelöscht vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU02.A10 - JSON-Daten im Webformularen ausgeben ======
-===== Rahmenbedingungen =====
-  * Sozialform: Einzelarbeit
-  * Hilfsmittel: Openbooks
-  * Zeit: 30 Minuten
-  * Erwartetes Resultat:
-    * JavaScript-File, dass eine JSON-Datei einliest und ausgibt.
-    * HTML-File, welches den Inhalt der JSON-Datei in der Browser-Konsole ausgibt.
-    * JSON-Daten können nach Vorgaben gefiltert werden.
-===== Ausgangslage =====
-In der Aufgabe 6 dieses Kapitels haben Sie JSON-Daten im Browserfenster dynamisch ausgeben können. Bisher war diese Ausgabe in Rohform vorhanden, d.h. mit wenig bis keiner HTML-Formatierung.
-Nachfolgend sehen Sie die HTML-Ausgabe einer Personenliste, bei der die Ausgabe nach allen Namen, die den Buchstaben //M// enthalten, gefiltert wurde. Den Quellcode für diese kleine Applikation können Sie unten bei der Aufgabengstellung herunterladen.
-{{:de:modul:m307:learningunits:lu02:aufgaben:lu03_a07_1.png?400|HTML-Formular eine JSON-Personenliste}}
-===== Auftrag =====
-Bei dieser Aufgabe geht es darum sich mit den verschiedenen Technologien wie HTML, CSS und JavaScript **in Kombination** vertraut zu machen.
-Ihr Auftrag besteht aus Teilaufgaben:
-  - Code importieren + Inhalt testen - 10 Min.
-  - JSON-Daten ergänzen (mehr Datensätze) - 5 Min.
-  - JSON-Daten erweiteren (weitere Hobbies) - 5 Min.
-  - Scripte auf JSON-Erweiterungen anpassen - 10 Min.
-==== Teil 1: Code importieren + Inhalt testen ====
-  - Legen Sie im VS Code einen Ordner mit dem Namen lu02_L07 an.
-  - Copieren Sie die den Inhalt dieses nachfolgenden {{:de:modul:m307:learningunits:lu02:aufgaben:lu02_l07.zip | komprimierten Zip-Files}} in diesen Ordner: data.json, script.js, styles.css und index.html.
-  - Führen Sie das File //index.html// im Browser aus bzw. lassen Sie sich die Liste im Browser-Fenster ausgeben.
-  - Filtern Sie die Liste nach //Namen// und Hobbies.
-==== Teil 2: JSON-Daten ergänzen ====
-  - Aktuell sind ca. 10 Datensätze im JSON-File. Legen Sie weitere mindestens 10 Datensätze (Personen an).
-  - Testen Sie die Änderung im Browserfenster (anzeigen + filtern).
-==== Teil 3: JSON-Daten erweiteren ====
-  - Aktuell sind 4 Hobbies vorhanden: Lesen, Fussball, Malen, Schwimmen.
-  - Überschreiben Sie die einige Datensätze Ihrer Wahl mit den neuen Hobbies //Gamen// und //Reisen//.
-  - Hinweis: Die neuen Hobbies werden zwar angezeigt, man kann aber aktuell nicht nach diesen Filtern, weil die Filter noch nicht angepasst wurden.
-==== Teil 4:  Scripte auf JSON-Erweiterungen anpassen ====
-  - Damit wir nach den Hobbies filtern können, müssen wir uns //index.html// anpassen.
-  - Ergänzen Sie also im entsprechenden div des HTML-Formulars die Liste der Checkboxen mit den neuen Hobbies //Gamen// und //Reisen//.
-  - Testen Sie die Filter-Erweitung: die Filter-Liste sollte nun die zwei neuen Hobbies //Gamen// und //Reisen// enthalten.
-  - Testen Sie die Funktion des Filters: Die Liste sollten nun auch nach den Hobbies //Gamen// und //Reisen// gefiltert werden können.
-  -
-===== Lösungen =====
-[[de:modul:m307:learningunits:lu02:loesungen:07|LU01.L07]]
-----
-[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir