feat: init react
This commit is contained in:
Philippe Torrel
Binary file not shown.
@@ -542,83 +542,11 @@ Projektarbeit
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Einführung in React
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Tag 36
|
### Tag 36
|
||||||
|
|
||||||
**Inhalt:**
|
**Inhalt:**
|
||||||
|
|
||||||
- **Exkurs: Finalisierung Projekt Webseite in TS (Gulp)**
|
- **Exkurs: Finalisierung Projekt Webseite in TS (Gulp)**
|
||||||
- Einführung in REACT
|
|
||||||
- VDOM von REACT
|
|
||||||
- React im Vergleich zu anderen Frameworks (Stats)
|
|
||||||
- Verwendung von Bundlern
|
|
||||||
- Build Tools im Vergleich & Einführung in Vite
|
|
||||||
- Komponenten in React
|
|
||||||
|
|
||||||
**Übungen:**
|
|
||||||
|
|
||||||
Übung 01 - 03
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Tag 37
|
|
||||||
|
|
||||||
**Inhalt:**
|
|
||||||
|
|
||||||
- Einsatz von Bundlern
|
|
||||||
- Komponenten in React
|
|
||||||
- Wiederverwendbare Komponenten in React
|
|
||||||
- Gestaltungsmöglichkeiten in Frameworks
|
|
||||||
- EventHandler in React
|
|
||||||
|
|
||||||
**Übungen:**
|
|
||||||
|
|
||||||
Übung 04 - 07
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Tag 38
|
|
||||||
|
|
||||||
**Inhalt:**
|
|
||||||
|
|
||||||
- Beispiele der Gestaltungsmöglichkeiten in Frameworks
|
|
||||||
- Layout & wiederverwendbare Komponenten
|
|
||||||
- EventHandler in React
|
|
||||||
|
|
||||||
**Übungen:**
|
|
||||||
|
|
||||||
Übung 08 - 11
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Tag 39
|
|
||||||
|
|
||||||
**Inhalt:**
|
|
||||||
|
|
||||||
- Layout & wiederverwendbare Komponenten Part II
|
|
||||||
- EventHandler in React `onSubmit`, `onChange`, `onClick`
|
|
||||||
- Hooks in React.
|
|
||||||
|
|
||||||
**Übungen:**
|
|
||||||
|
|
||||||
offene Übungen.
|
|
||||||
Übung 12 - 14
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Tag 40
|
|
||||||
|
|
||||||
**Inhalt:**
|
|
||||||
|
|
||||||
- Hooks in React. `useState`, `useReducer`, `useContext`, `useId`.
|
|
||||||
- Routing in React
|
|
||||||
- Verschachtelte Routen und Layout-Komponenten
|
|
||||||
|
|
||||||
**Übungen:**
|
|
||||||
|
|
||||||
Übung 15
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|||||||
4
04_typescript/unterricht/tag36/README.md
Normal file
4
04_typescript/unterricht/tag36/README.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
# Exkurs: Webseite in TS finalisiert
|
||||||
|
|
||||||
|
- mit Copilot und mit Claude Code zum Vergleich
|
||||||
|
- Webseite Struktur mit `gulp` optimiert.
|
||||||
BIN
05_react.zip
Normal file
BIN
05_react.zip
Normal file
Binary file not shown.
15
05_react/.vscode/extensions.json
vendored
Normal file
15
05_react/.vscode/extensions.json
vendored
Normal 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
05_react/.vscode/marp-theme.css
vendored
Normal file
332
05_react/.vscode/marp-theme.css
vendored
Normal 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
05_react/.vscode/settings.json
vendored
Normal file
30
05_react/.vscode/settings.json
vendored
Normal 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
05_react/.vscode/snippets.code-snippets
vendored
Normal file
73
05_react/.vscode/snippets.code-snippets
vendored
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
||||||
618
05_react/agenda.md
Normal file
618
05_react/agenda.md
Normal file
@@ -0,0 +1,618 @@
|
|||||||
|
---
|
||||||
|
marp: true
|
||||||
|
theme: default
|
||||||
|
---
|
||||||
|
|
||||||
|
## JavaScript Grundlagen Teil 1.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 01
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Vorstellungsrunde
|
||||||
|
- Einrichtung der IDE
|
||||||
|
- Tools für die Webentwicklung (Emmet, Markdown, VS-Code)
|
||||||
|
- Arbeiten mit VSCode
|
||||||
|
- Konsolenausgaben mit `console.log()`
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
- Übungen 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
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 03
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Variablen und Konstanten in JS
|
||||||
|
- Zusammengesetzte Zuweisungsoperatoren
|
||||||
|
- Increment & Decrement
|
||||||
|
- Strings verketten mit +
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übung 7 - 12
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 04
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Escape-Notation
|
||||||
|
- Implizite und explizite Typkonvertierung
|
||||||
|
- NaN - Paradoxon
|
||||||
|
- Math Object
|
||||||
|
- Number.toFixed()
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übung 14 - 18
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 05
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Repetition der Inhalte
|
||||||
|
- Relationale Operatoren & Vergleichoperatoren
|
||||||
|
- isNaN
|
||||||
|
- Lexikographische Vergleiche
|
||||||
|
- **Exkurs: HTML-Formularfelder**
|
||||||
|
- 1:1 Meeting
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übung Kontaktformular mit HTML und BS
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 06
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- **Exkurs: HTML Formularfelder mit BS**
|
||||||
|
- if else Verzweigung und ternärer Operator
|
||||||
|
- logische Operatoren UND und ODER
|
||||||
|
- unärer Operator (!)
|
||||||
|
- String Methoden Part I
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übung 19 - 26
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 07
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- String Methoden Part II
|
||||||
|
- Funktionen in JS
|
||||||
|
- Funktionen mit Übergabeparameter
|
||||||
|
- Funktionen mit Rückgabewerten
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übung 26 - 35
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 08
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Funktionen mit Übergabeparameter
|
||||||
|
- Funktionen mit Rückgabewerten
|
||||||
|
- Guards
|
||||||
|
- Array Part 1
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übung 35 - 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 - 48
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 10
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Array.find und Array.findIndex
|
||||||
|
- Alle Array Higher Order Funktionen im Überblick
|
||||||
|
- local scoping
|
||||||
|
- **Exkurs: Schleifen**
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übung 46 - 48
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## JavaScript für Fortgeschrittene
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 11
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- 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
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 16
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- **Exkurs: Statische Webseite mit Sass und HTML Part II**
|
||||||
|
- Mehrdimensionale Arrays
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Projektarbeiten
|
||||||
|
Übungen 11 -13
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 17
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Chess-Beispiel
|
||||||
|
- Arbeiten mit Fetch API
|
||||||
|
- fetch mit Promise und async...await
|
||||||
|
- Joke API auslesen
|
||||||
|
- **Exkurs: Versionierung mit Github Part I**
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übungen 14 - 24
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 18
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- XML-HttpRequest und AJAX mit jQuery
|
||||||
|
- Node Installation (Wiederholung)
|
||||||
|
- Node Standardbib
|
||||||
|
- fs
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Projektarbeit
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 19
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- NPM Befehle
|
||||||
|
- CSV to HTML
|
||||||
|
- Node Standardbib
|
||||||
|
- zlib (stream)
|
||||||
|
- Crypto
|
||||||
|
- Abschluss von JS für Fortgeschrittene
|
||||||
|
- Projektvorstellung 1 + 2
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übungen 25 - 31
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 20
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- **Einrichtung von Git**
|
||||||
|
- **Exkurs: Webseite mit Gulp, SASS, HTML/CSS, JS**
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Projektarbeit
|
||||||
|
Übungen 31 - 32
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# JavaScript und das Document Object Model (DOM)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 21
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Einführung in JS DOM
|
||||||
|
- DOM Selection (querySelector, querySelectorAll)
|
||||||
|
- $ & $$ Helper
|
||||||
|
- CSS Selektoren
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übungen 01 - 05
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 22
|
||||||
|
|
||||||
|
- Defer & Async
|
||||||
|
- JS Dateien auslagern
|
||||||
|
- Chat Gestaltung (DOMTokenList Objekt)
|
||||||
|
- Optimierung von Projektstruktur
|
||||||
|
- Events in JS MouseEvent, KeyboardEvent
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übungen 06 - 07
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 23
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Projekt: Newsboard
|
||||||
|
- HTML Element Progress
|
||||||
|
- IDL-Attribut vs. Content-Attribut
|
||||||
|
- HTML Attribute mit boolescher Zuweisung
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übung 08 - 10
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 24
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Tooltip: HTML erweitern mit Data-Attribut
|
||||||
|
- Dataset Attribut, DOMStringMap Objekt
|
||||||
|
- getComputedStyle, Attribute mit boolscher Zuweisung
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übung 11 - 14
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 25
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- DOM Creation - Elemente erstellen
|
||||||
|
- createElement() & appendChild()
|
||||||
|
- Projekt: Produktmanager Part I
|
||||||
|
- DOM Creation Befehle
|
||||||
|
- Entfernen von Elementen
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übung 15 - 17
|
||||||
|
**Projektarbeit / Content Factory**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 26
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Import von Modulen in JS (Browserseitig)
|
||||||
|
- Separation of Concerns
|
||||||
|
- Projekt: Produktmanager final
|
||||||
|
- DOM Traversal Befehle & alle DOM Bereiche
|
||||||
|
- insertBefore(), appendChild(), append(), prepend(), before(), after()
|
||||||
|
- Refactoring von Produktmanager mit Template
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übung 18 + optionale Übungen
|
||||||
|
**Projektarbeit / Content Factory**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 27
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- **Exkurs: Weitere Events: Drag and Drop**
|
||||||
|
- **Rest API erstellen mit Express**
|
||||||
|
- JS DOM Projektvorstellung
|
||||||
|
- Abschlussquiz JS DOM
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Projekte
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 28
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- **Exkurs: DOM Inhalte über REST API mit Express Part I**
|
||||||
|
- **Routing in JS**
|
||||||
|
- CRUD - Create - (Read) - Update - Delete
|
||||||
|
- Object Methoden.
|
||||||
|
- Verwendung von Modulen (Bootstrap)
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Projekte & optionale Übungen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 29
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- **Exkurs: DOM Inhalte über mit REST API Express**
|
||||||
|
- **Erweiterung Frontend um REST API**
|
||||||
|
- CRUD - Create - Read - Update - Delete
|
||||||
|
- BREAD - Browse - Read - Edit - Add - Delete
|
||||||
|
- Verwendung von Modulen (Modal von BS, Toastify, Splide)
|
||||||
|
|
||||||
|
**Übungen**
|
||||||
|
|
||||||
|
Projekte + weiteres Modul einbinden
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Tag 30
|
||||||
|
|
||||||
|
- **Projektfinalisierung Express + REST API**
|
||||||
|
- Einführung in Typescript
|
||||||
|
- Meeting
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Tag 31
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Typescript Grundlagen
|
||||||
|
- Typescript Annotationen
|
||||||
|
- Typescript "more Types"
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übungen 1 - 5
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Tag 32
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Typescript Annotationen
|
||||||
|
- Primitive Types, Object, Union Types
|
||||||
|
- type statement vs interface
|
||||||
|
- Type Assertion with as and <>
|
||||||
|
- Typescript "more Types"
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übungen 4 - 9
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Tag 33
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Typescript "more Types"
|
||||||
|
- Interface, as statement, literale
|
||||||
|
- Typescript Narrowing with Guards
|
||||||
|
- truthiness, equality, in-operator, type-predicate
|
||||||
|
- TS Funktionen und Objekte
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übungen 10 - 19
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Tag 34
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- TS Funktionen und Objekte
|
||||||
|
- Abschluss TypeScript Grundlagen
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übungen 20 - 31
|
||||||
|
Projektarbeit
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Tag 35
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Abschlussquiz
|
||||||
|
- Projekt-Webseite in TS
|
||||||
|
- Optimierung mit KI
|
||||||
|
- 1:1 Meeting
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Projektarbeit
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Tag 36
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- **Exkurs: Finalisierung Projekt Webseite in TS (Gulp)**
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Einführung in React
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
### Tag 37
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Einführung in REACT
|
||||||
|
- VDOM von REACT
|
||||||
|
- Build Tools im Vergleich & Einführung in Vite
|
||||||
|
- Komponenten in React
|
||||||
|
- Wiederverwendbare Komponenten in React
|
||||||
|
- Gestaltungsmöglichkeiten in Frameworks
|
||||||
|
- EventHandler in React
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übung 01 - 5
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Tag 38
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Beispiele der Gestaltungsmöglichkeiten in Frameworks
|
||||||
|
- Layout & wiederverwendbare Komponenten
|
||||||
|
- EventHandler in React
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übung 08 - 11
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Tag 39
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Layout & wiederverwendbare Komponenten Part II
|
||||||
|
- EventHandler in React `onSubmit`, `onChange`, `onClick`
|
||||||
|
- Hooks in React.
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
offene Übungen.
|
||||||
|
Übung 12 - 14
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Tag 40
|
||||||
|
|
||||||
|
**Inhalt:**
|
||||||
|
|
||||||
|
- Hooks in React. `useState`, `useReducer`, `useContext`, `useId`.
|
||||||
|
- Routing in React
|
||||||
|
- Verschachtelte Routen und Layout-Komponenten
|
||||||
|
|
||||||
|
**Übungen:**
|
||||||
|
|
||||||
|
Übung 15
|
||||||
|
|
||||||
|
---
|
||||||
Binary file not shown.
@@ -1,14 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "webseite-gulp-ts-frontend",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "",
|
|
||||||
"main": "gulpfile.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"keywords": [],
|
|
||||||
"type": "module",
|
|
||||||
"devDependencies": {
|
|
||||||
"gulp": "^5.0.1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
2
webseite-gulp-ts/frontend/package-lock.json
generated
2
webseite-gulp-ts/frontend/package-lock.json
generated
@@ -25,7 +25,7 @@
|
|||||||
"@rollup/plugin-replace": "^6.0.3",
|
"@rollup/plugin-replace": "^6.0.3",
|
||||||
"@rollup/plugin-typescript": "^12.3.0",
|
"@rollup/plugin-typescript": "^12.3.0",
|
||||||
"@rollup/stream": "^3.0.1",
|
"@rollup/stream": "^3.0.1",
|
||||||
"@types/bootstrap": "^5.2.10",
|
"@types/bootstrap": "^5.2.11",
|
||||||
"@types/toastify-js": "^1.12.4",
|
"@types/toastify-js": "^1.12.4",
|
||||||
"browser-sync": "^3.0.4",
|
"browser-sync": "^3.0.4",
|
||||||
"core-js": "^3.46.0",
|
"core-js": "^3.46.0",
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
"@rollup/plugin-replace": "^6.0.3",
|
"@rollup/plugin-replace": "^6.0.3",
|
||||||
"@rollup/plugin-typescript": "^12.3.0",
|
"@rollup/plugin-typescript": "^12.3.0",
|
||||||
"@rollup/stream": "^3.0.1",
|
"@rollup/stream": "^3.0.1",
|
||||||
"@types/bootstrap": "^5.2.10",
|
"@types/bootstrap": "^5.2.11",
|
||||||
"@types/toastify-js": "^1.12.4",
|
"@types/toastify-js": "^1.12.4",
|
||||||
"browser-sync": "^3.0.4",
|
"browser-sync": "^3.0.4",
|
||||||
"core-js": "^3.46.0",
|
"core-js": "^3.46.0",
|
||||||
|
|||||||
@@ -110,7 +110,7 @@ const ProductManager = (el: HTMLElement | null = null): ProductManagerApi | null
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClickSave = (e: MouseEvent): void => {
|
const onClickSave = (e: PointerEvent): void => {
|
||||||
const btnEl = e.currentTarget as HTMLButtonElement;
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
||||||
const icon = query<HTMLElement>(btnEl, 'i');
|
const icon = query<HTMLElement>(btnEl, 'i');
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user