seeseekey.net - Invictus Deus Ex Machina

Für ein kleineres Projekt habe ich vor einiger Zeit eine HTML5-Single-Page-Application entwickelt und stand dann vor dem Problem wie ich unterschiedliche Views innerhalb dieser Seite realisiere. Da ich möglichst ohne schwerfälliges Framework auskommen wollte, habe ich mich für eine Lösung mittels jQuery entschieden. Im HTML habe ich dazu mehrere Views definiert:

<div id="options" class="widget" style="display: none">
</div>

<div id="game" class="widget">
</div>

Der Inhalt des div-Elements mit der Id options ist dabei standardmäßig ausgeblendet. Nun kann die Ansicht der beiden Views mittels der Funktion switchView gewechselt werden:

switchView() {
	  
    if(this.activeView==this.Views.Game) {
        $("#game").css({"display": "none"});
        $("#options").css({"display": "block"});
        this.activeView = this.Views.Options;
    }
    else if (this.activeView==this.Views.Options) {
        $("#options").css({"display": "none"});
        $("#game").css({"display": "block"});
        this.activeView = this.Views.Game;
    }
}

In der Funktion wird das CSS der jeweiligen div-Elemente manipuliert. Dadurch wird die Sichtbarkeit der Blöcke gewechselt und man hat eine einfache View Umschaltung realisiert.

Enums gibt es unter JavaScript nicht. Damit könnte der Artikel an dieser Stelle vorbei sein. Allerdings gibt es viele Wege um in JavaScript ein Verhalten oder die Strukturen zu simulieren, die am Ende gewünscht sind. Bei einem Enum würde dies so aussehen:

var DayOfTheWeek = {
  Monday: 1,
  Tuesday: 2,
  Wednesday: 3,
  Thursday: 4,
  Friday: 5,
  Saturday: 6,
  Sunday: 7
};

Genutzt wird das ganze dann so:

var dayOfTheWeek = DayOfTheWeek.Thursday;

Wer mehr über die Hintergründe rund um Enums unter JavaScript erfahren möchte dem sei der ausgezeichnete Blogbeitrag Enums in Javascript empfohlen.

Für ein kleines Projekt an dem ich zur Zeit arbeite war ich mal wieder auf der Suche nach einer sprintf Implementation für JavaScript. Und wieder wurde ich bei der gleichen Implementation – wenn auch erheblich weiterentwickelt – fündig. Seit 2007 arbeitet Alexandru Marasteanu an seiner Implementation der sprintf Funktion für JavaScript. Mit der Hilfe dieses Funktion wird so sprintf-like aus einem:

sprintf("%2$s %3$s a %1$s", "cracker", "Polly", "wants")

ein:

Polly wants a cracker

Der Quelltext ist auf GitHub zu finden. Die Implementation ist freie Software und unter der 3-Klausel-BSD-Lizenz lizenziert.

Schachapplikationen gibt es wie Sand am mehr und trotzdem ist von Tim Wölfle entwickelte PlainChess etwas besonderes in dem Berg an Schachapplikationen. Es handelt sich um ein mehrspielerfähige und vollständig in Webstandards wie HTML und JavaScript entwickelte Implementation.

PlainChess im Offline-Modus

PlainChess im Offline-Modus

Dabei beherrscht PlainChess bis auf einige Spezialfälle des Remis, alle Schachregeln. PlainChess ist unter der GPL3 lizenziert und damit freie Software – der Quelltext ist auf GitHub zu finden.

Spätestens mit verteilten Systemen wie Git, ist bei vielen der Erklärungsbedarf gestiegen. So werden in Firmen Richtlinien definiert, wie nun gebrancht und gemergt werden darf. Da eine grafische Visualisierung solcher Prozesse wesentlich eingängiger ist, gibt es Frameworks und Bibliotheken wie Gitgraph.js. Dabei handelt es sich um eine JavaScript-Bibliothek um solche Graphen schnell und einfach zu erzeugen und diese auf Webseiten einzubinden.

gitgraphjs.com

gitgraphjs.com

Lizenziert ist der Quelltext unter der MIT-Lizenz und damit freie Software. Der Quelltext kann über GitHub bezogen werden. Die offizielle Seite des Projektes ist unter gitgraphjs.com zu finden.

Bei vielen Webapplikationen ist die Internationalisierung, also die Anpassung an unterschiedliche Sprachen, ein wichtiges Kriterium. Damit man bei diesem Thema nicht alleine gelassen wird, informiert die Webseite FormatJS darüber und zeigt Wege die eigene Webapplikation internationalisieren.

formatjs.io

formatjs.io

Die dabei verwendeten Bibliotheken sind unter freien Lizenzen wie der BSD- und MIT Lizenz lizenziert und auf GitHub zu finden.

Zwar steht AJAX für Asynchronous JavaScript, aber trotzdem kann man solche Abfragen auch synchron durchführen. Mit jQuery kann man das ganze dabei wie folgt bewerkstelligen:

$.ajax({url: "getName.php", 
	type: "get",
	data:{lang:"american"},
	success: function(result){
		name=result;
}, async: false});

Wichtig ist, das der Schlüssel async auf false gesetzt ist – das Verhalten ist in neueren Versionen von jQuery als veraltet gekennzeichnet, kann aber noch genutzt werden.

Wenn man Spiele für den Browser mittels Javascript entwickelt, so kann es je nach Spiel passieren, das man Funktionen für das sogenannte Path Finding benötigt. Gemeint sind dabei Algorithmen welche einen Weg von A nach B auf einem Spielfeld finden. Mittels der PathFinding.js Bibliothek, kann man solche Funktionalität einfach in seinen Projekten nutzen.

Die Testapplikation für PathFinding.js

Die Testapplikation für PathFinding.js

Lizenziert ist PathFinding.js unter der MIT-Lizenz und damit freie Software. Der Quelltext ist auf GitHub zu finden. Eine Demo um die Bibliothek mittels eines grafischen Frontends zu testen, gibt es auf den Seiten des Autors.

Mit den in den letzten Jahren zunehmenden Fähigkeiten der Browser, tauchten vermehrt Engines auf, mit denen einfach 2D und 3D Anwendungen und Spiele programmiert werden konnten. Eine dieser Engine ist dabei Babylon.js. Dabei handelt es sich um eine auf HTML5 und WebGL basierende 3D-Engine, welche in Javascript implementiert ist. Sie enthält unter anderem einen kompletten Szenengraph mit Entitäten wie Licht, Kameras, Materialien und Meshes. Daneben deckt die Funktionalität der Engine Themengebiete wie Kollision, Physik, Animation, Partikel und vieles mehr ab.

Ein einfaches Beispiel

Ein einfaches Beispiel

Ausprobiert werden kann die Engine auf dem Babylon.js Playground. Lizenziert ist Babylon.js unter der Apache License in der Version 2.0 und damit freie Software. Der dazugehörige Quelltext ist auf GitHub zu finden. Daneben kann die Engine auch über die offizielle Seite unter babylonjs.com bezogen werden.

In den ersten Jahren nach seiner Erfindung war Javascript nicht mehr als ein Spielzeug. Mittlerweile hat sich die Sprache allerdings emanzipiert. Dinge welche früher unmöglich erschienen sind nun problemlos möglich. Ein eindrucksvolles Beispiel für diese Aussage ist Javascript PC Emulator von Fabrice Bellard.

Der Emulator bootet ein Linux

Der Emulator bootet ein Linux

Der Emulator simuliert einen x86-PC komplett im Browser. Im einzelnen simuliert er dabei unter anderem eine 32-Bit CPU, einen Interrupt Controller und Timer sowie ein IDE Interface mit einer entsprechenden Festplatte. Der Autor führt die technischen Details auf seiner Webseite weiter aus. Der Emulator selbst ist unter bellard.org/jslinux/ zu finden.