ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a885cd95504c2f44945a99a8d513028fa75ae337
JS/07_js-debug/agenda.md
T
Philippe Torrel a885cd9550
2026-11-03 09:09:37 +01:00

743 lines
10 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, 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
---
## JavaScript/TypeScript Debugging & Testing
--
### Tag 41
**Inhalt:**
- inversion, extraction, DRY-Prinzip
- Typische Fehlermeldungen: Syntaxfehler, Referenzfehler, TypeError
- Einrichtung von TS
- Logische Fehler
**Übungen:**
Projektarbeit
---
### Tag 42
**Inhalt:**
- Debugging-Techniken – Chrome Debugger
- Webentwickler Developer Tools
- Einrichtung von Eslint und AirBnB-Richtlinien
- Debugging-Techniken – VSCode Debugger
**Übungen:**
Projektarbeit
Übungen 05 - 14
---
### Tag 43
**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 44
**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 45
**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