Javascript

JavaScript Server Side - Alejandro Hernandez

2011-11-05T13:49:00.000-07:00

Tercer tech update!!!!!

Funciones de Alto Orden en JavaScript - Alejandro Hernandez

2011-10-29T13:42:00.000-07:00

Segundo tech update!!!!!

JavaScript - Alejandro Hernández

2011-10-17T21:32:00.000-07:00

Tengo el agrado de contarles que se hizo realidad uno de mis sueños más grandes. Poder comenzar a dar una serie de charlas sobre JavaScript en una gran multinacional. En este momento me encuentro trabajando en Globant, empresa Argentina dedicada al outsourcing de recursos en tecnologías de la información y, hasta ahora, el mejor lugar que conozco para trabajar.

Sin más introducción, aquí el video.

http://www.youtube.com/watch?v=d9CJfavZnC0

Steve Jobs

2011-10-05T21:04:00.001-07:00

Stay hungry, stay foolish!!!!!!

Nuestra industria ha perdido un grande. Revolucionario, creativo e inspirador son apenas unas pocas de las miles de palabras que se vienen a mi cabeza en este momento, para describir a la gran persona que fue Steve Jobs, sin duda influyó de manera importante en nuestra historia y por ello será recordado siempre.

Un gran saludo Steve..... y una cosa más.... mi más sincera admiración por el trabajo de tu vida.

A recoger la basura

2011-09-02T00:23:00.000-07:00

Este post surgió por una consulta en mi trabajo asi que Gracias Guille por la idea!

Vamos a hablar un poco del famosisimo proceso de Garbage colection de javascript

Como sabrán (deberían) el Garbage colector de un lenguage es el encargado de liberar la memoria que ya no se está utilizando, pero... como es que hace esto?

La parte dificil aqui es decidir cual es la memoria que se debe liberar y cual no, entonces es necesario un algoritmo para marcar que objetos en memoria no son más necesarios.

En las primeras implementaciones (javascript 1.1 Netscape 3) el garbage collector utilizaba un mecanismo llamado

Reference Counting (Conteo de referencias) el cual basicamente mantiene un registro de la cantidad de variables que apuntan a un objeto en memoria.

var a = {};

//creamos un objeto en memoria y lo apuntamos desde la variable a

// la cantidad de variables (referencias al objeto) es 1

var b=a;

//con b apuntamos al mismo objeto aumentando su reference counting en 1

//por lo tanto ahora 2 variables le apuntan

b=null

//desapuntamos b, decrementa el conteo de referencias nuevamente a 1

a=null

//desapuntamos el objeto y su conteo de referencias cae a 0

// ahora es un objeto en memoria no apuntado por nadie propenso

// a la recolección de basura (y recupero del espacio en memoria)

Sin embargo el algoritmo de reference counting, tiene un problema Gravisimo

las referencias ciclicas

esto es

var a={color:'rosa'};

var b={color:'rojo'};

var c={color:'negro'};

//creo 3 objetos y los apunto con 3 variables

//cada objeto tiene su reference count en 1

//RC(rosa):1 RC(rojo):1 RC(negro):1

a.next=b;

//ahora apunto con a.next al objeto rojo

//RC(rosa):1 RC(rojo):2 RC(negro):1

b.next=c;

//con b.next apunto al objeto negro

//RC(rosa):1 RC(rojo):2 RC(negro):2

c.next=b;

//con c.next apunto nuevamente al objeto rojo

//RC(rosa):1 RC(rojo):3 RC(negro):2

//desapunto todas las variables

a=null;

b=null;

c=null;

//decrementando en 1 todos los RC

//RC(rosa):0 RC(rojo):2 RC(negro):1

//cuando el proceso de garbage colector note que el objeto

//rosa no es apuntado por nadie lo eliminará, eliminando

//el puntero next al objeto rojo decrementando su RC nuevamente

//RC(rosa):0 RC(rojo):1 RC(negro):1

//pero rojo y negro continuan apuntandose entre si por tanto

//sus RC jamas decaen a 0 y no son liberados

//MEMORY LEAK!!!!!

Los objetos apuntados ciclicamente no pueden ser liberados mediante este algoritmo, por lo cual muchos nisiquiera aceptan a Reference Counting como un algoritmo de Garbage Collection.

Por suerte los tiempos cambiaron y la mayoria de los interpretes de javascript han decidido actualizar sus algoritmos de garbage collection a algo mucho mas efectivo llamado

Mark-and-sweep

Que basicamente toma un contexto y revisa para todas las variables de ese contexto, todos los objetos en memoria alanzables desde esas variables y los marcan como "ALCANZABLE" desde el contexto del programa.

luego recorre la memoria en busca de los objetos no marcados como "ALCANZABLES" y los borra.

es un algoritmo que requiere mucho mas trabajo pero es más efectivo.

tienen una mejor explicación aqui

como pueden ver en

http://code.google.com/intl/es-ES/apis/v8/embed.html#handles

Google chrome utiliza garbage collection por Mark-and-sweep

"he V8 garbage collector reclaims memory used by objects that can never again be accessed."

y como lo hace en

http://code.google.com/intl/es-ES/apis/v8/design.html#garb_coll

Linda historia... pero es "historia"?

En cuanto al lenguage si, PEEEERO y este es un gran pero, dependiendo del entorno en el que uses javascript esto puede variar.

Para los navegadores?

Lamentablemente no, todos los navegadores aún continuan utilizando Reference Counting para los objetos del DOM

por lo tanto basta apuntar a un objeto del DOM desde javascript y al objeto javascript desde el DOM y habremos generado un memory leak

veamos un ejemplo

var tryingToLeak = function(){

obj=document.getElementById("btnClearLog");

//apunto al DOM desde JS

document.getElementById("btnClearLog").expandoProperty=obj;

//apunto a JS desde el DOM

obj.bigString=new Array(10000).join(new Array(2000).join("XXXXX"));

//Consumo memoria en JS

};

tryingToLeak();

cada vez que ejecutamos el codigo anterior el proceso reclama 200mb de ram que no devuelve jamas

pueden probarlo utilizando el "Administrador de tareas de Google Chrome"

por mas que la variable de JS ya no tenga visibilidad el objeto del DOM continua con un RC mayor a 1 y por tanto no es sujeto a ser eliminado.

A continuación les dejo dos códigos que demuestran que no se producen memory leaks en javascript

var tryingToLeak = function(){

for(var i=0; i<=1000; i++){

var str=new Array(1000).join(new Array(2000).join("XXXXX"));

}

};

tryingToLeak();

var tryingToLeak = function(){

for(var i=0; i<=1000; i++){

var arr=[];

for(var j=0; j<=1000;j++){

arr.push(new Array(2000).join('XXXXX'));

}

};

tryingToLeak();

Saludos

1, 2, 3..... TODOS A LA CHURCH!

2011-04-30T23:41:00.000-07:00

"Estoy escribiendo la función que nunca nadie escribió.... pero no puedo terminarla"

Cuando hablamos de Javascript hablamos de funciones lambda, pero... de donde viene ese lambda?.

El calculo lambda es un sistema formal introducido por Alonzo Church allá por los años 30 para modelar la matemática (WOW! Que ambición!) pero se volvió suceptible a la paradoja de Russell y entonces lo uso para estudiar la computabilidad.

Ahora... cómo es el calculo lambda?

Bueno Alonzo introdujo algunos conceptos muy complejos en las funciones, conceptos que ya estaban ahi pero que nadie habia notado.

Los tres conceptos del cálculo lambda

Dada la función suma(x,y)=x+y Church nota los siguientes puntos

Las funciones no necesitan ser explícitamente nombradas: esto es: suma(x,y)=f(x,y)=s(x,y)=x+y, no importa el nombre de la función, sino lo que esta hace.

El nombre que se le asigne a los parámetros es irrelevante: quiere decir que suma(x,y)=x+y === suma(u,v)u+v (simple)

Toda función que recibe más de un argumento puede ser reescrita como una función que recibe un solo argumento que devuelve otra función que recibe un argumento, que devuelve otra función que recibe un argumento, que devuelve otra......(asi sucesivamente).... hasta que la ultima es la que realiza la operación: Y aqui ya necesitamos de la notación de javascript para ver de que estamos hablando

function suma(x,y){

return x+y;

}

function sumador(x){

return function(y){

return x+y;

}

var sumador5 = sumador(5);

alert(suma(5,4)); //9

alert(sumador5(4)); //9

a este proceso se le conoce como currificación (nombre horrible) me quedo con el ingles currying, concepto del que ya hemos hablado en este post

Con estas tres observaciones Church decide expresar sus números para realizar una aritmética básica, para ello define la función Identidad de la forma

function I(x){

return x;

}

Ahora bien, los números de Church propiamente dichos se expresan así:

El número N de Church es una función que recibe una función f como parámetro y devuelve otra función que compone la función f, N veces consigo misma.

es decir

function churchOne(f){

return function(x){

return f(x);

};

}

function churchTwo(f){

return function(x){

return f(f(x));

};

}

function churchTree(f){

return function(x){

return f(f(f(x)));

};

}

Sin embargo sería aburridisimo expresar los números de esa forma, por tanto define una funcion Sucesor que es una función que recibe un número de Church N como parámetro y devuelve el siguiente número de Church (N+1)

El sucesor de Church se escribe de la siguiente forma

function churchSucc (n) {

return function (f) {

return function (x) {

return f(n(f)(x));

};

}

Además tambien define el cero de Church como una función que recibe una función f como parámetro y devuelve la función Identidad (caprichoso el cero) , de la forma

function churchZero (f){

return I;

}

Pero.... de que esta hablando Church, pues bien para que se den una idea, si f(x)=x+1 , entonces el calculo lambda se vuelve la aritmética común, de esta forma podemos probar el siguiente programa completo para ver los números de Church en toda su gloria

function I (x) {

return x;

};

function churchZero (f) {

return I;

};

function churchSucc (n) {

return function (f) {

return function (x) {

return f(n(f)(x));

};

}

function f(x){

return x+1;

}

alert(f(0));//1

alert(I(f)(0)); //1

alert(churchZero(f)(0)); //0

var churchOne=churchSucc(churchZero);

alert(churchOne(f)(0));//1

var churchTwo=churchSucc(churchOne);

alert(churchTwo(f)(0));//2

alert(churchSucc(churchSucc(churchSucc(churchZero)))(f)(0));//3

Entonces vemos que el mismo churchSucc es una función suceptible de ser utilizada con los mismos numeros de Church para hallar números de Church superiores

alert( churchTwo(churchSucc)(churchTwo)(f)(0) );//4

Entonces vemos que se puede volver realmente muy interesante la composición sucesiva de una función.

Por ahora los dejos solamente con los números y volveremos luego con algunos operadores.

Si te cansaste de leer Church a lo largo del post, te dejo el resultado de la siguiente función

function f(x){

return x+'Church ';

}

var churchTen =churchSucc(churchSucc(churchSucc(churchSucc(churchSucc(churchSucc(churchSucc(churchSucc(churchSucc(churchSucc(churchZero))))))))));

alert( churchTen(f)(''));

//Church Church Church Church Church Church Church Church Church Church

jajajaa

que lo disfrutes!

Articulo fuente de la implementación Javascript (al que aprovechamos y le dimos una manito)

Sabes programar en javascript...Y?

2011-04-15T20:10:00.000-07:00

"Puedo escribir las funciones menos tristes esta noche."

picanteverde

Despues de tanto tiempo sin traerles nada divertido al blog, he decidido volver porque por suerte ahora tengo un trabajo donde puedo aprender cosas nuevas para traer por aca.

Hoy vamos a hablar de Y combinator (me encantaría escribir este post en ingles pero lo voy a hacer en castellano para contribuir un poco a la poquisima cantidad de articulos (de buen javascript) en este idioma).

Qué es el combinador Y?

Ademas de ser una empresa de Capital de riesgo de inversión y un operador matemático (por dios que estas leyendo) tambien conocido como Fixed Point Combinator

es uno de los artilugios más fascinantes de la ciencia de la computación y es muy simple de explicar (eso es mentira).

El Combinador Y es una funcion de alto orden que calcula el punto fijo (fixed point) de otra funcion.

Si no entendiste nada vamos por partes.

El punto fijo (fixed point) de una función f es un valor x tal que: f(x)=x

Por ejemplo 1 y 0 son puntos fijos de la función cuadrado, debido a que si

f(x)=x^2 entonces 1^2=1 y 0^2=0.

Ahora bien, eso es valido para funciones de primer orden (funciones en valores simples como enteros).

Para una función f de alto orden, un punto fijo es otra función p de forma que f(p)=p

y un combinador de punto fijo (combinador Y), es OTRA función g que produce una función punto fijo p para cualquier funcion f de forma que:

p=g(f), f(p)=p

f(g(f))=g(f)

ya se a esta altura te estas arrepintiendo de haberte puesto a leer algo que no parece tener nada que ver con javascript pero ahora vamos a escribirlo en javascript, no porque sea útil en si, disculpen mi obtusa visión pero aún no logro comprenderlo tanto como para encontrarle una funcionalidad, es por eso que decidí escribir este post (de la misma forma que el post que estoy leyedo ).

Para qué sirve Y?

Y es comúnmente usado para permitir recursión anónima en lenguajes donde no se puede asumir que esté soportada.

Veamos un ejemplo con una función para calcular el factorial de un numero de forma recursiva.

var factorial = function(x){
return x == 0 ? 1 : x * factorial(x - 1);
};

alert(factorial(4)); //24

pero que pasaría si....

var factorial = function(x){
return x == 0 ? 1 : x * factorial(x - 1);
};

var fac=factorial;
factorial="nada";
alert(fac(4));

Deja de funcionar debido a que factorial llamado desde dentro de la función no es más la función misma, sino otra cosa.

Antes que nada voy a aclarar que javascript si permite recursividad anónima usando callee

var factorial = function(x){
return x == 0 ? 1 : x * arguments.callee(x - 1);
};

var fac=factorial;
factorial="nada";
alert(fac(4));

Peeeero si no pudiese, necesitaríamos el combinador Y, vamos a encontrarlo.

Supongamos que para evitar esto, pasamos una referencia de la función con la que debe realizar la recursividad, evitando así hacer cualquier tipo de referencia a alguna variable global.

var factorial = function(h, x){
return x == 0 ? 1 : x * h(h, x - 1);
};
alert(factorial(factorial, 4));// 24

Pero podemos precompilar el primer parametro de la función y devolver una función que reciba solo un parametro, y escribirla de la siguiente manera

var factorial = function(h){
return function(x){
return x == 0 ? 1 : x * h(h)(x - 1);
};
};

alert(factorial(factorial)(4));

Aquí yace la magia, factorial recibe una referencia a si misma y devuelve una función recursiva sobre su propia referencia, de ahí que [h(h)] devuelve una función recursiva sobre si misma. Por tanto debemos invocarla en la forma [factorial(factorial)](4), donde la función devuelta por factorial(factorial) es la función recursiva.

Hasta ahí todo bien, pero tenemos ese h(h)(x) en la definición de la función, en lugar de un simple q(x), entonces podemos crear otra función de envoltorio que cree una referencia a h(h), es simplemente para poder llamarla en la forma q(x)

var factorial = function(h){
return function(x){
var f = function (q,x){
return x == 0 ? 1 : x * q(x - 1);
};
return f(h(h), x);
};
};

alert(factorial(factorial)(4));

Ahora en la función f podemos realizar la misma precompilación del primer parametro que ya hicimos antes y obtener la siguiente función

var factorial = function(h){
return function(x){
var f = function(q){
return function(x){
return x == 0 ? 1 : x * q (x - 1);
};
};
return f(h(h))(x);
};
};

alert(factorial(factorial)(4));

pero ahora, la función f no posee ninguna referencia externa o global, asi que podemos sacarla afuera, y aún así funcionará.

var f = function(q){
return function(x){
return x == 0 ? 1 : x * q (x - 1);
};
};

var factorial = function (h){
return function (x){
return f(h(h))(x);
};
};

alert(factorial(factorial)(4));

Ahora llegamos a que f es nuestra función de la que queremos el punto fijo. el punto fijo es la función devuelta por factorial(factorial), entonces podemos escribir Y() para que nos la devuelva de la siguiente manera.

var Y = function (f){

var g = function (h){
return function(x){
return f(h(h))(x);
};
};

return g(g);
};

var factorial = function (q){
return function(x){
return x == 0 ? 1 : x * q(x - 1);
};
};

var factorial_recursivo = Y(factorial);

alert(factorial_recursivo(4));

Finalmente escrita en propósito general, quedaría

var Y = function(f){
return (function (g) {
return g(g);
})(function(h) {
return function(){
return f(h(h)).apply(null,arguments);
};
});
};

//Y LISTO!!!! ahora podemos escribir factorial así

var factorial = Y(function(recurse){
return function(x){
return x==0 ? 1 : x * recurse(x - 1);
};
});

alert(factorial(4)); //24!!!!!!!!

Lo más frustrante acerca del combinador Y es que una ves que lo derivaste, es imposible decir que hace, con solo mirar su código.

Si llegaste hasta aquí, sin marearte, FELICITACIONES!!!!!!!

Adelantandose a los thread en Javascript

2009-07-01T10:46:00.000-07:00

Como muchos de ustedes saben los threads son una feature que esta llegando a Javascript, obvio cada implementación tendrá sus tiempos para lograrlo pero ya en firefox 3.5 podemos disfrutar de los web workers pero lo verdaderamente sorprendente de esto es que tambien podemos encontrar implementaciones en javascript de threads para javascript, algo sorprendente sin duda.
veamos las librerias que hay:
jsthread es la primer implementación que conocí y aunque no la utilicé aún, parece bastante poco practica ya que sugiere que convierten el codigo de la funcion en un string y la compila nuevamente de manera que pueda ser interrumpida y reanudada intercambiando sus entornos de ejecución.
Lamentablemente no he tenido tiempo para probar ninguna de estas librerias pero en cuanto lo tenga vendré con algunos ejemplos para que los puedan probar en casa.

les dejo otros links utiles de lectura recomendada
ajaxian
como implementar threas en js?

Saludos

Como recorrer un array

2009-07-01T10:24:00.000-07:00

Existen mas de una forma de recorrer un array y las podemos encontrar a todas juntas en:

http://ajaxian.com/archives/how-many-ways-can-you-iterate-over-an-array-in-javascript

como hacer Bien un For

2009-07-01T10:01:00.000-07:00

Y pensar que puse javascriptexperts en el nombre del blog porque creí que sabia suficiente de javascript pero siempre hay alguien que sorprende.
Generalmente la peor manera de hacer un for es

for (var i=0; i alert(arr[i]);
}

porque?, debido a que por cada iteración debemos ir a buscar el valor de la variable length, dentro de arr, con lo cual desperdiciamos tiempo. en su lugar si hiciesemos

for(var i= arr.length;i>=0;i--){
alert(arr[i]);
}

de esta forma, tambien recorremos el array arr solo que esta vez por cada iteracion simplemente comaramos i con 0, y no con el valor de una variable que pudo haber cambiado.
podemos ver la fuente en
http://www.anieto2k.com/2009/05/28/for-reverso-para-grandes-interaciones-en-javascript/

Ventanas gelatinosas?

2009-07-01T09:53:00.001-07:00

Despues de un largo tiempo si post vuelvo con una seguidilla importante de cosas que debemos mirar para saber un poco mas de javascript. como por ejemplo este link con ventanas gelatinosas.
(script que no puedo ver en funcionamiento ya que en el edificio donde trabajo tenemos internet censurada por websense el cual marco este sitio, como un sitio de video juegos)
el link es
http://www.turleando.com.ar/2009/06/ventanas-gelatinosas-con-javascript-y-css-transforms/
y realmente les recomiendo que lo visiten y me cuenten que les parece.
Saludos

lo que tengo que decir sobre Internet Explorer

2009-06-19T08:53:00.000-07:00

esto es todo lo que tengo que decir sobre Internet Explorer 8
aqui

Funciones lambda o anonimas

2009-06-04T06:30:00.000-07:00

Ahora que ya comprendemos el concepto de closures, podremos apreciar con mayor amplitud el verdadero poder de las funciones lambda o anonimas. Pero primero lo primero, porque se llaman lambda?.
Las funciones anonimas en programación deben el nombre de lambda, a la teoría matemática del Calculo Lambda inventada por Alonzo Church y Stephen Kleen (que no es el creador de la botella, ese es Klein) Teoría que sin duda esta fuera del alcance del entendimiento del humano medio, asi que si la comprendes, bien por ti.
Bien, ahora para que son utiles las funciones lambda?, de que sirve no ponerle nombre a una función?. Las utilidaded de las funciones lambda son casi infinitas pero intentaré mostrarles aquí las que yo considero son las más importantes.
Las posibilidad de usar funciones anonimas va de la mano con otros conceptos importantes de Javascript, como :

Todo es un objeto: (incluidas las funciones), esto me permite asignar funciones a variables, y hacer referencia a ellas utilizando la variable, además me permite pasar funciones como parametros a otras funciones, y obtener funciones como resultados de la ejecución de una función.
Closures: Gracias a las Closures tenemos la ventaja de poder enlazar nuestras funciones con variables de otros entornos de ejecución, algo que veremos es más que util a la hora de trabajar con interfaces web.
Objetos dinamicos: A la hora de modificar el comportamiento de un objeto en particular, podemos definir una funcion y asignarla inmediatamente a un método de un objeto, sobreescribiendo su comportamiento inicial, o extendiendo su interfaz para agregar comportamiento nuevo.

bueno ahora un poco de codigo:


//funcion lambda asignada a una variable
var sumar = function (a,b){
  return a+b;
}
alert(sumar(1,2));
// es lo mismo que decir
function sumar (a,b){
  return a+b;
}

ahora supongamos que tenemos una funcion que busca el más grande de todos los numeros en un array


var masGrande = function (arr){
  var mayor=0;
  var len = arr.length;
  for(var i=0;i<>mayor){
          mayor=arr[i];
      }
  }
  return mayor;
}

var intArr = [1,2,3,4,5,6,7,8];
alert(masGrande(intArr));

ahora que sucede si queremos comparar por ejemplo un array de objetos personas, donde cada persona tiene un miembro edad con el valor de su edad. veamos como reescribiriamos la función


var masGrande = function (arrP){
  var mayor=0;
  var len = arr.length;
  for(var i=0;i<>mayor.edad){
          mayor=arr[i];
      }
  }
  return mayor;
}
var personasArr = [{edad:2},{edad:2},{edad:2},{edad:2},{edad:2},{edad:2},{edad:2}];
alert(masGrande(personasArr));

Pero este codigo es solamente util para encontrar la mayor "persona", y no sirve para ningun otro tipo de objeto (aunque a decir verdad si los objetos del array poseen un miembro edad es suficiente).
Como podríamos escribir un algoritmo que aisle el comportamiento de buscar un mayor sin importar de los objetos que estemos comparando.
Bueno gracias a las funciones anonimas podemos.


//si analizamos los ejemplos anteriores podemos ver que lo unico que
//cambia es el momento de comparar si un objeto es mayor o no
//entonces que sucede si
var masGrande = function (arr, esMayor){
//    en el parametro comparar recibiremos una funcion que compare dos objetos y nos
//    pueda decir cual es el mayor.
  var mayor=0;
  var len = arr.length;
  for(var i=0;i< mayor="arr[i];" personasarr =" [{edad:2},{edad:2},{edad:2},{edad:2},{edad:2},{edad:2},{edad:2}];">b.edad){
      return true;
  }else{
      return false;
  }
}));

//podemos buscar el mayor número
var intArr = [1,2,3,4,5,6,7,8];
alert(masGrande(intArr,function(a,b){
  if(a>b){
      return true;
  }else{
      return false;
  }
}));

//podemos buscar el mayor de objetos con estructuras complicadas
var objArr = [{edad:20,fuerza:40},{edad:30,fuerza:50},{edad:10,fuerza:23},{edad:21,fuerza:40}];
alert(masGrande(objArr,function(a,b){
  if((50-a.edad)*a.fuerza>(50-b.edad)*b.fuerza){
      return true;
  }else{
      return false;
  }
}));

Como vemos hemos logrado aislar el comportamiento de buscar un mayor sin importar los objetos que estemos comparando.

Ahora veamos un ejemplo simple para modificar el comportamiento de un objeto


var perro=function(){};

perro.prototype={
comer: function(){
      alert('comiendo con el hocico');
  }
};

var persona = new perro;
persona.comer=function(){
  alert('comiendo con la boca');
};

es muy sencillo entender la utilidad de este tipo de estructuras luego de observar estos ejemplos
(los ejemplos no han sido probado, si al probarlos encontrases algun error por favor comunicamelo e intenta encontrar la solucion)

Closures

2009-06-04T06:26:00.000-07:00

Las closures o cerraduras son un tema bastante explicado en javascript, el problema es que es tan confuso que aún cuando entendamos el concepto dificilmente aprovechamos su potencial en nuestros programas.
Veamos la defininición.
Una Closure es una función que es evaluada en un entorno conteniendo una o más variables dependientes de otro entorno.
Como vemos la definición no hace más que contribuir a la confusión.
Veamoslo así.
En Javascript podemos definir una función en cualquier momento, inclusive dentro de la definición de otra función.
veamos una funcion para encontrar todos los numeros pares entre 2 numeros.


function numerosPares(Desde,Hasta){
   function esPar(Num){
       if(Num%2==0){
           return true;
       }else{
           return false;
       }
       //o, lo que es lo mismo
       //return !Num%2;
   }
   var pares = [];
   for (var i=Desde;i< Hasta;i++){        
        if(esPar(i)){
           pares.push(i);
        }
   }
   return pares;
}

allí podemos ver como declaramos una función dentro de otra.
Ahora que sabemos esto es mucho más facil comprender que es una closure
vamos a crear una función crearFuncion que, al ejecutarla, devolverá una nueva función sumar que al ser ejecutada actualizará una variable i que fue declarada dentro de la función crearFuncion.


////Closures
function crearFuncion(){
   var i=0;
   var sumar = function(){
       i=i+1;
       return i;
   };
   return sumar;
}


var fsumar = crearFuncion();

alert(fsumar());
alert(fsumar());
alert(fsumar());

ahora podemos ver como al haber declarado la funcion sumar dentro de la función crarFuncion, la función sumar tiene acceso a todas las variables a las que tenía acceso la función crearFuncion, aún despues de que crearFunción finalizó su ejecución. Entonces decimos sumar es una closure ya que poseé acceso a todas las variables de la función donde fué declarada.

Lenguaje dinámico

2009-06-04T06:24:00.000-07:00

Bien, javascript es un lenguaje dinámico por que poseé objetos dinámicos. Y... qué es un objeto dinámico?.
Un objeto dinámico es un objeto que puede cambiar la definición de sus miembros en tiempo de ejecución.
cual es la diferencia con un objeto común?
En un lenguaje orientado a objeto y con clases, los objetos son tipicamente estaticos, con lo cual no podemos por ejemplo cambiar la definición de un método en tiempo de ejecución. En cambio en un objeto dinámico si podemos hacer esto.
Es importante comprender que esta caracteristica de javascript afecta profundamente a nuestra forma de programar, ya que nunca podremos estar seguros, a priorí, sobre la definición de los miembros de un objeto que recibamos como parámetro por ejemplo.
Veamos un poco de como utilizar esto en el código.
Supongamos que creamos un objeto iluminador, que posea un método prender y un miembro obj, al ejecutar el método prender, el objeto iluminador se encarga de setear el color de fondo de su objeto obj, a blanco.
(recuerda que puedes ejecutar este código pegandolo en el cuadro de texto en la parte superior derecha de este blog)


/// objetos dinamicos
//definimos el objeto iluminador
var iluminador = function (){
this.obj=null;
}
//definimos el método prender, dentro del prototipo de iluminador
iluminador.prototype.prender = function(){
this.obj.style.backgroundColor = 'white';
}

//Creamos una instancia de iluminador, en la variable i
var i = new iluminador();

//obtenemos una referencia a algun objeto de la página
//en este caso el cuadro de cabecera
var head = document.getElementById('header-wrapper');

//este es nuestro primer caso de objeto dinamico
// hasta ahora no habiamos definido el miembro obj para nuestra instancia i
// ahora colocamos la referencia head en el miembro obj.
i.obj =head;
//podemos ver la definicion de prender
alert(i.prender);
//iluminamos el objeto obj en este caso head
i.prender();


//OBJETO DINÁMICO
//en javascript podemos redefinir un miembro, en este caso un método, en tiempo de
//ejecuccion y de esta forma modificar el comportamiento.
i.prender=function(){
this.obj.style.border = '5px solid green';
}

//ahora el método prender, en lugar de iluminar el objeto obj,
//se encarga de establecer el borde del objeto a 5 pixeles en color verde.
i.prender();

//es importante comprender que el objeto que cambio es el objeto i,
//y no el objeto iluminador, ya que si creamos una nueva instancia del
//objeto iluminador, dentro de la variable i2
var i2 = new iluminador();
i2.obj =head;
//podemos ver que la definicion del miembro prender, continua siendo la del
//objeto iluminador. la razón de esto será mucho más clara cuando
//veamos herencia prototipal
alert(i2.prender);
i2.prender();

Javascript, Objetos Dinámicos, Closures, Funciones Lambda, Herencia Prototypal

2009-05-26T04:35:00.000-07:00

Bueno despues de tanto tiempo recien logro hacerme un espacio para charlar sobre javascript nuevamente con ustedes. Hoy vamos a ver el porqué? de todos estos conceptos nuevos que vienen incluidos en javascript, y como poder utilizarlos en proyectos de la vida real. Por ejemplo, vamos a ver la diferencia entre: saber que es una función lambda o anonima, y utilizarlas para lograr un diseño de objeto avanzado.
Introducción
Primero lo primero, Javascript es un lenguaje dinámico orientado a objetos con soporte de funciones anonimas, y closures o cerraduras. Precisamente definir a javascript de esta manera genera tipicamente más confusión que no conocer las caracteristicas de javascript, entonces voy a intentar explicar una a una estas caracterisitas con ejemplos concretos y faciles de comprende, que resalten la esencia de cada caracteristica del lenguaje y nos permitan ver más allá sus posibilidades de utilización.
Caracteristicas
Mucho hemos oido hablar sobre las poderosas caracteristicas de javascript, por ejemplo del soporte de funciones labda y closures. Pero realmente cuales son las verdaderas caracteristicas de javascript?. Bueno a continuación podemos ver un listado no exaustivo de las caracteristicas principales de javascript.

Lenguaje dinámico: Se dice que Javascript es un lenguaje dinámico ya que poseé objetos dinamicos, estos son objetos que pueden variar su definición y comportamiento en tiempo de ejecución. Todos los objetos en javascript son dinámicos.
Closures: Las closures o cerraduras en javascript son una estructura del lenguaje que no poseé una sintaxis facil de explicar, pero que básicamente nos permite acceder a variables que fueron declaradas fuera de la función que estemos escribiendo, aún despues de que la funcion mayor hubiese terminado su ejecución.
Funciones lambda o anonimas: Javascript nos permite crear funciones sin nombre (anonimas) y poder asignarlas a una variable, ya que las funciones tambien son un objetos. Por esta razón podemos pasar funciones como parametros a otras funciones, e inclusive podes devolver funciones como resultado de una función.
Herencia Prototipal: la herencia prototipal es uno de los aspectos más discutidos de javascript, y se basa en el hecho de que cada objeto en javascript (y en javascript todo es un objeto) posee un prototipo, como miembro de si mismo. Por lo tanto, todo objeto(A) que se cree a partir de un objeto(B), heredará todos los miembros del prototipo de ese objeto(B). Finalemente si se solicita un miembro m sobre un objeto determinado y este objeto no poseé una definición de su miembro m, se le solicitará ese miembro m a su prototipo, el cual es común a todos los objetos de ese tipo.

Como podemos ver, citamos 4 caracteristicas de javascript, expusimos de manera precisa su definición pero no ayudamos a su comprensión, a continuación intentaré explicar en profundidad las nociones de programación dentro de cada una de ellas.

Jugando a ser Dios (haciendo un DSL)

2009-04-20T22:14:00.000-07:00

