MMProg:WiSe2015:Praktikum:Aufgabe 5
Praktikumsaufgabe 5
Dokumentenzugriff
Ziel
Ziel dieser Aufgabe ist es die in dem Browser-Tutorium vermittelten Grundlagen für das Arbeiten mit Dokumenten zu vertiefen.
Projekt vorbereiten
Anmerkung: Es ist fortan nicht notwendig Subversion über die Kommandozeile zu bedienen. Nutzen Sie dazu einfach WebStorm oder aber TortoiseSVN bzw. svnX.
Erzeugen Sie einen neuen Ordner "aufgabe5" innerhalb Ihres Verzeichnis/Repositories. Speichern Sie alle Dateien aus dem Vorlagenordner "aufgabe5/vorlage" in diesem Ordner ab.
Machen Sie sich mit der Datei "index.html" vertraut und öffnen Sie diese testweise im Browser. Speichern Sie alle Bestandteile des zu erstellenden Loggers in der Datei "logger.js" ab. Die eigentliche Ausführung des Programms und die Testausgaben speichern Sie in der Datei "index.js".
Logger erzeugen
Erzeugen Sie zunächst einen global verfügbaren Konstruktor namens Logger
welcher mithilfe von new
aufgerufen werden kann.
Dieser Konstruktor soll ein Objekt zurückliefern welches eine Funktion namens log()
zur Verfügung stellt.
Diese Funktion nimmt einen Parameter message
entgegen und ruft damit die Funktion console.log()
auf.
Das bedeutet dass ein Logger-Objekt zuerst nichts anderes macht als die Nachricht an die Browser-Konsole weiterzureichen.
Fügen Sie dann folgenden Aufruf in die Datei "index.js" ein und betrachten Sie die "index.html" im Browser.
var logger = new Logger();
logger.log('Hello World');
Die Konsole sollte dementsprechend nach Ausführung dieses Codes die Nachricht "Hello World" anzeigen.
Nachrichten ins Dokument einfügen
Ändern Sie nun die Funktion log()
der Logger-Objekte so ab, dass sie fortan folgendes Verhalten aufweist:
- Es wird ein Element-Objekt mit dem Tag-Namen
div
erzeugt - Das Argument "message" wird der Eigenschaft
innerHTML
des erzeugten Elements zugewiesen - Weisen Sie dem erzeugten Objekt als "class"-Attibut den Wert "message" zu mithilfe von
setAttribute(key, value)
- Das Element-Objekt mit der Klasse "messages" wird im Dokument gesucht mittels
querySelector()
- Dem zuvor gesuchten Objekt wird das neu erzeugte
div
-Objekt angehängt mittelsappendChild()
Folgende Anweisung soll nun dazu führen, dass eine Nachricht als sichtbares Element im Dokument eingefügt wird:
var logger = new Logger();
logger.log('Hello World');
Präfix für Nachrichten
Erweitern Sie den Logger-Konstruktor nun so, dass dieser ein Konstruktorargument namens prefix
entgegennimmt.
Anschließend soll dem erstellten Logger-Objekt der Präfix als Eigenschaft zugewiesen werden.
Schreiben Sie log()
so um, dass prefix
mit der Nachricht kombiniert wird und das Ergebnis als Nachricht ausgegeben wird.
var logger = new Logger('message: ');
logger.log('Hello World');
Der oben stehende Code sollte dementsprechend dazu führen dass in der Konsole "message: Hello World" ausgegeben wird.
Weitere Nachrichten ausgeben
Schreiben Sie abschließend die Datei "index.js" so um, dass sie folgendes Verhalten aufweist:
- Zuerst wird der Name des Benutzers abgefragt mithilfe von
window.prompt()
- Dann wird der Benutzer begrüßt durch eine Logger-Nachricht (
"Hallo " + name
) - Des Weiteren wird die aktuelle URL durch den Logger ausgegeben (
location.href
) - Zuletzt soll noch der verwendete Browser angezeigt werden (
navigator.userAgent
)
Verschiedene Typen
Ändern Sie nun die durch den Konstruktor erstellten Logger-Objekte so ab, das diese die folgenden drei Funktionen enthalten:
logMessage()
, logWarning()
, logError()
. Benennen Sie im ersten Schritt die Funktion log()
in logMessage()
um.
Die anderen beiden Funktionen logWarning()
und logError()
sollen ähnlich funktionieren mit dem Unterschied
dass logWarning()
dem erstellen Element-Objekt die HTML-Klasse "warning" zuweisen soll und logError()
die Klasse "error".
Der folgende Code soll dazu führen dass eine normale Nachricht, sowie eine orange und eine rote Nachricht ausgegeben werden.
var logger = new Logger('message: ');
logger.logMessage('normal message');
logger.logWarning('something is not okay');
logger.logError('something went completely wrong');