From 6f4f54522c1fb3cc22e11566a111771535c7bf79 Mon Sep 17 00:00:00 2001 From: Philippe Torrel Date: Mon, 5 Oct 2026 10:40:06 +0200 Subject: [PATCH] --- 03_js-dom/docs/nvm-globale-module.html | 10157 ---------------- 03_js-dom/uebungen/u06_tasse-01001/index.html | 23 +- .../uebungen/u07_content-length/index.html | 20 + .../tag20/01_class-list-chat/index.html | 2 +- .../tag20/05_website-gulp/docs/package.json | 21 - .../tag20/05_website-gulp/gulpfile.js | 2 +- .../index.html | 55 + .../unterricht/tag21/02_defer-examples.zip | Bin 0 -> 4699 bytes .../02_defer-examples/01_example_defer.html | 25 + .../02_defer-examples/02_example_defer.html | 25 + .../02_defer-examples/03_example_defer.html | 24 + .../tag21/02_defer-examples/04_dom-laden.html | 26 + .../02_defer-examples/assets/js/file01.js | 7 + .../02_defer-examples/assets/js/file02.js | 7 + .../02_defer-examples/assets/js/file03.js | 7 + .../02_defer-examples/assets/js/file04.js | 7 + .../02_defer-examples/assets/js/helper.js | 22 + 17 files changed, 246 insertions(+), 10184 deletions(-) delete mode 100644 03_js-dom/docs/nvm-globale-module.html delete mode 100644 03_js-dom/unterricht/tag20/05_website-gulp/docs/package.json create mode 100644 03_js-dom/unterricht/tag21/01_text-content-vs-inner-text-vs-inner-html/index.html create mode 100644 03_js-dom/unterricht/tag21/02_defer-examples.zip create mode 100644 03_js-dom/unterricht/tag21/02_defer-examples/01_example_defer.html create mode 100644 03_js-dom/unterricht/tag21/02_defer-examples/02_example_defer.html create mode 100644 03_js-dom/unterricht/tag21/02_defer-examples/03_example_defer.html create mode 100644 03_js-dom/unterricht/tag21/02_defer-examples/04_dom-laden.html create mode 100644 03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file01.js create mode 100644 03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file02.js create mode 100644 03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file03.js create mode 100644 03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file04.js create mode 100644 03_js-dom/unterricht/tag21/02_defer-examples/assets/js/helper.js diff --git a/03_js-dom/docs/nvm-globale-module.html b/03_js-dom/docs/nvm-globale-module.html deleted file mode 100644 index a7e4d91..0000000 --- a/03_js-dom/docs/nvm-globale-module.html +++ /dev/null @@ -1,10157 +0,0 @@ - - - - - Velinkungsproblem von globalen Modulen - - - - - - - - - - - - - - - -
-
- -

Velinkungsproblem von globalen Modulen

-

Bei nvm-windows liegt das Problem an einem bekannten Mechanismus:

-

nvm-windows verwaltet Node-Versionen über einen Symlink (standardmäßig C:\Program Files\nodejs). Dieser Symlink zeigt dynamisch auf die gerade aktive Node-Version unter %APPDATA%\nvm\v<version>.

-

Wenn du npm install -g <package> ausführst, gibt es zwei typische Szenarien, warum das Binary nicht mehr im PATH landet:

-
    -
  1. Ein abweichendes oder altes globales prefix in der .npmrc: Wenn dort noch ein hartkodierter Pfad (wie %APPDATA%\npm) hinterlegt ist, legt npm die .cmd-Dateien dort ab, aber nvm-windows bindet diesen Pfad nicht in den PATH ein – nvm erwartet globale Pakete direkt im Symlink-Verzeichnis der jeweiligen Node-Version.
    2. -
  2. Fehlende Berechtigungen im Node-Symlink: Liegt Node unter C:\Program Files\nodejs, kann npm ohne Admin-Rechte dort keine .cmd-Dateien anlegen und weicht stillschweigend aus.
    3. -
-
-

Schritt 1: Prüfen, wo npm globale Pakete aktuell ablegt

-

Führe in der PowerShell aus:

-
npm config get prefix
-
-
-
    -
  • Fall A (Standard bei nvm-windows): Der Pfad zeigt auf das aktive Symlink-Verzeichnis (z. B. C:\Program Files\nodejs). Hier müssten die .cmd-Dateien liegen.
    • -
  • Fall B (Häufige Ursache): Der Pfad zeigt auf C:\Users\<Name>\AppData\Roaming\npm. In diesem Fall findet Windows die Befehle nicht, weil dieser Ordner bei nvm-windows nicht im PATH steht.
    • -
-
-

Lösungsweg 1: Den dedizierten npm-Ordner nutzen (Empfohlen & Best Practice)

-

Damit globale Pakete auch bei einem Node-Versionswechsel über nvm use erhalten bleiben und keine Admin-Rechte im Programmverzeichnis nötig sind, bindet man den globalen npm-Pfad fest ein.

-
    -
  1. Globales Prefix in npm festlegen:
    2. -
-
npm config set prefix "$env:APPDATA\npm"
-
-
-
    -
  1. Diesen Ordner dauerhaft in den Benutzer-PATH eintragen:
    2. -
-
[Environment]::SetEnvironmentVariable(
-    "Path",
-    [Environment]::GetEnvironmentVariable("Path", "User") + ";$env:APPDATA\npm",
-    "User"
-)
-
-
-
    -
  1. Paket nochmals global installieren:
    2. -
-
npm install -g gulp-cli
-
-
-
    -
  1. Terminal neu starten (Windows Terminal / PowerShell schließen und neu öffnen), danach testen:
    2. -
-
gulp -v
-
-
-
-

Lösungsweg 2: Den nvm-Standard wiederherstellen

-

Falls du möchtest, dass nvm-windows globale Pakete strikt pro Node-Version im jeweiligen Versionsordner verwaltet:

-
    -
  1. Globales Prefix zurücksetzen:
    2. -
-
npm config delete prefix
-
-
-
    -
  1. Prüfen, ob der nvm-Symlink im PATH vorhanden ist:
    2. -
-
$env:PATH -split ';' | Select-String "nodejs"
-
-
-

Hier muss der nvm-Symlink (C:\Program Files\nodejs oder dein benutzerdefinierter Pfad) auftauchen. -3. Installieren:

-
npm install -g gulp-cli
-
-
-

(Hinweis: Falls eine Fehlermeldung bezüglich EPERM oder fehlender Schreibrechte auftaucht, die Konsole einmalig als Administrator ausführen oder Lösungsweg 1 wählen).

-
-
- - - - - - \ No newline at end of file diff --git a/03_js-dom/uebungen/u06_tasse-01001/index.html b/03_js-dom/uebungen/u06_tasse-01001/index.html index e92dee4..9e5ff7c 100644 --- a/03_js-dom/uebungen/u06_tasse-01001/index.html +++ b/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(); } + diff --git a/03_js-dom/uebungen/u07_content-length/index.html b/03_js-dom/uebungen/u07_content-length/index.html index 038e29c..020261b 100644 --- a/03_js-dom/uebungen/u07_content-length/index.html +++ b/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(); diff --git a/03_js-dom/unterricht/tag20/01_class-list-chat/index.html b/03_js-dom/unterricht/tag20/01_class-list-chat/index.html index 0841bc4..f519a6b 100644 --- a/03_js-dom/unterricht/tag20/01_class-list-chat/index.html +++ b/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' diff --git a/03_js-dom/unterricht/tag20/05_website-gulp/docs/package.json b/03_js-dom/unterricht/tag20/05_website-gulp/docs/package.json deleted file mode 100644 index 9979699..0000000 --- a/03_js-dom/unterricht/tag20/05_website-gulp/docs/package.json +++ /dev/null @@ -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" - } -} diff --git a/03_js-dom/unterricht/tag20/05_website-gulp/gulpfile.js b/03_js-dom/unterricht/tag20/05_website-gulp/gulpfile.js index 3793859..3466d54 100644 --- a/03_js-dom/unterricht/tag20/05_website-gulp/gulpfile.js +++ b/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 ======== diff --git a/03_js-dom/unterricht/tag21/01_text-content-vs-inner-text-vs-inner-html/index.html b/03_js-dom/unterricht/tag21/01_text-content-vs-inner-text-vs-inner-html/index.html new file mode 100644 index 0000000..eed6f12 --- /dev/null +++ b/03_js-dom/unterricht/tag21/01_text-content-vs-inner-text-vs-inner-html/index.html @@ -0,0 +1,55 @@ + + + + + + textContent vs innerText vs innerHTML + + + +
+
+

