JavaScript ist eine objektorientierte Skriptsprache, die von der Firma Netscape entwickelt wurde, um statischeHTML-Seiten dynamisch zu gestalten. Im Gegensatz zu serverseitigen Scriptsprachen wie zum Beispiel Perl oder PHP wird JavaScript auf dem Client ausgeführt. Mittels einer Schnittstelle zum Document Object Model (DOM) können Elemente der Webseite manipuliert werden, nachdem diese zum Client übertragen wurde.
JavaScript wurde unter dem Namen ECMAScript unter ECMA-262 standardisiert. Die Syntax der Sprache ähnelt der der Programmiersprache Java und auch einige Schlüsselwörter beider Sprachen sind identisch. Semantisch jedoch unterscheiden sich beide Sprachen deutlich. Interessant ist die Tatsache, daß JavaScript im Gegensatz zu klassisch objektorientierten Sprachen keine Klassen einsetzt, sondern statt dessen Objekte als Prototypen einsetzt. Mittlerweile wurden auf dieser Basis zusätzlich normale Klassen implementiert, wohl in der Annahme, damit den Einstieg zu erleichtern.
Datenstrukturen und Objekte
JavaScript kennt mehrere Arten von eingebauten Objekten wie z.B. Object, Screen, Array, String, Date and Math. Andere Objekte gehören zum DOM (window, form, links etc.).
Eigenschaften oder Methoden von Objekten werden über folgende Notation angesprochen:
objektname.feldname
|
bzw. |
objektname.methodenname()
|
Eine Übersicht der wichtigsten Eigenschaften und Methoden der einzelnen Objekte:
Objekte allgemein
Die Klasse "Object" definiert die gemeinsame Funktionalität aller Javascript-Objekte.
neues Objekt erstellen:
var obj = new Object();
alternativ:
var obj = {};
In JavaScript ist es auch möglich, zur Laufzeit neue Eigenschaften zu einem Objekt hinzuzufügen oder zu entfernen. In diesem Beispiel wird "zahl1" mit 1 belegt:
obj.zahl1 = 1;
Eine weitere Besonderheit der Javascript-Objekte ist die Fähigkeit, den Wert einer Eigenschaft direkt über den Namen zu ermitteln. In diesem Beispiel wird "1" ausgegeben:
alert ( obj['zahl1'] )
Außerdem ist es möglich, über die Eigenschaften eines Objektes zu iterieren. In diesem Beispiel wird "obj.zahl1=1" ausgegeben.
for (var i in obj) { alert ('obj.' + i + '=' + obj[i]) }
Array
arrayname = new Array(1,2,3,4,5,6) //neues Array anlegen arrayname = [1,2,3,4,5,6] //neues Array anlegen (Alternative) arrayname.length //Anzahl der Elemente zurückgeben arrayname.concat(anderesArray) //zwei Arrays verbinden arrayname.join() //Array in Zeichenkette umwandeln arrayname.pop() //letztes Element aus Array löschen arrayname.push(neuer Wert) //ein neues Element an das Ende des Array anhängen arrayname.reverse() //Reihenfolge der Elemente umkehren
String
...
Date
dateobjekt = new Date() //neues Date Objekt erzeugen
Math
Math.max(zahl1,zahl2) //die größere der beiden Zahlen zurückgeben Math.min(zahl1,zahl2) //die kleiner der beiden Zahlen zurückgeben Math.pow(Basiszahl,Exponent) //Ergebnis der Exponentialrechnung zurückgeben Math.random() //Eine Zufallszahl zwischen 0 und 1 zurückgeben
Window Objekt
window.resizeTo(neueWeite,neueHöhe); // Fenstergröße einstellen window.back(); // vorhergehende Seite anzeigen window.open("dateiname.htm","Fenstername"); // neues Browserfenster öffnen
Screen Objekt
screen.width // Bildschirmbreite zurückgeben screen.height // Bildschirmhöhe zurückgeben
Function Objekt
f = function add (zahl1, zahl2) { return zahl1 + zahl2; }
alternativ:
f = new Function ('zahl1', 'zahl2', 'return zahl1 + zahl2;');
Kontrollstrukturen
If ... else
if (Bedingung) { Anweisungen; } else { Anweisungen; }
while (Bedingung) { Anweisungen; }
Do ... while
do { Anweisungen; } while (Bedingung);
for ([Startausdruck]; [Bedingung]; [Inkrementier-Ausdruck]) { statements }
For ... in-Schleife
Mit dieser Anweisung werden alle Eigenschaften eines Objektes durchlaufen (oder auch alle Elemente eines Feldes).
for (variable in object) { statement }
switch (Ausdruck) { case marke1 : Anweisungen; break; case marke2 : Anweisungen; break; default : Anweisungen; }
Funktionen
Eine Funktion ist ein Block mit einer Liste (ev. auch leer) von Parametern, dem ein Name zugewiesen wird. Eine Funktion kann einen Resultatwert zurückgeben.
function meineFunktion(param1, param2, param3) { Anweisungen; return Ausdruck; }
Beispiel: Der ursprüngliche Algorithmus von Euklid zur Ermittlung des größten gemeinsamen Teilers: Es ist eine geometrische Lösung; die kleinere Strecke wird jeweils von der größeren abgezogen.
function gcd(a, b) { while (a != b) { if (a > b) { a = a - b; } else { b = b - a; } } return a; }
Die Anzahl der Parameter beim Aufruf muss nicht zwingend mit der Anzahl der Parameter in der Funktionsdefinition übereinstimmen. Wenn beim Aufruf weniger Parameter angegeben werden, dann wird für die übrigen Parameter einfach der Wert undefined eingesetzt. Weiter kann innerhalb der Funktion auch über das arguments
-Array auf die Parameter zugegriffen werden.
Konstruktor-Funktionen
Wird eine Javascript-Funktion genutzt, um mit new
erstellte Objekte zu initialisieren, spricht man von einem Konstruktor. Innerhalb des Konstruktors kann
das neue Objekt über die this
-Variable angesprochen werden:
function MyObject() { this.zahl1 = 1; }
neues Objekt erstellen:
var obj = new MyObject;
Test der Eigenschaft "zahl1". Es wird "1" ausgegeben.
alert (obj.zahl1)
private Eigenschaften
Entgegen der vorherrschenden Meinung unterstützt Javascript private Eigenschaften,
also Eigenschaften, die nur für das Objekt selbst sichtbar sind, nicht aber für andere
Objekte. Im folgenden Beispiel wird die private Eigenschaft zahl1
definiert,
die nur durch die private Methode next()
ausgelesen und verändert werden kann.
function MyClass() { var zahl1 = 1; this.getZahl1 = function () { return zahl1; } this.getNext = function () { return ++zahl1; } }
neue Instanz der Klasse erstellen:
var obj = new MyClass;
zahl1
ist von außen nicht zugreifbar, daher wird "undefined" ausgegeben:
alert(obj.zahl1)
Es wird "1" ausgegeben:
alert(obj.getZahl1())
Es wird "2" ausgegeben
alert(obj.getNext())
Vererbung (prototype-Eigenschaft)
Jedes Function Objekt verfügt über eine prototype-Eigenschaft. Diese ist von besonderer Bedeutung, wenn die Funktion genutzt wird, um neue Objekte zu initialisieren (Konstruktorfunktion). Die prototype-Eigenschaft definiert in diesem Falle gemeinsame Eigenschaften aller Objekte, die mit dem Konstruktor erstellt werden. Man spricht von prototyp-basierter Vererbung.
Die prototyp-Eigenschaft eines Function-Objektes kann auch neu definiert werden. Auf diese Weise ermöglicht Javascript mehrstufige Vererbung:
Konstruktor der Basisklasse erstellen:
function C1 (pName) { this.name = pName; } C1.prototype.C1 = C1; C1.prototype.zahl1 = 1;
Konstruktor der abgeleiteten Klasse erstellen:
function C2 (pName) { // Konstruktor der Basisklasse muß explizit gerufen werden: this.C1(pName); }
Eine neue Instanz der Basisklasse dient als Prototyp der abgeleiteten Klasse! Dadurch werden die Eigenschaften des Prototyps der Basisklasse an die abgeleitete Klasse vererbt.
C2.prototype = new C1 ()
Hinzufügen der Eigenschaften der abgeleiteten Klasse:
C2.prototype.C2 = C2; C2.prototype.zahl2 = 2;
Hinzufügen der Methode "test". Die Funktion gibt die Summe der geerbten
Eigenschaften zahl1
und zahl2
aus:
C2.prototype.test = function C2_test() { alert (this.name + '=' + (this.zahl1 + this.zahl2)); }
Erstellen einer Instanz der Klasse C2:
var X = new C2('test')
Test der Vererbung. Es wird angezeigt "test=3"!
X.test();
Eine wichtige booleesche Methode der Klasse Object
ist hasOwnProperty(propName)
. Dadurch läßt sich ermitteln, ob eine bestimmte Eigenschaft durch das
Objekt selbst, oder durch seine Prototyp-Kette definiert wird. Zum Beispiel ergibt
X.hasOwnProperty('zahl1')
false, ebenso wie
X.hasOwnProperty('zahl2')
. Wird allerdings die Eigenschaft "name" getestet,
so liefert X.hasOwnProperty('name')
true, denn "name" wurde durch den
Konstruktor der Basisklasse C1
belegt.
Benutzerinteraktion
Meist erfolgt die Benutzerinteraktion über HTML-Formulare, auf deren Elemente man über das DOM zugreift. Es gibt jedoch auch einige einfache Arten, direkt mit dem Benutzer zu kommunizieren:
Alarm-Dialog
Gibt ein Fenster mit einer Textmeldung aus. Beispiel:
window.alert('Hallo Welt');
Eingabeaufforderung
Es wird ein Dialog zur Informationseingabe angezeigt. Beispiel:
var eingabe = prompt("Geben Sie einen Text ein","");
andere Interaktionsmöglichkeiten
Die neueren Versionen von ECMAScript, wie sie im Internet Explorer 5 und Netscape Navigator 6 eingebaut sind, verfügen über eine von Java übernommene try ... catch Fehlerbehandlungsanweisung.
Die try ... catch ... finally
Anweisung fängt Ausnahmen (exceptions), die aufgrund eines Fehlers oder einer throw-Anweisung auftreten, ab. Die Syntax ist wie folgt:
try { // Anweisungen, in denen Ausnahmen auftreten oder ausgelöst werden können } catch(error) { // Anweisungsfolge, die im Ausnahmefall ausgeführt wird. } finally { // Anweisungsfolge, die anschließend in jedem Fall ausgeführt wird. }
Zu Beginn werden die Anweisungen im try-Block ausgeführt. Falls eine Ausnahme auftritt, wird der Kontrollfluss sofort zum catch-Block mit dem Ausnahmeobjekt als Parameter umgeleitet.
In Normalfall wird der Ausnahmeblock übersprungen. Nach der Ausführung des try-Blocks (auch teilweise) und gegebenenfalls des catch-Blocks werden in jedem Fall die Anweisungen im finally-Block ausgeführt.
try { Anweisungen } catch (err) { // Fehlerbehandlung } finally { Anweisungen }
Der finally-Teil kann weggelassen werden
try { Anweisungen } catch (err) { // Fehlerbehandlung }
Siehe auch
Literatur
- Tobias Hauser: JavaScript Kompendium - Interaktives und dynamisches Webpublishing, Markt und Technik, ISBN 3-8272-6465-0
- David Flanagan: JavaScript - das umfassende Referenzwerk, O'Reilly, ISBN 3-89721-330-3
- Danny Goodman: JavaScript, eine Sprache für alles., MITP-Verlag, ISBN 3-8266-0914-X
- Ralph Steyer: JavaScript in 21 Tagen - Scripte einbinden und programmieren., Markt und Technik, ISBN 3-8272-6508-8
- Stefan Münz, Wolfgang Nefzger: JavaScript Referenz, Franzis, ISBN 3-7723-6520-5
- Jan Winkler: JavaScript, Franzis, ISBN 3-7723-6007-6
- Stefan Mintert, Christine Kühnel: Workshop JavaScript, Addison-Wesley, ISBN 3-8273-1718-5, Vollständige Online-Fassung des Buches
- Stefan Koch: JavaScript - Einführung, Programmierung, Referenz, dpunkt Verlag, ISBN 3-89864-111-2
- Heather Williamson: Dynamic HTML browserübergreifend - HTML, CSS, DOM, JavaScript und JScript, Galileo Press, ISBN 3-934358-29-2
- Mark Lubkowitz: Webseiten programmieren und gestalten - HTML, CSS, JavaScript, PHP, Perl, MySQL, SVG, Galileo Press, ISBN 3-89842-313-1
- Christian Wenz: JavaScript Handbuch, Galileo Press, ISBN 3-89842-366-2
- Christian Wenz: JavaScript-Rezepte, Galileo Press, ISBN 3-89842-149-X
Weblinks
- Gutes Tutorial für Einsteiger
- JavaScript-Workshop - Lehrbuch zum Einstieg in JavaScript
- Homepage zur Newsgruppe de.comp.lang.javascript
- SELFHTML: Javascript
- Didaktisch gut gemachter Kurs für JavaScript
- Technik, Grundlagen und Praxis
- Ausführliche Erläuterungen - plattformübergreifende Fallbeispiele; Programmtext darf frei verwendet werden. (englisch)
- Solitaire Mahjongg - Web-Spiel als Beispiel für eine Applikation in Javascript
- ECMAScript-Sprachspezifikation (englisch)
- Forum
- JavaScript-Chronologie
- Kostenlose JavaScripts