Iver's web place

Navegador de Archivos

Calendario del Blog

February 2012
Sun Mon Tue Wed Thu Fri Sat
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 1 2 3

General

JavaScript y prototype

Ya tiene tiempo que estoy trabajando con JavaScript y he tenido ganas de hacer un pequeño manual sobre como usar Prototype[1] y algunos ejemplos con este lenguaje tan versátil y poderoso en el ambiente web.

Para aquellos que no saben que onda con JavaScript[2] les recomiendo se den una vuelta por la Wikipedia[3].

En cuanto a prototype, existen muchos sitios[4] que usan este framework para que puedas ver lo que se puede construir y de manera elegante. Un ejemplo simple y poderoso se puede ver en la manipulación de Array, suponiendo que se tiene un arreglo con la notación siguiente:

 
  this.properties = {
         background          : '#6b79a5',
         textColor           : '#ffffff',
         fontWeight          : 'bold',
         borderColor         : '#1f669b'
      }
 
Si quisiera igualar cada elemento del arreglo a otro elemento tendría que hacer algo como:
 
  var newOptionArray = new Array();
  for (var index in this.properties) {
    newOptionArray[index] = this.properties[index];
  }
 
Para simplificar el uso común de este tipo de acciones existe una clase llamada Object que permite manipular una asignación como esta con tan solo la siguiente línea:

 
    Object.extend(newOptionArray, this.properties);
 
Otra utilidad interesante que tiene prototype es el uso simplificado para el acceso a objetos y extensión del DOM, en esté tipo de utilidades están la notación $() y la $A(), la primera es llamada la piedra angular de prototype, a parte de poder usarlo como un alias del document.getElementById, también permite el uso de la referencia del objeto para hacer más flexible una función. Ejemplo de esto lo podemos ver con un código como el siguiente:

 
function foo(element) {
    element = $(element);
    /*  rest of the function... */
}
 
De esta manera se puede pasar a la función el id del objeto a manipular o bien el objeto mismo y trabajar internamente al objeto sin tener que identificar nada más. Otro uso práctico de esta utilidad se puede ver de la siguiente manera:

 
$('item1', 'item2', 'item3').invoke('hide');
 
Con esto se pueden ocultar varios elementos en una sola instrucción, esto hace más legible el código. En cuanto a la siguiente utilidad $A(), tiene como uso principal el obtener un arreglo de objetos a partir de una colección que podría ser representada como tal:

 
   var paras = $A(document.getElementsByTagName('p'));
   paras.each(Element.hide);
   $(paras.last()).show();
 
En el código anterior, aparte de obtener un arreglo a partir de todos los elementos de parrafo en un documento HTML, se puede recorrer cada elemento (paras.each) de manera simple e ir ocultando cada uno de ellos (Element.hide()). En el tercer renglon se obtiene el último elemento y se muestra.

Espero poner más información al respecto poco a poco y principalmente enriquecer la información sobre como trabajar JavaScript orientado a objetos.

[1] http://en.wikipedia.org/wiki/Prototype
http://www.prototypejs.org/
[2] http://es.wikipedia.org/wiki/Javascript
[3] http://www.wikipedia.org/
[4] http://www.prototypejs.org/real-world
Trackback URI: http://es.iver.com.mx/index.php/trackback/125

# RE: Sobre JavaScript y prototype

ChilliCoder, <chilli_coder@hotmail.com> / March 15, 12:36 pm  
avatar

Qui'bo... Ola de aparecidos posteando :P Interesante post... Deje de hacer web hace un par de años pero creo que le voy a intentar algo con RoR y veo que mucho gira alrededor de Js, let's rust off :D

Dejar un comentario

Escribe el código Captcha que estás viendo

Fuentes XML de comentario: RSS | Atom

Estadísticas de visitantes

6
61
27327