ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
JS/03_js-dom/agenda.md
T
Philippe Torrel ff82f5a054
2026-10-12 08:29:27 +02:00

7.0 KiB
Raw Permalink 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 ü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 & optionale Übungen

Tag 27

  • Exkurs: Vite vs Gulp
  • 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"

Übungen:

Übungen 4 - 9

Tag 30

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

Reference in New Issue View Git Blame Copy Permalink