Hauptmenü

Untermenü

JavaScript - Praxistutorial 1 - Tempo ändern

1. Die Abschnitte

2. Schneller, schneller

Wir ihr sicher schon festgestellt habt, bewegt sich die Bildnavigation in einem eher gemütlichen Tempo. Und da manche Leute einfach nicht warten können, bauen wir einen Tempomat ein, mit dem man die Geschwindigkeit erhöhen und auch wieder verringern kann. Dazu legen wir einfach zwei weitere Event-Handler auf die Pfeil-Links.


<a href="#" 
  ...
  onmousedown="tempo=20;" 
  onmouseup="tempo=10;">

Beim Anblick dieses Codes werden sicher einige von euch denken: "Sieht ziemlich pisselig aus, also warum macht er das?". Ganz einfach, um euch auf ein paar wichtige Dinge hinzuweisen.

3. Geltungsbereich von Variablen

Wir haben die Variable tempo ja in der code.js außerhalb jeglicher Funktion definiert. Sie ist also global verfügbar und somit auch in der scroller.htm. Wenn wir dort den Wert ändern, so wirkt sich das direkt auf die Geschwindigkeit aus.

4. Die Event-Handler

Anhand dieses Beispiels könnt ihr sehr gut sehen, wie die Mausereignisse funktionieren. Zuerst greift immer onmouseover. Wenn dann jemand auf irgendeine(!) Maustaste drückt, so wird zuerst onmousedown ausgeführt, also wenn man sie herunterdrückt. Danach kommt onmouseup, also wenn man sie wieder loslässt. Und als Letztes tritt dann onmouseout in Kraft, wenn sich der Mauszeiger aus dem entsprechenden Element herausbewegt.

onclick

Ehrlich gesagt habe ich den Unterschied zu onmouseup eigentlich nie wirklich begriffen. Laut SelfHTML reagiert onclick, wenn man auf ein Element klickt und onmouseup, wenn vorher die Maustaste heruntergedrückt worden ist. Ich denke mal, praktisch gesehen, sind beide identisch. Klickt mal spaßeshalber auf ein Vorschaubild (wo wir ein onclick verwendet haben) und haltet die Taste gedrückt. Da werdet ihr sehen, dass sich nichts tut. Erst wenn ihr sie wieder loslasst, passiert etwas.

Etwas fehlt noch!

Was aber passiert bei folgender Situation? Ihr klickt auf einen "Pfeil", haltet die Maustaste gedrückt, zieht dann den Cursor aus dem Link heraus und lasst dann erst die Maustaste los. Nun, damit habt ihr das Tempo auf 20 erhöht! Das könnt ihr wunderbar sehen, wenn ihr mit der Maus wider über den Link fahrt. Lösung? Bei Macromedia Director gab es den sehr schönen onMouseUpOutside-Handler, mit dem man das abfangen konnte. Leider existiert der nicht in JavaScript. Also muss man sich hier etwas einfallen lassen. Und das macht ihr mal schön selber.

5. tempo versus time

Um die Scrollgeschwindigkeit zu erhöhen, habe ich hier einfach den Wert erhöht, um den das div-Element in Pixeln verschoben wird. Alternativ könnte man auch die Zeitverzögerung über die Variable time erhöhen, also zum Beispiel mit onmousedown="time=200;" onmouseup="time=100;". Allerdings führt das (zumindest bei mir) zu einem unschönen Ruckeleffekt. Im Zweifelsfall müsst ihr einfach ausprobieren, was flüssiger läuft.

6. Fazit

Ihr hoffe, der Einstieg in JavaScript war nicht allzu schwer. Auch wenn diese Sprache doch einige Merkwürdigkeiten zu bieten hat. Falls ihr irgendetwas nicht richtig begriffen habt, so spielt mal mit dem Code herum. Ändert was, schreibt was um und beobachtet mal die Auswirkungen. Dann werdet ihr recht schnell begreifen, wie was und warum funktioniert.

zurück zum vorherigen Abschnitt