ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a08de03d4d6fa54cc7bbaf629c97d7d14cd7e0d5
JS/06_js-debug/agenda.md
Philippe Torrel 461da1881e feat: new agenda
2026-08-17 09:35:54 +02:00

764 lines
9.9 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
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
- ES6 Module mit ohne ohne Bundler
**Übungen:**
Übung 01 - 03
---
### Tag 38
**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 39
**Inhalt:**
- Layout & wiederverwendbare Komponenten Part II
- EventHandler in React `onSubmit`, `onChange`, `onClick`
- Hooks in React.
**Übungen:**
offene Übungen.
Übung 08 - 11
---
### Tag 40
**Inhalt:**
- Einführung in Hooks in React.
- Hooks in React. `useState`.
**Übungen:**
Übung 12 - 13
---
### Tag 41
**Inhalt:**
- Hooks in React. `useState`, `useReducer`, `useContext`, `useId`.
- Routing in React
- Verschachtelte Routen und Layout-Komponenten
**Übungen:**
Übung 14 - 15
---
### Tag 42
**Inhalt:**
- Verschachtelte Routen und Layout-Komponenten
- Formulare in React
- Validierung classic
**Übungen:**
Übung 16 - 18
---
### Tag 43
**Inhalt:**
- Validierung mit `react-hook-form` und Schema Objekten
- Hook: `useEffect`. Arbeiten mit asynchronen Daten.
- Asynchron arbeiten mit axios/ fetch
**Übungen:**
Übung 19
---
### Tag 44
**Inhalt:**
- Aktualisierung von Node
- Testing in React
- Mocking mit async Data
- Weitere Techniken: Snapshot & Cypress
**Übungen:**
Übung 20
---
### Tag 45
**Inhalt:**
- Typische Fehlermeldungen: Syntaxfehler, Referenzfehler, TypeError
- Einrichtung von TS, Testing
- Logische Fehler
- **Exkurs: Sass 7 on 1 Struktur**
**Übungen:**
Projektarbeit
---
## JavaScript/TypeScript Debugging & Testing
--
### Tag 46
**Inhalt:**
- inversion, extraction, DRY-Prinzip
- Typische Fehlermeldungen: Syntaxfehler, Referenzfehler, TypeError
- Einrichtung von TS
- Logische Fehler
**Übungen:**
Projektarbeit
---
### Tag 47
**Inhalt:**
- Debugging-Techniken – Chrome Debugger
- Webentwickler Developer Tools
- Debugging-Techniken – VSCode Debugger
**Übungen:**
Projektarbeit
Übungen 05 - 14
---
### Tag 48
**Inhalt:**
- Einführung in Vitest und Unit Testing
- Installieren von Vitest und Schreiben unseres ersten Tests
- Einführung in die React Testing Library
- Unit-Tests in der React-Entwicklung verstehen
**Übungen:**
Projektarbeit
Übungen 15 - 19
---
### Tag 49
**Inhalt:**
- Unseren ersten Unit-Test schreiben
- Unit-Tests mit einer Komponentenliste und dem Router schreiben
- Testen von Benutzerverhalten in Unit-Tests
- Performance-Optimierung mit React
- useMemo, React.Memo, useCallback, useRef
**Übungen:**
Abschluss React Class
Projektarbeit
---
### Tag 50
**Inhalt:**
- useCallback Hook
- React.lazy, Suspense
- Zusammenfassen der React Komponenten
- Wiederholung der Inhalte
**Übungen:**
Projektarbeit
Übungen 22 - 23
---
Reference in New Issue View Git Blame Copy Permalink