Javascript für Java-Entwickler

Eschborn, 01.09.2016

Als Java-Entwickler schaute man lange Zeit etwas verächtlich auf Javascript. Diese Programmiersprache ist doch was für Skriptkiddies. Ja, ist das überhaupt eine Programmiersprache?

Javascript und vor allem das gesamte Ökosystem drum herum haben sich in den letzten Jahren sehr stark und sehr gut entwickelt. In JEE-Anwendungen kommt man heute um Javascript nicht mehr herum. Es wird daher Zeit, Vorurteile über Bord zu werfen, und sich Javascript aus Sicht eines Java-Entwicklers näher anzuschauen. Einiges daran kommt einem Java-Entwickler bekannt vor. Anderes ist neu. Manches erscheint vertraut – aber das täuscht.

Die Syntax von Javascript ähnelt der von Java. Die erste Hürde wäre damit genommen.

Javascript ist nicht typisiert. Von welchem Typ der Inhalt einer Variablen ist, steht erst zur Laufzeit fest. Das kann zu unerwarteten Ergebnissen führen. Die Addition zweier Werte wird der Browser (Browser als Synonym für Ausführungsumgebung) klaglos durchführen. Steht in einer der Variablen aber eine Zahl als String, wird das Ergebnis der Addition ein zusammengesetzter String sein und nicht das Ergebnis einer Addition zweier Zahlen

var a=5, b='1'; -> a + b = '51'

var a=5, b=1; -> a + b = 6

Die fehlende Typisierung hat auch Auswirkungen auf den Vergleichsoperator. Neben dem aus Java bekannten == gibt es auch ===. Der Unterschied ist klein aber fein: == vergleicht den Inhalt einer Variable, d.h. '1' == 1 ist wahr. === prüft zusätzlich auf den Datentyp. '1' === 1 ist daher nicht wahr. Die Datentypen weichen ab. Neben der Gleichheitsprüfung gibt es auch die entsprechenden Operatoren für ungleich: != und !== .

Variablen müssen in Javascript noch nicht einmal deklariert werden. Es gibt allerdings die Direktive „use strict“. Diese Direktive weist den Browser an, den Javascript-Code vor der Ausführung genauer zu prüfen. Der Browser prüft u.a. ob eine Variable deklariert ist, bevor sie verwendet wird, ob geöffnete Klammern auch geschlossen werden, ob am Ende einer Anweisung ein Semikolon steht und noch einige Dinge mehr.

Syntaktische Fehler fallen in Javascript erst zur Laufzeit auf. Der Browser ist bei der Ausführung von Javascript-Code sehr fehlertolerant: er versucht alles auszuführen. Erst wenn es gar nicht mehr anders geht, beendet er das Skript. Das Beenden geschieht heimlich, still und leise. Javascript „fails silently“.

Auf Javascript spezialisierte IDEs sind mittlerweile so gut, dass sie viele Fehler im Code finden. Eine strikte Prüfung, wie sie der Java-Compiler durchführt kann bei Javascript aber nicht gemacht werden. Umso wichtiger ist eine gute Dokumentation des Codes. Weit verbreitet ist JSDoc (http://usejsdoc.org). JSDoc verwendet eine Syntax ähnlich der von Javadoc. Javascript IDEs nutzen JSDoc Kommentare für die Syntaxprüfung.

Das Initialisieren von Variablen funktioniert in Javascript wie in Java. Man weist einfach einen Wert einer Variablen zu. Die Verwendung von Arrays und Objekten ist in Javascript aber einfacher. a = [] definiert ein neues leeres Array. Mit a.push(xx) wird dem Array ein neues Element hinzugefügt. Mit a.pop() wird das letzte Element aus dem Array entfernt.

Über eine Schleife iterieren kann man natürlich mit einer for-Schleife. Jedes Array besitzt aber implizit eine Methode „forEach“. Mit Java8 hat eine forEach Methode ebenfalls Einzug ins Collection Framework gehalten. In Javascript gibt es diese für normale Arrays.

[code1]

Code 1

 

 

 

 

Das Beispiel in [code1] gibt die einzelnen Werte des Arrays nacheinander in die Console des Browsers aus. Hier kommen wir zu einer weiteren Eigenschaft, die Javascript von Java unterscheidet. Javascript ist eine funktionale Programmiersprache. Erst ab Java8 gibt es erste Ansätze einer funktionalen Programmierung. Java ist damit aber bei weitem noch keine funktionale Sprache. In Javascript sind Funktionen „first class citizens“. Mit einer Funktion kann man alles machen, was man auch mit einer Variablen machen kann. Funktionen kann man daher auch als Argument einer anderen Funktion übergeben. Genau das passiert im Beispiel [code1].
Der Funktion forEach wird eine andere Funktion übergeben. forEach geht alle Elemente des Arrays durch und ruft für jedes Element die übergebene Funktion auf.

Einer Funktion eine andere Funktion als Argument zu übergeben, findet man als Designmuster in Javascript an vielen Stellen. Ein prominentes Beispiel ist der Ajax-Aufruf an einen Server. Dem Ajax-Aufruf wird eine Funktion übergeben. Diese Funktion wird aufgerufen nachdem die Antwort auf den Ajax-Aufruf eingetroffen ist. Nur in dieser Funktion darf auf das Ergebnis des Aufrufs zugegriffen werden. Während der Browser auf die Antwort des Ajax-Aufrufs wartet läuft das Javascript normal weiter.

Das aus Java bekannte Schlüsselwort „this“ gibt es auch in Javascript. Die Semantik von this in Javascript ist aber etwas anders als in Java. In Java ist this immer eine Referenz auf die aktuelle Instanz der Klasse. In Javascript ist this eine Referenz auf das Objekt in dessen Kontext eine Funktion aufgerufen wurde. Man kann Funktionen aber auch an ein anderes this binden. Beim Verwenden von this muss man gut aufpassen, was man macht. Um die Verwendung von this kommt man aber oft nicht herum.

[code2]

 

 

 

 

 

 

 

 

In [code2] wird ein Javascript Objekt der Variable person zugewiesen. Das Objekt hat die Attribute vorname, nachnameund eine Funktion anzeigeName. anzeigeNameenthält wiederum eine Funktion erzeugeAnzeigename.
Gehen wir von innen nach außen. Das thisin erzeugeAnzeigename würde auf die Funktion anzeigeName verweisen. Im Kontext anzeigeNamesind vornameund nachname nicht definiert. return this.vorname + ' ' + this.nachnamewürde daher undefined undefinedzurück liefern.
Das bind(this) bewirkt nun, dass das this innerhalb der Funktion erzeugeAnzeigename auf das this der Funktion anzeigeName gesetzt wird. Im Kontext anzeigeName sind vornameund nachnamedefiniert. return this.vorname + ' ' + this.nachnamekann damit „Thomas Müller“ zurückgeben.

Auf Attribute und Methoden eines Objekts kann man auf unterschiedliche Weise zugreifen. person.vornameund person['vorname']liefern beide das Ergebnis Thomas. Auch var feld = 'vorname'; person[feld] liefert Thomas. Gibt es ein Attribut nicht, kann man es einfach zur Laufzeit hinzufügen. person.geburtsdatum = '10.07.2016'; Neue Funktionen lassen sich über denselben Weg hinzufügen. person.getGeburtsdatum = function () {return this.geburtsdatum; };

In den vorherigen Abschnitt war von Objekten die Rede. Ja, Javascript ist (auch) eine objektorientierte Sprache! Die Objektorientierung in Javascript ist prototypbasiert. Es gibt keine Klassen. Objekte stellen Attribute und Funktionen als Prototyp für andere Objekte zur Verfügung. Andere Objekte können diese Prototyp-Objekte erweitern. Ähnlich wie in Java eine Klasse die Oberklasse erweitert.

Javascript bietet dem Java-Entwickler einige neue Untiefen und Riffe auf die man auflaufen kann. Es hat aber auch jede Menge Potential. Gerade die Funktionsorientierung bietet Möglichkeiten, die man in Java nicht hat. Die Zeit ist reif!

 

Autor: Marco Königstein

Kontakt

Nicole Heyne

Marketing

Person_Bild

Telefon +49 6196 80269-28
E-Mail senden