Cuando usar Call y Cuando usar Apply

En JavaScript uno de los temas mas importantes es el del manejo de contexto, es uno de los temas mas importantes cuando empezamos a hacer aplicaciones serias en JavaScript.

Dos utilidades muy importantes para el manejo de contexto son Call y Apply, ambas suelen ser bastante difíciles de explicar pero este video lo hace muy bien.

Para hacer un resumen del video, call y apply sirven exactamente para los mismo, setear el contexto en el que se va a ejecutar una function.

Call se utiliza cuando pasamos cada uno de los elementos de contexto como un parametro en la llamada y apply cuando queremos setear los elementos del contexto con un solo parametro que es un array que contiene los elementos del contexto a setear.

Mas info

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/call

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply

Los dejo con el video

JavaScript: call and apply from The JavaScript Playground on Vimeo.

Share

Quien es Dogulas ?

1244480762e7S3cBG6

Los que revoloteamos y damos vueltas por el mundo de JavaScript tenemos como eminencias a dos personas, una es Brendan Eich, creador y padre de JavaScript y a Douglas Crockford. Ahora, quien es Dogulas?, es un Ingeniero de Yahoo que escribió una de las obras maestras de JavaScript, The Good Parts y ademas es el creador de JSLint. Como si esto fuese poco, también es el creador del formato de intercambio de datos JSON y también es el culpable de que hoy en día sea un estándar defacto. Ver mas data aquí

Por que me acuerdo hoy de Douglas?, navegando me tope con un video que no veía desde hace un tiempo donde Dogulas explica su libro en una Google Tech Talk, en este video ademas de explicar muchas consideraciones super importantes de JavaScript y explica como deberíamos enfocar nuestros pensamientos si realmente queremos ser verdaderos programadores de JavaScript, cuenta mucha historía personal e historía de Json. Recomiendo totalmente que se sienten y lo miren en detalle.

Si se quedaron con ganas de mas, pueden ver mas cosas de Dogulas aquí.

Share

JavaScript – Enlace de Eventos

