jQuery von Kopf bis Fuß (German Edition)
anzufordern und das Spiel zu beenden. Es gibt bloß noch keine Verbindung zu den Funktionen des Programms. Und vergessen Sie nicht, für jede neue Karte die Methode zum Addieren der Kartenwerte aufzurufen.
jQuery-Black-Jack-Codemagneten
Bringen Sie die Magneten in die richtige Reihenfolge, um eine Funktion zu schreiben, die für die Elemente mit den IDs von
neue_karte_button
und
keine_karte_button
jeweils einen passenden Event-Listener installiert. Wird das Element
neue_karte_button
angeklickt, soll eine neue Karte gezogen werden, bei
keine_karte_button
wird das Spiel beendet. Es gibt außerdem etwas Code aus der
neue_karte
-Funktion, der aktualisiert werden muss.
jQuery-Black-Jack-Codemagneten: Lösung
Dieser Code erzeugt eine Funktion, die für die
neue_karte
und
keine_karte
-Buttons die passenden Event-Listener installiert. Außerdem ruft sie nach dem Ausgeben einer Karte die Methode
kartenwert_gesamt
auf.
Es gibt keine: Dummen Fragen
F:
F: Gibt es noch andere JavaScript-Methoden, um Werte zu vergleichen?
A:
A: Nicht für den Vergleich an sich. Aber es gibt noch eine Methode, mit der auf Grundlage von Variablenwerten bestimmte Entscheidungen getroffen werden können. Dieses Verfahren wird als
switch
-Methode bezeichnet und kann eine Reihe verschiedener Bedingungen enthalten. Wenn Sie feststellen, dass Sie eine große Zahl von
if
/
else if
/
else
-Anweisungen schreiben, ist eine
switch
-Anweisung oft besser geeignet.
F:
F: Sie haben gesagt, es gibt eine Abkürzung für die
if/else
-Anweisung. Wie geht die?
A:
A: Diese Abkürzung wird auch als ternärer Operator bezeichnet. Dabei wird die logische Operation durch ein Fragezeichen vom Ergebniscode getrennt, und zwar so:
a > b ? falls_wahr_code : falls_falsch_
code
Probefahrt
Bauen Sie den bisher erstellten Code nach der
neue_karte
-Funktion in die Datei meine_skripts.js ein. Aktualisieren Sie auch das Ende der
neue_karte
-Funktion selbst. Danach sollten Sie das Ganze ausgiebig in Ihrem Browser testen.
Frank: Nicht so schnell! Wir brauchen noch eine Neustartfunktion, damit die Spieler ein weiteres Spiel machen können, ohne dass die Seite neu geladen werden muss.
Joe: Wir müssen auch dafür sorgen, dass die Leute keine Karten aus früheren Spielen bekommen. Es muss wirklich alles entfernt werden.
Jim: Aber wie soll das gehen? Wir haben eine Reihe dynamisch hinzugefügter HTML-Elemente und neue Einträge in den Arrays. Müssen wir das wirklich alles ausleeren?
Frank: Ja. Wir werden für die einzelnen Teile zwar unterschiedliche Methoden verwenden, aber es muss auf jeden Fall alles ausgeleert werden.
Joe: Ich weiß schon, wie das gehen kann! In jQuery gibt es die
empty
-Methode, und für Arrays gibt es verschiedene Möglichkeiten, die aber nicht in allen Browsern gleich sind.
jQuery zum Aufräumen benutzen ...
Wissen Sie noch, wie wir in Kapitel 2 die
remove
-Methode benutzt haben, um ein bestimmtes Element und seine Nachkommen endgültig aus dem DOM zu entfernen? Dieser Ansatz funktioniert gut, wenn Sie das Elternelement löschen wollen. Soll das Hauptelement dagegen bestehen bleiben und nur sein Inhalt gelöscht werden, können Sie stattdessen die jQuery-Methode
empty
verwenden. Wie
remove
braucht auch
empty
einen Selektor, lässt aber das gewählte Element selbst an seinem Platz.
... ist sogar leichter als mit JavaScript
Oft benutzen wir jQuery, damit wir nicht so viel JavaScript-Code zu schreiben brauchen. Zum Glück ist die Lage manchmal in JavaScript genauso einfach wie mit jQuery – zum Beispiel hier. Zwar ist die Syntax eine andere, das Ergebnis ist aber das gleiche und Sie müssen sich nicht merken, wo im DOM Sie sich gerade befinden. Um ein Array mit JavaScript komplett zu leeren, setzen Sie seine Länge (length) einfach auf null (0).
benutzte_karten.length = 0;
Viel leichter geht’s nicht, oder?
Ja. Allerdings spielt die Reihenfolge der Leerung dabei eine wichtige Rolle.
Da wir bei einem Neustart auch neue Karten ausgeben müssen, sollten wir zuerst Ordnung schaffen und dann die neuen Karten verteilen. Außerdem müssen wir ein weiteres Element anklickbar machen, damit unser Code auch aufgerufen wird.
Spitzen Sie Ihren Bleistift
Erweitern Sie Ihre index.html -Datei um ein weiteres Element, das den anderen Elementen innerhalb des Steuerung-
div
s ähnelt. Geben Sie dem anklickbaren
div
-Element die ID
neustart_button
. Platzieren Sie innerhalb von
neustart_button
das Bild neustart.jpg aus dem Ordner bilder .
Erweitern Sie
Weitere Kostenlose Bücher