CodeCombat propone aprender el lenguaje de programación JavaScript jugando a una especie de juego de rol. La verdad, no me convence para nada la idea, creo que se pierde mucho tiempo, pero quizás haya gente que lo encuentre divertido.
Tag: JavaScript
Ordenar fechas en JavaScript
Hace unas semanas, recibí esta consulta en el curso iDESWEB:
Lo que si que me tiene mosca, es lo de ordenar las fechas, si lo haces con sort como los títulos y los países te ordena las fechas por días, entonces mirando los métodos de date vi parse que te devuelve el valor en milisegundos desde el 1 de enero del año 70 o algo así, lo probé en un documento a parte con dos fechas en el formato en el que tengo las fechas y me daba dos números diferentes ,con lo que lo puse en el documento HTML y me ordenaba bien los años, pero no entiendo bien porque las fechas del mismo año estaban desordenadas. Además cuando quite las alertas que me puse antes de cada función para asegurarme que se ejecutaban correctamente, no se porque ya no me lo ordena ni por años y eso que tire de control z y lo deje igual, pero debí de cambiar algo porque ahora no funciona y la consola de firefox no me marca errores de js. También en probado con valueOf y nada tampoco.
Y esta fue mi respuesta:
Hola.
La función sort() de JavaScript realiza un ordenación alfabética. Esa ordenación no sirve para ordenar fechas, porque una fecha escrita con el formato “dd/mm/aa” se tiene que ordenar de derecha a izquierda.
Para usar esa función en la ordenación de fechas puedes hacer dos cosas:
- Puedes escribir la fecha en formato “aaaa-mm-dd”, que casualmente (no es casualidad, está hecho por esto mismo) es el formato que se emplea en las bases de datos para almacenar las fechas. De este modo, primero se ordena por el año, después por el mes y por último por el día. Lo que ocurre es que este formato es confuso para mucha gente: lo puedes usar internamente, pero no para mostrar una fecha al usuario.
- Puedes suministrar a la función sort() una función de callback para realizar la comparación: esa función, que debes escribir, realiza la comparación de dos fechas.
Pasar la fecha al número de segundos o milisegundos podría ser una solución… pero no lo es, porque sort() realiza una ordenación alfabética, no numérica: tampoco sirve para ordenar números. Prueba lo siguiente:
var a = [2, 20, 19, 1, 10, 111, 200, 9, 99]; a.sort();
El resultado es:
[1, 10, 111, 19, 2, 20, 200, 9, 99]
¿Está ordenado?
Un saludo.
El Tetris en menos de 40 líneas de JavaScript
Impresionante, menos de 40 líneas de JavaScript (y unas cuantas de HTML y CSS). Lo podemos encontrar en esta dirección: http://jsfiddle.net/ova777/kFxja/
Copio a continuación el código por si desaparece:
HTML
<div class=”score”>score: <span id=”result”>0</span></div>
<div id=”stack”>
<div data-y=”0″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”1″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”2″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”3″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”4″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”5″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”6″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”7″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”8″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”9″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”10″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”11″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”12″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”13″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”14″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”15″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”16″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”17″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”18″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
<div data-y=”19″ class=”line”>
<div data-x=”0″ class=”brick”></div><div data-x=”1″ class=”brick”></div><div data-x=”2″ class=”brick”></div><div data-x=”3″ class=”brick”></div><div data-x=”4″ class=”brick”></div><div data-x=”5″ class=”brick”></div><div data-x=”6″ class=”brick”></div><div data-x=”7″ class=”brick”></div><div data-x=”8″ class=”brick”></div><div data-x=”9″ class=”brick”></div>
</div>
</div>
CSS
#stack {
width: 130px;
height: 260px;
border: solid 1px black;
border-top: 0px;
}
.brick {
width: 11px;
height: 11px;
border: solid 1px white;
background: white;
float: left;
}
.brick.on {
background: black;
}
.brick.now {
background: green;
}
JS
var fs = “1111:01|01|01|01*011|110:010|011|001*110|011:001|011|010*111|010:01|11|01:010|111:10|11|10*11|11*010|010|011:111|100:11|01|01:001|111*01|01|11:100|111:11|10|10:111|001″, now = [3,0], pos = [4,0];
var gP = function(x,y) { return document.querySelector(‘[data-y=”‘+y+'”] [data-x=”‘+x+'”]’); };
var draw = function(ch, cls) {
var f = fs.split(‘*’)[now[0]].split(‘:’)[now[1]].split(‘|’).map(function(a){return a.split(”)});
for(var y=0; y<f.length; y++)
for(var x=0; x<f[y].length; x++)
if(f[y][x]==’1′) {
if(x+pos[0]+ch[0]>9||x+pos[0]+ch[0]<0||y+pos[1]+ch[1]>19||gP(x+pos[0]+ch[0],y+pos[1]+ch[1]).classList.contains(‘on’)) return false;
gP(x+pos[0]+ch[0], y+pos[1]+ch[1]).classList.add(cls!==undefined?cls:’now’);
}
pos = [pos[0]+ch[0], pos[1]+ch[1]];
}
var deDraw = function(){ if(document.querySelectorAll(‘.now’).length>0) deDraw(document.querySelector(‘.now’).classList.remove(‘now’)); }
var check = function(){
for(var i=0; i<20; i++)
if(document.querySelectorAll(‘[data-y=”‘+i+'”] .brick.on’).length == 10)
return check(roll(i), document.querySelector(‘#result’).innerHTML=Math.floor(document.querySelector(‘#result’).innerHTML)+10);
};
var roll = function(ln){ if(false !== (document.querySelector(‘[data-y=”‘+ln+'”]’).innerHTML = document.querySelector(‘[data-y=”‘+(ln-1)+'”]’).innerHTML) && ln>1) roll(ln-1); };
window.addEventListener(‘keydown’, kdf = function(e){
if(e.keyCode==38&&false!==(now[1]=((prv=now[1])+1)%fs.split(‘*’)[now[0]].split(‘:’).length) && false===draw([0,0], undefined, deDraw())) draw([0,0],undefined, deDraw(), now=[now[0],prv]);
if((e.keyCode==39||e.keyCode==37)&&false===draw([e.keyCode==39?1:-1,0],undefined,deDraw())) draw([0,0],undefined,deDraw());
if(e.keyCode == 40)
if(false === draw([0,1], undefined, deDraw())) {
if(draw([0,0], ‘on’, deDraw())||true) check();
if(false === draw([0,0], undefined, now = [Math.floor(Math.random()*fs.split(‘*’).length),0], pos = [4,0])) {
toV=-1;
alert(‘Your score: ‘+document.querySelector(‘#result’).innerHTML);
}
}
});
toF = function() {
kdf({keyCode:40});
setTimeout(function(){if(toV>=0)toF();}, toV=toV>0?toV-0.5:toV);
}
toF(toV = 500);
Libros gratuitos sobre JavaScript
Una buena colección de libros sobre JavaScript, y encima gratis: Libros: aprendiendo JavaScript con recursos gratuitos (+video).
Estadísticas de uso de los frameworks de JavaScript
Estadísticas de uso de los frameworks de JavaScript en la primera semana de septiembre 2013: JavaScript Usage Statistics.
Librerías gráficas para JavaScript
El artículo Essential JavaScript: the top five graphical libraries recoge cinco librerías gráficas para JavaScript. La que más me ha llamado la atención es D3.js y su complemento NVD3.js, que compiten con Google Chart Tools.
Compilador de JavaScript
No es realmente un compilador de código en el sentido normal, pero sí que se puede considerar un compilador porque compila, junta diferentes fragmentos de código y transforma de JavaScript a JavaScript mejorado.
Google Closure Compiler es una herramienta que ayuda a optimizar y encontrar errores en el código JavaScript.
¿Qué hace? En el artículo Using Google’s Closure to Compile and Verify your JavaScript nos lo explican:
- Junta diferentes ficheros de JavaScript en uno solo.
- Elimina contenido innecesario para la ejecución, como los comentarios.
- Detecta código inútil que no se usa.
- Detecta código que contiene errores.
Prototipos en JavaScript
En el vídeo JavaScript: orientación a objetos básica del curso iDESWEB explico que JavaScript es más bien un lenguaje basado en objetos que un lenguaje orientado a objetos, ya que conceptos esenciales como la clase o la herencia no existen (por ahora).
[kml_flashembed movie=”http://www.youtube.com/v/QblNrSnKpz0″ width=”560″ height=”315″ wmode=”transparent” /]
JavaScript es realmente un lenguaje basado en prototipos. Y los prototipos son un poco “raros” cuando provienes de un lenguaje orientado a objetos como C++ o Java.
En el artículo A Plain English Guide to JavaScript Prototypes se explica de una forma sencilla qué son los prototipos y cómo se usan en JavaScript.
Cómo usar la consola de Google Chrome
Si se quiere ser un buen desarrollador hay que conocer las herramientas que se tienen a mano.
Hasta hace unos años, los navegadores no disponían de herramientas para ayudar al desarrollo de aplicaciones web. Tenías que buscar plugins o add-ins de terceras partes que algunas veces no funcionaban bien o no se integraban todo lo bien que se podía hacer. Sin embargo, esa situación ha cambiado desde hace unos años, y los navegadores más populares incorporan herramientas como consola, inspectores o verdaderos depuradores de código.
Using the Console es la documentación oficial de la consola de Google Chrome. ¡Es impresionante todo lo que se puede hacer!
Novedades de JavaScript
Como ya comenté hace unos meses en Las nuevas características de JavaScript, se está trabajando en la nueva versión de EcmaScript, Ecma-262 Edition 6, también llamada “Harmony” o “ES.next”.
En la página Draft Specification for ES.next (Ecma-262 Edition 6), nos podemos mantener al día en cuanto a la evolución del borrador, y poco a poco van saliendo páginas web en las que explican algunas de las novedades más interesantes.
Por ejemplo, en ECMAScript 6 and Spread Operator, nos explican el uso de un nuevo operador, el operador spread “…”, que me recuerda un poco a la función list() de PHP, pero que no es realmente lo mismo.