javascript testen

Posted on by
Reply

Wie kann ich mein JavaScript am besten Testen?

Hierbei gibt es zwei Grundsätzliche Methoden. Zum einen muss geprüft werden, ob alle Zeichen richtig gesetzt und verwendet wurden, dies wird auch als syntaktische Korrektheit bezeichnet. Da JavaScript nicht wie beispielsweise C oder Java nach dem Programmieren kompiliert wird, bedarf es der Zuhilfename von Tools um die korrekte Syntax zu prüfen.

Als zweite Methode wird die Programmlogik geprüft. Dieser Test beinhaltet unter anderem, ob das Programm für bestimmte Eingabewerte auch das erwartete Ergebnis liefert. Ist dies der Fall arbeitet das Programm semantisch korrekt.

Wie kann ich diese beiden Bereich also bei JavaScript testen. Zum einen kann man sich hierfür dem Browser zur Hilfe nehmen. Bei Chrome und Safari leisten integrierte Entwicklertools die Aufgabe der syntaktischen Tests. Für FireFox gibt es dafür das AddOn “Bugzilla”.
Alle diese Tools haben gemeinsam, dass sie ein kleines Fenster über die aktuelle Website legen, in welchem Informationen zum verwendeten HTML, CSS und JavaScript angezeigt werden. Diese Tools stellen die Grundlage für jede Webentwicklung dar. Am hilfreichsten für JavaScript ist dabei der Reiter “Console”. Hierbei handelt es sich um eine JavaScript Konsole, auf welcher man nicht zur Code schreiben kann, sondern auch alle syntaktischen Fehler oder Debugging-Ausgaben, die aus JavaScript heraus über console.log(“mein debug text”) angezeigt werden. Sollte also euer Programm nicht korrekt laufen, wird dies in der Konsole mit Angabe der entsprechenden Zeile angezeigt. Auch erweiterte Debugging-Funktionen, wie das setzen von Breakpoints, sind möglich.

Da nicht alle JavaScript Anwendungen für den Browser bestimmt sind und es umständlich ist, nach jedem Programmierschritt die Webseite neu zu laden, gibt es das Tool JSLint. Es prüft die Qualität des JavaScript Codes. Das bedeutet, dass es nicht nur syntaktische Fehler erkennt, sondern auch prüft, ob beispielsweise Variablen immer mit dem Prefix “var” deklariert wurden. Dies ist zwar kein Fehler, aber ein Zeichen unsauberer Programmierung. Auch verwendete Funktionen die in der neuesten Version von JavaScript ES5 nicht verwendet werden sollten, aber noch Bestandteil der Sprache sind, werden als Warnungen angezeigt.
Der Vorteil von JSLint ist, dass es neben der Webseite eine Reihe von Integrationen für Editoren gibt. Ein häufig unter Mac genutzter Editor wie TextMate liefert gleich eine aktuelle Version von JSLint mit, welche einfach über einen Shortcut aufgerufen werden kann. Nach jeder größeren Änderung im Code sollte dies einmal gestartet werden, um sicher zu gehen, dass sich keine Fehler eingeschlichen haben.

Neben der Syntaxprüfung und Qualitätsprüfung, gibt es auch eine Bibliothek die erweiterte semantische Tests erlaubt. Es handelt sich um eine Erweiterung von JQuery mit dem Namen QUnit. Mit dieser Testumgebung können unterschiedliche Bereiche des Programms auf korrekte Funktionen überprüft werden. Hierfür werden Bedingungen festgelegt, die das Programm beim Aufruf bestimmter Methoden und Parameter erfüllen muss. So können beispielsweise Tests für die Grundfunktionalitäten des Programmes entworfen werden, die nach jeder Änderung am Code einmal ausgeführt werden können.

Mit Hilfe dieser Tools ist also möglich, an Standards der Softwareentwicklung auch in JavaScript anzuknüpfen, um so die Sprache auch im professionelen Umfeld einsetzen zu können. Da der Umfang der JavaScript Programme stetig zunimmt und oft mehrere tausend Zeilen an Code enthält, ist es jedem Webentwickler zu empfehlen, rechtzeitig Testfälle zu schreiben, um so eine gleichbleibende Qualität der Software zu garantieren. Je mehr Fälle die Unit Tests abdecken, desto leichter und günstiger ist es Teile des Code neu zu schreiben und weiter zu entwickeln.

