Hauptmenü

Untermenü

JavaScript - Praxistutorial 1 - Vorbereitung

1. Die Abschnitte

2. Einbindung

Da wir, abgesehen von ein paar Ausnahmen, den gesamten JavaScript-Code in die code.js packen wollen, müssen wir zuerst die Datei in das HTML-Dokument einbinden. Und damit ihr in diesem Tutorial auch ein grundlegendes Problem kennen lernt, bauen wir das im head-Bereich der scroller.htm ein. 


<script type="text/javascript" src="code.js"></script> 

3. Basisdefinitionen

Wenn ihr jetzt mal die code.js öffnet, so seht ihr, das da schon was vorhanden ist. Nun, dabei handelt es sich um die Texte für die einzelnen Bilder. Da viele von euch eh noch nicht in Rom waren, habe ich das für euch übernommen. Das Ganze ist als Array aufgebaut, wobei jeder Index (also von 0 - 15) die Informationen zum jeweiligen Bild enthält.

Für diese Anwendung benötigen wir aber noch ein paar vorgegebene Werte, um sie steuern zu können. Da hätten wir dann Folgende. Ob ihr die nun über oder unter das bereits vorhandene Array packt, ist völlig wurscht. 


pic_num   = 16;
pic_width = pic_num * 70;
tempo     = 10;
time      = 100;
high      = new Array();

Erläuterung

Bei pic_num legen wir die Anzahl der Bilder fest. Aber warum lesen wir die nicht einfach aus dem Verzeichnis aus? Nun, JavaScript läuft clientseitig, also im Browser. Da kann man nicht herausfinden, wie viele Dateien auf einem Server(!) liegen. Dafür bräuchte man schon Sprachen wie PHP.

In der Variable pic_width geben wir an, wie breit die komplette Bildnavigation ist. Das brauchen wir später für eine Berechnung. Wichtig dabei ist, dass die einzelnen Bilder zwar nur 60 Pixel breit sind, aber einen Abstand nach links von weiteren 10 Pixeln haben, daher der Wert 70.

Mit tempo definieren wir den Wert (in Pixeln), mit dem sich jedes Mal die Navigationsleiste bewegen wird. Ich habe einfach mal 10 genommen, aber das könnt ihr jederzeit ändern. In der Variable time legt die Zeitverzögerung fest (dazu später mehr) und das Array high benötigen wir, um anschließend die benötigten Image-Objekte der großen Bilder zu erzeugen.

Die Sache mit dem var

Das werden jetzt wohl einige Leute vermissen. Allerdings spielt es in diesem Beispiel keine Rolle ob ihr die bisherigen Variablen mit var beginnt oder nicht. Denn bei beiden Varianten sind sie global verfügbar.

Die Sache mit dem pics_num

... ist eigentlich überflüssig. Man kann auch die Zahl aus dem Array text auslesen. Denn da gibt es für jedes Bild die entsprechenden Informationen. Nun, beide Vorgehensweisen sind nicht optimal, da wir keine entsprechende Fehlerbehandlung haben, wenn etwas fehlt. Und da kann dann schon mal was passieren. Da es sich hier aber um ein Anfängertutorial handelt, ignorieren wir das einfach. Stellt euch vor, ihr seid Kölner. Die gehen immer so vor Dank ihrer Mentaliät des fahrlässigen Optimismus.

4. Objekte erzeugen

Um später auf die großen Bilder per JavaScript zugreifen zu können, müssen wir von ihnen entsprechende Objekte erzeugen und einen Pfad dazu festlegen. Dazu benötigen wir das Image-Objekt. 


for (i = 0; i < pic_num; i++)
{
  high[i]     = new Image();
  high[i].src = 'pics/high/' + i + '.jpg';
}

Erläuterung

Da wir die Anzahl der Bilder schon oben festgelegt haben (pic_num), durchlaufen wir anhand des Wertes eine Schleife. Und darin füllen wir das ebenfalls schon vorhandene Array high.

Mit high[i] = new Image(); erzeugen wir ein neues(!) Objekt, das ausschließlich für Bilder bestimmt ist. Und per high[i].src = 'pics/high/' + i + '.jpg'; geben wir den Pfad zu besagtem Bild-Objekt an. Das Prinzip werdet ihr verstehen, wenn wir sie später mit JavaScript austauschen.

5. Das "Scroll"-div ansteuern

Das geht in diesem Fall ganz einfach, da wir es mit einer eindeutigen ID versehen haben (siehe auch hier). Man steuert es dann ganz einfach per document.getElementById an und bekommt dabei eine Referenz (Verweis) auf das entsprechende div-Element.

Leider werden wir hier mit einem typischen JavaScript-Problem konfrontiert. Also, wir haben ja die code.js im head-Bereich der HTML-Seite eingebunden. Wenn wir jetzt eine Referenz auf das div so erzeugen, haut uns der Browser eine Fehlermeldung um die Ohren (wenn das so eingestellt wurde). 


scroll_ele  = document.getElementById('navi'); 

Das Problem ist sehr leicht zu erklären. JavaScript wird, einfach ausgedrückt, sofort interpretiert, wenn es im Browser geladen wurde. Und das geschieht in diesem Fall ganz am Anfang (durch die Einbindung im head-Bereich). Also ist das div zu diesem Zeitpunkt noch gar nicht vorhanden.

Man könnte nun die code.js am Ende der HTML-Seite aufrufen und dann würde obiges Beispiel funktionieren. Nur leider gibt es ein anderes Problem. Wir benötigen aber gleich die Variable pic_num oben, um die Bildnavigation aufzubauen. Und da das dann wiederum vor(!) der Einbindung geschähe, funktioniert das auch nicht.

Die Lösung

Wir erzeugen besagte Referenz erst, wenn die Seite komplett geladen wurde. Dann ist es auch egal, dass die JavaScript-Datei bereits vorher eingebunden wurde. Und das geht so (scroller.htm). 


<body onload="scroll_ele = document.getElementById('navi');">

Kurz zur Erklärung, der Event-Handler onload wird erst dann ausgeführt, wenn sich die Seite vollständig im Browser befindet. Es gibt eine elegantere Möglichkeit, aber die zeige ich euch erst im zweiten Tutorial.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt