Einführung in Javascript


Da alle Skripte in todo4teams unter Verwendung von Javascript geschrieben werden, hier eine kurze Einführung in diese Programmiersprache.

Variablen-Deklaration

Mit einer Variablen-Deklaration wird eine Variable im aktuellen Gültigkeitsbereich erzeugt, d.h. als globale Variable oder lokale Funktionsvariable. Sie kann entweder ohne Wert installiert werden:

var alter;

Oder der Anfangswert kann gleich angegeben werden:

var alter=32;

Anstelle der 32 kann ein beliebiger Ausdruck stehen. Das Schema lautet also:

var Bezeichner = Ausdruck;

Kontrollstrukturen: Verzweigungen und Schleifen

Kontrollstrukturen sind Anweisungen, die wiederum Blöcke mit Anweisungen enthalten. Dazu gehört die bedingte Anweisung, auch if-Anweisung genannt.

if (alter >= 18) {
  println("Volljährig!");
} else {
  println("Noch nicht volljährig.");
}

Zwischen den runden Klammern steht ein beliebiger Ausdruck, zwischen den geschweiften Klammern eine oder mehrere Anweisungen.

Mit der switch-Anweisung lassen sich Verzweigungen notieren, bei denen ein Wert mit vielen anderen Werten verglichen wird und eine entsprechende Anweisung ausgeführt wird.

Schleifen

Schleifen kann man in Javascript auf verschiedene Weisen ausdrücken:

Die while-Schleife

while (bedingung) {
        anweisungen;
}

oder die for-Schleife:

for (startausdruck; bedingung; iterationsausdruck) {
        anweisungen;
}

Funktionen

Funktionen sind in JavaScript vollwertige Objekte. Sie haben Methoden und Eigenschaften, können erstellt und überschrieben, als Argumente an Funktionen übergeben und von ihnen erzeugt und zurückgegeben werden.

Nicht jedes Argument einer Funktion muss beim Aufruf angegeben werden, für fehlende Argumente wird der Wert undefined gesetzt. Es gibt in Javascript verschiedene Möglichkeiten eine Funktion zu erzeugen. Der einfachste Weg ist die Deklaration:

function a (Parameter1, Parameter2, Parameter3) {
        anweisungen;
       return ausdruck;
}

Operatoren

Hier eine Übersicht über die Operatoren in Javascript:

OperatorOperandentypDurchgeführte Operation
*ZahlenMultiplikation
/ZahlenDivision
+Zahlen oder StringsAddition bzw. Stringverkettung
ZahlenSubtraktion
%ZahlenRestbildung (Modulo-Operator)
<Zahlen oder StringsKleiner als
<=Zahlen oder StringsKleiner oder gleich
>Zahlen oder StringsGrößer als
>=Zahlen oder StringsGrößer oder gleich
 Beliebige VariableZuweisung
*=ZahlenvariableZuweisung mit Multiplikation
/=ZahlenvariableZuweisung mit Division
%=ZahlenvariableZuweisung mit Restbildung
+=Zahlen- oder StringvariableZuweisung mit Addition bzw. Stringverkettung
–=ZahlenvariableZuweisung mit Subtraktion
<<=Ganzzahlen-VariablenZuweisung mit Links-Shift
>>>=Ganzzahlen-VariablenZuweisung mit Rechts-Shift und 0-Auffüllung
>>=Ganzzahlen-VariablenZuweisung mit Rechts-Shift
=Elementare TypenGleich; identischer Wert
Elementare TypenUngleich; ungleiche Werte
&GanzzahlenBitweises UND
|GanzzahlenBitweises ODER
.Objekt, EigenschaftZugriff auf Eigenschaft
[ ]Array, Ganzzahl bzw. StringZugriff auf Array-Element
( )Funktion, beliebiger ParametertypFunktionsaufruf
++ZahlvariableInkrement
––ZahlvariableDekrement
&&Boolesche WerteLogisches UND
||Boolesche WerteLogisches ODER
^GanzzahlenBitweises XOR
~GanzzahlenBitweises NICHT (bitweises Komplement)
>>>GanzzahlenShift nach rechts mit 0-Auffüllung
>>GanzzahlenLinks-Shift
<<GanzzahlenRechts-Shift

Arrays

Es gibt in Javascript zwei Wege, Arrays anzulegen:

Erzeugung durch literale Konstruktion

Der Datentyp muss nicht benannt werden. Der Javascript-Interpreter weiß, dass die eckigen Klammern ein Array erzeugen sollen:

 farben = ["rot", "grün", "blau", "gelb", "grau"];
Erzeugung durch den Array-Konstruktor

Der Unterschied zur ersten Methode ist gering. Runde Klammern ersetzen die eckigen Klammern und der Array-Konstruktor ist explizit aufgeführt.
 farben = new Array("rot", "grün", "blau", "gelb", "grau");

Zugriff auf Arrayelemente

Ein Skript kann ein Array auch als leeres Arrays erzeugen, das später vom Programm mit Daten gefüllt wird.

var farben = new Array();
oder
 farben = [];

Der Zugriff auf die Elemente des Arrays erfolgt über den Namen des Arrays und einen Index. Die folgenden Deklarationen initialisieren das Array.
farben[0]  = "rot";
farben[1]  = "grün";
farben[2]  = "blau";

Das Zuweisen eines neuen Werts ändert ein Arrayelement:
farben[0]  = "orange";

Die Größe des Arrays feststellen

Die Größe des Arrays entwickelt sich automatisch durch die Anzahl der belegten Elemente. Bei numerischen Arrays findet die Eigenschaft length heraus, wieviele Elemente das Array enthält: array.length.

array.length ist also immer eins mehr als der höchste Index. Der sicherste Weg, ein neues Element in ein Array einzubinden ist
var farben = ["rot", "grün", "blau"];
farben[farben.length] = "gelb";

Objekte

Jedes Objekt - auch ein literal erzeugtes Objekt - erbt vom Prototyp des globalen Objekt-Konstruktors.

Vordefinierte Objekte

JavaScript kennt mehrere eingebaute Objekte:

  • Das namenlose globale Objekt, das alle Variablen und Objekte enthält.
  • Object als allgemeiner Prototyp, von dem alle Objekte abgeleitet sind
  • Function als Prototyp für Funktionen
  • Array als Prototyp für Arrays
  • String als Prototyp für Zeichenketten
  • Boolean als Prototyp für Boolesche Variablen
  • Number als Prototyp für Zahlen (64-Bit-Gleitkommazahlen gemäß IEEE 754)
  • Math stellt Konstanten und Methoden für mathematische Operationen bereit. Math kann nicht als Konstruktor dienen.
  • Date für Operationen mit Daten bzw. Zeitpunkten und Datumsformaten
  • RegExp für reguläre Ausdrücke

Im hier verwendeten serverseitigen Javascript kann auch auf alle Objekte, die im Kontext an das Skript übergeben werden, zugegriffen werden.

Zugriff auf Objekteigenschaften und -methoden

Eigenschaften von Objekten (auch Methoden sind Eigenschaften) werden wie folgt angesprochen:

Punkt-Notation:
objekt.eigenschaft;
objekt.methode([Parameter]);

Neben der Punkt-Notation gibt es noch die Klammer-Notation, die jedoch weit weniger gebräuchlich ist.

Fehlerbehandlung

Die Anweisung try … catch … finally 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 (exception) {
       // Anweisungsfolge, die im Ausnahmefall ausgeführt wird.
       // In diesem Teil kann die Fehlerbehandlung erfolgen.
} finally {
       // Anweisungsfolge, die anschließend in jedem Fall ausgeführt wird.
}
...
throw("sample exception"); 

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.

Im 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. Der finally-Teil kann weggelassen werden, alternativ der catch-Teil.