Javascript Befehle

Schleifen

Wie in jeder Programmier Sprache gibt es auch in Java Script Schleifen. Mit Hilfe von Schleifen hat der Programmierer die Möglichkeit Kontrollstrukturen, oder sich häufig wiederholende Programmabschnitte, einfach und vor allem kurz zu realisieren. Gerade in Programmen, wo Fallunterscheidungen vorgenommen werden müßen werden Sie nicht an den Schleifen vorbeikommen. Um die verschiedenen Arten der Schleifen und deren möglichen Einseitz einfacher zu erklären, werde ich das Ganze an Hand von Beispielen erkären.

Die If / else Schleife:

Die If / else Schleife wird zur Kontrolle von Fallunterscheidungen eingesetzt. Die Vorgehensweise hierbei ist denkbar einfach. Die if-Abfrage prüft Werte auf eine Ihr zugewiesene Bedingung. Ist die Bedingung erfüllt wird der zur if-Schleife zugewiesene Programmblock ausgeführt. Sollte die Prüfung von Wert gegen Bedingung nicht zutreffen, wird dann der Programmblock der zu else gehört ausgeführt. Vereinfacht kann man sich das Ganze so vorstellen, ist die Bedingung wahr mache das, ist die Bedingung jedoch falsch mache dieses.

Die while Schleife:

Auch hier wird wieder ein Wert auf auf eine bestimmte Bedingung hin geprüft. Jedoch prüft die while Schleife solange die Werte gegen die Bedingung, bis diese erfüllt wird. Die Gefahr hierbei eine Endlos Schleife zu Programmieren ist nicht gering. Darum werden while Schleifen in der Regel immer mit einer Abbruchbedingung versehen. Diese Abbruchbedingung wird durch den Einsatz des Befehls break, oder durch einen internen Zähler erzeugt.

Mit dem aufruf von break; wird jede Schleife beendet. Dieses schließt die If und die nachfolgende for Schleife mit ein. Beim Aufruf break; verläßt das Programm sofort die aktuelle Klammer und setzt die Interpretierung genau hinter der soeben Klammer fort.

Die for Schleife:

Mit der for Schleife haben Sie die Möglichkeit Programmblöcke eine bestimmte Anzahl von Wiederholungen durchführen zu lassen. Egal ob Sie eine bestimmte Ausgabe mehr als einmal auf dem Bildschirm ausgeben möchten oder eine Anzahl der Dürchläufe einer If Schleife steuern möchten, die for Schleife ist hier erste Wahl.

Vergleichs-und logische Operatoren

Um Überhaupt Werte oder Strings gegeneinander prüfen zu können, benötigt man Vergleichsoperatoren. Diese Vergleichsoperatoren sind recht simpel, so daß die nachfolgende Übersicht selbererklärend sein sollte.

Oftmals reichen die oben genannten Vergleichsoperatoren nicht aus um eine Bedingung zu prüfen. Damit z.B. nicht zu viele aufeinanderfolgende If Schleifen programmiert werden müßen, um komplexere Aufgaben zu lösen. Gibt es die logischen Operatoren. Auch diese sind leicht verständlich, so daß wiederrum die nachfolgende Auflistung reichen sollte.

Dialogbox

Nach dem in den vorangegangenen Punkten ein wichtiger Teil der Grundsätze erklärt wurde. Beschäftigten sich die nächsten Punkte mit der Ausgabe von errechneten Werten oder ermittelten Strings. Die Ausgabe kann direkt in die HTML Seite, in ein sich öffnendes neues HTML Fenster oder in einem in Java Script vorgesehen Dialogfenster stattfinden.

Ausgabe von Dialogboxen in Java Script:

In Java Script können Dialogboxen "normale" Anzeigen, welche mit OK bestätigt und geschlossen werden können, sein. Es besteht aber auch die Möglichkeit Dialogboxen zu öffnen, welche zusätzlich ein Abbruch Button haben oder z.B. eine Eingabe erwarten, welche wiederum weiterverarbeitet werden kann. Nachfolgend nun die möglichen Dialogboxen in der Übersicht.

Eine einfache Dialogbox mit OK Button:

Wie unschwer zu erkennen ist das Erzeugen einer einfachen Dialogbox sehr einfach. Die beiden wichtigen Befehle hierfür, sind alert und onload().

alert("xxxxxxxxx"): Weist den Browser an die Dialogbox zu öffnen, wobei in der Box der Text zwischen den Klammern angezeigt wird.

onload="ausgabe()": Weist den Browser an die entsprechende Funktion zu laden

Eine Dialogbox mit OK und Abbruch Button:

Diese Art von Dialogboxen können Sie für eine Fallunterscheidung einsetzen. Je nach dem, wie der Besucher entscheidet wird der weitere Programmverlauf eingeleitet. In diesem Beispiel werden jetzt erstmalig eine Variable Initialisiert und eine If Schleife mit Vergleichsoperator zum Einsatz kommen.

Eine kurze grundsätzliche Erklärung zum obigen Beispiel. Es wird angenommen ein Besucher hat eine Seite Ihrer Homepage angefordert, welche nicht mehr vorhanden ist und Sie möchten nicht, daß Ihm die Standard Anzeige NOT FOUND präsentiert wird. Haben Sie mit diesem kleinen Script die Möglichkeit in auf die Sitemap zu leiten. Sollte er dieses nicht wünschen, wird er zurück zur Seite geleitet von der er Ihre Seite aufgerufen hat. Nun aber die Erklärung zu den einzelnen Abschnitten.

var entscheidung; - Initialisierung der einer leeren Variablen Namens "Entscheidung".

entscheidung = confirm ("Text 1\nText2"); - Über confirm wird eine Dialogbox mit OK und Abbruch Button erzeugt. In den Klammern steht der anzuzeigende Text. Durch den Einsatz der Zeichenfolge \n wird ein Zeilenumbruch erzwungen. Standardmäßig liefern die Buttons folgende Strings zurück OK gleich true und Abbruch gleich false. Diese Strings werden dann der Variablen Entscheidung übergeben.

Eingabe Dialogbox mit Prompt öffnen:

Die wohl häufigste Einsatzart für diese Dialogboxen ist der einer Passwort Eingabe Aufforderung. Ob ein Java Script Passwortschutz nun sinnvoll und unsinnig bzw. nutzlos ist sei mal da hin gestellt. Viel wichtiger ist das Sie mit Hilfe der vom Besucher gemachten Angabe eventuell Aktionen auslösen könnten, die sonst Darstellungs- und Ablauftechnisch als unsicher bezeichnet werden müßten. Das nachfolgende Beispiel könnte zwar auch über ein vorhandenes Java Script Objekt gesteuert werden. Es soll aber auch nur auf eine Gedankenrichtung hinweisen und nicht ein superkompliziertes Script werden.

Wahrscheinlich wird die prompt Zeile bei Ihnen mit Zeilenumbruch angezeigt, diesen Zeilenumbruch sollten Sie in der Realität nicht setzen. Erfahrungen mit den verschiedenen Browsern haben gezeigt, daß einige in dem Punkt Probleme bereiten und Fehler auf der Seite anzeigen. Nun aber zur eigentlichen Programmsyntanx.

breite = prompt ("text"); - Bewirkt das Gleiche, wie im vorigen Beispiel. Dieses mal ist nur die Art der Dialogbox eine andere. Die Übergebenen Inhalte ist grundsätzlich jetzt die Eingabe des Benutzers. (Ausnahme ist der der Abbruch Button er liefert wieder den String false zurück.) Zur weiteren Verarbeitung wird auch hier die die Benutzereingabe an die vorher initialisierte Variable breite übergeben.

Objekte

Ab und an fiel in den einzelnen Beispielen schon mal das Wort Java Script Objekt. Dieser Ausdruck ist ein fester und wichtiger Bestandteil der Sprache. Die Sprache Java Script besteht durchweg aus diesen Objekten, wobei das ganze Prinzip, bis auf einige Ausnahmen, hierarchisch aufgebaut ist. ( Die Ausnahmen werden hier aus Gründen der reinen Verständlichkeit nicht erwähnt. ) Es gibt Objekte mit der höchsten Wertigkeit und solche die von der Wertigkeit dahinter liegen. Die nachfolgenden Objekte stehen in der Regel in direktem Bezug zum ranghöchsten Objekt. Für fast alle Objekte stehen Methoden zur Verfügung. Diese Methoden sind nichts anderes, als fest definierte Funktionen, welche sich auf das jeweilige Objekte anwenden lassen. Die Eigenschaften eines jeden Objektes spiegeln das "Erscheinungsbild" eines Objektes wieder. Werden die Eigenschaften verändert, hat das keine Auswirkung auf das Objekt und seine Methoden. Nachfolgend das allseits beliebte Bespiele des Austos als Erklärung des eben Erklärten. Wir nehmen an, daß unser Objekt ein PKW sei, dann wären dazu gehörige Eigenschaften Modell, Farbe, Leistung,.... und seine Methoden wären z.B. fahren oder bremsen. Verändern wir jetzt das Modell und z.B. die Farbe, hätte dieses keine Auswirkung auf das Objekt es bliebe immer noch ein PKW und die Methoden fahren und bremsen würden immer noch anwendbar sein. In den nachfolgenden Kapiteln, werden die eingesetzten Objekte, Eigenschaften und Methoden jeweils erklärt, so daß mit fortlaufenden Kapiteln, sich die Problematik des Verständnisses sicherlich vereinfacht.

Ein neues Fenster mit Java Script erzeugen

Ein neues Fenster mit Java Script zu erzeugen ist mehr als einfach, denn die Sprache selbst stellt hier für ein eigenes Objekt zur Verfügung. Die erzeugten Fenster sind von der Funktionalität voll wertige Browser Fenster. Der Vorteil liegt auf jeden Fall darin, daß Sie Kriterien wie Größe, Position und Aussehen steuern können. Die derzeit häufigste Einsatzweise liegt wohl darin Banner einzublenden, oder das Fenster auf volle Bildschirmgröße zu zwingen. Sinnvoll oder nicht sinnvoll das ist hier die Frage. Tja... Ich persönlich denke das sollte jeder für sich entscheiden und dem entsprechend handeln. Nun aber zu den Java Script Fenstern. Nachfolgend eine mögliche Minimal-Lösung ein neues Fenster zu öffnen.

Wie schon erwähnt, ist die obige Lösung eine Minmal-Lösung. Es enthält die grundsätzliche Java Script Syntax, um ein neues Fenster zu öffnen. Die Deklarierung ist gewohnt die Alte. Funktion setzen und den entsprechend auszuführenden Programmcode setzen. Aufruf der Funktion über den Eventhandler "onload". Hier nun die Erklärung zu den Neuerungen.

window.open(...)...; - Aufruf des Java Script Objektes window mit der Methode open. Also fast, wie man es übersetzt sprechen würde. "Öffne ein Fenster"

("datei.html","fenster1","width=150,height=150,scrollbars=yes")...; - Zuweisung der Eigenschaften. Welche das neue Fenster besitzen bzw. annehmen soll. Angefangen von "datei.htm", welches die url bzw. den Pfad der anzuzeigenden Datei enthält. Gefolgt von "fenster1", welches dem neuen Fenster den Namen fenster1 zuweist. Solange dieses Fenster geöffnet ist, kann dieses über diesen Namen angesprochen werden. Zuletzt kommen noch die Eigenschaften, welche das Aussehen des neuen Fensters festlegen - "width=150,height=150,scrollbars=yes" . Diese sind eigentlich selbsterklärend. - Breite und Höhe in px, sowie die Zuweisung von Scrollleisten. Sollte der Inhalt der im Fenster anzuzeigenden Datei größere Ausmaße als das eigentliche Fenster haben, wird das neue Fenster automatisch mit Scrolleisten angezeigt. Ist die Ausmaße hingegen kleiner, werden keine Scrollleisten angezeigt.

..focus(); - Eine Methode, welche das neue Fenster aktiv setzt. Sprich es wird im Vordergrund angezeigt. Dies ein Vorteil, den Sie immer nutzen sollten, damit die Besucher das neue Fenster auch sehen und es nicht im Hintergrund geladen wird. Leider verliert das neue Fenster seinen Fokus, sobald der Besucher ein anderes Browserfenster durch Mausklick aktiv setzt.

Mögliche Eigenschaften des neuen Fenster.

Neben den unter Punkt 8 gesetzten Eigenschaften gibt es natürlich noch weitere hilfreiche Eigenschaften, mit welchen sich das Aussehen und die Position innerhalb des Bildschirmes beeinflussen lassen. Das Nachfolgende Beispiel zeigt nun eine Funktion zum Öffnen eines Fensters mit zusätzlichen Eigenschaften.

Hier nun die Erklärungen der neuen Eigenschaften:

toolbar=yes - Das neue Fenster wird mit der vom Browser mitgelieferten Werkzeug Palette angezeigt.

status=yes - Das neue Fenster wird mit der vom Browser mitgelieferten Statuszeile und dazugehörigen Inhalt angezeigt.

