BASICS

Stefan Bucsics

bucsics@ping.at

TELEKOM

Javascript

Javascript

Stefan Bucsics

Javascript ist eine Interpretersprache die entweder vom Webserver (serverseitiges Javascript) oder von neueren Webbrowsern (clientseitiges Javascript) ausgeführt wird. Allerdings gibt es dabei auch Versionsunterschiede, die manchmal beachtet werden müssen. Die empfohlenen Standards der Sprache sind im Internet unter http://www.w3c.org/DOM/ oder http://www.ecma.ch/ zu finden.

Im folgenden wird nur clientseitiges Javascript  betrachtet. Hier wird Javascript hauptsächlich zur Kontrolle von Benutzeraktionen, zur Überprüfung von Formulareingaben und zum Erstellen dynamischer HTML-Seiten verwendet.

Diese Zusammenfassung ist als Arbeitsbehelf in der Schule gedacht und erhebt keinerlei Anspruch auf Vollständigkeit. Die hier beschriebene Sprachversion ist JavaScript1.1.

Sprachsyntax

l Javascript orientiert sich hauptsächlich an C++ und ist objektorientiert.

l Groß- und Kleinschreibweise wird unterschieden.

l Jeder Befehl wird mit einem Strichpunkt abgeschlossen.

l Der Kode von Javascript wird im HTML-Kode platziert. Dies kann an jeder beliebigen Stelle erfolgen, auch im Header-Teil des Dokumentes oder als Attribut in einem HTML-Tag.

l Ausserhalb eines HTML-Tags wird Javascript durch die HTML-Tags
 <SCRIPT LANGUAGE = “JavaScript”>
   Javascript-Anweisungen;
 </SCRIPT>
eingeschlossen.

Kommentarzeichen

/* mehrzeiliger Kommentar */
// einzeiliger Kommentar
<!— einzeiliger Kommentar

Variablen

Variablen werden nicht typisiert, die Typisierung erfolgt bei der Wertzuweisung automatisch. Man soll die Variablen aber am Anfang des Programms oder der Funktion deklarieren:

var Variablenname;

Wertzuweisung

Variablenname = Wert;

Einfache Variablentypen

Zahlen

1,  1.2,   1.23e+6,  0567 (octal),  0x1AF (hexadezimal)

Strings

“Text“, ‘Text‘,  ‘Name= “Peter“‘, “so geht’s auch”

Boolean

true,  false

null

null

Funktion

function(x){return x*x;}

Zusammengesetzte Variablentypen

Objekte

var NeuObjekt = {x:1, y:2};

Die Eigenschaften sind dann mit NeuObjekt.x und NeuObjekt.y anzusprechen.

Arrays

Ein Array ist ein durchnummeriertes (‚indiziertes‘) Feld von Werten mit einem Variablennamen. Die Nummerierung erfolgt in eckigen Klammern:

MeinArray[1] = 2.3;

MeinArray[2] = “Otto“;

MeinArray[5] = 0;

Eine Initalisierung des Arrays ist nicht notwendig. Neue Arrayelemente können jederzeit hinzugefügt werden. Im obigen Beispiel sind die Elemente MeinArray[3] und MeinArray[4] nicht definiert.

Eine Definition

var NeuArray = [1,2,3,“vier“];

ist ebenfalls möglich. Das erste Element des Arrays hat den Index 0.

In Javascript sind auch assoziative Arrays möglich. Die Indizes werden hier durch eigene Namen ersetzt. Dies ermöglicht eine leichtere Lesbarkeit.

Lager[’Apfel’] = 12;

Lager[’Birne’] = 8;

Operatoren

Entsprechen weitestgehend denen in der Sprache C++.

Nummerisch

+, -, *, /, %,, ++, —

Vergleich

<, >, <=, >=, ==, !=

Zuweisung

=, +=, -=, *=, /=

Logisch

&&, || , !

String

Gesamtstring = String1 +  String2;

Kontrollstrukturen

if (Bed) { Befehle; }

if (Bed) { Befehle; } else { Befehle; }

if (Bed1) { Befehle; } elseif (Bed2) { Befehle;} else { Befehle; }

switch (Ausdruck) {case Wert1: Befehle; break; case Wert2: Befehle; break; default: Befehle}

while ( LaufBed) { Befehle; }

do { Befehle; } while (LaufBed);

for (Initialisierung; Laufbedingung; Ende)

  { Befehle; }

for (Variable in Objekt) { Befehle; }

Beispiele

if (wert == 1) {

  document.write (”Wert = eins”);

}

Zeilenweise Ausgabe gerader Zahlen von 2 bis 10:

for (i=2; i<=10; i+=2) {

  document.writeln (i );

}

Eigenschaften des Navigatorobjekts ausgeben:

for (wert in navigator) {

  document.writeln (wert );

}

Anmerkung: Eine Schleife kann mit dem Befehl break vorzeitig beendet werden. Mit dem Befehl continue kann der momentane Schleifendurchgang beendet und der nächste Durchgang gestartet werden.

Funktionen

Funktionen werden üblicherweise am Anfang des Codes definiert:

function Name (Parameterliste)

{ Befehle;

   return Wert;

}

Aufruf

Rückgabewert = Name(Argumentenliste);

oder über eine Variable

Definition

var Quadrat = function(x){return x*x;};

Aufruf

document.write(Quadrat(3));

Variablen, die innerhalb einer Funktion mit var Variablenname; deklariert werden, gelten nur lokal. Somit sind sie von Variablen außerhalb der Funktion zu unterscheiden, auch wenn diese denselben Namen haben!

Objekte

Javascript enthält viele vorgegebene Objekte. Jedes Objekt besitzt einen Namen, bestimmte Eigenschaften und Methoden (das sind. Funktionen, die mit diesem Objekt zusammenhängen). Außerdem sind mit bestimmten Objekten Ereignisse (wie onClick) verbunden, auf die das Objekt reagieren kann.

Vergibt man im HTML-Code den Objekten eigene Namen (Attribut: NAME = „ObjektName“), so können diese Objekte über ihren Namen angesprochen werden. Die Objekteigenschaften und –methoden sind mittels

ObjektName.ObjektEigenschaft

ObjektName.ObjektMethode()

anzusprechen.

Beispiel

document.Formularname.EingabefeldName.value = „Hallo!“;

Alle Objekte mit ihren Eigenschaften, Methoden und Ereignissen kann man einschlägiger Literatur entnehmen. Hier sind nur die wichtigsten erwähnt:

An oberster Stelle der Objekthierarchie befinden sich die Objekte

Math, navigator und window.

Das Objekt Math enthält die Mathematikfunktionen.

Das Objekt navigator repräsentiert den Webbrowser (mit den Eigenschaften appCodeName, appName, appVersion, userAgent) und dient meist zur Feststellung, ob der Benutzer einen für die verwendete HTML-Version geeigneten Browser besitzt.

Das Objekt window ist das meistgebrauchte Objekt (Defaultwert) und symbolisiert das Browserfenster. Es besitzt weitere Unterobjekte wie history, location, frames[] und document.

Das Objekt document wiederum repräsentiert das im Browserfenster gezeigte Dokument. Es enthält den HTML-Code, sowie die Objekte links[], images[], forms[], usw., die alle als (assoziative) Arrays angesprochen werden können.

Die meistgebrauchte Methode des document-Objektes ist

document.write(”Text“);

Es ist möglich, eigene Objekte zu definieren:

// Definition der Konstruktorfunktion

function Auto(typ, farbe, ps, besitzer) {

  this.typ = typ;

  this.farbe = farbe;

  this.ps = ps;

  this.besitzer = besitzer;

}

//  Definition einer Methode

function Besitzerwechsel(name) {

  this.besitzer = name;

}

// ‘Instanzierung’einer Objektvariablen

Wagen = new Auto(“BMW”, “rot”, 150, “Mayer”);

// Zuweisung der Methode

Wagen.Besitzer = Besitzerwechsel;

// Ändern der Eigenschaft ‘farbe’

Wagen.farbe = “blau”;

// Aufruf der Methode Besitzer und Ändern des Namens

Wagen.Besitzer(“Müller”);

Events

Beipiel für den Einsatz von Ereignissen

<FORM>

  < INPUT

    TYPE =“button“

    NAME = “knopf“

    VALUE = “Bitte drueck mich!“

    onClick = “alert(’Danke!‘);“>

</FORM>

Die Events von Javascript 1.2 werden nicht von allen Browsern unterstützt. Daher sind in der Tabelle nur Ereignisse angeführt, die von Javascript 1.1 unterstützt werden.

Der Internetexplorer 4.0 von Microsoft unterstützt eine Fülle von weiteren Events bei praktisch allen Objekten.