This commit is contained in:
Philippe Torrel
2026-09-21 12:10:33 +02:00
parent 6650b361c3
commit f11bf06d0a
14 changed files with 959 additions and 56 deletions
-56
View File
@@ -1,56 +0,0 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></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></h1>
</div>
</main>
<script>
'use strict';
const products = [
'Game of Thrones Wax Seal Coasters',
'Electronic Butterfly in a Jar',
'Aquafarm: Aquaponics Fish Garden',
'Cassette Adapter Bluetooth',
'Marvel Comics Lightweight Infinity Scarf',
'Ollie - The App Controlled Robot',
'Sound Splash Bluetooth Waterproof Shower Speaker',
'PowerCube',
'Backpack of Holding',
'Retro Duo Portable NES/SNES Game System',
'Universal Gadget Wrist Charger',
'USB Squirming Tentacle',
'USB Fishquarium',
'Space Bar Keyboard Organizer & USB Hub Pop',
'USB Pet Rock',
'Powerstation 5- E. Maximus Chargus',
'Dual Heated Travel Mug',
'Crosley Collegiate Portable USB Turntable',
'Meh Hoodie',
'Magnetic Accelerator Cannon',
];
outputEl.innerHTML = ''; // output Element leeren
letters.forEach((letter) => {
// Guard
if (getItemsByLetter(letter, products).length === 0) return;
console.log(`======= ${letter} ========`);
console.log(getItemsByLetter(letter, products).join('\n'));
console.log('==========================');
outputEl.innerHTML += `<h3 class="text-center">${letter}</h3>`;
outputEl.innerHTML += `<ul class="list-group"><li class="list-group-item">${getItemsByLetter(letter, products).join('</li><li class="list-group-item">')}</li></ul>`;
outputEl.innerHTML += '<hr />';
});
</script>
</body>
</html>
+15
View File
@@ -0,0 +1,15 @@
{
"recommendations": [
"kamikillerto.vscode-colorize",
"sleistner.vscode-fileutils",
"bierner.github-markdown-preview",
"bradgashler.htmltagwrap",
"zhuangtongfa.material-theme",
"techer.open-in-browser",
"esbenp.prettier-vscode",
"pdconsec.vscode-print",
"vscode-icons-team.vscode-icons",
"formulahendry.auto-rename-tag",
"tomoki1207.pdf"
]
}
+332
View File
@@ -0,0 +1,332 @@
/* @theme marp-theme */
@charset "UTF-8";
/*!
* Marp Dracula theme.
* @theme marp-theme
* @author Daniel Nicolas Gisolfi & modified by Philippe Botzek
*
* @auto-scaling true
* @size 4:3 960px 720px
* @size 16:9 1280px 720px
*/
@import url('https://fonts.googleapis.com/css?family=Lato:400,900|IBM+Plex+Sans:400,700');
:root {
--dracula-background: #282a36;
--dracula-current-line: #44475a;
--dracula-foreground: #f8f8f2;
--dracula-comment: #6272a4;
--dracula-cyan: #8be9fd;
--dracula-green: #50fa7b;
--dracula-orange: #ffb86c;
--dracula-pink: #ff79c6;
--dracula-purple: #bd93f9;
--dracula-red: #ff5555;
--dracula-yellow: #f1fa8c;
}
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: var(--dracula-background);
}
/* Dracula Foreground */
.hljs,
.hljs-subst,
.hljs-typing,
.hljs-variable,
.hljs-template-variable {
color: var(--dracula-foreground);
}
/* Dracula Comment */
.hljs-comment,
.hljs-quote,
.hljs-deletion {
color: var(--dracula-comment);
}
/* Dracula Cyan */
.hljs-meta .hljs-doctag,
.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link,
.hljs-class {
color: var(--dracula-cyan);
}
/* Dracula Green */
.hljs-title {
color: var(--dracula-green);
}
/* Dracula Orange */
.hljs-params {
color: var(--dracula-orange);
}
/* Dracula Pink */
.hljs-keyword {
color: var(--dracula-pink);
}
/* Dracula Purple */
.hljs-literal,
.hljs-number {
color: var(--dracula-purple);
}
/* Dracula Red */
.hljs-regexp {
color: var(--dracula-red);
}
/* Dracula Yellow */
.hljs-string,
.hljs-name,
.hljs-type,
.hljs-attr,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-template-tag {
color: var(--dracula-yellow);
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
font-weight: bold;
}
.hljs-params,
.hljs-emphasis {
font-style: italic;
}
svg[data-marp-fitting='svg'] {
max-height: 580px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0.5em 0 0 0;
color: var(--dracula-pink);
}
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
font-weight: inherit;
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.3em;
}
h4 {
font-size: 1.1em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.9em;
}
p,
blockquote {
margin: 1em 0 0 0;
}
ul > li,
ol > li {
margin: 0.3em 0 0 0;
color: var(--dracula-cyan);
}
ul > li > p,
ol > li > p {
margin: 0.6em 0 0 0;
}
code {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8em;
letter-spacing: 0;
margin: -0.1em 0.15em;
padding: 0.1em 0.2em;
vertical-align: baseline;
color: var(--dracula-green);
}
pre {
display: block;
margin: 1em 0 0 0;
min-height: 1em;
overflow: visible;
}
pre code {
box-sizing: border-box;
margin: 0;
min-width: 100%;
padding: 0.5em;
font-size: 0.7em;
}
pre code svg[data-marp-fitting='svg'] {
max-height: calc(580px - 1em);
}
blockquote {
margin: 1em 0 0 0;
padding: 0 1em;
position: relative;
color: var(--dracula-orange);
}
blockquote::after,
blockquote::before {
content: '“';
display: block;
font-family: 'Times New Roman', serif;
font-weight: bold;
position: absolute;
color: var(--dracula-green);
}
blockquote::before {
top: 0;
left: 0;
}
blockquote::after {
right: 0;
bottom: 0;
transform: rotate(180deg);
}
blockquote > *:first-child {
margin-top: 0;
}
mark {
background: transparent;
}
table {
border-spacing: 0;
border-collapse: collapse;
margin: 1em 0 0 0;
}
table th,
table td {
padding: 0.2em 0.4em;
border-width: 1px;
border-style: solid;
}
section {
font-size: 35px;
font-family: 'IBM Plex Sans';
line-height: 1.35;
letter-spacing: 1.25px;
padding: 70px;
color: var(--dracula-foreground);
background-color: var(--dracula-background);
}
section > *:first-child,
section > header:first-child + * {
margin-top: 0;
}
section a,
section mark {
color: var(--dracula-red);
}
section code {
background: var(--dracula-current-line);
color: var(--dracula-current-green);
}
section h1 strong,
section h2 strong,
section h3 strong,
section h4 strong,
section h5 strong,
section h6 strong {
color: var(--dracula-current-line);
}
section pre > code {
background: var(--dracula-current-line);
}
section header,
section footer,
section section::after,
section blockquote::before,
section blockquote::after {
color: var(--dracula-comment);
}
section table th,
section table td {
border-color: var(--dracula-current-line);
}
section table thead th {
background: var(--dracula-current-line);
color: var(--dracula-yellow);
}
section table tbody > tr:nth-child(even) td,
section table tbody > tr:nth-child(even) th {
background: var(--dracula-current-line);
}
header,
footer,
section::after {
box-sizing: border-box;
font-size: 66%;
height: 70px;
line-height: 50px;
overflow: hidden;
padding: 10px 25px;
position: absolute;
color: var(--dracula-comment);
}
header {
left: 0;
right: 0;
top: 0;
}
footer {
left: 0;
right: 0;
bottom: 0;
}
section::after {
right: 0;
bottom: 0;
font-size: 80%;
}
+30
View File
@@ -0,0 +1,30 @@
{
"workbench.iconTheme": "vscode-icons",
"workbench.colorTheme": "One Dark Pro",
"prettier.printWidth": 120,
"prettier.singleQuote": true,
"editor.hover.enabled": "on",
"editor.wordWrap": "on",
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"editor.quickSuggestionsDelay": 600,
"editor.tabSize": 2,
"editor.formatOnSave": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"ejs": "html"
},
"html.format.unformatted": "wbr,%",
"files.associations": {
"*.ejs": "html"
},
"editor.fontFamily": "'MesloLGS NF', Hack, Consolas, 'Courier New', monospace",
"oneDarkPro.markdownStyle": false,
"explorer.compactFolders": false,
"workbench.editor.labelFormat": "short",
"editor.hover.delay": 800,
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
"markdown.marp.themes": ["./.vscode/marp-theme.css"],
"markdown-preview-github-styles.colorTheme": "light"
}
+73
View File
@@ -0,0 +1,73 @@
{
"Output HTML Element": {
"scope": "html",
"prefix": "output",
"body": ["<div class=\"output alert alert-secondary my-3\"></div>"],
"description": "generate a div Element with output alert and alert secondary class"
},
"Bootstrap html": {
"scope": "html",
"prefix": "!bs",
"body": [
"<!DOCTYPE html>",
"<html lang=\"de\">",
"\t<head>",
"\t\t<meta charset=\"UTF-8\" />",
"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />",
"\t\t<title>$0</title>",
"\t\t<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\" rel=\"stylesheet\" />",
"\t</head>",
"\t<body>",
"\t\t<main>",
"\t\t\t<div class=\"container py-5\">",
"\t\t\t\t<h1>$0</h1>",
"\t\t\t</div>",
"\t\t</main>",
"\t\t<script>",
"\t\t\t'use strict';",
"\t\t\t",
"\t\t</script>",
"\t</body>",
"</html>"
],
"description": "Generate HTML with Bootstrap CDN and script-tag"
},
"$ und $$ helper function": {
"scope": "javascript,typescript",
"prefix": "$$$",
"body": [
"const $ = (qs) => document.querySelector(qs);",
"const $$ = (qs) => Array.from(document.querySelectorAll(qs));"
],
"description": "$ and $$ shorthand helper function"
},
"JavaScript Dateivorlage": {
"scope": "javascript,typescript",
"prefix": "vjs",
"body": [
"'use strict';",
"",
"(() => {",
"",
"\t// === DOM & VARS =======",
"\tconst DOM = {};",
"",
"\t// === INIT =============",
"\tconst init = () => {",
"",
"\t}",
"",
"\t// === EVENTHANDLER =====",
"",
"\t// === XHR/FETCH ========",
"",
"\t// === FUNCTIONS ========",
"",
"\tinit();",
"",
"})();"
],
"description": "JavaScript Dateivorlage"
}
}
+237
View File
@@ -0,0 +1,237 @@
---
marp: true
theme: default
---
## JavaScript Grundlagen Teil 1.
---
#### Tag 01
**Inhalt:**
- Vorstellungsrunde
- Einrichtung der IDE
- Tools für die Webentwicklung (Emmet, Markdown, VS-Code, Co-Pilot)
- Arbeiten mit VSCode
- Konsolenausgaben mit `console.log()`
**Übungen:**
- Übungen: 1 - 3, Content Factory
---
#### Tag 02
**Inhalt:**
- Dialogfenster in JS `prompt()`, `alert()`, `confirm()`
- Kommentare in JS
- Rechnen in JS
- Datentyp String, Number, Boolean
- literal und typeof
- Prioritätsreihenfolge
**Übungen:**
Übung 3 - 6 (Content-Factory bis 1.3.3)
---
#### Tag 03
**Inhalt:**
- Variablen und Konstanten in JS
- Zusammengesetzte Zuweisungsoperatoren
- Increment & Decrement
- Strings verketten mit +
- Escape-Notation
- Implizite und explizite Typkonvertierung
**Übungen:**
Übung 7 - 12
---
#### Tag 04
**Inhalt:**
- Escape-Notation
- Implizite und explizite Typkonvertierung
- NaN - Paradoxon
- Math Object
- Number.toFixed()
- isNaN
- Lexikographische Vergleiche
**Übungen:**
Übung 14 - 18
---
#### Tag 05
**Inhalt:**
- Repetition der Inhalte
- Relationale Operatoren & Vergleichoperatoren
- **Exkurs: Webseitenstruktur + SASS HTML-Formularfelder**
- 1:1 Meeting
**Übungen:**
Übung Kontaktformular mit HTML und BS,
Lektion 10 erarbeiten
---
#### Tag 06
**Inhalt:**
- **Exkurs: HTML Formularfelder mit BS**
- if else Verzweigung und ternärer Operator
**Übungen:**
Übung 19 - 21 + Kontaktformular
---
#### Tag 07
**Inhalt:**
- logische Operatoren UND und ODER
- unärer Operator (!)
- String Methoden
- Funktionen in JS + mit Übergabeparameter + mit Rückgabewerten
**Übungen:**
Übung 22 - 31
---
#### Tag 08
**Inhalt:**
- Funktionen mit Rückgabewerten
- Guards, Restparameter, Defaulparameter
- Array Part 1
**Übungen:**
Übung 32 - 38
---
#### Tag 09
**Inhalt:**
- Array Methoden toSorted, toReversed, toSpliced
- toSorted, toReversed
- Array sort mit "compare function"
- Array: Higher Order Funktionen Part (sort map, forEach, reduce, some, every)
**Übungen:**
Übung 39 - 45 + optionale Übung
---
#### Tag 10
**Inhalt:**
- Array.find und Array.findIndex
- Alle Array Higher Order Funktionen im Überblick
- local scoping
- Git SCM und Windows Terminal einrichten
**Übungen:**
Übung 46 - 48
---
## JavaScript für Fortgeschrittene
---
#### Tag 11
**Inhalt:**
- **Exkurs: Schleifen**
- Einführung in JS für Fortgeschrittene
- Objekte in JS
**Übungen:**
Projektarbeit
Abschlussquiz - JS Grundlagen
---
#### Tag 12
**Inhalt:**
- Destructuring von Objekten und Arrays
- Rekursion
**Übungen:**
Übung 01 - 10
---
#### Tag 13
**Inhalt:**
- Promises
- Callback-Hell
- Installation von node (npm) und Windows Terminal (für Node)
- **Exkurs: Statische Webseite mit Sass und HTML**
- **Exkurs: Versionierung mit Github Part I**
**Übungen:**
---
#### Tag 14
**Inhalt:**
- Promise Aufbau
- Promise in Funktionen
- File System von Node
- commonjs vs esm
- async await
**Übungen:**
Übung 09 - 11
---
#### Tag 15
**Inhalt:**
- Wiederholung der Inhalte
- Promise.all()
- **Exkurs: Switch Case Abfragen**
- **Exkurs: Statische Webseite mit Sass und HTML**
- **Exkurs: Versionierung mit Github Part I**
- 1:1 Meeting
Binary file not shown.
@@ -0,0 +1,67 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS for-statement (for...Schleife)</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>JS for-statement (for...Schleife)</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for">for-statement</a> -
Die <strong>for Anweisung</strong> beschreibt eine Schleife mit drei optionalen Ausdrücken und einer oder
mehreren Anweisungen.
</p>
</div>
</main>
<script>
'use strict';
const names = [
'Christian', //
'Florian',
'Stefan',
'Benjamin',
'Philippe',
];
// deklarativen Stil (was...)
names.forEach((name, idx) => {
console.log(`Index: ${idx}, Name: ${name}`);
});
console.log('==============');
// imperativen Stil (wie...)
// Schleife - for([Initialisierung]; [Bedingung]; [Inkrementierung]) Anweisung
for (let i = 0; i < names.length; i++) {
console.log(`Index: ${i}, Name: ${names[i]}`);
}
console.log('weiter im code...');
let nums = [];
for (let i = 0; i <= 20; i += 2) {
i += 3;
nums.push(i++);
i += 2;
}
console.log(nums); //=> [3, 11, 19]
nums = [];
for (let i = 8; i <= 29; i += 3) {
i += 3;
nums.push(i++);
i += 4;
nums.push(++i);
}
console.log(nums); //=> [11, 17, 23, 29]
</script>
</body>
</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>JS for- of statement (for...of Schleife)</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>JS for- of statement (for...of Schleife)</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...of">
for...of statement
</a>
- Mit dem <strong>for...of</strong> statement können sogenannte iterable objects durchlaufen werden (Array,
Map, Set, das "arguments" Objekt und weitere eingeschlossen), wobei auf jeden gefundenen Wert eigene
Statements ausgeführt werden können.
</p>
</div>
</main>
<script>
'use strict';
const names = [
'Christian', //
'Florian',
'Stefan',
'Benjamin',
'Philippe',
];
// deklarativen Stil (was...)
names.forEach((name, idx) => {
console.log(`Index: ${idx}, Name: ${name}`);
});
console.log('==============');
// imperativen Stil (wie...)
for (const name of names) {
console.log(`Index: ${names.indexOf(name)}, Name: ${name}`);
}
// Arrayähnliche Objekte
const nodes = document.querySelectorAll('div'); // => NodeList(1) [div.container.py-5]
const classes = nodes[0].classList; // => DOMTokenList(3) ['container', 'py-5', value: 'container py-5']
console.log(nodes, Array.from(nodes));
console.log(classes, Array.from(classes));
</script>
</body>
</html>
@@ -0,0 +1,51 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS for...in statement (for...in Schleife)</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>JS for...in statement (for...in Schleife)</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...in">
for...in statement
</a>
- iteriert über alle zählbaren String-Eigenschaften eines Objekts (ignoriert Eigenschaften, die durch Symbole
gekennzeichnet sind), einschließlich geerbter zählbarer Eigenschaften.
</p>
</div>
</main>
<script>
'use strict';
const personObj = {
firstName: 'John',
lastName: 'Wick',
age: 38,
hobbies: ['shooting', 'driving', 'fighting'],
};
personObj.weight = 90;
const prop = 'age';
console.table(personObj);
console.log(personObj.firstName); // => John
console.log(personObj.age); // => 38
console.log(personObj['firstName']); // => John
console.log(personObj[prop]); // => 38
console.log('==============');
for (const prop in personObj) {
console.log(`Key: ${prop}, Value: ${personObj[prop]}`);
}
</script>
</body>
</html>
@@ -0,0 +1,48 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS while - (while - Schleife)</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>JS while - (while - Schleife)</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/while">while - Schleife</a>
- Die <strong>while-Anweisung</strong> (Engl. statement) beschreibt eine Schleife, die solange durchlaufen
wird wie die Schleifenbedingung wahr (Engl. true) ergibt. Die Schleifenbedingung (Engl. condition) wird am
Anfang der Schleife ausgewertet.
</p>
</div>
</main>
<script>
'use strict';
const names = [
'Christian', //
'Florian',
'Stefan',
'Benjamin',
'Philippe',
];
// deklarativen Stil (was...)
names.forEach((name, idx) => {
console.log(`Index: ${idx}, Name: ${name}`);
});
console.log('==============');
// imperativen Stil (wie...)
let i = 0;
while (i < names.length) {
console.log(`Index: ${i}, Name: ${names[i]}`);
i++;
}
</script>
</body>
</html>
@@ -0,0 +1,51 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS do...while - (do...while - Schleife)</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>JS do...while - (do...while - Schleife)</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/do...while"
>do...while - Schleife
</a>
- Die <strong>do...while-Anweisung</strong> (Engl. statement) beschreibt eine Schleife, die solange
durchlaufen wird wie die Schleifenbedingung wahr (Engl. true) ergibt. Die Schleifenbedingung (Engl. condition)
wird am Ende der Schleife ausgewertet.
</p>
</div>
</main>
<script>
'use strict';
const names = [
'Christian', //
'Florian',
'Stefan',
'Benjamin',
'Philippe',
];
// deklarativen Stil (was...)
names.forEach((name, idx) => {
console.log(`Index: ${idx}, Name: ${name}`);
});
console.log('==============');
// imperativen Stil (wie...)
let i = 0;
do {
console.log(`Index: ${i}, Name: ${names[i]}`);
i++;
} while (i < names.length);
</script>
</body>
</html>