forked from WEB-IB-SS26/development-ib
40 lines
2.1 KiB
Markdown
40 lines
2.1 KiB
Markdown
# Übungsblatt 11
|
||
|
||
## 1. 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.
|
||
|
||
## 2. 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. |