---
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: 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