JavaScript
Dienstag28. August 2012

Im Dezember letzten Jahres habe ich bereits über meine Erfahrungen mit Sublime Text 2 geschrieben und das eine oder andere Plugin empfohlen, welches die Arbeit mit HTML/CSS und JavaScript erleichtert. Damals habe ich mich gefreut, dass ich erstmals in einem Editor unter Windows ohne größere Verrenkungen einen Linter ans Laufen gebracht habe, um meine JavaScript-Files auf problematischen Code hin überprüfen zu können. Mittlerweile ist Sublime Text 2 in der finalen Fassung 2.0.1. erhältlich und auch beim Linting ist alles mittlerweile noch viel bequemer geworden.

Das Plugin der Stunde heisst “SublimeLinter” und liefert ein Live-Linting für JavaScript, CSS und noch zahlreiche andere Sprachen und Formate (Ruby, Java, Perl). Installiert wird es sinnvollerweise über den überaus bequemen Plugin-Manager PackageControl, der alle installierten Plugins selbstständig auf dem jeweils aktuellen Stand hält (bequemer geht’s nicht mehr).

Für Mac-Nutzer war’s das bereits, Windows Nutzer müssen sich zusätzlich Node.js installieren, um in den Genuss des Live-Lintings zu kommen. Hintergrund dafür ist, dass OS X standardmäßig eine JavaScript-Engine mit an Bord hat (genannt: JavaScriptCore), während man unter diese mit Node.js nachrüsten muss. Mittlerweile ist aber auch Node unter Windows mit bequemen 2..3 Klicks einrichtet - also keine echte Hürde mehr. Dann noch ein Neustart des Editors und es kann losgehen.

Sobald man eine JavaScript-Datei geöffnet hat, arbeitet der Linter im Hintergrund. Entdeckt er einen Fehler, so wird die entsprechende Code-Zeile mit einem weißen Rahmen umrandet, wie im Screenshot zu erkennen ist. Die einzelnen Fehler lassen sich per Tastaturkürzel (Nächster Fehler: Strg+Alt+E, vorheriger Fehler: Strg+Alt+Shift+E ) ansteuern. Ist der Cursor auf der markierten Zeile, so findet man in der Statusleiste des Editors (die befindet sich üblicherweise am unteren Rand) eine Erklärung, was der Linter auszusetzen hat und in der Codezeile ist die betreffende Stelle zusätzlich mit einem weißen Unterstrich markiert. Das Überprüfen von bestehendem Code, wie auch das Schreiben von sauberem JavaScript wird damit wirklich sehr erleichtert.

Die Konfiguration des Linters ist ebenfalls - dank Sublime Text - sehr übersichtlich gelöst. Über Preferences->Package-Settings-SublimeLinter öffnet man zunächst die Datei “Settings - Default”, kopiert sich deren Inhalt und fügt sie in die - über das gleiche Menü erreichbare - “Settings - User” ein. Anschließend kann der Linter nach Herzenslust konfiguriert werden - zumal alle Optionen dokumentiert sind.


Freitag13. April 2012

Die Fragen danach, ob man HTML5 bereits produktiv einsetzen kann, werden zunehmend weniger. Es hat sich die allgemeine Sichtweise durchgesetzt, das dem so ist. Um dabei auch die alten Browser(-versionen) nicht außen vor zu lassen und die zahlreichen neuen HTML5-Elemente und JavaScript APIs browserübergreifend nutzen zu können, stehen zahlreiche Polyfills zur Verfügung. Die Aufgabe eines Polyfills ist es, die Funktionalität eines HTML5 Features mit Hilfe von JavaScript nachzubilden.

Vor wenigen Tagen ist die erste Ausgabe eines brandneuen, deutschsprachigen Online-Magazins namens mag.js erschienen und darin ein lesenswerter Beitrag von Matthias Reuter zum Thema “Mit jQuery alten Browsern HTML5 beibringen”. Darin beschreibt er, wie mittels jQuery das Placeholder-Attribut in alten Browsern nachgerüstet werden kann.

Das Placeholder-Attribut liefert einen zusätzlichen Hilfetext für Formularelemente (<input>, <textarea>), der immer dann erscheint, wenn das betreffende Formularfeld leer und nicht focussiert ist. Man kennt derartige Hilfetexte schon seit langer Zeit (seinerzeit vielfach über Inline-Event-Handler zusammengebaut), weshalb das Placeholder-Attribut auch eines der HTML5-Features war, die bereits frühzeitig in allen modernen Browsern implementiert wurden.

Den gesamten Beitrag lesen


Samstag31. Dezember 2011

Es hat nur wenige Tage gebraucht, um mit Sublime Text 2 warm zu werden. Dieser schlanke, spartanisch aussehende Editor hat es faustdick hinter den Ohren und mich erstaunlich schnell verzaubert. Das schönste daran, es gibt ihn sowohl für Windows, OSX als auch unter Linux. Es ist also überhaupt kein Problem, als Entwickler zwischen den einzelnen Welten hin- und herzuspringen, die Entwicklungsumgebung ist immer mit dabei.

Sublime Text 2 kommt mit einer ganzen Reihe verschiedener Color-Schemes daher. Ich persönlich mag dunkle UIs, weil ich oft bis tief in die Nacht programmiere und kann das Monokai-Theme empfehlen (gibt’s übrigens auch für Coda).

Eines der Highlights des Editors sind die zahlreichen Plugins. Zunächst solltet Ihr Euch aber Package Control installieren, einen bequemen Paket-Manager für Sublime Text 2. Über diesen könnt Ihr dann bequem aus Liste die zu installierenden Pakete auswählen, die Installation geschieht in der Regel vollautomatisch. Als Empfehlung hier eine kleine Auswahl der bei mir installierten Pakete:

  • Alignment - erleichtert die Ausrichtung des Quelltextes, z.B. vertikale Ausrichtung an Gleichheitszeichen
  • BracketHighlighter - Hervorhebung zusammengehöriger Klammern
  • Sublime JSLint - vollautomatisiertes Linting für JavaScript Code aus dem Editor heraus. Bequemer geht es nicht mehr
  • Tortoise - Speziell für Windows User interessant, erweitert es den Editor um Menüeinträge und Keyboard-Shortcuts zur Ansteuerung von Tortoise, dem defakto Standard-SVN-Client unter Windows
  • Zen Coding - komplexes Plugin zur Code-Vervollständigung für HTML & CSS

JSLint Konfiguration

Obgleich das JSLint Plugin auf Anbieb funktioniert (um eine Java-Runtime braucht man sich nicht kümmern, die kommt gleich mit), ist es dennoch sinnvoll, dem Linter ein wenig Wind aus den Segeln zu nehmen, um nicht von tausenden angeblichen Fehlermeldungen zugeschüttet zu werden. Die Konfiguration erfolgt über ein Config-File, welches man im Editor selbst über Preferences->Package-Settings->JSLint->Settings-Default erreicht.

Unter “jslint_options” kann man hier den Linter entsprechend der eigenen Vorlieben anpassen. Folgende Optionen habe ich gesetzt:

—predef $,document
Wer wie ich viel mit jQuery arbeitet, wird um die Option predef nicht herumkommen. Sie dient dazu, JSLint über globale Variablen zu informieren, auf die der zu prüfende Code zugreift und deren Benutzung somit nicht als Fehler gewertet wird. Für jQuery sind das mindestens $, bzw. jQuery und document.
—white
Ist meinem persönlichen Coding-Stil geschuldet, dass ich nicht von JSLint über die Verwendung von Leerzeichen belehrt werden will.
—browser
Damit werden typische gobale Variablen der Browser verfügbar, z.B. window.
—sloppy
Sollte immer aktiviert werden, solange man noch nicht mit “use strict”; arbeitet.

Das ganze sieht dann fertig so aus:

// Options pass to jslint.
"jslint_options": "--predef $,document --white --sloppy --browser"

Eine vollständige Liste der Optionen gibt es hier. Hat man das hinter sich gebracht, kann man den Linter jederzeit mit Crtl+J anschmeißen und sich anschließend gemütlich durch die Fehlerliste navigieren. So bequem hatte ich es bisher in keinem Editor.

 

 


Montag18. Juli 2011

Datums- und Zeitangaben zu formatieren ist immer wieder eine eher lästige Angelegenheit im Programmieralltag. Speziell, wenn später Anwender von verschiedenen Orten dieser Welt darauf zugreifen und damit einfach umgehen sollen. Schon die feinen Unterschiede in der Datumsschreibweise zwischen dem deutsch- und dem englischsprachigen Raum stiften oft genug Verwirrung.

Ein Beispiel: In allen drei Varianten ist der gleiche Tag gemeint – ohne die Landeszuordnung dahinter, ist eine eindeutige Zuordnung von Tag und Monat gar nicht so einfach.

  • 6/15/2009 (en-US)
  • 15/06/2009 (fr-FR)
  • 2009/06/15 (ja-JP)

Um diesem Problem zu begegnen, unterstützen alle halbwegs modernen Browser (und damit auch der IE) die Methode Date.toLocaleString(), welche Datum & Zeit anhand der Browsereinstellungen im jeweils landestypischen Format ausgibt. Aus dem eher hässlichen Standard-GMT-String “Mon Jul 18 2011 11:56:29 GMT+0200” wird hierzulande “Montag, 18. Juli 2011 11:56:29”.

Weniger schön ist, dass im Chromium-Projekt seit langer Zeit ein ungefixter Bug (Issue 29779, eingetragen im Dezember 2009) schlummert, der statt “Monday, 18 January 2010 4:47:42 PM” eine solche Ausgabe provoziert “Mon Jan 18 2010 16:47:42 GMT+1100 (AUS Eastern Daylight Time) “. Nicht nur, dass keine Umformung in ein lokales Datumsformat stattfindet, durch die zusätzliche ausformulierte Zeitzonen-Angabe wird der String sogar noch länger und damit schwerer zu handhaben. Und da sich sowohl Google Chrome als auch Safari bei diesem Projekt bedienen, erben die beide Browser eben jenese Problem.

Ein Workaround – der eigentliche Aufhänger für diesen Blogpost –  ist dabei gar nicht schwer. Denn das was Date.toLocaleString() ausgibt, ist lediglich eine Aneinanderreihung von lokalem Datum ( Date.toLocaleDateString() ) und lokalem Zeitformat ( Date.toLocaleTimeString() ) und für beides gibt es spezielle – und vor allem bugfreie – Methoden. Also einfach die beiden Einzelstrings miteinander verketten und fertig.

var date = new Date();
var localeString = date.toLocaleDateString()+" "+date.toLocaleTimeString();

Ich hoffe, dem einen oder anderen hilft dieser kleine Tipp.

 


Freitag28. Januar 2011

Ich bin ganz sicher nicht der klassische Programmierertyp und so lerne ich Programmiersprachen – im konkreten Fall JavaScript –, in dem ich mich herausfordernden Projekten stelle, um dabei Neues zu lernen. Leider ist dieses “Neue” nicht immer ganz logisch und führt schonmal dazu, dass sich Stirn und Tischplatte unaufhaltsam anzuziehen scheinen. So auch das Thema Pointer in JavaScript, welches mir gestern Abend aufgestoßen ist.

Wenn man ein wenig Erfahrung aus anderen Programmiersprachen wie C mitbringt, dann ist einem der Unterschied zwischen einem Objekt und dem Pointer auf ein Objekt bekannt. Das entscheidende dabei: Bei C kann man sehr einfach festlegen, ob man einer Variable eine Objektkopie zuweist oder nur einen Pointer auf das Originalobjekt erzeugt. Bei JavaScript sieht das etwas anders aus.

Obgleich in JavaScript so ziemlich alles als Objekt betrachtet werden kann, so gibt es doch feine aber entscheidene Unterschiede, wie diese intern behandelt werden. Folgender Code machte mich stutzig:

var layoutCSS = {
    'width': 'auto',
    'min-width': '720px',
    'max-width': '80em'
};
var minSettings = layoutCSS;
minSettings['max-width'] = 'none';
console.log(minSettings); //"none"
console.log(layoutCSS); //"none"

Wie man sieht, wird in diesem Beispiel nicht etwa eine Kopie des Objekts layoutCSS in minSettings angelegt, sondern lediglich ein Pointer auf das Originalobjekt. In der Konsequenz ändert sich der Inhalt des OriginalObjekts layoutCSS bei Zuweisungen an minWidth. Gut zu wissen, denn in JavaScript ist dieses Verhalten auf Arrays und Objekte begrenzt. Strings hingegen werden kopiert, obwohl sie intern ebenfalls wie Objekte behandelt werden. Aufklärung darüber, wie JavaScript mit Pointern umgeht, liefert der Artikel Understanding Pointers in JavaScript.

Soweit so nervig gewöhnungsbedürftig. Wie aber kommt man jetzt zu seiner Kopie bzw. Clone eines Arrays oder eines Objekts? Leider ist es auch hier so – ähnlich wie beim Versuch, ein assoziatives Array zu sortieren – dass JavaScript den Programmierer bei dieser Frage weitgehend im Stich läst. Handarbeit ist demnach angesagt. Einen ersten Lösungsansatz liefert der Artikel von Brian Huisman "How to copy arrays and objects in Javascript", der eine .clone() Methode einführt:

Object.prototype.clone = function() {
  var newObj = (this instanceof Array) ? [] : {};
  for (item in this) {
    if (item == 'clone') continue;
    if (this[item] && typeof this[item] == "object") {
      newObj[item] = this[item].clone();
    } else newObj[item] = this[item]
  } return newObj;
};

Speziell für jQuery-Nutzer gibts von John Resig höchstpersönlich noch einen kürzeren Vorschlag über die jQuery.extend():

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

Zwar finde ich persönlich diese Inkonsistenz bei JavaScript etwas nervig, dass man selbst nicht über Kopie oder Pointer wählen kann, aber was soll's. Wenigstens gibt es halbwegs einfache Lösungswege aus diesem Dilemma. An dieser Stelle ein ganz dickes Dankeschön an das kalifornische JavaScript-Lexikon Dirk Ginader, der mir mit diesen Links den Abend gerettet hat.


Seite 1 von 3 Seiten

 1 2 3 >