Grundlagen für Umsteiger

JavaScript für Java-Entwickler
Kommentare

JavaScript sieht syntaktisch aus wie ein vereinfachtes Java. Somit haben viele Java-Entwickler das Gefühl, die Sprache JavaScript eigentlich zu kennen und deshalb nicht lernen zu müssen. Allerdings ist das Verhalten von JavaScript deutlich anders als das von Java. Dies führt zu einer großen Anzahl von Java-Entwicklern, die zwar JavaScript nutzen, aber nie wirklich die Grundlagen der Sprache studiert haben.

Hallo Welt

Die typische Ablaufumgebung für ein JavaScript-Programm ist nach wie vor der Browser. Zwar gibt es seit einiger Zeit mit Node.js die Möglichkeit, JavaScript auch auf dem Server und von der Kommandozeile aufzurufen, wir werden uns hier aber auf die Ausführung im Browser beschränken.

Im Browser läuft JavaScript durch Einbetten in eine HTML-Seite oder durch Ausführen in der JavaScript-Konsole. Alle Browser haben eine solche Konsole. In meinen Beschreibungen beziehe ich mich speziell auf den Chrome-Browser, weil er der am weitesten verbreitete Browser ist und auf allen Plattformen läuft. Zudem sind die Entwicklertools von Chrome sehr gut.

Profitipp
Die Entwicklertools des Chrome-Browsers sind sehr mächtig und helfen beim schnellen Ausprobieren und Debuggen von JavaScript-Code. Für den Firefox-Browser gibt es die Firebug-Erweiterung, die ebenfalls eine sehr gute Unterstützung bietet.

Die JavaScript-Konsole

Starten wir mit einem kurzen „Hallo-Welt“-Programm, das wir in der JavaScript-Konsole des Browsers laufen lassen. Dazu lernen wir das globale Object console (nicht zu verwechseln mit der JavaScript-Konsole) kennen, das die Funktion log() bietet. Mit dieser Funktion könnt ihr – ähnlich wie System.out.println() in Java – eine Ausgabe auf der Konsole erzeugen:

console.log("Hallo, Welt");

Im Chrome kommt ihr an die Konsole über die Tastenkombinaten CTRL + Shift + J (auf dem Mac ⌥⌘J) oder über das so genannte „Hotdog-Menü“ rechts oben heran. Einen Screenshot dazu könnt ihr in Abbildung 1 sehen.

Abb. 1: So kommt ihr im Chrome an die Entwicklertools bzw. JavaScript-Konsole

Hier könnt ihr nun direkt den JavaScript-Schnipsel von oben aufrufen und seht als Ausgabe den erwarteten „Hallo, Welt“-String. Zusätzlich erscheint eine Zeile mit der Ausgabe undefined, da die Chrome-JavaScript-Konsole auch immer die Rückgabe einer Funktion ausgibt. Die ist in diesem Fall eben undefined. Salopp kann man sich diese Rückgabe so vorstellen wie das, was bei einer void-Methode in Java zurückgeliefert wird, nämlich nichts.

JavaScript in HTML-Seiten

Für JavaScript-Code, der mehr als ein kleines Experiment ist, empfiehlt es sich, ihn aus einer HTML-Seite heraus aufzurufen. Das geht, indem man den Code direkt in die HTML-Seite einbettet wie in dem folgenden Beispiel.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hallo, Welt!</title>
    <script>
        alert("Hallo, Welt");
    </script>
</head>
<body>
</body>
</html>

Wenn ihr einen Rechner zur Hand habt, tippt dieses kleine Beispiel einmal mit einem Texteditor ab, speichert es unter index.html und ruft es mit dem Browser auf. Es sollte sich eine Nachrichtenbox mit dem Text „Hallo, Welt“ zeigen. Im Chrome sieht das Ganze in etwa wie in Abbildung 2 aus.

Abb. 2: Die Ausgabe unseres zweiten Hallo-Welt-Programms

Der Nachteil des kleinen Skripts: es vermischt HTML und JavaScript. Das wollen wir bei dem nächsten Beispiel anders machen und beides trennen. Zudem wollen wir einer weiteren Best Practice folgen und den JavaScript-Code erst am Ende einer HTML-Seite einfügen. Dadurch müssten wir bei der Darstellung der Seite keine Verzögerung während des Ladens und Parsens des JavaScript hinnehmen:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hallo, Welt!</title>
</head>
<body>
    <script src="hallo.js"></script>
</body>
</html> 

Dazu nun noch die passende JavaScript-Datei hallo.js:

alert("Hello World");

Die Ausgabe dieses Beispiels unterscheidet sich nicht von der des vorherigen. Wir haben hier also unser erstes JavaScript-Refactoring gesehen!

IDEs

Sobald wir den Bereich der Spielereien mit JavaScript verlassen und größere Projekte angehen, stellt sich die Frage nach einer Entwicklungsumgebung. Die meisten Java-Entwickler sind komfortable IDEs wie z. B. Eclipse, Netbeans oder IntelliJ IDEA gewohnt. Häufig werden solche Werkzeuge aber von JavaScript-Entwicklern belächelt. Diese bevorzugen gern Texteditoren wie vi, Emacs, TextMate oder Sublime Text.

