ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
da7fd3f7eb8157ac503cd273f23effafa61dd257
JS/07_js-debug/agenda.md
T
Philippe Torrel da7fd3f7eb
2026-11-02 09:20:35 +01:00

10 KiB
Raw Blame History

marp, theme
marp theme
true 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 & Einführung in Vite

Übungen:

Übung 01 - 03

Tag 34

Inhalt:

  • Build Tools im Vergleich & 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 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