Como vimos antes no es muy dificil crear meta lenguajes o lenguajes de dominio especificos con Javascript. Pero como no se me habia ocurrido una aplicación especifica, deje pasar el hecho de no mostrar un DSL en concreto.
Por suerte hace unos dias, en el trabajo, tuve la necesidad de realizar pequeñas o simple consultas algo parecidas a un SQL muy básico sobre algunas Arrays Javascript, entonces recordé mi post sobre DSL y decidí implementar algunas funcionalidades de javascript para que puedan ver un DSL en funcionamiento. aquí les va
(si yo se que el código es largo pero lo voy a comentar bien asi se comprende)


//arrSQL.js
var arrSQL =(function(){   //usamos una funcion para tener funciones privada


//private constructor
 function _arrSQL(args){
  this.sel=[];
  this.from=args[0];
  this.wh=[];
  this.arrayResp=false;
  return this;
 };

 _arrSQL.prototype = {
  where:function (crit){
   this.wh.push(crit);
   return this;
  },
  select:function(field){
   if(arguments.length===1){
    this.sel.push(field);
   }else{
    for(var i=0; i0){
    var ret=true;
    for(var c in this.wh){
     var criterio = this.wh[c];
     switch(criterio[1]){
      case '=':
       if (o[criterio[0]]!==criterio[2]){
        ret =  false;
       }
       break;
     }
    }
    return ret;
   }else{
    return true;
   }
  },
  distinctCheck:function(o){
   if(this.dist){
    var ret = false;
    this.dist.returnRoot();
    for (var name in this.sel){
     if(this.dist.nav(o[this.sel[name]]) ){
      ret = ret || false;
     }else{
      this.dist.add(o[this.sel[name]]);
      this.dist.nav(o[this.sel[name]]);
      ret = ret||true;
     }
    }
    return ret;
   }else{
    return true;
   }
  },
  ret:function (){
   var retu = [];
   if(this.dist){
    this.dist = new this.distCache();
   }
   for(var i=0;i < distcache=" function(){" root="{};" curr="this.root;" prototype="{" curr =" this.curr[name];" curr =" this.root;">

JAJAJA bueno disculpen mi ausencia de comentarios pero me tengo que ir a dormir, pueden pedir explicaciones por los comentarios.
Aqui tienen un pequeño html para poder probarlo


var arr = [{"titulo":"Titulo1",
            "nombre":"Nombre1",
            "apellido":"Apellido1",
            "descripcion":"Descripcion1"},
            {"titulo":"Titulo1",
            "nombre":"Nombre2",
            "apellido":"Apellido2",
            "descripcion":"Descripcion2"},
            {"titulo":"Titulo1",
            "nombre":"Nombre3",
            "apellido":"Apellido3",
            "descripcion":"Descripcion3"},
            {"titulo":"Titulo1",
            "nombre":"Nombre4",
            "apellido":"Apellido4",
            "descripcion":"Descripcion4"}];
//alert(arr);
alert(arrSQL(arr).select('nombre','apellido').distinct().where(['titulo','=','Titulo1']).ret());

Google Map-Reduce

2009-04-15T07:52:00.000-07:00

Bueno vamos a ir un poco al futuro y empecemos a hablar de Grid computing que es muy distinto de cloud computing

Cloud Computing: la capacidad de procesamiento de una aplicación, no reside en el cliente, sino en la estructura de servidores.

Grid Computing: la capacidad de procesamiento se distribuye en una gran cantidad de nodos, cada nodo procesa una pequeña porción de los datos.

es complicado pero piensen asi
Cloud Computing puede funcionar sobre Grid Compupting

más allá de todo esto Google a liderado el mercado explicando su teoría Map Reduce
y ahora podemos ver los primeros avances en implementar estas tecnologías sobre javascript.
Porque?
porque javascript es el lenguaje más popular del mundo. practicamente todas las PC tienen uno o más interpretes de javascript instalados.
De esta forma podríamos distribuir el procesamiento de nuestro set de datos a lo largo de millones de nodos, tantos como browsers seamos capaces de encontrar.

http://www.igvita.com/2009/03/03/collaborative-map-reduce-in-the-browser/

JavaScript: El Lennguaje de Programación Más Malentendido del Mundo

2009-03-30T18:04:00.000-07:00

(Aquí les dejo traducido, el primer texto que leí de Douglas Crockford, y con el que me introduje en el interesantisimo mundo de javascript)

Javascript tambien conocido como: Mocha, LiveScript, JScript, ECMAScript es uno de los lenguajes de programación más populares del mundo. Virtualmente todo computador personal en el mundo tiene, al menos, ún interprete de JavaScript instalado en él, y en uso activo. La popularidad de JavaScript se debe enteramente a su rol como lenguaje de scripting de la WWW.
A pesar de su popularidad, solo algunos saben que JavaScript es un muy buen lenguaje de programación dinámico, orientado a objetos, de proposito general. Cómo puede ser esto un secreto? Porqué este lenguaje es tan malentendido?

El Nombre

El prefijo Java sugiere que JavaScript está, de alguna manera, relacionado a Java, que es un sub conjunto o una version menos poderosa de Java. Resulta que el nombre fué intencionalmente seleccionado para crear confusión, y de la confusión viene el malentendimiento. JavaScript no es Java interpretado. Java es Java interpretado. JavaScript es un lenguaje diferente.

JavaScript tiene una similitud sintáctica con Java, tanto como Java la tiene con C. Pero no es un sub conjunto de Java, tanto como Java no es un sub conjunto de C. Es mejor que Java en la aplicación para la que Java (oak) fue creado.

JavaScript no fué desarrollado en Sun Microsystems, el hogar de Java. JavaScript fué desarrollado en Netscape. Fue originalmente llamado LiveScript. Pero el nombre no era lo suficientemente confuso.

el sufijo Script sugiere que no es un lenguaje de programación real, que un lenguaje de scripting es más que un lenguaje de programación. Pero en realidad es una cuestión de especialización. Comparado con C Javascript tiende al performance para poder expresivo y dinaminsmio.

Lisp vestido de C
La sintaxis parecida a C, incluyendo las llaves y la manca sentencia for, lo hacen parecer un oridinario lenguaje de programación procedural. Esto está malinterpretado, porque JavaScript tiene más en común con lenguajes funcionales, como Lisp o Scheme, que con C o Java. Tiene arreglos en vez de listas y objetos en lugar de listas de propiedades. Las funciones son de primera clase (first class). Tiene cerraduras (closures). Tiene lambdas sin tener que balancear todos esos parentecis.

Encasillamiento (Typecasting)
JavaScript fué diseñado para correr en Netscape Navigator. Su éxito allí lo llevó a convertirse en un equipamiento estandar de virtualmente todos los navegadores web. Esto lo llevó al encasillamiento. JavaScript es el George Reeves de los lenguajes de programación. JavaScript se ha adaptado bien a una gran cantidad de aplicaciones no relacionadas con la web.

Objetivo Cambiante
La primer versión de JavaScript fué muy debil. Carecía de manejo de excepciones, inner functions, y herencia. En su forma actual, es ahora un completo lenguaje de programación orientado a objetos. Pero muchas de las opiniones sobre el lenguaje estan basadas en sus comienzos inmaduros.

El comite ECMA, que tiene el control sobre el lenguaje, esta desarrollando extensiones que, aunque bien intencionadas, van a agrabar uno de los problemas más grandes del lenguaje: Ya existen actualmente demasiadas versiones. Esto crea confusión.

Errores de Diseño
Ningún lenguaje de programación es perfecto. JavaScript tiene su porción de errores de diseño, como la sobrecarga del operador + para significar ambos, la suma y la concatenacion con coerción de tipos y la errorosa (error-prone) sentencia with, que deben ser evitados. La política de palabras reservadas es muy estrícta. La insercion del punto y coma (;) fue un gran error, como lo es la notacion para literales de expresiones regulares. Estas equivocaciones han llevado a errores de programación, que han puesto en cuestionamiento todo el diseño del lenguaje. Afortunadamente, muchos de estos problemas pueden ser mitigados con un buen programa lint. El diseño del lenguaje en general es bastante cuestionado. Sorprendentemente el comite ECMA no parece estar interesado en corregir estos errores. Quizas estan más interesados unos cuantos más.

Malas implementaciones
Algunas de las primeras implementaciones de javascript estaban llenas de errores. Esto se reflejó en el lenguaje de mala manera. Para complementar esto, esas implementaciones estaban embebidas en navegadores web horriblemente llenos de errores.

Malos libros
Practicamente todos los libros acerca de JavaScript son muy malos. Contienen errores, malos ejemplos, y promueven malas prácticas. Las carateristicas importantes del lenguaje son pobremente explicadas o dejadas de lado. He revisado docenas de libros de JavaScript y solamente recomiendo uno: JavaScript: The Definitive Guide (5th Edition) de David Flanagan.

Un estandar por debajo de lo normal
La especificación oficial del lenguaje es publicada por el ECMA. La especificación es de extrema mala calidad. Es dificil de leer y muy dificil de entender. Esto ha sido una contribución al problema de los malos libros porque los autores han sido incapaces de usar la documentacion del estandar para mejorar su propio entendimiento del lenguaje. Los comités del ECMA y él TC39 deberían estar profundamente avergonzados.

Amateurs
La mayoria de las personas escribiendo en JavaScript no son programadores. No poseen el entrenamiento y la disciplina para escribir buenos programas. JavaScript tiene tanto poder de expresión que ellos son capaces de hacer cosas utiles en él de cualquier manera. Esto le ha dado a JavaScript la reputación de ser estrictamente para amateurs, y que no se adapta para programación prefesional. Ese, simplemente no es el caso.

Orientado a Objetos
Es JavaScript orientado a objetos? tiene objetos, que pueden contener datos y métodos que actuen sobre esos datos. Los objetos pueden contener otros objetos. No tiene clases, pero tiene constructores que hacen lo que las clases hacen, incluyendo actuar como contenedor para las variables de clase y los métodos. No tiene herencia orientada a clases, pero tiene herencia prototypal.
Los dos principales caminos para construir sistemas de objetos son herencia (es ún) y agregación (tiene ún). JavaScript hace ambos, pero su naturaleza dinámica le permite ser elegante en la agregación.
Algunos argumentan que JavaScript no es verdaderamente orientado a objetos porque no provee ocultación de la información. Eso es que los objetos no pueden tener variables privadas o métodos privados. Todos los miembros son públicos.
Pero resulta ser que los objetos de JavaScript pueden tener variables privadas y métodos privados (haz click aquí si quieres saber cómo). Por supuesto solo algunos van a entender esto, porque JavaScript es el lenguaje de programación más malentendido del mundo.
Algunos argumentan que JavaScript no es verdaderamente orientado a objetos porque no provee herencia. Pero resulta ser que JavaScript no solamente soporta herencia clásica, sino tambien otro tipo de patrones de reutilización de código

Copyright 2001 Douglas Crockford. All Rights Reserved Wrrrldwide.

Si quieres leer el original en ingles puedes encontrarlo aquí

currying functions

2009-03-26T10:52:00.000-07:00

Currando funciones en javascript ja, esto es un tema avanzado asi que a todos los que se aburren mucho con mis otros post les comento que este les va a encantar.
que son las curried functions. Simple son funciones que si reciben menos paramtros de los que deberian recibir simplemente se compilan a si mismas con los parametros que recibieron y devuelven una función que solo necesita un parametro para terminar su ejecución.
Veamos un ejemplo simple
supongamos que la funcion myFunc suma dos parametros


alert(myFunc(2,2));      // devuelve 4
var adds4 = myFunc(4);   // adds4, es ahora una función,
                         // que le suma 4, a lo que reciba de argumento.
alert(adds4(5));         // devuelve 9.

bien ahora veamos como implementar esta funcion


function add(a, b) {
    if (arguments.length < 1) {

        return add;

    } else if (arguments.length < 2) {

        return function(c) { 

            return a + c 
        }

    } else {

        return a + b;
    }
}

No es mucho mas complicada, pero tampoco muy generica verdad? bueno
podemos encontrar una solución mucho mas elegante en la siguiente funcion


function curry(func,args,space) {
    var n  = func.length - args.length; //arguments still to come
    var sa = Array.prototype.slice.apply(args); // saved accumulator array
    function accumulator(moreArgs,sa,n) {
        var saPrev = sa.slice(0); // to reset
        var nPrev  = n; // to reset
        for(var i=0;i<moreArgs.length;i++,n--) {
            sa[sa.length] = moreArgs[i];
        }
        if ((n-moreArgs.length)<=0) {
            var res = func.apply(space,sa);
            // reset vars, so curried function can be applied to new params.
            sa = saPrev;
            n  = nPrev;
            return res;
        } else {
            return function (){
                // arguments are params, so closure bussiness is avoided.
                return accumulator(arguments,sa.slice(0),n);
            }
        }
    }
    return accumulator([],sa,n);
}

como la usamos?


function add (a,b,c){
      if (arguments.length < this.add.length) {
        return curry(this.add,arguments,this);
      }
      return a+b+c;
}

Sin embargo esta funcion no nos provee precompilación que es la verdadera gracia de curriar funciones, solo sirve para verse bonita.
pero si quieren saber mas sobre curried functions en javascript, les recomiendo que visiten este link y vean el algoritmo de Horspool precompilado en javascript

Un poco de Magia para empezar el dia

2009-03-26T08:39:00.000-07:00

Hola hoy les acerco un poco de sintaxis util en javascript:

Formas de crear un objeto:
EN JAVASCRIPT TODO ES UN OBJETO y como tal no deberia ser dificil crear uno nuevo, para esto tenemos varias opciones


var obj= new func();

nos permite crear un objeto a partir de una funcion y utilizando su prototipo.
Sin embargo la mejor manera de crear un obj es utilizando la notacion JSON veamos un ejemplo y lo explicamos despues


var obj = {
    miembro1:123,
    meiembro2:"hola",
    metodo1: function(){ return "metodo1";},
    metodo2: function(){ return "metodo2";},
    "metodo3": function(){ return "metodo3";}
};
alert(obj.metodo3());

si se fijan bien la declaracion del objeto esta encerrada en llaves { }, y luego dentro se encuentran pares nombre valor separados por comas. ahora cada par nombre valor, nombre puede ser un identificador o un string y el valor puede ser cualquier valor (incluida una funcion) hasta otro objeto. Ahora hagamos un objeto complicas y juguemos con arrays


var objc={
    nombre:"picanteverde",
    posicion:{x:128,y:450},
    telefonos:[431,561,443],
    hijos:[
        {nombre:'Alejandro',apellido:'Hernandez',edad:26},
        {nombre:'Emanule',apellido:'Hernandez',edad:21}
        ],
    hablar:function(){
        alert(this.nombre);
    }

};
objc.hablar();

se eniende como funciona? y lo util de JSON?? reemplaza xml?
lo dejo a su criterio
crear un objeto vacio


var o ={}; // objeto vacio
var a = []; // array vacia

Les gusto?

Metaprogramación o DSL con javascript method chaining

2009-03-25T23:01:00.000-07:00

Hoy vamos a ver un poco de como crear un mini Lenguaje de dominio especifico (como SQL, o CSS) con javscript de manera facil, rápida, elegante, agil y económica.
Partamos de un problema.
Supongamos que tenemos un select html de paises y solo si elijen eeuu debemos mostrar el select de estados, hariamos lo siguiente (usando la libreria prototype)


Event.observe(window, "load", function() {

  Event.observe($("country"), "change", function() {
    if ($F("country") == "United States")
      $("state-field").show();
    else
      $("state-field").hide();
  });

});

por ahora creanme que Event.observe recibe un objeto del dom, el nombre de un evento, y la funcion a attachear, $ en la lib prototype es un atajo a document.getElementById, $F es un atajo al value de un objeto de formulario, y finalmente se le agregan a los objetos del DOM dos metodos show y hide que simplemente manipulan el valor de display a nivel de css.

lo importante aqui es ver que nuestro limpio codigo puede convertirse en algo mucho mas complicado si varían los requerimientos.

ahora supongamos que agregamos un campo de provincias, que debe aparecer solo cuando elijamos Canada,
y un campo brutus que solo debe aparecer cuando elijamos Michigan u Ohio
el código elegante se empobrece y se torna dificil de leer


Event.observe(window, "load", function() {

  Event.observe($("country"), "change", function() {
    var country = $F("country");
    if (country == "United States") {
      $("us-state-field").show();
      $("province-field").hide();
    } else if (country == "Canada") {
      $("province-field").show();
      $("us-state-field").hide();
    } else {
      $("us-state-field").hide();
      $("province-field").hide();
    }
  });

  Event.observe($("us-state"), "change", function() {
    var state = $F("us-state");
    if (state == "Ohio" || state == "Michigan")
      $("brutus").show();
    else
      $("brutus").hide();
  });

});

eso sin contar que eredamos un bug que no nos oculta brutus si deseleccionamos estados unidos
Pero eso no es importante, lo importante es ver como la legibilidad del codigo se degrado luego de haber cambiado los requerimientos (cosa que raramente pasa en el mundo real, jajajaja)

Entonces como mejorar esto?
lo mejor es intentar separar el QUE? del COMO?
es decir separar las reglas de lo que tenemos que hacer
de la implementación de como hacerlo.
entonces veamos como creariamos un pequeño lenguaje que nos permita definir esto
para crear un lenguaje vamos a utilizar el lenguaje natural mas parecido al lenguaje del dominio del problema, (pero ahora lo vamos a hacer en ingles).


show us-state when country is “United States”
show province when country is “Canada”
show Brutus when state is “Ohio” or “Michigan”

ahora como convertimos esto en javascript, simple
creando objetos que se encarguen de la implementación teniendo en cuenta el orden de llamadas de metodos


show("us-state-field").when("country").is("United States");
show("province-field").when("country").is("Canada");
show("brutus").when("us-state").is("Ohio,Michigan");

para ver como implementariamos estos metodos los voy a dejar en suspenso hasta un proximo encuentro
ja

fuente
libreria Event.behavior

Vamos a soñar despiertos

2009-03-25T21:56:00.000-07:00

yo soy de los que opinan que las majores ideas para los browsers del futuro la dan los que hacen los mejores browser del presente:

Mozilla le pidio a Jesse James Garrett (muchacho que en el 2004 dijo, si convinamos javascript html y xml tenemos AJAX) que diseñe conceptualmente como deberían ser los browser dentro de 10 a 50 años. Si se fijan bien muchos de los conceptos son realizables ya hoy en dia mediante javascript.pero mejor los dejo con el video disfrutenlo en HD
es el ultimo link.
Saluts

http://labs.mozilla.com/projects/concept-series/

http://adaptivepath.com/aurora/

http://www.vimeo.com/1450211

Mi sueño se hizo realidad (Otra vez)

2009-03-25T21:45:00.000-07:00

asi es, siempre quise tener un buen editor de código con resaltador de sintaxis multi lenguaje (php,javascript,css,html) y aunque bespin es un proyecto muy en serio que ataca este problema, esta escrito en python y no es nada facil de instalar en tu hosting. Pero ahora tenemos a ecoder que es una aplicacion php que te permite editar tu código en linea. Como un gran amigo mio siempre decía, "Los cambios se implementan en el entorno de producción, ja!". Disfrutenlo, y aunque todavia está en una etapa muy beta, se que vamos a seguir escuchando noticias de él.

Notas: es un tanto dificil de instalar ya que tiene muy poca documentación (los comments del código) pero si son bueno php-hackers se las van a arreglar muy bien.

ecoder

Como programar en Javascript

2009-03-25T10:34:00.000-07:00

Javascript es un lenguaje funcional esto implica que sus construcciones de codigo son simplemente funciones. Pero no implica que solamente se pueda programar en formato funcional ya que podemos aplicar muchos paradigmas. Como por Ejemplo el paradigma orientado a objetos.

Como dijimos antes EN JAVA SCRIPT TODO ES UN OBJETO, inclusive las funciones, pero no existen las clases, y esto nos presenta una dificultad como trabajar con el paradigma orientado a objetos.

supongamos que necesitamos crear una persona con dos miembros, un nombre y un apellido, y un metodo hablar que nos alertará el nombre y el apellido.
veamos como hacer esto


function persona (pNombre, pApellido){
    this.nombre = pNombre;
    this.apellido= pApellido;
}
persona.prototype.hablar = function (){
    alert(this.apellido + ", " + this.nombre);
}

var a = new persona("picante","verde");
a.hablar();

funcamentalmente entendamos una cosa,


function persona (pNombre, pApellido){ ... }
es un atajo de 
var persona = function (pNombre, pApellido){ ... }

prototype es el prototypo de un objeto (no es la clase, pero podemos decir que es algo parecido (ah y tambien es un objeto)).
Entonces si creamos un nuevo miembro en el prototypo, simplemente asignandolo
vamos a crear un nuevo miembro en todos los objetos que hayan sido creados a travez de ese prototypo.
la cuestion es mucho mas compleja pero por ahora pueden quedarse con esa idea.

Javascript 3d

2009-03-24T22:50:00.000-07:00

Si javascript trabaja con 3d hace mucho tiempo pero ultimamente han avanzado más que nunca asi podemos ver como esta aplicación renderiza en 3d inclusive con reflejos en las texturas

fuente

OCR con javascript?

2009-03-24T22:48:00.000-07:00

Como verán javascript no deja de sorprenderme jamas y pueden ver aqui como algunos hackers se la ingeniaron para saltar el captcha de megaupload solo utilizando javascript

fuente

Bookmarklets

2009-03-24T22:40:00.000-07:00

A travez de aNieto2k vengo a enterarme de que los bookmarklets son pequeños scripts escritos obviamente en javascript y que pueden ser almacenados en tus favoritos (Bookmarks) y ejecutados a tu gusto.
Todo esto gracias a que si en la barra de direcciones de tu navegador escribes


javascript:alert("hola");

puedes ejecutar codigo javascript, que se ejecuta dentro del entorno de la página que tengas abierta en ese momento

si no me crees, ingresa a una página con muchas imagenes y copia el siguiente codigo javascript dentro de tu barra de direcciones y presiona enter


javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

Saludos

Bookmarklets para desarrolladores web en aNieto2k

Bespin, editando codigo en la nube

2009-03-24T22:31:00.000-07:00

Magnifico, los muchachos de mozilla se encargaron de crear un genial editor de texto multilenguaje con resaltador de sintaxis (justo como a nosotros nos gusta)
se llama Bespin y pueden leer mas sobre el aca pienso yo que es una gran alternativa a los viejos IDE que no son tan optimos para el desarrollo web. Asi que ahora los web developers contamos con una excelente alternativa a programas como
context

Notepad ++
y el glorioso Kate que siempre fue el que mas usé.

Bespin esta programado en python y es posible bajar el codigo fuente e instalarlo en tu propio servidor (pero no facil).
Como detalle me gustaría agregar que el editor de codigo de Bespin esta basado en el objeto canvas de html por lo que no podrás usarlo con navegadores que no soporten este objeto.

Funciones Lambda

2009-03-24T21:58:00.000-07:00

Despues de mi post de closures sentí que debería haber explicado un poco de funciones lambda antes y su funcionalidad, el nombre lambda viene del calculo lambda que es una teoría matematica tan complicada que excede el alcance de este post, este blog y este autor asi que les dejo la tarea de investigación a ustedes.
Basicamente son funciones sin nombre, pero en javascript esto tiene mucha mayor profundidad, ya que lo que sucede en realidad es que EN JAVASCRIPT TODO ES UN OBJETO y me gustaría que eso quede claro por eso lo voy a repetir EN JAVASCRIPT TODO ES UN OBJETO , entonces hasta las funciones son objetos.
Por tanto es indistinto escribir cualquiera de las dos declaraciones de funciones siguientes.


function FuncX(){
    return "x";
}

var FuncY = function (){
    return "y";
}

de esta forma podemos ver que podemos asignar una funcion a una variable y siempre que declaramos funciones implicitamente estamos declarando variables con el nombre de la funcion.

para ver esto llevado al extremo podemos ver el siguiente ejemplo


var funcRec = function(){
    return function(){
        return funcRec();
    }
}

alert(funcRec()()()()()()()()()()()()); // que devuelve????

a decir verdad esto es muy simple. la funcion funcRec devuelve una funcion (lambda) anonima, que al ser ejecutada devuelve el valor de la llamada a funcRec.
entonces


funcRec() //devuelve una funcion que al ser ejecutada devolverá el valor de ejecutar funcRec()
funcRec()()// ejecuta la funcion devuelta por la primer ejecucion, la cual devuelve exactamente lo mismo

confuso verdad, bueno espero que lo lean muchas veces hasta que lo entiendan. Les dejo algo más elaborado para ver si les sirve.



var a=0;
var funcRec = function(){

    alert("a=" + a);
    return function(){
        a+=1;
        return funcRec();
    }
}

alert(funcRec()()());

Closures

2009-03-24T21:32:00.000-07:00

Las closures son una parte vital del paradigma de Programación Funcional asi que vamos a darle una pequeña mirada a este concepto para aclarar las cosas un poco. Una closure es cuando definimos una funcion esta tiene acceso a las variables del entorno donde fue definida. Aun si la ejecución de ese entorno finalizó. Veamos un ejemplo porque estoy seguro que nadie entendio nada ja.

  function outer(c, d) {
       var e = c * d;

       function inner(a, b) {
           return (e * a) + b;
       }

       return inner(2, 1);
   }

como pueden ver en este simple ejemplo definimos una función dentro de otra sin embargo podemos ver que la funcion inner tiene acceso a la variable e que fue definida fuera de la funcion.
entonces si llamamos la funcion


outer(3,2)    // returns 13

ahora veamos a que me refiero con que no importa si la funcion outter ya finalizó su ejecución.


function crearFuncion(c){
    var a=3;
    var b=4;
    var func = function(x){
        return a*b*c*x;
    }
    return func;
}

como podemos ver este ejemplo es aun más complicado pero nos permite reflejar el hecho de que en Javascript todo es un objeto, hasta las funciones son objetos y como las funciones pueden recibir objetos como parametros, y pueden devolver objetos, entonces tambien pueden recibir funciones y devolver funciones.
Veamos como utilizariamos esto


var f = crearFuncion(2);
alert(f(5)) // alerts 120 ( = 2*3*4*5)

// que ocurriría si hiciesemos ...
alert(crearFuncion(2)(5))

allí podemos ver que la funcion func (declarada dentro de crearFuncion) puede seguir utilizando las variables a,b,c (declarados dentro de crearFuncion) aún despues de que la ejecución de crearFuncion haya terminado.

eso son closures!

Como escribir buen Javascript

2009-03-24T21:29:00.000-07:00

Una vez más nuestro amigo Douglas se ha esforzado en traernoes este espectacular compendio de consejos para escribir buen codigo javascript como pueden ver en Convenciones de Código para el Lenguaje de Programación Javascript es una excelente idea y una buena practica tener estos consejos en mente a medida que creemos nuestros programas (aunque muchas veces estemos apurados jaja)

Beyond JS

2009-03-24T21:20:00.000-07:00

Ahora que ya he dedicado mi (segundo) primer Post del blog a Douglas quisiera comentarles sobre esta libreria muy poco conocida que encontré en la red, se llama Beyond JS y aunque no es una libreria que utilizaría dia a dia realmente me dejó pensando. aqui un Ejemplo de su utilización para que se deleiten

document.body.onmousemove = Function.from("star", "moveTo").delay(1000).using(
 "+".using(
   Function.from(event, Ã),
   "*".using("radius", Function.from(Math, "sin", "angle"))),
 "+".using(
   Function.from(event, "y"),
   "*".using("radius", Function.from(Math, "cos", "angle")))
).curry({
 radius: 30,
 angle: function() {return (new Date)/50;}.asValue()


Como pueden ver hace arto uso de function Chaining (que conocí gracias a jquery)
y además obtiene las referencias a funciones a las funciones mediante el Function.from
el resto la verdad que requiere un analisis más largo pero eso se los dejo a ustedes.
Ah! una cosa más ven ese curry bueno vamos a hablar un poco de eso más tarde
}).gate(Function.from("doStar".element(),"checked"));

Dedicado a Douglas

2009-03-24T21:12:00.000-07:00

Vamos a arrancar con una fuente inagotable de maravillas de este lenguaje, la página de javascript de Douglas Crockford alli podrán encontrar el Magistral articulo Javascript: El Lenguaje de Programación más Malentendido del Mundo que está solamente en ingles pero que REALMENTE vale la pena leer, junto con El Lenguaje de Programación más Malentendido del Mundo se ha Vuelto el Lenguaje de Programación más Popular del Mundo (asi es parece que Douglas disfruta de los titulos largos) espero que les resulte tan interesante y divertido como me resulto a mi

Abriendo el Blog 2.0

2009-03-24T21:09:00.000-07:00

Ja pasados unos dias me di cuenta que practicamente semanalmente le enviaba a un grupo selecto de amigos las noticias que me habian parecido importantes sobre Javascript mi lenguaje favorito. Entonces me dije a mi mismo "deberia abrirme un blog" y luego recorde "ya lo abrí un tiempo atras" (solo que olvide postear cosas ja) asi que decidí volver a la carga a hablar con todos ustedes de lo mucho que disfruto aprender algo nuevo todos los dias con este lenguaje.

Controlando eventos

2008-10-24T05:30:00.000-07:00

Por el post anterior recibi una pregunta muy interesante:

Con el tema de eventos, estaba viendo q en GMAIL, cuando aparece una direccion de correo, aparece el clasico "mailto:" con parte del href del anchor.
Pero en lugar de levantar el clasico outlook o tu gestor de mail pop3, levanta en ventana aparte una pagina donde nos permite redactar el mail.
Como se puede lograr esto??

es muy simple las funciones que son asignadas en los eventos pueden devolver un valor true o false (a decir verdad todas las funciones en javascript pueden devolver un valor por más que no sea utilizado cuando se llamó a la funcion). El punto es que si una funcion asignada a un evento devuelve False, esto evita que el comportamiento normal para ese evento continue (que no es lo mismo que cancelar la burbuja de eventos para los entendidos).
gracias a esto podemos decir entonces:

<html>
<head>
</head>
<body>
<a id="linkid" href="mailto:hola@gmail.com">link</a>
<script>
var link = document.getElementById("linkid");
link.onclick=function(){
alert("aqui puedo hacer lo que quiera");
return false;
}
</script>
</body>
</html>

probado en firefox 3 y IE 6 (si funciona en IE 6 , lo podemos hacer funcionar en cualquier cosa)
Esto esta bueno porque podemos permitir cierto comportamiento comun del navegador, como click derecho->copiar ruta del enlace, y se copia el enlace bien, pero al momento del click podemos cambiar el link al que se dirije y listo.

lo que es cierto es que tambien podemos probar en los eventos onmousedown y onmouseup pero eso se los dejo a ustedes asi se divierten

Saludos y sigan mandando preguntas

Javascript Events en el DOM

2008-10-23T07:52:00.000-07:00

Los eventos javascript son más complicados de lo que uno cree
hay tres modelos importantes que entender
el modelo Tradicional

function hacerAlgo(){
alert('lo hice');
}

obj.onclick= hacerAlgo;

donde los eventos son miembros seteables de un objeto.
Como la mayoria de ustedes sabrá obviamente podemos utilizar funciones anonimas (lambda) para asignar los eventos

obj.onclick= function(){
alert('hizo click')
}

todos los navegadores soportan este modelo de eventos, el unico problema es que no es facil poder contar con el objeto event ni con el objeto que recivió el evento de una manera cross browser debido a la (mala) implementación de IE (trident) veamos un ejemplo

supongamos un elemento div con id="el_div"

var obj = document.getElementById("el_div");
obj.onclick = function (e){
// en la mayoria de los browsers compatibles con
//w3c el parametro e de la funcion posee el objeto event
// en IE el objeto esta en window.event
e = e || window.event;

}

de esta forma tenemos el objeto event en la variable e
gracias a la utilizacion del operador default (||)
el uso del operador default tambien conocido como operador logico OR es muy simple
si el primer operando devuelve un valor truthy (verdaderoso o distinto de null o 0) entonces devuelve el primer operando, de lo contrario devuelve el segundo operando. simple y maravilloso

bueno por ahora les dejo los modelos avanzados en un link pero despues vuelvo con mas comentarios
modelos avanzados segun ppk