03_js-dom/uebungen/u06_tasse-01001/index.html

@@ -102,14 +102,29 @@
 
         // Es besteht der Wunsch, den Text teilweise in grauer Schriftfarbe darzustellen.
 
-        // 1. Schreibe eine Funktion, die allen p-Elementen die CSS-Klasse gray zuordnet.
+      
+         // 1. Schreibe eine Funktion, die allen p-Elementen die CSS-Klasse gray zuordnet.
+        const makeTextGray = () => {
+            // 2. Eine Ausnahme soll nur der Fließtext darstellen, der den Kaufvorgang enthält. Die p-Elemente mit der Klasse buy_info_text sollen dementsprechend von dem Vorgang ausgeschlossen werden.
 
-        // 1. Schreibe eine Funktion, die allen p-Elementen die CSS-Klasse gray zuordnet.
+          $$('p:not(.buy_info_text)').forEach((paragraph) => {
+            paragraph.classList.add('gray');
+          });
 
-        // 2. Eine Ausnahme soll nur der Fließtext darstellen, der den Kaufvorgang enthält. Die p-Elemente mit der Klasse buy_info_text sollen dementsprechend von dem Vorgang ausgeschlossen werden.
+           // 3. Weise nun allen Listenpunkten, die noch keine andere Klasse haben, die Klasse gray zu.
+          $$('li').forEach((listItem) => {
+            if (listItem.classList.length === 0) {
+              listItem.classList.add('gray');
+            }
+          });
 
-        // 3. Weise nun allen Listenpunkten, die noch keine andere Klasse haben, die Klasse gray zu.
+          // $$('li:not([class])').forEach((li) => li.classList.add('gray')); // NICHT SAVE - Element kann "class" Attribut besitzen ohne Klassenzuweisung.
+
+        }
+
+        makeTextGray();
       }
     </script>
+    </script>
   </body>
 </html>

03_js-dom/uebungen/u07_content-length/index.html

@@ -50,6 +50,26 @@
       // Für das Zählen der Zeichen darfst du den kompletten HTML-Code von content auswerten. Es geht nur darum, eine grobe Abschätzung zu bekommen.
 
       // Durch Duplizieren oder Löschen von Lorem-Ipsum-Absätzen kannst du unterschiedliche Textlängen einfach testen.
+
+      const setHeadlineClass = () => {
+        const headlineEl = document.querySelector('h1');
+        const contentEl = document.querySelector('#content');
+        const l = contentEl.textContent.length;
+        console.log('Length: ' + l);
+        switch (true) {
+          case l <= 3000:
+            headlineEl.classList.add('coffee_break_article');
+            break;
+          case l > 3000 && l <= 9000:
+            headlineEl.classList.add('normal_length_article');
+            break;
+          default:
+            headlineEl.classList.add('lone_weekend_article');
+            break;
+        }
+      };
+
+      setHeadlineClass();
     </script>
   </body>
 </html>

03_js-dom/unterricht/tag20/01_class-list-chat/index.html

@@ -67,7 +67,7 @@
       // class Attribut kann nicht direkt als Eigenschaft angesprochen werden, sondern über classList
       console.log($('#chat_members li').class); // => undefined
       console.log($('#chat_members li').classList); // => DOMTokenList ['admin', value: 'admin']
-      console.log($('#chat_history span').classList); // => DOMTokenList ['chat_member', 'chat_member1' value: 'chat_member 'chat_member1']
+      console.log($('#chat_history span').classList); // => DOMTokenList ['chat_member', 'chat_member1' value: 'chat_member chat_member1']
 
       console.log($('#chat_members li').classList.value); // => 'admin'
 

03_js-dom/unterricht/tag20/05_website-gulp/docs/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "website-static",
-  "version": "0.0.1",
-  "description": "First Website with sass",
-  "keywords": [],
-  "license": "ISC",
-  "author": "",
-  "type": "module",
-  "main": "index.js",
-  "scripts": {
-    "css": "npx sass dev/scss/main.scss:assets/css/main.css -w -q",
-    "js": "npx esbuild dev/js/main.js --watch --bundle --sourcemap --outfile=assets/js/build.js",
-    "dev": "run-p css js"
-  },
-  "devDependencies": {
-    "esbuild": "^0.28.2",
-    "gulp": "^5.0.1",
-    "npm-run-all": "^4.1.5",
-    "sass": "^1.105.0"
-  }
-}

03_js-dom/unterricht/tag20/05_website-gulp/gulpfile.js

@@ -51,7 +51,7 @@ task('css', (done) => {
 });
 
 task('watcher', () => {
-  watch(['./dev/scss/**/*.scss', './dev/scss/*.scss'], series('css', 'reload'));
+  watch(['./dev/scss/**/*.+(scss|css)', './dev/scss/*.+(scss|css)'], series('css', 'reload'));
 });
 
 // Main DEV Task ========

03_js-dom/unterricht/tag21/01_text-content-vs-inner-text-vs-inner-html/index.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>textContent vs innerText vs innerHTML</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>textContent vs innerText vs innerHTML</h1>
+        <hr />
+        <p>
+          Lorem ipsum dolor sit, <a href="https://www.gfn.de">GFN Link</a> amet consectetur adipisicing elit. Amet
+          tempora repudiandae dicta et libero, ex, quibusdam nisi id atque quaerat nam asperiores laborum hic ipsum
+          suscipit numquam. Obcaecati vero consequatur repellendus nostrum beatae laborum voluptate aperiam numquam
+          <span style="display: none">
+            VERSTECKT!!!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, commodi.
+          </span>
+          iusto optio delectus animi quia quam, provident vitae ex. Accusantium, officiis? Nemo quidem accusantium
+          voluptatibus cumque voluptates natus, consequatur exercitationem eum eligendi dolor sit nisi. Magni enim omnis
+          voluptatibus obcaecati aut? Nulla asperiores incidunt atque labore alias quia assumenda molestias, dolores
+          facilis aspernatur ea quos! Magnam suscipit et, saepe culpa repellat nesciunt repudiandae dignissimos? Nemo
+          neque nisi repellendus doloribus reiciendis, ducimus quae id?
+        </p>
+
+        <div class="output-text-content alert alert-secondary my-3"></div>
+        <div class="output-inner-text alert alert-secondary my-3"></div>
+        <div class="output-inner-html alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      // textContent ohne Leeraum (am Anfang und Ende) und ohne HTML-Syntax (<TAGNAME>...</TAGNAME>)
+      console.log('textContent:', $('p').textContent.length);
+      // innerText ohne Leeraum (am Anfang, Ende und Zeilenumbrüchen), ohne HTML-Syntax (<TAGNAME>...</TAGNAME>) und ohne versteckten Inhalt
+      console.log('innerText:', $('p').innerText.length);
+      // innerHTML so wie im Element vorliegend
+      console.log('innerHTML:', $('p').innerHTML.length);
+
+      $('.output-text-content').textContent =
+        '<p>lorem ipsum <a href="#">Link</a><span style="display:none">IM SPAN</span></p>';
+      $('.output-inner-text').innerText =
+        '<p>lorem ipsum <a href="#">Link</a><span style="display:none">IM SPAN</span></p>';
+
+      $('.output-inner-html').innerHTML =
+        '<p>lorem ipsum <a href="#">Link</a><span style="display:none">IM SPAN</span></p>';
+    </script>
+  </body>
+</html>

03_js-dom/unterricht/tag21/02_defer-examples/01_example_defer.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>01 Example Defer</title>
+    <script src="assets/js/helper.js"></script>
+
+    <script src="assets/js/file01.js"></script>
+    <script src="assets/js/file02.js"></script>
+    <script src="assets/js/file03.js" defer></script>
+    <script src="assets/js/file04.js" defer></script>
+  </head>
+
+  <body>
+    <script>
+      'use strict';
+
+      console.log('File intern: ');
+
+      const i = 'i';
+
+      console.log(output());
+    </script>
+  </body>
+</html>

03_js-dom/unterricht/tag21/02_defer-examples/02_example_defer.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>02 Example Defer</title>
+    <script src="assets/js/helper.js"></script>
+
+    <script src="assets/js/file02.js" defer="defer"></script>
+    <script src="assets/js/file01.js" defer></script>
+  </head>
+
+  <body>
+    <script src="assets/js/file04.js"></script>
+    <script src="assets/js/file03.js" defer="defer"></script>
+
+    <script>
+      'use strict';
+
+      console.log('File intern');
+      const i = 'i';
+
+      console.log(output());
+    </script>
+  </body>
+</html>

03_js-dom/unterricht/tag21/02_defer-examples/03_example_defer.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>03 Example Defer</title>
+    <script src="assets/js/helper.js"></script>
+
+    <script src="assets/js/file03.js" defer></script>
+    <script src="assets/js/file04.js" defer></script>
+  </head>
+
+  <body>
+    <script>
+      'use strict';
+
+      console.log('File intern');
+      const i = 'i';
+
+      console.log(output());
+    </script>
+    <script src="assets/js/file01.js"></script>
+    <script src="assets/js/file02.js"></script>
+  </body>
+</html>

03_js-dom/unterricht/tag21/02_defer-examples/04_dom-laden.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DOM Laden - Event DOMContentLoaded</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script>
+      document.addEventListener('DOMContentLoaded', (e) => {
+        console.log(document.querySelector('h1'));
+
+        document.querySelector('h1').textContent = 'Hello World';
+      });
+    </script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>DOM Laden - Event DOMContentLoaded</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+    </script>
+  </body>
+</html>

03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file01.js

@@ -0,0 +1,7 @@
+'use strict';
+
+console.log('File 01: ');
+
+const a = 'a';
+
+console.log(output());

03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file02.js

@@ -0,0 +1,7 @@
+"use strict";
+
+console.log('File 02: ');
+
+const b = 'b';
+
+console.log(output());

03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file03.js

@@ -0,0 +1,7 @@
+"use strict";
+
+console.log('File 03: ');
+
+const c = 'c';
+
+console.log(output());

03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file04.js

@@ -0,0 +1,7 @@
+"use strict";
+
+console.log('File 04: ');
+
+const d = 'd';
+
+console.log(output());

03_js-dom/unterricht/tag21/02_defer-examples/assets/js/helper.js

@@ -0,0 +1,22 @@
+const output = () => {
+  let outputText = '\t';
+  try{
+    outputText += a + ',';
+  } catch(err) {}
+  try{
+    outputText += b + ',';
+  } catch(err) {}
+    try{
+    outputText += c + ',';
+  } catch(err) {}
+    try{
+    outputText += d + ',';
+  } catch(err) {}
+    try{
+    outputText += e + ',';
+  } catch(err) {}
+    try{
+    outputText += i + ',';
+  } catch(err) {}
+  return outputText.replace(/,+$/,'');;
+}