JavaScript-Befehle und Einführung
Inhalt: Einführung / Informationen in der Statuszeile ausgeben / Statusanzeige bei MouseOver / Dynamische Links oder MouseOver-Effekt u n d erzeugen eines neuen Fensters / Laufschrift in der Statuszeile / Laufschrift in einem Formular / Hintergrundfarbe vom Benutzer ändern lassen / Datum und Zeit anzeigen / Dropdownliste als Inhaltsverzeichnis / Messagebox
Hier möchte ich eine Einführung in JavaScripts geben. Die JavaScripts, die ich hier vorstelle, verwende ich selbst und können auch hier heraus kopiert werden und dann in die eigene HTML-Datei eingebunden werden. Ich hoffe, dass alle JavaScripts auf anhieb funktionieren. Wenn nicht, ein wenig herum experimentieren hilft vielleicht. Die Javascripts werden entweder im Dokumentenkopf (zwischen <head> und </head>) oder aber erst später eingefügt. Beide dieser Varianten sind möglich. Wenn der Code aber im Kopf steht, bietet dies nicht nur eine bessere Übersicht, sondern Scripts, die schon beim Laden zur Verfügung stehen sollen, sollten in den Dokumentkopf. Im Anschluß an den Code kommt immer eine kurze Erklärung, die angibt, für welche Bereiche der Javascript definiert werden soll.
Ein
Javascriptcode beginnt immer mit
<SCRIPT LANGUAGE="JavaScript">
<!--
Die erste Zeile teilt dem Browser mit, dass es sich nun um Javascriptcode
handelt. Die zweite Zeile leitet den sogenannten Kommentar ein,
der von nicht javascriptfähigen Browsern ignoriert wird.
Die beiden letzten Zeilen
// end hide -->
</SCRIPT>
beenden sowohl Kommentar als auch Javascriptbereich.
Zurück
zum Inhalt
Informationen in der Statuszeile
ausgeben
Die ist wohl einer der kürzesten JavaScripts überhaupt. Deshalb
will ich mit ihm beginnen.
|
Durch diesen Script kann in der Statuszeile links unten im Browser Informationen zusätzlich ausgegeben werden. Als erstes wird window angesprochen und durch einen Punkt getrennt die Eigenschaft defaultStatus. Der nun in Anführungszeichen stehende Text wird in der Statuszeile ausgegeben, sofern diese nicht durch das Anzeigen eines Links oder eines MouseOver-Effektes belegt ist.
Es muss nicht nur eine Zusatzinformation permanent in der Statuszeile ausgegeben werden, es kann auch eine Zusatzinformation ausgegeben werden, wenn sich die Maus über einem Link befindet. JavaScriptfunktionen werden durch "Eventhandler" ausgelöst. Sie beginnen normalerweise mit "on" (onMouseover, onMouseout, onClick,.....) und beziehen sich auf einen von den HTML-Tags entsprechend eingegrenzten Textbereich. Nach dem Eventhandler kommt ein Istgleich-Zeichen, dann in Anführungszeichen der Javascriptbefehl oder die Funktion. Beispiel: onclick="funktion()". Es kann vorkommen, dass Netscape diese Eventhandler nicht immer anerkennt (leider).
|
Als Zusatzattribut innerhalb eines Links kann der Eventhandler onMouseover eingefügt werden. Dabei wird auf die Statuszeile Bezug genommen und dort der Text ausgegeben, wenn man mit der Maus über das Link fährt. Der auszugebende Text wird in Auslassungszeichen geschrieben, da ja der Befehl nach onMouseover in Anführungszeichen steht. Die return true-Anweisung muss dazu. Ohne sie funktioniert der JavaScript nicht und es soll damit auch zum aufrufenden Programm zurückgekehrt werden
Dynamische Links oder MouseOver-Effekt u n d erzeugen eines neuen Fensters
Bei
dem MouseOver-Effekt ändert sich das Aussehen des Links, wenn
die Maus sich über ihm befindet. Ich werde diesmal auch gleich
die Erzeugung eines neuen Fensters hier mit einbringen, da ich einige
Schwirigkeiten hatte, bis ich es so hatte, wie ich es mir ausgemalt
hatte. Popup-Fenster sind nicht nur für die allseits beliebte
Werbung, wenn man eine neue Seite öffnet, sondern können
auch, wie hier gezeigt wird, Zusatzinformationen enthalten. So können
beim Laden der Seite angezeigt werden oder aber auch später.
JavaScriptcode für ein Popupfenster, das beim Aufrufen der Seite
angezeigt wird:
|
Es wird eine function mit beliebigen Namen definiert. Er sollte aber für Übersicht sorgen. Nun wird eine Variable mit Namen win festgelegt und dann mit window.open mit Verweis auf die Variable ein kleines Fenster generiert. In den nun folgenden runden Klammern stehen Attribute, die das Aussehen des Fensters beeinflussen. Am Beginn stehen zwei Anführungszeichen. In diesen Anführungszeichen kann auf eine HTML-Datei Bezug genommen werden. Wenn dieser Bereich allerdings leer bleibt, wird ein neues Fenster erzeugt. Danach kommt der Fenstername. Wichtig: Es dürfen keine Leer- oder Sonderzeichen verwenden, sonst funktioniert es nicht! Danach können noch zahlreiche Angaben folgen, die das Aussehen des Fensters ändern. In der nun folgenden Zeile wird die Variable win angesprochen, dann wird in das Dokument mit write der Text geschrieben. Innerhalb der runden Klammern können HTML-Tags verwendet werden. In der letzten Zeile wird wieder win angesprochen und mit setTimeout ein Ereignis nach einer bestimmten Zeit in Millisekunden auslöst. In runden Klammern steht das entsprechende Ereignis. Hier window.close(), dass das Schließen des Fensters veranlasst und abschließend der der Zeitinterval.
|
Zuerst wird ein neues Objekt erstellt, das hier den beliebigen Namen Bildeffekt bekommt. Nun wird mit bildeffekt.src = die Grafikdatei angegeben, auf die sich das neue Objekt beziehen soll. Für den Mouseover-Effekt sind zwei Bilder notwendig. Es werden deshalb auch zwei entsprechende Objekte erstellt. Jetzt wird die Funktion zum Bildwechsel erstellt. Hierbei werden zwei Parameter namens Nummer und Quelle weitergeben, welche in der Funktion und beim Aufruf verwendet werden. Über "window.document.images[nummer].src = quelle.src;" wird einem Image eine neue Grafikdatei zugewiesen. Hinweis: Alle Bilder auf einer Page werden von 0 aus durchnumeriert. Mit quelle entsteht ein weiterer Platzhalter, der beim Aufruf der Funktion durch onMouseover oder onMouseout mit in dem in quelle definiertem Objekt belegt wird (bildeffekt1 oder bildeffekt).
|
Wenn
du die Maus über das Info-Icon ziehst, sollte es, wie auch das
unter Icon die Farbe wechsel. Zudem sollte ein "Info-Fenster" geöffnet
werden, dass sich nach 23 sec. wieder schließt. Die zwei Effekte
und das Info-Fenster werden durch die etwas längere Codetabelle
erstellt. Wer es zu Testzwecken rauskopiert, benötig dazu alle
vier Bilddateien. Dort wo die Seite abgelegt wird, muss auch das
Verzeichnis Grafiken erstellt werden. Dann sollte es klappen. Da
man meines Wissens nicht an die jeweils andere Grafik kommt, stelle
ich hier alle vier zur Verfügung. DIE
VIER IMAGEDATEIEN
(Anmerkung: Auf der alten Seite ging das - auch der Hintergundfarbwechseln
geht nicht mehr. Ich glaub aber, es geht beide, allerdings durch
den neuen Seitenaufbau geschieht das hinter dem Hintergrund.... naja.
Der Code stimmt aber.)
Laufschrift in der Statuszeile
Die Laufschriftmethode erfreut sich einer ähnlichen Beliebtheit, wie die Mouseovereffekte bei Links. Dadurch, dass sich etwas bewegt, ziehen sie die Aufmerksamkeit des Betrachters auf sich. Sie sind ein guter Blickfang. Laufschriften können entweder in der Statuszeile oder in einem Formularfeld angezeigt werden. Zuerst zur Laufschrift in der Statuszeile.
|
Der
Variablen text wird ein Laufschrifttext,auch Zeichenkette oder string
genannt, zugewiesen. Als nächstes wird in der Funktion laufschrift()
dem ersten Zeichen der Zeichenkette die einfache Variable a zugewiesen.
Wer sich schon mal in BASIC probiert hat, ok vielleicht primitiv,
aber gut zum Einstieg geeignet, weiß vielleicht, dass über
substring Zeichen einer Zeichenkette ermittelt werden können.
Das Anfangszeichen und das Endzeichen wird in der Klammer festgelegt.
(0,1) bedeutet, dass vom ersten bis zum zweiten Zeichen alles in
die Variablen a übertragen wird. Wie bei den Bildern einer Seite,
beginnt man auch hier bei 0 beginnend zu zählen.
In der zweiten Zeile wird der Variablen text eine neue Zeichenkette
zugewiesen und zwar alles, was zuvor unter der Variablen text abgespeicherte
wurde. Allerdings wird der erste Buchstabe abgezogen und dann in der
nächsten Zeile durch text= text + a; am Schluß wieder angefügt.
Jetzt wird wieder die Windowsstatuszeile angesprochen und der Text
aus der Variablen ausgegeben. Durch die nächste Zeile wird 0,2
Sekunden gewartet und die Funktion erneut ausgeführt. Beim zweiten
Aufruf der Funktion hat sich die Zeichenkette von "JavaScript-Befehle
und Einführung " zu "avaScript-Befehle und Einführung
J" geändert. Dies folgt nun alle 0,2 Sekunden in einer Endlosschleife.
Dadurch entsteht erst eine Bewegung. Beim Laden der Seite wird über
den Eventhandler onLoad im Body-Tag die Funktion automatisch aufgerufen.
Der Javascriptcode ändert sich nur geringfügig, wenn die Laufschrift in einem Fenster (eigentlich ist es ja kein richtigen Fenster, aber was soll's) anstelle der Statusanzeige ausgegeben werden soll. Dazu muss auf das Fenster Bezug genommen werden. Für Form und auch für Input muss ein Name vergeben werden, auf den dann zugegriffen werden kann. Z. B. Formname=ausgabe, Inputname=schrift: window.document.ausgabe.schrift.value=text. Das Attribut value (Wert) im Input-Tags leitet die Ausgabe im Formularfeld ein. Da nicht beide Laufschriften durch die onLoad-Anweisung ausgeführt werden, da nur die erste Anweisung ausgeführt wird, muss entweder für das Fenster oder die Statuszeile durch einen anderer Eventhandler aktiviert werden. In diesem Beispiel wird ein Button definiert, der die Laufschrift im Ausgabefeld starten soll. Die Variable text hat mit dem bei Input definierten type="text" nur zufälligerweise den Namen gemeinsam.
|
Hier ein Formular zum Testen:
Zurück
zum Inhalt
Hintergrundfarbe vom Benutzer ändern
lassen
|
Dies ist etwas, was einen sehr schönen Effekt hervorruft. In der untenstehenden Tabelle sind die Farben als Link, der auf die gleiche Seite verweist, abgelegt. Durch MouseOver wird document und dann bgcolor angesprochen. Nun kann sich jeder selbst den Hintergrund einstellen und kann sich nicht mehr beschweren: rote Schrift auf schwarzem Hintergrund sieht nicht gut aus. Na bitte, soll er halt grün nehmen. Die Zellen sollten die gleiche Farbe wie der wählbare Hintergrund haben oder die Farbe sollte als Wort da stehen.
|
In der etwas längeren Funktion datum wird der Variablen derzeit ein neues Objekt zugewiesen (derzeit = newDate), mittels der vordefinierten und für ein "Date-Objekt" gültigen Methoden getYear, getMonth und getDate werden dieser Variablen Jahr (zweistellig), Monat (Achtung: Javascript beginnt bei 0 zu zählen, daher + 1 am Ende) und Tag zugeordnet. Hier gab's beim alten Code nun ein Problem. Denn statt 2000 stand da plötzlich 19100. Da dass so nicht sein kann, muss etwas geändert werden. Es reicht allerdings nicht nur, in der Ausgabe das 19 in 20 umzuändern, da anscheinend das Jahr 100 gezählt wurde. Zuerst bekommt der Ausdruck jahr=derzeit.getYear() noch ein -100. So nun stimmt's wieder. Jetzt taucht aber ein neues Problem auf. Zwei Nullen sind unsinnig, und der Computer lässt sie kurzerhand weg. Dann taucht allerding ein solches Datum auf: 200. Um die fehlende Null wieder zurück zubekommen, wird eine weitere Abfrage in die Funktion eingebaut. Durch if (jahr < 10) wird überprüft, ob das Datum nur einstellig ist und dann die Variable jahr um "0"+jahr erweitert. Ich habe dies zwar am Schluss eingebaut, aber es müsste auch weiter oben funktionieren. Als nächstes wird durch getHours, getMinutes und getSeconds Stunde, Minute und Sekunde zugewiesen. Die If-Abfrage sollte nun klar sein. Die in Anführungszeichen stehende Zeichenkette dient zur Ausgabe. Nach der Ausgabe im Formulartextfeld, das über den Eventhandler onclick ausgelöst wird, wird die Funktion nach Ablauf einer Sekunde erneut aufgerufen und die Zeit im Sekundentakt aktualisiert.
Anzeige testen:
Dropdownliste als Inhaltsverzeichnis
|
Es wird eine Funktion mit Namen gehezu definiert, die als Parameter eine Form erwartet, dann wird der Variablen "nummer" der ausgewählte Eintrag eines Dropdownfeldes zugeordnet, im Anschluß über eine If-Schleife der Wert der Variablen abgefragt (selectedIndex beginnt bei Null zu zählen, wenn der erste Eintrag " --- Auswahlmenü -- " ausgewählt soll nichts geschehen, deshalb lautet die Bedingung "wenn ausgewählte Nummer ungleich (!=) Null dann ..."). In der zweiten Zeile nach der If-Schleife wird "window.location.href" eine Adresse aus den im Forumular (value=) aufgelisteten Verweisen zugeordnet. Die beiden Zeilen document.forms[0].reset(); document.forms[0].elements[0].blur();" dienen dazu, die Dropdownliste wieder auf den Ausgangswert zurückzusetzen (reset) und den Focus zu entfernen (blur). Der Netscape Navigator ignoriert dies leider, daher die Zeile "form.select1.selectedIndex = 0;", die den Cursor auf den Index 0 (= --- Auswahlmenü --- ) zurücksetzt.
In solchen Messageboxen können Informationen, Begrüßungen, Warnungen oder Ähnliches ausgegeben werden. Diese Meldungen müssen dann mit einem OK bestätig werden, damit sie wieder verschwinden. Diese Fenster können bei zu häufigem nervend werden. Auch sollte man dem Netscape Navigator zu liebe die Funktion im head unterbringen, da es sonst passieren kann, dass man beim Mouseover-Effekt keine Meldung erhält.
|
Hier
wird eine function definiert, die wieder einen beliebigen Namen zugewiesen
bekommt. Wenn der Name mit einer Zahl beginnt, funktioniert es nicht.
Man sollte auch Sonderzeichen unterlassen.Die runden Klammern nach
over dienen zur Übergabe der Parameter. In diesem Beispiel bleibt
der Bereich noch leer, die Klammern müssen aber trotzdem geschrieben
werden. Anschließend folgt zwischen den geschweiften Klammern
der eigentliche Programmteil. Durch das vordefinierten Worte alert
wird eine Messagebox ausgegeben, wobei der in den runden Klammern
und in Anführungszeichen stehende Text im Meldungsfenster erscheinen
wird. In der fertigen Seite wird die Funktion Auslößer
durch einen Eventhandler, hier mouseOver innerhalb eines Verweises
aufgerufen.
Zum Testen. Ich wette, du schafst es nicht den Link zu drücken
*fg*
