Komponenten

Aufgabe 1: Absatzelement

In dieser Übung betrachten wir nun einführend die Thematik der Erweiterung von HTML auf der Grundlage von selbst definierten HTML-Elementen.

Implementieren Sie zu diesem Zweck das Beispiel für ein blau getöntes Absatzelement von den Vorlesungsfolien zum Thema HTML erweitern (Folie "Beispiel: Eigene Absatzkomponente" und folgende). Lagern Sie den JavaScript-Code in eine externe Datei aus. Das CSS können Sie entweder über einen String oder durch direktes Beschreiben der Elementeigenschaften mittels JavaScript umsetzen.
Erweitern Sie den JavaScript-Code um ein grün getöntes Absatzelement <p-green> und den HTML-Code ebenfalls um ein entsprechendes Element.
Erweitern Sie den JavaScript-Code um ein Element <p-color> und den HTML-Code wieder um einen Aufruf dieses Elements. Das Element verfügt über ein Attribut mit dem Namen color, dem ein Farbwert zugewiesen werden kann, z. B. red oder #FF00FF.
Der Farbwert wird im JavaScript-Code mit Hilfe des Methodenaufrufs getAttribute("color") ausgelesen und die Farbe des Absatzelements entsprechend gesetzt. Siehe hierzu die Dokumentation für die Methode getAttribute.

Aufgabe 2: Press Button

Implementieren Sie das Beispiel zum Press Button von den Vorlesungsfolien ("W3Schools-Button als Komponente" und folgende) und erzeugen Sie zwei von diesen Buttons. Wenn Sie die Buttons anklicken, sollte eine zum Button passende Meldung im Ausgabefeld erscheinen. Weisen Sie hierfür den Buttons im Markup Ereignisbehandler für das onclick-Ereignis zu.

Toggle Switch 1 on — Abb. 1: Zwei Press Buttons als HTML-Element mit Ausgabe in ein Ausgabefeld.

Aufgabe 3: Stoppuhr

Entwickeln Sie den Press Button zu einem Element <stop-watch> weiter. Im Ursprungszustand zeigt der Button den Wert 0 an. Nach dem Drücken des Buttons wird dieser Wert sekundenweise hochgezählt. Nochmaliges Drücken des Buttons stoppt den Zählvorgang und es wird der Endwert angezeigt. Wird wieder gedrückt, so wird der Wert auf 0 zurückgesetzt. Durch ein weiteres Drücken wird der nächste Zählvorgang gestartet.

Integrieren Sie zwei Stoppuhren in Ihre Webseite, wie in der Abbildung unten. Prüfen Sie, ob die Stoppuhren so funktionieren, wie definiert und ob sie unabhängig voneinander die Sekunden hoch zählen.

Der gesamte Code für die Steuerung der Stoppuhr und deren Anzeige ist Teil der Komponente. D. h. auf der Webseite steht für eine Stoppuhr nur <stop-watch></stop-watch> im Markup und es ist kein weiterer Code hier erforderlich.

Stopuhr zu Beginn — Abb. 2: Zwei Stoppuhren: a) zu Beginn, b) während des Betriebs.

Stoppuhren im Betrieb — Abb. 2: Zwei Stoppuhren: a) zu Beginn, b) während des Betriebs.

Aufgabe 4: Toggle Switch

Lesen Sie die W3Schools-Anleitung zur Implementierung eines abgerundeten Toggle Switch ("Rounded switch") unter dem folgenden Link.

Implementieren Sie diesen Toggle Switch als neues HTML-Element <toggle-switch>.

Am einfachsten können Sie dies umsetzen, indem Sie das komplette zum Toggle Switch gehörende Markup inklusive Stylesheet-Angaben in die innerHTML-Eigenschaft des HTML-Elements schreiben und nicht die CSS-Formatierungen getrennt in die style-Eigenschaft des HTML-Elements, wie es z. B. auf den Folien "Dynamische Formatierung (1)" und "Dynamische Formatierung (2)" geschah.

Der Name des Toggle Switches wird als Inhalt des <toggle-switch>-Elements festgelegt
(z. B. <toggle-switch>Toggle Switch 1</toggle-switch>) und erscheint in der Darstellung des Toggle Switches rechts neben dem eigentlichen Switch, wie in der Abbildung unten. Der Zugriff auf den Inhalt des Elements geschieht durch Auslesen der textContent-Eigenschaft des Elements.

Integrieren Sie zwei Toggle Switches in Ihre Webseite. Siehe hierzu wieder die Abbildung unten.

Aufgabe 5: Toggle Switch Gruppe

Definieren Sie ein Vue-Template für eine Gruppe untereinander angezeigter Toggle Switches, wie in der Abbildung unten.

Die Anzahl der zu genererienden Switches ergibt sich aus der Anzahl von Labeln ("Toggle Switch Group Member 1 usw.").

Toggle Switch List — Abb. 4: Toggle-Switch-Gruppe.

Aufgabe 6: Zeitanzeige

Implementieren Sie ein <page-time>-Element, welches die aktuelle Zeit auf der Webseite anzeigt, wie in der Abbildung unten angegeben.

Legen Sie zu diesem Zweck zunächst mit JavaScript ein Feld der auf der Webseite vorhandenen <page-time>-Elemente an und weisen Sie dann jedem Feldelement mit der Funktion setInterval einen zeitgesteuerten Ereignisbehandler zu. Den Ereignisbehandler selbst können Sie als anonyme Funktion jedem Feldelement als neue dynamische Eigenschaft - z. B. mit dem Namen timeHandler - zuweisen.