07_js-debug/agenda.md

@@ -0,0 +1,673 @@
+---
+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 - 09
+
+---
+
+#### Tag 13
+
+**Inhalt:**
+
+- Promises
+- Callback-Hell
+- Promise Aufbau
+- Promise in Funktionen
+- File System von Node
+- commonjs vs esm
+
+**Übungen:**
+
+Übung 10 - 11
+
+---
+
+#### Tag 14
+
+**Inhalt:**
+
+- util promisify
+- Promise.all()
+- async await
+- Mehrdimensionale Arrays
+- Chess-Beispiel
+
+**Übungen:**
+
+Übung 12 - 19
+
+---
+
+#### Tag 15
+
+**Inhalt:**
+
+- Wiederholung der Inhalte
+- Arbeiten mit Fetch API
+- **Exkurs: Switch Case Abfragen**
+- **Exkurs: Statische Webseite mit Sass und HTML**
+- **Exkurs: Versionierung mit Github Part (SSH)**
+- 1:1 Meeting
+
+**Übungen:**
+
+Übung 20 - 24
+
+---
+
+#### Tag 15
+
+**Inhalt:**
+
+- Wiederholung der Inhalte
+- Promise.all()
+- **Exkurs: Switch Case Abfragen**
+- **Exkurs: Statische Webseite mit Sass und HTML**
+- 1:1 Meeting
+
+**Übungen:**
+
+Übung 20 - 24
+
+
+---
+
+#### Tag 16
+
+**Inhalt:**
+
+- **Exkurs: Statische Webseite mit Sass und HTML Part II**
+- Node Module: HTTP-Server, npm-run-all und SVGO
+
+**Übungen:**
+
+Projektarbeit + Wetter API Key besorgen
+
+---
+
+#### Tag 17
+
+**Inhalt:**
+
+- XML-HttpRequest und AJAX mit jQuery
+- Node Module für die Projekt-Entwicklungsumgebung
+- Wetter API auslesen
+- fetch in der Praxis: Joke API auslesen
+- Was ist Node.js? (Wiederholung)
+  
+**Übungen:**
+
+Projektarbeit
+Übungen Public API auslesen
+
+---
+
+#### Tag 18
+
+**Inhalt:**
+
+- Node Standardbib (fs, zlib (stream), Crypto)
+- Import vs. require (Teil II)
+- NPM Befehle 
+- Abschluss von JS für Fortgeschrittene
+- Projektvorstellung 1 + 2 JS Advanced
+
+
+**Übungen:**
+
+Übungen 25 - 31
+
+---
+
+# JavaScript und das Document Object Model (DOM)
+
+---
+
+
+#### Tag 19
+
+- Einführung in JS DOM
+- DOM Selection (querySelector, querySelectorAll, $ & $$ Helper)
+- CSS Selektoren
+- Typ-, Attribut-, Kombinator-  und Pseudoklassen - Selektoren
+
+
+**Übungen:**
+
+Übungen 01 - 05
+
+---
+
+#### Tag 20
+
+**Inhalt:**
+
+- Chat Gestaltung (DOMTokenList Objekt)
+- Defer & Async
+- JS Dateien auslagern
+- Optimierung von Projektstruktur
+- **Exkurs: Projektstruktur mit Gulp**
+
+**Übungen:**
+
+Übung 06 - 07
+
+---
+
+#### Tag 21
+
+**Inhalt:**
+
+- **Exkurs: Projektstruktur mit Gulp Part II**
+- Events in JS MouseEvent, KeyboardEvent
+- Projekt: Newsboard
+
+
+**Übungen:**
+
+Übung 08 - 9
+
+---
+
+#### Tag 22
+
+**Inhalt:**
+
+- HTML Element Progress
+- IDL-Attribut vs. Content-Attribut
+- HTML Attribute mit boolescher Zuweisung
+- Tooltip: HTML erweitern mit Data-Attribut
+- Dataset Attribut, DOMStringMap Objekt
+- getComputedStyle, Attribute mit boolscher Zuweisung
+
+**Übungen:**
+
+Übung 10 - 14
+
+---
+
+#### Tag 23
+
+**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 24
+
+**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
+- JS DOM Projektvorstellung
+
+**Übungen:**
+
+Übung 18 + optionale Übungen
+**Projektarbeit / Content Factory**
+
+---
+
+#### Tag 25
+
+**Inhalt:**
+
+- **Exkurs: Weitere Events: Drag and Drop**
+- **Rest API erstellen mit Express**
+- **Exkurs: DOM Inhalte über REST API mit Express Part I**
+- CRUD - Create - (Read) - Update - Delete
+- **Routing in JS**
+- Abschlussquiz JS DOM
+- **1:1 Meeting**
+
+**Übungen:**
+
+Projekte
+
+---
+
+## BROWSER API
+
+---
+
+#### Tag 26
+
+**Inhalt:**
+
+- **Exkurs: DOM Inhalte 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 & optionale Übungen
+
+---
+
+#### Tag 27
+
+- **Exkurs: Gulp Build Prozess**
+- **SASS 7 on 1 mit Bootstrap 6**
+- **Projektfinalisierung Express + REST API**
+- Einführung in Typescript
+
+
+---
+
+### Tag 28
+
+**Inhalt:**
+
+- Typescript Grundlagen
+- Typescript Annotationen
+- Typescript "more Types"
+
+**Übungen:**
+
+Übungen 1 - 5
+
+---
+
+### Tag 29
+
+**Inhalt:**
+
+- Typescript Annotationen
+- Primitive Types, Object, Union Types
+- type statement vs interface
+- Type Assertion with as and <>
+- Typescript "more Types"
+- Interface, as statement
+
+**Übungen:**
+
+Übungen 4 - 9
+
+---
+
+### Tag 30
+
+**Inhalt:**
+
+- Typescript literale
+- Projektvorstellung
+- **Exkurs: Vite vs Gulp**
+- **Produktmanager Refactoring mit Bootstrap 6**
+
+**Übungen:**
+
+Übungen 10 - 11
+Projekt 1: TaskManager
+
+---
+
+### Tag 31
+
+**Inhalt:**
+
+- Narrowing with Guards
+  - truthiness, equality, in-operator, type-predicate
+- TS Funktionen und Objekte
+
+**Übungen:**
+
+Übungen 12 - 21
+
+---
+
+### Tag 32
+
+**Inhalt:**
+
+- TS Funktionen und Objekte Part II
+- Vorstellung Projekt 2
+- Abschluss TypeScript Grundlagen
+
+**Übungen:**
+
+Übungen 22 - 31
+Projektarbeit
+
+---
+
+# Einführung in React
+
+---
+
+
+### Tag 33
+
+**Inhalt:**
+
+- Einführung in REACT
+- VDOM von REACT
+- ES6 Module mit ohne Bundler
+- Build Tools im Vergleich &amp; Einführung in Vite
+
+**Übungen:**
+
+Übung 01 - 03
+
+---
+
+### Tag 34
+
+**Inhalt:**
+
+- Build Tools im Vergleich &amp; Einführung in Vite
+- Beispiele der Gestaltungsmöglichkeiten in Frameworks
+- Layout & wiederverwendbare Komponenten
+- EventHandler in React
+
+**Übungen:**
+
+Übung 04 - 07
+
+---
+
+### Tag 35
+
+**Inhalt:**
+
+- Layout & wiederverwendbare Komponenten Part II
+- EventHandler in React `onSubmit`, `onChange`, `onClick`
+- Hooks in React.
+- 1:1 Meeting
+
+**Übungen:**
+
+Übung 08 - 10
+
+---
+
+### Tag 36
+
+**Inhalt:**
+
+- Einführung in Hooks in React.
+- Hooks in React. `useState`, `useReducer`
+
+**Übungen:**
+
+Übung 11 - 14
+
+---
+
+
+### Tag 37
+
+**Inhalt:**
+
+- Hooks in React. `useState`, `useReducer`, `useContext`, `useId`.
+- Routing in React
+- Verschachtelte Routen und Layout-Komponenten
+- Formulare in React
+- Validierung classic
+
+**Übungen:**
+
+Übung 14 - 15
+
+---
+
+### Tag 38
+
+**Inhalt:**
+
+- Validierung mit `react-hook-form` und Schema Objekten
+- Hook: `useEffect`. Arbeiten mit asynchronen Daten.
+- Asynchron arbeiten mit axios/ fetch
+
+**Übungen:**
+
+Übung 16 - 18
+
+---
+
+### Tag 39
+
+**Inhalt:**
+
+- Hook: `useEffect`, `useRef`, `useCallback`. Arbeiten mit asynchronen Daten.
+- AbortController, loading und error hinzufügen.
+- Testing in React.
+
+**Übungen:**
+
+Übung 19
+
+---
+
+### Tag 40
+
+**Inhalt:**
+
+- Aktualisierung von Node
+- Testing in React
+- Einführung JS/TS Debugging & Testing
+- **Exkurs: Sass 7 on 1 Struktur**
+- **Optimierung vom ProduktManager über KI**
+- **ProduktManager wird in TS migriert** 
+
+
+**Übungen:**
+
+Übung 20
+
+---
+
+### TBA
+
+**Inhalt:**
+
+- Typische Fehlermeldungen: Syntaxfehler, Referenzfehler, TypeError
+- Einrichtung von TS, Testing
+- Logische Fehler
+- Mocking mit async Data
+- Weitere Techniken: Snapshot & Cypress