Introduciendo Prototype // Combinar jQuery con Prototype

Aunque me había planteado llevar mi debate de Twitter con mi colega Jumnper sobre el «Rock the Rebel, Metal the Devil» de Volbeat a este blog (a él le encanta, a mi me recuerda terriblemente al Load de Metallica), creo que mejor seguiré un poco más con entradas centradas en informática, por «comercialidad» porque son las más leídas (curiosamente tengo un montón de visitas desde México en este tipo de entradas)

Más de una vez he hablado de jQuery aquí, un gran facebook que nos da gran productividad en javascript, pero que no es la única opción. Prototype desde un primer momento ha protagonizado una encarnizada batalla con jQuery por la corona de «framework más usado». Podéis descargarlo en este enlace para trastear con él.

Al igual que en jQuery existe una función $, que en Prototype nos permite seleccionar los elementos por su ID. Dirás «en jQuery es mejor porque permite cualquier selector CSS», cierto, pero también existe una función para eso, que es $$

Otros métodos intersantes son $F, que accede al valor de un campo de un formulario, $A, que convierte listas de nodos o colecciones HTML en arrays, $H, que permite crear arrays asociativos o $R, que permite crear rangos de valores.

A la hora de trabajar con cadenas tenemos el método escapeHTML(), que permite transformar los caracteres problemáticos en su entidad HTML. También puedes usar toArray(), que convierte la cadena en un array de caracteres, y dispones de camelize(), que convierte una cadena separada por guiones a notación CamelCase.

Los métodos .show() y .hide() son lo que parecen ser, ocultan o muestran el elemento seleccionado (como sus homónimas en jQuery). En cambio .toogle() lo que hace es cambiar el estado entre show y hide dependiendo de en cual esté el elemento.

En cuanto a métodos para campos de formulario lo más interesante me parece .clear(), que vacía el valor de un campo, y .present(), que es cojonudo para validar campos, dado que devuelve false si el campo está vacío. Y si aplicas .disable() a un formulario lograrás desactivar todos sus campos.

Pero es con Ajax con lo que Prototype realmente te facilita la vida. Tienes Ajax.Updater(), que recibe tres parámetros: el ID del elemento a recargar por ajax, la página php que generará el código y varias opciones, y con Ajax.PeriodicalUpdater sólo tendréis que pasarle el parámetro frecuency seguido de un número ({frecuency:30}) para que realice una recarga automática por cada intervalo de ese número de segundos.

Y trabajando con DOM tampoco os dejará tirados este framework. El método .insert(), por ejemplo, os dejará elegir si queréis ponerlo detrás de, delante de, antes o encima de, y después o debajo de un elemento en concreto.

¿Mejor jQuery o Prototype? Bueno, cada uno tiene sus debilidades y sus potenciales. Yo uso más jQuery, por conocerlo mejor, pero incluso los podéis usar a la vez. Pero cuidado, tenéis que hacer un apañito antes para evitar conflictos, dado que ambos tienen un método $. La forma de evitar el conflicto es usando el método .noConflict() como en el ejemplo:

var $jQ = jQuery.noConflict();

A partir de ese momento la abreviatura de jQuery (que por defecto es $) pasar a ser la que tú has definido en la variable (en este caso $jQ), permitiéndote usar ambos frameworks sin conflicto entre ellos.

De todas formas, no suele ser práctico utilizar dos frameworks, aunque evites los conflictos siempre estás metiendo más carga a la web (aunque por otra parte, pesan bastante más muchas imágenes que los archivos .js de estos frameworks).

Creando ToolTips chulos con TinyTip y jQuery

Un aspecto que muchas veces descuidamos en nuestras webs son los Tooltips. A día de hoy, con tanta paranoia por el diseño instalada en nuestras cabezas por las políticas apple, el tradicional Tooltip estilo Windows será percibido como «chapucero» por el usuario (o cliente) que demandará una imagen más «2.0» (el palabro de moda).

