Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m307:learningunits:lu02:aufgaben:07 [2026/04/03 10:09] – vdemir
+++ de:modul:m307:learningunits:lu02:aufgaben:07 [2026/04/03 10:45] (aktuell) – vdemir
@@ Zeile 13: / Zeile 13: @@
 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.
-Unten finden Sie Quellcode zu einer Personenliste, die nachfolgende HTML-Ausgabe im Browserfenster generiert. Die Ausgabe wurde nach allen Namen, die den Buchstaben //M// enthalten.
+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 =====
-Ihr Auftrag besteht aus vier Teilaufgaben:
+Bei dieser Aufgabe geht es darum sich mit den verschiedenen Technologien wie HTML, CSS und JavaScript **in Kombination** vertraut zu machen.
-  - Code importieren + Inhalt testen
+Ihr Auftrag besteht aus Teilaufgaben:
-  - JSON-Daten ergänzen (mehr Datensätze)
-  - JSON-Daten erweiteren (weitere Hobbies)
-  - Webformular auf Erweiterungen anpassen
-==== Teilauftrag 1: Code importieren + Inhalt testen ====
+  - 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.
+  - Neues Filterfeld anlegen - 10 Min.
+==== Teil 1: Code importieren + Inhalt testen ====
   - Legen Sie im VS Code einen Ordner mit dem Namen lu02_L07 an.
-  - Copieren Sie die nachfolgenden vier {{:de:modul:m307:learningunits:lu02:aufgaben:lu02_l07.zip | komprimierten Zip-Files}} in diesen Ordner: data.json, script.js, styles.css und index.html.
+  - 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 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.
+  -
-  - **Aufgabe**
-    * Lassen Sie das nachfolgende Script laufen und analysieren die einzelnen Codeteile.
-  - **Aufgabe**
-    *Kommentieren Ihre Erkenntnisse im Code durch entsprechende HTML- oder JS-Codeeinträge.
-  - **Experiementiertips**
-    * Ergänzen Sie das JSON-File durch weitere Zeilen und lassen Sie es sich im Browser anzeigen.
-    * Ergänzen Sie das JSON-File durch weitere Subarrays, z.b. jeder Person erhält eine Adresse, oder die Lieblingslieder einer Person, ...
-    * Verändern Sie die HTML-Formatierung, sodass die Daten anders dargestellt werden. Versuchen Sie also Ihr Wissen aus dem 1. Lehrjahr hier anzuwenden.
-**index.html**
-<code html>
-<!DOCTYPE html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <title>Lernende Anzeige</title>
-</head>
-<body>
-<h1>Lernende</h1>
-<div id="ausgabe"></div>
-<script>
-  fetch("lernende2.json")
-    .then(response => response.json())
-    .then(data => {
-    //
-    const ausgabe = document.getElementById("ausgabe");
-    for (let i = 0; i < data.lernende.length; i++) {
-      const lernenderDiv = document.createElement("div");
-      const ueberschrift = document.createElement("h2");
-      ueberschrift.textContent = "Lernende/r " + (i + 1);
-      //
-      const idP = document.createElement("p");
-      idP.textContent = "ID: " + data.lernende[i].id;
-      //
-      const nameP = document.createElement("p");
-      nameP.textContent = "Name: " + data.lernende[i].name + " " + data.lernende[i].nachname;
-      //
-      const hobbyTitel = document.createElement("p");
-      hobbyTitel.textContent = "Hobbies:";
-      //
-      const hobbyListe = document.createElement("ul");
-      //
-      for (let j = 0; j < data.lernende[i].hobbies.length; j++) {
-        const hobbyItem = document.createElement("li");
-        hobbyItem.textContent = data.lernende[i].hobbies[j];
-        hobbyListe.appendChild(hobbyItem);
-      }
-      //
-      lernenderDiv.appendChild(ueberschrift);
-      lernenderDiv.appendChild(idP);
-      lernenderDiv.appendChild(nameP);
-      lernenderDiv.appendChild(hobbyTitel);
-      lernenderDiv.appendChild(hobbyListe);
-      //
-      ausgabe.appendChild(lernenderDiv);
-      }
-    })
-    .catch(err => {
-      console.error("Fehler beim Laden:", err);
-  });
-</script>
-</body>
-</html>
-</code>
 ===== Lösungen =====
-[[de:modul:m307:learningunits:lu02:loesungen:06|LU01.L06]]
+[[de:modul:m307:learningunits:lu02:loesungen:07|LU01.L07]]
 ----