OOP/DOM-Scripting JavaScript - Praxistutorial 3 - Vorbereitung
1. Die Abschnitte
- Einführung
- Vorbereitung
- Die Datenstruktur
- Karten geben Teil 1
- Karten geben Teil 2
- Karten tauschen Teil 1
- Karten tauschen Teil 2
2. Eine "Hilfsklasse"
Da uns JavaScript bekanntlichermaßen nicht den Funktionsumfang wie zum Beispiel PHP bietet, wollen wir zuerst ein kleines "Helferlein" erstellen, das zwei Methoden beinhaltet, die wir später nutzen wollen.
function helper()
{
this.getRandom = function (min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
this.inArray = function (item, arr)
{
for (var i in arr)
{
if (item == arr[i])
{
return true;
}
}
return false;
}
}
Erläuterung
Für die Berechnung von Zufallszahlen bietet JavaScript nur random
an. Leider handelt es sich dabei um eine Bruchzahl zwischen
0 und 1. Das war es dann schon. Darum bilden wir mit der Methode getRandom
die PHP-Funktion rand
nach, die eine
Ganzzahl zwischen einen Minimal- und Maximalwert ermittelt. Also nichts Besonderes.
Und die Methode inArray
ist (fast) equivalent zum PHP-Pendant in_array
. Man könnte beides auch über
Prototyping machen, aber das habe ich schon im vorherigen Tutorial gezeigt. Ach ja,
da beide Methoden einen öffentlichen Zugriff erlauben müssen, arbeiten wir hier mit this
. Wer immer noch nicht weiß wieso,
der sollte sich doch tunlichst erst mal die Theorie zu Gemüte führen.
3. Das Literal-Objekt
var poker =
{
help : new helper(),
p_drop_cards : new Array(),
}
Erläuterung
Mit var poker { ... }
erzeugen wir das Literal. Anschließend bauen wir die Eigenschaft help
ein. Sie ist dann
die Referenz auf unser helper
-Objekt, das wir oben erstellt haben. Wir arbeiten hier also mit einer
Aggregation. Wie man dann auf die dortigen Methoden zugreift, zeige ich
euch später. Die Eigenschaft p_drop_cards
benötigen wir für die Speicherung der Karten, die ausgetauscht werden sollen.
4. Der Event-Handler
... liegt auf dem Link "Karten geben". Denn damit wird alles beginnen. Und aussehen tut er so.
document.getElementById('p_geben').onclick = function()
{
}
5. Wichtig!
Jedweder Code, der nun folgt, wir mit Ausnahme der Event-Handler in das Literal var poker
geschrieben. Achtet darauf, dass
die Struktur sauber ist, denn gerade bei Literalen kann man sich sehr leicht vertun. Wenn ihr gar nicht mehr weiter wisst, so schaut
in den Lösungscode.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt