dozent.net
Projekt anfragen
Info

JavaScript Grundlagen

Dieses Seminar vermittelt dir in drei Tagen die grundlegenden Konzepte der clientseitigen Webprogrammierung mit JavaScript. Du lernst die Syntax, die Manipulation des Document Object Models (DOM), das Ereignis-Handling (Event Handling), Formulare auswerten und validieren sowie die asynchrone Programmierung. Am Ende kannst du interaktive und dynamische Web-Frontends entwickeln.

Für wen ist dieses Seminar

Webentwickler, Frontend-Designer und Quereinsteiger in die Webprogrammierung.

Das Angebot richtet sich an Unternehmen, Behörden und Selbstständige.

Was du mitbringen solltest

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)
  • Destructuring und Spread (Einstieg):
  • Destrukturierung von Arrays und Objekten
  • Spread-Operator (...) zum Kopieren und Zusammenführen von Arrays/Objekten

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)

Formulare auswerten und validieren

  • Zugriff auf Formularfelder und deren Werte, FormData
  • Eingaben validieren: Pflichtfelder, Muster, native Constraint-Validation
  • Absenden abfangen und verarbeiten (submit-Event, e.preventDefault())

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)

ES-Module (import/export, ES6/ECMAScript 2015)

  • Aufteilen von Code in eigenständige Module
  • Export-Syntax: Named Exports vs. Default Export
  • Import-Syntax und Einbindung im Browser (<script type="module">)

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

Was du danach kannst

  • Interaktive Webseiten mit DOM-Manipulation und Event-Handling umsetzen
  • Formulare auswerten, validieren und ihr Absenden verarbeiten
  • Mit Arrays und Objekten inklusive Destructuring und Spread arbeiten
  • Asynchrone Abläufe mit Promises und async/await steuern
  • REST-APIs per Fetch API konsumieren
  • Code in ES-Module aufteilen und einbinden

Verwandte Seminare

Dein Dozent

Frank Glück schult seit mehr als 30 Jahren und programmiert seit fast 40 Jahren. Seit 1999 ist er auch als Dozent für die GFU tätig. Er begleitet die Entwicklung des Webs seit den 1990er-Jahren.

Häufige Fragen (FAQ)

Braucht man Vorkenntnisse für das JavaScript-Grundlagenseminar?

Programmiervorkenntnisse sind nicht nötig, HTML- und CSS-Grundlagen solltest du mitbringen. Der Kurs startet bei den Grundlagen von Variablen, Kontrollstrukturen und Funktionen und eignet sich ideal für Umsteiger und Einsteiger in die moderne Web- und Backend-Entwicklung.

Warum ist das Verständnis des Event Loops in JavaScript so wichtig?

JavaScript ist single-threaded und arbeitet mit einer ereignisgesteuerten Schleife (Event Loop). Wer Callbacks, Microtasks, Promises und async/await versteht, verhindert blockierende UI-Threads und schreibt performante, nicht-blockierende Webanwendungen.

Wie wird das Gelernte im Kurs geübt?

Jedes theoretische Thema wird durch praktische Live-Coding-Übungen im Browser und in Node.js vertieft – von DOM-Manipulationen über Formularvalidierung bis zum Konsumieren externer REST-APIs per fetch().

Individuell anfragen

Individuell anfragen