Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 10 Frames und Iframes
  gp 10.1 Mit Frames arbeiten
    gp 10.1.1 Frames mit HTML
    gp 10.1.2 Frames mit JavaScript füllen
  gp 10.2 Auf Daten von Frames zugreifen
    gp 10.2.1 Auf übergeordnete Frames zugreifen
    gp 10.2.2 Auf Daten von Unterframes zugreifen
    gp 10.2.3 Mehrere Frames gleichzeitig ändern
    gp 10.2.4 JavaScript in Frames auslagern
    gp 10.2.5 Frames zählen
  gp 10.3 Diashow
    gp 10.3.1 Vorbereitungen
    gp 10.3.2 Diashow starten
    gp 10.3.3 Diashow anhalten
    gp 10.3.4 Vorwärts und rückwärts springen
    gp 10.3.5 Diashow verlassen


Rheinwerk Computing

10.3 Diashow  downtop

Als Beispielanwendung dieses Kapitels soll eine Diashow entwickelt werden. Ihre Firma hat eine Firmenpräsentation erstellt. Diese soll nun auch in die Website integriert werden. Da die Präsentation mit einem mittelmäßigen Präsentationsprogramm erstellt worden ist, liegen Ihnen lediglich zehn HTML-Seiten vor, die aber nicht miteinander verlinkt sind. Unser Ziel soll es nun sein, diese zehn HTML-Seiten nacheinander anzuzeigen; alle zehn Sekunden soll die nächste Seite geladen werden. Um dem Besucher der Webseiten wenigstens ein bisschen Interaktivität vorzugaukeln, soll er die Animation anhalten, aber auch eine Seite vor- oder zurückspringen können. Das ist Ihr Pech und mein Glück, denn ohne diese Zusatzbedingung könnte man diese Aufgabe auch mit normalen (HTML-)Mitteln lösen.


Rheinwerk Computing

10.3.1 Vorbereitungen  downtop

Beginnen wir mit der Grundstruktur der Präsentation: Das folgende Frameset teilt das Browserfenster in die Präsentationsfläche (oben) und den Navigationsbereich (unten) auf:

<html>
<head>
<title>Firmenpräsentation</title>
</head>
<frameset rows="*,80">
   <frame src="tour.html" name="Tour" />
   <frame src="nav.html" name="Nav" />
</frameset>
<noframes>
<body>Ihr Browser kann mit Frames nichts anfangen!
</body>
</noframes>
</html>

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 10.5     Die Startseite der Diashow

In Abbildung 10.5 sehen Sie, wie die Navigationsleiste ungefähr aussehen soll. Als Optionen soll es Start, Stop, Vor, Zurück und Verlassen geben. Wir werden JavaScript-Funktionen mit denselben Namen schreiben. Dazu brauchen wir noch eine Funktion, die die nächste Seite der Animation in den oberen Frame lädt. Außerdem benötigen wir noch globale Variablen. Unter anderem muss jederzeit bekannt sein, welche Seite der Diashow gerade angezeigt wird und ob die Animation gerade läuft oder pausiert. Neben einigen weiteren Angaben (wie viele Seiten? welche Verzögerung zwischen den Seiten?) benötigen wir noch eine weitere Variable. Da mit setTimeout() gearbeitet werden muss, sollte die zurückgegebene ID in einer Variablen abgespeichert werden.

Im Folgenden sehen Sie das Grundgerüst für die Datei nav.html; in den folgenden Abschnitten werden die Funktionen mit Inhalt gefüllt.

<html>
<head>
<script type="text/javascript"><!--
//globale Variablen
var seiten = 10;  //Anzahl der Seiten tourX.htm
var stat = "stop";  //Status der Animation:
                    //"stop" oder "start"