Ihr könnt euch nun entscheiden, ob ihr euch auf diese neue Welt einlassen oder lieber bei einer komfortablen IDE bleiben wollt – was meine Empfehlung wäre. In diesem Fall eignet sich gerade IDEA Ultimate hervorragend als Alleskönner, sowohl für Java als auch für JavaScript. Wem das zu teuer oder zu schwergewichtig ist, dem empfehle ich die kleine Schwester WebStorm, ebenfalls von IntelliJ. Diese kann im JavaScript-Bereich nicht weniger, ist aber einfacher und kostet weniger. Einen Eindruck von WebStorm bei der Arbeit könnt ihr in Abbildung 3 bekommen.

Abb. 3: WebStorm im „coolen“ Darcula-Theme

Aufmacherbild: Young man reading a book von Shutterstock / Urheberrecht: ra2studio

[ header = Typen ]

Typen

Wir steigen nun nach und nach in die relevanten Details der Sprache JavaScript ein. Es geht los mit Typen. Entgegen einer weit verbreiteten Meinung existieren diese in JavaScript. Neben object gibt es auch die drei primitiven Typen string, number und boolean.

Objekte

Ein Objekt in JavaScript können wir uns vereinfacht wie eine  Map in Java vorstellen. Es gibt Properties als Name/Wert-Paare, die jederzeit hinzugefügt und auch wieder gelöscht werden können. Werte können ebenso jederzeit in Inhalt und Typ verändert werden. Wir hätten damit so etwas wie Map<String, Object>. Ein Objekt erzeugen wir mit der folgenden Syntax, die „object literal“ oder Objekt-Literal genannt wird:

var obj1 = {};

In diesem Fall haben wir ein Objekt ohne Properties erzeugt und speichern die Referenz auf das Objekt in der Variablen obj1.

Hinweis
Wir gehen später in diesem Kapitel genauer auf Variablen und das Schlüsselwort var ein. Für unsere Zwecke reicht es hier aus zu wissen, dass Variablen mit dem Schlüsselwort var deklariert werden und bei der Deklaration bereits mit einem Wert initialisiert werden können.

Ihr könnt schon beim Erzeugen eines Objekts beliebige Properties angeben:

var obj2 = {
	name1: "Wert1",
	name2: "Wert2",
	"Beliebiger String": "Wert3"
};

Hier erzeugen wir ein neues Objekt mit den Properties name1, name2 und Beliebiger String.

Der Name einer Property kann ohne Anführungszeichen stehen, wenn er wie ein Identifier aufgebaut ist. Die kompletten Regeln für den Aufbau eines Identifiers stehen unter. In Kurzform darf der Identifier keine Leerzeichen und keine Zeichen enthalten, die auch sonst als Syntax dienen. Damit fallen z. B. der Doppelpunkt, das Komma, das Semikolon und Klammern weg. Der String Beliebiger String muss in Anführungszeichen stehen, da er ein Leerzeichen enthält.

Der Zugriff auf Properties von Objekten kann genau wie in Java mit dem Punkt-Operator erfolgen oder – anders als in Java – mit dem []-Operator:

console.log(obj2.name1);
// => "Wert1"
console.log(obj2["Beliebiger String"]);
// => "Wert3"

Bestehende Properties können jederzeit überschrieben und neue  jederzeit eingeführt werden. Auch Referenzen auf Funktionen sind möglich:

obj2.name1 = "Neuer Wert";
console.log(obj2.name1);
// => "Neuer Wert"
obj2.func = function() { return "Called"; };

Hinweis
Wir werden später noch genauer auf Funktionen eingehen, wichtig ist hier, dass Funktionen in JavaScript auch Objekte sind und wir somit Referenzen darauf in Properties halten können.

Properties können vom jedem beliebigen JavaScript-Typ sein und können ihn auch jederzeit ändern. Auch Referenzen auf andere Objekte sind möglich. Properties können mit delete wieder gelöscht werden:

var obj3 = {
	name1: "Wert1",
	name2: "Wert2",
	bool: true,
	zahl1: 10,
	ref1: obj2, // Referenz auf obj2 
	ref2: { name: "Neues Objekt" }
};
obj3.zahl1 = "zahl1 ist nun ein String!";
delete obj3.bool;
console.log(obj3.bool);
// => undefined

Arrays

Arrays sind in JavaScript Objekte mit erweiterten Eigenschaften. Es gibt eine spezielle Syntax, um ein Array zu erzeugen. Dazu nimmt man den []-Operator:

var array = ["a", "b", "c"];
console.log(array);
// => ["a", "b", "c"]

Mit typeof kann man den Typ eines Ausdrucks bestimmen. Wie oben erwähnt, sind Arrays Objekte:

console.log(typeof array);
// => "object";

Einzelne Elemente eines Arrays bekommt man über den []-Operator… 

var el = array[2];
console.log(el);
// => "c"

… und kann auch neue Werte direkt darüber setzen:

array[1] = 20;
console.log(array);
// => ["a", 20, "c"]

Das Pendant zur add-Methode in Java ist in JavaScript die push-Methode:

// fügt die 4 am Ende hinzu
array.push(4);
console.log(array);
// => ["a", 20, "c", 4]

Das Entfernen und das Einfügen von Elementen macht dieselbe Methode, nämlich splice: Zuerst das Entfernen von Elementen… 

// Ab Position 1 werden 2 Elemente entfernt
// und zurückgegeben
array.splice(1, 2);
console.log(array);
// => ["a", 4]

… dann das Einfügen:

// An Position 1 werden 0 Elemente
// (also keine) entfernt und zurückgegeben
// Zudem wird an Position 1 "x" hinzugefügt
array.splice(1, 0, "x");
console.log(array);
// => ["a", "x", 4] 
Lesen Sie den Rest des Probekapitels im PDF. Viel Spaß!
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -