Hallo, lieber HTML5-Entwickler! 😉

Jeder Mensch ist ein ganz eigener Lerntyp und ich lerne am besten, indem ich den Lernstoff direkt in eigener Sprache aufbereite und anderen beibringe. Dadurch ist mal wieder ein komplettes Einsteiger-Tutorial in Form eines Gitbooks entstanden.

Der komplette Kurs ist für jeden kostenlos, kann sowohl online als auch im PDF- oder Ebook-Formaten gelesen werden und, dank Github, kann jeder Verbesserungsvorschläge einreichen, wenn er einen Fehler entdeckt.

Link zum kostenlosen Gitbook:
https://www.gitbook.com/book/christianpauly/einfuhrung-in-coffeescript/details

Einführung in CoffeeScript

CoffeeScript ist eine Scriptsprache, die in JavaScript übersetzt wird. Man spricht also von einem JavaScript-Transpiler. CoffeeScript versucht die Probleme von JavaScript, z.B. dass es keine expliziten Klassen gibt, zu lösen und mit einer Syntax die Python recht ähnlich ist, mit kürzerem und übersichtlicherem Code ein besseres Ergebnis zu erzielen. Außerdem nimmt sich CoffeeScript vor, dass alles ein Ausdruck ist.

Voraussetzungen für dieses Tutorial

• Grundlegende Erfahrung mit JavaScript und HTML5
• Kenntnisse in Objektorientierter Programmierung

Beispiel

Das folgende Beispiel zeigt eine Klasse, die ein Auto beschreibt mit den beiden Attributen speed und position und diversen Gettern und Settern.

CoffeeScript

class car

    speed
    position

    getSpeed () -> @speed

    getPosition () -> @position

    setSpeed (s) -> @speed = s

Daraus erstelltes JavaScript

(function() {
  var car;

  car = (function() {
    function car() {}

    speed;

    position;

    getSpeed(function() {
      return this.speed;
    });

    getPosition(function() {
      return this.position;
    });

    setSpeed(function(s) {
      return this.speed = s;
    });

    return car;

  })();

}).call(this);

Verweise

• CoffeeScript Website: http://coffeescript.org/
• Online JavaScript-zu-CoffeeScript-Converter: http://js2.coffee/
• NodeJS Website: https://nodejs.org/en/
• Code-Editor mit vielen nützlichen Plugins für CoffeeScript: https://atom.io/
  • Sofortige JavaScript-Vorschau: https://atom.io/packages/atom-html-preview
  • Syntax-Highlights und Code-Snippets: https://atom.io/packages/language-coffee-script