Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 10 Frames und Iframes
|  | 10.1 Mit Frames arbeiten
|  |  | 10.1.1 Frames mit HTML
|  |  | 10.1.2 Frames mit JavaScript füllen
|  | 10.2 Auf Daten von Frames zugreifen
|  |  | 10.2.1 Auf übergeordnete Frames zugreifen
|  |  | 10.2.2 Auf Daten von Unterframes zugreifen
|  |  | 10.2.3 Mehrere Frames gleichzeitig ändern
|  |  | 10.2.4 JavaScript in Frames auslagern
|  |  | 10.2.5 Frames zählen
|  | 10.3 Diashow
|  |  | 10.3.1 Vorbereitungen
|  |  | 10.3.2 Diashow starten
|  |  | 10.3.3 Diashow anhalten
|  |  | 10.3.4 Vorwärts und rückwärts springen
|  |  | 10.3.5 Diashow verlassen
## 10.3 Diashow 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. ### 10.3.1 Vorbereitungen 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>
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>
### 10.3.2 Diashow starten 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";
       }
    }
### 10.3.3 Diashow anhalten 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);
    }
### 10.3.4 Vorwärts und rückwärts springen 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);
       }
    }
### 10.3.5 Diashow verlassen 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 | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 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.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de