Seite 3: Kleine Tricks & IDE-Überblick

Inhaltsverzeichnis

Nützlich & praktisch

Die Grundlagen einer guten JavaScript-Anwendung sollten damit bekannt sein, es gibt aber noch eine Reihe von Funktionen, die man so vielleicht nicht erwartet hat oder einfach noch nicht kennt.

Praktisch ist zum Beispiel die for-in-Anweisung, die alle Eigenschaften eines Objekts durchläuft. Vergleichbar ist dies mit den foreach-Schleifen anderer Programmiersprachen wie PHP. Über typeof lässt sich der Datentyp einer Variable herausfinden. Die Methode hasOwnProperty zeigt dagegen an, ob ein Objekt eine bestimmte Eigenschaft überhaupt besitzt. Hier ein Listing, dass die genannten Dinge zusammenfasst:

var animals = {
  cat: "Kiki",
  dog: "Bruno",
  mouse: "Coco"
};

for (var property in animals) {
  log.info("Tier ist " + animals[property]); //Kiki,Bruno,Coco
}

log.info("animals ist ein " + typeof animals); // object
log.info("Es gibt eine Katze: " + animals.hasOwnProperty("cat")); // true
log.info("Es gibt ein Pferd: " + animals.hasOwnProperty("horse")); // false

Leider ist typeof nicht wirklich konsistent, ein Array wird zum Beispiel als Typ object ausgegeben. Vollkommen falsch ist das zwar nicht, da es in JavaScript keine "echten" Arrays gibt, aber trotzdem verwirrend. Gravierender ist, dass selbst eine Variable mit dem Wert NaN (not a number) als Typ number ausgegeben wird.

Bei Vergleichen in if-Abfragen ist es wichtig, stets drei Gleichheitszeichen zu verwenden, da JavaScript bei ungleichen Datentypen sonst gerne unvorhersehbare Ergebnisse liefert. Siehe dazu folgendes Beispiel:

var myNull = 0;
if(myNull == '') { //true
… // wird ausgeführt
}
if(myNull === '') { // false
… // wird nicht ausgeführt
}

Wenn nur zwei Gleichheitszeichen verwendet werden, wird die erste Bedingung tatsächlich als "true" ausgewertet, obwohl die Zahl 0 mit dem leeren String nun wirklich nichts gemeinsam haben dürfte. Also besser immer sowohl Wert- als auch Typgleichheit mit "===" prüfen und "==" nur einsetzen, wenn explizit die Typgleichheit ignoriert werden soll.

Ein Parameter, den alle Funktionen besitzen, ist das arguments-Array. Damit lasse sich die Anzahl aller übergebenen Parameter und ihre Werte auslesen.

function doSomething() {
log.info("Anzahl der Parameter ist " + arguments.length + ", erster Parameter " + arguments[0]);
}

doSomething("cat");
doSomething(42,"Kiki","Bruno");

Die Anzahl der Parameter muss also nicht vordefiniert sein. In manchen Szenarien ist das nützlich, der Lesbarkeit einer Anwendung beziehungsweise deren Dokumentation dient es sicherlich nicht.

Aus anderen Programmiersprachen ist auch das try-catch-Konstrukt bekannt, was auch in JavaScript vorhanden ist. Die Funktionsweise ist wie erwartet:

var myNumber = 256;

try{
  if(myNumber < 1) {
    // wird nicht ausgeführt
  } else {
     myNumber = 0;
     throw "Zahl war zu groß, setze auf 0";
   }
} catch (e) {
  log.info(e); // Ausgabe "Zahl war zu groß, setze auf 0"
} finally {
  log.info("Zahl ist " + myNumber); // Zahl ist 0
}

Im Beispiel wird über throw eine Exception generiert, da die Zahl größer als 1 ist. Diese Exception wird dann im catch-Block entsprechend ausgegeben. Der Code in der optionalen finally-Anweisung wird immer nach der Fehlerprüfung ausgeführt.

Entwicklungsumgebung

Zur Entwicklung in JavaScript genügt prinzipiell jeder Texteditor, da kein Compiler benötigt wird. JavaScript wird aber kaum "isoliert" entwickelt, insofern ist es wichtig, dass sich die Entwicklung gut in bestehende Prozesse integriert. Daher bietet sich Eclipse aufgrund der zugrunde liegenden Plug-in-Architektur als IDE an. Hier hat sich in den letzten Jahren im JavaScript-Bereich viel getan, und so bieten aktuelle Plug-ins weit mehr als nur Syntax-Highlighting und Code-Completion. Das zeigt eine Feature-Übersicht der wohl meist genutzten JavaScript-Plug-ins für Eclipse:

	Aptana	Eclipse WTP	Spket	Amateras
verwendete Version	Studio 2	1.3.2	1.6.18	2.1.0
letztes Update	Juli 2010	Februar 2011	Oktober 2009	Februar 2011
Outline mit Klassen, Funktionen und Variablen	Ja	Ja	Ja	Nur Klassen & Funktionen
automatisches Einrücken	Ja	Ja	Ja	Nein
Einklappen von Klassen & Funktionen	Ja	Ja	Ja	Ja
Syntax-Highlighting	Ja	Ja	Ja	Ja
Code Completion in einer Datei/Klasse	Ja	Ja	Ja	Ja
Code Completion über mehrere Dateien/Klassen	Ja (nur wenn Datei geöffnet)	Ja	Nein	Nein
Auslesen von JS-Kommentaren über mehrere Dateien/Klassen	Ja (nur wenn Datei geöffnet)	Nein	Nein	Nein
Unterstützte JS-Frameworks	JQuery, Dojo, ExtJS u.a.	Keine	Jquery, ExtJS, mooTools u.a.	Keine
Code-Validierung	Bei der Eingabe	Bei der Eingabe	Nach Speichern	Nach Speichern
Richtlinie zur Validierung (laut Hersteller)	Mozilla, JSLint	ECMAScript 3	Mozilla	Google Closure
integrierte Hilfe	Ja, sehr ausführlich, einschließlich Frameworks	Ja, aber nur Syntax	Ja, aber nur Syntax	Nein
Refactoring	Nein	Ja	Nein	Nein
Quick Fixes	Nein	Nein	Nein	Nein
Debugging, Breakpoints	Ja	Ja, z.B. über JSDT oder Rhino	Ja	Nein
Preview-Server	Eigener Server integriert	nur über Eclipse	nur über Eclipse	nur über Eclipse
Besonderheiten			komfortable Integration des YUICompressor, gute Outline-Übersicht	Sehr kompakt

Falls man auf Eclipse verzichten kann oder möchte, ist auch WebStorm 2.0 von JetBrains einen Blick wert.

Aptana ist nach wie vor die derzeit populärste JavaScript-IDE, verhält sich aber auf einigen Systemen recht "träge". Die kommende Version 3 (bereits als Beta verfügbar) soll diesen Fehler beheben und bringt zum Beispiel eine integrierte Systemkonsole mit. Weiterhin enthält Aptana 3 das HTML5-Basis-Template Boilerplate, das eine saubere Grundlage für die Entwicklung zeitgemäßer Webanwendungen ist.

Einige Features wird man dennoch vermissen – keine der IDEs im Test bot beispielsweise funktionierende Quick Fixes an. Selbst bei einfachen Fehlern, wie einem vergessenen Semikolon am Ende der Zeile, korrigiert dies die Tastenkombination Strg+1 nicht, obwohl im Editor durchaus eine entsprechende Warnung angezeigt wird.

Wie für jedes Webprojekt empfiehlt sich natürlich auch bei JavaScript ein Versionierungssystem, beispielsweise Subversion. Neben der Versionskontrolle ist so auch immer ein Backup des Codes verfügbar. Für den Anfang genügen kostenlose Anbieter wie Beanstalk und Unfuddle, bei denen man maximal 100 beziehungsweise 200 MByte in nicht öffentlichen Repositories speichern darf.