es.html | searchcode

/episodes/267/es.html

https://github.com/mrnbrkt/asciicasts.com-translations
HTML | 234 lines | 177 code | 57 blank | 0 comment | 0 complexity | 82727dd8a7af17128b9fc6021c55fb94 MD5 | raw file

<p>CoffeScript es un lenguaje que genera JavaScript.  Viene incluido por defecto con Rails 3.1 por lo que pronto muchos desarrolladores de Rails van a tener que echarle un vistazo por primera vez.  Para empezar a aprenderlo en este episodio veremos c&oacute;mo convertir c&oacute;digo JavaScript ya existente a CoffeScript.  El c&oacute;digo que vamos a convertir es el que escribimos en el episodio 261  [<a href="http://railscasts.com/episodes/261-testing-javascript-with-jasmine">verlo</a>, <a href="http://es.asciicasts.com/episodes/261-tests-de-javascript-con-jasmine">leerlo</a>] que validaba n&uacute;meros de tarjeta de cr&eacute;dito.</p>

<p>Para aquellos que no hayan usado nunca CoffeeScript la  <a href="http://jashkenas.github.com/coffee-script/">web oficial</a> es el mejor sitio por donde empezar.  All&iacute; encontraremos varios ejemplos de CoffeeScript as&iacute; como el JavaScript en que se convierten. Tambi&eacute;n hay una p&aacute;gina donde podemos escribir c&oacute;digo CoffeeScript y verlo convertido en JavaScript que luego podremos ejecutar en el navegador y todo mediante c&oacute;digo en el cliente sin realizar llamadas AJAX al servidor.</p>

<p>El c&oacute;digo JavaScript que vamos a convertir es el de la siguiente p&aacute;gina, que se activa cuando un usuario sale del campo de n&uacute;mero de tarjeta de cr&eacute;dito y que emplea la t&eacute;cnica de calcular el resto de dividir por 10 como validaci&oacute;n b&aacute;sica del n&uacute;mero introducido, mostr&aacute;ndose un mensaje de error junto al campo de texto si detecta que el n&uacute;mero no es correcto.</p>

<div class="imageWrapper">
  <img src="/system/photos/662/original/E267I01.png" width="808" height="375" alt="Página de validación de tarjeta de crédito."/>
</div>

<p>A continuaci&oacute;n mostramos el c&oacute;digo JavaScript:</p>


<pre class="javascript">var CreditCard = {
  cleanNumber: function(number) {
    return number.replace(/[- ]/g, &quot;&quot;);
  },
  
  validNumber: function(number) {
    var total = 0;
    number = this.cleanNumber(number);
    for (var i=number.length-1; i &gt;= 0; i--) {
      var n = +number[i];
      if ((i+number.length) % 2 == 0) {
        n = n*2 &gt; 9 ? n*2 - 9 : n*2;
      }
      total += n;
    };
    return total % 10 == 0;
  }
};

$(function() {
  $(&quot;#order_credit_card_number&quot;).blur(function() {
    if (CreditCard.validNumber(this.value)) {
      $(&quot;#credit_card_number_error&quot;).text(&quot;&quot;);
    } else {
      $(&quot;#credit_card_number_error&quot;).text(&quot;Invalid credit card number.&quot;);
    }
  });
});</pre>

<p>La versi&oacute;n de Rails de esta aplicaci&oacute;n es la 3.1 Release Candidate 1, que se anunci&oacute; en el momento de escribir este episodio.  Podemos actualizarnos a ella con  <code>gem install rails --pre</code>.</p>

<h3>Los primeros cambios</h3>

<p>Para cambiar un fichero JavaScript a CoffeeScript tan s&oacute;lo tenemos que ponerle la extensi&oacute;n <code>.coffee</code> al nombre de archivo.  Por supuesto podemos seguir usando ficheros JavaScript normales con Rails 3.1 usando la extensi&oacute;n habitual <code>.js</code>, el uso de CoffeeScript es completamente opcional.</p>

<p>Podemos empezar comentando todo el c&oacute;digo JavaScript y cambiarlo paso a paso por su equivalente CoffeeScript.  En la primera secci&oacute;n convertiremos la funci&oacute;n <code>cleanNumber</code> que limpiaba el n&uacute;mero de tarjeta de cr&eacute;dito recibido eliminando los espacios y los guiones que vinieran.</p>

<p class="codeFilePath">/app/assets/javascripts/orders.js.coffee</p>
<pre class="javascript">var CreditCard = {
  cleanNumber: function(number) {
    return number.replace(/[- ]/g, &quot;&quot;);
  }
}</pre>

<p>El c&oacute;digo CoffeeScript equivalente es:</p>


<p class="codeFilePath">/app/assets/javascripts/orders.js.coffee</p>
<pre class="javascript">CreditCard =
  cleanNumber: (number) -&gt;
    number.replace /[- ]/g, &quot;&quot;</pre>

<p>Con CoffeeScript nos ahorramos buena parte de la sintaxis de JavaScript. Al usar la tabulaci&oacute;n para definir los niveles de bloque nos libramos de todas las llaves pero, eso s&iacute;, deberemos ser consistentes con el uso de los espacios en blanco.</p>

<p>Tambi&eacute;n podemos dejar de utilizar la palabra clave <code>var</code> y al final de una funci&oacute;n no tenemos por qu&eacute; usar <code>return</code>: el &uacute;ltimo valor evaluado en la funci&oacute;n se devuelve autom&aacute;ticamente, igual que en Ruby.  No hace falta tampoco usar puntos y comas.</p>


<p>No hay tampoco que rodear con par&eacute;ntesis los argumentos en las llamadas a funci&oacute;n.  La &uacute;nica excepci&oacute;n a esto es cuando se invoca una funci&oacute;n sin argumentos, en cuyo caso CoffeeScript necesita los par&eacute;ntesis para saber que se est&aacute; invocando una funci&oacute;n.</p>

<p>Por &uacute;ltimo cambia la forma en la que se invocan las funciones; hay que eliminar la palabra clave <code>function</code> y cambiarla por <code>-&gt;</code> tras los argumentos de la funci&oacute;n.  Cuesta un poco acostumbrarse a esta forma tan concisa de definir funciones.</p>

<p>Con este fragmento de c&oacute;digo ya convertido a CoffeeScript podemos compilarlo para ver qu&eacute; JavaScript se genera.  La salida se parece mucho a nuestro c&oacute;digo original:</p>

<pre class="javascript">var CreditCard;
CreditCard = {
  cleanNumber: function(number) {
    return number.replace(/[- ]/g, &quot;&quot;);
  }
};</pre>

<p>Ech&eacute;mosle un vistazo ahora a la funci&oacute;n <code>validNumber</code> de nuestro c&oacute;digo JavaScript.</p>


<p class="codeFilePath">/app/assets/javascripts/orders.js.coffee</p>
<pre class="javascript">validNumber: function(number) {
  var total = 0;
  number = this.cleanNumber(number);
  for (var i=number.length-1; i &gt;= 0; i--) {
    var n = +number[i];
    if ((i+number.length) % 2 == 0) {
      n = n*2 &gt; 9 ? n*2 - 9 : n*2;
    }
    total += n;
  };
  return total % 10 == 0;
}</pre>

<p>Sigamos los mismos pasos para convertir este c&oacute;digo a CoffeeScript.</p>

<p class="codeFilePath">/app/assets/javascripts/orders.js.coffee</p>
<pre class="javascript">validNumber: (number) -&gt;
  total = 0
  number = @cleanNumber(number)
  for i in [(number.length-1)..0]
    n = +number[i]
    if (i+number.length) % 2 == 0
      n = if n*2 &gt; 9 then n*2 - 9 else n*2
    total += n
  total % 10 == 0</pre>

<p>De nuevo hemos quitado las llaves y los punto y coma as&iacute; como las palabras clave <code>var</code> y <code>return</code>, y por &uacute;ltimo hemos cambiado <code>function</code> por  <code>-&gt;</code>.  Tambi&eacute;n hemos hecho otros cambios para limpiar un poco el c&oacute;digo.</p>

<p>Donde aparezca <code>this</code> podemos poner el signo <code>@</code>, de forma que <code>this.cleanNumber</code> se convierte en <code>@number</code>.  Podemos tambi&eacute;n quitar las llaves de la sentencia <code>if</code> porque tampoco hacen falta.  El operador ternario tambi&eacute;n ha cambiado, por lo que podemos cambiar la interrogaci&oacute;n y los dos puntos al estilo de C por una sentencia <code>if then else</code>.</p>

<p>El resto del c&oacute;digo tiene buen aspecto; s&oacute;lo nos queda cambiar el bucle <code>for</code>.  En CoffeeScript los iteradores funcionan de forma distinta a JavaScript: podemos iterar sobre un <em>array</em> con c&oacute;digo como este:</p>


<pre class="javascript">for number in [1,2,3]
 alert number</pre>

<p>Esto genera el siguiente JavaScript:</p>

<pre class="javascript">var number, _i, _len, _ref;
_ref = [1, 2, 3];
for (_i = 0, _len = _ref.length; _i &lt; _len; _i++) {
  number = _ref[_i];
  alert(number);
}</pre>

<p>Alternativamente podemos escribir el c&oacute;digo de la siguiente manera y se traducir&aacute; al mismo JavaScript:</p>

<pre class="javascript">alert number for number in [1,2,3]</pre>

<p>Para una secuencia de n&uacute;meros podemos usar un rango en lugar de un <em>array</em>:</p>
<pre class="javascript">for number in [1..3]
 alert number</pre>

<p>Con esto el JavaScript generado se simplifica:</p>

<pre class="javascript">var number;
for (number = 1; number &lt;= 3; number++) {
  alert(number);
}</pre>

<p>Si queremos que el bucle cuente hacia atr&aacute;s tan s&oacute;lo tenemos que darle la vuelta a los n&uacute;meros del rango.</p>
<pre class="javascript">for number in [3..1]
 alert number</pre>

<p>Esto se parece mucho a lo que hace el bucle <code>for</code> de nuestro c&oacute;digo, as&iacute; que lo podemos reemplazar por una cuenta regresiva similar.</p>

<p>Ya s&oacute;lo nos queda el &uacute;ltimo fragmento de c&oacute;digo JavaScript.</p>

<p class="codeFilePath">/app/assets/javascripts/orders.js.coffee</p>
<pre class="javascript">$(function() {
  $(&quot;#order_credit_card_number&quot;).blur(function() {
    if (CreditCard.validNumber(this.value)) {
      $(&quot;#credit_card_number_error&quot;).text(&quot;&quot;);
    } else {
      $(&quot;#credit_card_number_error&quot;).text(&quot;Invalid credit &crarr;
        card number.&quot;);
    }
  });
});</pre>

<p>Este fragmento de jQuery adjunto el c&oacute;digo de validaci&oacute;n al evento <code>blur</code> del campo correspondiente al n&uacute;mero de tarjeta de cr&eacute;dito.  No hay que hacer nada especial para gestionar el c&oacute;digo jQuery en CoffeeScript, el c&oacute;digo equivalente es:</p>

<p class="codeFilePath">/app/assets/javascripts/orders.js.coffee</p>
<pre class="javascript">jQuery -&gt;
  $(&quot;#order_credit_card_number&quot;).blur -&gt;
    if CreditCard.validNumber(@value)
      $(&quot;#credit_card_number_error&quot;).text(&quot;&quot;)
    else
      $(&quot;#credit_card_number_error&quot;).text(&quot;Invalid credit &crarr;
        card number.&quot;)</pre>

<p>Igual que antes hemos cambiado las llaves y punto y coma, cambiado <code>function</code> por <code>-&gt;</code> y las referencias a <code>this</code> las hemos pasado a  <code>@</code>. Queda una &uacute;ltima modificaci&oacute;n que es cambiar la primera llamada a  <code>$</code> por <code>jQuery</code>, que no surte ning&uacute;n efecto a nivel de funcionalidad pero pone m&aacute;s de manifiesto que estamos usando jQuery.</p>

<p>Con todo el JavaScript cambiado a CoffeeScript recargamos la p&aacute;gina en el navegador para ver si todo funciona igual que antes.</p>

<div class="imageWrapper">
  <img src="/system/photos/663/original/E267I02.png" width="808" height="375" alt="El código  CoffeeScript se comporta igual que el JavaScript que sustituye."/>
</div>

<p>Y lo hace.  Si introducimos un c&oacute;digo incorrecto de tarjeta de cr&eacute;dito veremos el mensaje de error que desaparece tan pronto como introduzcamos un n&uacute;mero v&aacute;lido.  Al final del fichero JavaScript de nuestra aplicaci&oacute;n veremos el c&oacute;digo JavaScript que ha sido compilado a partir del fichero CoffeeScript.</p>

<p class="codeFilePath">http://localhost:3000/assets/application.js</p>
<pre class="javascript">(function() {
  var CreditCard;
  CreditCard = {
    cleanNumber: function(number) {
      return number.replace(/[- ]/g, &quot;&quot;);
    },
    validNumber: function(number) {
      var i, n, total, _ref;
      total = 0;
      number = this.cleanNumber(number);
      for (i = _ref = number.length - 1; _ref &lt;= 0 ? i &lt;= 0 : &crarr;
        i &gt;= 0; _ref &lt;= 0 ? i++ : i--) {
        n = +number[i];
        if ((i + number.length) % 2 === 0) {
          n = n * 2 &gt; 9 ? n * 2 - 9 : n * 2;
        }
        total += n;
      }
      return total % 10 === 0;
    }
  };
  jQuery(function() {
    return $(&quot;#order_credit_card_number&quot;).blur(function() {
      if (CreditCard.validNumber(this.value)) {
        return $(&quot;#credit_card_number_error&quot;).text(&quot;&quot;);
      } else {
        return $(&quot;#credit_card_number_error&quot;).text(&quot;Invalid &crarr; 
          credit card number.&quot;);
      }
    });
  });
}).call(this);</pre>

<h3>Depuraci&oacute;n</h3>

<p>&iquest;Qu&eacute; ocurre si tenemos un error de sintaxis en nuestro c&oacute;digo CofeeScript?  Si cambiamos el fichero CoffeeScript para que tenga un error y recargamos la p&aacute;gina en el naveador no veremos nada, porque la petici&oacute;n de JavaScript va aparte.  Sin embargo si vemos en la consola de desarrollo veremos que el error s&iacute; aparece.</p>


<div class="imageWrapper">
  <img src="/system/photos/664/original/E267I03.png" width="814" height="594" alt="El error en CoffeeScript aparece en la consola de desarrollo del navegador."/>
</div>

<p>Aparece suficiente informaci&oacute;n en el mensaje de error como para indicar qu&eacute; es lo que ha ido mal y qu&eacute; l&iacute;nea de c&oacute;digo debemos mirar para empezar a depurar el c&oacute;digo.</p>

<p>Con esto cerramos este episodio.  Todav&iacute;a nos queda mucho por ver de CofeeScript, se recomienda visitar el sitio oficial de CofeeScript para leer m&aacute;s de este peque&ntilde;o y divertido lenguaje.</p>