JavaScript-Anwendungen

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 konnte dies ab Version 2, der Microsoft Internet Explorer ab Version 3. 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. Trotzdem die Liste der Bugs und Probleme immer länger wird, wenn auch Löcher immer wieder gestopft wurden, erfreut sich diese Sprache zunehmender Beliebtheit.

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, dass der Browser zusammenbricht.

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. 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:

Anweisungen und Funktion umgeben von einem <SCRIPT>-Tag
Event-Handler als Attribute zu <HTML>-Tags

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 .

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

Kommentare in JavaScript:

Zwei Schrägstriche // markieren einen Kommentar bis zum Ende der Zeile.
Ein Blockkommentar wird durch die Zeichenkombination /* und */ markiert.

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"]>  </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, dass 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, dass die Funktion vor ihrem ersten Aufruf bekannt ist. Sie wird erst ausgeführt, wenn die entsprechende Funktion aufgerufen wird.

<head> <script language="JavaScript">  </script> </head> <body> <script language="JavaScript">  </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 muss, 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, dass return true zusätzlich gesetzt werden muss. 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 muss also zunächst ein Objekt mit gewissen Eigenschaften definiert werden.
Ein Objekt könnte zum Beispiel folgendes sein:

<script language="JavaScript">  </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, muss 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 Browser 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 id="Name">.

Will man auf eine spezielle Eigenschaft referenzieren, so muss 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.

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="client1.html" noresize> <frame scrolling="yes" name="frei"> <frame src="client1.html" marginwidth="50px" marginheight="50px"> </frameset> <frame src="client2.html"> </frameset> </html> Das frame-Tag besitzt verschiedene Attribute:

src bestimmt den URL des anzuzeigenden HTML-Dokuments. Wird kein URL angegeben, so erscheint ein leerer Frame.
marginwidth und marginheight operieren mit Pixelangaben, die einen linken und rechten bzw. einen oberen und unteren freizulassenden Rand im Anzeigefenster definieren.
name ermöglicht die Angabe eines Framenamens, der bei Links als Zielframeangabe eingesetzt werden kann (mit dem Linkattribut target).
scrolling definiert die Anwesenheit bzw. Abwesenheit einer Scrollbar. Die Werte können hierbei yes, no und auto sein. Der letzte Wert ist Voreinstellung, eine Scrollbar wird gesetzt, falls die Darstellung im Fenster die Fenstergröße übertrifft.
noresize verhindert das Verändern der Rahmengröße mittels Mausmanipulation.

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, dass z. B. der Link im linken Framefenster im rechten Framefenster dargestellt wird, falls der Name mit dem Namen des target-Attributs übereinstimmt.

"_blank" lädt das HTML-Dokument in einem neuen Browser-Fenster.
"_self" lädt das HTML-Dokument in dem aktuellen Frame.
"_top" lädt das HTML-Dokument in dem aktuellen Fenster, die Frame-Einteilung wird aufgehoben.
"_parent" beschreibt das übergeordnete Fenster, indem weitere Frames definiert wurden, wurden dort keine weiteren Frames definiert, entspricht es dem "_top". Es hebt die Frameeinteilung in einem Unterframe auf.

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.