menubar=yes - Das neue Fenster wird mit der vom Browser mitgelieferten Menüleiste angezeigt.

Das waren die neu hinzugekommenen Eigenschaften. Neben diesen gibt es natürlich noch weitere Eigenschaften. Nachfolgend noch eine kleine Erklärte Liste von weiteren nützlichen Eigenschaften. Die Einbindung erfolgt nach dem obigen Schema.

locationbar=yes - Das neue Fenster wird mit der vom Browser mitgelieferten "location bar" angezeigt. Es ist also möglich neue Zieladressen einzugeben, welche dann in das neue Fenster geladen werden.

resizable=yes - Das neue Fenster darf in durch den Besucher in größe Verändert werden.

screenx=100 - Das neue Fenster hat einen relativen Abstand von 100 Pixel auf der x-Achse, gemessen gegen die linke obere Bildschirmecke.

screeny=100 - Das Pendant zu screenx. Sprich Abstand auf der y-Achse. Beachten Sie bei den Positionierungen Ihrer Fenster, daß die Messungen relativ sind und somit gegen die verschiedenen Bildschirmauflösungen der Besucher berechnet werden.

Was noch zu den Eigenschaften zu sagen bleibt:

Die hier aufgeführten Eigenschaften sind natürlich nicht alle vorhandenen, jedoch sind es die Eigenschaften, welche in der Praxis am häufigsten eingesetzt werden. Alle hier gezeigten Eigenschaften werden im Stil "Eigenschaft=yes" dargestellt und wo natürlich yes steht darf auch no stehen. Sie können also auch dem neuen Fenster eine mögliche Eigenschaft verwehren, in dem Sie explizit den Einsatz der Eigenschaft verneinen. In der Praxis ist das mit den verschiedenen Browser natürlich wieder eine Gratwanderung. Die meisten Browser zeigen das Fenster nur mit den zugewiesenen Eigenschaften an, d.h. Eigenschaften die nicht gesetzt werden, werden auch nicht verwendet. Auf der sicheren Seite sind Sie jedoch nur, wenn die Eigenschaften auf no gesetzt sind. Wobei ich trotz Suche keinen Browser gefunden habe der hier große Probleme macht.

HTML Inhalte dynamisch mit Java Script generieren.

Nach dem in diesem Abschnitt gezeigt wurde, wie Sie mit Java Script neue Fenster öffnen, um eine HTML Seite dort anzuzeigen. Befaßt sich dieser Punkt damit die Inhalte des Fensters mit Hilfe von Java Script zu generieren. Nachfolgend wieder ein Beispiel, welches das Ganze verdeutlichen soll.

Nun hat sich im obigen Beispiel einiges getan. Es sind relativ viele Neuerungen hinzugekommen, welche jetzt nachfolgend noch einmal erklärt werden.

neu=window.open(...).; - Initialisiert eine neue Variable mit dem Namen neu und tätigt sogleich eine Zuweisung, wobei diese Zuweisung zugleich eine Anweisung ist, ein neues Fenster mit entsprechenden Eigenschaften zu öffnen. Das Feld, welche zuvor dem Fenster die zuladene URL übergeben hat ist nun leer. Dieses ist so, da der Inhalt ja von unserem Script selbst geschrieben werden soll.

neu.document.open("text/html"); - Das neu steht für unsere Variable also dem neuen Fenster. "Dokument" selbst ist ein direktes Unterobkjekt des Java Script Objekt "window". Mit dem Objekt "Dokument" haben wir die Möglichkeit den Inhalt einer HTML Seite anzusprechen und mit den zu "Dokument" gehörigen Methoden bzw. Eigenschaften diesen auch zu verändern. In dieser Zeile wird die Methode open("text/html") auf das Objekt "Dokument" angewendet. Diese Methode liefert eine eine Freigabe zum Schreiben der Datei. Der entsprechende Datei Typ wird innerhalb der Klammern zugewiesen. In unserem Fall natürlich "text/html". In unserem Fall wollen wir in das neue Fenster der Variable neu schreiben, deshalb muß diese Zuweisung an den Anfang der Anweisung gesetzt werden. Dieses gilt dementsprechend auch für alle Anderen in diesem Beispiel folgende Methoden bzw. Eigenschaften, die auf unser Objekt angewendet werden sollen! Im Normalfall, also ohne Variable würde man sonst die Anweisung vornehmen die gerade zu ladende HTML Datei zu beschreiben.

