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
-
-
- -
-

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 0000000..5e933b1 Binary files /dev/null and b/03_js-dom/unterricht/tag21/02_defer-examples.zip differ diff --git a/03_js-dom/unterricht/tag21/02_defer-examples/01_example_defer.html b/03_js-dom/unterricht/tag21/02_defer-examples/01_example_defer.html new file mode 100644 index 0000000..10247ec --- /dev/null +++ b/03_js-dom/unterricht/tag21/02_defer-examples/01_example_defer.html @@ -0,0 +1,25 @@ + + + + + 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