[Beschreibung] [Quelltext] [Erläuterung] [Übung] [Referenz]

Als die Seiten laufen lernten



Beschreibung

Es wird ein eigenständiges kleines Fenster geöffnet, in dem ein Folge von HTML-Seiten dargestellt wird. Beim ersten und letzten Bild wird der Hintergrund auf- bzw. abgeblendet.

Quelltext


<script language="JavaScript">
<!--
  function texte() {
    this[0]="Auf Los ...<p><font color=#ffffff>...geht's los</font>";
    this[1]="Heute";
    this[2]="<br>zeigen wir";
    this[3]="<br><br>JavaScript";
    this[4]="<br><br><br>für Alle!";
    this[5]="dia1.htm";
    this[6]="dia2.htm";
    this[7]="dia3.htm";
    this[8]="Game<p><font color=#000000>over</font>";
    if(navigator.appName.substring(0,5) == "Micro") {
      this.length=8;
    } else {
      this.length=9;
    }
  }
  text=new texte();

  win=null;
  tim=null;
  WAIT1=200;
  WAIT2=1000;
  WAIT3=3000;

  function init() {
    bref=window.location.href.toLowerCase();
    bref=bref.substring(0, bref.indexOf("dia"));
    win=window.open("", "dia_show", "width=300,height=300");
    num=0;
    col=15;
    stop=false;
    show();
  }

  function show() {
    if(stop) {
      win.close();
      return;
    }
    if(win.focus != null)win.focus();
    if(text[num].indexOf(".htm") > 0) {
      win.location.href=bref+text[num];
      wait=WAIT3;
    } else {
      win.document.open("text/html");
      win.document.write("<base href=\""+bref+"\">");
      if(num == 0) {
        win.document.write("<body bgColor=#ffffff text=#000000>");
      } else {
        win.document.write("<body bgColor=#000000 text=#ffffff>");
      }
      win.document.write("<img src=\"rc_"+num+".gif\" width=15 height=20 hspace="+15*num+">");
      win.document.write("<br><center><h1>");
      win.document.write(text[num]);
      win.document.write("</center></body>");
      win.document.close();
      wait=WAIT2;
    }
    num++;
    if(num == 1) {
      fade();
    } else if(num < text.length) {
      tim=setTimeout("show()", wait);
    } else {
      tim=setTimeout("fade()", WAIT1);
    }
  }

  function fade() {
    if(stop) {
      win.close();
      return;
    }
    if(num == 1) {
      col--;
    } else {
      col++;
    }
    hex="0123456789abcdef".charAt(col);
    hex=hex+hex+hex+hex+hex+hex;
    win.document.bgColor=hex;
    if(col > 0 && col < 15) {
      tim=setTimeout("fade()", WAIT1);
    } else {
      if(num == 1) {
        tim=setTimeout("show()", WAIT2);
      } else {
        tim=setTimeout("win.close()", WAIT3);
      }
    }
  }

  function exit() {
    stop=true;
  }
//-->
</script>

Erläuterung

Mit der Zeile "text=new texte()" wird ein eigenes Objekt definiert, das als Eigenschaften die Texte bzw. URL's, die angezeigt werden sollen, enthält. Das in der Funktion "texte" verwendete Schlüsselwort "this" bezieht sich in diesem Zusammenhang auf das neu definierte Objekt. Da es speziell beim MSIE 3.0 Darstellungsprobleme von "text[8]" gibt, wird der verwendete Browser abgefragt und gegebenenfalls dieses Element weggelassen.
Die Funktion "init" erzeugt ein kleines leeres Fenster und ruft ihrerseits erstmalig die Funktion "show" auf.
In der Funktion "show" wird das "num"-te Element des Objekts "text" dargestellt. Dabei muß unterschieden werden, ob es sich um eine URL oder einen einfachen Text handelt. Zum Darstellen einer vorhandenen Seite ist lediglich die Eigenschaft "location.href" des Fensters entsprechend zu setzen. Zur Anzeige eines Textes wird der HTML-Code einer kompletten Seite dynamisch generiert. Nach der Darstellung des jeweiligen Elements wird "num" hochgezählt. Außerdem wird ein Timer gesetzt, der wiederum "show" aufruft, um das nächste Element darzustellen. Speziell bei der ersten und letzten Seite wird die Funktion "fade" aufgerufen.
Die Funktion "fade" ändert dynamisch die Hintergrundfarbe des Fensters. Dazu wird die Eigenschaft "bgColor" des Fensters geändert.
Mit der erst ab V 1.1 vorhandenen Methode window.focus() stellt sich das kleine Fenster in den Vordergrund.

Übung

Schreiben Sie eine Funktion, die in einem eigenen kleinen Fenster eine Meldung ausgibt. Nach Betätigung eines "OK"-Knopfes soll das Fenster wieder gelöscht werden. Im Prinzip also das, was "window.alert()" tut, jedoch mit der Möglichkeit eigener grafischer Gestaltung
[
Lösung]


Referenz

[
window.open] [window.close] [document.open] [document.close] [navigator]

window.open