document.bgColor="#FFFFCC"; - "fgColor="Farbe" ist eine Eigenschaft des Objekt Dokument. Mit dieser Eigenschaft wird die Hintergrundfarbe der zu schreibenden HTML Datei festgesetzt. Das Pendant in HTML ist dann auch bgcolor.

document.fgColor="#BBBB00"; - Auch "fgColor="Farbe" ist eine Eigenschaft und legt die Standardschriftfarbe für die zu schreibende Seite fest.

neu.document.write("<p>....</p>"); - Aufruf der Methode "write()". Schreibt ins aktuelle Dokument, also in diesem speziellen Fall in unser geöffnetes Fenster. Würde nicht explizit mit der Variable "neu" das Fenster als aktives Dokument erklärt, würde Java Script versuchen in das Fenster zu schreiben aus, welchem der Aufruf für die Ausführung des Codes kam. Wie in diesem Beispiel dann zu sehen können Sie natürlich auch zusätzliche HTML Tags mit schreiben lassen, welche dann auch als solche vom Browser interpretiert und dargestellt werden.
Um diesen Vorteil noch deutlicher hervorzuheben, wurde in der folgenden obigen Zeile :

neu.document.write("<p><font style=\"arial\" size=\"2\" color=\"red\">Diese Textfarbe wurde mit \"font\" modifiziert</font></p>");

Die Schriftart, Schriftgröße und die eigentlich vorher festgelegte Schriftfarbe mittels HTML Tags zugewiesen. Also in diesem Fall wird genau dieser abzubildende Absatz, losgelöst von der eigentlichen Schriftfarbendefinition, in Rot statt in einem Grünton angezeigt.
Ein ebenfalls wichtiger Punkt ist bei der Notierung der HTML Tags innerhalb dieser write Methode zu erkennen. Den Anführungszeichen muß ein \ vorweg gestellt werden, ansonsten würde die Interpretation so aussehen, daß dort die in doppelten Anführungszeichen stehende Anweisung zu Ende sei.

a href="javascript:window.close()">Fenster schliessen</a> - Dieser HTML Code wird im obigen Beispiel mit ins Fenster geschrieben. Es handelt sich natürlich, um ein normales a href Tag, welches jedoch kein Verweis zu einem anderen HTML Dokument aufruft, sondern die Javascript Methode "close()". In Verbindung mit dem Objekt "window", kann so ein geöffnetes Fenster direkt geschlossen werden.

Java Script abbilden und mittels Events verändern

Im vorigen Abschnitt wurde gezeigt, wie in das neu geöffnete Browserfenster, mittels Java Script, HTML Code geschrieben wurde. Natürlich funktioniert, daß nicht nur in neuen Browserfenstern. Viel häufiger wird dies auf die anzuzeigende HTML Seite angewendet. Gerade dadurch lassen sich mit Java Script sehr gut dynamische Websites erstellen. Das nachfolgende Beispiel zeigt eine kleine Möglichkeit der Umsetzung und kommt hierbei noch mit ein paar Grundsätzlichen Neuerungen.

Eine grundsätzliche Änderung zu allen vorangegangenen Beispielen, ist da die Java Script Definition jetzt direkt im innerhalb des body Tags steht. Die Erklärung hierfür ist ganz einfach. Bei unserem Minibeispiel soll an einer bestimmten Position der Website, mit Java Script erzeugter Code eingesetzt werden. Damit dieser auch an den entsprechenden Stellen dargestellt wird, muß dort unser Java Script Teil aufgerufen werden. Nach dem im letzten Abschnitt 9 schon, das Java Script Objekt - Dokument, seine Eigenschaften und Methoden besprochen, deshalb hierfür nur die Neuerungen. Der Aufruf des Objekt Dokument erfolgt jetzt direkt, ohne die Zuweisung eines Fensters, damit in das aktuelle Dokument geschrieben wird. Wird das obige Beispiel ausgeführt, wird die Funktion schreiben nicht ausgeführt, da hierfür auch kein Aufruf notiert ist. Der folgende Bereich ist keiner Funktion zugewiesen und wird somit sofort umgesetzt. Nach dem dieser Ausgeführt wurde, ist der Java Script Bereich zu Ende und der Browser interpretiert noch den folgenden HTML Code. Jetzt wird die Seite dargestellt. In dem mit Java Script geschriebenen Part wird nun folgende Zeile geschrieben:

Dieser kleine Code bedarf jetzt doch einer Erklärung. Dem a href Tag wird der Aufruf der Java Script Funktion schreiben() zugewiesen. Hierbei ist jetzt eine Neuerung zu erkennen - schreiben('#000000','#FFFFFF') - In den Klammern werden jetzt zwei Farbwerte in Hexadezimal Form, durch Klammern getrennt, notiert. Auf diese Art und Weise werden beim Aufruf der Funktion schreiben diese beiden Werte mitübergeben. Was passiert jetzt mit den Werten?

Wie oben zusehen, wird die Funktion schreiben mit zwei Namen, Farbe und Schrift, aufgerufen. Die Trennung erfolgt ebenfalls über Klammern. Diese beiden Namen stehen für Variablen mit dem gleichen Namen. Wird nun die Funktion durch anklicken des Links aufgerufen, werden die Werte der Reihe nach den einzelnen Variablen zugewiesen. Die Variablen können nun beliebig in den Rest der Funktion integriert werden. In unserem Beispiel:

Nach dem der Link angeklickt wurde, startet nun die Funktion mit den übergebenen Werten. Das Ergebnis ist, daß die HTML Seite komplett neu geschrieben wird und zwar mit Schwarzen Hintergrund, der Schriftfarbe weiß und dem anzuzeigenden Text mit dazugehörigen HTML Tags.
.Natürlich passiert in diesem Beispiel nichts weltbewegendes und sein Einsatz so ist sicher nirgends Sinnvoll. Dies ist auch gar nicht gewollt. Aber es zeigt Möglichkeiten aus denen sich komplexere Java Scripts programmieren lassen.

Browserabfrage

Die Browserabfrage ist bei der DHTML Programmierung ein fester Bestandteil. Aufgrund der Tatsache, daß die beiden führenden Browser Hersteller verschiedene Lösungsansätze für die Umsetzung von DHTML eingeschlagen haben, kommt der Webdesigner nicht um eine Browserabfrage herum. Für dynamische Anwendungen mit dem Microsoft Internet Explorer gibt es das Java Script Objekt all. Nescape hingegen nutzt das Java Script Objekt Layer. Beide Browser sind nicht in der Lage das zugehörige Objekt des anderen zu interpretieren, so ist die letzte Rettung nur die vorherige Browserabfrage. Wobei eine Browserabfrage, wie eine Gabelseite genutzt werden kann, was bedeutet, daß jeweils eine für jeden Browser optimierte Seite programmiert wird, auf welche dann entsprechend weitergeleitet wird. Die zweite Version besteht darin, daß die Browserabfrage in jeder Seite vorgenommen wird und das Script in beiden Browser lauffähig ist. Nun aber zur Browserabfrage.

Was passiert nun in dem obigen Script? Zuerst wird der Variable Browser, der Browsername des ausführenden Browsers zugewiesen. Dieser Browsername ist standardmäßig in navigator.appName gespeichert.
Wo bei Navigator ein Java Script Objekt und appName eines seiner Eigenschaften ist. Danach wird die zum Browser gehörige Versionsnummer der Variable Version zugewiesen. Die Versionsnummer ist standardmäßig in navigator.appVersion gespeichert. appVersion ist ebenfalls eine der Eigenschaften des Java Script Objekt Navigator.

Nun steht im obigen Beispiel nicht nur navigator.appVersion, sondern navigator.appVersion.substring(0,1). Was hat nun dieser Zusatz substring(0,1) für eine Funktion?
Um das zu erklären, muß man sich anschauen, daß die Versionsnummer der Browser nicht einstellig, sondern Kommastellen aufweisen. Wir benötigen für unsere Abfrage aber nur die Stelle vor dem Komma. Also setzen wir diese Eigenschaft substring(0,1) ein und haben somit die Möglichkeit nur die ganze Zahl in Version zu speichern.

Jetzt kommen zwei If Abfragen in denen jeweils die Browserspezifieschen Java Script Objekte, der dazu passende Browsername und eine Versionsnummer höher 4 abgefragt wird. Wie im Beispiel zu erkennen, ist das für den Microsoft Internet Explorer das Objekt all und für den Netscape Navigator das Objekt Layer. Diese beiden Objekte besitzen die entsprechenden Eigenschaften dynamisch Inhalte anzuzeigen oder zu verändern. Da beide Objekte erst ab den Browserversionen 4.0 interpretiert werden können, wird auch auf mindestens diese Browserversion hin geprüft.

Je nach dem welche Version nun festgestellt wurde, wird die Funktion schreiben aufgerufen und Ihr, entweder die Null für den Microsoft Internet Explorer, oder die eins für den Netscape Navigator übermittelt. Diese im Beispiel angenommen Funktion muß natürlich diese Zahl einer entsprechenden Variable zuweisen, welche den weiteren Verlauf für die Darstellung in den jeweiligen Browser Typen sicherstellt.

Beispiel

Das erste dynamische Beispiel - Ein Logotext lernt fliegen

Nach dem nun in der Lektion 10 gezeigt wurde, wie eine Browserabfrage realisiert wird. Diese Browserabfrage wird nun in unsere Lektion 11 integriert. Was soll unser Beispiel können? Es soll sich ein Text vom linken oberen Bildrand langsam zur Bildschirmmitte bewegen und dort unsichtbar werden. Zuerst das vollständige Listing zu Beispiel. Die Erklärung, wie gewohnt Schritt für Schritt dahinter.

Wie unschwer zu erkennen ist das obige Beispiel, daß erste welches doch recht komplex erscheint. Jetzt erstmal für das Verständnis, in Worten ohne Erklärung der entsprechenden Syntax, der grobe Ablauf des obigen Beispieles.

1.)Im Fall dessen, daß die Seite vom Browser geladen wird, stößt dieser auf einen Java Script Bereich. Dieser ist aber an eine Funktion gebunden, so daß diese nicht gestartet wird.

2.)Im Body Bereich befindet sich nur eine einzige Anweisung, per DIV Tag wird der Text "Java Script fliegt" etwa links oben sichtbar im Bildschirm ausgegeben.

3.)Nachfolgend wieder ein Java Script Bereich, dieser ist unsere Browserabfrage der Lektion 10. Da keine Bindung an eine Funktion vorliegt wird der Java Script Bereich eingelesen und interpretiert. Je nach dem, ob Netscape oder der Internet Explorer gefunden wurde. Wird die Funktion schreiben mit einer entsprechenden Kennziffer für den gefundenen Browser aufgerufen.

4.)Die Funktion schreiben ist im ersten Java Script Bereiches notiert. Die Funktion startet mit dem übergebenen Wert. Je nach dem, welcher Wert vorgefunden wurde, wird eine andere Funktion gestartet.

5.)Diese Funktion bekommt sozusagen die Endkoordinaten für die Bewegung des Textes übergeben. Die eine Funktion realisiert die Bewegung für den Microsoft Explorer, die andere dementsprechend die Bewegung für Netscape.

Nun die Erklärung der einzelnen Parts inklusive Erläuterung zu den entsprechenden Java Script Funktionen:

Anfangen möchte ich mit dem DIV Bereich:

Dieser Part kommt aus dem Bereich der Cascading Style Sheets. Es wird mit dem HTML Tag Div ein Bereich eingrenzt dem folgende Style Sheets zugeordnet werden. position, top, left, visibilty(Eine Erklärung der Style Sheets finden Sie in unserem Style Sheet . Dem Bereich wird zusätzlich ein Name über das Attribut id zugewiesen in unserem Fall neusatz. Diese Eindeutige Identifizierung des Div Bereiches, ermöglicht uns mit Hilfe von Java Script diesen Bereich anzusprechen und bei Bedarf zu verändern. Durch die Einsatz von visibility:visible teilen wir dem Browser mit, daß der Bereich im Orginalzustand Sichtbar ist.

Die Browserabfrage wurde ja schon in der vorigen Lektion erklärt, so daß wir gleich zur Funktion schreiben kommen.

Die Funktion schreiben wird aus der Browserabfrage herausaufgerufen. Ihr wird der Wert für den ermittelten  Browser übergeben, und der Variable a zugewiesen. Die Funktion schreiben besteht aus zwei If-Schleifen, welche den Inhalt von a überprüfen, um bei einer Übereinstimmung die jeweils für den entsprechenden Browser optimierte Funktion bewegen bzw. begegnete aufzurufen. Bei diesem Aufruf werden wieder drei Zahlenwerte übergeben. Diese Zahlenwerte entsprechen den Endkoordinaten für die auszuführende Bewegung des Logos.

Realisierung der Bewegung für den Microsoft Internet Explorer:

Die beim Aufruf übermittelten Werte werden den Variablen von, rechts und nach zugewiesen. Danach werden zwei weitere Variablen initialisiert. Zum einen die Variable neusatz, und zum anderen die Variable Heiden. neusatz wird folgende Objektstruktur zugewiesen document.all.neusatz.style . Das Objekt Dokument wurde in den vorangegangenen Kapiteln bereits besprochen. Mit dem Objekt all werden Methoden zur Verfügung gestellt, mit denen wir die Möglichkeit haben dynamische Änderungen der Darstellung, der Position,.... also genau die Funktionen die wir benötigen. Leider ist das Objekt all Microsoft Internet Explorer spezifisch. Netscape hat für diese Methoden ein eigenes Objekt (Layer) entwickelt. Durch diesen kleinen aber feinen Unterschied ist Programmierung von DHTML auch überhaupt so schwer. Aber lassen Sie sich dadurch nicht verwirren. Wir machen weiter, auf all folgt nun unser eigenes Objekt mit dem Namen neusatz. neusatz ist unser definierter DIV Bereich. Das Objekt Style ist ebenso wie all eigens von Microsoft entwickelt und wird dementsprechend nur vom Microsoft Internet Explorer interpretiert. Style wird benötigt um Style Sheet Angaben, wie Sie in unserem DIV Bereich gesetzt sind, dynamisch zu verändern.
Der Variable hidden wird der auch das Wort hidden zugewiesen. Jetzt, wo alle Variablen entsprechend initialisiert, und mit den Werten belegt sind, kommt eine if-Schleife. Diese if-Schleife überprüft, ob die Bedingung "von<nach" erfüllt ist. Ist das Ergebnis positiv wird der nachfolgende Schleifenrumpf ausgeführt. Zuerst werden folgende Methoden auf die variable neusatz angewendet top und left. Die Werte die die Methoden übergeben bekommen werden zum einen durch (von +=10) und zum anderen durch (rechts +=5) berechnet. Das Resultat hieraus ist das unser DIV Bereich 10 Pixel nach unten und 5 Pixel nach rechts verschoben wird. Jetzt wird die Browserunabhängige Funktion setTimeout aufgerufen. setTimeout wartet 150 Zehntel Sekunden und ruft dann die eigene Funktion wieder auf. Natürlich mit den neuen Werten für von und rechts, da wir diese ja zwischenzeitlich nach oben gesetzt haben. Dieser Vorgang wiederholt sich entsprechend der Bedingung der if-Schleife bis von nicht mehr kleiner als nach ist. In der Realität sieht das ganze aus, als würde der Schriftzug über den Bildschirm fliegen. Wir haben für diesen Fall aber noch else integriert, denn der Schriftzug sollte nach erreichen der Endkoordinate ausgeblendet werden. Dafür verändern wir im Schleifenrumpf von else unser eigenes Objekt neusatz mit der Methode visbility. Visibilty bekommt nun die Zuweisung hidden, bedeutet der Browser soll dieses Objekt unsichtbar machen. Ergebnis unser Schriftzug wird ausgeblendet. .............................. und nun ein großes UFF! Geschafft der Schriftzug würde im Microsoft Internet Explorer sich über den Bildschirm bewegen und am Ende ausgeblendet werden.

Realisierung der Bewegung für Netscape:

Die Funktion realisiert unsere geforderten Effekte für Netscape. Prinzipiell gibt es keine gravierenden Unterschiede zur Lösung für den Microsoft Internet Explorer. Hier die Unterschiede in der Reihenfolge, wie Sie im Quelltext auftreten.

Die Zuweisung für die Variable neusatz, beinhaltet weder das Objekt all noch das Objekt style. Wie oben bereits erwähnt, sind beide Objekte Microsoft Internet Explorer spezifisch und werden nicht vom Netscape Browser unterstützt. Beim Netscape Browser brauchen wir nur das Objekt document gefolgt von unserem Objekt neusatz (document.neusatz).

Der nächste Unterschied befindet sich bei der Initialisierung der Variable hide. Erstens nennen wir Sie anders und zweitens wird hide und nicht hidden zugewiesen. Die Erklärung hierfür ist wieder mal die Unterschiedliche Syntax. Während der Microsoft Internet Explorer nur auf hidden reagiert, fordert Netscape die Zuweisung von hide.

Der restliche Ablauf ist der gleiche. Durch die sozusagen Browserspezifiesche Zuweisungen für die Initialisierten Variablen haben wir erreicht, daß die restliche Struktur der Schleife gleich bleiben kann.