Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 5= ==Dokumentenzugriff== ===Ziel=== Ziel dieser Aufgabe ist es die in dem Browser-Tutorium vermittelten Grundlagen für das Arbeiten mit…“

2015-10-01T21:11:52Z

Die Seite wurde neu angelegt: „=Praktikumsaufgabe 5= ==Dokumentenzugriff== ===Ziel=== Ziel dieser Aufgabe ist es die in dem Browser-Tutorium vermittelten Grundlagen für das Arbeiten mit…“

Neue Seite

=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 <code>Logger</code> welcher mithilfe von <code>new</code> aufgerufen werden kann.
Dieser Konstruktor soll ein Objekt zurückliefern welches eine Funktion namens <code>log()</code> zur Verfügung stellt.

Diese Funktion nimmt einen Parameter <code>message</code> entgegen und ruft damit die Funktion <code>console.log()</code> 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.

<source lang="javascript">
var logger = new Logger();
logger.log('Hello World');
</source>

Die Konsole sollte dementsprechend nach Ausführung dieses Codes die Nachricht "Hello World" anzeigen.

===Nachrichten ins Dokument einfügen===

Ändern Sie nun die Funktion <code>log()</code> der Logger-Objekte so ab, dass sie fortan folgendes Verhalten aufweist:

* Es wird ein Element-Objekt mit dem Tag-Namen <code>div</code> erzeugt
* Das Argument "message" wird der Eigenschaft <code>innerHTML</code> des erzeugten Elements zugewiesen
* Weisen Sie dem erzeugten Objekt als "class"-Attibut den Wert "message" zu mithilfe von <code>setAttribute(key, value)</code>
* Das Element-Objekt mit der Klasse "messages" wird im Dokument gesucht mittels <code>querySelector()</code>
* Dem zuvor gesuchten Objekt wird das neu erzeugte <code>div</code>-Objekt angehängt mittels <code>appendChild()</code>

Folgende Anweisung soll nun dazu führen, dass eine Nachricht als sichtbares Element im Dokument eingefügt wird:

<source lang="javascript">
var logger = new Logger();
logger.log('Hello World');
</source>

===Präfix für Nachrichten===

Erweitern Sie den Logger-Konstruktor nun so, dass dieser ein Konstruktorargument namens <code>prefix</code> entgegennimmt.
Anschließend soll dem erstellten Logger-Objekt der Präfix als Eigenschaft zugewiesen werden.
Schreiben Sie <code>log()</code> so um, dass <code>prefix</code> mit der Nachricht kombiniert wird und das Ergebnis als Nachricht ausgegeben wird.

<source lang="javascript">
var logger = new Logger('message: ');
logger.log('Hello World');
</source>

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 <code>window.prompt()</code>
* Dann wird der Benutzer begrüßt durch eine Logger-Nachricht (<code>"Hallo " + name</code>)
* Des Weiteren wird die aktuelle URL durch den Logger ausgegeben (<code>location.href</code>)
* Zuletzt soll noch der verwendete Browser angezeigt werden (<code>navigator.userAgent</code>)

===Verschiedene Typen===

Ändern Sie nun die durch den Konstruktor erstellten Logger-Objekte so ab, das diese die folgenden drei Funktionen enthalten:
<code>logMessage()</code>, <code>logWarning()</code>, <code>logError()</code>. Benennen Sie im ersten Schritt die Funktion <code>log()</code> in <code>logMessage()</code> um.
Die anderen beiden Funktionen <code>logWarning()</code> und <code>logError()</code> sollen ähnlich funktionieren mit dem Unterschied
dass <code>logWarning()</code> dem erstellen Element-Objekt die HTML-Klasse "warning" zuweisen soll und <code>logError()</code> die Klasse "error".

Der folgende Code soll dazu führen dass eine normale Nachricht, sowie eine orange und eine rote Nachricht ausgegeben werden.

<source lang="javascript">
var logger = new Logger('message: ');
logger.logMessage('normal message');
logger.logWarning('something is not okay');
logger.logError('something went completely wrong');
</source>

MMProg:WiSe2015:Praktikum:Aufgabe 5 - Versionsgeschichte

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 5= ==Dokumentenzugriff== ===Ziel=== Ziel dieser Aufgabe ist es die in dem Browser-Tutorium vermittelten Grundlagen für das Arbeiten mit…“