Actualmente, varios frameworks javascript open source pelean entre sí para hacerse con el número mayor de usuarios posible. Entre éstos nos encontramos, por ejemplo, con Dojo, MooTools, jQuery y Prototype. Cada uno provisto de sus ventajas e inconvenientes, se hacen necesarios a la hora de desarrollar en entornos web. Hoy empezaremos echándole un primer vistazo a Prototype; una revisión de las funciones muy básicas que nos permitirán tener la base para realizar funciones más complejas.

Autor:

Jordi es un trabajador inquieto, al que le gustan los retos y facilitar el trabajo a los demás. Es por eso que colabora con ontuts.com; y trabaja en INIT SERVICES. A modo personal, lleva la web itortv.com para intentar aportar un poco de orden al mundo de las series de tv.
Descarga Demostración

Pequeña reflexión Inicial

La mayoría de los frameworks javascript open source existentes para desarrollares ofrecen ventajas e incovenientes dependiendo del entorno donde se usan,  o de los requisitos que se necesitan. A medida que se avanza en el desarrollo de éstos, sus desarrolladores han ido enfocándose en su ámbito preferido, permitiendo así al usuario seleccionar un framework u otro dependiendo de los requisitos del proyecto a desarrollar.

Por ejemplo, dojo, uno de mis preferidos, es un framework muy potente y muy completo, que otorga al usuario desarrollador, las armas necesarias para crear una RIA (Rich Interface Application) muy vistosa y muy eficaz en poco tiempo. Incluye consigo la librería dijit, que contiene widgets out-of-the-box para todo lo que necesario para conseguir una buena RIA: desde campos de sugerencias (llamados combobox o filteringselects), hasta una sencilla forma de crear layouts (pestañas, tabs, etc).

Sin embargo, al generar una página web expuesta al público, dojo puede ser demasiado pesado, y es por eso que se hace necesario revisar otros frameworks. En este caso nos encontramos con Prototype, jQuery y/o MooTools (entre otros). Históricamente, los dos primeros han protagonizado una encarnizada batalla para obtener el poder, saliendo generalmente vencedor uno u otro dependiendo quién lo analice (demostrando que existen opiniones para todos los gustos). MooTools, algo más “por libre”  y uno de los más nuevos, ha aprendido de los errores de los dos, y ha generado un framework liviano y modular, aunque algo difícil de usar si es “tu primera vez”.

En este tutorial nos centraremos en Prototype, ya que es el que más uso. ¿Por qué? Supongo que porque al tirar la moneda en su día, salió “cara”; podría haber salido “cruz”, y ahora estaríamos hablando de jQuery, pero no es así. Sin embargo, los conceptos en ambos frameworks son muy sencillos y similares, y puede que te interese leer este “primeros pasos de prototype” para compararlo con jQuery, así que te animo a que sigas leyendo.

Prototype y jQuery son dos frameworks muy similares. Son muy útiles a la hora de desarrollar webs de cara al “gran público”, ya que ofrecen comandos e instrucciones que simplifican al máximo las tareas de programación javascript, y minimizan, sobre todo, la probabilidad de error al desarrollar.

Prototype – Introducción

prototype

Prototype sorprende al desarrollador típico de javascript nada más comenzar a usarlo. ¿Por qué? Por su modo de emplearse. Cuando comencé, esperaba que existiera una clase “Prototype” o similar, que contuviera de algún modo más o menos organizado (probablamente menos), todas las nuevas instrucciones introducidas por el framework. Pero estaba muy equivocado.

Prototype, y de allí su nombre, extiende el prototipado de los objetos nativos de javascript, lo que significa que añade al propio objeto las funciones adicionales. Por ejemplo, un objeto javascript en sí (digamos una capa “div”) no contiene por sí solo el método “hide()” (esconder), pero al añadirle el framework prototype, mágicamente, es posible invocar el método “hide()” para ocultar esta capa. Interesante planteamiento, ¿a que sí?

Funciones típicas

La función más típica a la hora de usar javascript de un modo algo más avanzado, es el “document.getElementById”. Cada vez que usamos este método hemos de teclear 22 caracteres, y además, pensar si la D es mayúscula o no; es algo que nos pasa a todos. Con prototype (y por cierto, también con jQuery), esta función pasa a tener un alias más asequible denominado $.

Por ejemplo, $(“capa”) es equivalente a escribir document.getElementById(“capa”)

Bastante más eficaz, ¿verdad?