JavaScript als Flash alternative

Posted on by
Reply

Wird JavaScript und HTML5 in den kommenden Jahren Flash ablösen?
Meine persönliche Meinung zu dieser Frage ist Ja. Schon heute sollte JavaScript Flash vorgezogen werden, natürlich nur, wenn es das Projekt auch zulässt.

Damit dies möglich ist, muss allerdings geklärt werden, wie hoch der Funktionsumfang der Anwendung sein soll. Wenn es sich um einen einfachen Slider für Produktbilder handelt, der alle paar Sekunden wechselt, sollte sich meiner Meinung nach immer für JavaScript entschieden werden. Warum ist dies so?

Bei JavaScript handelt es sich um einen Webstandard der in allen Browser integriert ist. Bei Flash hingegen handelt es sich um ein privates Produkt von Adobe, für welches die Installation eines Players notwendig ist. Flash kann also nicht als Teil der Seite betrachtet werden und stellt in gewisser Weise immer einen Fremdkörper dar. Dies wird besonders deutlich, wenn man iPhone und iPad betrachtet, hier wird die Ausführung einer Flash-Anwendung teilweise komplett verhindert.

JavaScript ist für solche einfachen Lösungen wie einen Slider darüber hinaus wesentlich leichtgewichtiger. Änderungen lassen sich schnell mit einem einfachen Editor umsetzen und es sind, anders als bei Flash, keine kostenpflichtigen Tools zur Bearbeitung des Codes notwendig.

Mit Bibliotheken wie JQuery und JQueryUI lassen sich viele der Funktionalitäten, die oft mit Flash gelöst werden, nachbilden und Browserübergreifend implementieren. Die Verbreitung neuer Webstandards wird dabei helfen, die Bedeutung von JavaScript in den kommenden Jahren noch weiter zu steigern. Wenn es also einen Weg gibt, das Projekt mit JavaScript zu realisieren, sollte dies auch gemacht werden. Und spätestens mit HTML5 Techniken wie Canvas sind die Einsatzbereich beinahe unbegrenzt. Wer sich dafür interessiert was heute schon möglich ist, dem kann ich die Seite chromeexperiments.com sehr empfehlen.

einstieg in die javascript programmierung

Posted on by
Reply

Für den richtigen Einstieg in die JavaScript Programmierung kann ich zum einen das Buch “JavaScript: The Good Parts” sehr empfehlen. Es geht nicht nur auf den Funktionsumfang ein, sondern beschreibt zugleich wie man JavaScript richtig nutzt. Die vielen Freiheiten, die man bei der JavaScript Programmierung hat, können sonst schnell dazu verleiten, schlechten Code zu schreiben. Dieses Buch hilft die zu vermeiden und einen guten Einstieg in die Sprache zu finden.

Für wen Bücher nichts sind, dem kann ich die Website codecademy.com sehr ans Herz legen. Die Seite ist recht neu und noch im Aufbau, aber hier bekommt ihr einen praktischen Einstieg in die JavaScript Programmierung und könnt gleich mit dem Hacken loslegen ohne vorher dicke Bücher wälzen zu müssen ;)

was ist javascript

Posted on by
Reply

Was ist JavaScript? Hierbei handelt es sich um eine Scriptsprache die vornehmlich im Bereich der Webentwicklung anzutreffen ist. JavaScript gehört zu den Webstandards, welche sich in drei Bereich einteilen lassen:

  • HTML, welches für die Auszeichnung des Inhalts der Webseite verantwortlich ist
  • CSS, welches den Stil bzw. die Gestaltung definiert
  • JavaScript, durch welches das Verhalten Website beschrieben wird.

Auf diesen drei Säulen basiert fast jede Webanwendung. Dabei wird der Einsatz von JavaScript in den letzten Jahren intensiviert. Ursprünglich nur als einfache clientseitige Scriptsprache genutzt, ist JavaScript heute aus den interaktiven Webseiten nicht mehr wegzudenken. Aber auch serverseitig wird die Sprache in den letzten Jahren vermehrt eingesetzt.

Gründe für die immer stärke Verbreitung von JavaScript gibt es viele. Sicherlich eines der Hauptargumente ist die Integration der Sprache in alle gängigen browser engines. Es bedarf keiner Plugins, wie sie beispielsweise bei Flash nötig wären, um die Sprache im Browser nutzen zu können. Dank der fortschreitenden Standardisierung von JavaScript können sich Programmierer auch relativ sicher sein, dass die Sprache über alle Browser hinweg gleich interpretiert wird. Vorausgesetzt der Entwickler hält sich dabei an die strengeren regeln der aktuellen JavaScript Version ES5.

Ein weiterer Grund für den Erfolg von JavaScript ist das veränderte Nutzungsverhalten im Internet. Statt einfach nur zu konsumieren, wollen die Menschen im Netz immer mehr miteinander interagieren. JavaScript erlaubt die Inhalte auf der Seite dynamische zu verändern und auf Nutzerinteraktion zu reagieren. Der Vorteil gegenüber serverseitigen Programmierprachen wie php ist dabei, dass eine Webseite nach einer Nutzerinteraktion nicht komplett neu geladen werden muss, sondern der veränderte Teile der Seite angepasst werden kann. Dies spart nicht nur Zeit, sondern auch Traffic-Kosten zwischen Server und Client.

Da JavaScript erst zur Laufzeit kompiliert wird, gestaltet es sich mitunter schwierig, bereits zu Entwicklungszeit mögliche Fehler zu identifizieren. Hierfür kann ich das Tool JSLint sehr empfehlen. Es verhindert nicht nur Programmierfehler, es warnt auch vor der Verwendung unsicherer oder veralteter Ausdrücke.

JavaScript selbst ist eine überaus flexible Programmiersprache, die durch immer bessere Browser Enginges stetig an Performance gewinnt. Daher ist es nicht verwunderlich, dass JavaScript neben der clientseitigen Nutzung auch als serverseitige Programmiersprache Verwendung findet. Wer sich dafür interessiert, dem sei ein Blick auf die Seite von node.js sehr ans Herz gelegt. Node.js erlaubt die flexible serverseitige Erstellung von Internetanwendungen.

Je mehr man sich mit JavaScript beschäftigt, desto mehr lernt man auch die Stärken der Sprache kennen. Es lässt sich objektorientiert und sowohl prozedural als auch funktional programmieren. Dabei muss auch nicht auf Konzepte wie Vererbung und die Verwendung von Klassen verzichtet werden. Besonders die funktionale Programmierung wird dabei meiner Meinung nach in den nächsten Jahren an Bedeutung gewinnen, da sich hierüber die Verteilung der Rechenlast auf mehrere Prozessoren optimieren lässt. Es bedarf allerdings auch viel Disziplin und einiger Übung um alle Sprachkonzepte korrekt umzusetzen, denn die vielen Möglichkeiten können auch schnell zu unübersichtlichen Code und Fehlern führen, wenn sich nicht an die geltenden Konventionen gehalten wird.

Zusammenfassend lässt sich sagen, dass JavaScript für die nächsten 10+ Jahre nicht aus der Welt der Programmiersprachen wegzudenken ist und sich mit Sicherheit in den nächsten Jahren noch weiterer an Beliebtheit erfreuen wird. Aktuell ist keine alternative Sprache in Sicht, die JavaScript im Bereich der Webentwicklung ablösen könnte. Und da Browserhersteller sich auch nur sehr langsam auf gemeinsame Richtlinien festlegen, wird sich dies in den nächsten Jahren auch nicht ändern.

Funktionsparameter zwischenspeichern durch Closures

Posted on by
Reply

Closures können uns in JavaScript helfen Parameter zu speichern und unbefugte oder ungewollte Manipulation von Werten zu verhindern. Doch was ist eigentlich ein Closure? Nun zuerst einmal ist ein Closure nichts weiter als eine Funktion mit einem eigenen Namensraum. Dies ist an sich nicht besonderes, da alle Funktionen in JavaScript eigene Namensräume bieten und so dazu beitragen, Variablen lokal zu definieren. Lokale Variablen sind wichtig, da eine der wichtigsten Programmierregeln ist, die Menge an globalen Variablen auf ein Minimum zu reduzieren.
Ein Closure beschreibt dabei eine Funktion die innerhalb einer anderen Funktion geschachtelt ist. Dies kann uns entscheidende Vorteile bieten. Welche das sind lässt sich am besten betrachten, wenn wir uns zuerst einen herkömmlichen Ansatz anschauen. Angenommen wir wollen ein Funktionsobjekt erzeugen, welches in der Lage ist einen Wert zu speichern:

function saveNumber (n) {
  this.n = n;	
}
 
var f1 = new saveNumber(3);
 
console.log(f1.n); // 3

Dies war ein relativ einfaches Beispiel. Wir haben zuerst den übergebenen Parameter auf dem Objekt gespeichert (this.n = n) und zu einem späteren Zeitpunkt wieder auf der Console ausgegeben. Wozu brauchen wir dann also Closures. Nun sie bieten 3 entscheidende Vorteile:

- Closure erlauben Werte immutable zu machen, dass heißt zu verhindern, dass Werte, nachdem sie gespeichert wurde, manipuliert werden können
- Closures schränken die Sichtbarkeit ein. Das bedeutet, Werte die auf diese Weise gespeichert werden lassen sich nicht mehr (ohne weiteres) von außen auslesen
- Closures speichern implizit Übergabeparameter, die bei der Erzeugung des Objektes übergeben wurde, als lokale Variablen.

Anwendungsfall: Angenommen unser Wert ist ein geheimer Schlüssel, der einmal beim Erzeugen gespeichert und anschließend nicht mehr verändert werden soll. Einzig eine Funktion darf prüfen, ob der Wert des Schlüssels mit dem des Nutzers übereinstimmt, um ihm so beispielsweise Zugang auf private Informationen zu gewähren. Hierfür erzeugen wir innerhalb der Funktion, eine weitere Funktion, die für relevanten Operationen Zuständig ist. Diese Funktion ist Rückgabewert der eigentlichen Funktion. Den Wert des Schlüssel speichern wir aber in der Ursprungsfunktion, welche von außen nicht Sichtbar ist. Am besten zeigt dies ein Beispiel:

function checkKey (key) {
  // Closure
  return function (userKey) {
  	return key === userKey;
  }
}
 
ck = new checkKey("geheim"); // erstellen eines neuen Keys
console.log(ck("hacker")); // false
console.log(ck("geheim")); // true
console.log(ck.key); // undefined

Schauen wir uns das ganze Schrittweise an. Die Funktion checkKey dient lediglich als Wrapper und hat als einzige Aufgabe, den Parameter key zu speichern. Dies geschieht aus dem Grunde, weil der Parameter “key” von der inneren Funktion genutzt wird und eine Instanz der Funktion der Variablen “ck” gespeichert wird. Solange dies der Fall ist, bleibt der Parameter “key” im Speicher erhalten. Die äußere Funktion bildet ein sogenanntes “Closure”, also eine Ummantelung um die innere Funktion. Da bei Erstellung des Objektes nur die innere Funktion zurückgeben wird (Zeile 3), gibt es so auch keine Möglichkeit mehr, den Wert von “key” auszulesen oder zu verändern. Dies sieht man zum einen in Zeile in Zeile 10 oder aber wenn man versucht den Wert von key neu zu beschreiben:

ck.key = "hacker";
console.log(ck("hacker")); // false

Durch die immutable Eigenschaft liefert die Funktion nach wie vor false zurück. Closures erlauben uns also zum einen elegant Werte zu speichern und zum anderen erlauben sie es uns den Zugriff auf interne Variablen zu unterbinden.

Zum Abschluss der einfachste Mögliche Anwendungsfall:

function saySomething (s) {
  return function () {
    console.log(s);
  }
}
 
s1 = new saySomething("Ich Liebe Closures!");
s2 = new saySomething("Ich Auch!");
s1(); // Ich Liebe Closures!
s2(); // Ich Auch!