Prototype: el elixir de javascript

PrototypePrototype es un framework para javascript creado por Sam Stephenson que ha revolucionado el modo de programar en este lenguaje.

Hasta ahora programar con javascript era algo tedioso y aburrido (almenos para mi). Desde que estoy usando esta librería, la programación se ha vuelto rápida, agil y lo que es mejor, divertida.

Desde hace un tiempo, infinidad de desarrolladores estan adoptándolo en sus proyectos y creando verdaderas obras de arte en cuanto a diseño de interfaz y herramientas para la web se refiere.

Pero, ¿que es lo que tiene Prototype que lo hace tan agradable para los desarrolladores?

Sigue leyendo y te explico un poco de que va todo esto…


Prototype aporta una serie de utilidades que hacen muy fácil la creación de complejas librerias y funciones javascript. Estas son algunas de ellas (las que más comunmente uso):

Función $()

Esta función es “simplemente” un atajo de document.getElementById(). Pero va un poco más lejos. Podemos recoger una série de elementos con ella de tal forma que nos devolverá un array de elementos.

Ejemplo:

<script>
	function test1()
	{
		var miCapa = $('capa1');
		alert(miCapa.innerHTML);
	}
 
	function test2()
	{
		var misCapas = $('capa1','capa2');
		for(i=0; i<miscapas .length; i++)
		{
			alert(misCapas[i].innerHTML);
		}
	}
</script>
<div id="capa1">Un texto</div>
<div id="capa2">Otro texto</div>
<input type="button" value="funcion1" onclick="test1();"/><br />
<input type="button" value="funcion2" onclick="test2();"/><br />
</miscapas></script>

Función $F()

Otra función que es muy cómoda de usar. Esta nos recogera el valor del elemento de formulario que le indiquemos.

<script>
	function test()
	{
		var valor = $F("saludo");
		alert(valor);
	}
</script>
<input type="text" value="hola que tal" id="saludo" onClick="test();" />

Sobretodo tened en cuenta que es sólo para recibir el valor, no para asignarlo. Por lo tanto la siguiente línea estaría mal.

$F("saludo") = "muy bien, gracias";

Función $A()

Esta función nos convertirá en un array aquello que le pasemos. Por ejemplo:

<script>
	function test()
	{
		var opciones = $("select").options;
		var array_opciones = $A(opciones);
		for(i=0; i<array_opciones .length; i++)
		{
			alert(array_opciones[i].innerHTML);
		}
	}
</script>
<select id="select">
	<option value="1">Primera</option>
	<option value="1">Primera</option>
	<option value="1">Primera</option>
</select>
</array_opciones></script>

Bucles a’la Ruby

Hasta ahora, los bucles los hemos hecho de esta forma:

<script>
	function test()
	{
		for(i=0; i<miselementos .length; i++)
		{
			alert(misElementos[i])
		}
	}
</script>
</miselementos></script>

Ahora con prototype tenemos esta otra forma de hacerlos:

<script>
	function test()
	{
		misElementos.each(function(elemento)
		{
			alert(elemento)
		})
	}
</script>

Ademas de estas y muchas otras funciones, Prototype nos extiende varias clases y objetos que existen actualmente. Algunos de los cuales son:

Extensiones para la clase String

Algunas de ellas son:

  • stripTags() devuelve el texto eliminando cualquier tag HTML que puediera tener
  • escapeHTML() devuelve el texto escapando cualquier tag HTML que puediera tener
  • unescapeHTML() … ¿no lo adivinas?

Extensiones para la clase Array

Algunas de ellas son:

  • indexOf(valor) devuelve indice del elemento que tiene el valor que le pasamos
  • without(valor1 [, valor2 [, .. valorN]]) devuelve el array sin los elementos que le pasamos a la función

Extensiones para la clase array

Vamos a ver ahora algunos de los nuevos métodos para esta clase:

  • indexOf(valor) devuelve indice del elemento que tiene el valor que le pasamos
  • without(valor1 [, valor2 [, .. valorN]]) devuelve el array sin los elementos que le pasamos a la función

Extensiones para el objetoEvent

Algunas de ellas son:

  • element(evento) devuelve el objeto que ha llamado al evento
  • stop(evento) aborta el comportamiento normal del evento (por ejemplo un enlace)

El objeto Element

Este nuevo objeto nos da útiles funciones para manipular los elementos del DOM.

  • addClassName(elemento, clase) asigna, al elemento que se le pasa, la clase css que también se le pasa
  • removeClassName(elemento, clase) elimina, al elemento que se le pasa, la clase css que también se le pasa
  • show(elem1 [, elem2 [, elem3 [...]]]) muestra el elemento o elementos que se le pasan a la función
  • hide(elem1 [, elem2 [, elem3 [...]]]) oculta el elemento o elementos que se le pasan a la función
  • toggle(elem1 [, elem2 [, elem3 [...]]]) invierte el valor de la propiedad display del elemento o elementos que se le pasan a la función
  • remove(elemento) elimina el elemento del DOM
  • scrollTo(elemento) hace un scroll de ventana hasta la posición del elemento que se le pasa
  • update(elemento, html) reemplaza el contenido del elemento (innerHTML) con el valor que se le pasa

El objeto Insertion

El objeto Insertion lo usaremos para introducir contenido en el DOM. Tiene 4 métodos: Before, After, Top y Bottom, aunque los cuatro se usan de la misma forma.

	function test()
	{
		new Insertion.Before("miFormulario", "antes de etiqueta <form>");
		new Insertion.After("miFormulario", "después de etiqueta </form>");
		new Insertion.Top("miFormulario", "antes de etiqueta <input />, dentro de <form>");
		new Insertion.Bottom("miFormulario", "después de etiqueta <input />, dentro de </form><form>");
	}
	</form><form id="miFormulario">
		<input type="text" id="miTexto" value="Hola que tal" onClick="test();" />
	</form>

El objeto Field

Este objeto nos da utilidades para trabajar con elementos de formularios. Algunas son:

  • clear(campo1 [, campo2 [, campoN]]) vacia el contenido del campo o campos que se le pasan a la función
  • focus(elemento) pasa el foco al elemento que se pasa

El objeto Form

Este objeto nos da utilidades para trabajar con formularios. Algunas son:

  • serialize(formulario) devuelve una cadena formateada para pasar por URL con los elementos del formulario y sus valores. Esta función nos será muy útil si trabajamos con ajax
  • getElements(formulario) devuelve un array con los elementos que pertenecen al formulario
  • enable(formulario) activa todos los elementos del formulario
  • disable(formulario) desactiva todos los elementos del formulario
  • focusFirstElement(formulario) da el foco al primer elemento del formulario

Hasta aquí explico de las bondades de Prototype, aunque no son ni una quinta parte de las que hay. Espero que os sirva almenos para abrir un poco el apetito javascript y que empeceis a programar en este lenguaje que vive su segunda juventud :)

Os recomiendo encarecidamente que le echeis un ojo a esta pagina http://www.sergiopereira.com/articles/prototype.js.html donde se explican muy bien muchas aportaciones que nos hace Prototype.

    Leave a Reply