lab-development-imb/web/10/labor/10_aufgaben.md

Übungsblatt 10

1. Javascript-Übung: DOM und Events

Aufgabenstellung: Erstellen Sie eine interaktive Webseite, die ein Bild zum Adventsgruß anzeigt.

Arbeitsschritte

1. Erstellen Sie zunächst eine HTML-Seite mit der Überschrift (erste Ebene): "Alle Jahre wieder...".
2. Darunter ist ein Button-Element mit der Aufschrift "Erste 🕯️ anzünden".
3. Sobald der Button geklickt wurde:
   1. wird die alte Überschrift durch diese ersetzt: "Einen fröhlichen ersten Advent!"
   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.

2. 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.

3. CSS-Übung: Selektoren

Aufgabenstellung: Definieren Sie ein CSS-Stylesheet, das ein vorgegebenes HTML-Dokument einfärbt.

Arbeitsschritte

1. Verwenden Sie dazu das vorgebene HTML-Formular bunt.html.
2. Erstellen Sie ein Stylesheet und verlinken es im HTML.
3. Setzen Sie die Hintergrundfarbe des Dokuments auf slateblue.
4. Die Überschrift der ersten Ebene soll lightcoral sein.
5. Alle Überschriften der zweiten Ebene sollen whitesmoke sein.
6. Setzen Sie die restlichen Farben, wie der Text es fordert.

4. CSS-Übung: Farben und Events

Aufgabenstellung: Erstellen Sie eine interaktive Webseite, die nach Auswahl einer Farbe die Hintergrundfarbe verändert.

Arbeitsschritte:

1. Erstellen Sie eine HTML-Seite auf der ein Eingabefeld des Typs color zu sehen ist. Denken Sie auch an eine geeignete Beschriftung.
2. Schreiben Sie ein Javascript-Programm, dass bei Auswahl einer Farbe
   1. den Hintergrund der HTML-Seite anpasst
   2. die gewählte Farbe in einer alert-Nachricht ausgibt

Tipps

• Setzen der Hintergrundfarbe w3schools.com: Backgroundcolor
• Auslesen der Farbauswahl w3schools.com: Input Color