var akt = 1;  //aktuell angezeigte Seite tourX.htm
var ID = 0;  //ID des letzten Timeouts
var delay = 10000;  //Verzögerung in Millisekunden
//Funktionen
function start() {
   //Funktion zum Starten/Fortsetzen der Diashow
}
function stop() {
   //Funktion zum Anhalten/Pausieren der Diashow
}
function vor() {
   //Funktion zum Vorspringen in der Animation
}
function zurueck() {
   //Funktion zum Zurückspringen in der Animation
}
function verlassen() {
   //Funktion zum Verlassen der Animation
}
//--></script>
</head>
<body onload="start()">
<form onsubmit="return false;">
<center>
<table border="0" cellpadding="10">
<tr>
<td><a href="javascript:start()">Start</a></td>
<td><a href="javascript:stop()">Stop</a></td>
<td><a href="javascript:zurueck()">Zurück</a></td>
<td><a href="javascript:vor()">Vor</a></td>
<td><a href="javascript:verlassen()">Verlassen</a></td>
</tr>
</table>
</center>
</form>
</body>
</html>

Rheinwerk Computing

10.3.2 Diashow starten  downtop

Wenn der Benutzer auf Start klickt, muss zuerst überprüft werden, ob die Diashow nicht etwa schon läuft (über die Statusvariable stat). Falls doch, braucht keine Aktion zu erfolgen; andernfalls muss der Status geändert und die neue Seite nach Ablauf von zehn Sekunden geladen werden. Das Laden der weiteren Seiten geschieht dann in der Funktion lade(), die sich – mittels Timeout – immer wieder selbst aufruft. Ein besonderer Fall liegt noch vor, wenn die letzte Seite der Diashow angezeigt wird: Dann darf auch keine Aktion erfolgen.

function start() {
   if (stat == "stop" && akt < seiten) {
      stat = "start";
      ID = setTimeout("lade(akt+1)", delay);
   }
}
function lade(nummer) {
   parent.Tour.location.href = "tour" + nummer + ".html";
   akt = nummer;
   if (stat == "start" && akt < seiten) {
      ID = setTimeout("lade(akt+1)", delay);
   } else if (akt == seiten) {
      stat = "stop";
   }
}

Rheinwerk Computing

10.3.3 Diashow anhalten  downtop

Auch das Anhalten der Diashow gestaltet sich nicht weiter schwierig: Die Statusvariable muss angepasst werden, und das Laden der nächsten Seite muss mit clearTimeout() unterbunden werden:

function stop() {
   stat = "stop";
   clearTimeout(ID);
}

Rheinwerk Computing

10.3.4 Vorwärts und rückwärts springen  downtop

Der Wechsel zur vorherigen oder zur nächsten Seite der Diashow ist relativ ähnlich. Zuerst wird überprüft, ob man sich auf der ersten bzw. letzten Seite befindet (dann geschieht nichts); dann wird clearTimeout() und danach lade() aufgerufen. Beachten Sie, dass die vorherige oder nächste Seite sofort aufgerufen werden soll, also wird setTimeout() nicht verwendet.

function vor(){
   if (akt < seiten) {
      clearTimeout(ID);
      lade(akt+1);
   }
}
function zurueck() {
   if (akt > 0) {
      clearTimeout(ID);
      lade(akt-1);
   }
}

Rheinwerk Computing

10.3.5 Diashow verlassen  toptop

Der letzte Punkt auf der Aufgabenliste, das Verlassen der Diashow, verdient eigentlich keine eigene Überschrift. Es wird einfach eine andere Seite geladen; als ordentlicher Programmierer löschen Sie außerdem noch alle Timeouts.

function verlassen() {
   clearTimeout(ID);
   top.location.href = "andereseite.html";
}

Beachten Sie, dass im obigen Code die neue URL auf der obersten Ebene der Frame-Hierarchie aufgerufen wird; Sie rufen ja das JavaScript-Kommando in einem Unterframe auf!

 <<   zurück
  
  Zum Rheinwerk-Shop
Neuauflage: JavaScript
Neuauflage: JavaScript
bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern