From 12bae87f911a32b79be26de0c9f04cc8899d863a Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Fri, 25 Sep 2026 13:12:16 +0200
Subject: [PATCH]

---
 .../unterricht/tag15/01_fetch-api/index.html  |  37 +++++++
 .../tag15/02_fetch-api-async-await/index.html |  88 +++++++++++++++
 .../tag15/03_json-stringify-parse/index.html  | 102 ++++++++++++++++++
 .../03_json-stringify-parse/tableGrades.json  |  26 +++++
 02_advanced/unterricht/tag15/meeting.md       |   6 ++
 5 files changed, 259 insertions(+)
 create mode 100644 02_advanced/unterricht/tag15/02_fetch-api-async-await/index.html
 create mode 100644 02_advanced/unterricht/tag15/03_json-stringify-parse/index.html
 create mode 100644 02_advanced/unterricht/tag15/03_json-stringify-parse/tableGrades.json
 create mode 100644 02_advanced/unterricht/tag15/meeting.md

diff --git a/02_advanced/unterricht/tag15/01_fetch-api/index.html b/02_advanced/unterricht/tag15/01_fetch-api/index.html
index e69de29..e0f09eb 100644
--- a/02_advanced/unterricht/tag15/01_fetch-api/index.html
+++ b/02_advanced/unterricht/tag15/01_fetch-api/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fetch API</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Fetch API</h1>
+        <p>
+          Die <a href="https://developer.mozilla.org/de/docs/Web/API/Fetch_API">Fetch</a> API bietet eine Schnittstelle
+          zum Abrufen von Ressourcen (einschließlich über das Netzwerk). Sie ist ein leistungsfähigerer und flexiblerer
+          Ersatz für <code>XMLHttpRequest</code>.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      fetch('https://dummyjson.com/posts')
+        .then((response) => {
+          console.log(response); // HTTP-Response Object
+          return response.json(); // HTTP-Responce Body -> ReadStream wird ansynchron verarbeitet -> Promise
+        })
+        .then((data) => {
+          console.log(data); // JSON als JS-Objekte geparsed
+          console.log(data.posts[0].title); // => "His mother had always taught him"
+        })
+        .catch((err) => {
+          console.error('Fetch operation error: ', err);
+        });
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag15/02_fetch-api-async-await/index.html b/02_advanced/unterricht/tag15/02_fetch-api-async-await/index.html
new file mode 100644
index 0000000..f58a1bd
--- /dev/null
+++ b/02_advanced/unterricht/tag15/02_fetch-api-async-await/index.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fetch API</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Fetch API</h1>
+        <p>
+          Die <a href="https://developer.mozilla.org/de/docs/Web/API/Fetch_API">Fetch</a> API bietet eine Schnittstelle
+          zum Abrufen von Ressourcen (einschließlich über das Netzwerk). Sie ist ein leistungsfähigerer und flexiblerer
+          Ersatz für <code>XMLHttpRequest</code>.
+        </p>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      // Funktions mit "async process"
+      const getPosts = async () => {
+        try {
+          const response = await fetch('https://dummyjson.com/posts');
+          if (!response.ok) {
+            throw new Error('HTTP-Reponse Error');
+          }
+
+          const data = await response.json();
+
+          return data; // Rückgabe ist async -> Promise
+        } catch (error) {
+          console.error('Fetch operation error: ', error);
+          return error;
+        }
+
+        // console.log(data);
+      };
+
+      getPosts()
+        .then((data) => {
+          console.log(data);
+          createArticles(data.posts);
+        })
+        .catch((err) => console.error(err));
+
+      const createArticles = (posts) => {
+        posts.forEach((post) => {
+          const { title, body: text, tags } = post;
+
+          let html = `<div class="card mb-3">
+          <article>
+            <div class="card-body">
+              <h5 class="card-title">${title}</h5>
+              <p class="card-text">
+                ${text}
+              </p>
+            </div>
+            <div class="card-footer">
+              <span class="badge text-bg-dark me-1">${tags.join('</span><span class="badge text-bg-dark me-1">')}</span>
+            </div>
+          </article>
+        </div>`;
+
+          outputEl.insertAdjacentHTML('beforeend', html);
+        });
+      };
+
+      // fetch('https://dummyjson.com/posts')
+      //   .then((response) => {
+      //     console.log(response); // HTTP-Response Object
+      //     return response.json(); // HTTP-Responce Body -> ReadStream wird ansynchron verarbeitet -> Promise
+      //   })
+      //   .then((data) => {
+      //     console.log(data); // JSON als JS-Objekte geparsed
+      //     console.log(data.posts[0].title); // => "His mother had always taught him"
+      //   })
+      //   .catch((err) => {
+      //     console.error('Fetch operation error: ', err);
+      //   });
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag15/03_json-stringify-parse/index.html b/02_advanced/unterricht/tag15/03_json-stringify-parse/index.html
new file mode 100644
index 0000000..4a0f36c
--- /dev/null
+++ b/02_advanced/unterricht/tag15/03_json-stringify-parse/index.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JSON.stringify() & JSON.parse()</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>JSON.stringify() & JSON.parse()</h1>
+        <p>
+          Im Gegensatz zu den meisten globalen Objekten ist
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/JSON"> JSON</a> kein
+          Konstruktor. Sie können es nicht mit dem new Operator verwenden oder das JSON Objekt als Funktion aufrufen.
+          Alle Eigenschaften und Methoden von JSON sind statisch (genau wie das Math Objekt).
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const gradesTableObj = [
+        {
+          name: 'Anna',
+
+          scores: [
+            {
+              name: 'Mathematics',
+              score: 85,
+            },
+            {
+              name: 'English',
+              score: 92,
+            },
+            {
+              name: 'Biology',
+              score: 78,
+            },
+          ],
+        },
+        {
+          name: 'Ben',
+          scores: [
+            {
+              name: 'Mathematics',
+              score: 76,
+            },
+            {
+              name: 'English',
+              score: 95,
+            },
+            {
+              name: 'Biology',
+              score: 89,
+            },
+          ],
+        },
+        {
+          name: 'Clara',
+          scores: [
+            {
+              name: 'Mathematics',
+              score: 85,
+            },
+            {
+              name: 'English',
+              score: 92,
+            },
+            {
+              name: 'Biology',
+              score: 78,
+            },
+          ],
+        },
+      ];
+
+      const person = {
+        name: 'John Doe',
+        age: 30,
+        profession: 'Web Developer',
+      };
+
+      // Convert JavaScript object to JSON string
+      const jsonString = JSON.stringify(person);
+      console.log(jsonString);
+      // => {"name":"John Doe","age":30,"profession":"Web Developer"}
+
+      console.log(JSON.stringify(gradesTableObj, null, 2));
+
+      try {
+        // Convert JSON string back to JavaScript object
+        const parsedPerson = JSON.parse(jsonString);
+        console.log(parsedPerson.name); // => John Doe
+        console.log(parsedPerson.age); // => 30
+      } catch (error) {
+        console.error('Invalid JSON:', error);
+      }
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag15/03_json-stringify-parse/tableGrades.json b/02_advanced/unterricht/tag15/03_json-stringify-parse/tableGrades.json
new file mode 100644
index 0000000..19a12b4
--- /dev/null
+++ b/02_advanced/unterricht/tag15/03_json-stringify-parse/tableGrades.json
@@ -0,0 +1,26 @@
+[
+  {
+    "name": "Anna",
+    "scores": [
+      { "name": "Mathematics", "score": 85 },
+      { "name": "English", "score": 92 },
+      { "name": "Biology", "score": 78 }
+    ]
+  },
+  {
+    "name": "Ben",
+    "scores": [
+      { "name": "Mathematics", "score": 76 },
+      { "name": "English", "score": 95 },
+      { "name": "Biology", "score": 89 }
+    ]
+  },
+  {
+    "name": "Clara",
+    "scores": [
+      { "name": "Mathematics", "score": 85 },
+      { "name": "English", "score": 92 },
+      { "name": "Biology", "score": 78 }
+    ]
+  }
+]
diff --git a/02_advanced/unterricht/tag15/meeting.md b/02_advanced/unterricht/tag15/meeting.md
new file mode 100644
index 0000000..3e206c8
--- /dev/null
+++ b/02_advanced/unterricht/tag15/meeting.md
@@ -0,0 +1,6 @@
+# Meeting Fr. 25.09.2026
+
+- [ ] Benjamin 14:10 - 14:20
+- [ ] Stefan 14:20 - 14:30
+- [ ] Florian 14:30 - 14:40
+- [ ] Christian 14:40 - 14:50
\ No newline at end of file