Was ist JavaScript?

JavaScript ist eine Entwicklung der Netscape Communications Corporation und kann als Erweiterung der Netscape-Browser-Fähigkeiten betrachtet werden, wie zuvor die von Netscape entwickelte Frame-Technik. Beides könnte man genausogut als Erweiterung zu HTML auffassen. Sieht man den Browser mit seiner Fähigkeit HTML-Dokumente zu interpretieren, so kann er nun auch Frame- und JavaScript-Anweisungen interpretieren. Ebensowenig wie alle Browser Frames darstellen können, können sie JavaScript verstehen. Der Netscape-Interpreter kann dies ab Version 2, der Microsoft Internet Explorer soll dies ab Version 3 können. Die Entwicklung von JavaScript ist noch nicht abgeschlossen.

Die Sicherheitsprobleme die Anfang des Jahres 1996 auftraten, wie das Lesen von Dateien auf der Festplatte des Benutzers und automatisches Verschicken von E-Mails sind ab der Version 2.01 des Navigators behoben. Nach Netscape ist die von ihnen entwickelte Sprache JavaScript sicher.

Da JavaScript-Programmcode direkt beim Aufbau einer HTML-Seite interpretiert wird, gibt es keine Absicherung gegen fehlerhafte Programmierung. Ist das Programm fehlerhaft so kommt es zum Programmabsturz, was in diesem Falle bedeutet, daß der Browser zusammenbricht. Außerdem sind die Fähigkeiten des Netscape JavaScript-Interpreters derzeit noch nicht ganz ausgereift, wodurch die Gefahr besteht, daß unvollständige oder fehlerhafte Code-Interpretationen vorkommen können, die ebenso zu unvermittelten Programmabstürzen führen können.

JavaScript ist eine objektbasierte Sprache. Die Syntax und die Objektorientierung sind bei der von Sun Microsystems entwickelten Programmiersprache Java entliehen, jedoch in stark vereinfachter Form. In JavaScript stehen Standardobjekte zur Verfügung, die die einzelnen Komponenten einer Web-Seite referenzieren, und im wesentlichen das HTML-Dokument und dessen Elemente, insbesondere die Formulare und Frames, betreffen, zur Verfügung. Auch gibt es die Möglichkeit eigene Objekte zu definieren.

Wie wird JavaScript in ein HTML-Dokument eingebunden?

Es können zwei Arten einer möglichen Einbindung von JavaScript in HTML-Seiten unterschieden werden: Im Gegensatz zu HTML unterscheidet JavaScript zwischen Groß- und Kleinschreibung.

Kommentare in JavaScript

Da einige Browser kein JavaScript verstehen oder die JavaScript-Ausführung deaktiviert wurde, ist es sinnvoll, die JavaScript-Anweisungen als Kommentar in den übrigen HTML-Text einzubetten, ansonsten würde dieser Teil als Text am Bildschirm ausgegeben. In HTML beginnt ein Kommentar mit <!-- und endet mit -->.

Der JavaScript-Interpreter erkennt das HTML-Kommentarende nicht und gibt hierbei eine Fehlermeldung aus. Deswegen muß ein JavaScript-Kommentar vor das HTML-Kommentarende gesetzt werden.

Kommentare in JavaScript:

Das Script-Tag

Um nun JavaScript-Code in HTML-Seiten einzubinden, benötigt es einen neuen Tag, der den Code-Teil vom reinen Textteil abgrenzt. Die Syntax ist wie folgt: <SCRIPT [LANGUAGE=JAVASCRIPT]> <!-- JavaScript-Anweisungen // --> </SCRIPT> Dabei gibt es das optionale Attribut Language. Um späteren, möglichen Entwicklungen Rechnung zu tragen, sollte man dieses Attribut allerdings immer mit angeben, denn es könnte in der weiteren Entwicklung durchaus der Fall sein, daß andere Skript-Sprachen Verwendung finden könnten.

Funktionen die zwischen den Script-Tags definiert werden, sollten in der HEAD-Umgebung des HTML-Dokuments abgelegt werden. Dadurch wird sichergestellt, daß die Funktion vor ihrem ersten Aufruf bekannt ist. Sie wird erst ausgeführt, wenn die entsprechende Funktion aufgerufen wird.

Beispiel:

<HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function quadrat(i) { document.write( i ," wurde an die Funktion weitergereicht.<BR>") return i * i } // --> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write("Das Ergebnis der Funktion lautet",quadrat(5),".") // --> </SCRIPT> <BR> Das wars! </BODY>

Event-Handler

Die Möglichkeit auf ein Benutzerereignis (Event) zu reagieren, wird durch Angabe eines HTML-Attributs mit JavaScript-Code als Zuweisung, realisiert. Zu beachten ist hierbei die Verwendung von doppelten und einfachen Anführungszeichen. Falls im aufgerufenen Code ein String verwendet wird, der ebenfalls in Anführungszeichen gesetzt werden muß, so ist dieser in einfachen Anführungszeichen zu setzen, um eine eindeutige Abrenzung zum JavaScript-Code, der in doppelten Anführungszeichen gesetzt wurde, zu erhalten.

Ein Event-Handler wird meist innerhalb eines Formulars oder eines Links benutzt. Das Type-Attribut BUTTON wurde von Netscape für den Einsatz von JavaScript eingeführt, es dient alleine dazu den Event-Handler onClick zum Einsatz zu bringen.

Als Beispiel:

<form> <Input Type=Button Value="Bitte mal draufklicken!" onClick="alert('Danke!')"> </form>

Ein Beispiel für einen Event-Handler innerhalb eines Ankers:

<A HREF="http://home.netscape.com/" onMouseOver="window.status='Click this if you dare!'; return true"> Click me</A> Click me

Die übliche Meldung, die in der Statuszeile bei einer Mausbewegung über einen Link erscheint, ist die Adresse des betreffenden Links. Indem nun window.status, welches eine Eigenschaft des Standardobjekts window darstellt, einen neuen Wert zugewiesen bekommt, erscheint nun der neuzugewiesene Text. Wichtig hierbei ist, daß return true zusätzlich gesetzt werden muß. Der Event-Handler onMouseOver ist übrigens nur für Links definiert.

Was ist ein Objekt?

Ein Objekt besitzt bestimmte Eigenschaften und Methoden. Wobei Methoden nichts anderes sind als Funktionen, die diesem Objekt zugeordnet wurden. Von einem Objekt können mit dem Schlüsselwort new Vertreter (Instanzen) erzeugt werden.

Es muß also zunächst ein Objekt mit gewissen Eigenschaften definiert werden.
Ein Objekt könnte zum Beispiel folgendes sein:

<script language="JavaScript"> <!-- function car(make, model, year) { this.make = make; this.model = model; this.year = year; } // --> </script> Diese Definition des Objektschemas, auch Klasse genannt, sollte im HEAD-Teil des HTML-Dokuments stehen. Das Schlüsselwort this bezieht sich auf die aktuellen Eigenschaften eines Objekts, wenn es durch das Schlüsselwort new als Vertreter dieser Objektklasse innerhalb des BODY-Umgebung eines HTML-Dokuments erzeugt wird. Die aktuellen Eigenschaften werden hierbei den Angaben der Werte, die der Funktion new übergeben werden, entnommen.

Zum Beispiel wird das Objekt mycar mittels der Zuweisung in den runden Klammern der Funktion new beschrieben:

mycar = new car("Eagle", "Talon TSi", 1993); Mit Hilfe der Variablen mycar können nun die einzelnen Eigenschaften des Objekts angesprochen und weiterverarbeitet werden in der Form Variable.Objekteigenschaft=neue_Zuweisung.

Ein Objekt kann als Eigenschaft wiederum ein Objekt besitzen. Gäbe es z.B. das nachfolgende Objekt:

function person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } mit den zwei Vertretern: rand = new person("Rand McNally", 33, "M"); ken = new person("Ken Jones", 39, "M"); so kann das obige Objekt car wie folgt erweitert werden: function car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.owner = owner; } und zwei Vertreter diese erweiterten car-Objekts, könnten nun wie folgt aussehen: car1 = new car("Eagle", "Talon TSi", 1993, rand); car2 = new car("Nissan", "300ZX", 1992, ken);

Um nun die Eigenschaft name eines Vertreters des Objektes car anzusprechen, muß die Angabe nun folgendermaßen aussehen:

car2.owner.name

Was sind Methoden?

Innerhalb der Definition eines Objekts, können diesem Funktionen zugewiesen werden, dies sind dann die Methoden des Objekts.

Soll zum obigen Objekt car z.B. eine Methode definiert werden, die als Anwendungsbeispiel zu einem aufgerufenen Bild des Autos, eine definierte Textausgabe hinzufügen soll, so könnte man folgende Funktionen innerhalb der HEAD-Umgebung definieren:

function pretty_print(string) { document.write("<HR>" + string + "<HR>") // Ergibt Bildschirmausgabe } function displayCar() { var result = "A Beautiful " + this.year + " " + this.make + " " + this.model; pretty_print(result) } Als Methode innerhalb des Objekts ist die letzte Zeile zur vorhergenden Objekt-Definition hinzuzufügen: function car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.owner = owner; this.displayCar = displayCar; } Nun kann an entsprechender Stelle die Funktion wie folgt aufgerufen werden: car1.displayCar(); Auf der Web-Seite erscheint dann:

A Beautiful 1993 Eagle Talon TSi

Was sind die Standardobjekte?

Beim Aufruf einer Web-Seite im Netscape werden automatisch einige Objekte bezüglich des verwendeten Browsers und der geladenen Seite erzeugt:

navigator
Enthält Informationen über den benutzten Browser
window
Das Objekt window enthält Eigenschaften des aufgerufenen Fensters. Mit diesem Objekt können ferner neue Fenster definiert werden, wobei auch die Fenstereigenschaften frei bestimmbar sind.
location
Enthält die Beschreibung des aktuellen URL's.
history
Enthält die Liste der bisher besuchten URL's.
document
Beschreibt den Inhalt der Seite, wie Titel, Hintergrundsfarbe, Formulare, etc.

Diese Objekte, auch Client-Objekte genannt, sind, außer dem navigator-Objekt, in einer strengen Hierarchie angeordnet, wobei window das oberste ist. Ein nachfolgendes Objekt (auch ,,Nachkomme'' genannt) wie document ist eine Eigenschaft des Objekts window, welches wiederum Eigenschaften besitzt.

navigator

window
  |
  +--parent, frames, self, top 
  |
  +--location 
  | 
  +--history 
  |
  +--document 
       |
       +--forms
       |    |
       |  elements (text fields, textarea, checkbox, password
       |            radio, select, button, submit, reset)   
       +--links
       |
       +--anchors

In JavaScript setzte sich eine Terminologie durch, die zwischen Links und Ankern unterscheidet. Ein Link ist demnach definiert durch <a href="Adresse"> und ein Anker durch <a name="Name">.

Will man auf eine spezielle Eigenschaft referenzieren, so muß immer das zugehörige Objekte mit allen seinen Vorgängern angegeben werden außer dem obersten Objekt window, das weggelassen werden kann.

Des weiteren gibt es noch das Date-Objekt , welches das Abfragen und Verändern der Datumskomponenten ermöglicht, das Math-Objekt, welches einige gebräuchliche mathematische Konstanten und Methoden zur Verfügung stellt und das string-Objekt für Zeichenkettenoperationen.

Für eine genaue Beschreibung der einzelnen Standardobjekte mit ihren Methoden, sei auf das Netscape JavaScript-Handbook verwiesen.

Was sind Frames?

Ab der Netscape Version 2 und ab MS Internet Explorer 3.0 gibt es die Möglichkeit das Browser-Fenster in kleinere Bereiche zu unterteilen, die unabhängig voneinander HTML-Dokumente darstellen können. Diese Bereiche werden Frames genannt. Statt dem BODY-Tag wird nun ein FRAMESET-Tag gesetzt, der die Art der Fensterunterteilung und der darin enthaltenen Startdokumente festlegt. Es ist sinnvoll noch einen NOFRAME-Teil einzubauen, der Anweisungen darüber enthält, was geschehen soll, wenn ein Browser keine Frames darstellen kann. Beide Tags besitzen ein entsprechendes Ende-Tag.

Das FRAMESET-Tag besitzt zwei Attribute: ROWS für die Zeilenangabe und COLS, für die Spaltenangabe der Größe der einzelnen Frames. Die beiden Attribute erwarten als Werte reine Zahlenangaben, die Pixelwerten entsprechen, oder Prozentangaben, die sich auf die ursprüngliche Browser-Fenstergröße beziehen. Schließlich kann als Eingabewert auch ein Stern * angegeben werden, der den restlich vorhandenen Platz für ein Framefenster kennzeichnet. Die Eingaben der Werte werden durch Kommata getrennt. Werden mehrere Sterne angegeben, so wird der zur Verfügung stehende Platz gleichmäßig entsprechend der Anzahl der Sterne unterteilt, wobei die Angabe einer Zahl vor dem Stern wie ein Faktor wirkt, der den Platzbedarf vervielfacht. Eine Angabe wie COLS = "2*,*", bewirkt eine Frameaufteilung, in der die Fensterbreite zu 2/3 dem linken und 1/3 dem rechten Fenster zugehörig unterteilt wird. FRAMESET-Anweisungen können auch geschachtelt werden.

Beispiel:

<html> <head> <title>Frame-Test</title> </head> <frameset Rows="50%,*"> <frameset Cols="30%,*,*"> <frame src="ftest1.html" noresize> <frame scrolling=yes name="frei"> <frame src="ftest1.html" marginwidth=50 marginheight=50> </frameset> <frame src="ftest2.html"> </frameset> </html> Das FRAME-Tag besitzt verschiedene Attribute:

Reservierte Fensternamen

Wird nun bei einem Link der Form <a href="URL" target="Fenstername">, ein Fenstername vergeben, der weder vorher einem Frame zugeordnet wurde noch einen der nachfolgend reservierten Namen entspricht, so wird ein neues Browser-Fenster mit dem angegebenen URL geöffnet. Bei selbstdefinierten Fensternamen kann man erreichen, daß z.B. der Link im linken Framefenster im rechten Framefenster dargestellt wird, falls der Name mit dem Namen des TARGET-Attributs übereinstimmt.

Wurde innerhalb eines Frames geblättert, so kommt man nicht zum vorhergehenden Frame-Zustand zurück, indem man den Back-Knopf betätigt. Klickt man mit der rechten Maustaste innerhalb des Frames, so erhält man ein Auswahlmenü, welches die Möglichkeit enthält in den vorangehenden Framezustand zurückzuwechseln. Außerdem ist es sinnvoll, einen Frame zu besitzen, der alle möglichen Frameaufrufe zusammenstellt, so das man mühelos zu einem anderen Frame wechseln kann.

Das Frame-Objekt ist eine Eigenschaft des Window-Objekts, beinhaltet aber dieselben Eigenschaften wie das Window-Objekt. Es wird ein Frame-Array angelegt, wodurch die einzelnen Frames ansprechbar sind. Hat man den Frames Namen gegeben, was sich empfiehlt, so können die einzelnen Frames über diese Namen angesprochen werden. Ansonsten können sie über den Index des Arrays angesprochen werden, wobei der erste Array-Eintrag dem Indexwert 0 entspricht.