2026-06-29 12:06:46 +02:00
parent 31c13250b0
commit 7d567b5069
2 changed files with 105 additions and 0 deletions
--- a/02_advanced/unterricht/tag11/01_objekte.html
+++ b/02_advanced/unterricht/tag11/01_objekte.html
@@ -0,0 +1,93 @@
+<!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" />
+  </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
+    </script>
+  </body>
+</html>