JavaScript - Praxistutorial 1 - Die Navigation
1. Die Abschnitte
- Überblick
- Vorbereitung
- Die Navigation
- Scrollen
- Inhalte ändern
- Tempo ändern
2. Die Vorschaubilder einbinden
Nun, man könnte die jetzt alle statisch in die scroller.htm
reinschreiben. Stück für Stück, jedes einzelne und das 16 mal. Aber
das geht wesentlich bequemer mit JavaScript. Denn damit kann man auch ganz bequem die HTML-Tags in das jeweilige Dokument hinein schreiben.
Und das müssen wir in unserem Fall den folgenden Code innerhalb des <div id="navi">
packen.
<script type="text/javascript">
for (i = 0; i < pic_num; i++)
{
document.write ('<a href="#" onclick="showDetails(' + i + ');">');
document.write ('<img src="pics/low/' + i + '.jpg" />');
document.write ('</a>');
}
</script>
Erläuterung
Also, wir kennen die Anzahl der vorhandenen Bilder durch die Variable pic_num
. Und zwar weil wir die code.js
im <head>
-Bereich der HTML-Datei eingebunden haben. Darum bauen wir eine ganz normale for
-Schleife und
erzeugen mittels document.write
stinknormalen HTML-Code. Wichtig ist eigentlich nur das Konstrukt + i +
, da es
sich dabei um eine JavaScript-Variable handelt. Also arbeiten wir mit einer so genannten
Zeichenkettenverknüpfung. Und die darf man nicht in eine normale
Zeichenkette à la document.write ('<img src="pics/low/i.jpg" />');
packen, da sie sonst nicht interpretiert wird.
Ach ja, der Event-Handler onclick = "showDetails(...)"
ruft eine Funktion auf, um die wir uns später noch kümmern werden.
Ein Hinweis
In der Schleife habe ich der Variable i
kein var
vorangestellt, da wir das hier nicht benötigen.
Aber! Das kann leicht tödlich enden. Also gewöhnt euch das bitte nicht an. Ich gehe hier einfach mal mit schlechtem
Beispiel voran. Vielleicht, weil ich in Köln wohne und die dortige Mentalität ein wenig auf mich abfärbt. Im nächsten Tutorial mache ich es
besser. Versprochen.
Noch ein Hinweis
Mit document.write
sollte man eigentlich nicht mehr arbeiten, da man das heutzutage viel sauberer über die so genannte
DOM-Manipulation erledigen kann. Allerdings setzt das schon etliche
Kenntnisse voraus, darum lass ich es hier bleiben.
3. Die Event-Handler setzen
... legen wir mal auf die "Doppelpfeile". Dazu benötigen wir für jede Richtung zwei Funktionen, eine zum Starten und eine zum
Beenden. Noch ein wichtiger Hinweis. Nennt die Funktion zum nach links scrollen bitte niemals scrollLeft
. Denn
dabei handelt es sich um eine Microsoft-spezifische Eigenschaft. Und dann haut's
euch eine Fehlermeldung um die Ohren. Wohlan, ergänzt also die beiden Links um folgenden Code.
<p class="links">
<a href="#"
onmouseover="moveLeft();"
onmouseout="stopLeft();"><<
</a>
</p>
...
<p class="rechts">
<a href="#"
onmouseover="moveRight();"
onmouseout="stopRight();">>>
</a>
</p>
Erläuterung
Auf jedem Link liegen nun zwei Event-Handler. Der erste ruft eine Funktion auf, die den Scrollvorgang startet (grausiges Beamtendeutsch) und der zweite eine, die ihn beendet. Später kommen noch mal zwei dazu, daher habe ich der Übersichtlichkeit halber den Code schon entsprechend eingerückt.
4. <div id="navi" style="left: 0px;">
Warum wurde das direkt in der scroller.htm
festgelegt? Hätte man das nicht direkt in der styles.css
definieren
können? Nun, hätte man schon können, aber dann bekäme man mit JavaScript per style
keinen direkten Zugriff mehr auf
den ursprünglich festgelegten Wert. Es gibt zwar die Möglichkeit, CSS-Anweisungen in externen Dateien auszulesen, aber das ist für den Anfang
zu kompliziert und außerdem habe ich mich damit noch nie richtig beschäftigt. Steht aber schon in meiner internen Todo-Liste.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt