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
JS Hero Release Notes

JS Hero 4.3.0

JS Hero ist in Version 4.3.0 erschienen. Es gibt einige kleinere Anpassungen und Ergänzungen:

Kategorien
JS Hero Release Notes

JS Hero 4.2.0

JS Hero ist in Version 4.2.0 erschienen. Es gibt zwei zentrale Änderungen:

  • Von var zu let: In der ursprünglichen JavaScript-Version von 1995 wurden Variablen entweder ohne Schlüsselwort oder mit dem Schlüsselwort var deklariert. Die Deklaration mit var hat jedoch einige Nachteile. Um diese Nachteile zu beseitigen, wurde 2015 die Deklaration mit let und const eingeführt. Seitdem kann man sowohl var, als auch let und const verwenden. Da man mit let und const klareren Code schreiben kann, wurde die Varaiblendeklaration in JS Hero auf let umgestellt. Lektionen mit const werden folgen.
  • function declaration vs. function expression: Schon in der ursprünglichen Version von JavaScript gab es zwei zentrale Arten, Funktionen zu definieren: function declaration und function expression. Beide Varianten haben Vor- und Nachteile. Da die Funktionsdeklaration stilistisch klarer ist, habe ich mich entschlossen, JS Hero von function expression auf function declaration umzustellen.

Beide Änderungen betreffen nur die Art und Weise, wie Code in JS Hero präsentiert wird. Der Lösungs-Code ist davon nicht betroffen. Lösungen kann man – wie bisher auch – in beliebigem JavaScript schreiben.

Kategorien
Free and Open Source

Bookzilla

Bücher kauft man am besten bei seinem lokalen Buchhändler. Oder – wenn man freie Software liebt – bei Bookzilla. Bei Bookzilla gehen 5% des Kaufpreises an die Free Software Foundation Europe.

Bookzilla ist ein Charity-Projekt der Software-Schmiede Freiheit.com. Es basiert auf einer Platform des Zwischenbuchhändlers Libri GmbH.

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
Mathematik

Mathe im Mai

Alljährlich veranstaltet die gemeinnützige Mathe im Leben GmbH die Mathe-Challenge Mathe im Advent. Angesichts der Corona-Krise gibt es jetzt auch die Mathe im Mai – Challenge.

Gemacht ist die Challenge für Schüler*innen der Klassen 4 bis 9. Vom 4. bis zum 20. Mai wird jeden Wochentag eine Aufgabe gestellt.

Viel Spaß beim Knobeln!

Kategorien
Mathematik

Project Euler

Ist man auf der Suche nach anspruchsvollen, mathematischen Code-Problemen, so sollte man bei Project Euler vorbeischauen. Seit 2001 werden hier Woche für Woche Probleme aus dem Gebiet der Mathematik und der Informatik veröffentlicht. Bis heute haben sich so über 700 Probleme angesammelt.

Gesucht ist immer eine meist sehr große Zahl. Um diese Zahl zu finden, muss man einen passenden Algorithmus entwerfen und diesen in einer beliegiegen Programmiersprache umsetzen. Nach Login kann man seine Lösungszahl auf der Website überprüfen. Neben der algorithmischen Lösung kann man bei einigen Problemen alternativ auch eine passende mathematische Formel finden.

Die erste Project Euler Aufgabe kann man in JavaScript auf JS Hero lösen.

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.