development-ib-fork/web/11/labor/11_aufgaben.md

Ü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 unterhalb der Überschrift (Tipp: w3schools.com: Image)
   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 eingeben können und daraufhin einen passenden Spruch angezeigt bekommen.

Arbeitsschritte

1. Verwenden Sie dazu das vorgebene HTML-Formular 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.