--- marp: true theme: 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 ---