JavaScript – die schlechten Seiten

Haben Sie mal versucht, in JavaScript 1 + 2 mit 3 zu vergleichen? Oder undefined einen Wert zuzuordnen?
Versuchen Sie es jetzt. Sind die Ergebnisse befriedigend?

JavaScript ist eine sehr kontroverse Programmiersprache. Sie bietet zwar Ansätze einer Objektorientierten Programmiersprache, ist schlussendlich aber bloss prototypenbasiert.

Das Problem von JavaScript sind wohl die vielen Köche, die den Brei verderben, um es metaphorisch auszudrücken.

Im folgenden möchte ich nicht JavaScript bashen oder so – Ihre Meinung dürfen Sie sich selber bilden. Ich möchte Ihnen jedoch einige weitere Beispiele von meiner Meinung nach abnormalen Möglichkeiten nennen.

  • Zählen Sie “4” und 4 zusammen.
  • Ziehen Sie 4 von “4” ab.
  • Vergleichen Sie parseInt(“06”) mit parseInt(“09”)
  • Kontrollieren Sie 0 == “”, false == “0”, und Varationen

Ich wünsche Ihnen viel Spass damit – wenn Ihnen weitere Beispiele einfallen, die Ihrer Meinung nach Wert sind, in diese Liste aufgenommen zu werden, so schreiben Sie sie in die Kommentare!

Update:
Weitere unterhaltende Beispiele finden sich auch in folgenden Video: https://www.youtube.com/watch?v=2pL28CcEijU (wobei ich nicht jedes WTF als solches bezeichnen würde)

cortanas emotionen

Cortana vs. Siri #1: Emotionen

Auch wenn Microsofts Sprachassistent noch immer in der Beta-phase ist, hat Cortana bereits jetzt viele Features, die bei der älteren Schwester Siri von Apple nicht zu finden sind.

Das Feature, mit dem ich heute mit diesem Artikel beginnen möchte, sind die Emotionen. Siri könnte man als violett leuchtendes Mikrofon bezeichnen. Sie beantwortet die Fragen unter Umständen tatsächlich mit einem emotionalen Inhalt (fragen Sie Siri mal, ob sie Sie heiraten möge); eine optische oder akustische Veränderung tritt jedoch nicht auf. Das Mikrofon bleibt violett und Siri spricht noch immer so monoton wie anhin.

Bei Cortana ist das anders. Gerüchte sprechen von 6 verschiedenen Tonlagen für ihre Stimme: rücksichtsvoll, einfühlsam, erfüllt (aufgeregt), beschämt (peinlich), nachdenklich, und entschuldigend. Bei der optischen Rückmeldung sind es bereits jetzt 18: ruhig, opimistisch 1 & 2, erinnern, “tile flip”, empfindlich V1 & V2, beschämt, Alarm, springend, mehr verlangend, zurückhaltend, erfüllt, nachdenklich, Musik erkennend, zuhörend, sprechend und denkend. Vergleichen Sie dazu obiges animiertes gif, um die verschiedenen Zustände zu sehen.

Was halten Sie von diesen Emotionen? Sind sie bloss eine kleine Spielerei oder wird derartiges Cortana zum Durchbruch verhelfen? Schreiben Sie Ihre Meinung in die Kommentare!

Formatierter Source Code in Indesign und Co. einbinden

Sei es eine Bachelor-, Doktor- oder bloss eine kleine Schularbeit im Bereich Informatik: ohne Code kommt sie kaum aus. Doch wie kann man den Code, so schön wie er in Eclipse und Co. formatiert wird, ohne LaTeX-Kenntnisse in Word oder InDesign einbinden?

Einen Screenshot aufzuzeichnen ist die eine Möglichkeit. Dies geht entweder mit den Tastaturkürzeln cmd + shift + 3 bzw. cmd + shift + 4 auf dem Mac oder auf dem Windows-PC mit folgender Anleitung: http://windows.microsoft.com/de-CH/windows-xp/help/setup/take-a-screen-shot

Doch für längeren Code, der den Bildschirm sprengt, lohnt sich diese Herangehensweise nicht. Doch zum Glück gibt es noch mindestens eine andere Lösung: Exportieren Sie den Code mit file -> print -> adobe pdf bzw. datei -> drucken -> adobe pdf aus eclipse oder ähnlich zu einem pdf, das sie problemlos einbinden können. Falls die Auswahl Adobe pdf als Drucker nicht verfügbar ist, können Sie die freeware CutePDF Writer herunterladen und im Druckdialog auswählen. Doch Vorsicht wenn Sie dieses Programm wählen, dass Sie nicht aus Versehen die ask-toolbar installieren.
Je nach Druckdialog ist es auch gar nicht nötig, Adobe PDF als Drucker auszuwählen, und der Druckdialog bietet eine eigene Möglichkeit, den Code als PDF zu exportieren (vgl. folgender Screenshot).
Druckdialog TextWrangler

Element mit CSS in der Mitte positionieren

Um ein Element in der Mitte eines anderen Elements mit CSS zu positionieren muss man unter Umständen etwas improvisieren.

Für die horizontale Mitte ist es keine Schwierigkeiten. Folgendermassen mache ich es jeweils:

.container {
  display: block;
  text-align: center;
  width: 100%;
}

.child {
  position: relative;
  margin: auto;
}

Um aber die vertikale Mitte zu erreichen, ist es leider ein wenig schwieriger und vor allem kontextabhängig.

Wenn das Layout aus Tabellen besteht, so reicht vertical-align : middle;. Leider funktioniert dies nicht mit anderen Elementen wie zum Beispiel einem p in einem div.
Diese könnte man per CSS mit

.container {display: table;}

.child {
    display: table-cell;
    vertical-align: middle;
}

zu einer Tabelle machen.

Wenn bloss eine einzelne Zeile Text zentriert werden soll, so kann man dies mit line-height: Irgendwieviele px; erreichen.

Für block Elemente, die man nicht zu einer Tabelle machen möchte, gibt es noch die Möglichkeit von negativem margin und absoluter positionierung. Das sähe zum Beispiel folgendermassen aus:

