Kategorien
JavaScript Mathematik

Lunar Lander

“Houston, Tranquility Base here. The Eagle has landed!”

Neil Armstrong, 20. Juli 1969

Am 20. Juli 1969, 17:44:00 UTC trennte sich die Mondlandefähre Eagle von der in einem Orbit um dem Mond kreisenden Apollo 11 und leitete die Abstiegssequenz ein. Dieses Landemanöver war ein Kampf gegen die Schwerkraft und die begrenzte Menge an Treibstoff: Bremste man zu stark, hätte der Treibstoff nicht gereicht und man hätte den vorzeitigen Rückflug antreten müssen. Bremste man zu schwach, wäre die Fähre unsanft gelandet und wohlmöglich beschädigt worden. Wie wir wissen, ist beides nicht passiert. Um 20:17:40 UTC setzte die Eagle mit einer Geschwindigkeit von 0,52 m/s sanft auf dem Mond auf. Es war alles genau kalkuliert. Der verbleibende Treibstoff hätte noch für etwa 50 Sekunden gereicht.

Dieses Landemanöver, bei dem die Welt den Atem anhielt, verfolgte auch der damals 17jährigen Schüler Jim Storer. Es ließ ihn wohl nicht los. Er wollte – so könnte man mutmaßen – auch auf dem Mond landen. Storer hatte über seine Schule Zugang zu einem Computer, einer DEC PDP-8. Wenig später, im Herbst 1969, realisierte er eines der ersten Computerspiele der Welt, das LUNAR LANDER GAME. Bei diesem rein textbasiertem Spiel muss man eine Fähre durch sukzessive Eingabe der Treibstoffrate sanft auf dem Mond landen.

LUNAR, so die Kurzform, war ein voller Erfolg. Digital Equipment Corporation (DEC) veröffentlichte den Source Code in ihrem Newsletter und wenig später erschienen die ersten Clone. LUNAR wurde nach BASIC portiert und 1973 in der einflußreichen Sammlung 101 BASIC COMPUTER GAMES veröffentlicht. Ebenfalls 1973 entstand der erste Clone mit grafischer Oberfläche. DEC benutze dieses Moonlander genannte Spiel, um sein neues, grafisches Terminal DEC GT40 vorzustellen.

Portierungen und Clone in weitere Sprachen folgten. Insbesondere für die damals aufkommenden programmierbaren Taschenrechner standen verschiedene LUNAR-Clone zur Verfügung. David Ahl, Herausgeber von BASIC COMPUTER GAMES, bezeichnet LUNAR 1978 als „by far and away the single most popular computer game“. Heute bezeichnet LUNAR LANDER ein Genre von Computerspielen, deren Ziel es ist, eine Fähre sicher auf dem Mond zu landen.

Jim Storer schrieb LUNAR in FOCAL 69. Sowohl diese Sprache als auch sein damaliger Computer stehen heute nicht mehr allgemein zur Verfügung. Um ein einfaches und möglichst originalgetreues Replay dieses wunderbaren Computerspiels zu ermöglichen, habe ich es basierend auf JavaScript als Web-App veröffentlicht. Node.js-Fans können es auch direkt im Terminal spielen. Der Code steht auf GitHub zur Verfügung.

Vielleicht kann dieses Recoding ein wenig die Faszination erahnen lassen, die dieses Spiel in der 70ziger- und frühen 80ziger Jahren ausübte. Spielt man es, so stellt man fest, dass Storer die Anforderung für eine „PERFECT LANDING“ recht hoch ansetzte. Neil Armstrong und das Apollo 11 Team hätten für ihre Landung nur ein „GOOD LANDING-(COULD BE BETTER)“ erhalten.

Kategorien
JavaScript Learn to Code

Silent Teacher

Das französische Code-Labor Toxicode hat eine Reihe von wunderbaren Learn-to-Code Apps herausgebracht. Eine besonders gelungene ist SILENT TEACHER. Spielerisch lernt man einfache Programmier-Konzepte wie Operatoren, Variablen, aber auch Arrays, Funktionen und bedingte Anweisungen kennen.

Der Name der App ist Programm: es wird nichts erklärt. Es werden lediglich elementare Programmier-Aufgaben gestellt. Durch Try-and-Error müssen die Spieler_innen die zugrunde liegenden Programmier-Regeln selbst herausbekommen.

SILENT TEACHER verwendet als Programmiersprache JavaScript. Damit eignet es sich hervorragend als Ergänzung zu JS Hero.

PS: Toxicode verwendet als Protokoll leider nicht das verschlüsselte HTTPS, sondern das unverschlüsselte HTTP. Aktuelle Browser warnen deshalb, dass die Seite nicht sicher ist. Das ist richtig. Da man jedoch keine persönlichen Daten in die App eingibt, ist das Risiko überschaubar.

Kategorien
JavaScript Learn to Code

Funktionen

Funktionen sind für Anfänger schwer zu verstehen. An einem kleinen Programm möchte ich ihre Arbeitsweise verdeutlichen. Das Programm stammt aus dem letzten Post:

let name = prompt('Wie heißt Du?');
alert('Hallo ' + name + '!');

Es fragt, wie man heißt und begrüßt einen nach Eingabe seines Namens. Ausprobieren kann man den Code, indem man ihn z.B. im JS Hero Playground eingibt.

Hier haben wir, vielleicht ohne es zu merken, zwei Funktionen, nämlich prompt() und alert(), benutzt. Diese beiden Funktionen werden uns von der JavaScript-Engine des Browsers zur Verfügung bestellt.

Funktionen kann man aber auch selbst schreiben. Das möchte ich an unserem kleinen Programm demonstrieren. Die Arbeitsweise des Programms ändert sich dabei nicht:

function welcome(name) {
  return 'Hallo ' + name + '!';
}

let name = prompt('Wie heißt Du?');
let greeting = welcome(name);
alert(greeting);

Dieses Programm macht genau dasselbe wie das obige Programm: Es fragt, wie man heißt und begrüßt einen. Die entscheidende Änderung ist die Einführung der Funktion welcome(). Wer mit JS Hero gearbeitet hat, erkennt sie vielleicht wieder: Es ist die Lösung der Lektion Strings. Hier sehen wir diese Funktion gewissermaßen in Aktion. Die Funktion selber nimmt einen Namen entgegen und gibt eine entsprechende Begrüßung zurück. Diese Arbeitsweise, ihre Definition, wird in den ersten drei Codezeilen festgelegt. Benutzt wird die Funktion in Zeile 6. Dort macht sie aus dem Namen, unsere Eingabe, die Begrüßung. Diese wird dann in Zeile 7 ausgegeben.

Die Rückgabe der Funktion welcome() muss man nicht in einer Variablen zwischenspeichern. Man kann die Rückgabe auch direkt an alert() weitergeben:

function welcome(name) {
  return 'Hallo ' + name + '!';
}

let name = prompt('Wie heißt Du?');
alert(welcome(name));

Nun stellt sich die Frage, wozu wir die Funktion eingeführt haben. Der ganze Code, so hat man den Eindruck, ist doch nur komplizierter geworden. Dies ist jedoch nur zum Teil richtig. Dort, wo wir die Funktion welcome() benutzen, ist der Code einfacher geworden. Anstatt mit dem Codefragment 'Hallo ' + name + '!' die Begrüßung zusammen zu bauen, brauchen wir nur die Funktionen welcome() aufzurufen. Um die Erzeugung der Begrüßung aus dem Namen brauchen wir uns an dieser Stelle nicht mehr zu kümmern.

Stellen wir uns nun vor, dass wir innerhalb eines Programms besagte Begrüßung an verschiedene Stellen ausgeben möchten. Dann ist es einfacher, die Funktion welcome() zu verwenden, anstatt immer wieder das Codefragment 'Hallo ' + name + '!':

let name = prompt('Wie heißt Du?');
alert('Hallo ' + name + '!');

let nickname = prompt('Wie lautet Dein Nickname?');
alert('Hallo ' + nickname + '!');
function welcome(name) {
  return 'Hallo ' + name + '!';
}

let name = prompt('Wie heißt Du?');
alert(welcome(name));

let nickname = prompt('Wie lautet Dein Nickname?');
alert(welcome(nickname));

Hier spielt die Funktion welcome() ihre Stärke aus: eine wiederkehrende Aufgabe, die Erzeugung einer Begrüßung aus einem Namen, wird einmal definiert und mehrfach benutzt.

Kategorien
JavaScript JS Hero Learn to Code

Playground

JS Hero besitzt eine Spielwiese: den Playground. Hier möchte ich zeigen, wie man im Playground kleine Programme schreiben kann. Programme benötigen i.d.R. eine Ein- und eine Ausgabe. Im Playground kann man das am einfachsten mit den beiden Funktionen prompt() und alert() machen:

let name = prompt('Wie heißt Du?');
alert('Hallo ' + name + '!');

Gibst Du diesen Code im Playground ein und klickst auf „Run“, so öffnet sich ein Dialog mit der Frage „Wie heißt Du?“. Gibst Du „Kitty Pryde“ ein und bestätigst die Eingabe, so schließt sich der Dialog und es öffnet sich ein Fenster mit der Nachricht „Hallo Kitty Pryde!“. Nach Klick auf „OK“ schließt sich auch dieses Fenster und unser kleines Programm ist zu Ende. Mit „Run“ kann es erneut gestartet werden.

