init typescript
This commit is contained in:
Philippe Torrel
@@ -461,6 +461,8 @@ Projekte + weiteres Modul einbinden
|
||||
|
||||
#### Tag 30
|
||||
|
||||
- **Projekt mit KI**
|
||||
- **Projektfinalisierung Express + REST API**
|
||||
- Einführung in Typescript
|
||||
- 1:1 Meeting
|
||||
- Meeting
|
||||
|
||||
---
|
||||
|
||||
114
03_dom/docs copy/nodejs-installation.md
Normal file
114
03_dom/docs copy/nodejs-installation.md
Normal file
@@ -0,0 +1,114 @@
|
||||
## NVM - Node Version Manager
|
||||
|
||||
nvm ist ein Versionsmanager für node.js. Über nvm können mehrere unterschiedliche Node Versionen installiert werden. NVM wird über die Konsole aufgerufen und ist mit verschiedenen Shells kompatibel (sh, dash, ksh, zsh, bash).
|
||||
|
||||
#### Links
|
||||
|
||||
- <https://github.com/coreybutler/nvm-windows> (Win)
|
||||
- <https://github.com/nvm-sh/nvm> (Mac OS)
|
||||
|
||||
#### Installation Windows
|
||||
|
||||
1. Lade den NVM-Installer über folgenden Link herunter: <https://github.com/coreybutler/nvm-windows/releases>
|
||||
2. Installiere NVM über den [Installer](https://github.com/coreybutler/nvm-windows/releases/download/1.2.2/nvm-setup.zip)
|
||||
3. Sollte vorher bereits NodeJS global ohne NVM installiert worden sein, wird empfohlen die vorherige NodeJS Version zu [deinstallieren](https://stackoverflow.com/a/55300310).
|
||||
|
||||
### Installation Mac OS
|
||||
|
||||
- Installiere NVM über die Konsole mit:
|
||||
|
||||
```bash
|
||||
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash
|
||||
```
|
||||
|
||||
- Füge den Pfad zum NVM Ordner zur Shell-Config hinzu. (`~/.bash_profile`, `~/.zshrc`, `~/.profile`, or `~/.bashrc`).
|
||||
|
||||
```bash
|
||||
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
|
||||
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
|
||||
```
|
||||
|
||||
- Aktuelle Informationen zur Installation findet man unter folgendem Link: <https://github.com/nvm-sh/nvm>
|
||||
|
||||
#### Erste Schritte
|
||||
|
||||
Sobald NVM erfolgreich installiert wurde kann man über nvm in der Konsole eine neue Node Version mit folgendem Befehl installieren:
|
||||
|
||||
```bash
|
||||
nvm install [NODE VERSIONSNUMMER]
|
||||
```
|
||||
|
||||
> Hinweis: Die aktuellste Versionsnummer von NodeJS findet man am einfachsten auf der [NodeJS-Seite](https://nodejs.org/en/)
|
||||
|
||||
Installierte Node Versionen auflisten
|
||||
|
||||
```bash
|
||||
nvm list
|
||||
```
|
||||
|
||||
Node Version verwenden/wechseln
|
||||
|
||||
```bash
|
||||
nvm use [NODE VERSIONSNUMMER]
|
||||
```
|
||||
|
||||
Node Version als Standard einrichten
|
||||
|
||||
```bash
|
||||
nvm alias default [NODE VERSIONSNUMMER]
|
||||
```
|
||||
|
||||
## Node.js
|
||||
|
||||
### Definition
|
||||
|
||||
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
|
||||
|
||||
## Neues Projekt erstellen
|
||||
|
||||
- Über die Konsole in den Projektordner gehen.
|
||||
|
||||
Projektordner wechsel über "change directory" (cd)
|
||||
|
||||
```bash
|
||||
cd [projektpfad]
|
||||
```
|
||||
|
||||
- Eigene Package.json Datei generieren (nur einmalig bei einem neuen Projekt notwendig.)
|
||||
|
||||
```bash
|
||||
npm init
|
||||
```
|
||||
|
||||
- Module installieren, die nur für die Entwicklung benötigt werden. (devDependicies)
|
||||
|
||||
| Befehl | Zweck |
|
||||
| ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `npm install Modul@Version` | installiere Modul in der Version Version (semantic versioning) |
|
||||
| `npm install Modul@Version --save`<br>`npm install Modul@Version -S` | Modul wird in der Datei `package.json` unter dependencies hinzugefügt (Mittlerweile default) |
|
||||
| `npm install Modul@Version --save-dev`<br>`npm install Modul@Version -D` | Modul wird in der Datei `package.json` unter devdependencies hinzugefügt |
|
||||
| `npm install Modul@Version --global`<br>`npm install Modul@Version -g` | Modul wird global installiert. (Von jedem Ordner aus anwendbar) |
|
||||
| `npm uninstall Modul@Version` | entfernt Modul aus `node_modules` |
|
||||
| `npm uninstall Modul@Version --save` | entfernt Modul aus `node_modules` und aus der dependencies- Eigenschaft in der `package.json`. |
|
||||
| `npm update Modul` | Aktualisiert Modul auf die neueste Version |
|
||||
| `npm update Modul --save` | Aktualisiert Modul auf die neueste Version und auch die Versionsnummer der dependencies- Eigenschaft in der `package.json`. |
|
||||
| `npm init` | erstellt eine package.json-Datei (der Befehl fragt die Eigenschaften ab) |
|
||||
| `npm init --yes` | erstellt eine package.json-Datei (der Befehl setzt Default-Werte ein) |
|
||||
| `npm list` | listet alle installierten Module auf. |
|
||||
| `npm search` | Suchbegriff sucht Module, deren Namen den Suchbegriff enthält |
|
||||
|
||||
# Globale Module
|
||||
|
||||
## SASS
|
||||
|
||||
### Definition
|
||||
|
||||
> Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
|
||||
|
||||
Sass ist eine CSS-Preprocessor Sprache.
|
||||
|
||||
```bash
|
||||
npm install sass -g
|
||||
```
|
||||
|
||||
## Liste von verwendeten Modulen
|
||||
BIN
03_dom/docs copy/nodejs-installation.pdf
Normal file
BIN
03_dom/docs copy/nodejs-installation.pdf
Normal file
Binary file not shown.
BIN
04_typescript.zip
Normal file
BIN
04_typescript.zip
Normal file
Binary file not shown.
15
04_typescript/.vscode/extensions.json
vendored
Normal file
15
04_typescript/.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
04_typescript/.vscode/marp-theme.css
vendored
Normal file
332
04_typescript/.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
04_typescript/.vscode/settings.json
vendored
Normal file
30
04_typescript/.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
04_typescript/.vscode/snippets.code-snippets
vendored
Normal file
73
04_typescript/.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"
|
||||
}
|
||||
}
|
||||
512
04_typescript/agenda.md
Normal file
512
04_typescript/agenda.md
Normal file
@@ -0,0 +1,512 @@
|
||||
---
|
||||
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, 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 - 18
|
||||
114
04_typescript/docs/nodejs-installation.md
Normal file
114
04_typescript/docs/nodejs-installation.md
Normal file
@@ -0,0 +1,114 @@
|
||||
## NVM - Node Version Manager
|
||||
|
||||
nvm ist ein Versionsmanager für node.js. Über nvm können mehrere unterschiedliche Node Versionen installiert werden. NVM wird über die Konsole aufgerufen und ist mit verschiedenen Shells kompatibel (sh, dash, ksh, zsh, bash).
|
||||
|
||||
#### Links
|
||||
|
||||
- <https://github.com/coreybutler/nvm-windows> (Win)
|
||||
- <https://github.com/nvm-sh/nvm> (Mac OS)
|
||||
|
||||
#### Installation Windows
|
||||
|
||||
1. Lade den NVM-Installer über folgenden Link herunter: <https://github.com/coreybutler/nvm-windows/releases>
|
||||
2. Installiere NVM über den [Installer](https://github.com/coreybutler/nvm-windows/releases/download/1.2.2/nvm-setup.zip)
|
||||
3. Sollte vorher bereits NodeJS global ohne NVM installiert worden sein, wird empfohlen die vorherige NodeJS Version zu [deinstallieren](https://stackoverflow.com/a/55300310).
|
||||
|
||||
### Installation Mac OS
|
||||
|
||||
- Installiere NVM über die Konsole mit:
|
||||
|
||||
```bash
|
||||
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash
|
||||
```
|
||||
|
||||
- Füge den Pfad zum NVM Ordner zur Shell-Config hinzu. (`~/.bash_profile`, `~/.zshrc`, `~/.profile`, or `~/.bashrc`).
|
||||
|
||||
```bash
|
||||
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
|
||||
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
|
||||
```
|
||||
|
||||
- Aktuelle Informationen zur Installation findet man unter folgendem Link: <https://github.com/nvm-sh/nvm>
|
||||
|
||||
#### Erste Schritte
|
||||
|
||||
Sobald NVM erfolgreich installiert wurde kann man über nvm in der Konsole eine neue Node Version mit folgendem Befehl installieren:
|
||||
|
||||
```bash
|
||||
nvm install [NODE VERSIONSNUMMER]
|
||||
```
|
||||
|
||||
> Hinweis: Die aktuellste Versionsnummer von NodeJS findet man am einfachsten auf der [NodeJS-Seite](https://nodejs.org/en/)
|
||||
|
||||
Installierte Node Versionen auflisten
|
||||
|
||||
```bash
|
||||
nvm list
|
||||
```
|
||||
|
||||
Node Version verwenden/wechseln
|
||||
|
||||
```bash
|
||||
nvm use [NODE VERSIONSNUMMER]
|
||||
```
|
||||
|
||||
Node Version als Standard einrichten
|
||||
|
||||
```bash
|
||||
nvm alias default [NODE VERSIONSNUMMER]
|
||||
```
|
||||
|
||||
## Node.js
|
||||
|
||||
### Definition
|
||||
|
||||
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
|
||||
|
||||
## Neues Projekt erstellen
|
||||
|
||||
- Über die Konsole in den Projektordner gehen.
|
||||
|
||||
Projektordner wechsel über "change directory" (cd)
|
||||
|
||||
```bash
|
||||
cd [projektpfad]
|
||||
```
|
||||
|
||||
- Eigene Package.json Datei generieren (nur einmalig bei einem neuen Projekt notwendig.)
|
||||
|
||||
```bash
|
||||
npm init
|
||||
```
|
||||
|
||||
- Module installieren, die nur für die Entwicklung benötigt werden. (devDependicies)
|
||||
|
||||
| Befehl | Zweck |
|
||||
| ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `npm install Modul@Version` | installiere Modul in der Version Version (semantic versioning) |
|
||||
| `npm install Modul@Version --save`<br>`npm install Modul@Version -S` | Modul wird in der Datei `package.json` unter dependencies hinzugefügt (Mittlerweile default) |
|
||||
| `npm install Modul@Version --save-dev`<br>`npm install Modul@Version -D` | Modul wird in der Datei `package.json` unter devdependencies hinzugefügt |
|
||||
| `npm install Modul@Version --global`<br>`npm install Modul@Version -g` | Modul wird global installiert. (Von jedem Ordner aus anwendbar) |
|
||||
| `npm uninstall Modul@Version` | entfernt Modul aus `node_modules` |
|
||||
| `npm uninstall Modul@Version --save` | entfernt Modul aus `node_modules` und aus der dependencies- Eigenschaft in der `package.json`. |
|
||||
| `npm update Modul` | Aktualisiert Modul auf die neueste Version |
|
||||
| `npm update Modul --save` | Aktualisiert Modul auf die neueste Version und auch die Versionsnummer der dependencies- Eigenschaft in der `package.json`. |
|
||||
| `npm init` | erstellt eine package.json-Datei (der Befehl fragt die Eigenschaften ab) |
|
||||
| `npm init --yes` | erstellt eine package.json-Datei (der Befehl setzt Default-Werte ein) |
|
||||
| `npm list` | listet alle installierten Module auf. |
|
||||
| `npm search` | Suchbegriff sucht Module, deren Namen den Suchbegriff enthält |
|
||||
|
||||
# Globale Module
|
||||
|
||||
## SASS
|
||||
|
||||
### Definition
|
||||
|
||||
> Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
|
||||
|
||||
Sass ist eine CSS-Preprocessor Sprache.
|
||||
|
||||
```bash
|
||||
npm install sass -g
|
||||
```
|
||||
|
||||
## Liste von verwendeten Modulen
|
||||
BIN
04_typescript/docs/nodejs-installation.pdf
Normal file
BIN
04_typescript/docs/nodejs-installation.pdf
Normal file
Binary file not shown.
@@ -1,12 +1,15 @@
|
||||
import express from 'express';
|
||||
import color from 'chalk';
|
||||
import cors from 'cors';
|
||||
import dotenv from 'dotenv';
|
||||
|
||||
dotenv.config(); // Sensible Konfigurationsvariablen in .env Datei auslagern
|
||||
|
||||
// Model
|
||||
import ProductModel from './model/ProductModel.js'; // Dateiendung nicht vergessen
|
||||
|
||||
const PORT = 8000;
|
||||
const HOST = '127.0.0.1'; // 'localhost'
|
||||
const PORT = process.env.SERVER_PORT; // || 8000;
|
||||
const HOST = process.env.SERVER_HOST; // || '127.0.0.1'; // 'localhost'
|
||||
const BASE_URL = `http://${HOST}:${PORT}`;
|
||||
|
||||
const app = express();
|
||||
|
||||
@@ -12716,7 +12716,7 @@ h6,
|
||||
.header-main {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
min-height: 400px;
|
||||
}
|
||||
.header-main .content-box {
|
||||
position: relative;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
min-height: 400px;
|
||||
.content-box {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
Reference in New Issue
Block a user