HTML-Bedienelemente und Ereignisbehandlung

Aufgabe 1: Addierer

Implementieren Sie das Beispiel von der Folie "Addierer" aus der Vorlesung. Das Beispiel zeigt auf einfache Weise, dass eine auf der Verarbeitung von Eingabewerten mit zugehörender Ergebnisausgabe beruhende Anwendung als Teil einer Webseite laufen kann.

Erweitern Sie den Addierer zu einer "Online-Registrierkasse", die nach jedem neu eingegebenen Wert die bislang eingegebenen Werte ausgibt sowie deren Summe.

Abb. 1: Registrierkasse (links: GUI, rechts: In Betrieb)

Die zu addierenden Werte werden im oberen Textfeld eingegeben. Nach dem Drücken von "Summe" werden die bislang eingegebenen Werte zusammen mit deren Summe in dem darunter befindlichen Textarea ausgegeben und der Inhalt im Eingabetextfeld gelöscht.
Nach dem Drücken von "Löschen" werden alle gemerkten Eingabewerte sowie die Ausgabe im Textarea gelöscht, sodass die Bedienoberfläche wieder erscheint wie in Abb. 1 links.

Aufgabe 2: Bedienoberfläche mit Flexbox

Erstellen Sie die unten abgebildete Bedienoberfläche mit Hilfe von HTML-Bedienelementen und dem Flexbox-Modell. Vermeiden Sie absolute Angaben in Pixel für die Größe und Position der grafischen Komponenten. Ermöglichen Sie durch Verwendung prozentualer Größenangaben eine flexible Anpassung der Benutzeroberfläche an die gewählte Größe des Browserfensters. Wenn das Browserfenster in seiner Größe verändert wird, müssen die grafischen Komponenten automatisch ihre Position und Größe so anpassen, dass dieses in der Breite gefüllt ist.

Zur Erreichung des oben angegebenen Ziels sind unterschiedliche Lösungen denkbar. Die folgende Abbildung zeigt eine Kombination von Flexbox-Containern, mit der die oben dargestellte Anordnung mit relativ wenig Code erreicht werden kann.

Aufteilung der Bedienoberfläche mit Flexbox-Containern — Abb. 3: Anordnung der Flexbox-Container

Weitere Informationen zum Thema FlexBox finden Sie in den W3Schools-Artikeln unter CSS3 Flexible Box.

Hinweis: Sofern Sie für die Darstellung Ihrer Anwendung einen Webkit-Browser verwenden, wie z. B. Safari, und die CSS-Direktiven für Flexbox in der allgemeinen Form nicht funktionieren, benötigen die Flexbox-Anweisungen das Präfix -webkit-.
Z. B. display: -webkit-flex; und
-webkit-justify-content: space-between;
Diese Anweisungen können zusätzlich zu denen ohne Präfix, die für die anderen gängigen Browser verwendet werden, notiert werden.

Aufgabe 3: Ereignisbehandlung

Schreiben Sie zur Bedienoberfläche aus Aufgabe 2 eine Ereignisbehandlungsfunktion handleEvent(text). Drücken eines Buttons, einer Check Box oder eines Radio Buttons der Benutzeroberfläche führt zum Aufruf dieser Funktion. Die Funktion erhält im Parameter text eine kurze Meldung darüber, welcher Button gedrückt wurde. Die Funktion gibt diese Meldung dann im oben angeordneten Textfeld der Benutzeroberfläche aus, z. B. Radio Button 1 pressed, wie oben in Abb. 1.

Aufgabe 4: Einfache Zeichenanwendung

Implementieren Sie das Beispiel zu einer einfachen Zeichenanwendung aus der Vorlesung. Legen Sie hierzu eine HTML-Seite mit Canvas-Element an sowie eine JavaScript-Datei, die den Code für den Zugriff auf das Canvas-Element, für die Einstellung der Stiftparameter und die Ereignisbehandler enthält.