Einführung in Javascript


von Prof. Jürgen Plate


Einführung in Javascript

Inhalt

  1. Einführung in die Programmierung
  2. Variable
  3. Anweisungsstrukturen
  4. Objekte
  5. Funktionen
  6. Arrays (Felder)
  7. Event Handler
  8. Das Image-Objekt
  9. Weitere Informationen
  10. Beispiele

JavaScript ist eine von Netscape entwickelte Script-Sprache mit begrenzten Fähigkeiten. Sie hat im Grunde mit Java nur einen Namensteil gemeinsam. Die Sprache lehnt sich in der Syntax an die von Sun Microsystems entwickelte Programmiersprache Java an. JavaScript ist jedoch anspruchsloser im Aufbau als Java, eingeschränkter in den Möglichkeiten und für andere Zwecke gedacht. JavaScript ist im Gegensatz zu Java eine unmittelbare Ergänzung und Erweiterung zu HTML. In diesem Kapitel werden die Grundlagen der Sprache und Beispiele für die Anwendung in Webseiten gezeigt. Ein umfassender Programmierkurs würde jedoch den Rahmen dieses Kurses sprengen. Auch wird vorausgesetzt, daß der Leser schon einmal mit einer Programmiersprache in Berührung gekommen ist. Für erweiterte Kenntnisse sei deshalb auf die Literatur verwiesen. JavaScript bietet sich für folgende Zwecke an:

Anmerkung: An etlichen Stellen im Script finden Sie folgenden "Button",

Ausprobieren

mit dem Sie die besprochenen Sprachkonstrukte ausprobieren können. Es wird ein neues Fenster mit dem Beispiel geöffnet. Um zum Text zurück zu gelangen, schließen Sie einfach das Browserfenster.

1 Einführung in die Programmierung

JavaScript-Programme werden im Gegensatz zu Java-Programmen direkt in der HTML-Datei notiert. Sie werden auch nicht - wie Java-Programme - compiliert, sondern als Quelltext zur Laufzeit interpretiert. Dadurch bleibt JavaScript unkompliziert für den Programmierer, doch kritisch für den Anwender. Das Interpretieren von Quellcode ist ungleich langsamer als das Interpretieren von compiliertem Code. Deshalb ist JavaScript nur für kleine und einfache Programmabläufe sinnvoll. Da kein Compilierungslauf und somit keine Fehlerprüfung stattfindet, gibt es bei JavaScript auch keinen Schutz vor schweren Programmfehlern, z.B. vor "Endlosschleifen", die beim Anwender zum Systemabsturz führen können. Die Haupteigenschaften der Sprache sind also:

JavaScript-Code kann an verschiedenen Stellen innerhalb einer HTML-Datei vorkommen. Wichtig ist zu unterscheiden, welche JavaScript-Anweisungen an welchen Stellen innerhalb einer HTML-Datei möglich sind. Das folgende Komplettbeispiel zeigt typische Möglichkeiten der Einbindung von JavaScript-Anweisungen in einer HTML-Datei. Studieren Sie das folgende Beispiel aufmerksam und lesen Sie anschließend die Erläuterungen dazu. Zur besseren Orientierung enthält das Beispiel Verweise zu den entsprechenden Erläuterungen.

      <html>
      <head>
      <title>Beispiel mit JavaScript</title>
  (1) <script language="JavaScript">
      <!-- 
  (2) function MeinKommentar(Text,DateidatumJaNein)
        {
  (3)   if (DateidatumJaNein==0)
          alert(Text);
        else
          alert(Text + '\nDatum/Uhrzeit: ' + document.lastModified);
        }
      // -->  
      </script>
      </head>

  (4) <body onload="MeinKommentar('Hallo Alter!',0)">
  (5) <a href="http://www.netzmafia.de/index.html" 
      onClick="MeinKommentar('Der Link zu www.netzmafia.de
      funktioniert nicht mehr! Wird in Kuerze aktualisiert!',1)">
      Netzmafia-Server</a>
      <p>
  (6) <a href="index.htm" onMouseOver="window.status='Zur 
      Homepage zurueckspringen!';return true">Zur&uuml;ck</a>
      </body>
      </html>

Das voranstehende Beispiel zeigt eine komplette HTML-Datei. Beim Aufrufen der Datei erhält der Anwender einen Hinweis am Bildschirm:

Diese Ausgabe wird durch (4) ausgelöst. Mit "onload" wird veranlaßt, daß bei Laden der Seite die Alertbox angezeigt wird. Ein JavaScript wird durch die Tags

<SCRIPT> ...  </SCRIPT>

eingeschlossen. Optional kann im öffnenden Tag die Sprache angegeben werden. Die Ausgabefunktion selbst wird im Header des Dokuments definiert (1 und 2). Die Positionierung im Header hat zwei Gründe: Erstens wird beim Laden des Dokuments dieser Teil zuerst geladen. Somit stehen die Funktionen sofort innerhalb des Dokumenten-Body zur Verfügung. Außerdem wird der Text nicht angezeigt. Damit nicht doch irgendein Browser auf die Idee kommt, den Quelltext zu zeigen, wird er in HTML-Kommentare eingeschlossen.

Die Funktion "MeinKommentar" (2 und 3) ist recht einfach gehalten (auf die einzelnen Strukturen der Programmiersprache kommen wir noch zu sprechen). Sie besitzt einen Parameter, der die Form der Ausgabe bestimmt.

Der Body enthält im Beispiel der Einfachheit halber nur zwei Verweise: einen zu "www.netzmafia.de" und einen zur eigenen Projekt-Homepage. Nun hat der Autor festgestellt, daß der Verweis zu "www.netzmafia.de" nicht mehr funktioniert. Die neue URL-Adresse hat er noch nicht herausbekommen. Der Verweis soll für den Anwender jedoch sichtbar bleiben. Mit Hilfe von JavaScript erreicht man, daß der Anwender beim Anklicken dieses Verweises eine Hinweismeldung erhält, die ihn über den Sachverhalt informiert (der JavaScript-Code wird direkt in das Link eingebettet (5) und beim Anklicken aktiviert):

In der Hinweismeldung steht zur Kontrolle auch, wann die aktuelle HTML-Datei zum letzten Mal bearbeitet wurde - gesteuert über den Parameter der Funktion).

Der zweite Verweis im HTML-Dokument (6) ist ein Rücksprung zur eigenen Homepage. Wenn der Anwender mit der Maus über den Verweis fährt, wird zusätzlich zum Verweistext in der Statuszeile des WWW-Browsers ein Langtext ausgegeben, der den Verweis näher kommentiert:

Die dritte Möglichkeit, JavaScript in einer HTML-Seite unterzubringen, die Verknüpfung mit einen Formular, werden Sie später kennenlernen.

Anstatt das komplette JavaScript-Programm zwischen <SCRIPT language="JavaScript"> ... </SCRIPT> zu schreiben, kann man das Programm auch in eine eigene Datei (hier z.B. "xyz.js") schreiben und aus der HTML-Datei heraus hinzuladen:

<script language="JavaScript" src="xyz.js" type="text/javascript"></script>

Die Datei sollte die Endung ".js" haben, und es gelten die gleichen Regeln beim Einbinden wie bei Bildern. Durch diese Art der Einbindung ist es möglich, JavaScript-Programme in mehreren HTML-Dateien gleichzeitig zu verwenden und zentral zu verwalten.

Auch für die Programmierung brauchen Sie keine anderen Hilfsmittel wie beim Schreiben von HTML-Dokumenten. Wenn das Script fehlerhaft ist, liefert der Browser eine Erläuterung der Fehlerstellen. Sie sollten auf jeden Fall Ihre fertiken Scripts mit verschiedenen Browsern testen, um sicher zu sein, daß es bei allen "Kunden" klappt. Nichts ist ärgerlicher, als wenn man auf einer Webseite mit einem JavaScript-Error abgefertigt wird.

Nach diesem kleinen Ausflug in JavaScript wenden wir uns nun detailliert den Elementen der Sprache zu.

2 Variable

Grundsätzliches: Im Gegensatz zu HTML wird bei JavaScript die Groß- und Kleinschreibung strikt unterschieden! Variablen- und Funktionsnamen müssen folgendern Bedingungen genügen:

Die Definition von Variablen verläuft bei JavaScript recht freizügig. JavaScript unterscheidet nur zwei Arten von elementaren Variablen, Zahlen und Zeichenketten, und versucht herauszufinden, von welchem Typ eine Variable ist. Betrachten Sie dazu die folgenden Wertzuweisungen:

     i = 10;
     j = 1.3;
     a = "Hallo";

Die Variablen i und j werden als Zahlen interpretiert, die Variable a als Zeichenkette. Kurz gesagt, alles was mit Gänsefüßchen eingeschlossen wird, ist eine Zeichenkette. Variable werden mittels des reservierten Worts "var" definiert. Daher sollte man obiges Beispiel eigentlich folgendermaßen schreiben (wenn es das erste Auftreten der Variablen i, j und a ist):

     var i = 100;
     var pi = 3.14;
     var str = "Hallo";

Eine der Ungenauigkeiten von JavaScript ist, daß "var" nicht unbedingt verwendet werden muß. Im obigen Beispiel werden die Variablen definiert und es werden ihnen sofort Werte zugewiesen. Man kann Variable aber auch nur definieren und ihnen erst später Werte zuweisen:

     var i, j, a;
     txt = "Hallo";

Alle JavaScript-Kommandos, die wir bisher betrachtet haben, werden als Anweisungen bezeichnet. JavaScript-Anweisungen werden grundsätzlich mit einem Strichpunkt abgeschlossen. (Bis auf die letzte Anweisung, aber es ist besserer Programmierstil, alle Anweisungen mit Strichpunkt abzuschließen.) Weist man einer Variablen eine Zahl zu, so kann mit dieser Variablen gerechnet werden, d.h. man kann addieren, subtrahieren, usw. Enthält die Variable hingegen eine Zeichenkette, so kann eine weitere Zeichenkette angehängt werden - oder andere Zeichenketten-Operationen durchgeführt werden. Das Programm:

     var i = 1;
     var j = i + 5;
     alert(j);

Gibt als Ergebnis den Wert 6 aus. Dagegen liefert das Programm

     var i = "1";
     var j = i + 5;
     alert(j);

der Wert "15", denn die Zeichenkette "5" wird durch das "+"-Zeichen and die Zeichenkette "1" angehängt. Zeichenketten werden übrigens immer in Anführungszeichen eingeschlossen.

Zahlen-Variablen können entweder ganze Zahlen oder "Gleitpunktzahlen" enthalten. Diese Zahlen entsprechen unseren gebrochenen Zahlen mit Nachkommastellen, wobei in JavaScript die Zahlen mit Punkt geschrieben werden, also z.B. 1.57. Neben Addition und Subtraktion gibt es Multiplikation, Division und Division mit Rest. Dazu ein Beispiel:

     var a = 2 * 7; /* Ergebnis: 14 */
     var b = a / 3; /* Ergebnis 4.666666666666667 */
     var c = a % 4; /* Ergebnis 2: Rest von 14 / 4 */
 

Damit kennen Sie auch gleich die Kommentar-Begrenzer von JavaScript, "/*" und "*/".

Oft erhöht oder verringert man den Wert einer Variablen um den Wert 1. Statt "a = a + 1;" kann man noch kürzer "a++;" schreiben. Analog dazu wird "a--;" für "a = a - 1;" eingesetzt. Dazu gibt es noch die Varianten "++a;" und "--a;". Der Unterschied liegt im Zeitpunkt der Werte-Änderung. Bei "alert(a++);" wird zuerst der Wert der Variablen a ausgegeben und danach ihr Wert um eins erhöht. Bei "alert(++a);" wird der Wert der Variablen a zuerst um eins erhöht, danach wird sie ausgegeben.

Mit Zahlen können Sie rechnen, aber was kann man mit Zeichenketten (Strings) machen? Ein String beginnt und endet in JavaScript immer mit einem Anführungszeichen. Beispiele:

     "London"
     " "
     ""

