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 mittels appendChild()

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');