JavaScript Workshop für Anfänger mit Übungen und ChatGPT-Unterstützung

Seminarziel

Die Teilnehmenden sollen in der Lage sein, einfache JavaScript-Programme zu schreiben und zu verstehen, wie JavaScript in Webanwendungen eingesetzt wird. Dabei sollen sie grundlegende Konzepte wie Funktionen, Arrays, Objekte, DOM-Manipulation, Formularverarbeitung, Fehlerbehandlung, Objektorientierung und Anwendungsentwicklung kennenlernen und praktisch anwenden. Hierbei werden die Teilnehmer mit ChatGPT unterstützt.

Am Ende des Workshops sollen die Teilnehmenden in der Lage sein, eine voll funktionsfähige Webanwendung mit JavaScript zu entwickeln und dabei die Konzepte und Techniken anzuwenden, die sie während des Workshops gelernt haben.

Inhalt

• Einführung in JavaScript und Grundlagen der Programmierung
  • Einführung in JavaScript und seine Verwendung
  • Die Grundlagen der Programmierung: Variablen, Datentypen und Operatoren
  • Bedingungen und Schleifen
• Funktionen, Arrays, Objekte
  • Funktionen und Parameter
  • Arrays und Objekte
  • Ereignisse und Event-Handler
  • Übung: Schreiben Sie ein Skript, das eine Eingabeaufforderung für ein Passwort anzeigt und prüft, ob das eingegebene Passwort den erforderlichen Anforderungen entspricht (z.B. Länge, enthaltene Zeichen)
  • ChatGPT-Unterstützung:
    • Bereitstellung von Tipps zur Implementierung der Passwortvalidierungslogik.
    • Hilfe bei der Fehlerbehebung und Optimierung des Skripts.
    • Beantwortung von Fragen zur JavaScript-Syntax und Funktionsweise von Eingabeaufforderungen.
• DOM-Manipulation, Formularverarbeitung und Fehlerbehandlung
  • Manipulation des DOM mit JavaScript
  • Formularverarbeitung und Validierung
  • Fehlerbehandlung und Debugging
  • Einführung in AJAX (Asynchronous JavaScript and XML)
  • Übung: Manipulieren Sie den DOM, um eine HTML-Seite zu erstellen, die eine Liste von Aufgaben enthält, die der Nutzer hinzufügen, bearbeiten und löschen kann.
  • ChatGPT-Unterstützung:
    • Anleitung zur Verwendung des DOM zur dynamischen Modifizierung von HTML-Elementen.
    • Unterstützung bei der Implementierung von Event-Handlern für die Interaktion mit der Aufgabenliste.
    • Bereitstellung von Best Practices für sauberen und wartbaren Code.
• Objektorientierung in JavaScript und Anwendungsentwicklung
  • Einführung in die Objektorientierung und Klassen in JavaScript
  • Verwendung von Konstruktoren und Prototypen
  • Erstellung von Objekten und Vererbung
  • Anwendungsentwicklung mit Objektorientierung in JavaScript
  • Vorstellung von Frameworks wie Angular, React und Vue.js
  • Übung: Erstellen Sie eine Klasse für einen Kalender und schreiben Sie Methoden zum Hinzufügen und Löschen von Ereignissen.
  • ChatGPT-Unterstützung:
    • Erläuterung der Konzepte von Klassen, Konstruktoren und Methoden in JavaScript.
    • Unterstützung bei der Strukturierung der Klasse und der Implementierung der geforderten Funktionen.
    • Hilfestellung bei der Integration der Klasse in eine bestehende Webanwendung.
      
      

Projekt: Entwicklung einer einfachen To-Do-Liste Webanwendung mit JavaScript

Die Teilnehmenden sollen eine einfache To-Do-Liste Webanwendung entwickeln, die es Benutzer:innen ermöglicht, Aufgaben hinzuzufügen, zu bearbeiten und zu löschen. Die Anwendung soll eine ansprechende Benutzeroberfläche haben und Benutzereingaben validieren, um eine korrekte Funktionsweise zu gewährleisten. Die Teilnehmenden sollen verschiedene Konzepte und Techniken verwenden, die sie während des Workshops gelernt haben, wie DOM-Manipulation, Formularverarbeitung und Fehlerbehandlung, um das Projekt abzuschließen.
Zusätzliche Anforderungen:

• Die Anwendung soll responsive sein und auf mobilen Geräten funktionieren.
• Die Teilnehmenden sollen die Anwendung mithilfe von Git und GitHub versionieren und die Projektdateien auf GitHub hochladen.
• Die Teilnehmenden sollen ihre Arbeit am letzten Tag des Workshops präsentieren und Feedback von anderen Teilnehmenden und dem Workshop-Leiter erhalten.
  
  

Dieses Projekt ist eine gute Möglichkeit für die Teilnehmenden, ihre Fähigkeiten in JavaScript zu verbessern und die verschiedenen Konzepte und Techniken anzuwenden, die sie während des Workshops gelernt haben. Gleichzeitig ist es auch eine nützliche Anwendung im Alltag und kann als Grundlage für weitere Entwicklungsprojekte dienen.

Grundlegende Struktur und Funktionalitäten:

• ChatGPT-Einsatz: Erläuterung der Basisstruktur einer Webanwendung mit HTML, CSS und JavaScript. Unterstützung bei der Erstellung eines Grundgerüsts, das Eingabefelder, Schaltflächen und eine Anzeige für die To-Do-Liste enthält.

DOM-Manipulation:

• ChatGPT-Einsatz: Anleitung zur Verwendung von JavaScript für die dynamische Manipulation des DOM, um Aufgaben hinzuzufügen, zu bearbeiten und zu löschen. Bereitstellung von Beispielen und Best Practices für effiziente DOM-Operationen.

Formularverarbeitung und Validierung:

• ChatGPT-Einsatz: Unterstützung bei der Implementierung von Formularvalidierungen, um sicherzustellen, dass Benutzereingaben korrekt sind. Hilfestellung bei der Erstellung von Funktionen zur Überprüfung der Eingabedaten.

Fehlerbehandlung:

• ChatGPT-Einsatz: Beratung zur Implementierung einer robusten Fehlerbehandlung, um eine benutzerfreundliche Erfahrung zu gewährleisten. Tipps zur Identifizierung und Behebung häufiger JavaScript-Fehler.

Responsive Design:

• ChatGPT-Einsatz: Bereitstellung von Anleitungen und Best Practices für die Erstellung einer responsiven Benutzeroberfläche, die auf verschiedenen Geräten und Bildschirmgrößen funktioniert. Tipps zur Nutzung von CSS Media Queries.

Versionierung mit Git und GitHub:

• ChatGPT-Einsatz: Anleitung zur Nutzung von Git für die Versionskontrolle und zum Hochladen des Projekts auf GitHub. Bereitstellung von Schritt-für-Schritt-Anweisungen zur Nutzung von Git-Befehlen und GitHub.

Präsentation und Feedback:

• ChatGPT-Einsatz: Beratung zur Vorbereitung und Durchführung einer effektiven Präsentation der Webanwendung. Unterstützung bei der Erstellung von Präsentationsmaterialien und Vorbereitung auf Feedback.