JavaScript (alfatraining)

Dozent:

Herr Olaf Herbrich-Philippi

Klassenraum:

Javascript - Ajax (8) (Klassenraum 329)

Allgemeine Infos zum Kurs

• Projektabgabe -> Dateien dort sichern

• Remote-PC -> nur nötig, falls nicht auf eigenem Rechner

• Nachmittagsaufgabe -> wird morgens von wechselnder Person präsentiert

• Teilnehmer: Gruppen B - O zur Stillarbeit, Dozent in Gruppe A

• 11:45 - 11:55 zweite Pause

• Freitag 1h Jobsuche

• Zertifikate am Kursende im eigenen Bereich herunterladen

• Abwesenheit: am Standortsekretariat Bescheid geben (für 4+ Tage Nachweis nötig)

• Bewerbungsunterstützung: über alfatraining Unterlagen prüfen lassen -> WIE?

Kursinhalte

• Introduction
  • Geschichte von JavaScript
  • JavaScript mit VS Code
  • Einbinden von JavaScript
• Strict-Mode
• Kommentare
• Schreibregeln & Konventionen
• Vordefinierte Funktionen
• Variablen
• Konstanten
• Datentypen
  • number
  • string
  • Wahrheitswerte (boolean)
  • BigInt
• Operatoren
  • Numerische Operatoren
  • Inkrement / Dekrement Operator
  • Verkettungs-Operator (+)
  • Relationale Operatoren
• Typenkonvertierung
  • Implizierte Typenkonvertierung
  • Explizite Typenkonvertierung
• Datentyp ermitteln
  • Test auf NaN
• Beispielobjekt: Math
• Kontroll- / Steuerstrukturen
  • if-condition
  • Logische Operatoren
  • switch Kontrollstruktur
• Strings
  • Index-Suche
  • Umwandlung Klein-/Großkleinschreibung
  • Teil-Strings
  • Prüfungen
  • Strings wiederholen
  • Strings auffüllen
  • Ausdrücke in Strings konvertieren
• Schleifen
  • for-loop (Zählerschleife)
  • do-while-loop
  • while-loop
• Schleifensteuerung
• Funktionen
  • Funktionsdeklaration
  • Funktionsausdruck
  • Default-Werte für Parameter
  • IIFE (immediately invoked function expression)
• Arrays
  • Arrays erzeugen
  • Arrays abfragen
  • Mehrere Arrays verbinden
  • Arrays manipulieren
  • Array prüfen
  • Array kopieren
  • Element in Array Elemente teilen
  • Elemente in Array zu String verbinden
  • Elemente sortieren
  • Indexposition von Element abfragen
  • Arrays kombinieren
  • Arrays abflachen
• Objekte
  • Erstellung
  • Eigenschaften definieren
  • Eigenschaft auslesen
  • Eigenschaft ändern
  • Eigenschaft hinzufügen und löschen
  • Methoden aufrufen
  • Objektdefinition in ES6
  • Beispiel: Date Objekt
• JSON - JavaScript Notation Object
  • Serialisieren / Deserialisieren
  • Cookies
  • Cookies erstellen, auslesen und löschen über JS-Funktionen
  • Prüfe ob Arbeit mit Cookies möglich / erlaubt ist
• Web Storage
  • Storage -Methoden
  • Objekt in Storage speichern
  • Prüfen ob Storage verfügbar
• Errors
  • try-catch Block
• Debugger
• Windows-Objekt
• DOM - Document Object Model
  • Query-Selector
  • Content-Zugriff
  • NodeList
  • Globales vs lokales Selektieren
  • DOM-Zugriff auf Class-Attribut
  • Zugriff auf Attribute von HTML-Elementen
• Events
  • Event-Listener
  • Event-Handler
• Break: Übungsaufgaben
  • Übung 1: Zutreffende Listeneinträge highlighten
  • Übung 2: E-Book Darstellung
  • Übung 3: Font-Size ändern
• DOM-Navigation
• DOM Operationen
  • DOM-Elemente erstellen & einfügen
  • DOM-Element duplizieren
  • Knoten verschieben
  • Knoten löschen
  • Knoten ersetzen
  • Alle Elemente im DOM erreichen