Otra de las funciones más útiles es $$. Esta función permite llegar a los objetos a través de su selector CSS (es decir, a través de sus clases y sus ID).

Por ejemplo, $$(‘#capa’) sería similar a $(‘capa’), aunque podría usarse por ejemplo $$(‘div.blanca’) para obtener todos los div cuyo class es blanca.

Para terminar el apartado Funciones Típicas, explicaremos el “each”, que permite aplicar una función a cada uno de los métodos del array de una forma sencillísima.

$$('div.blanca').each(function(r) { r.removeClassName('blanca'); }

Este código de una sola línea elimina la clase “blanca” a todos los div que la contengan.

La función $ sustituye al fatídico y difícil de escribir document.getElementById sustituyendo 22 caracteres por uno solo.

Jugando con clases

Cinco funciones relacionadas con CSS que no requieren mayor explicación son:

$('capa').hide();
$('capa').show();
$('capa').toggle();
$('capa').addClassName('blanca');
$('capa').removeClassName('blanca');

Trabajando con DOM

Trabajar con DOM implica poder alterar el documento mediante javascript; es decir, modificar elementos html desde y dónde se desee.

Esto es sencillo de realizar con prototype mediante los métodos insert y remove. Además, a la hora de insertar elementos,es posible indicar la situación relativa respecto al elemento donde insertarlo (detrás de, delante de, antes o encima de, y después o debajo de).

$('capa').insert({after:'contenidohtml'});
$('capa').insert({before:'contenidohtml'});
$('capa').insert({top:'contenidohtml'});
$('capa').insert({bottom:'contenidohtml'});

Eliminar un objeto es tan fácil como:

$('capa').remove()

Conclusión

En este tutorial, hemos visto cómo depende el proyecto puede ser más útil usar un framework js u otro. Para el caso de páginas web abiertas al público, es necesario utilizar un framework liviano. Si es la primera vez que se trabaja con estos frameworks, uno de los más sencillos es Prototype. Se han mostrado la funcionalidad de algunos métodos que incluye este framework para demostrar la sencillez de su uso.

Si deseas saber más sobre Prototype y conocer a fondo su API, te invitamos a visitar: http://api.prototypejs.org/

No te olvides de descargar los ejemplos si quieres ver los métodos mencionados en acción.

Y por supuesto, si conoces jQuery, dojo, Prototype y/o MooTools de antemano, y no estás de acuerdo en algo que he dicho anteriormente, te invito a que comparemos opiniones a través de los comentarios.

¡Nos vemos! $(‘jmarti’).hide();

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (6 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Me ha parecido interesante el tutorial ya que todavía apenas he visto nada de Prototype (yo soy de jQuery).
Tan solo quería preguntar una cosilla, ¿realmente la librería extiende las clases con eses métodos? Es decir, ¿se podría hacer lo siguiente?:

document.getElementById(“capa”).hide();

Porque en jQuery se puede hacer $(“#capa”).hide() pero realmente estás trabajando con un objeto de tipo jQuery, no de tipo DOMElement.

Un saludo!

Hola Iván,

Es una buena pregunta porque tiene respuesta de SI pero NO.

SI, porque funciona en Chrome y FF. No, porque no funciona en IE. (cómo no).

¿Por qué? Porque IE es el único que no permite modificar el prototipado de sus HTMLElement, así que Prototype tiene que trabajar en ese caso solo con el objeto wrapper “Element”.

En la página de prototype puedes leer cómo hacen este “hack”:

http://www.prototypejs.org/learn/extensions

Otro saludo y gracias por el comentario!

Gorka

Enhorabuena!

Ahora sólo te falta un modo “cate”, no? :-)

Salu2

Ajá! Sieeeeempre el IE complicando las cosas…en fin

Dablin

Gracias por esta introducción a Prototype. Me ha sido de utilidad.

Felix

saludos,
Tengo este problema, he leido innumerables articulos citados en la web que no resuelven el problema de mostrar/ocultar contenidos, partiendo de tener ‘display:none’. Lo que necesito es cargar una info. contenida en un ‘div’, pero la misma debe estar oculta desde la carga de la pagina. Conoce como hacerlo con prototype, sabe si en jQuery hostean soluciones para esto?Desde la version 1.5 de prototype esta descontinuada esta opcion. He leido que solo teniendo visible el contenido puedo lograrlo y probe asi y me funciono, pero sigue sin funcionar cuando le defino la propiedad CSS al cargar a pagina, o en la misma linea HTML de la etiqueta.