Prüfung:MMProg:WiSe2014:Teil 1

MMProg Prüfungspraktikum WiSe 2014/2015

Teil 1

Anmerkung: Im Prüfungspraktikum werden Ihnen Skripte zur Verfügung gestellt für den Checkout sowie für den Commit. Bitte versuchen Sie nicht selbst einen Checkout zu machen oder direkt über WebStorm zu committen.

Vorbereitung

Öffnen Sie das Terminal und führen Sie folgenden Befehl aus: "./setupenv.sh RZ-Kennung" (mit Ihrer eigenen RZ-Kennung). Geben Sie Ihr RZ-Passwort ein falls Sie dazu aufgefordert werden. Falls Sie außerdem noch gefragt werden ob das Passwort gespeichert werden soll, verweigern Sie dies mit "nein".

Das Skript "setupenv.sh" erledigt die folgenden Aufgaben:

• Checkout von Ihrem eigenen Repository in das Verzeichnis "~/Arbeitsfläche/repository"
• Anlegen des Verzeichnis "pruefung_20150119" innerhalb von Ihrem "repository"-Verzeichnis
• Befüllen des neuen Verzeichnis mit allen notwendigen Prüfungsdateien
• Ausführen von "svn add" auf allen Prüfungsdateien damit sie später committed werden

Öffnen Sie im Anschluss WebStorm vom Desktop aus und wählen Sie Ihr Repository-Verzeichnis als Projekt. Navigieren Sie dann innerhalb von WebStorm zu dem Prüfungsordner "pruefung_20150119".

Bearbeiten Sie die nachfolgenden Aufgaben, indem Sie ausschliesslich die Datei "index.js" entsprechend modifizieren. Fügen Sie den Code für die einzelnen Aufgaben der Übersichtlichkeit halber immer nach den zugehörigen Kommentaren ein.

Nutzen Sie die Funktion log() der bereits erzeugten Logger-Instanz namens "logger" um Ihre Nachrichten auszugeben. Öffnen Sie zu gegebenen Zeitpunkten die Datei "index.html" im Browser um die Korrektheit Ihres Codes zu überprüfen.

Aufgabe 1

Geben Sie den String "MMProg Prüfungspraktikum WiSe 2014/2015" (ohne Anführungszeichen) aus.

Aufgabe 2

Erzeugen Sie die Variablen "firstName" und "lastName" und weisen Sie ihnen Ihren eigenen Vornamen bzw. Nachnamen als Wert zu. Geben Sie dann die Variablen durch ein Leerzeichen getrennt und vorangestellt durch die Zeichenkette "Name: " aus.

Beispielausgabe: "Name: Max Mustermann"

Aufgabe 3

Erzeugen Sie die Variable "birthday" und weisen Sie dieser ein neues, leeres Objekt zu (mittels Konstruktor oder Objektliteral). Erzeugen Sie auf dem Objekt die Eigenschaften "day", "month" und "year" und befüllen Sie diese mit den jeweiligen Werten Ihres Geburtsdatums. Geben Sie dann die Variablen aus, jeweils durch einen Punkt getrennt und vorangestellt durch die Zeichenkette "Geburtsdatum: ".

Beispielausgabe: "Geburtsdatum: 01.02.1999"

Aufgabe 4

Erzeugen Sie die Variable "skills" und weisen Sie dieser ein neues, leeres Array zu (mittels Konstruktor oder Array-Literal). Fügen Sie dann nacheinander drei Strings in das Array ein, welche jeweils eine Fähigkeit von Ihnen beschreiben. Falls Ihnen keine Fähigkeiten einfallen, die Sie nennen möchten, so verwenden Sie einfach drei aus der folgenden Liste: Design, Konzeption, Planung, Kostenkalkulation, Implementierung, Architektur, Recherche.

Geben Sie zunächst den String "Skills:" aus. Nutzen Sie dann eine for-Schleife um jedes einzelne Element aus dem Array vorangestellt durch den String "* " auszugeben.

Beispielausgabe:

"Skills:

• Planung
• Kostenkalkulation
• Recherche"

Aufgabe 5

Erzeugen Sie eine Funktion namens "divideInteger" welche eine ganzzahlige Teilung für zwei beliebige Zahlen ausführen soll. Die Funktion akzeptiert die beiden Argumente "number" und "factor" und teilt "number" ganzzahlig durch "factor".

Beispiele für ganzzahlige Teilungen:

• 5 / 2 = 2
• 7 / 3 = 2
• 3 / 2 = 1

Rufen Sie dann die Funktion "divideInteger" mit folgenden Wertkombinationen auf und geben Sie die Ergebnisse aus:

• number: 5, factor: 2
• number: 4, factor: 2
• number: 1, factor: 2

Aufgabe 6

In dieser Aufgabe sollen zwei Studenten und deren Semesterarbeit als stark vereinfachtes Objektmodell abgebildet werden.

Erzeugen Sie die Objekte "studentObject1" und "studentObject2" mit den Eigenschaften "firstName", "lastName" und "matriculationNumber".

