ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1f644069b8169f5d1663c0c2c94815a72b160fcc
JS/05_react/agenda.md
Philippe Torrel 1f644069b8
2026-08-14 08:50:21 +02:00

8.7 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)
  • 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 & 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

Reference in New Issue View Git Blame Copy Permalink