55 4E 42 4C 4F 47

Hace algunos meses conversando con un amigo sobre tecnologías web como AJAX, me enteré de la existencia de prototype y decicí echarle un vistazo, al principio me pareció un tanto abstracto ya que nunca habia visto una programación de esa manera, funciones y clases anónimas, JSON, y muchos otros nuevos conceptos que un programador acostumbrado mayoritariamente a ver código PHP, a primera vista no les ve ni pies ni cabeza.

Ahondando un poco en lo que es para mi una nueva manera de programar llegué a entenderla y mejor aún, me vi envuelto en ella hasta el punto de la adicción que comencé a hacer sitios web mas interactivos para el usuario aumentando el número de tareas del lado del cliente, anteriormente llevaba a cabo casi en su totalidad la acciones del lado del servidor, aceptando finalmente que en mis desarrollos anteriores hacia falta un equilibrio, equilibrio al que nunca le di importancia ya que evitaba tener que lidiar con javascript, realmente esto se acabó para mi, pq el desarrollo javascript con prototype es realmente divertido.

Creo que tu, estimado lector estarás ansioso por conocer más sobre las muy famosas pero no tan bien documentadas bondades de prototype, obviamente este artículo no cubre todos los aspectos de prototype pero si los que a mi juicio son los más importantes para comenzar, la idea es que despues de leer esto no te sea tan dificil utilizar la libreria, bueno ya dejo de hablar tanto gamelote y entonces veamos un poco de acción:

Antes de comenzar a echar código debes agregar el JavaScript con el framework al head de la página así:

<script src="prototype.js" type="text/javascript"></script>


Funciones $

La función $() es bastante útil, al principio puede parecer un poco abstracta pero cuando la utilizas la primera vez no puedes dejar de usarla, esta función es un atajo a la función del DOM document.getElementById(), que mejor explicación que un ejemplo verdad? toncs vamos a verlo…


<div id="lisa">hola mundo!</div>
<button onclick="duh();"
id="homero">clic</button>
<script>
function duh(){
    var elemento = $('lisa');
    elemento.innerHTML = 'chao mundo!';
    elemento.style.color = 'blue';
}
</script>


Tambien puede ser pasado como argumento el elemento como tal, veamos otro ejemplo


<div id="lisa">hola mundo!</div>
<div id="maggie">otro divider</div>
<button onclick="duh();" id="homero">clic</button>
<script>
function duh(){
    var elemento = $('lisa');
    var arrayElem = $('maggie', elemento); //paso dos tipos de parámetros
    for(var i=0; i<arrayElem.length;i++){
        arrayElem[i].innerHTML = 'divider ' + elemento[i].id;
        arrayElem[i].style.color = 'blue';
    }
}
</script>


en el ejemplo anterior vemos las otras dos características de la función $(), que puede recibir ademas del id de un elemento, puede recibir el propio elemento, y que si recibe mas de un elemento devuelve un array de elementos.

Función $A()

Esta función convierte a cualquier parámetro en un objeto Array, pero el objeto array de prototype no es exactamente como el array de javascript, ya que posee una extensión llamada Enumerable, la cual es una copia del lenguaje de programación Ruby, dándole mucha más versatilidad a JavaScript, veamos de que estamos hablando


<div id="lisa">hola mundo!</div>
<div id="maggie">otro divider</div>
<button onclick="duh();"
id="homero">clic</button>
<script>
function duh(){
    var listaNodos = document.getElementsByTagName('div');
    var arrayElem = $A(listaNodos);
    arrayElem.each( function(el, indice){
        el.innerHTML = indice + ':' + 'divider ' + el.id;
        el.style.color = 'blue';
    });
}


mas claro imposible.

Función $H()

Convierte un objeto en un hash enumerable


<div id="lisa">hola mundo!</div>
<button onclick="duh();"
id="homero">clic</button>
<script>
function duh(){
    var objetoUsuario = {id: 1, login: "grunch", email: "fjcalderon@gmail.com"};
    // convertimos el objeto a un hash
    var hash = $H(objetoUsuario);
    $('lisa').innerHTML = hash.toQueryString();
}
</script>


Función $F()

Esta función es muy básica, solo recibe como parámetro el id o elemento de un formulario y devuelve el valor del mismo, no merece ni un ejemplo

Función Try.these()

Una función realmente útil, irá probando diferentes funciones hasta conseguir alguna que, valga la redundancia “funcione” correctamente, aca les muestro el ejemplo clásico de esta función.


<script>
function ajax() {
    return Try.these(
      function() {return new XMLHttpRequest()},
      function() {return new ActiveXObject('Msxml2.XMLHTTP')},
      function() {return new ActiveXObject('Microsoft.XMLHTTP')}
    );
}
</script>


Función document.getElementsByClassName()

Recibe como parámetro una clase CSS y devuelve un array con los elementos que tienen como atributo className la clase CSS pasada como parámetro, vamos al ejemplo

<div class=”simpson” id=”lisa”>hola mundo!</div>
<div class=”simpson” id=”maggie”>otro divider</div>
<div class=”flanders” id=”ned”>uno mas</div>
<button onclick=”duh();” id=”homero”>clic</button>
<script>
function duh(){
    var arrayNodosSimpson = document.getElementsByClassName(’simpson’);
    arrayNodosSimpson.each( function(el, indice){
        el.innerHTML = indice + ‘:’ + ‘divider ‘ + el.id;
        el.style.color = ‘blue’;
    });
}
</script>

muy util verdad? bueno, esta función era una de mis preferidas pero hace unos meses apareció una función que la destronó y ya saben lo que dicen por ahi, cuando hay santo nuevo, los viejos no hacen milagros

Función $$()

Es la vedette de las funciones de prototype actualmente, su creación es simplemente una obra de arte, gracias a ella casi no uso la función anterior, recibe como parámetro un selector CSS y devuelve un array con cada elemento que cumpla con el criterio del selector dado, veamos unos ejemplos para mayor claridad


<div id="springfield"> <div class="simpson" id="lisa"><p>hola mundo!</p></div>
<div class="simpson" id="maggie"><p>otro divider</p></div>
<div class="flanders" id="ned">uno mas</div> </div>
<button onclick="duh();" id="homero">clic</button>
<div class="simpson" id="bart"><p>ay caramba!</p></div>
<script>
function duh(){
    var arrayNodosSimpson = $$('div#springfield div.simpson p');
    arrayNodosSimpson.each( function(el, indice){
        el.innerHTML = indice + ':' + 'divider ' + el.id;
        el.style.color = 'blue';
    });
}
</script>


impresionante, no? algo muy interesante es que podemos escribir nuestro código con menos lineas aun, por ejemplo


<script>
function duh(){
    $$('div#springfield div.simpson p').each( function(el, indice){
        el.innerHTML = indice + ':' + 'divider ' + el.id;
        el.style.color = 'blue';
    });
}
</script>


Todo esto se puede hacer con JavaScript sin prototype pero, en cuantas lineas? seguramente mas de 5

Creo que con esto ya tenemos una idea mas clara sobre prototype y como comenzar a programar utilizando sus bondades, hay muchas mas características de prototype pero eso te lo dejo a ti, a lo mejor en el futuro me decido a escribir otro artículo sobre este excelente framework de JavaScript, quien sabe, saludos y nos vemos por ahi.