Javascript
Tipps & Tricks
Verschachtelung von Funktionen
Javascript
Neben der normalen Notation von Funktionen können Funktionen auch verschachtelt werden. Das heißt, eine Funktion wird direkt in eine andere hinein notiert. Dies hat folgende Vor- beziehungsweise Nachteile:
– Die innere (verschachtelte) Funktion kann nur über die äußere aufgerufen werden und ist für alle anderen Zugriffe unzugänglich.
– Die innere Funktion kann die Variablen und Parameter der äußeren nutzen.
– Die äußere Funktion kann die Variablen und Parameter der inneren Funktion nicht nutzen.
– Die innere Funktion wird als (lokale) Quasi-Variable angesehen.
Beim Aufruf von verschachtelten Funktionen können die Parameter spezifisch zugeordnet werden. Dazu wird die äußere Funktion normal aufgerufen. An dem Aufruf wird zusätzlich eine weitere, in Klammern stehende Parameterliste notiert. Diese zweite Liste wird dann der inneren Funktion übergeben. Ein Beispiel:
function aussen(a) {
function innen(b,c) {
x = a + b + c;
return(x);
}
return(innen);
}
z = aussen(1)(2,3) // = 6
Ab Javascript 1.5 ist es außerdem möglich, die eingeschlossene Funktion gegen eine Bedingung zu stellen. Dazu wird diese zum Beispiel innerhalb einer if-Abfrage definiert.
For-in-Schleife
Javascript
Eine for-in-Schleife ähnelt vom Aufbau her einer for-Schleife, weist allerdings doch deutliche Unterschiede auf. Sie besteht ebenfalls aus Kopf und Körper, wobei aber der Kopf anders aufgebaut ist als der einer for-Schleife.
Er beginnt auch wieder mit dem Wort for. Danach folgt in runden Klammern stehend eine Variable, das Wort in sowie ein Objekt. Die Variable ist eine beliebige Variable und das Objekt kann ebenso fast beliebig gewählt werden.
Die Funktionsweise einer for-in-Schleife ist wie folgt: Die Eigenschaften des Objekts werden als Anzahl der Durchläufe verwendet. Pro Durchlauf wird der gewählten Variablen nacheinander eine Eigenschaft ? angefangen bei der ersten ? des Objekts zugewiesen. Bei ungeordneten Objekten wie zum Beispiel window oder document wird die Reihenfolge durch den Browser beziehungsweise das ausführende Programm bestimmt; bei geordneten Objekten wird von der ersten bis zur letzten Eigenschaft nach der Reihenfolge der Eigenschaften vorgegangen. Die Eigenschaften eines Arrays a wären beispielsweise a[0], a[1], a[2], wobei die Eigenschaften beispielsweise window event, clipboardData, on
resize, defaultStatus und so weiter sein könnten. Ein Beispiel:
a = new Array('a','b','c','d');
c = '';
for(b in a)
{ c += a[b]; }
alert(c);
Erklärung: Als Erstes wird ein neues Array mit den Werten a, b, c und d erstellt. Die dazugehörigen Eigenschaften sind 0, 1, 2 und 3. Innerhalb der Schleife werden diese Eigenschaften nun der Reihenfolge nach durchgegangen und die Werte der Eigenschaften der Variablen c hinzugefügt. Zum Schluss wird c ausgegeben.
Verwendung von Ereignissen
Javascript
Innerhalb von Javascript beziehungsweise Jscript können Events wie ganz normale Eigenschaften eines Objekts notiert werden. Man notiert dazu das jeweilige Objekt, einen Punkt (.) und das jeweilige Event. Die meisten Ereignisse können jederzeit abgebrochen werden, indem man ihnen den Wert false zuweist.
Des Weiteren kann eine Funktion oder eine Methode eines Objekts übergeben werden, die zum Beispiel prüft, ob das Ereignis stattfinden soll oder nicht, und demnach true oder false an das Ereignis zurückgibt. Wichtig ist, dass eine Funktion ohne Parameter aufgerufen wird, wobei sich aber Javascript und Jscript ein wenig unterscheiden:
Beide Sprachen erlauben es zwar nicht, eine Funktion mit Parameter aufzurufen, Javascript übergibt jedoch automatisch einen Parameter an die aufgerufene Funktion. Dieser Parameter ist vom Namen her frei wählbar und ist vom Typ des Javascript-Event-Objekts. Dazu muss die Funktion bei der Zuweisung zu einem Ereignis ohne Klammern und ohne Parameter notiert werden. Die Funktion an sich sollte dann aber einen beliebigen Parameter erhalten. Das übergebene Objekt enthält dann je nach Art des Ereignisses bestimmte Eigenschaften, die das Ereignis kennzeichnen.
Jscript hingegen erwartet, dass die Funktion sowie die Zuweisung keine Parameter enthalten. Zusätzlich müssen alle Ereignisnamen komplett klein geschrieben werden, also ondblclick statt onDblClick. Es übergibt alle Eigenschaften des Ereignisses an das globale Objekt window.event.
Um Fehlern vorzubeugen, wird dazu geraten, eine Browserabfrage vor die Ereigniszuweisung zu setzen, um herauszufinden, um welche Sprache es sich handelt, und gegebenenfalls reagieren zu können. Ein Beispiel:
/* JavaScript ... */
function CheckFormular(Ereignis) {
if(Ereignis.type == 'submit') {
if(document.meinFormular.Textfeld.value == '')
{return(false);}
} }
document.meinFormular.onSubmit = CheckFormular;
/* JScript ... */
function CheckFormular() {
if(window.event.type == 'submit') {
if(document.meinFormular.Textfeld.value == '')
{return(false);}
} }
document.meinFormular.onsubmit = CheckFormular;
Erklärung: Im Beispiel wird dem Formular meinFormular das Ereignis onSubmit zugewiesen. Wird das Ereignis ausgelöst, wird also das Formular abgesendet, so wird die Funktion CheckFormular( [Ereignis]) aufgerufen. Innerhalb der Funktion wird abgefragt, ob es sich bei dem Aufruf der Funktion um das Absenden eines Formulars handelt, also ob onSubmit ausgelöst wurd. Ist dies der Fall, wird geprüft, ob in das Inputfeld Textfeld etwas geschrieben wurde oder nicht. Ist es leer, so wird false an das Ereignis zurückgegeben und das Absenden des Formulars somit verhindert.
Javascript schnell fehlerfrei
Javascript
Die berüchtigte Fehlermeldung ? ist kein Objekt kennt jeder, der mit Javascript hantiert. Die häufigste Ursache Für diese Fehlermeldung liegt in einer falschen Definition. Wird ein Skript direkt im Head-Bereich untergebracht, so wird es ausgeführt, sobald es geladen ist. Oft ist der Rest der Seite aber noch nicht so weit. Wird versucht, mit Javascript auf HTML-Elemente zuzugreifen, die noch nicht geladen wurden, zeigt der Browser eine Fehlermeldung.
Um das zu vermeiden, bringt man sein Skript entweder am Ende des HTML-Dokuments unter oder deklariert eine eigene Funktion für einen gezielten Aufruf. Diese kann dann zum Beispiel im -Tag mit onload= “meinefunktion()” aufgerufen werden. Der onload-EventHandler startet sie erst, wenn die Seite auch wirklich komplett eingeladen wurde.
Javascript Stylesheets (JSSS)
Javascript
Um Javascript Stylesheets (JSSS) in HTML-Dokumenten zu verwenden, muss lediglich der type-Wert des style-Elements in den Wert text/javascript geändert werden. Alle Javascript-Stylesheet-Angaben können dann innerhalb des style-Elements notiert werden. Ein Beispiel für die Verwendung von Javascript Stylesheets:
Mehrere Frames gleichzeitig ändern
Javascript
Ein in diversen Foren häufig diskutiertes Thema zu Javascript ist der Wechsel von mehreren Frames gleichzeitig. Angenommen Sie haben ein Frameset mit den drei Frames Hauptseite, Navigation und Überschrift. Klickt der Besucher dann im Navigations-Frame auf einen Link, soll sich natürlich zum einen die Hauptseite ändern. Zum anderen soll sich aber auch die Überschrift mit verändern. Javascript kann hier helfen. Der Zugriff auf einen Frame erfolgt in Javascript über das parent– oder top-Objekt beziehungsweise über window.frames. Sollen zwei Frames gleichzeitig geändert werden, verwenden Sie das onclick-Ereignis und weisen ihm eine Funktion (hier Wechsle) zu. Damit nicht für jeden Link eine neue Funktion geschrieben werden muss, übergeben Sie der Funktion die zwei zu ladenden URLs. Hier ein Beispielskript:
function Wechsle(a,b)
{
top['Hauptseite'].document.location.href = a;
top['Ueberschrift'].document.location.href = b;
}
Das Skript kommt in den head-Bereich der Seite, in der auf die Links geklickt wird, im konkreten Beispiel also in die Frame-Seite mit der Navigation.
Der Aufruf kann dann zum Beispiel mit folgendem Code erfolgen: