MMProg:WiSe2015:Praktikum:Aufgabe 4: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Die Seite wurde neu angelegt: „=Praktikumsaufgabe 4= ==Arbeiten mit Funktionen und <code>this</code>== ===Ziel=== Ziel dieser Aufgabe ist es die in dem JavaScript-Tutorium vermittelten Gr…“
 
Keine Bearbeitungszusammenfassung
 
Zeile 21: Zeile 21:


Machen Sie sich mit der Datei "index.js" vertraut und öffnen Sie die Datei "index.html" testweise im Browser.
Machen Sie sich mit der Datei "index.js" vertraut und öffnen Sie die Datei "index.html" testweise im Browser.
Fügen Sie den Code relevant für Spieler der nachfolgenden Teilaufgaben in die Datei "Spieler.js" ein.
Fügen Sie den Code relevant für Spieler der nachfolgenden Teilaufgaben in die Datei "Player.js" ein.


Den Test-Code in den folgenden Abschnitten können Sie in die Datei "index.js" einpflegen um Ihre Lösungen zu validieren.
Den Test-Code in den folgenden Abschnitten können Sie in die Datei "index.js" einpflegen um Ihre Lösungen zu validieren.

Aktuelle Version vom 9. Oktober 2015, 08:37 Uhr

Praktikumsaufgabe 4

Arbeiten mit Funktionen und this

Ziel

Ziel dieser Aufgabe ist es die in dem JavaScript-Tutorium vermittelten Grundlagen für Funktionen, Konstruktoren und this 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.

Stellen Sie sicher, dass Sie die Praktikumsvorlagen auf Ihrem Rechner gespeichert haben. Folgen Sie dazu der Anleitung aus Teil 1 der 1. Praktikumsaufgabe.

Legen Sie dann einen neuen Ordner "aufgabe4" innerhalb Ihres Verzeichnis/Repositories an. Speichern Sie alle Dateien aus dem Lehrveranstaltungsordner "aufgabe4/vorlage" in diesem Ordner ab.

Machen Sie sich mit der Datei "index.js" vertraut und öffnen Sie die Datei "index.html" testweise im Browser. Fügen Sie den Code relevant für Spieler der nachfolgenden Teilaufgaben in die Datei "Player.js" ein.

Den Test-Code in den folgenden Abschnitten können Sie in die Datei "index.js" einpflegen um Ihre Lösungen zu validieren.


Spieler erstellen

Erstellen Sie zunächst eine Funktion namens createPlayer() die bei jedem Aufruf ein leeres Objekt erzeugt.

var player1 = createPlayer();
view.addObjectView(player1);

var player2 = createPlayer();
view.addObjectView(player2);

console.log(player1 !== player2); // sollte true ergeben

Erweiteren Sie die Funktion nun so, dass sie zwei Argumente namens "name" und "numberOfLifes" akzeptiert und die Werte dieser Argumente gleichnamigen Eigenschaften dem erzeugten Objekt zuweist.

var player1 = createPlayer('John', 3);
view.addObjectView(player1);


Konstruktor für Spieler

Wandeln Sie die Funktion createPlayer() nun in eine Konstruktorfunktion namens Player() um.

var player1 = new Player();
view.addObjectView(player1);

Der Konstruktor soll nach wie vor "name" und "numberOfLifes" akzeptieren und die Werte dem neu erstellten Objekt zuweisen. Die zugewiesenen Eigenschaften sollen nun allerdings mit einem Unterstrich beginnen, um sie als privat zu kennzeichnen.

var player1 = new Player('John', 3);
view.addObjectView(player1);

Stellen Sie sicher, dass der Konstruktor nur mit new aufgerufen werden kann. Folgender Code sollte einen Fehler verursachen.

var player1 = Player('John', 3);

Leben verlieren

Im Laufe eines Spiels kann es passieren, dass ein Spieler ein oder mehrere seiner Leben verliert. Erstellen Sie dazu auf jedem neuen Spielerobjekt die Funktion loseLife(), welche die Zahl der Leben um eins reduziert.

var player1 = new Player('John', 3);
view.addObjectView(player1);
player1.loseLife(); // sollte nun 2 betragen

Namen abändern

Außerdem kann es sein, dass sich ein Spieler nachträglich für einen anderen Namen entscheiden möchte. FÜgen Sie deshalb auf jedem neuen Spielerobjekt die Funktion changeName(name) hinzu, welche den Namen des Spielers ändert.

var player1 = new Player('John', 3);
view.addObjectView(player1);
player1.changeName('James'); // Name sollte nun James sein

Aktuelle Spielerinformationen

Erweitern Sie jedes neue Spielerobjekt um die Funktion getInfo(), welche aktuelle Spielerinformationen bereitstellen soll. Die Funktion liefert den Namen des Spielers und die Anzahl seiner aktuellen Leben als zusammengesetzten String zurück.

var player1 = new Player('John', 3);
view.addObjectView(player1);
player1.loseLife();
player1.changeName('James');
console.log(player1.getInfo()); // gibt 'Spieler: James / Leben: 2' aus


Typüberprüfung

In bestimmten Spielsituationen kann es wichtig sein zu überprüfen, ob sich bei einem Objekt um einen Spieler handelt. Schreiben Sie die dazu die Funktion Player.isPlayer(), welche den Typ von einem gegebenen Objekt überprüft.

var player1 = new Player('John', 3);
view.addObjectView(player1);
console.log(Player.isPlayer(player1)); // true
console.log(Player.isPlayer({})); // false