02_advanced/unterricht/tag11/01_schleifen/02_for-of-statement.html

@@ -39,7 +39,6 @@
       console.log('==============');
 
       // imperativen Stil (wie...)
-
       for (const name of names) {
         console.log(`Index: ${names.indexOf(name)}, Name: ${name}`);
       }

02_advanced/unterricht/tag11/02_objekte.html

@@ -105,7 +105,6 @@
       console.log(cssObj[cssProp]); //=> '3px solid tomato'
 
       console.log(cssObj.color); //=> 'white'
-      console.log(cssObj);
 
       // ==========================
       // document.querySelector('h1').style.color = cssObj.color;

02_advanced/unterricht/tag11/04_schnittstellenformate/persons.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <persons>
+<!--[CDATA[Kommentar in XML]]-->
   <person category="human" gender="m">
     <firstName>Max</firstName>
     <lastName>Mustermann</lastName>

02_advanced/unterricht/tag11/05_objekte-mit-this.html

@@ -80,6 +80,7 @@
         },
 
         lauf: () => {
+          console.log(this); // window
           return 'Person läuft';
         },
         schiess: () => {

02_advanced/unterricht/tag12/01_destructuring.html

@@ -0,0 +1,112 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Destructuring von Objekten "{}" und Arrays "[]" in JS</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>Destructuring von Objekten "{}" und Arrays "[]" in JS</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Destructuring von Arrays =============
+      const mixedArray = ['Max', 'Mustermann', 33, true, 5, 22, 17, 45, 32, 2];
+
+      // const vorname = mixedArray[0];
+      // const nachname = mixedArray[1];
+      // const alter = mixedArray[2];
+      // const istRaucher = mixedArray[3];
+      // const lottoZahlen = mixedArray.slice(4);
+
+      const [vorname, nachname, alter, istRaucher, ...lottoZahlen] = mixedArray;
+
+      console.log(alter); // => 33
+      console.log(istRaucher); // => true
+      console.log(lottoZahlen); // => [5, 22, 17, 45, 32, 2]
+
+      // Destructuring von Objekten ===========
+
+      const personObj = {
+        firstName: 'John',
+        lastName: 'Wick',
+        age: 52,
+        hobbies: ['Gassi gehen', 'Ballern'],
+      };
+
+      // const firstName = personObj.firstName;
+      // const lastName = personObj.lastName;
+      // const age = personObj.age;
+      // const hobbies = personObj.hobbies;
+
+      // Existierende Eigenschaften können bei der Definition mit ":" direkt umbenannt werden
+      const { firstName, lastName, age, hobbies: sports, isGamer = true } = personObj;
+
+      console.log('firstName: ', firstName); // => 'John'
+      console.log('age: ', age); // => 52
+
+      console.log('sports: ', sports); // =>  ['Gassi gehen', 'Ballern']
+      // console.log('hobbies: ', hobbies); // =>  Uncaught ReferenceError: hobbies is not defined
+      console.log('personObj.hobbies: ', personObj.hobbies); // =>  ['Gassi gehen', 'Ballern']
+
+      console.log('isGamer: ', isGamer); // => true;
+
+      // ========
+
+      // const Slider = (options) => {
+      //    const module = document.querySelector(container) || console.warn('container not found');
+      //   if (options.controls) {
+      //     const nav = module.querySelector('nav');
+      //     nav.classList.add('controls');
+      //   }
+      //   // code logic...
+      //   if (options.showDots) {
+      //     module.querySelector('.dots').classList.remove('show');
+      //   }
+
+      //   if (options.mode === 'gallery') {
+      //     // ...logic
+      //   } else if (options.mode === 'fade') {
+      //     // ...logic
+      //   } else if (options.mode === 'slide') {
+      //     // ...logic
+      //   }
+      // };
+
+      const Slider = (options = {}) => {
+        // Destructuring eines Objektes mit Defaultparametern und Umbenennung
+        const { controls = true, showDots: dots, mode = 'gallery', container: el } = options;
+
+        const module = document.querySelector(el) || console.warn('container not found');
+        if (controls) {
+          const nav = module.querySelector('nav');
+          nav.classList.add('controls');
+        }
+        // code logic...
+        if (dots) {
+          module.querySelector('.dots').classList.remove('show');
+        }
+
+        if (mode === 'gallery') {
+          // ...logic
+        } else if (mode === 'fade') {
+          // ...logic
+        } else if (mode === 'slide') {
+          // ...logic
+        }
+      };
+
+      Slider({
+        container: '.slider',
+        controls: true,
+        mode: 'gallery', // 'slide' | 'fade'
+        showDots: false,
+      });
+    </script>
+  </body>
+</html>

02_advanced/unterricht/tag12/02_csv-to-obj.html

@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSV to Obj mit "destructuring"</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>CSV to Obj mit "destructuring"</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const productsCsv = `name ,  category, price
+      Klingon Letter Opener, Office Warfare, 19.99
+      Backpack of Holding, Travel, 29.99
+      Tardis Alarmclock, Merchandise, 15.99
+      `;
+
+      const convertCsvToObj = (csv = '') => {
+        const rows = csv.split('\n'); // => ['name, category, price', 'Klingon Letter Opener, Office Warfare, 19.99',...]
+
+        const headerRow = rows.shift().split(/\s*,\s*/);
+
+        console.log(headerRow); // => ['name', 'category', 'price']
+
+        const productRows = rows
+          .map((row) => row.trim()) // "white spaces" der Strings werden entfernt
+          .filter((row) => row !== ''); // leere Einträge werden entfernt
+
+        const productAr = productRows.map((row) => {
+          const fields = row.split(/\s*,\s*/); // => ["Klingon Letter Opener", "Office Warfare", "19.99"]
+
+          // const name = fields[0];
+          // const category = fields[1];
+          // const price = fields[2];
+
+          // Desctructuring von einem Array
+          const [name, category, price] = fields;
+
+          return {
+            // name: name,
+            // category: category,
+            name,
+            category,
+            price: Number(price),
+          };
+        });
+
+        return productAr;
+      };
+
+      const products = convertCsvToObj(productsCsv);
+
+      // output
+      console.log(products);
+
+      outputEl.innerHTML = `<ol>${products
+        .map((product) => {
+          return `<li>Name: ${product.name} Price: <strong>${product.price.toFixed(2)}</strong></li>`;
+        })
+        .join('')}</ol>`;
+    </script>
+  </body>
+</html>

02_advanced/unterricht/tag12/data/products.csv

@@ -0,0 +1,4 @@
+name, category, price
+Klingon Letter Opener, Office Warfare, 19.99
+Backpack of Holding, Travel, 29.99
+Tardis Alarmclock, Merchandise, 15.99