From c8a1f2d7f14f16ca241b52356fce28e117e740fa Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Mon, 29 Jun 2026 15:04:39 +0200
Subject: [PATCH]

---
 02_advanced/unterricht/tag11/01_objekte.html  |  34 +++
 .../unterricht/tag11/02_objekte-bsp.html      | 238 ++++++++++++++++++
 .../unterricht/tag11/03_objekte-mit-this.html | 143 +++++++++++
 .../03_schnittstellenformate/persons.json     |  14 ++
 .../03_schnittstellenformate/persons.xml      |  22 ++
 .../tag11/04_object-keys-values-entries.html  |  45 ++++
 6 files changed, 496 insertions(+)
 create mode 100644 02_advanced/unterricht/tag11/02_objekte-bsp.html
 create mode 100644 02_advanced/unterricht/tag11/03_objekte-mit-this.html
 create mode 100644 02_advanced/unterricht/tag11/03_schnittstellenformate/persons.json
 create mode 100644 02_advanced/unterricht/tag11/03_schnittstellenformate/persons.xml
 create mode 100644 02_advanced/unterricht/tag11/04_object-keys-values-entries.html
diff --git a/02_advanced/unterricht/tag11/01_objekte.html b/02_advanced/unterricht/tag11/01_objekte.html
index 1087979..32b8409 100644
--- a/02_advanced/unterricht/tag11/01_objekte.html
+++ b/02_advanced/unterricht/tag11/01_objekte.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Object - object</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://releases.jquery.com/git/jquery-git.slim.min.js"></script>
   </head>
   <body>
     <main>
@@ -88,6 +89,39 @@
       console.log(personObj.schiess());
 
       console.log(personObj.age); // => 45
+
+      // =============================
+
+      const cssProp = 'border';
+      const color = 'white';
+
+      const cssObj = {
+        'background-color': '#555',
+        'margin-top': '1rem',
+        border: '3px solid tomato',
+        // fontSize, // Uncaught ReferenceError: fontSize is not defined
+        // color: color,
+        color, // Kurzschreibweise seit ES6 - wenn Eigenschaft und Variable gleiche Bezeichnung besitzen
+      };
+
+      console.log(cssObj['background-color']); //=> '#555'
+      console.log(cssObj[cssProp]); //=> '3px solid tomato'
+
+      console.log(cssObj.color); //=> 'white'
+
+      // =========================
+
+      // document.querySelector('h1').style.color = cssObj.color;
+      // document.querySelector('h1').style.backgroundColor = cssObj['background-color'];
+      // document.querySelector('h1').style.padding = '1rem';
+      // document.querySelector('h1').style.border = cssObj['border'];
+
+      $('h1').css({
+        color: 'white',
+        backgroundColor: '#555',
+        padding: '1rem',
+        border: '3px solid tomato',
+      });
     </script>
   </body>
 </html>