TinyTip es un plugin ligerito, fácil de usar e implementar, que le dará una estética muy chula a vuestros proyectos. Os lo podéis descargar desde este enlace, en el que tenéis el .css el .js y una carpeta con imágenes de prueba.

Lo primero que debéis hacer es incluir en vuestro proyecto los archivos css, jQuery y el javascript de Tinytips, tal que así:

rel="stylesheet" type="text/css" media="screen" href="styles/tinyTips.css" />
<script type="text/javascript">// <![CDATA[
type</span>="text/javascript" src="js/jquery-1.7.1.min.js">
// ]]></script>
<script type="text/javascript">// <![CDATA[
type</span>="text/javascript" src="js/jquery.tinyTips.js">
// ]]></script>

Recordad poner la ruta en la que hayáis guardado los archivos. Si queréis no necesitáis descargar jQuery, sino que podréis enlazarlo a la página de google. El siguiente paso es inicializar los Tooltips

<script type="text/javascript">// <![CDATA[
type</span>="text/javascript">
		$(document).ready(function() {
			$('a.tTip').tinyTips('title');
			$('a.imgTip').tinyTips('<img <span="" class="hiddenSpellError" pre="img ">src="imagenes/demo-image.jpg" />
Puedes usar imágenes en tus Tooltips.', 'yellow');
			$('img.tTip').tinyTips('title', 'green');
		});
      </script>

Bueno, puedes ver tres inicializaciones: La primera implica que los enlaces de la clase tTip mostrarán como texto el que metáis en el parámetro title. El segundo es lo mismo, con la clase imgTip, pero mostrará una imagen y, debajo de ella, el texto, y además recibe el parámetro ‘yellow’, que define el color de fondo. La tercera es un tooltip para una imagen, de nuevo con el texto definido en title y fondo verde (los colores que podéis usar los veréis al descargar la carpeta images). En el siguiente ejemplo podéis ver la implementación dentro de un html:


<div id="<span class=" hiddenspellerror"="" pre="id ">demo"></div>

    
<img <span="" class="hiddenSpellError" pre="img ">class="tTip" src="imagenes/demo-image.jpg" title="Hola, soy una imagen de muestra!" />Lorem ipsum dolor sit amet. <a class="imgTip" href="#">Enlace con un tooltip con la misma imagen que la de al lado</a> In ligula mauris, aliquam quis tempor quis, consectetur a erat. Nulla non justo pellentesque dui elementum pharetra nec eu magna. <a class="tTip" href="#" title="Y en este último ejemplo podéis ver que puedo poner un texto todo lo largo que quiera, aunque lo normal es una explicacioncilla corta, no un parrafazo tan largo">Último ejemplo</a>

    </p>
</div>

En fin, con estas simples instrucciones veis que podéis tener vuestros Tooltips personalizados y bien chulos sin romperos la cabeza

// ]]>

Trabajando con el plugin Lightbox de jQuery

Sigo con los desarrollos en PHP matando mi tiempo de parado (creo que me matricularé en un curso de desarrollo para Android de Aula Mentor mañana, por meterme al fin en el mundo de las apps móviles aunque, por otra parte, no tenga smartphone, ni lo tendré hasta que no tengan un SO totalmente libre), y el otro día me vi en la situación idónea para utilizar Lightbox, un plugin para jQuery con licencia Copyleft, fácil de implementar y con un resultado vistoso.

En fin, lo primero que debéis hacer es descargaros el plugin desde la página de su creador y la librería jQuery. De la página del creador os bajaréis un zip con cuatro carpetas:

  • La carpeta js contiene el código javascript del plugin, en versión comprimida (la que pone min, que ocupa menos porque se come los espacioes en blanco) y en una versión más legible (por si queréis meterle mano y modificarlo). Bueno, también podéis modificar la min, pero al estar sin sangrado ni saltos de línea para ocupar menos no hay dios que lea el código. Hay un tercer archivo que pone pack, que la verdad no se muy bien para qué vale (los estudiaré a fondo más adelante)
  • En la capeta css encontraréis la hoja de estilos para usar el plugin.
  • En la carpeta images hay varias imágenes que utiliza el plugin para la presentación (botones de NEXT, PREV  y CLOSE).
  • Finalmente la carpeta photo incluye varias imágenes de ejemplo, podéis borrarla sin problema.
  • También hay un archivo index.html que incluye un ejemplo con las imágenes de la carpeta photo.

Bien, copia a tu proyecto la biblioteca jQuery, el archivo .css y el archivo .js (si vas a usarlo a saco, sin modificar, usa el .min.js porque ocupa menos) del plugin y la carpeta images. Tras esto debes chargar los archivos en la cabecera del proyecto, dentro de una etiqueta SCRIPT para ls .js y de LINK para los CSS, tal que así:

<script type="text/javascript">// <![CDATA[
type</span>="text/javascript" src="js/jquery-1.7.1.min.js">
// ]]></script>
<script type="text/javascript">// <![CDATA[
type</span>="text/javascript" src="js/jquery.lightbox-0.5.min.js">
// ]]></script>
rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css"/>

Bueno, he usado las rutas de mi proyecto, acordaos de usar las vuestras cuando lo implementéis.
Luego lo más tópico es crear una lista de thumbnails, usando una estructura de lista desordenada, algo tipo:

</pre>
<div id="<span class=">dvFotoFilo"></div>
<pre>
<ul>
<ul>
	<li><a class="hiddenSpellError">class="foto" href="photo/0.jpg"><img src="photo/0.jpg" alt="" width="125px" height="93px" /></a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">class="foto" href="photo/00.jpg"><img src="photo/00.jpg" alt="" width="125px" height="93px" /></a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">class="foto" href="photo/000.jpg"><img src="photo/000.jpg" alt="" width="125px" height="93px" /></a></li>
</ul>
</ul>
</div>

La estructura es simple: Un div para las fotos, dentro de dicho div una lista desordenada y dentro de cada elemento de la lista un enlace a la ruta de la imágen que queréis mostrar, y dentro de dicho enlace una versión reducida de la imagen. En este caso estoy usando la imagen grande reducida con propiedades css, pero podéis crear un thumbnail del tamaño adecuado, que sería más recomendable porque acelerará la carga. En cualquier caso la clave es la clase (class = «foto») que se aplicará al elemento, porque la necesitaremos en el siguiente punto, que es invocar la función lightbox del plugin, con el siguiente script:

$(document).ready(function(){
$('.foto').lightBox();
});

El script es simple como el mecanismo de un chupete: usamos el selector para coger todos los elementos con la categoría foto y le aplicamos  la función lightBox() de la librería .js del plugin.
Con esto ya tenemos implementado lightbox en nuestra página. He utilizado la estructura de lista desordenada, pero podéis utilizar cualqueir estructura html, simplemente recordad la regla «» y en la función de invocación llamáis a dicha clase.

Implementar Trim, LeftTrim y RightTrim en Javascript

Todo informático ha tenido que pelearse alguna vez con los espacios en blanco que a algunos usuarios les da por meter antes o después de una cadena de texto. Prácticamente todos los SGBD y varios lenguajes implementan la función trim, que simplemente elimina dichos espacios (trim a ambos lados, leftTrim a la izquierda y rightTrim a la derecha). Por desgracia Javascript no incorpora este método, pero don’t worry, que aquí estoy yo para echaros una mano. Porque haciendo uso de una expresión regular esto se soluciona con dos líneas de código por cada función.

//Función trim

function trim(strAModificar)
{
return strAModificar.replace(/^\s+|\s+$/g,"");
}

//Función rightTrim

function righTrim(strAModificar)
{
return strAModificar.replace(/\s+$/,"");
}

//Función leftTrim

function leftTrim(strAModificar)
{
return strAModificar.replace(/^\s+/,"");
}

En las versiones más antiguas de Javascript, que no soportaban expresiones regulares, la cosa era un pelín más coñazo (tenías que hacer un bucle for que fuera haciendo substrings eliminando la última letra o la primera letra si era un espacio en blanco), pero a partir de la versión 1.2 ya véis que no tiene problema alguno.

Expresiones regulares en Javascript

Una cosa que no vimos en el ciclo de DAI, al menos el año que yo cursaba, fue a validar datos de un formulario con expresiones regulares en Javascript.  Ciertamente es algo bastante sencillo y que uno puede aprender por su cuenta, pero si estás en el mismo caso que yo la primera vez que tuve que usar una seguramente lo siguiente te sea de ayuda.

Primero emprecemos por definir «expresión regular»: Se trata de un patrón que nos permite buscar coincidencias dentro de una cadena de texto. Estos patrones pueden utilizarse con los metodos exec y text  del objeto RegExp, y con los metodos match, replace, search y split  del objeto String.

En Javascript las expresiones regulares se basan en las de Perl, de forma que son muy muy parecidas. Para crear una expresión regular podemos usar el constructor del objeto RegExp, pero es mas conveniente utilizar una sintaxis especialmente pensado para ello, como la del siguiente ejemplo:

var patron = /A[0-9]/

La otra opción sería creando un objeto RegExp con la cadena del patrón, usando el constructor del objeto:

var patron = new RegExp(«A[0-9]»)

En ambos casos creamos el mismo objeto RegExp, que comprobaría si la cadena que analizamos está formada por una A seguida de un número entre 0 y 9.

Obviamente necesitamos de una serie de caracteres especiales para construir la expresión regular, que serían los siguientes:

  • \ -> Indica que el siguiente caracter normal debe ser considerado como especial. También se utiliza como caracter de escape para los caracteres especiales.
  • ^ -> Indica el comienzo de una línea.
  • $ -> Indica el final de una línea.
  • * -> Encuentra coincidencia del caracter que le precede cuando aparece una o varias veces o, también, cuando no aparece . Se explica mejor con un ejemplo. Si utilizáis el patró /uno*/ este hayaría coindidencias con «uno», «unooo» y con «un» .
  • + ->Igual que el *  pero cuando el caracter aparece 1 o más veces. (Vamos, que en caso de que no aparezca el caracter precedente no vería coincidencia).
  • ? -> Igual que el *, pero cuando el caracter aparece ninguna o 1 vez.
  • . ->Se utiliza para encontrar cualquier caracter que no sea un caracter de nueva línea.
  • (X) -> Encuentra coincidencias con el caracter  ‘X’ (sea este un caracter normal cualquiera), y recuerda el patrón para su posterior utilización
  • X|Y -> Encuentra coincidencia si aparece el caracter ‘X’ o el caracter ‘Y’.
  • {n} -> Encuentra coincidencia si hay exactamente n apariciones del caracter que precede.
  • {n, } -> Encuentra coincidencia si hay al menos n apariciones del caracter que precede.
  • {n,m} ->Encuentra coincidencia si hay como mínimo n y com máximo m apariciones del caracter que precede.
  • [xyz] -> Representa un conjunto de caracteres individuales. Por ejemplo [aeiou] encontraría coincidencia con cualquiera de las vocales en minúscula, [123] encontraría coincidencia si apareciera cualquiera de los tres números. Utilizando un guión «-» podemos establecer un rango. Es decir [0-9] encontraría coincidencias si apareciera cualquier número entre 0 y 9, o [A-Z] lo encontraría con cualquier letra mayúscula.
  • [^xyz] -> Encuentra coincidencias con aquellos caracteres que no aparezcan en el conjunto. Al igual que en el caso anterior, con el ‘-‘ se puede definir un rango.
  • \b -> Encuentra coincidencia con el límite de las palabras. Es decir, si buscáramos /\boca/ encontraría coindidencias en la frase «jugemos a la oca» pero no en «ahí hay una roca» o «me duele la boca».
  • \d -> Busca cualquier dígito. Equivale a [0-9]
  • \D -> Busca cualquier caracter que no sea un dígito.
  • \w -> Busca cualquier caracter alfanumérico. Equivalente a [a-zA-Z0-9_].
  • \W -> Busca cualquier caracter no alfanumérico
  • \s -> Busca un espacio
  • \t -> busca una tabulación

Os iba a poner una lista de ejemplos de expresiones regulares recurrentes. Pero la verdad creo que mejor os dejo este enlace a otro WordPress donde he visto buenos ejemplos para validar formatos de teléfonos, fechas, horas, números de tarjeta de crédito… Y si queréis validar un DNI, os remito a esta entrada que hice ayer mismo. (Si me váis a comentar que está mal sangrado… ya lo se, pero al meter el código como comentario se cargó la tabulación del Notepad++, si lo copiáis al Visual Estudio o al Aptana y usáis la corrección de sangrado automática ya os lo pone más bonito y legible)

Validar un DNI con Javascript

Una de las primeras cosas que aprendí a hacer en C era a validar un DNI. Es un ejercicio clásico para todo estudiante de informática en España. Luego, desarrollando alguna web me he encontrado con la cuestión de hacerlo en javascript, el algún formulario web. La verdad, no es muy difícil, pero aquí os dejo una muestra del código explicado. Por si no lo sabéis, la letra del DNI está relacionada con el número. Se calcula cogiendo todas las letras, excepto la Ñ, la I y la O porque pueden inducir a errores, en un orden concreto (que no es el orden alfabético lógico, sino este ‘TRWAGMYFPDXBNJZSQVHLCKET’) y seleccionando la que coincide en la posición igual al resto de dividir el número del dni entre 23.

function nif(dni) {
  var numero
  var letr
  var letra
  var expresion_regular_dni

  expresion_regular_dni = /^\d{8}[a-zA-Z]$/;

  if(expresion_regular_dni.test (dni) == true){
     numero = dni.substr(0,dni.length-1);
     letr = dni.substr(dni.length-1,1);
     numero = numero % 23;
     letra='TRWAGMYFPDXBNJZSQVHLCKET';
     letra=letra.substring(numero,numero+1);
    if (letra!=letr.toUpperCase()) {
       alert('Dni erroneo, la letra del NIF no se corresponde');
     }else{
       alert('Dni correcto');
     }
  }else{
     alert('Dni erroneo, formato no válido');
   }
}

La explicación es rápida y simple:

1º La función recibe una variable con el DNI como string.

2º Tras definir las variables creamos una expresión regular que valida si el DNI está compuesto por 8 letras y un caracter, ya sea en mayúscula o minúscula.

3º Extraemos el número del DNI (es decir, un substring con la longitud del DNI entero menos una letra) y la letra (un substring de un solo caracter que empieza en la posición de la longitud total menos uno).

4º Hacemos la operación de módulo entre el número extraído y 23, reutilizando la variable número para almacenar el resultado. Hacemos esto porque lo necesitamos para calcular si la letra del NIF es válida.

5º Creamos una string con las letras del abecedario ( sin la ñ) en ese orden que se pone arriba.

6º Cogemos un substring de un solo caracter de esa cadena de letras que empiece en la posición marcada por el número que conseguimos en el punto cuatro al hacer la operación de módulo, reutilizando la variable módulo.

Comprobamos que la letra cogida de la cadena de letras sea igual a la letra cogida del DNI. Si se cumple la condición sacamos un aviso de que es correcto y si no sacamos el de error.

Véis, muy sencillo. Eso sí, ese código tal cual es para introducir un dni con la letra pegada al número. Si queréis poner un separador entre estos, acordaos de modificar en consecuencia todas las funciones.

//Editamos ya que desde la aparición de ECMAScript 6 en 2014 let se ha convertido en una palabra reservada y no puede ser usada como nombre de variable