Navegador de Archivos
Calendario del Blog
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
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'
}
var newOptionArray = new Array();
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... */
}
$('item1', 'item2', 'item3').invoke('hide');
var paras = $A(document.getElementsByTagName('p'));
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
Dejar un comentario
Estadísticas de visitantes








Comentarios Recientes
- Celulares con Wifi en Como escoger el amor de tu vida.
- master en La diferencia entre un amigo y un novio
- Iván Jaimes en Internet Explorer 8 y la vista compatibilidad
- mauro en Internet Explorer 8 y la vista compatibilidad
- Iván Jaimes en ¿Qué hacer para que te valoren más?
- marcela en ¿Qué hacer para que te valoren más?
- Iván Jaimes en
- karyot en Haces ruido o te gusta volar?
- Iver en Haces ruido o te gusta volar?
- leo_on en Haces ruido o te gusta volar?
- Iván Jaimes en Los detalles hacen la diferencia
- linuxman en Los detalles hacen la diferencia
- Marcelo Araújo en Internet Explorer 8 y la vista compatibilidad
- Iván Jaimes en Código con aroma de mujer
- karyot en Código con aroma de mujer
- Profesor Mamelowsky en Código con aroma de mujer
- karyot en Lo sabroso de la vida
- Iván Jaimes en
- Iván Jaimes en Internet Explorer 8 y la vista compatibilidad
- cordoba en Internet Explorer 8 y la vista compatibilidad

# RE: Sobre JavaScript y prototype
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