Calendario del Blog
Estadísticas de visitantes








Archivo de Blog
- August 2010 (7)
- July 2010 (4)
- June 2010 (1)
- May 2010 (3)
- February 2010 (1)
- January 2010 (2)
- October 2009 (3)
- September 2009 (2)
- July 2009 (1)
- June 2009 (1)
- May 2009 (1)
- April 2009 (1)
- March 2009 (1)
- January 2008 (1)
- November 2007 (3)
- March 2007 (3)
- February 2007 (1)
- January 2007 (1)
- December 2006 (6)
- November 2006 (3)
- October 2006 (3)
- September 2006 (9)
- August 2006 (6)
- July 2006 (4)
- June 2006 (3)
- May 2006 (3)
- April 2006 (1)
- March 2006 (7)
- February 2006 (13)
- January 2006 (6)
- December 2005 (4)
- November 2005 (5)
- October 2005 (7)
- August 2005 (4)
- July 2005 (4)
- June 2005 (9)
- May 2005 (6)
- April 2005 (3)
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:
Si quisiera igualar cada elemento del arreglo a otro elemento tendría que hacer algo como:
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:
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:
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:
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:
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
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'
}
background : '#6b79a5',
textColor : '#ffffff',
fontWeight : 'bold',
borderColor : '#1f669b'
}
var newOptionArray = new Array();
for (var index in this.properties) {
newOptionArray[index] = this.properties[index];
}
for (var index in this.properties) {
newOptionArray[index] = this.properties[index];
}
Object.extend(newOptionArray, this.properties);
function foo(element) {
element = $(element);
/* rest of the function... */
}
element = $(element);
/* rest of the function... */
}
$('item1', 'item2', 'item3').invoke('hide');
var paras = $A(document.getElementsByTagName('p'));
paras.each(Element.hide);
$(paras.last()).show();
paras.each(Element.hide);
$(paras.last()).show();
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
sNov, <snov.code@gmail.com> / 18 March, 3:33pm
Se Mr .. de lujo .. lo explicaste sencillito .. jejejej .. apenas estoy empezando con esto,,, nunca fue de mi total agrado la web.. pero gracias a ti y al BlackNash me ha parecido bastante interesante .. =) .. eperare tus post al respecto x)
Dejar un comentario
Fuentes XML de comentario: RSS | Atom


Comentarios Recientes