Una de las cosas fundamentales a concer en el mundo de JavaScript es el Sistema de Eventos, es una de las cosas mas utilizadas cuando uno desarrolla interactividad en la UI basada en Js; tambien es una de las cosas peor aprendida por los novatos en JavaScript.
Lo primero que se aprende es a definir un evento de manera inline dentro del tag HTML
<div onClick=”doSomethingOnClick();”>…</div>
Esta es una forma fácil pero es la peor, razones, varias, las más importantes
1 – Estamos acomplando fuertemente nuestra lógica programática con la presentación
2 – Esta forma ejecuta el código definido como valor del atributo onClick mediante un eval, es decir
que este código se evalua al momento de ejecutarse, esto es algo pésimo.
Nunca deberíamos realizar este tipo de declaraciones de eventos.
Avanzando un poco mas, nos cruzamos con otra técnica muy común para definir eventos. Supongamos
que tenemos este fragmento dentro de un documento.
<div id=”main”>
Hello this is main
<div id=”inner”>
And this it’s inner
</div>
<div>
Y queremos asociar una funcion al evento click en el elemento de Id igual a main.
Vía código podemos hacer esto:
var eventElement = document.getElementById(‘main’);
eventElement.onclick = doSomeDummyEvent; //Esto es una funcion
Esto es correcto, mejor que el caso anterior pero cuenta con otro inconveninte, al realizar
el enlace de la funcion al elemento, este enlace se guarda como un atributo del elemento,
por si se sobrescribe dicho atributo el enlace previo se pierde. En otras palabras
//En algun momento se carga este fragmento de código
var eventElement = document.getElementById(‘main’);
eventElement.onclick = doSomeDummyEvent; //Esto es una funcion
//Posteriormente se carga este
var eventElement = document.getElementById(‘main’);
eventElement.onclick = doSomeOtherDummyEvent; //Esto es una funcion
Se terminará ejecutando doSomeOtherDummyEvent y nunca se ejecutará doSomeDummyEvent.
Esto por estupido que les parezca es muy grave dado que si cargamos liberías de diferentes
proveedores, o código desarrollado por dos programadores diferentes dentro del mismo proyecto,
puede provocar colisiones y llevar a errores inesperados. Moraleja, tampoco debería usarse al
menos que este conciente de lo que hace.
El tercer y último caso, este ya no tan conocido por todos, es añadir el evento a una cola de
eventos, para esto Js y DOM nos proveen del método addEventListener y removeEventListener.
Mediante este mecanismo podemos enlazar todos los manejadores de eventos que sean necesarios
para un evento determinado a un elemento particular. El orden de ejecución será determinado
por la manera en que los eventos fueron registrandose. Vemos un ejemplo de uso
var eventElement = document.getElementById(‘main’);
eventElement.addEventListener(‘click’,doSomeDummyEvent);
eventElement.addEventListener(‘click’,doSomeOtherEvent);
El problema de addEventListener es que en IE no se llama así, se llama attachEvent y deatachEvent, la
lógica sigue siendo la misma.
Relación en JQuery.
En Jquery estas dos últimas situaciones estan reflejadas, si hacemos
$(‘#main’).click(function() { …. });
Estamos en el primer caso.
$(‘#main’).bind(‘click’,function() {…});
Estamos en el segundo caso.
Moraleja, utilizar .bind, .[evento] solo si estan seguros de lo que estan buscando.
Queda mucho mas para hablar de eventos, se los contaré en próximos posts.
Les dejo unos links interesantes
Estandar
http://www.w3.org/TR/DOM-Level-2-Events/events.html
AddEventListener
https://developer.mozilla.org/en/DOM/element.addEventListener
Attach Event
http://msdn.microsoft.com/en-us/library/ms536343(v=vs.85).aspx
Jquery
http://api.jquery.com/click/
http://api.jquery.com/bind/

Una de las cosas fundamentales a conocer en el mundo de JavaScript es el Sistema de Eventos, es una de las cosas mas utilizadas cuando uno desarrolla interactividad en la UI basada en Js; tambien es una de las cosas peor aprendida por los novatos en JavaScript.

Enlace Inline

Lo primero que se aprende es a definir un evento de manera inline dentro del tag HTML

<div onClick=”doSomethingOnClick();”>…</div>

Esta es una forma fácil pero es la peor, razones, varias, las más importantes

1 – Estamos acomplando fuertemente nuestra lógica programática con la presentación

2 – Esta forma ejecuta el código definido como valor del atributo onClick mediante un eval, es decir que este código se evalúa al momento de ejecutarse, esto es algo pésimo.

Nunca deberíamos realizar este tipo de declaraciones de eventos. Avanzando un poco mas, nos cruzamos con otra técnica muy común para definir eventos. Supongamos que tenemos este fragmento dentro de un documento.

<div id=”main”>

Hello this is main

<div id=”inner”>

And this it’s inner

</div>

<div>

Enlace por atributos del elemento

Y queremos asociar una funcion al evento click en el elemento de Id igual a main.  Vía código podemos hacer esto:

var eventElement = document.getElementById(‘main’);

eventElement.onclick = doSomeDummyEvent; //doSomeDummyEvent es una funcion

Esto es correcto, mejor que el caso anterior pero cuenta con otro inconveninte, al realizar  el enlace de la funcion al elemento, este enlace se guarda como un atributo del elemento, por si se sobrescribe dicho atributo el enlace previo se pierde. En otras palabras

//En algun momento se carga este fragmento de código

var eventElement = document.getElementById(‘main’);

eventElement.onclick = doSomeDummyEvent;

….

//Posteriormente se carga este

var eventElement = document.getElementById(‘main’);

eventElement.onclick = doSomeOtherDummyEvent;

Se terminará ejecutando doSomeOtherDummyEvent y nunca se ejecutará doSomeDummyEvent.

Esto por estúpido que les parezca es muy grave dado que si cargamos liberías de diferentes proveedores, o código desarrollado por dos programadores diferentes dentro del mismo proyecto, puede provocar colisiones y llevar a errores inesperados. Moraleja, tampoco debería usarse al menos que este consciente de lo que hace.

Enlace por medio de la cola de eventos

El tercer y último caso, este ya no tan conocido por todos, es añadir el evento a una cola de eventos, para esto Js y DOM nos proveen del método addEventListener y removeEventListener.

Mediante este mecanismo podemos enlazar todos los manejadores de eventos que sean necesarios para un evento determinado a un elemento particular. El orden de ejecución será determinado por la manera en que los eventos fueron registrandose. Vemos un ejemplo de uso

var eventElement = document.getElementById(‘main’);

eventElement.addEventListener(‘click’,doSomeDummyEvent);

eventElement.addEventListener(‘click’,doSomeOtherEvent);

El problema de addEventListener es que en IE no se llama así, se llama attachEvent y deatachEvent, la lógica sigue siendo la misma.

Relación en JQuery.

En Jquery estas dos últimas situaciones estan reflejadas, si hacemos

$(‘#main’).click(function() { …. });

Estamos en el primer caso.

$(‘#main’).bind(‘click’,function() {…});

Estamos en el segundo caso.

Moraleja, utilizar .bind, .[evento] solo si estan seguros de lo que estan buscando.

Queda mucho mas para hablar de eventos, se los contaré en próximos posts. Les dejo unos ejemplos completos sencillos para que vean el caso 2 y 3 (No son cross browser, lo hice para chrome y firefox)[Descargar].

Tambien dejo unos links interesantes

Estándar

http://www.w3.org/TR/DOM-Level-2-Events/events.html

AddEventListener

https://developer.mozilla.org/en/DOM/element.addEventListener

Attach Event

http://msdn.microsoft.com/en-us/library/ms536343(v=vs.85).aspx

Jquery

http://api.jquery.com/click/

http://api.jquery.com/bind/

Share

Debugear JS con Firebug

Últimamente estoy laburando mucho con JavaScript, estoy realizando un trabajo de customización de un container OpenSocial (Shindig para ser más específico). El tema es que necesito ir traceando la ejecución, debbugeando, viendo el contenidos de variables, etc; por ello empezé a sacarle mucho el jugo a Firebug y a Chrome.

Hoy les voy a contar algunas cosas de Firebug, pero los ejemplos pueden replicarse fácilmente en Chrome.

Para trabajar con los JS en Firebug tenemos dos solapas super utiles, Console y Script. Console permite ir viendo los mensajes de error y los generados mediante el objeto console (ahora lo vemos a este último). Ademas te tener una consola interactiva donde podemos crear pequeños scripts y para probarlo dentro del scope de nuestro sitio.

La otra solapa permite ir haciendo debug del código, poner breakpoints, hacer step by step etc. Lo mas cheto de Firebug es la consola, esta puede presentarte información de los objetos y de las interacciones via XmlHttpRequest que esta generando tu código Javascript sin dar muchas vueltas.

Por ejemplo, desde nuestro código JS si queremos generar una salida por consola podemos utilizar el objeto global console y utilizar alguno de los siguientes métodos.

* console.log para mostrar por consola lo que quieras analizar.

* console.info, console.warn and console.error Para mostrar mensajes segun diferentes niveles de error.

* console.time para medir cuanto dura una aplicación.

El más común de todos ellos es console.log (viene a ser un reemplazo del alert), su modo de uso es muy sencillo.

console.log(obj1 [,obj2, obj3, obj4])

O puede ser utilizado como una salida formateada (printf)

console.log("%s is %i years old.", "Bob", 42)

Estos son los códigos de formato

%s = string

%i = integer

%o = object hyperlink

Podemos pasarle una lista de todas los objetos que deseamos mostrar. Pero hay muchas otras utilidades más alla de esta, alguna de ellas las dejo en este listado.

Salida

console.debug(object[,object]) Muestra un mensaje similar al anterior pero incluyendo un hyperlink hacia la línea desde donde ha sido llamado.

consolo.info(object[, object]) Similar al anterior, con estilo “info”

console.warn(object[,object]) Muestra un mensaje en modo “warning”

console.error(object[, object]) Muestro un mensaje en modo “error”

console.dir(object) Muestra una lista interactiva de todas las propiedades de un objeto, idéntico que en el tab DOM.

console.dirxml(node) Muestra el arbol XML del elemento HTML o XML. Similar al tab HTML.

Agrupar la salida

console.group(object[,object,…]) Permite anidar mensajes dentro de la consola. Usaremos console.groupEnd() para cerrar el grupo.

console.groupEnd() Cierra el bloque anidado.

Para testeos sencillos

console.assert(expresion[,object]) Comprueba que una expresión sea cierta, sinó muestro en la consola la excepción recibida.

Medir tiempos de Ejecución

console.time(name) Crea un temporizador con el nombre que le indiquemos.

console.timeEnd(name) Termina el temporizador con el nombre indicado.

Analizar el StackTrace en un punto determinado

console.trace() Muestra una traza interactiva desde donde fue llamada.

debugger : Esta instrucción esta genial dado que te permite para el codigo mientras se esta ejecutando en ese punto y saltar a la solapa de script, alli podrás seguir el codigo con el debugger lo que te simplifica la vida bastante. Podríamos decir que es un breakpoint declarado en el código.

Hay muchísimas cosas más para investigar sobre este excelente herramienta, pero este es un buen punto de partida para largar con firebug. Les dejo los links a los sites que me sirvieron para cultivar el conocimiento.

http://getfirebug.com/logging
http://getfirebug.com/commandline
http://ubuntulife.wordpress.com/2008/10/16/escribir-trazas-javascript-en-la-consola-de-firebug/
http://docs.aptana.com/docs/index.php/Writing_to_the_Firebug_console
http://www.anieto2k.com/2007/03/07/firebug-api-de-la-consola/
http://www.desarrolloweb.com/articulos/funciones-api-consola-firebug-ii.html

http://getfirebug.com/logging

http://getfirebug.com/commandline

http://ubuntulife.wordpress.com/2008/10/16/escribir-trazas-javascript-en-la-consola-de-firebug/

http://docs.aptana.com/docs/index.php/Writing_to_the_Firebug_console

http://www.anieto2k.com/2007/03/07/firebug-api-de-la-consola/

http://www.desarrolloweb.com/articulos/funciones-api-consola-firebug-ii.html

Share