Frank Glück | IT-Consultant
Projekt anfragen

Einleitung

Dieses Seminar vermittelt die grundlegenden Konzepte der clientseitigen Webprogrammierung mit JavaScript. Teilnehmer erlernen die Syntax, die Manipulation des Document Object Models (DOM), das Ereignis-Handling (Event Handling) sowie die asynchrone Programmierung. Ziel ist die Entwicklung interaktiver und dynamischer Web-Frontends.

Zielgruppe / Voraussetzung

  • Zielgruppe: Webentwickler, Frontend-Designer und Quereinsteiger in die Webprogrammierung.
  • Voraussetzung: Grundlegende Kenntnisse in HTML und CSS. Programmier-Vorerfahrungen sind hilfreich, aber nicht zwingend erforderlich.

Detaillierte Inhalte

Einführung und Entwicklungsumgebung

  • Historie und Rolle von JavaScript im Web-Stack (ECMAScript-Standards)
  • Einbindung von JavaScript in HTML (<script>-Tag, externe Dateien)
  • Nutzung der Browser-Entwicklertools (Console, Debugger, Network-Tab)
  • Der Strict Mode ("use strict") zur Fehlervermeidung
  • Ausgabe von Daten (console.log, alert, prompt)

Variablen, Datentypen und Operatoren

  • Deklaration von Variablen: let und const (Abgrenzung zu var)
  • Primitive Datentypen: String, Number, Boolean, Null, Undefined, Symbol
  • Dynamische Typisierung und Typumwandlung (Type Coercion vs. Explicit Casting)
  • Template Literals (Template Strings) für komplexe Zeichenketten
  • Operatoren: Arithmetisch, Zuweisung, Vergleich (== vs. ===), Logisch

Kontrollstrukturen und Ablaufsteuerung

  • Bedingte Anweisungen: if, else if, else
  • Mehrfachverzweigungen mit switch
  • Ternärer Operator (? :)
  • Schleifenkonstrukte: for, while, do-while
  • Schleifensteuerung (break, continue)

Funktionen und Scope

  • Deklaration und Aufruf von Funktionen
  • Funktionsausdrücke (Function Expressions) und anonyme Funktionen
  • Arrow Functions (Pfeilfunktionen): Syntax und Besonderheiten
  • Parameter, Argumente und Default-Parameterwerte
  • Gültigkeitsbereiche (Scope): Block Scope, Function Scope und Lexical Scope
  • Grundlagen von Closures

Datenstrukturen: Arrays und Objekte

  • Arrays:
  • Deklaration und Zugriff auf Elemente
  • Iteration (for...of, forEach)
  • Wichtige Array-Methoden: push, pop, shift, unshift, splice, slice
  • Funktionale Array-Methoden: map, filter, reduce, find
  • Objekte:
  • Object Literals: Eigenschaften (Properties) und Methoden
  • Zugriff über Punkt- und Klammernotation
  • Iteration über Objekte (for...in, Object.keys, Object.values)
  • Einführung in das JSON-Datenformat (JavaScript Object Notation)

Document Object Model (DOM) Manipulation

  • Aufbau und Struktur des DOM-Baums
  • Selektieren von Elementen: getElementById, querySelector, querySelectorAll
  • Navigation im DOM: Eltern-, Kind- und Geschwisterknoten
  • Manipulation von Elementen: innerHTML, textContent, createElement, appendChild
  • Ändern von HTML-Attributen und CSS-Klassen (classList)

Event-Handling (Ereignissteuerung)

  • Funktionsweise von events in JavaScript
  • Registrierung von Event-Listenern (addEventListener)
  • Wichtige Event-Typen: Maus-Events, Tastatur-Events, Formular-Events
  • Das Event-Objekt auswerten (e.target, e.preventDefault())
  • Event Bubbling und Event Capturing (Einführung in Event Delegation)

Asynchrone Programmierung (Grundlagen)

  • Das asynchrone Modell von JavaScript (Event Loop)
  • Timer-Funktionen: setTimeout und setInterval
  • Einführung in Promises: resolve, reject, .then(), .catch()
  • Moderne asynchrone Syntax: async und await
  • HTTP-Anfragen mit der Fetch API durchführen (REST-APIs konsumieren)

Fehlerbehandlung und Debugging

  • Syntax- und Laufzeitfehler identifizieren
  • Exception Handling: try, catch, finally
  • Eigene Fehler werfen (throw new Error())
  • Breakpoints und schrittweises Debugging in den Browser-DevTools

Dauer 3 Tage