monocaffe (dead): coffescript

Mostrando entradas con la etiqueta coffescript. Mostrar todas las entradas

CoffeScript and Canvas

I keep playing with CoffeeScript, and what better way than using canvas!

<html>
    <head>
        <title>CoffeScript Canvas</title>
        <script src="coffee-script.js"></script>
        <script type="text/coffeescript">
            draw = () -> 
                canvas = document.getElementById('coffee')
                if canvas.getContext
                    ctx = canvas.getContext('2d')
                    ctx.fillStyle = "rgb(200,0,0)"
                    ctx.fillRect(10, 10, 55, 50)

                    ctx.fillStyle = "rgba(0, 0, 200, 0.5)"
                    ctx.fillRect(30, 30, 55, 50)

            draw()
        </script>
        <style type="text/css">
            canvas { border: 1px solid black; }
        </style>
    </head>
    <body>
        <canvas id="coffee" width="150" height="150"></canvas>
    </body>
</html>

Well, it's basically the same as with JavaScript.

Ok, this is very easy, but nowhere to be found on the CoffeeScript site and shows how easy it's to get started.
I mean, really, why? If you're going to develop on Javascript, you don't want to "build" your code.
So, all you need is some simple HTML and the following:

<script src="coffee-script.js"></script>
<script type="text/coffeescript">
alert "Hello CoffeeScript!"
</script>

Now add the "coffee-script.js" file in your path, and open it with your browser. No servers, no compilers, no NodeJS and nothing to install.

No más JavaScript!

Bienvenido CoffeScript

Hace poco tuvo lugar OSCON y uno de los eventos más populares fue el Emerging Languages Camp donde muchas personas muy inteligentes dieron distintas presentaciones sobre nuevos lenguajes de programación, buenas practicas, patrones, etc. Por lo que después de ver las distintas presentaciones obvias como la de PyPy y Clojure me llamo la atención CoffeScript.

CoffeScript permite, utilizando una sintaxis muy parecida a la de Python, generar código JavaScript. Por ejemplo, una de las cosas que odio a muerte de JavaScript es su supuesto soporte de objetos. Veamos como se hace con CoffeScript:

class Animal
  constructor: (@name) ->

  move: (meters) ->
    alert @name + " moved " + meters + " meters"

class Person extends Animal
  move: (meters) ->
    super(meters)

  walk: (steps) ->
    this.move(0.6 * steps)

me = new Person "Ale"
me.walk(10)

El código JavaScript generado es el siguiente:

var Animal, Person, me;
var __extends = function(child, parent) {
    var ctor = function(){};
    ctor.prototype = parent.prototype;
    child.prototype = new ctor();
    child.prototype.constructor = child;
    if (typeof parent.extended === "function") parent.extended(child);
    child.__superClass__ = parent.prototype;
  };
Animal = function(_a) {
  this.name = _a;
  return this;
};
Animal.prototype.move = function(meters) {
  return alert(this.name + " moved " + meters + " meters");
};
Person = function() {
  return Animal.apply(this, arguments);
};
__extends(Person, Animal);
Person.prototype.move = function(meters) {
  return Person.__superClass__.move.call(this, meters);
};
Person.prototype.walk = function(steps) {
  return this.move(0.6 * steps);
};
me = new Person("Alex");
me.walk(10);

Ugh!

CoffeScript and Canvas

CoffeeScript in 1, 2, 3...

No más JavaScript!

Bienvenido CoffeScript