Veränderte Größenangaben mit JavaScript ermitteln

Durch die CSS-Angaben max-width und max-height können Größenangaben von HTML-Elementen verändert werden. Um die veränderte Größe abzufragen, können dann die Eigenschaften clientWidth und clientHeight verwendet werden.

Das folgende Beispiel veranschaulicht den Sachverhalt.
Veränderte Größenangaben mit JavaScript ermitteln weiterlesen

JavaScript Code Completion mit JSDoc

JavaScript ist ein perfektes Beispiel dafür, wie eine einst verrufene Skriptsprache immer mehr an Zuspruch gewinnen kann. Während man 1997 noch weitläufig dazu geraten hat, JavaScript im Webbrowser zu deaktivieren, so ist man 17 Jahre später anderer Meinung. Mittlerweile können mit JavaScript sogar Mac-OS-Programmabläufe automatisiert werden (siehe JavaScript for Automation) oder native Anwendungen für die Windows-Runtime geschrieben werden. Mit Chrome OS stellt Google sogar ein ganzes Betriebssystem auf den Markt, welches fest auf die Applikationsentwicklung mit JavaScript ausgerichtet ist.

Der aktuelle JavaScript-Trend macht sich auch in den IDEs bemerkbar. JavaScript ist nämlich im Gegensatz zu objektorientierten Programmiersprachen wie Java oder C# nicht typsicher. Die fehlende Typsicherheit in JavaScript macht die Programmiersprache zwar dynamischer aber zugleich auch anfälliger für Programmierfehler. Um der Fehleranfälligkeit vorzubeugen, gibt es bereits in einigen IDEs verschiedene Lösungswege. In Visual Studio wird beispielsweise JavaScript-Code während der Programmierung im Hintergrund ausgeführt, um durch IntelliSense eine sehr genaue Code-Vervollständigung anbieten zu können. Andere IDEs, wie beispielsweise IntelliJ IDEA oder NetBeans, machen sich Code-Kommentare zu Nutzen, um Objekte im Rahmen ihrer Verwendung auswerten zu können.

Die Code-Vervollständigung durch Kommentare zeige ich im folgenden Abschnitt.
JavaScript Code Completion mit JSDoc weiterlesen

Drag & Drop of Images with HTML5

This is just a basic code snippet which shows how you can handle Drag & Drop interactions with a web browser and HTML5. If you select multiple images and drag them into the drop target, then the file names of the dropped images will be logged.
Drag & Drop of Images with HTML5 weiterlesen

Best practice: Truthy and falsy values in JavaScript

The following example shows how the types of functions and objects can be used to detect the capability of a web browser. The example shows the detection of the WebRTC functionality in a standard way and then uses the ternary operator and the behaviour of truthy and falsy values to refactor the code. The business logic is written in a self-executing function.
Best practice: Truthy and falsy values in JavaScript weiterlesen

Namespaces in JavaScript

Es gibt verschiedene Möglichkeiten, um eine Art „Namespaces“ in JavaScript zu definieren. Mir gefällt dabei folgender Ansatz, der es ermöglicht, Module innerhalb eines gemeinsamen Namensraums zu definieren:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.wlc = window.wlc || {};
 
// Namespace
wlc.DocumentHandler = (function() {
 
  // Module
  function DocumentHandler() {
    this.originalTitle = 'Hello World!';
  }
 
  DocumentHandler.prototype.alertTitle = function() {
    alert(this.originalTitle);
  };
 
  return DocumentHandler;
 
})();
 
var documentHandler = new wlc.DocumentHandler();
documentHandler.alertTitle();

HTML5 Tile Based Canvas Game Engine

Im Zuge des Berlin Mini Game Jams im Februar 2014 habe ich mit einem Freund ein tile-based HTML5 Spiel gebaut. Als Engine dafür haben wir Crafty benutzt. Der Einstieg in die Entwicklung mit „Crafty“ ist sehr einfach und man erzielt wirklich schnell, tolle Ergebnisse. Man kann mit dem Tiled Map Editor sogar Levels in einer graphischen Oberfläche erzeugen und mit dem TiledMapBuilder in Crafty laden.

Weil ich von der Einfachheit von Crafity so begeistert bin, möchte ich an dieser Stelle Links zu tollen Anfänger-Tutorials posten: