11.2. Prototype

Prototype es una librería de JavaScript muy completa que amplía las posibilidades del lenguaje de programación, añade todas esas funciones que faltaban y con las que los programadores soñaban y ofrece nuevos mecanismos para la manipulación de los elementos DOM. El sitio web del proyecto es http://prototypejs.org/.

Los archivos de Prototype se incluyen con el framework Symfony y son accesibles en cualquier nuevo proyecto, en la carpeta web/sf/prototype/. Por tanto, se puede utilizar Prototype añadiendo el siguiente código a la acción:

$directorioPrototype = sfConfig::get('sf_prototype_web_dir');
$this->getResponse()->addJavascript($directorioPrototype.'/js/prototype');

También se puede añadir con el siguiente cambio en el archivo view.yml:

all:
  javascripts: [%SF_PROTOTYPE_WEB_DIR%/js/prototype]

Una vez que la librería Prototype se ha cargado, se pueden utilizar todas las funciones nuevas que añade al lenguaje JavaScript. El objetivo de este libro no es describir esas nuevas funciones, pero es fácil encontrar buena documentación de Prototype en la web, como por ejemplo:

• Particletree (http://particletree.com/features/quick-guide-to-prototype/)
• Sergio Pereira (http://www.sergiopereira.com/articles/prototype.js.html)
• Script.aculo.us (http://wiki.script.aculo.us/scriptaculous/show/Prototype)

Una de las funciones que Prototype añade a JavaScript es la función dólar, $(). Básicamente se trata de un atajo de la función document.getElementById(), pero tiene más posibilidades. El listado 7-11 muestra un ejemplo de su uso.

Listado 11-7 - Uso de la función $() para obtener un elemento a partir de su ID con JavaScript

nodo = $('elementoID');

// Es equivalente a...
nodo = document.getElementById('elementoID');

// Puede obtener más de un elemento a la vez
// En este caso, el resultado es un array de elementos DOM
nodos = $('primerDiv', 'segundoDiv');

Prototype también incluye una función que no dispone JavaScript y que devuelve un array de todos los elementos DOM que tienen un valor del atributo class igual al indicado como argumento:

nodos = document.getElementByClassName('miclass');

No obstante, no se suele utilizar la función anterior, ya que Prototype incluye una función mucho más poderosa llamada doble dólar, $$(). Esta función devuelve un array con todos los elementos DOM seleccionados mediante un selector de CSS. La función anterior es equivalente por tanto a la siguiente:

nodos = $$('.miclass');

Gracias al poder de los selectores CSS, se pueden procesar los nodos DOM mediante su class, su id y mediante selectores avanzados como el descendiente (padre-hijo) y el relacional (anterior-siguiente), mucho más fácilmente que como se haría mediante Xpath. Incluso es posible combinar todos los selectores CSS para seleccionar los elementos DOM mediante esta función:

nodos = $$('body div#principal ul li.ultimo img > span.leyenda');

Un último ejemplo de las mejoras en la sintaxis de JavaScript proporcionadas por Prototype es el iterador de arrays llamado each. Permite un código tan conciso como PHP y con la posibilidad añadida de definir funciones anónimas y closures de JavaScript. Se trata de un truco muy útil si se programa JavaScript manualmente.

var verduras = ['Zanahorias', 'Lechuga', 'Ajo'];
verduras.each(function(comida) { alert('Me encanta ' + comida); });

Como programar JavaScript con Prototype es mucho más divertido que hacerlo sin su ayuda y como Prototype es parte de Symfony, es conveniente dedicar el tiempo necesario para leer su documentación antes de continuar.