textContent vs innerText vs innerHTML

+
+

+ Lorem ipsum dolor sit, GFN Link 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 + + VERSTECKT!!!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, commodi. + + 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? +

+ +
+
+
+
+
+ + + diff --git a/03_js-dom/unterricht/tag21/02_defer-examples.zip b/03_js-dom/unterricht/tag21/02_defer-examples.zip new file mode 100644 index 0000000000000000000000000000000000000000..5e933b1c2890199a701c9ee9fe0934960fcc6913 GIT binary patch literal 4699 zcmcIn2{@E%8~$eOSv&lUhKv-(IzzU~#fTgXMw-%f6v}j%V;^fOWs6PF;OgN*qNw`#^8zsTX&3;^|BbkhAK+4Vs30#b!hAe# zfE(yv7Eg|8JP=_q_5zZMleeo2GZ48W6=XATLHDp&bBhX$P}n=2M}1M<96o5J=n+Q_ zU6{mu?WdLT!at=%8oFEVHQr*Bb+F#)W0{s7?NnCC3o}Ef;%Oq40yOboIgSr6Fw(R~ zUg9nhxh8eC>Hv&<+_7qN&Zxlid*(>pa^z;LbNriwyERLy^=lH!oB9k!@HcQ$Sl5QF z3c0j2g)x}%uxBX}mQ^L2UL3AdW~le+iB{bHfL`pU4b!B~*Do6T%>EiKr8NHcEe9&l z0A_?>P!}xMPZ}D_!JQ-7Wa8_*AGA z!HkQ$Z7vl(1a1ck4gjnhs|GgK&dwaS+tS)bb>)t!*nM}8Ex;Zhwg1=ApY4y>PnhHP zPYCXhAe@FrBiQ7GkT6e4p^*1TL-9wBtuw4t%pOi8}lq_x&W zNd>KJVQylgWI`0+=0wL??nvgi-YOn68R7)i!o_XlkSJ;k)^-bAUu#=VLKdXKu8}kl zD*k13#g~Jq(@)0IqwqSJ)AT&DkHN={e!qd zuElIm?pB|oS?4*k}w9Gqb%>KDu(0-?4;vpp|Aqqzcf9BTz?Kfv3r z-F_`mzTqMw4nI94E$mXI|3IW9qa$o6(lP301!kw!VTB|m(u|l#fxz&uihX)>lY8bW z`p%MzAM&>hs>a2>mgEYUXl>83?gAoGgd##Tln&F(n%^hfsYsfV63&lQzh8KsdXf_> znS@XhLA`Cv8ZUVhpcYjZFe(3&sfc=t-X|o~*88I6j|ae(@-a|md0W3tneXlJ|A8{Q zlKr)L4QJJnR~9LAUmH>Pw<)9kos@y76BUC4DZ^*j> zJNR(3S<;zqtp^92p1>7@YUfO*NYi@*Duz!l(1mTDE`QQ+ZT4hIo|0<6Yu)Wc0k0GD zbooJ3u7~~X#F@bJrWwa4qa!sjgzZK*v&Ri4f28dZ!!%royKE|Jmej*G)7F1N2O#k8 zzIn^IWmYdP7Cnr*cf#j$Gx`uGXQO@>i3L86LdzsjEw7ZlE&H@m#lR-{fE~L>I@_k2%jly6~(@7a8WGd%K;Z zyQ{K`gCog}<=BSWhzC#Ld^=+wxCvv0!p8&7J-BS1cC+WSf;2fVx@(I7&geR~r}rrJ zmytij0%_X}PWmOg#2OKao|7HwQ}yn133)1cs%~XLWx)wMdh3RKVR;q59T7dK&K9jq zF6B4vkaou8T8NwE=V?ie6!AU0SChJPpNq%)rYb`|JYOhPL{Hl+m!_>9GVMlzt7v<5 zwRbvQB-dEVA#^4?Y!3$o#}^_}!*i$}smZqItBFcHijQn`d;`SBsOIl?=O<(}j)!72 zC$4o~_uD-HGYKsdF2e53NSl54^GE(5<=<3|~x@~lhO*Hq? zjY0y*`rC@M;zD0JA7UZ`Q=gN0B}X`M5WbHsXr}(w$xI1dFRAgD#w~do8TDd+I?0P# zl>RRI>r`j{aQY65_g81Eak%M?cP~yT%ev=G>GpeK_w2Dlai+WPK%tPlS^I(Q;J!n9zA)OEg_T$>EP1VwA*Zo? zx^4SLpZ_6mZV#+#qt;Tpz5T0Ie_P=x?R0zCI}z zE~TsprJS=e<*ODWQ_9%2q^$at7)8v9QLxly z1*pr{6_DojNSQp9`qoHs7=0tj9a*KJ~99RGN zv;165RJlRP3#;hsX_>OeLbBgposH=vW}E8X5Fuu_#~g{R`?M!HsZvGuN$!6#+t8#t z?vDkbS))IG4-C z@HKAX8R#^wjJr0Y41z%qAxlLpfzcaUH3qP3u;g_x=uB{-F+%V77>f)8$2yZD*JSOO zbaWn!&Vn%(`HbybMg9|9dY{5rWHCF_BG+X1SQJSwi!uy5$;-(U?3+et84$$kh7U z7BdgUR6AKf(TfQq6l%j7pqOeN3n+ROV1# + + + + 01 Example Defer + + + + + + + + + + + + diff --git a/03_js-dom/unterricht/tag21/02_defer-examples/02_example_defer.html b/03_js-dom/unterricht/tag21/02_defer-examples/02_example_defer.html new file mode 100644 index 0000000..e9e57a4 --- /dev/null +++ b/03_js-dom/unterricht/tag21/02_defer-examples/02_example_defer.html @@ -0,0 +1,25 @@ + + + + + 02 Example Defer + + + + + + + + + + + + + diff --git a/03_js-dom/unterricht/tag21/02_defer-examples/03_example_defer.html b/03_js-dom/unterricht/tag21/02_defer-examples/03_example_defer.html new file mode 100644 index 0000000..46de993 --- /dev/null +++ b/03_js-dom/unterricht/tag21/02_defer-examples/03_example_defer.html @@ -0,0 +1,24 @@ + + + + + 03 Example Defer + + + + + + + + + + + + diff --git a/03_js-dom/unterricht/tag21/02_defer-examples/04_dom-laden.html b/03_js-dom/unterricht/tag21/02_defer-examples/04_dom-laden.html new file mode 100644 index 0000000..8863249 --- /dev/null +++ b/03_js-dom/unterricht/tag21/02_defer-examples/04_dom-laden.html @@ -0,0 +1,26 @@ + + + + + + DOM Laden - Event DOMContentLoaded + + + + +
+
+

DOM Laden - Event DOMContentLoaded

+
+
+ + + diff --git a/03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file01.js b/03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file01.js new file mode 100644 index 0000000..ffde053 --- /dev/null +++ b/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()); diff --git a/03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file02.js b/03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file02.js new file mode 100644 index 0000000..28b3deb --- /dev/null +++ b/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()); \ No newline at end of file diff --git a/03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file03.js b/03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file03.js new file mode 100644 index 0000000..427161f --- /dev/null +++ b/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()); \ No newline at end of file diff --git a/03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file04.js b/03_js-dom/unterricht/tag21/02_defer-examples/assets/js/file04.js new file mode 100644 index 0000000..b07391c --- /dev/null +++ b/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()); \ No newline at end of file diff --git a/03_js-dom/unterricht/tag21/02_defer-examples/assets/js/helper.js b/03_js-dom/unterricht/tag21/02_defer-examples/assets/js/helper.js new file mode 100644 index 0000000..8be183f --- /dev/null +++ b/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(/,+$/,'');; +} \ No newline at end of file