forked from WEB-IMB-WS2526/lab-development-imb
71 lines
3.4 KiB
Markdown
71 lines
3.4 KiB
Markdown
# Ü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](Adventskranz.png) 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.
|
||
|
||
## 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](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](https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp)
|
||
- Auslesen der Farbauswahl [w3schools.com: Input Color](https://www.w3schools.com/jsref/prop_color_value.asp)
|
||
|
||
|