• HTML Template verwenden
• DOM Elemente über Adjacent-Methoden platzieren
• Neue ES6 Methoden zum Platzieren
  • Mehrere Objekte als Kind-Objekte platzieren
  • Mehrere Objekte als Kind-Knoten des Eltern-Knotens platzieren
  • Objekte als Fragment platzieren
  • Text-Knoten erzeugen
  • Kommentar-Knoten erzeugen
• AJAX
  • Interaktion im Web ohne Ajax
• Vor- und Nachteile von Ajax
  • Klassisches Modell mit eigenständigen, adressierbaren Dokumenten
  • Besonderheiten bei Ajax
  • Zugänglichkeit von Ajax-Anwendungen
  • Einsatzgebiete
  • Server-Aktionen ohne Antwort-Daten
• XML
  • Umwandlung XML-String zu XML-DOM (XML-Dokument)
  • Umwandlung XML-Dokument in XML-String
• XMLHttpRequest
  • Anfrage senden
  • Antwort weiterverarbeiten
• JSON Requests
  • Anfrage senden
• Übungen
  • JSON Daten über AJAX laden
  • HTML Snippets über AJAX laden
  • Vollständige HTML Seiten über AJAX laden
• Verlaufshistorie
  • Verlaufseinträge erstellen
  • Durch Verlaufseinträge navigieren
• Datenübertragung an Server
  • Datenübertragung mit GET (per queryString)
  • Datenübertragung mit POST (per JSON)
• jQuery
  • Selektoren
  • Aufruf von jQuery Funktionen
  • Auf HTML-Attribute zugreifen
  • Selektion eingrenzen
  • Elemente oder DOM-Strings im DOM integrieren
  • Inline-Styles setzen & auslesen
  • Element-Klassen
  • Events
  • Effekte
• jQuery: Durch DOM navigieren
  • Traversal-Methoden
• jQuery mit AJAX
  • GET Requests
  • POST Request
• Timing
  • timeout
  • Interval
  • RequestAnimationFrame
• Location-Objekt
• Objekt-Funktionen
  • for-in Schleife
  • for-of Schleife
  • Objekt einfrieren
  • Objekt duplizieren
  • Objekte durch Variablen erzeugen
• FormData-Object
• Datentyp: Symbol
• Template String
• Ternärer / conditional Operator
• Reguläre Ausdrücke
  • Methoden des RegExp Objekts
  • Methoden vom Datentyp String für die Arbeit mit RegExp
  • Definition eines Musters
• Arrow-Function
• Higher Order Functions
  • sort()
  • forEach()
  • map()
  • filter()
  • reduce()
  • Array prüfen
  • Elemente finden
• Spread-Syntax
  • Unterschiede beim Duplizieren von Objekten
• Rest-Parameter
• Events und Event-Object
• Destructuring
  • Array-Destructuring
  • Objekt-Destructuring
  • Kombination Array- und Object-Destructuring
• Factory-Function
• Constructor-Function
• Object.create()
• Eigenschaftsattribute
• Neue Properties in Prototypen definieren
• Prototype einem Objekt zuordnen
• Klassensyntax
  • Eigenschaftsattribute für Properties setzen
  • Arbeit mit Settern und Gettern der Eigenschaftsattribute
  • Kind-Klasse erstellen (Klassen erweitern)
  • Statische Objekt-Eigenschaften (Methoden & Properties)
  • Symbole in Klassen
• Datenstrukturen Map und Set
  • Map
  • Set
• Iteratoren
• Generatoren
• Module
• Node.JS
  • Gleichzeitige Ausführung
  • Node-Standardbibliothek
  • Import/Export: CommonJS vs. ECMAScript Module (ES)
  • Standardmodule einbinden
  • npm
  • Eigene Module schreiben
  • Der eigene Server
• Post-Routing
• Promise
• Fetch API
• EJS Template Engine
• Arbeiten mit Datenbanken
• Event-Emitter
  • Websockets
  • Canvas
• React
• Vue.JS