Das erste Objekt erhält folgende Werte:

• "firstName" => "Max"
• "lastName" => "Mustermann"
• "matriculationNumber" => 1234

Das zweite Objekt erhält folgende Werte:

• "firstName" => "Moritz"
• "lastName" => "Mustermann"
• "matriculationNumber" => 4321

Beide Objekte erhalten die Funktion "getDescription", welche die Kombination aus Vornamen, Nachnamen und Immatrikulationsnummer zurückgibt. Der Rückgabe-String soll bestehen aus der Zeichenkette "Name: ", Vorname und Nachname durch ein Leerzeichen getrennt, der Zeichenkette ", Matrikelnummer: " und der Matrikelnummer selbst, sodass eine schön formattierte Ausgabe entsteht. Rufen Sie die Funktion "getDescription()" beider Objekte auf und geben Sie das Ergebnis jeweils mit dem Logger aus.

Erzeugen Sie dann das Objekt "projectObject" welches die beiden Eigenschaften "title" und "authors" erhält. "title" wird mit dem Wert "Flappy Bird" belegt, "authors" mit einem Array welches die beiden zuvor erstellten Studenten-Objekte enthält.

Das Projektobjekt erhält ebenfalls eine Funktion "getDescription", welche folgende Informationen als String zurückgeben soll:

• Titel des Projekts, vorangestellt durch den String "Titel: "
• Den Rückgabewert der Funktion "getDescription" von jedem am Projekt beteiligten Autor

Dabei sollte der Titel des Projekts sowie jeder einzelne Autor jeweils auf einer einzelnen Zeile ausgegeben werden.

Tipp: Um eine neue Zeile zu erzeugen können Sie ein <br>-Tag am Ende eines Strings einfügen ("<br>").

Rufen Sie die Funktion "getDescription" des Projektobjekts auf und geben Sie das Ergebnis mit dem Logger aus.

Aufgabe 7

In dieser Aufgabe sollen Sie den oben beschriebenen Sachverhalt nun mithilfe von Konstruktorfunktionen abbilden. Dabei gilt es eine Konstruktorfunktion namens "Student" und eine namens "StudentProject" zu implementieren. "Student" akzeptiert die Argumente "firstName", "lastName" und "matriculationNumber" und weist diese der jeweiligen Instanz zu. "StudentProject" akzeptiert die beiden Argumente "title" und "authors" und weist diese ebenso der jeweiligen Instanz zu.

Beide Konstruktoren weisen den erzeugten Objekten auch eine Funktion "getDescription" zu, welche sich wie oben beschrieben verhält.

Erzeugen Sie dann mittels dem "Student"-Konstruktor die beiden Objekte "studentInstance1" und "studentInstance2". "studentInstance1" erhält die gleichen Werte wie "studentObject1", "studentInstance2" die gleichen wie "studentObject1".

Erzeugen Sie mittels dem "StudentProject"-Konstruktor das Objekt "projectInstance" als Pendant zu "projectObject".

Rufen Sie die Funktion "getDescription" ebenso auf allen erzeugten Instanzen auf und geben Sie die Rückgabewerte mit dem Logger aus.

Aufgabe 8

Erzeugen Sie ein "div"-DOM-Element und speichern Sie dieses in einer Variable namens "timestamp". Weisen Sie dem inneren HTML des DOM-Elements als Wert die Kombination aus dem String "Aktuelle Zeit: " und dem aktuellen Datum zu. Fügen Sie dann das erzeugte DOM-Element am Ende des "body"-DOM-Elements des aktuellen Dokuments ein.

Wenn Sie die Seite nun im Browser betrachten sollte am Ende des Dokuments jeweils die aktuelle Zeit vom Seitenaufruf stehen.

Aufgabe 9

Erzeugen Sie die Funktion "updateTimestamp" welche ebenso dem inneren HTML des zuvor erstellen "div"-DOM-Elements die Kombination aus dem String "Aktuelle Zeit: " und dem aktuellen Datum zuweist.

Erzeugen Sie dann einen *geeigneten* und sich wiederholenden Timer welcher ungefähr jede Sekunde die Funktion "updateTimestamp" aufruft. Begründen Sie in einem Satz in einem Code-Kommentar Ihre Entscheidung bezgülich des gewählten Timers.

Wenn Sie die Seite nun im Browser betrachten sollte sich die aktuelle Zeit ungefähr jede Sekunde aktualisieren.

Aufgabe 10

Erzeugen Sie einen globalen Event-Listener für das "click"-Event auf dem document-Objekt. In der Callback-Funktion soll überprüft werden ob das jeweilige Ereignisziel als "class"-Attribut den Wert "message" besitzt. Ist dies der Fall, so soll der CSS-Eigenschaft "color" vom Ereignisziel der Wert "red" zugewiesen werden.

Wenn Sie nun auf einzelne Ausgaben klicken sollten diese rot eingefärbt werden.