diff --git a/02_advanced/unterricht/tag11/02_objekte-bsp.html b/02_advanced/unterricht/tag11/02_objekte-bsp.html
new file mode 100644
index 0000000..b617c48
--- /dev/null
+++ b/02_advanced/unterricht/tag11/02_objekte-bsp.html
@@ -0,0 +1,238 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Objekte in JS - Beispiele</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>Objekte in JS - Beispiele</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      // Beispiel aus openweathermap.org
+      const weatherObj = {
+        coord: {
+          lon: -122.08,
+          lat: 37.39,
+        },
+        weather: [
+          {
+            id: 800,
+            main: 'Clear', // weatherObj.weather[0].main
+            description: 'clear sky',
+            icon: '01d',
+          },
+          {
+            id: 700,
+            main: 'Cloudy',
+            description: 'not clear at all',
+            icon: '02d',
+          },
+        ],
+        base: 'stations',
+        main: {
+          temp: 282.55,
+          feels_like: 281.86,
+          temp_min: 280.37,
+          temp_max: 284.26,
+          pressure: 1023,
+          humidity: 100,
+        },
+        visibility: 10000,
+        wind: {
+          speed: 1.5,
+          deg: 350,
+        },
+        clouds: {
+          all: 1,
+        },
+        dt: 1560350645,
+        sys: {
+          type: 1,
+          id: 5122,
+          message: 0.0139,
+          country: 'US',
+          sunrise: 1560343627,
+          sunset: 1560396563,
+        },
+        timezone: -25200,
+        id: 420006353,
+        name: 'Mountain View',
+        cod: 200,
+      };
+
+      outputEl.textContent = weatherObj.name; // => 'Mountain View',
+      outputEl.textContent = weatherObj.weather[1].main; // => 'Cloudy View',
+
+      // Beispiel aus randomuser.me
+      const persons = {
+        results: [
+          {
+            gender: 'female',
+            name: {
+              title: 'Miss',
+              first: 'Krista',
+              last: 'Eich',
+            },
+            location: {
+              street: {
+                number: 2104,
+                name: 'Gartenweg',
+              },
+              city: 'Hohenmölsen',
+              state: 'Mecklenburg-Vorpommern',
+              country: 'Germany',
+              postcode: 76996,
+              coordinates: {
+                latitude: '-50.2839',
+                longitude: '23.5386',
+              },
+              timezone: {
+                offset: '-5:00',
+                description: 'Eastern Time (US & Canada), Bogota, Lima',
+              },
+            },
+            email: 'krista.eich@example.com',
+            login: {
+              uuid: '2443567b-47db-4aa9-8e9e-ba05e3f9fcf3',
+              username: 'organictiger749',
+              password: 'trucking',
+              salt: 'pD1RPPKa',
+              md5: '8a0e13c2df6030ce471c452e51103ad7',
+              sha1: '8f1c4ec24644911fcdb4a4a5c8a2b95509dcdb89',
+              sha256: 'f0a41ee857651c590c0e06091e80d7e3dfa91837b555920aaff7c0e4526e5505',
+            },
+            dob: {
+              date: '1983-06-14T00:47:36.586Z',
+              age: 42,
+            },
+            registered: {
+              date: '2002-04-04T14:49:39.948Z',
+              age: 23,
+            },
+            phone: '0929-5979262',
+            cell: '0178-4888764',
+            id: {
+              name: 'SVNR',
+              value: '53 130683 E 544',
+            },
+            picture: {
+              large: 'https://randomuser.me/api/portraits/women/35.jpg',
+              medium: 'https://randomuser.me/api/portraits/med/women/35.jpg',
+              thumbnail: 'https://randomuser.me/api/portraits/thumb/women/35.jpg',
+            },
+            nat: 'DE',
+          },
+          {
+            gender: 'female',
+            name: {
+              title: 'Miss',
+              first: 'Florence',
+              last: 'Haarhuis',
+            },
+            location: {
+              street: {
+                number: 5383,
+                name: 'Braamhoven',
+              },
+              city: 'Exmorra', // persons.results[1].location.city
+              state: 'Flevoland',
+              country: 'Netherlands',
+              postcode: '8914 YU',
+              coordinates: {
+                latitude: '22.1469',
+                longitude: '-103.2551',
+              },
+              timezone: {
+                offset: '-11:00',
+                description: 'Midway Island, Samoa',
+              },
+            },
+            email: 'florence.haarhuis@example.com',
+            login: {
+              uuid: 'e7ecdba6-817b-4445-8833-217375db7282',
+              username: 'blackduck806',
+              password: 'lback',
+              salt: 'BnCw1UBj',
+              md5: 'e8cd480704a089a0d2fd87186f802461',
+              sha1: 'b0e2e64bb72efd422495bb6f7cea8b86b79f9a9b',
+              sha256: 'b9c4d86027d9269c5a2850d578b753cd8c7662351427bbdb2cec450b1a03adf2',
+            },
+            dob: {
+              date: '1981-06-23T07:46:09.762Z',
+              age: 44,
+            },
+            registered: {
+              date: '2016-10-06T09:20:24.178Z',
+              age: 9,
+            },
+            phone: '(0406) 391733',
+            cell: '(06) 38397250',
+            id: {
+              name: 'BSN',
+              value: '03929007',
+            },
+            picture: {
+              large: 'https://randomuser.me/api/portraits/women/7.jpg',
+              medium: 'https://randomuser.me/api/portraits/med/women/7.jpg',
+              thumbnail: 'https://randomuser.me/api/portraits/thumb/women/7.jpg',
+            },
+            nat: 'NL',
+          },
+        ],
+        info: {
+          seed: '1d4ba23c332c6909',
+          results: 2,
+          page: 1,
+          version: '1.4',
+        },
+      };
+
+      outputEl.textContent = persons.results[0].location.coordinates.latitude;
+      outputEl.innerHTML = `<img src="${persons.results[1].picture.large}" />`;
+
+      const contacts = [
+        {
+          firstName: 'Max',
+          lastName: 'Mustermann',
+          phone: ['069 553399', '0171 5522112'],
+          contacts: ['Max', 'Moritz', 'Anne'],
+        },
+        {
+          phone: ['089 6521349', '0152 5552156'],
+          firstName: 'John',
+          lastName: 'Wayne',
+          contacts: ['Darius', 'Berny', 'Boris'],
+        },
+      ];
+
+      console.log(contacts[0].contacts[1]); // => 'Moritz'
+
+      const persons2 = [
+        {
+          firstName: 'Max',
+          lastName: 'Mustermann',
+          age: 38,
+          hobbies: ['Tennis', 'Schach'],
+        },
+        {
+          firstName: 'Jane',
+          lastName: 'Doe',
+          age: 24,
+          hobbies: ['Zocken', 'Tanzen'],
+        },
+      ];
+
+      console.log(persons2[1].hobbies[1]); // => 'Tanzen'
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag11/03_objekte-mit-this.html b/02_advanced/unterricht/tag11/03_objekte-mit-this.html
new file mode 100644
index 0000000..c568a58
--- /dev/null
+++ b/02_advanced/unterricht/tag11/03_objekte-mit-this.html
@@ -0,0 +1,143 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Object - object</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://releases.jquery.com/git/jquery-git.slim.min.js"></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Objekt - object</h1>
+        <p>
+          Der
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>-Typ
+          repräsentiert einen von JavaScript's Datentypen. Er wird verwendet, um verschiedene Schlüsselkollektionen und
+          komplexere Entitäten zu speichern. Objekte können mit dem <strong>Object()</strong>-Konstruktor oder der
+          Objekt-Initialisierer-Syntax erstellt werden.
+        </p>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const ar = [];
+      const ar2 = new Array(); // oder Array()
+
+      const str = ''; // "" | ```
+      const str2 = new String(); // oder String();
+
+      const zahl = 123;
+      const zahl2 = new Number(); // oder Number();
+
+      const fn = () => {}; // function() {}
+      const fn2 = new Function(); // oder Function();
+
+      const bool = true;
+      const bool2 = new Boolean(); // oder Boolean();
+
+      // =================
+
+      const obj = {};
+      const obj2 = new Object(); // oder Object()
+
+      console.log(typeof str); // 'string' - Objekt vom Typ String
+      console.log(typeof false); // 'boolean' - Objekt vom Typ Boolean
+      console.log(typeof zahl); // 'number' - Objekt vom Typ Number
+      console.log(typeof NaN); // 'number' - Objekt vom Typ Number
+      console.log(typeof (() => {})); // 'function' - Objekt vom Typ Function
+      console.log(typeof undefined); // undefined
+
+      console.log(typeof ar); // 'object' vom Typ Array
+      console.log(typeof null); // 'object' vom Typ Null
+      console.log(typeof {}); // 'object' vom Typ Object
+
+      // Eigenschaften können selber definiert werden.
+
+      obj.prop = 'rot';
+
+      console.log(obj.prop); // => 'rot'
+      console.log(obj['prop']); // => 'rot'
+
+      console.log('text'.length); // => 4
+      console.log(['eins', 'zwei', 'drei'].length); // => 3
+
+      const personObj = {
+        firstName: 'John',
+        lastName: 'Wick',
+        age: 45,
+        hobbies: ['Gassi gehen', 'Ballern'],
+        lauf: () => {
+          return 'Person läuft';
+        },
+        schiess: () => {
+          console.log('pew pew');
+        },
+      };
+
+      // Object.freeze(personObj);
+
+      personObj.hairColor = 'Braun';
+
+      console.log(personObj);
+      console.log(personObj.lauf()); // => 'Person läuft'
+      console.log(personObj.schiess());
+
+      console.log(personObj.age); // => 45
+
+      // =============================
+
+      const cssProp = 'border';
+      const color = 'white';
+
+      const cssObj = {
+        'background-color': '#555',
+        'margin-top': '1rem',
+        border: '3px solid tomato',
+        // fontSize, // Uncaught ReferenceError: fontSize is not defined
+        // color: color,
+        color, // Kurzschreibweise seit ES6 - wenn Eigenschaft und Variable gleiche Bezeichnung besitzen
+      };
+
+      console.log(cssObj['background-color']); //=> '#555'
+      console.log(cssObj[cssProp]); //=> '3px solid tomato'
+
+      console.log(cssObj.color); //=> 'white'
+
+      // =========================
+
+      const person = {
+        name: 'Ben',
+        fullName: 'Ben Stiller',
+        introduce() {
+          // 'this' refers to the 'person' object here
+          console.log(`Hello, I am ${this.fullName}.`);
+        },
+
+        // run: () => {
+        //   console.log(this); // window
+        //   console.log(`${this.fullName} is running!`);
+        // },
+
+        // run: function () {
+        //   console.log(this); // person - Object
+        //   console.log(`${this.fullName} is running!`);
+        // },
+
+        run() {
+          // Kurzschreibweise seit ES6 (ECMAScript 2015) von classic function expression (run: function(){})
+          console.log(this); // person - Object
+          console.log(`${this.fullName} is running!`);
+        },
+      };
+
+      person.introduce(); // Output: 'Hello, I am Ben Stiller.'
+      person.run(); // Output: 'Ben Stiller is running!'
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag11/03_schnittstellenformate/persons.json b/02_advanced/unterricht/tag11/03_schnittstellenformate/persons.json
new file mode 100644
index 0000000..b5b538b
--- /dev/null
+++ b/02_advanced/unterricht/tag11/03_schnittstellenformate/persons.json
@@ -0,0 +1,14 @@
+[
+  {
+    "firstName": "Max",
+    "lastName": "Mustermann",
+    "age": 38,
+    "hobbies": ["Tennis", "Schach"]
+  },
+  {
+    "firstName": "Jane",
+    "lastName": "Doe",
+    "age": 24,
+    "hobbies": ["Zocken", "Tanzen"]
+  }
+]
diff --git a/02_advanced/unterricht/tag11/03_schnittstellenformate/persons.xml b/02_advanced/unterricht/tag11/03_schnittstellenformate/persons.xml
new file mode 100644
index 0000000..53b1606
--- /dev/null
+++ b/02_advanced/unterricht/tag11/03_schnittstellenformate/persons.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!--[CDATA[ Kommentar] ]-->
+<persons>
+  <person>
+    <firstName>Max</firstName> 
+    <lastName>Mustermann</lastName> 
+    <age>38</age> 
+    <hobbies>
+      <hobby>Tennis</hobby>
+      <hobby>Schach</hobby>
+    </hobbies> 
+  </person>
+  <person>
+    <firstName>Jane</firstName> 
+    <lastName>Doe</lastName> 
+    <age>24</age> 
+    <hobbies>
+      <hobby>Zocken</hobby>
+      <hobby>Tanzen</hobby>
+    </hobbies> 
+  </person>
+</persons>
\ No newline at end of file
diff --git a/02_advanced/unterricht/tag11/04_object-keys-values-entries.html b/02_advanced/unterricht/tag11/04_object-keys-values-entries.html
new file mode 100644
index 0000000..3d49b71
--- /dev/null
+++ b/02_advanced/unterricht/tag11/04_object-keys-values-entries.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Object Methoden - keys(), values(), entries()</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>Object Methoden - keys(), values(), entries()</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const personObj = {
+        firstName: 'John',
+        lastName: 'Wick',
+        age: 45,
+        isAdmin: true,
+      };
+
+      const keys = Object.keys(personObj);
+      console.log(keys); // => ['firstName', 'lastName', 'age', 'isAdmin']
+
+      const values = Object.values(personObj);
+      console.log(values); // => ['John', 'Wick', 45, true]
+
+      const entries = Object.entries(personObj);
+      console.log(entries); // => [['firstName', 'John'], ['lastName','Wick'], ['age',45],['isAdmin', true]]
+
+      // Deklarative Stil
+      entries.forEach((entryAr) => {
+        console.log(`Eigenschaft: ${entryAr[0]}, Wert: ${entryAr[1]}`);
+      });
+
+      // Imperative Stil
+      for (const prop in personObj) {
+        console.log(`Eigenschaft: ${prop}, Wert: ${personObj[prop]}`);
+      }
+    </script>
+  </body>
+</html>
