JavaScript - Praxistutorial 1 - Tempo ändern
1. Die Abschnitte
- Überblick
- Vorbereitung
- Die Navigation
- Scrollen
- Inhalte ändern
- Tempo ändern
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.