prompt() dient also zur Eingabe. Der Eingabe-Dialog kann mit einer Nachricht versehen werden. Die Eingabe ist die Rückgabe der Funktion prompt(). Wird diese Rückgabe wie oben einer Variablen zugeordnet, landet die Eingabe in dieser Variablen.

alert() dient der Ausgabe. Im obigen Beispiel wird die Eingabe mit vorangestelltem „Hallo “ und nachgestelltem „!“ ausgegeben. Sowohl prompt() also auch alert() unterbrechen den Programmcode. Erst nach Klick auf „OK“ bzw. „Abbrechen“ wird die Programmausführung fortgesetzt.

prompt() und alert() kann man i. d. R. nicht auf den normalen JS Hero Übungsseiten verwenden. Das liegt darin, dass dort der Lösungs-Code gekapselt in einem sogenannten WebWorker läuft. Dort stehen die beiden Funktionen nicht zur Verfügung.

prompt() und alert() sollte man in der professionellen Webentwicklung nicht verwenden. Aber zum Üben sind sie ideal.

Kategorien
JavaScript

JavaScript Quiz

Wer auf lockere Art und Weise seine JavaScript-Kenntnisse testen und verbessern möchte, sollte sich das JavaScript-Quiz von Dr. Axel Rauschmayer nicht entgehen lassen.

Das Quiz ist ein Bonbon zu Axel’s Buch JavaScript for impatient programmers und ist zu 50% als freies Preview verfügbar. Aber schon diese Preview lohnt sich. Über 100 Fragen gehen auf die Geschichte von JavaScript, die Syntax, primitive Werte, den Kontrollfluss und Objekte ein.

Wie die meisten Bücher von Axel richtet sich das Quiz an erfahrene ProgrammiererInnen. Wo genau sollten Semikolons gesetzt werden, wie war das nochmal mit label und was ergibt '122' + true? Das Quiz macht Spaß und schult die vielen Details der Sprache JavaScript.

Kategorien
JavaScript

How JavaScript works

Starten möchte ich den JS Hero Blog mit einer Vorstellung des Buchs „HOW JAVASCRIPT WORKS“ von Douglas Crockford.

Seit über 20 Jahren beinflusst Douglas Crockford die Entwicklung von JavaScript. Mit seinem Buch „JavaScript: The Good Parts“ von 2008 zeigte er, dass JavaScript im Kern eine moderne Programmiersprache ist. Beschränkt man sich auf die „Good Parts“, kann man mit JavaScript lesbare, wartbare und fehlerarme Programme schreiben.

Mit „HOW JAVASCRIPT WORKS“ von 2018 setzt Crockford diesen Weg fort. Er unterzieht JavaScript einer akribischen Analyse. In 31 Kapiteln untersucht er die einzelnen Bestandteile von JavaScript. Dabei geht es ihm nicht um die letzten neuen Features. Ganz im Gegenteil. Ihm interessieren die einfachen Dinge. Er untersucht wie Numbers, Strings, Arrays oder Objekte funktionieren. Er zeigt auf, was an ihnen gut und was an ihnen schlecht ist.

Zum Beispiel Zahlen: JavaScript kennt genau einen Zahlentyp: number. Mit diesem Typ kann man in gewissen Grenzen alle Dezimalzahlen darstellen. Andere Programmiersprachen besitzen dafür eine Vielzahl von Datentypen. In Java gibt es byte, short,int und long für ganze Zahlen sowie float und double für Fließkommazahlen. Was ist besser? Crockford ist hier eindeutig: dass JavaScript nur einen Zahlentyp kennt, ist eines seiner größten Stärken. Beim Programmieren muss man sich keine Gedanken machen, welchen Zahlentyp man nehmen soll. Fehler bei der falschen Wahl sowie der Konvertierung zwischen verschiedenen Zahlentypen werden vermieden.

Den Horizont des Buches bildet „The Next Language“. Zentrales Paradigma dieser „Next Language“ wird die eventbasierte, asynchrone, global verteilte Programmierung sein. JavaScript ist nicht „The Next Language“. Aber insbesondere mit der Behandlung von Funktionen und Events kann JavaScript dieser „Next Language“ wichtige Impulse liefern.

„HOW JAVASCRIPT WORKS“ ist ein faszinierendes Buch. Es ist kein Buch für Anfänger und es ist kein Buch, um JavaScript zu lernen. Es wendet sich an erfahrene Programmierer und vermittelt eine Idee davon, wie Programmieren im Großen und im Kleinen funktioniert und funktionieren sollte.