2026-10-05 10:40:06 +02:00
parent 967bd5c7ea
commit 6f4f54522c
17 changed files with 246 additions and 10184 deletions
@@ -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'

@@ -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"
-  }
-}
@@ -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 ========
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,7 @@
+'use strict';
+
+console.log('File 01: ');
+
+const a = 'a';
+
+console.log(output());
@@ -0,0 +1,7 @@
+"use strict";
+
+console.log('File 02: ');
+
+const b = 'b';
+
+console.log(output());
@@ -0,0 +1,7 @@
+"use strict";
+
+console.log('File 03: ');
+
+const c = 'c';
+
+console.log(output());
@@ -0,0 +1,7 @@
+"use strict";
+
+console.log('File 04: ');
+
+const d = 'd';
+
+console.log(output());
@@ -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(/,+$/,'');;
+}