Mit der window.open() Methode wird ein neues Browser-Fenster geöffnet. Der Aufruf erfolgt in der Form:
win1=window.open(URL, name, [features]);
In der Variablen win1 wird ein Zeiger auf das neue Fenster abgelegt; über diesen Zeiger kann dann später mit JavaScript auf das Fenster zugegriffen werden. Als URL wird die Adresse der Seite angegeben, die im Fenster dargestellt werden soll. URL kann wahlweise auch eine leere Zeichenkette enthalten, dann bleibt das neue Fenster zunächst leer. In name wird eine Zeichenkette angegeben, mit der das neue Fenster benannt werden soll. Der Name darf nur aus Buchstaben, Ziffern und dem "_" bestehen. Wenn es ein Fenster gleichen Namens schon gibt, so wird dieses in win1 zurückgegeben. Der vergebene name kann in HTML-Tags wie z.B. "<a href=..." mit "target=name" verwendet werden. Im Parameter features können eine Reihe von Angaben zum Aussehen des neuen Fensters gemacht werden:
menubarMenüs am oberen Ende des Fensters, z.B. "Datei"
toolbarLeiste mit Funktionsknöpfen, z.B. "Zurück"
locationAnzeige der Adresse
directoriesKnöpfe mit Standard-Links, wie z.B. "Neuigkeiten"
statusStatuszeile am unteren Ende des Fensters
scrollbarsAnzeige der Scroll-Balken, falls erforderlich
resizableder Anwender darf die Größe des Fensters ändern
widthBreite des Fensters in Pixeln
heightHöhe des Fensters in Pixeln
Bei Angabe von mehreren Optionen werden diese jeweils mit einem Komma voneinander getrennt; ein Leerzeichen soll nicht verwendet werden. Wenn keine Option angegeben wird, werden alle Schalter standardmäßig auf "wahr" gesetzt. Wenn mindestens eine Option angegeben wird, werden alle nicht angegebenen Optionen auf "falsch" gesetzt. Zulässige Werte für die Schalter sind "yes" oder "1" für wahr oder "no" oder "0" für falsch. Wenn ein Schalter ohne Wert angegeben wird, dann wird "wahr" angenommen.
Ein gültiger Aufruf ist z.B.
win1=window.open("", "dia_show", "menubar,width=300,height=300");

window.close

Die Methode window.close() schließt das Browser-Fenster, auf das die Methode angewendet wird. Zum Schließen des eigenen Fensters kann angegeben werden :
window.close(); oder
self.close();
Um ein Fenster zu schließen, das z.B. mit
win1=window.open("", "Fenster_1", "");
geöffnet wurde wird
win1.close();
verwendet.
Das Schließen des Haupt-Fensters ist in einigen Browser-Versionen nicht möglich bzw. es erscheint eine Abfrage, ob das Fenster wirklich geschlossen werden soll.

document.open

Mit document.open() wird ein Ausgabekanal zu einem window oder einem frame geöffnet. In diesem Fall wird in dem entsprechenden Fenster kein tatsächlich vorhandenes Dokument dargestellt sondern ausschließlich die Ausgabe von JavaScript. Die auf document.open folgenden document.write-Anweisungen beschreiben, was im Fenster dargestellt werden soll; mit document.close() wird die Ausgabe abgeschlossen.
Durch den Aufruf von document.open wird ein eventuell schon dargestelltes Dokument gelöscht.
Der Aufruf von document.open hat die allgemeine Form
document.open(mimeType)
Der Eingabeparameter mimeType gibt dabei den Typ des Dokuments, das beschrieben werden soll, an. Sinnvolle Typen für die Ausgabe aus JavaScript heraus sind eigentlich nur
text/htmlEine HTML-formatierte Seite
text/plainEinfacher Text, ohne HTML-tags
Grundsätzlich zugelassen sind hier aber alle Mime-Typen, die vom Browser verstanden werden. (Bei Netscape ersichtlich aus dem Menü "Optionen/Allgemeine_Einstellungen/Hilfsprogramme".) Die Angabe von mimeType darf wahlweise entfallen, dann wird "text/html" als Default verwendet.

document.close

Mit document.close() wird ein durch document.open geöffneter Ausgabekanal geschlossen; die vorher auf diesen Kanal geschriebenen Daten werden dargestellt.

navigator-Objekt

Das navigator-Objekt enthält Angaben über den verwendeten Browser; es hat folgende Eigenschaften :
appCodeName Code-Name des Browsers, z.B.
appName Name des Browsers, z.B.
appVersion Programmversion des Browsers, z.B.
userAgent "user-agent header": mit diesem Text meldet sich der Browser beim Server. z.B.
 
Die von den verschiedenen Browsern gemachten Angaben zum userAgent finden Sie z.B. in der des bingo-Servers wieder.
MSIE 3.0 gibt als Eigenschaft appCodeName "Mozilla", also den Code-Namen von Netscape, zurück. Auch in userAgent wird wieder "Mozilla" angegeben, gefolgt von "(compatible; MSIE 3.0...)" Wenn Sie zwischen MSIE und Netscape unterscheiden wollen, dann benutzen Sie am besten die Eigenschaft appName, die hat entweder den Wert "Microsoft Internet Explorer" oder "Netscape".


Auf der nächsten Seite werden mit einem Link mehrere Frames geändert.

home
Erstellt von © Uwe Brinkmann - bingo e.V. - Stand 22.03.97