+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/11/demos/01_events.js b/web/11/demos/01_events.js
new file mode 100644
index 0000000..6ff1083
--- /dev/null
+++ b/web/11/demos/01_events.js
@@ -0,0 +1,20 @@
+// Button-Click-Event
+const button = document.getElementById("klickButton");
+const ausgabe = document.getElementById("ausgabe");
+
+button.addEventListener("click", () => {
+ ausgabe.textContent = "Button wurde geklickt!";
+});
+
+// Input-Event
+const eingabe = document.getElementById("eingabe");
+const eingabeAusgabe = document.getElementById("eingabeAusgabe");
+
+eingabe.addEventListener("input", () => {
+ eingabeAusgabe.textContent = "Du hast eingegeben: " + eingabe.value;
+});
+
+// Mouseover-Event
+button.addEventListener("mouseover", () => {
+ ausgabe.textContent = "Maus über dem Button!";
+});
\ No newline at end of file
diff --git a/web/11/demos/02_validierung.html b/web/11/demos/02_validierung.html
new file mode 100644
index 0000000..092900a
--- /dev/null
+++ b/web/11/demos/02_validierung.html
@@ -0,0 +1,31 @@
+
+
+
+
+ Formularvalidierung mit Live-Feedback
+
+
+
Registrierung
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/11/demos/02_validierung.js b/web/11/demos/02_validierung.js
new file mode 100644
index 0000000..5a0a1f9
--- /dev/null
+++ b/web/11/demos/02_validierung.js
@@ -0,0 +1,78 @@
+document.addEventListener("DOMContentLoaded", () => {
+ const form = document.getElementById("contactForm");
+
+ const username = document.getElementById("username");
+ const email = document.getElementById("email");
+ const age = document.getElementById("age");
+
+ const usernameError = document.getElementById("usernameError");
+ const emailError = document.getElementById("emailError");
+ const ageError = document.getElementById("ageError");
+
+// // --- Live-Feedback ---
+ username.addEventListener("input", () => {
+ const value = username.value.trim().toLowerCase();
+ if (!value) {
+ usernameError.textContent = "Benutzername darf nicht leer sein.";
+ } else if (value === "admin") {
+ usernameError.textContent = "Der Benutzername 'admin' ist nicht erlaubt.";
+ } else {
+ usernameError.textContent = "";
+ }
+ });
+
+ email.addEventListener("input", () => {
+ if (!email.validity.valid) {
+ emailError.textContent = "Bitte eine gültige E-Mail-Adresse eingeben.";
+ } else {
+ emailError.textContent = "";
+ }
+ });
+
+ age.addEventListener("input", () => {
+ if (!age.validity.valid) {
+ if (age.validity.valueMissing) {
+ ageError.textContent = "Bitte das Alter angeben.";
+ } else if (age.validity.rangeUnderflow) {
+ ageError.textContent = "Du musst mindestens 18 Jahre alt sein.";
+ } else if (age.validity.rangeOverflow) {
+ ageError.textContent = "Das Alter darf 99 nicht überschreiten.";
+ } else {
+ ageError.textContent = "Ungültige Eingabe.";
+ }
+ } else {
+ ageError.textContent = "";
+ }
+ });
+
+ // --- Prüfung beim Absenden ---
+ form.addEventListener("submit", (event) => {
+ let valid = true;
+
+ // Benutzername prüfen
+ const value = username.value.trim().toLowerCase();
+ if (!value) {
+ usernameError.textContent = "Benutzername darf nicht leer sein.";
+ valid = false;
+ } else if (value === "admin") {
+ usernameError.textContent = "Der Benutzername 'admin' ist nicht erlaubt.";
+ valid = false;
+ }
+
+ // E-Mail prüfen
+ if (!email.validity.valid) {
+ emailError.textContent = "Bitte eine gültige E-Mail-Adresse eingeben.";
+ valid = false;
+ }
+
+ // Alter prüfen
+ if (!age.validity.valid) {
+ ageError.textContent = "Bitte ein gültiges Alter zwischen 18 und 99 eingeben.";
+ valid = false;
+ }
+
+ if (!valid) {
+ event.preventDefault(); // verhindert das Absenden
+ }
+ });
+});
\ No newline at end of file
diff --git a/web/11/labor/11_aufgaben.md b/web/11/labor/11_aufgaben.md
new file mode 100644
index 0000000..55b0d6b
--- /dev/null
+++ b/web/11/labor/11_aufgaben.md
@@ -0,0 +1,40 @@
+# Übungsblatt xx
+
+## 3. Javascript-Übung: DOM und Events
+
+**Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, die ein Bild zum Start der Pfingstferien anzeigt.
+
+#### Arbeitsschritte
+
+1. Erstellen Sie zunächst eine HTML-Seite mit der Überschrift (erste Ebene): "Endlich Pfingsferien!".
+2. Darunter ist ein Button-Element mit der Aufschrift "Ferien starten 🌞".
+3. Sobald der Button geklickt wurde:
+ 1. wird die alte Überschrift durch diese ersetzt: "Schöne und erholsame Pfingstferien!"
+ 2. erscheint diese [Bild](Pfingstrose.jpg) unterhalb der Überschrift (*Tipp*: [w3schools.com: Image](https://www.w3schools.com/jsref/prop_img_src.asp))
+ 3. der Button verschwindet
+All dies soll in einem Javascript-Programm gesteuert werden, dass Sie in Ihre HTML-Seite einbinden.
+
+## 4. Javascript-Übung: Validierung und Events
+
+**Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, in der Nutzer:innen den Namen ihres Lieblingshelden der [Paw‑Patrol](https://de.wikipedia.org/wiki/PAW_Patrol) eingeben können und daraufhin einen passenden Spruch angezeigt bekommen.
+
+#### Arbeitsschritte
+
+1. Verwenden Sie dazu das vorgebene HTML-Formular [pawpatrol.html](pawpatrol.html).
+2. Erstellen Sie eine zugehörige JavaScript‑Datei, in der Sie ein Objekt mit den erlaubten Figuren und deren typischen Sprüchen hinterlegen:
+
+```
+"Chase": "Chase ist auf Spur!"
+"Marshall": "Ich bin startklar!"
+"Skye": "Diese Pfote hebt ab!"
+"Rocky": "Wegwerfen? Kommt nicht in die Tüte!"
+"Rubble": "Rubble ist zur Stelle!"
+"Zuma": "Los geht’s ins Wasser!"
+"Everest": "Eis und Schnee – ich bin bereit!"
+"Tracker": "Ich höre alles!"
+```
+
+3. Bei Absenden des Formulars (`submit`) prüfen Sie mit Ihrem JavaScript, ob der eingegebene Name mit einem der Namen aus dem Objekt übereinstimmt.
+ - Falls *ja*, geben Sie eine Bestätigungsmeldung in Abschnitt mit `id="meldung"` sowie den passenden Spruch der Figur in dem Abschnitt mit `id="spruch"` aus.
+ - Falls *nein*, erscheint eine Fehlermeldung im Abschnitt mit `id="meldung"`, die darauf hinweist, dass nur Paw‑Patrol‑Namen erlaubt sind.
+4. Testen Sie Ihr Javascript mit Hilfe des vorgegebenen HTML-Formulars.
\ No newline at end of file
diff --git a/web/11/labor/Pfingstrose.jpg b/web/11/labor/Pfingstrose.jpg
new file mode 100644
index 0000000..35d0c8b
Binary files /dev/null and b/web/11/labor/Pfingstrose.jpg differ
diff --git a/web/11/labor/pawpatrol.html b/web/11/labor/pawpatrol.html
new file mode 100644
index 0000000..0069c25
--- /dev/null
+++ b/web/11/labor/pawpatrol.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+ Paw Patrol - Helfer auf vier Pfoten
+
+
+
+