466 lines
6.1 KiB
Markdown
466 lines
6.1 KiB
Markdown
---
|
|
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 II mit JSON
|
|
- DOM Traversal Befehle & alle DOM Bereiche
|
|
- insertBefore(), appendChil(), append(), prepend(), before(), after()
|
|
- Refactoring von Produktmanager mit Template
|
|
|
|
**Übungen:**
|
|
|
|
Übung 17 - 18 + optionale Übungen
|
|
**Projektarbeit / Content Factory**
|
|
|
|
---
|
|
|
|
#### Tag 27
|
|
|
|
**Inhalt:**
|
|
|
|
- **Exkurs: Weitere Events: Drag and Drop**
|
|
- **Routing in JS**
|
|
- **Rest API erstellen mit Express**
|
|
- JS DOM Projektvorstellung
|
|
- Abschlussquiz JS DOM
|
|
|
|
**Übungen:**
|
|
|
|
Projekte + optionale Übungen.
|
|
|
|
---
|
|
|
|
#### Tag 28
|
|
|
|
**Inhalt:**
|
|
|
|
- **Exkurs: DOM Inhalte über REST API mit Express Part I**
|
|
- 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**
|
|
- BREAD - Browse - Read - Edit - Add - Delete
|
|
- Verwendung von Modulen (Modal von BS, Toastify, Splide)
|
|
|
|
**Übungen**
|
|
|
|
Projekte + weiteres Modul einbinden
|
|
|
|
---
|
|
|
|
#### Tag 30
|
|
|
|
- **Projekt mit KI**
|
|
- Einführung in Typescript
|
|
- 1:1 Meeting
|