jQuery von Kopf bis Fuß (German Edition)

Elemente. JavaScript und jQuery sind für das Verhalten und die Funktionen dieser Elemente zuständig.
    Angenommen, wir hätten ein Bild, für das wir die Methode slideUp verwenden wollen. Das Bild erhält die Klasse diaschau :

    Spitzen Sie Ihren Bleistift
    Bauen Sie Struktur, Stile und Skript Ihrer Seite so um, dass nur die vier
div
-Elemente, die die Bilder enthalten, anklickbar sind. Erstellen Sie in der CSS-Datei eine Klasse mit dem Namen
ratespiel
und wenden Sie diese auf den
HTML
-Code und das
Skript
an. Anscheinend hat auch eines der
div
-Elemente sein ID-Attribut verloren. Kriegen Sie heraus, welches Element das ist und wie es sich reparieren lässt?
    Spitzen Sie Ihren Bleistift: Lösung
    Versehen Sie alle
div
-Elemente, die zum Verstecken des Rabattcodes benutzt werden, mit der Klasse »ratespiel«. Aktualisieren Sie auch Ihren Selektor, damit er diese Klasse benutzt, und bauen Sie ihn in Ihre CSS-Datei ein. Es war übrigens das
div
-Element mit der ID »hauptteil«, dem sein ID-Attribut abhandengekommen ist.

Gleichzeitig auf unserer Liste
    Lassen Sie uns kurz einen Blick auf unsere Aufgabenliste werfen, damit wir Emilys Anforderungen nicht aus den Augen verlieren.
    Die Seite soll aus vier Abschnitten bestehen. Jeder Abschnitt enthält eines von vier „Freudensprünge“ -Bildern.
Die Abschnitte sollen anklickbar sein.
Wir brauchen eine Nachricht, die lautet: »Ihr Rabatt beträgt«, gefolgt von einem zufälligen Rabatt (zwischen fünf und zehn Prozent).
Wenn ein Besucher auf einen dieser Abschnitte klickt, soll die Nachricht unter dem Foto dieses Abschnitts erscheinen.
Wenn der Benutzer noch einmal klickt, soll die letzte Nachricht verschwinden und eine neue Meldung angezeigt werden.

    Jedenfalls nicht besonders schwer.
    Damit dem Benutzer die Nachricht angezeigt werden kann, müssen ein paar Dinge passieren. Vergessen Sie nicht, dass die Meldung für verschiedene Besucher der Site unterschiedlich aussehen kann.
    Kopf-Nuss
    Sie müssen irgendwie eine Nachricht erstellen und sie irgendwo speichern, damit sie den Besuchern angezeigt werden kann. Wie machen Sie das?

Speicherplatz anlegen
    Die nächste Anforderung auf unserer Liste besteht darin, den Text anzuzeigen, der bei jeder Ausführung unseres Skripts gleich bleibt: »Ihr Rabatt beträgt«. Daneben müssen wir eine Zahl speichern, die sich verändern kann, je nachdem, wie hoch der Rabatt ist. Diese Information muss die ganze Zeit zur Verfügung stehen, während unser Skript läuft. Also braucht die Seite eine Möglichkeit, diese Information irgendwie zu speichern. Für das Speichern von veränderlichen Informationen (oder Daten) sind Variablen wie geschaffen. In jQuery verwenden wir dafür JavaScript-Variablen.

    Wenn wir später an die gespeicherten Daten wollen, können wir die Variable einfach mit ihrem Namen ansprechen.
    Anmerkung
    Wenn Sie mehr über JavaSript-Variablen und mathematische Funktionen erfahren möchten, empfehlen wir Ihnen ein Exemplar von JavaScript von Kopf bis Fuß.

Verschiedene Dinge verketten
    Bei vielen jQuery-Skripten müssen verschiedene Arten von Daten gespeichert werden: Zahlen, Text oder wahr/falsch-Werte. Besonders wenn wir verschiedene Meldungen an unsere Besucher ausgeben wollen, müssen dabei die Daten zusammen mit HTML-Code ausgegeben werden. Dadurch werden Ihre Webseiten noch leistungsfähiger. Aber wie kann man die Variablen mit anderen Werten kombinieren? Dafür gibt es die Verkettung (engl. concatenation). Stellen Sie sich vor, Sie wollen den Highscore eines Videospiels in einer Variablen mit dem Namen punkte speichern, und dieser Spielstand soll dem Gewinner dann angezeigt werden.

    Übung
    Hier sehen Sie den JavaScript-Code, mit dem Sie eine Variable namens
rabatt
erzeugen können. Sie enthält eine zufällige Zahl zwischen 5 und 10. Schreiben Sie den Code für eine Variable mit dem Namen
rabatt_nachricht
, der die Nachricht und die zufällige Variable enthält. Sorgen Sie dafür, dass die Rabattnachricht innerhalb eines Absatzes (p-Elements) erscheint.
var rabatt = Math.floor((Math.random()*5) + 5);
__________________________________________________________
    Lösung zur Übung
    Hier sehen Sie den JavaScript-Code, mit dem Sie eine Variable namens
rabatt
erzeugen können. Sie enthält eine zufällige Zahl zwischen 5 und 10. Schreiben Sie den Code für eine Variable mit dem Namen
rabatt_nachricht
, der die Nachricht und die zufällige Variable enthält. Sorgen Sie dafür, dass die Rabattnachricht innerhalb