Entradas

Mostrando entradas de 2009

Adelantandose a los thread en Javascript

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

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

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?

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

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

Funciones lambda o anonimas

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

Closures

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 com

Lenguaje dinámico

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 blan

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

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

Jugando a ser Dios (haciendo un DSL)

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){

Google Map-Reduce

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-

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

(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 malen

currying functions

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 ma

Un poco de Magia para empezar el dia

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 obj

Metaprogramación o DSL con javascript method chaining

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

Vamos a soñar despiertos

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)

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

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 ataj

Javascript 3d

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?

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

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

Bespin, editando codigo en la nube

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

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

Closures

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 f

Como escribir buen Javascript

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

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

Dedicado a Douglas

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

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.