Im ersten String steht einfach nur Text, im zweiten String steht nur ein Leerzeichen, und im dritten String steht gar nichts, es ist der sogenannte "Nullstring". Strings kann man vergleichen, hintereinanderhängen ("Haus" + "und" + "Hof" ergibt dann "Haus und Hof" oder manipulieren. Einige Stringfunktionen:

In Zeichenketten lassen sich auch noch bestimmte Sonderzeichen verwenden:

3 Anweisungsstrukturen

Die Syntax von JavaScript-Programmen ist stark an Java und C angelehnt:

Es gibt nur wenige Anweisungsstrukturen. Die erste ist die bedingte Anweisung oder Verzweigung. Abhängig von einer Bedingung witd im Programm verzweigt. Nur wenn die Bedingung "wahr" ergibt, werden die Anweisungen hinter dem "if"-Teil ausgeführt.

             if (Bedingung) 
               { 
               Anweisungen
               }

Die Bedingung kann auch zweiseitig sein, also einen "wahr"- und einen "falsch"-Teil enthalten:

             if (Bedingung) 
               { 
               Anweisungen des wahr-Teils
               }
             else 
               {
               Anweisungen des falsch-Teils
               }

Verzweigungen können auch beliebig verschachtelt werden, man sollte aber auf eine korrekte Klammerung der Blöcke achten. Die Bedingung beim "if" ist meist ein Vergleich zweier Werte oder Variablen. Werden String-Variablen (Zeichenkette) verglichen, so gilt die lexikographische Ordnung. Folgende Vergleichsmöglichkeiten stehen zur Verfügung: < kleiner als <= kleiner oder gleich > größer >= größer oder gleich == gleich != ungleich Achtung: Eine der häufigsten Fehlerquellen ist das Verwechseln von Vergleich (==) und Zuweisung (=). Die wichtigsten Möglichkeiten, um zwei Bedingungen zu verknüpfen, sind die "und"-Verknüpfung mit "&&" und die "oder"-Verknüpfung mit "||". Beispielsweise wollen wir testen, ob eine Zahl x zwischen 0 und 10 liegt:

             if ( x>=0 && x<=10 ) 
               {
               alert("x liegt zwischen 0 und 10.");
               }

Oder wir testen, ob x gleich 2 oder 4 ist:

             if ( x==2 || x==4 ) 
               {
               alert("x ist gleich 2 oder x ist gleich 4.");
               }

Eine Vereinfachung von tief verschachtelten Verzweigungen ist manchmal mit der "case"-Anweisung möglich. Hier sind jedoch keine beliebigen Bedingungen möglich, sondern nur der Vergleich eines Variableninhaltes mit verschiedenen (konstanten) Werten:

             switch(x) 
               {
               case 1:
                 alert("x ist 1");
                 break;
               case 2:
                 alert("x ist 2");
                 break;
               case 3:
                 alert("x ist 3");
                 break;
               case 4:
                 alert("x ist 4");
                 break;
               case 5:
                 alert("x ist 5");
                 break;
               default:
                  alert("x ist anders");
                  break;
               }

Die Marke "default" trifft auf jeden Wert zu, weshalb sie auch ganz zum Schluß kommt, denn bei der case-Anweisung wird von oben her verglichen, bis eine Marke "passt". Die Anweisung "break" sorgt dafür, daß die case-Anweisung an dieser Stelle verlassen wird. Fehlt sie, werden die folgenden Anweisungen abgearbeitet. Dazu ein Beispiel:

             switch(x) 
               {
               case 1:
               case 3:
               case 5:
                 alert("x ist ungerade");
                 break;
               case 2:
               case 4:
               case 6:
                 alert("x ist gerade");
                 break;
               default:
                  alert("x ist anders");
                  break;
               }

Alle weiteren Anweisungsstrukturen von JavaScript sind Wiederholungsanweisungen oder Schleifen. Die for-Schleife ist die am häufigsten verwendete Wiederholungsanweisung. Sie besitzt eine Initialisierung (z. B. Setzen des Anfangswertes einer Zählvariablen), eine Abbruchbedingung (z. B. Endwert der Zählvariablen) und eine Anweisung zum Hochzählen. Alle drei Anweisungen werden zusammen in einer Zeile festgelegt, wobei keine zwingend notwendig ist. Zum Beispiel:

             for (i=0; i<10; i++) 
               {
               document.write(i+"<BR>");
               }

Die Befehlsfolge schreibt die Werte der Variablen i von 0 bis 9 direkt in die HTML-Seite (an der Stelle, an der der Befehl steht). (Der Befehl "document.write" gibt eine Zeichenkette in die HTML-Seite aus. Hätte ich "alert" verwendet, müßten Sie nun bei 10 Alert-Boxen den OK-Button anklicken). Die Schleife bezieht sich auf den gesamten Block, der durch die Klammern { und } bezeichnet ist.

Mit anderen Wiederholungsanweisungen kann man den gleichen Effekt erreichen. So gibt es in JavaScript die while-Schleife als universelle Wiederholungsanweisung. Das obige Beispiel läßt sich damit folgendermaßen formulieren:

             i=0;
             while (i<10) 
               {
               document.write(i+"<BR>");
               i++;
               }

Man nennt diese Schleife auch "abwweisende Wiederholungsanweisung", weil zuerst die Bedingung geprüft und dann der Block der Schleife durchlaufen wird. Es geht aber auch andersrum:

             i=0;
             do 
               {
               document.write(i+"<BR>");
               i++;
               } 
             while (i<10);

Diese Schleife nennt sich "nichtabweisende Wiederholungsanweisung", weil - egal wie der Wert von i zu Beginn ist - die Schleife mindestens einmal durchlaufen wird. Zum Beenden bzw. Abkürzen von Schleifen dienen die Befehle "break" oder "continue". Mit "break" wird die Schleife sofort verlassen. Mit "continue" kann man erreichen, daß ein neuer Schleifendurchlauf gestartet wird.

4 Objekte

Nachdem wir den Basis-Wortschatz von JavaScript kennengelernt haben, betrachten wir die objektorientierten Aspekte von Javascript. Objekte sind Elemente der Sprache, auf die wir - vereinfacht gesagt - mit Namen (d.h. Variable zeigen auf Objekte) zugreifen können. Beispiele für Objekte in JavaScript sind das Browser-Fenster, ein HTML-Dokument, ein HTML-Eingabe-Formular, ein Formular-Button oder ein Hypertext-Verweis. Objekte bestehen aus 3 verschiedenartigen Komponenten:

Eigenschaften von Objekten können wiederum Objekte sein. Zum Beispiel ist ein HTML-Formular eine Eigenschaft des HTML-Dokumentes in dem es sich befindet. Ein Formular-Button ist eine Eigenschaft eines HTML-Formulars. Typische Objekte in JavaScript sind zum Beispiel:

Wollen Sie auf ein Objekt zugreifen, so gelten folgende Regeln:

Betrachten Sie folgenden Ausschnitt aus einem HTML-Dokument:

 ...
 <form name="formular" ...>
  <input type="text" name="eingabe" ...>
  ...
 </form>
 ...

Sie können auf den Eintrag im Textfeld "eingabe" zugreifen, indem Sie vom Dokument über das Formular zum Eingabefeld gehen. In JavaScript lautet der Zugriff "document. formular. eingabe". Wollen Sie den Inhalt des Formulars abfragen, so müssen wir die Eigenschaft "value" des Eingabefeld-Objekts mit "document.formular.eingabe.value" abfragen. Die Eigenschaften eines Objektes können immer abgefragt werden, manchmal können Sie auch verändert werden.

Ein wichtiges Objekt in JavaScript ist "document", das Informationen über das HTML-Dokument, das gerade betrachtet wird, enthält. Man kann z.B. die Hintergrundfarbe des Dokumentes über "document.bgColor" erfragen oder einen roten Hintergrund durch die Anweisung

 document.bgColor = "#FF0000";

erzeugen. Ein Beipiel für eine Funktion, die speziell für das Objekt "document" existiert, habeb Sie schon kennengelernt:

 document.write("Hallo");

Dieser Befehl schreibt an der Stelle, an der er steht, den Text "Hallo". Normalerweise muß man nicht alle Ereignisse, Methoden und Eigenschaften aller JavaScript-Objekte auswendig kennen. Fast alle Bücher über JavaScript beinhalten eine Beschreibung der vorhandenen Objekte. Auch auf der Webseite von Netscape befindet sich eine umfassende englischsprachige Dokumentation.

Das Objekt "window"verwendet der Browser, um Inhalte anzuzeigen. Zum Beispiel öffnet der folgende Befehl ein neues Fenster mit dem entsprechenden URL:

       window.open("http://www.netzmafia.de");

Man kann dem neuen Fenster auch einen Namen geben, um mit dem target-Befehl in Frames darauf zugreifen zu können:

       window.open("http://www.netzmafia.de","Neu");

Zur window-open-Funktion gibt es eine Menge zusätzlicher Optionen, die in einer Zeichenkette übergeben werden können, z. B.:

       window.open("http://www.netzmafia.de","Neu","width=200,height=300");

In allen Browsern verfügbare Optionen sind:

Bei Angabe von mehreren Optionen werden diese jeweils durch Komma voneinander getrennt. Ist keine Option angegeben, werden alle Schalter standardmäßig auf "yes" gesetzt. Wenn mindestens eine Option angegeben wird, werden alle nicht angegebenen Optionen auf "no" gesetzt. Zulässige Werte für die Schalter sind "yes" oder "1" bzw. "no" oder "0". Wenn ein Schalter ohne Wert angegeben wird, dann wird "yes" angenommen. Das folgende Skript kann Fenster auf- und zumachen:

     <script language="JavaScript">
     function mini(text)
       {
       klein=window.open("","MiniFenster","menubar=no,width=250,height=150");
       klein.document.open();
     
       klein.document.write("<html><body><h1>Minifenster</h1>");
       klein.document.write(text + "<br></body></html>");
       klein.document.close();
       }
     </script>

Der Aufruf sieht dann beispielsweise so aus:

     <form>
     <input type="button" value="Minifenster auf"
       onclick="mini('Klein aber fein, so soll es sein!')"><BR>
     <input type="button" value="Minifenster zu" 
       onclick="klein.close()"><BR>
     </form>

Wollen Sie das aktuelle Browser-Fenser auch zumachen? Dazu genügt folgende Befehlssequenz:

     <form>
     <input type=SUBMIT value="Close"
       onClick="window.close();return false;">
     </form>
Ausprobieren

Wird innerhalb der Ausgabe mit "write" ein Anführungszeichen benötigt, können wir das mit der Zeichenfolge \" erreichen. Durch den Backslash wird das Gänsefüßchen von JavaScript nicht als Anführungszeichen ausgewertet, sondern es wird das Zeichen" an die HTML-Seite weitergeleitet. Man nennt dies Maskieren von Sonderzeichen. Bei in HTML eingebetteten Befehlen kann man auch das einfache Anführungszeichen ( ' ) verwenden.

Man kann auch eine Auswahlbox zusammen mit Javascript verwenden. Betrachten Sie folgendes Formular:

     <form name="auswahl">
     <select name="links" onChange="surfto()">
     <option>Themen
     <option value="1">Thema 1
     <option value="2">Thema 2
     <option value="2">Thema 3
     </select>
     </form>

Beim Anklicken öffnet sich ein Menü:

Es ist kein Extra-Klick "GO" oder so erforderlich; nach Anklicken eines Menüpunktes wird sofort zur ausgewählten Seite verzweigt. Im Script müssen die Ziele angegeben werden. Es lautet beispielsweise:

     <script type="text/javascript" language="JavaScript">
     function surfto()
       {
       if (document.auswahl.links.selectedIndex=="1")
         {window.location.href="ziel-1.html" }
       if (document.auswahl.links.selectedIndex=="2")
         {window.location.href="ziel-2.html" }
       if (document.auswahl.links.selectedIndex=="3")
         {window.location.href="ziel-3.html" }
       }
     </script>

Die Beispielseite ist auf diese Weise gestaltet.

Man kann in einem Formular auch Rechnen. Das Formular sieht dann so aus:

     <form>
     Bitte einen Rechenausdruck eingeben: 
     <input type="text" name="expr" size=15>
     <input type="button" value="Ausrechnen" onclick="ausrechnen(this.form)">
     <br>
     Ergebnis: <input type="text" name="result" size=15>
     <br>
     </form>

Im Browser sieht man zwei Textfelder und einen Button:

Dazu gehört dann ein winziges Skript:

    <script language="JavaScript">
    function ausrechnen(form) 
      {
      dmark = document.Beispiel.DM.value;
      euro = dmark / 1.95583;
      form.result.value = eval(form.expr.value);
      }
    </script>

Zum Ausprobieren wurde das Programm etwas modifiziert.

Ausprobieren

Bleiben wir noch etwas beim window-Objekt. Sie haben bisher zwei Anwendungen kennengelernt "window.document..." bezieht sich auf das Fenster, in dem sich die aktuelle HTML-Datei befindet. Mit der Befehlsfolge

       fenster = new window("");
       fenster.document...

wird ein weiteres Fenster geöffnet, auf das wir mit dem Namen "fenster" zugreifen können. Ein window-Objekt hat einige nützliche Eigenschaften:

Es gibt noch weitere Eigenschaften, die aber noch nicht in jedem Browser implementiert sind. Wenden wir uns nun einigen interessanten Methoden des window-Objekts zu: Mit den Methoden focus() und blur() kann ein Fenster zum aktuellen Fenster (d. h. im Vordergrund) gemacht werden, bzw. es kann wieder in den Hintergrund gesetzt werden.

 
     fenster=window.open(); 
     function foc(f) 
       { 
       f.focus();
       } 
     function bl(f) 
       { 
       f.blur(); 
       } 
       
       ... 
       
       <input type=button value="a" onClick="foc(fenster)"> 
       <input type=button value="b" onClick="bl(fenster)"> 

Sie haben bereits alert() kennengelernt. Dies ist eine Methode des window-Objekts. Daneben gibt es noch:

Man kann von JavaScript aus auch auf Objekte der gesamten HTML-Seite zugreifen. Die verschiedenen Objekte eines Typs werden dabei (von 0 beginnend) durchnumeriert. So können Sie beispielsweise das dritte Bild einer Seite mit "window.document.images[2]" ansprechen. Wozu so etwas gut sein kann, zeigt das Beispiel mit den dynamischen Buttons weiter unten.

Das Math-Objekt

Neben den elementaren Arithmetik-Operationen wie Addieren etc. gibt es auch weitere Rechenfunktionen. Diese sind im Objekt "Math" zusammengefaßt. In "Math" sind die folgenden Zahlenkonstanten definiert:

Höhere mathematische Operationen werden durch die folgenden Methoden realisiert:

Will man beispielsweise den natürlichen Logarithmus der Zahl 10 berechnen, so lautet der Befehl Math.log(10)".

5 Funktionen

Bei den vorausgegangenen Beispielen haben Sie bereits die Funktionen kennengelernt. In diesem Kapitel soll nun etwas genauer auf diese Anweisungsstruktur eingegangen werden. Eine Funktion ist primär die Zusammenfassung einer Anweisungsfolge unter einen Namen. Sie lassen sich dann an beliebiger Stelle im Programm (auch mehrfach) aufrufen. Insbesondere bei Events (Ereignissen), die im Anschluß besprochen werden, ist es lästig und unübersichtlich, hinter jeden Event ein gesamtes JavaScript-Programm zu schreiben. Kommt der gleiche Code mehrfach vor, ist eine Funktion auch ökonomischer. Über Parameter kann eine Funktion mit unterschiedlichen Werten arbeiten. Die Definition einer Funktion sieht prinzipiell so aus:

     <script language="JavaScript">
     function tuwas() 
       {
       alert("Hier kommt die Maus!");
       ...
       }
     </script>

Diese Funktionsdefinition kann an einer beliebigen Stelle des HTML-Dokuments stehen. Damit die Funktionsdefinitionen auf alle Fälle bereitstehen, wenn die HTML-Seite angezeigt werden, packt man die Definition meist zwischen <HEAD>...</HEAD>. Diese Funktion kann dann überall im Dokument verwendet werden, z. B. als Reaktion auf ein Ereignis:

     <input type="button" value="Drück mich" onClick="tuwas();">

Bei der Definition von Funktionen ist zu beachten:

Ein einfaches Beispiel für die Verwendung von Parametern ist:

     function warnung(text) 
       {
       alert("WARNUNG: " + text);
       }

Diese Funktion kann man zum Beispiel folgendermaßen verwenden:

     meldung = "Hier kommt die Maus!";
     warnung(meldung);
     warnung("Die Katze wartet schon!");

Natürlich können auch mehrere Parameter verschiednene Typs übergeben werden. Diese werden durch Komma getrennt:

      function ausgabe(text, zahl) 
        {
        alert(text + zahl);
        }

        ...
      
      ausgabe("Die Kreiszahl ist: ",3.1415);

Bei einer Funktion werden normalerweise alle Anweisungen bis zur geschweiften Klammer ausgeführt. Man kann aber den Programmablauf mitten in einer Funktion mit der Anweisung "return" abbrechen:

     function wumpa(eingabe) 
       {
       if (eingabe < 0) 
         {
         return; /* Verlassen der Funktion */
         } 
       else 
         {
           ...
         }
       }

Es kann auch irgendein Wert in einer Funktion berechnet (oder irgendwie erzeugt) werden, der dann zurückgegeben wird:

      function prozent(wert, prozentsatz) 
        {
        var x = wert*(1.0 + prozentsatz/100.0);
        return(x);
        }
         ...

       MWSt = prozent(NettoPreis,16);
       alert(MWSt);
         ...

Beachten Sie die Definition "var x = ...". Weiter oben wurde gesagt, daß bei der Definition von Variablen die Variablendefinition mit "var" nicht unbedingt verwendet werden muß. In Funktionen ist hat "var" jedoch eine Bedeutung: Wenn, wie in "prozent", die Variable x mit "var" definiert wird, so ist die Variable x nur innerhalb der Funktion "prozent" bekannt. Außerhalb der Funktion gilt die Variable x als nicht definiert. Notwendig ist dies zum Beispiel, wenn eine Variable x im Hauptprogramm definiert ist (die Variable ist global), in einer Funktion aber auch eine Variable x verwendet werden soll, die aber nicht identisch mit der Variablen x des Hauptprogramms sein soll. Mit dem "var"-Befehl in der Funktion wird eine lokale Variable x definiert, die nur in der Funktion Gültigkeit hat.

Beispiel: Ein einfacher Rechner

Die folgende HTML-Seite zeigt ein Formular mit zwei Feldern ("expr" und "result") sowie einem Button. Wird im Feld "expr" ein beliebiger Rechenausdruck eingegeben, erscheint im Feld "result" das Ergebnis, sobald der Button "Berechnen" angeklickt wird. In der Datei finden Sie nicht nur eine relativ einfache Funktion, die nur aus dem Aufruf von "eval" zur Auswertung eines arithmetischen Ausdrucks besteht. Interessant ist hier, daß nicht auf Parameter zugegriffen wird, die per "var" definiert wurden, sondern auf Objekte des Formulars. Genau darin liegt auch die große Stärke von JavaScript.

<html>
<head>
<title>JavaScript: Beispiel</title>

<script LANGUAGE="JavaScript">

function compute(form)
  {
  form.result.value = eval(form.expr.value)
  }
</script>

</head>
<body>
<h1>JavaScript-Rechner</h1>
Hier wird beim Dr&uuml;cken auf den &quot;Berechnen&quot;-Button eine
Messagebox ge&ouml;ffnet. Die Funktion &quot;compute&quot; wertet die
Eingabe aus und zeigt das Ergebnis.
<p>

<form>
Eingabe:&nbsp; <input TYPE="text" NAME="expr" SIZE=15 >
<input TYPE="button" VALUE="Berechnen" ONCLICK="compute(this.form)">
<br>
Ergebnis: <input TYPE="text" NAME="result" SIZE=15 >
</form>

</body>
</html>
Ausprobieren

Beispiel: Uhr

Hier kommt ein neuer Aspekt ins Ziel, die Zeit. Ein erster Ansatz, ständig in einer Schleife die Uhrzeit abzufragen und anzuzeigen würde zuviel Rechenzeit aufnehmen - insbesondere, da die Uhrzeit sich nur alle Sekunde ändert. Für zeitlich gesteuerte Abläufe stellt JavaScript die Methode "setTimeout()" zur Verfügung. Als erster Parameter wird eine Funktion angegeben, die nach Ablauf der Wartezeit ausgeführt werden soll, als zweiter Parameter wird die Wartezeit in Millisekunden erwartet. Mit "clearTimeout()" kann der Timeout wieder gelöscht werden. Die Funktion "dodate" ruft nun die aktuelle Uhrzeit (und das Datum) ab und dann "setTimeout". Als auszuführende Funktion wird dort wieder "dodate" angegeben und schon läuft die Uhr. Als Anzeigeelemet wird wieder ein Formular verwendet.
Gestartet wird die Uhr mit einer weiteren Funktion "start()", die lediglich das Ausgabeformular für "dodate()" festlegt und "setTimeout()" das erste Mal startet.

<html>
<head>
<title>JavaScript: Beispiel</title>

<script>
var speed = 1000;
var tid = 0;

function dodate()
  {
  f.date.value=new Date();
  tid=window.setTimeout("dodate()",speed);
  }

function start(x)
  {
  f=x;
  tid=window.setTimeout("dodate()",speed);
  }
</script>
</head>

<body>
<h1>JavaScript-Uhr</h1>
Diese Funktion stellt eine kleine Uhr mit Datum dar.
<p>
<FORM name=dateform>
<input name=date size=28 value="">
</FORM>
<script>start(document.dateform);</script>
</body>
</html>
Ausprobieren

Beispiel: Feldlängenprüfung in Formularen

Das folgende Script zeigt, wie man Formulareingaben testen kann. Wird das Formular vor dem Absenden geprüft, spart man sich gegebenenfalls ein mehrfaches Hin-und-her zwischen Server und Client. Natürlich müssen alle Eingaben am Server nochmals auf Plausibilität geprüft werden.

<html>
<head>
<title>JavaScript: Beispiel</title>

<script language="JavaScript">
function checkLength(mytext) 
  {
  var tmplen = mytext.my_name.value.length
  if (tmplen > 10) mytext.len.value = 'zu lang!'
  else if (tmplen < 5) mytext.len.value = 'zu kurz!'
  else mytext.len.value = tmplen
  }
</script>

</head>
<body>
<h1>Feldl&auml;ngenpr&uuml;fung</h1>

<form>
Geben Sie etwas ein und klicken Sie irgendwo auf die Seite.<br>
Eingabe: <input type="text" name="my_name" size=20 
       onChange="checkLength(this.form)"> 
<br>
L&auml;nge: <input type="text" name="len" size=3>
</form>

</body>
</html>

Beispiel: Zwei oder mehrere Frames mit einem Link ansprechen

Mit JavaScript kann man mit einem Link zwei oder mehrere Frames auf einmal ändern. Dazu bedarf es einer Funktion, die im folgenden Beispiel das Ändern zweier Frames ermöglicht.

<script language="JavaScript">
function ZweiFrames(URL1,Fr1Nummer,URL2,Fr2Nummer)
  {  
  parent.frames[Fr1Nummer].location.href=URL1;
  parent.frames[Fr2Nummer].location.href=URL2;
  }
</script>

Innerhalb eines Links wird die Funktion dann wie folgt aufgerufen:

<a href="javascript:ZweiFrames('URL',Frameindex,'URL',Frameindex)">
    Link zum ändern zweier Frames</a>

Für "URL" ist die gewünschte Webseite anzugeben, die dann der Funktion übergeben wird. Frameindex bezieht sich auf die Reihenfolge der definierten Frames in der Frameset-Definition. Der erste definierte Frame hat dabei den Index 0!
Die Angabe "javascript:" im Link ruft die Funktion auf. Innerhalb der Funktion bezieht sich "parent" auf das übergeordnete Fenster, in dem über FRAMESET die einzelnen Frames definiert wurden. In der Client-Objekt-Hierarchie folgt nun die Angabe des anzusprechenden Frames und danach "location", welches als Eigenschaft "href" besitzt. Diese Eigenschaft wird nun durch die übergebene URL-Angabe neu gesetzt.

Ausprobieren

Beispiel: Laufschrift

Hier werden alle bisher verwendeten Sprachelemente vereint. Die Schrift läuft in einer "Input"-Zeile und in der Statuszeile.

<html>
<head>
<title>JavaScript: Beispiel</title>

<SCRIPT LANGUAGE="JavaScript">
var msg = " Lauftext in Statuszeile und Textfeld * ";
var txt = msg;

function lauftext()
  {
  window.document.lauf.text.value = txt;
  self.defaultStatus = txt;
  // Lauftext um ein Zeichen nach links schieben
  txt = txt.substring(1, txt.length) + txt.substring(0, 1);
  // Timeout fuer naechste Ausgabe setzen
  Text=window.setTimeout("lauftext()", 200);
  }

function stop()
  {
  window.clearTimeout(Text);
  window.document.lauf.text.value = '';
  self.defaultStatus = 'JavaScript-Anwendungsbeispiele';
  }
</script>
</head>

<body>
<h1>Laufschrift</h1>

<form name=lauf>
<input type=button onClick=lauftext() value="Lauftext anzeigen">
<input type=button onClick=stop() value="Lauftext aufheben"><p>
<input type=text name=text size=30>
</form>

</body>
</html>
Ausprobieren

6 Arrays (Felder)

Neben den elementaren Datentypen Zeichenkette und Zahl existiert in JavaScript ein Objekt Array. Dies ist eine Liste von Daten, auf die man zugreifen kann, indem man die Nummer des jeweiligen Elementes angeben. Wollen Sie z. B. das erste Element in der Liste "liste" ausgeben, so müssen Sie die Referenz "liste[0]" verwenden. Wie bei Java und C beginnt die Zählung der Arraykomponenten bei 0. Die Anzahl der Elemente in einem Array namens "xyz" ist mit "xyz.length" erhältlich. Wenn man also alle Listenelemente im Feld "xyz" durchlaufen will, geht man folgendermaßen vor:

     for (i=0;i<xyz.length;i++)
       {
       document.write(xyz[i] + "<BR>");
       }

Genauso wie auf Arrayelemente können Sie auch auf Images (<IMG SRC= ...>), Links (<A HREF=...>) und auf Formulare (<FORM> ...</FORM>) in einem Dokument zugreifen. Zum Beispiel erhalten Sie mit

     document.forms[0]

das erste Formular in einer HTML-Seite. Jedes Formular enthält als Unterobjekt ein Array der Eingabefelder. Diese besitzen wiederum eine Eigenschaft"value". Wollen Sie beispielsweise die Eingabe aller Felder im ersten Formular einer HTML-Seite ausgeben, so könnte dies folgendermaßen programmiert werden:

     for (i=0; i<document.forms[0].elements.length; i++)
       {
       document.write(document.forms[0].elements[i].value + "<BR>");
       }

Ebenso kann man auf die Namen und andere Eigenschaften des Formulars zugreifen. Ein Unterobjekt des Objektes "document" ist ein Array der Links, die das Dokument enthält. Die Anzahl der Links auf einer Seite erhalten Sie mit "document.links.length" und die Verweise selbst können Sie durch

     document.links[0];
     document.links[1];
          ...
     document.links[document.links.length-1];

erfragen. Genauso gibt es ein Array namens "images", das die Verweise auf Bilder in einem Dokument enthält.

Auf die Array-Unterobjekte eines Dokuments kann auch noch mit dem Namen des jeweiligen Objektes zugegriffen werden. Für die beiden Objekte des dritten Formulars der Seite:

     document.meinform.elements.length
     document.meinform.eingabe1.value

gibt noch zwei Möglichkeiten, als Array darauf zuzugreifen. Erstens:

     document.forms[2].elements.length
     document.forms[2].elements[0].value

oder

     document.forms["meinform"].elements.length
     document.forms["meinform"].elements["eingabe1"].value

Es sind also auch die Objektnamen zur Auswahl des Arryelementes erlaubt. Diese Möglichkeit beugt Programmierfehlern vor, die entstehen, wenn in der HTML-Seite die Reihenfolge der Formulare oder Eingabefelder verändert wird.

Wenn wir ein eigenes Array benötigen, so muß dieses Array zuerst erzeugt werden:

     var a = new Array();

JavaScript ist zwar nicht vollständig objektorientiert, aber doch objektbezogen. Der Konstructor "new" erzeugt ein neues Objekt, in diesem Fall ein Array. Jedes Objekt hat üblicherweise eine Methode mit dem gleichen Namen wie das Objekt selbst - den sogenannten Konstruktor. Durch Aufruf dieses Konstruktors wird ein neues Objekt von diesem Typ erzeugt, bzw. eine neue Instanz dieses Objekts generiert. Danach kann dieses Feld mit Daten gefüllt werden:

    for (i=0;i<100;i++) a[i] = i*i;

Ein Array kann aber auch gleich bei der Erzeugung vorbelegt werden:

    var a = new Array(1,2,4,9,16);

7 Event Handler


Dank der graphischer Benutzeroberfläche arbeitet JavaScript auch mit sogenannten Event-Handlern. Klickt der Benutzer z. B. auf einen Button, so bekommt JavaScript die Meldung, daß das Ereignis "Klick auf Button" eingetreten ist. JavaScript ermittelt, welcher Button geklickt wurde, und falls für diesen Button vom Benutzer eine individuelle Reaktion vorgesehen wurde, wird diese ausgeführt. In den vorangegangenen Beispielen wurden schon solche Eventhandler verwendet. Ein Beispiel:

     <form>
     <input type=button value="Klick" onClick="alert('Hallo');">
     </form>

Folgende Standard-Ereignisse kennt JavaScript, allerdings sind nicht alle Ereignisse für jedes graphische Objekt relevant. Außerdem kennt nicht jede Version jedes Browsers all diese Ereignisse, bzw. es gibt weitere, nur teilweise realisierte Ereignisse.

Event Beschreibung Tags
onAbort Anwender drückt auf STOP, bevor alle Bilder geladen wurden. img
onBlur Element verliert den Fokus body, input, select, textarea, u. a.
onFocus Element erhält Focus, siehe onBlur  
onChange Benutzer verändert Eintrag input, select, textarea
onClick Benutzer klickt auf Element button, checkbox, radio, submit, u. a.
onLoad Tritt ein, nachdem eine HTML-Datei vollständig geladen wurde. body, frameset
onUnload tritt ein, wenn eine HTML-Datei verlassen wird body, frameset
onMouseover tritt ein, wenn die Maus über das Element geführt wird sehr viele Elemente
onReset Beim Auslösen des Reset-Befehls in einem Formular form
onSelect tritt ein, wenn der Benutzer Text selektiert input, textarea
onSubmit tritt ein, wenn ein Formular abgeschickt wird form, table

Ein Beispiel: Man definiert zwei Funktionen "start" und "ende":

     var s,e;
     function start()
       {
       alert("Herzlich willkommen!");
       }
     function ende()
       {
       alert("Auf Wiedersehen!");
       }

Diese Funktionen werden im body-Tag nach dem Laden der Seite, bzw. beim Verlassen der Seite aufgerufen, indem man folgende Event-Handler vereinbart:

     <body onLoad="start();" onUnload="ende();" >

Weiteres Beispiel: Falls der Benutzer mit der Maus über einen Verweis fährt, wird in der Statuszeile ein entsprechender Text angezeigt:

     <a href="xxx.htm" 
        onMouseover="status='Klick mich';">Verweis</a>

Man kann mit solchen Event-Handlern die Funktionsweise von HTML-Objekten an seine Bedürfnisse anpassen. Dazu muß man JavaScript mitteilen, ob die ursprünglich vorgesehene Aktion noch ausgeführt werden soll. Wenn man nur das Meldungsfenster angezeigt haben will, so muß man zusätzlich "return false" an JavaScript zurückgeben:

     <a href="xxx.htm" 
        onClick="alert('Klick mich');return false;">Verweis</a>

Dadurch wird verhindert, daß der Link verfolgt wird.

Ein weiteres Beispiel dazu ist "onSubmit". Wir können z.B. nochmals nachfragen, ob ein Formular wirklich abgeschickt werden soll.

     <form ...  onSubmit="return confirm('wirklich abschicken?')">
          ...
     </form>
Ausprobieren

"confirm()" erzeugt wie "alert()" ein Meldungsfenster. Zusätzlich wird true oder false zurückgegeben, je nachdem ob auf "OK" oder "Abbruch" geklickt wird.

Beispiel: Mit Hilfe des Standardobjekts "history" kann nun in den einzelnen Frames ein Back-Knopf definiert werden:

     <form>
     <Input type="button" value="BACK" onClick="self.history.back()">
     </form>

Ebenso funktioniert ein Forward-Knopf, falls man zuvor den Back-Knopf benutzt hatte. Man kann diesen Knopf natürlich auch in einen anderen Frame setzen, um nicht jedesmal den Knopf bei sich ändernden Seiten in die neuen Texte integrieren zu müßen. Wenn man z.B. zwei Frames benutzt, wobei das erste ein Inhaltsverzeichnis darstellt, mit dem Back-Knopf versehen, und im zweiten die einzelnen Seiten geblättert werden, so müßte der Ausdruck für den Event-Handler folgendermaßen lauten:

     parent.frames[1].history.back()

Betrachten Sie nun die einzelnen Handler etwas genauer:

Ausprobieren

8 Das Image-Objekt

Endlich kommt die lang erwartete und beliebteste Anwendung. Sie wollen ein GIF-Bild als Verweis in eine Seite einbauen. Fährt der Betrachter mit der Maus über das Bild, soll sich die Anzeige ändern.
Wir nehmen dazu zwei Bilder, z. B. einen Schalter, der einmal ausgeschaltet (links) und einmal eingeschaltet (rechts) ist.

     

Normalerweise soll auf der HTML-Seite das linke Bild angezeigt werden. Fährt man mit der Maus über das Bild, soll das rechte Bild angezeigt werden. Zuerst wird ein Script geschrieben, das zwei Bildobjekte anlegt und ihnen die beiden Bilder ("over.gif" und "out.gif") zuordnet. Das Script hat gleichzeitig den Effekt, daß die Bilder bereit beim Lesen der Headers geladen werden und bereits im Browser-Cache stehen, wenn sie benötigt werden. Beachten Sie auch, daß im Beispiel das Bild des Schalters das erste auf der Webseite ist - sonst muß der Index angepaßt werden. Die Funktionen laden jeweils das passende Bild.

<script language=JavaScript>
ov = new Image();
ou  = new Image();
ov.src = "over.gif";
ou.src = "out.gif";

function over()
  {
  this.document.images[0].src = ov.src;
  }

function out()
  {
  this.document.images[0].src = ou.src;
  }
</script>

Nun fügen wir dem Link-Befehl die beiden Event-Handler onMouseOver und onMouseOut hinzu:

     <a href="URL" onclick="return false;" 
         onMouseover="over(); return true;" 
         onMouseout="out();">
     <IMG src="out.gif" border=0></a>

Fährt man mit der Maus über das Bild, bzw. verläßt die Maus das Bild, so wird das Bild gewechselt.

Ausprobieren

Weitere Eigenschaften des Image-Objekts entsprechen den Attributen des IMG-Tags, es sind:

Mit JavaScript läßt sich auch eine kleine Diashow basteln. Die Elemente eines Bilder-Arrays werden zyklisch angezeigt.

<img name="anzeige" src="bild1.gif">
<script language="JavaScript">
var bildarray = new Array();
bildarray[0] = new Image(); bildarray[0].src="bild1.gif";
bildarray[1] = new Image(); bildarray[1].src="bild2.gif";
bildarray[2] = new Image(); bildarray[2].src="bild3.gif";
bildarray[3] = new Image(); bildarray[3].src="bild4.gif";
var i = 0;
 
function film()
  {
  if (i > 3) i = 0;
  document.anzeige.src = bildarray[i].src;
  i++;
  window.setTimeout("film()",1000);
  }

window.setTimeout("film()",1000);
</script>
Ausprobieren

9 Weitere Informationen

In diesem Skript konnte die Funktionalität von JavaScript nur ausschnittweise dargestellt werden. Wer tiefer in die Möglichkeiten der Sprache einsteigen will, kommt um weitere Literatur nicht herum:

Bücher:

Gampel/Nefzger:
JavaScript Praxisbuch
Franzis Verlag

R. Steyer:
JavaScript in 21 Tage
Verlag Markt & Technik

D. Flanagan:
JavaScript - Das umfassende Referenzwerk
Verlag O'Reilly

Web-Links:

Weitere Informationen und Beispielsammlungen zu JavaScript finden Sie im WWW:

Netscape Developer Pages: http://developer.netscape.com/index.html
SELFHTML: http://www.teamone.de/selfhtml/selfhtml.htm
Kakao und Kekse: http://javascript.seite.net
Einführung der Uni Mannheim: http://rummelplatz.uni-mannheim.de/~skoch/js/script.htm
Einführung von Stefan Koch: http://www.geocities.com/Hollywood/4250/index.html
JavaScript Pro Forum: http://www.inquiry.com/techtips/js_pro/"


^M

Copyright © FH München, FB 04, Prof. Jürgen Plate

^M

Letzte Aktualisierung: 21. Mar 2001, 00:21:34