JavaScript Programmierer Ausbildung

1. Grundlagen von JavaScript (ECMAScript, ES6)

• Was ist JavaScript?
• Ursprung und Einsatzmöglichkeiten von JavaScript
• Einbindung, Import und Laden von JavaScript in HTML-Dokumente
• Grundkonzepte der Programmierung
• Zentrale Bausteine der JavaScript-Programmierung
• DOM-Manipulation
• Übung: Inhalte mit JavaScript auf einer HTML-Seite anzeigen

Programmiergrundlagen mit JavaScript

In diesem Abschnitt lernst du die Grundlagen des Programmierens. Wenn du diese einmal verstanden hast, wirst du dich auch in anderen Programmiersprachen schnell zurechtfinden – denn die Logik ist oft sehr ähnlich. Natürlich zeigen wir dir auch die Besonderheiten der JavaScript-Syntax und -Struktur.

Themen:

• Datentypen, Variablen, Konstanten, primitive Werte
• Operatoren
• Mathematische Operationen
• Zeichenketten-Verarbeitung (String-Operationen)
• Reguläre Ausdrücke
• Komplexe Datentypen: Arrays, Array-Methoden, Objekttypen
• Steuerstrukturen:

• • if/else
  • switch/case
  • Schleifen

• Funktionen:

• • klassische Funktionen
  • Pfeilfunktionen (Arrow Functions)
• Math-Objekt und Zufallszahlengenerator
• Ausnahmebehandlung mit try/catch
• Datumstyp: Date

JavaScript im Frontend anwenden

In diesem Abschnitt setzen wir das zuvor erlernte Wissen praxisnah um. Dabei entwickeln wir nützliche oder unterhaltsame Mini-Anwendungen für die eigene Webseite – zum Beispiel:

• Terminbuchung
• Preisrechner
• Sortierspiel
• Reaktionstest-Spiel
• Lotto-Ziehungssimulator

Technologische Schwerpunkte:

• Operatoren, Arrays, Objekte, Funktionen
• Modul-Pattern-Design
• Grid-Generator
• DOM – Document Object Model
• DOM – Ereignisbehandlung
• Funktionsbibliotheken
• Rekursive Funktionen – Durchlaufen von Baumstrukturen

Formularvalidierung

Ohne JavaScript wird ein ausgefülltes Formular oder Fragebogen einfach abgeschickt – und erst danach zeigt sich, ob es korrekt war oder Fehler enthält. Mit JavaScript, das direkt im Browser ausgeführt wird, können wir jedoch Regeln definieren, die Benutzer:innen bereits vor dem Absenden einhalten müssen.

Solche Regeln sind zum Beispiel:

• gültiges E-Mail-Format
• Begrenzung der Zeichenanzahl
• Pflichtfelder müssen ausgefüllt sein

Dabei lernen und üben wir unter anderem:

• Reguläre Ausdrücke
• Funktionsorientierte Programmierung
• DOM-Manipulation
• Ereignisbehandlung

OOP – Objektorientierte Programmierung

OOP ist ein Programmierparadigma, das sich an realen Strukturen orientiert: Ein Objekt verfügt sowohl über Eigenschaften als auch über Funktionen. Damit lassen sich komplexe Abläufe definieren, die wir instanziieren und mehrfach wiederverwenden können.

Inhalte:

• Aufbau einer Klasse
• Eigenschaften und Methoden von Klassen
• Klassendefinition mit „Function + Prototype“
• Klassendefinition mit „class“-Syntax
• Setter- und Getter-Methoden
• Vererbung und abgeleitete Klassen
• Gemeinsame Nutzung von OOP und DOM

Mini-Projekt (OOP): Glücksrad, Lotto-Ziehungssimulator

Abrufen von Daten aus einer externen Datenbank

In diesem praxisnahen Beispiel rufen wir Instrumentendaten aus einer umfangreichen, externen Datenbank ab. Der Browser sendet dabei Anfragen an den Server, verarbeitet die Antworten und zeigt die Ergebnisse direkt im Frontend an – ohne die Seite neu zu laden, mithilfe von AJAX.

Behandelte Themen:

• Zeitgesteuerte Skripte – Mehrsträngige Verarbeitung mit JavaScript
• Asynchrones JavaScript und XML – XMLHttpRequest, asynchrone Funktionen
• Promise
• Fetch API
• Cookies und LocalStorage
• JSON-Datenstruktur
• Anfrage senden
• Antwort empfangen
• Antwort verarbeiten und anzeigen
• JavaScript-Module – Einbetten und Organisieren von JavaScript-Dateien
  

Nach diesem Abschnitt legen die Teilnehmer:innen eine Prüfung in JavaScript-Programmierung ab.

TypeScript-Programmierung

• Einrichtung der Entwicklungsumgebung, Funktionsweise und Konfiguration des TS-Compilers
• TS-Core und Funktionstypen in TypeScript
• Klassen in TypeScript
• Interfaces
• Erweiterte Typen (Advanced Types)
• Generics: Wiederverwendbarer, typsicherer Code
• Dekoratoren
• TypeScript-Module, modulares Programmieren, Komposition
• Drittanbieter-Bibliotheken in TypeScript
• Type Design
• Debugging mit TypeScript
• Migration von JavaScript zu TypeScript

AI-Unterrichtseinheiten

Wir machen uns mit hilfreichen Tools wie generativen AIs vertraut, die uns helfen, effizienter zu programmieren. Nach einem Überblick über generative Algorithmen testen wir das Claude-AI-Modell – ein Tool, das uns helfen kann, bessere TypeScript-Entwickler:innen zu werden. Wir analysieren die Vorteile verschiedener KI-Lösungen, besprechen theoretische und praktische Grundlagen und üben das gezielte Prompten.

Serverseitige JavaScript-Programmierung
Ab 2024 wird serverseitiges JavaScript in einem neuen JS-Backend-Modul unterrichtet!