Aufgaben - WebApp

Hochschule Zittau/Görlitz, Fakultät EI, M.Sc. Anna Prenzel
Brückenkurs „Front-End Webapp“
Kursaufgaben Woche 5 Teil 3
Thema 1: JS Bedingungen
Aufgabe 1 – neues Wissen
Machen Sie sich im Javascript-Tutorial mit dem Konzept von Datentypen vertraut!
Aufgabe 2 – neues Wissen
Machen Sie sich im Javascript-Tutorial mit dem Konzept von Bedingungen vertraut!
Aufgabe 3 – Übungsaufgabe
Erstellen Sie eine neue Datei forms2.html nach diesem Vorbild:
Programmieren Sie ein kleines Ratespiel, bei dem der Benutzer Ihr Alter erraten soll:

Wenn die Zahl, die in das Input-Feld eingetragen wird, größer als Ihr Alter ist, soll unten die
Meldung erscheinen „Die Zahl ist zu groß!“.

Wenn die Zahl kleiner als Ihr Alter ist, soll die Meldung erscheinen „Die Zahl ist zu klein!“.

Wenn die Zahl gleich Ihrem Alter ist, soll ausgegeben werden: „Die Zahl ist korrekt!“.
Die Meldung soll im Element über die Eigenschaft „innerHTML“ eingetragen
werden.
Referenz für Vergleichsoperatoren: http://www.w3schools.com/js/js_comparisons.asp
Aufgabe 4 – Übungsaufgabe
Öffnen Sie die Datei mars2020.html im Editor.
1. Geben Sie der ersten Antwort (zusätzlich zum Klassennamen) eine ID!
2. Ändern Sie das CSS-stylesheet so ab, dass die erste Antwort zunächst unsichtbar ist.
3. Ergänzen Sie neben der ersten Frage einen Button mit der Aufschrift „Show/Hide Answer“.
4. Ergänzen Sie eine Javascript-Funktion, die folgende Funktionalität erfüllt:
Hochschule Zittau/Görlitz, Fakultät EI, M.Sc. Anna Prenzel
a. beim ersten Klick auf den Button soll die Antwort sichtbar werden
b. beim zweiten Klick auf den gleichen Button soll die Antwort wieder unsichtbar werden.
Verwenden Sie dazu eine if-Bedingung.
Referenz für Vergleichsoperatoren: http://www.w3schools.com/js/js_comparisons.asp
Aufgabe 5 – Übungsaufgabe
Öffnen Sie die Datei forms1.html im Editor.
Drei Eingabefelder des Formulars sollen als Pflichtfelder gekennzeichnet werden. Vergeben Sie für
die Pflichtfelder einen einheitlichen Klassennamen. Entwickeln Sie ein CSS-stylesheet, um die drei
Pflichtfelder grafisch hervorzuheben (z.B. Schriftstil „bold“ für den Text „Eingabe“).
Beim Klick auf den Button „Übernehmen“ soll nun überprüft werden, ob die Pflichtfelder ausgefüllt
sind. Wenn ein Pflichtfeld nicht ausgefüllt ist, soll eine rote Meldung „Bitte geben Sie einen Wert ein“
direkt neben dem jeweiligen Feld erscheinen.
Wenn der Benutzer anschließend die fehlenden Felder ausfüllt und nochmals auf „Übernehmen“ klickt,
sollen die roten Meldungen bei den ausgefüllten Feldern wieder verschwinden.
Verwenden Sie eine for-Schleife und eine if-Bedingung!
Hinweise
Fügen Sie im HTML-Code neben jedem Input-Feld ein leeres Tag

ein (Referenz: http://www.w3schools.com/tags/tag_span.asp).
Wenn ein Input-Feld leer ist, hat seine Eigenschaft „value“ den Wert "".
Referenz für Vergleichsoperatoren: http://www.w3schools.com/js/js_comparisons.asp
Thema 2: Verknüpfung von Strings
Aufgabe 6 – neues Wissen
Arbeiten Sie das Tutorial zum Thema Javascript-Strings durch! Besonders wichtig ist der Abschnitt
„String-Operationen“.
Aufgabe 7 – Übungsaufgabe
Öffnen Sie die Datei forms1.html im Editor. Beim Klick auf den Button „Übernehmen“ soll am Ende der
Seite das Wort angezeigt werden, dass sich durch Verkettung aller Eingaben mit dem Operator „+“
ergibt:
Gehen Sie dazu wie folgt vor:
Definieren Sie im HTML-Code ein neues Tag mit einer bestimmten ID am Ende der Seite.
Legen Sie in der Javascript-Funktion für den Button „Übernehmen“ über der for-Schleife eine neue
Variable an, z.B. so:
Hochschule Zittau/Görlitz, Fakultät EI, M.Sc. Anna Prenzel
var wort = "";
Ergänzen Sie in der for-Schleife die Anweisung:
wort += …
oder
wort = wort + …
wobei Sie an der Stelle von … den „value“ des Input-Elements an der Position [i] eintragen müssen.
Zeigen Sie nach der for-Schleife das Wort in dem dafür angelegten -Element an.
Aufgabe 8 – Übungsaufgabe
Laden Sie sich die Datei test.html vom Server herunter. Studieren Sie den HTML-Code der Seite und
das Verhalten im Browser.
Folgendes sollten Sie dabei lernen:

Über eine Javascript-Funktion kann beliebiger
Anführungszeichen "" ) generiert werden.

Mit dem Operator „+“ können Sie einen String aus mehreren Teilstrings zusammensetzen.

Der generierte String kann über die Eigenschaft „innerHTML“ an ein bestimmtes Element
angehängt werden.
HTML-Code
als
String
(also
in
Testen Sie die Seite im Browser und kontrollieren Sie nach dem Klick auf einen der beiden Buttons die
Struktur des HTML-Baums mit dem DOM-Inspektor.
Aufgabe 9 – Übungsaufgabe
Laden Sie die Datei todo.zip vom Server herunter. Betrachten Sie die Datei todo.gif. Programmieren
Sie eine neue Webseite todo.html mit dem gezeigten Verhalten.
Hinweise
Definieren Sie im HTML-Code eine Liste <ul> mit einer bestimmten ID.
Schreiben Sie eine Javascript-Funktion, die beim Klick auf den Button aufgerufen wird.
Greifen Sie darin auf die Eigenschaft „innerHTML“ der Liste <ul> zu. Verwenden Sie den Operator
„+=“, um ein weiteres <li>-Element an „innerHTML“ anzuhängen.
Testen Sie die Seite im Browser und kontrollieren Sie mit Hilfe des DOM-Inspektors den HTML-Baum.
Aufgabe 10 – Übungsaufgabe
Auf der Webseite todo.html soll der Benutzer nun die Möglichkeit haben, besonders wichtige
Aufgaben zu kennzeichnen. Dafür soll eine Checkbox (<input type=“checkbox“>) neben dem
Eingabefeld ergänzt werden.
Wenn die Checkbox vom Nutzer aktiviert wurde, soll die Aufgabe als wichtig gekennzeichnet werden.
Das Verhalten wird in der Datei todo2.gif gezeigt.
Hinweise
Definieren Sie im stylesheet eine Klasse für die wichtigen Aufgaben.
Hochschule Zittau/Görlitz, Fakultät EI, M.Sc. Anna Prenzel
Verwenden Sie in der Javascript-Funktion eine if-Bedingung: Wenn die Checkbox aktiviert wurde, wird
dem neuen <li>-Element die oben definierte Klasse zugewiesen.
Ob eine Checkbox aktiviert wurde, können Sie über die Eigenschaft „checked“ abfragen. Einen
Hinweis finden Sie im letzten Beispiel auf dieser Seite:
http://www.w3schools.com/jsref/prop_checkbox_checked.asp

Download Report