Grundlagen für Webseiten - Seite 2

JavaScript mit HTML

Javascript
Javascript ermöglicht es, auf einzelne Elemente des HTML-Dokuments zuzugreifen. Elemente sind dabei zum Beispiel Formularfelder, Frames, Bilder und Links. Alle Elemente sind in einem Hierarchiebaum innerhalb des eigentlichen HTML-Dokument angeordnet. Welche Effekte nun in Javascript möglich sind, ist in erster Linie vom Client (dem Browser) abhängig. Generell kann mit JavaScript recht gut auf Datum- und Zeitangaben reagiert werden, Bilder ein- und ausgeblendet werden, Formulare auf Richtigkeit überprüft und nicht zuletzt Cookies gesetzen und gelesen werden.

Beispiel: Der Dia-Abend
Angenommen die Urlaubsfotos sollen einem etwas größeren Kreis zugänglich gemacht werden - warum nicht gleich über eine Website? Bei den meisten Providern können Ihre private Homepages eingerichtet und dort einige Megabytes draufgepackt werden; warum also nicht diesen Raum für eine Diashow nutzen?

Ohne JavaScript könnte man eine Diashow produzieren, indem eine GIF-Animation erstellt würde - Programme zur Herstellung von Animierten Gifs gibt es schließlich viele. Alternativ könnte man jedes Photo auf eine andere Seite plazieren - der Benutzer müsste dann die Seiten nacheinander abrufen. Mit JavaScript geht dies allerdings wesentlich eleganter.

Als einfaches Interface dienen zwei Buttons, mit denen vorwärts und rückwärts geblättert werden kann. Die Buttons werden mit einem Link versehen, der eine JavaScript-Funktion aktiviert:

   .
   
Die Funktion wurde zuvor innerhalb des HTML-Dokuments definiert.

   
Ein Klick auf den Rechtspfeil übergibt der Funktion die Parameter 1 und 4. Innerhalb der Funktion wird dann einfach der erste Wert zu einer global gültigen Variable 'actualdia' hinzuaddiert, um zu einer neuen Bildnummer zu kommen. Der zweite Wert gibt die Anzahl der Dias an, die es zu betrachten gibt. Beim letzten angelangt wird einfach wieder bei Dia Nummer 1 begonnen. Dazu dienen die zwei if-Statements.

Der Linkspfeil übergibt
  
.

Der ganze Multimedia-Zauber findet in der letzten Zeile statt. Sie weist den Browser an, innerhalb des Dokuments dem Image-Objekt 'diaframe' eine neue Quelle (Source) zuzuweisen. Die Quelle besteht aus der Angabe der URL des Bildes - der Browser zeichnet diesen Bereich dann neu.

Das einzige was jetzt noch fehlt ist ein Array, das die Dia-Gifs, oder besser deren URLs enthält. Damit die Dias prompt erscheinen, werden sie bereits während des Aufbaus der Seite geladen. Mit dem Befehl dia[1]=new image(breite,höhe) wird ein Bildobjekt initialisiert. Mit dia[1].src='pics/dia1.jpg' wird das Bild geladen, bzw. dessen URL angegeben. Wurden alle Bilder Form geladen, steht der Dia-Show nichts mehr im Weg.

Artikel kommentieren