.container {
  position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

Diese Lösungen funktionieren in den meisten Browsern, jedoch leider nicht mit allen HTML Tags. Es gibt ausserdem noch weitere Lösungen, mit denen ich jedoch noch keine Erfahrungen gemacht habe. Was haben Sie für Erfahrungen gemacht? Welche Lösung bevorzugen Sie? Schreiben Sie Ihre Antwort in die Kommentare oder senden Sie sie mir per e-Mail.

Website in PowerPoint einbinden

Wenn Sie eine Microsoft PowerPoint Präsentation vorzeigen, so haben Sie bestimmt auch schon die Vorteile der Referenztools genossen. Ob die Notizen, der Laserpointer oder die Stoppuhr – auch ich bevorzuge diese Ansicht zum präsentieren. PowerPoint wechselt dabei, wenn man den Computer an einen Beamer angeschlossen hat, von “Die Anzeige duplizieren” auf “Die Anzeige erweitern”, so dass der Beamer als zweite Anzeige, eben für die Präsentation, dient.

Durch diesen automatischen Wechsel kann man anschliessend nicht einfach so ein anderes Programm wie z. B. einen Browser öffnen und es auf dem Beamer anzeigen. Das verschwert bedauerlicherweise das anzeigen von Websites während einer Präsentation. Es gibt zum Glück einige Lösungen.

Lösung #1

Screenshots: lassen Sie durch ein Programm wie z. B. Softmatic Weblayers einen Screenshot einer Website machen und binden Sie diesen wie ein anderes Bild in die Präsentation ein.

Lösung #2

Wenn sie Ihre Website über https aufrufen können, so können Sie unter Einfügen -> Apps -> Store nach “Web Viewer” suchen und installieren. Das Einfügen funktioniert ganz intuitiv wie mit jedem anderen Element auch.

Lösung #3

Aktivieren Sie unter den Optionen -> Menüband anpassen die Entwicklertools. Nach dem Speichern der Einstellungen öffnen Sie diesen neuen Bereich und klicken dort auf Weitere Steuerelemente. Wählen Sie das Element Microsoft Web Browser und platzieren Sie es Ihren Bedürfnissen entsprechend. Doppelklicken Sie auf das Element, um den Code Editor aufzurufen. Ersetzen Sie den Code durch folgende Zeilen:
Private Sub WebBrowser1_DocumentComplete(ByVal pDisp As Object, URL As Variant)
If URL = "" Then WebBrowser1.Navigate "http://www.genieblog.ch/"
End Sub

http://www.genieblog.ch/ müssen Sie durch die von Ihnen gewählte URL ersetzen. Damit sollte Ihr Frame funktionieren.
Hinweis: Wenn folgende Fehlermeldung kommt: “Dieses ActiveX-Steuerelement kann nicht eingefügt werden”, konsultieren Sie folgende Support-Seite: http://support.microsoft.com/kb/2793374/de

Cubietruck

Cubietruck mit Lubuntu: Tastaturlayout anpassen

Nach dem Aufsetzen von Lubuntu auf dem Cubietruck fällt auf, dass man nie nach dem Tastaturlayout gefragt wurde. Da es mühsam ist, immer die passenden Tasten zu suchen, ist es naheliegend, dass man das Tastaturlayout wechseln möchte. Nur wie?

Der Cubie sollte mit dem internet verbunden sein für die nächsten Schritte.
Starten Sie zunächst das Terminal / die Konsole.

Suchen Sie nach möglichen Sprach-Paketen mit folgenden Befehlen:
$ apt-cache search xfonts-intl
$ apt-cache search language-pack

Wenn Sie ein Paket sehen, das Sie installieren möchten, können Sie es mit $ sudo apt-get install xfonts-intl-european
$ sudo apt-get install language-pack-de language-pack-gnome-de
installieren, wobei de durch die von Ihnen verwendete Sprache ersetzt werden muss (z. B. en für Englisch).

Nach der Installation der Sprachpakete können Sie das Tastaturlayout auf zwei verschiedene Arten anpassen.

Anpassen des Tastaturlayouts für die momentane Session

Wenn Sie das Tastaturlayout nur für die Momentane Session ändern möchten, verwenden Sie $ setxkbmap -layout ch wobei ch der Ländercode ist. Ersetzen Sie ihn z. B. durch de für Deutschland.

Anpassen des Standardtastaturlayouts

Um das Standardtastaturlayout zu ändern, verwenden Sie folgende Befehle:
$ sudo nano /etc/default/keyboard
um die Datei /etc/default/keyboard zu bearbeiten. Ändern Sie hier XKBLAYOUT="us" zu z. B. XKBLAYOUT="ch" wobei ch wiederum der Ländercode ist.
Nun müssen Sie bloss noch mit sudo reboot Ihren Cubietruck neu starten und schon verwenden Sie das gewünschte Tastaturlayout.

Cubietruck

Lubuntu als Standardbetriebssystem auf dem Cubietruck – per Mac

Beim ersten Anschliessen vom Cubietruck (v/o Cubieboard 3) startet automatisch das Betriebsystem Android. Da dieses nicht das gesamte Potential des Cubies ausschöpft, kann man es zum Glück auf ganz einfache Weise durch Lubuntu austauschen. Das geht zum Beispiel folgendermassen:

Vorbereitungen

Folgende Dinge sollten Sie bereitgelegt haben:

  • Cubietruck mit zugehörigen Kabeln
  • den Mac
  • das Programm Live Suit
  • ein Image des Betriebssystems (Lubuntu)

Hinweis: Wenn Sie nicht wissen welche Lubuntu Version Sie wählen sollten, achten Sie auf den Namen der Datei. Wenn Sie Ihren Cubietruck per Hdmi an den Bildschirm anschliessen benötigen Sie die Datei auf -hdmi, entsprechend bei -vga wenn Ihr Bildschirm per VGA angeschlossen ist.

Haupthandlungen

Starten Sie das Programm Live Suit und wählen Sie indem Sie oben links auf “Image” klicken die heruntergeladene *.img Datei aus. Falls in Ihrem Download-Ordner noch immer die *.gz Datei vorhanden ist, müssen Sie diese zuerst entpacken. Dies sollte durch einen Doppelklick auf die Datei automatisch passieren.

Wenn Sie das nicht bereits gemacht haben, versorgen Sie Ihren Cubietruck mit Strom und hängen Ihn an Ihren Bildschirm. Wenn irgendwelche Lämpchen am Cubie angehen, so drücken Sie ein Weilchen auf den “Power on” Schalter, bis die Lämpchen abgehen und der Cubie ausgeschaltet ist. Verbinden Sie nun das MiniUSB-Kabel mit dem Mac (aber noch nicht mit dem Cubietruck). Drücken Sie den mit “FEL” beschrifteten Schalter auf dem Cubie. Nach ca. 10 Sekunden gedrückt halten stecken Sie das MiniUSB-Kabel in den Cubie. Halten Sie den “FEL”-Schalter dabei immer noch gedrückt. Nach wenigen Sekunden sollte nun Live Suit eine Frage stellen. Ist das der Fall, können Sie “FEL” loslassen. Beantworten Sie die Frage von Live Suit mit “YES”. Damit wäre der Zauber schon vorbei – nach wenigen Minuten wird die Imagedatei auf dem NAND vom Cubie installiert sein und starten!

Ich wünsche viel Erfolg beim Nachmachen!

libGDX Logo

Fenstergrössenänderung unterdrücken in libGDX

Ein weiteres Game-Projekt im Java-Framework libGDX. Ein weiteres Problem, das einen kurzen Blogbeitrag wert ist: die Änderung der Fenstergrösse.

Wann auch immer ich etwas programmiere, bin ich unendlich froh über den Umstand dass es nicht von Anfang an perfekt sein muss. Da ich leider kein Mozart der Informatik bin, mache ich Fehler – ich bin ja auch nur ein Mensch. Um diese Fehler zu finden, ist es von Vorteil, wenn man das Programm ab und zu ausprobieren kann, um die Änderungen zu testen. In libGDX geht das logischerweise auch. Da der build-Prozess für die Android bzw. iOs Applikation einigermassen lange dauert, und die jeweilige virtuelle Maschine sehr Ressourcenlastig ist, teste ich meine kleinen Änderungen als Desktopapplikation. Das Spiel-feeling ist bis auf die von Gyro-sensoren abhängigen Elementen identisch. Doch: man kann vom Standard her die Grösse des Fensters ändern! Sowas ist auf Mobilgeräten nicht möglich, weshalb diese Funktion doch eher störend ist, wenn man zum Beispiel mit der Maus eine Wischbewegung des Fingers imitiert und so aus Versehen die Fenstergrösse ändert. Die Grafiken verschieben und verzerren sich, man kann nicht weiter testen… Was also dagegen tun?

Um in der Desktopapplikation die Änderung der Fenstergrösse zu verhindern, ist es bloss nötig, dass man im Desktopprojekt die Datei DesktopLauncher.java bearbeitet. Zur Definition von config muss die boolessche Variable resizable auf false gesetzt werden, und schon lässt sich die Fenstergrösse nicht mehr ändern!

Der Code von DesktopLauncher.java sähe dann etwa folgendermassen aus:

package ch.genieblog.yourpackage;

import com.badlogic.gdx.backends.lwjgl.LwjglApplication;
import com.badlogic.gdx.backends.lwjgl.LwjglApplicationConfiguration;
import ch.genieblog.yourgame;

public class DesktopLauncher {
public static void main (String[] arg) {
LwjglApplicationConfiguration config = new LwjglApplicationConfiguration();
config.title = "yourGameTitle"; // Der Titel der Applikation
config.width = 480; // Die Breite der Applikation; entspricht der Breite
// eines durchschnittlichen Android-Smartphones
config.height = 800; // Die Höhe der Applikation; entspricht der Höhe
// eines durchschnittlichen Android-Smartphones
config.resizable = false; // und hier verhindern wir die Fenstergrössenänderung
new LwjglApplication(new spaceMaster(), config);
}
}

libGDX Logo

Irgendein Tastendruck in libGDX

Bei einem aktuellen Projekt eines Games in der Programmiersprache Java, das ich mithilfe des Frameworks libGDX erstelle, wollte ich an einem Punkt den Nutzer fragen, ob er bereit ist, weiterzuspielen. Dem Spielerlebnis zuliebe sollte dies auf keinen Fall über einen Ja/Nein Dialog geschehen.

Da mit libGDX das Spiel sowohl für Desktop-PCs wie auch für Android und iOs Mobilgeräte konzipiert sein würde, ist ein einfacher Klick auf den Bildschirm zwar für die Mobilgeräte angenehm, nicht jedoch für den Desktop-Nutzer, da dieser die Maus für die eigentliche Steuerung des Spiels nicht benötigt.

Es liegt also eine zweispurige Lösung nahe: für die Mobilgeräte sollte es reichen, wenn sie auf den Bildschirm tippen, der PC-Nutzer dagegen sollte eine Taste drücken, um das Spiel zu beginnen. Doch welche?

Tastatureingabe in libGDX

Generell kann eine Tastatureingabe in libGDX auf zwei Arten entgegengenommen werden: Einerseits kann ich immer wieder fragen “Hey, Tastatur, wurde gerade Enter gedrückt?”. Oder ich sage der Tastatur: “Hey, Junge, melde Dich doch wenn Enter gedrückt wurde!”. Ich bevorzuge die erste Lösung, da die render()-Funktion sowieso immer wieder aufgerufen wird, und dieser Weg in den meisten Beispielprojekten gewählt wird.

Wie funktioniert denn nun dieser Weg? Die Tastatureingabe wird bereitgestellt durch die Methode com.badlogic.gdx.Gdx.input.isKeyPressed(int key). Geprüft wird dann zum Beispiel folgendermassen:

// import com.badlogic.gdx.Gdx;
// import com.badlogic.gdx.Gdx;
// import com.badlogic.gdx.Input;
// import com.badlogic.gdx.Input.Keys;
if (Gdx.input.isKeyPressed(Input.Keys.ENTER)) {
// tu was du willst - Enter wurde gedrückt
}

Damit sind wir schon ziemlich nah am Ziel – wir müssen nur Input.Keys.??? anpassen, so dass die Tastatur nach der von uns gewählte Taste gefragt wird. Eine Liste mit den verschiedenen Input.Keys.* findest Du hier: http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/Input.Keys.html

Die Lösung

Doch nur welche Taste wollen wir denn nun verwenden? Genau, alle! Es soll nicht darauf ankommen, welche Taste der Nutzer drückt, er will doch einfach das Spiel starten. Da wir bestimmt keinen ewig langen Schalter à la if (rechts oder links oder bla oder bla...) haben möchten, gibt es zum Glück den Any Key! 😉

Dieser sieht folgendermassen aus, und löst unser Problem ausserordentlich elegant:

if (Gdx.input.isKeyPressed(Input.Keys.ANY_KEY)) {
// YAY, eine Taste wurde gedrückt
}

Und entsprechend mit der Abfrage nach Eingabe von Mobilgeräten:

if (Gdx.input.justTouched() || Gdx.input.isKeyPressed(Input.Keys.ANY_KEY)) {
// Wohoo, das Spiel kann starten!
}

Logarithmen von Hand ziehen

Wie zieht ein Taschenrechner den Logarithmus? Dieser Frage möchte ich in diesem Beitrag nachgehen und mit HTML und JavaScript den ersten Schritt eines entsprechenden Logarithmus-Zieher programmieren.

Von logb() zu lg()

Zuerst lohnt es sich, die Umrechnungsformel zum Zehnerlogarithmus anzusehen: logb(x) = loga(x) / loga(b)
Somit gilt logb(x) = log10(x) / log10(b) und den einzigen Logarithmus, der noch zu ziehen ist, ist der dekadische, auch geschrieben als lg().

Was soll das denn bringen? Den Logarithmus von 10 zu ziehen ist um Welten einfacher, als von den meisten anderen Zahlen. Ausserdem muss man so nur eine Weise einprogrammieren, wie der Logarithmus gezogen werden soll, und nicht für jeden anderen Logarithmus wieder einen eigenen Weg.

Den Logarithmus von 10 ziehen

Soweit so gut. Damit können wir uns ganz darauf konzentrieren, den Logarithmus von 10 zu ziehen. Beginnen wir zuerst mit dem einfachen Teil: wir erstellen ein Formular, in das der Nutzer seine Zahl eingibt, von der er den 10. Logarithmus gezogen haben will. Da wir nicht auf Math.log() oder ähnliches zurückgreifen möchten, werden wir auch auf Math.pow() und jQuery verzichten. Dass der Code dadurch nicht mehr so elegant wirkt ist Nebensache – er muss bloss den Zweck erfüllen.
Das könnte folgendermassen aussehen:

<form> 
<-- Ein Input Feld für die Zahl, --> 
<input type="text" id="zahl" size="40" placeholder="Zehnerlogarithmus von..." /> 
<-- ein Button um die Berechnung zu starten (der losHandler() wird gestartet) da wir das Programm ohne jQuery schreiben, ist es vertretbar, dass wir ein wenig Script im HTML Code verstecken (onclick) und die Trennung von Model, View und Controller missachten --> 
<input type="button" id="los" value="Los!" onClick="losHandler(); return false;" /> 
</form>
<-- und ein Output Paragraph für das Ergebnis. --> 
<p id="ergebnis"></p>

Danach schreiben wir den losHandler(). Dieser soll die Nutzereingaben lesen und verwerten können, sowie die wahre Logarithmusfunktion starten.
So kann man das lösen:

function ausweg(eingabe) {
/* Wenn der Nutzer eine Zahl kleine als 1 eintippt, sind wir machtlos mit unserer Methode */
return Math.log(eingabe) / Math.LN10;
}
function losHandler() {
/* für mögliche spätere Versionen die Basis variabel halten */
var basis = 10;
/* die Eingabe auslesen */
var eingabe = document.getElementById("zahl");
/* den Output Paragraphen vorbereiten */
var ergebnis = document.getElementById("ergebnis");
ergebnis.innerHTML = "";
eingabe = parseFloat(eingabe.value);
/* Eingaben valieren */
if (eingabe === null) {
alert("Keine Eingabe erhalten!");
}
/* für verschiedene Browser... (und zur bestimmten Absicherung) */
else if (eingabe === "") {
alert("Keine Eingabe erhalten!");
} else if (eingabe === undefined) {
alert("Keine Eingabe erhalten!");
} else if (isNaN(parseInt(eingabe))) {
alert("Bitte geben Sie nur Zahlen ein!");
} else if (eingabe < 0) {
alert("Bitte geben Sie nur Zahlen grösser als Null ein!");
/* und sonst Resultat ausgeben */
} else if (eingabe < 1) {
ergebnis.innerHTML = "log" + basis + "" + eingabe + " = " + ausweg(eingabe);
} else {
ergebnis.innerHTML = "log" + basis + "" + eingabe + " = " + log(eingabe, basis);
}
}

Der Ausweg ist nötig, da die von uns geschrieben werdende Funktion nicht imstande sein wird, Eingaben kleiner als 1 zu verarbeiten.
Kommen wir nun also zur Funktion log(), dem Herzstück unseres Kunstwerks, die den Logarithmus zur Basis zehn berechnet:

function log(wert, basis) {
var zahl = wert;
var gesucht = "";
/* eigentliche Rechnung. Gibt den Logarithmus mit 15 Stellen aus */
for (var i = 0; i < 15; i++) {
var a; c = 0;
for (a = 0; zahl >= power(basis, a); a++) {
c++;
}
c = c - 1;
zahl = zahl / (power(basis, c));
zahl = power(zahl, basis);
gesucht += c;
if (i === 0) {
gesucht += ".";
}
}
return gesucht.replace("0000000000", "0");
}

Wir beschränken uns immer nur auf eine Ziffer, genauer: auf die i-te Ziffer. Wir zählen dann die temporäre Zahl c in Einerschritten rauf, bis sie grösser ist oder entspricht dem eingegebenen Wert beim ersten Mal, die anderen Male die Eingabe ohne die vordersten i Ziffern. Die hinteren Ziffern werden jeweils mit zahl = power(zahl, basis) nach vorne geschoben.

Und für was steht power()? Das ist unser Ersatz für Math.pow(). Ja, zugegeben, diese Namenswahl ist nicht sehr einfallsreich. Dafür zwecksmässig. Die Funktion power() ist nicht sehr schwer und ziemlich selbsterklärend:

function power(basis, exponent) {
/* damit Potenzgesetze eingehalten werden */
if (exponent === 0) {
return 1;
}
/* Potenzfunktion */
else {
var k = basis;
for (var u = 1; u < exponent; u++) {
k = k * basis;
}
return k;
}
}

Damit ist unser Code komplett. Wenn Unser Code nicht einleuchtend ist, so schreib Deine Frage in die Kommentare.

Teste den Code hier aus: