OOP/DOM-Scripting JavaScript - Praxistutorial 3 - Karten tauschen Teil 2
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. Weitere Event-Handler
So, jetzt können wir unsere Karten schön wegklicken, aber wie bekommen wir neue? Dazu muss unser "Haupt"-Event-Handler wiederum ergänzt werden.
document.getElementById('p_geben').onclick = function()
{
...
document.getElementById('p_geben').style.display = 'none';
document.getElementById('p_swap').style.display = 'block';
document.getElementById('p_swap').onclick = function ()
{
for (i = 0; i < 5; i++)
{
document.images['p' + i].onclick = function () {}
}
poker.swapCards();
}
}
Erläuterung
Zuerst verschwindet der "Karten geben"-Link und der "Karten tauschen"-Link wird eingeblendet. Also nichts Kompliziertes. Anschließend
wird auf p_swap ein neuer Event-Handler gelegt. Klickt man auf besagten Link, so werden sämtlich Event-Händler auf allen
Karten mit einer leeren Funktion belegt. So können sie nicht mehr ausgetauscht werden.
Einige werden sicher anmerken, dass wir dass schon der Methode dropCards gemacht haben. Falsch! Das galt nur für die
ausgetauschten Karten, nicht für die, die wir behalten haben. Darum gehen wir hier auf Nummer sicher und machen das noch mal bei allen(!)
Karten. Zu guter Letzt wird dann die Methode swapCards ausgeführt.
3. Die Methode swapCards
swapCards : function ()
{
var newcards = this.setCards (this.p_drop_cards.length);
for (var i = 0; i < newcards.length; i++)
{
document.images[this.p_drop_cards[i]].src = 'cards/'
+ newcards[i].replace(/#/, '') + '.png';
}
document.getElementById('p_swap').style.display = 'none';
}
Erläuterung
Das ist nun auch nichts mehr Weltbewegendes. Zunächst holen wir uns die neuen Karten. Die Anzahl und die Bildnamen haben wir ja in
p_drop_cards abgespeichert. Dann werden wie gehabt die Bilder ausgetauscht, der Link "Karten tauschen" ausgeblendet et
voilà, wir haben fertig.
4. Fazit
Dies war nur ein erster Einstieg in Literal-Objekte und besonders sinnvoll scheinen sie ja nicht zu sein. So ist keinerlei vernünftige Kapselung möglich, da sowohl alle Eigenschaften als auch Methoden öffentlich zugänglich sind. Aber wie arbeiten denn die großen JavaScript-Frameworks damit. Nun, dort wird diese Technik nur dann eingesetzt wenn man aus etwas kein Objekt erzeugen sondern auf ein bereits existierendes zugreifen möchte.
Meine Meinung
Seit nunmehr drei Jahren programmiere ich an einem Pokerautomaten herum, so wie er in Spielhallen herumsteht. Anfangs war es ein Projekt,
das ich tatsächlich fertig stellen wollte. Aber mittlerweile nutze ich es, um die Vor- und Nachteile bestimmter Techniken auszubaldowern.
Aufgrund meiner bisherigen Erfahrungen bin ich der Meinung, dass man Literale nur äußerst selten einsetzen sollte. Um mal auf dieses
Beispiel zurückzukommen, die Konstruktorfunktion helper ist prädestiniert dafür, als Literal umgesetzt zu werden. Also wäre
ich hier eigentlich völlig falsch vorgegangen. Wenn ich euch nicht zeigen wollte, wie Literale funktionieren.
Ausblick
Sollte ich tatsächlich mal mit meinem Pokerautomaten fertig werden, so wird es hier ein Monstertutorial geben, das alle(!) Bereiche beinhaltet. HTML/CSS, JavaScript/Ajax/ sowie PHP und MySQL. Aber bis dahin werden wohl noch einige Sommer ins Land ziehen.