Javascript Tools pone a tu disposición dos herramientas que (dependiendo de tu nivel programando Javascript) pueden ser una bendición o una pesadilla:

JSLint, un verificador de sintaxis para Javascript. JSLint detecta errores tan comunes como:

• Los ; que siempre se te olvidan al final de una línea.
• Código que nunca se ejecuta.
• case sin su switch correspondiente.
• Comentarios dentro de comentarios.
• Uso de = en comparaciones (en lugar de ==)
• Etc, etc…

JSMin, un compresor de ficheros .js que te ahorrará un pico en tu factura de hosting.

La gracia del asunto está en que las dos herramientas se integran perfectamente con TextMate, y si tienes un error en tu código, JSLint te dirá dónde está (con un bonito enlace que te lleva a la línea y columna donde está el error).

De regalo, el bundle incluye un comando que verifica la sintaxis cada vez que guardas el fichero, mostrándote un tooltip si hay algún problema.

Así que ya tardan en descargarse el bundle y darle las gracias al autor :)

Contenido relacionado:

• (aquí irían posts relacionados, pero creo que no tengo nada parecido a este…)

Para un proyecto que tenemos, he empezado a trastear con esta librería, y los resultados (inmediatos) me han dejado muy buen sabor de boca.

Vamos con unos ejemplitos de lo que sabe hacer jQuery:

Lista de resultados “con pijama”…

Este es un quebradero de cabeza clásico, para el que se han planteado muchas soluciones. La que he encontrado, usando los selectores CSS + DOM de jQuery es tan simple que casi da miedo:

$("#lista ul li:even").addClass("even");

Que viene a decir: “dentro del div #lista, me seleccione todos los li impares dentro de un ul, y les añada la clase ‘even’”

El HTML que estoy usando es bastante limpito:

<div id="lista">
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
        <li>Elemento 4</li>
    </ul>
</div>

Pero dejarlo así sería desaprovechar toda la potencia de jQuery (y manchar un poco el HTML, en realidad). Así que, después de mirar un rato (10 minutos) la documentación, me encuentro con que puedo dejar mi HTML tal que así:

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
</ul>

¿Y entonces cómo sé a qué lista tengo que ponerle el pijama? Aquí es donde entra en juego toda la potencia de los pseudo-selectores de jQuery (el li:even) es uno de ellos, pero hay muchos más

$(body ul:first li:even).addClass("even");

Que es como decir: “le añada la clase ‘even’a los li impares de la primera ul que aparezca en el body” (en este caso he hecho trampa, porque sé que mi ul será la primera que aparezca en el documento)

Añadir un icono a los enlaces externos…

Este es un asunto que ya visitamos en un artículo anterior (Destacando enlaces externos en WordPress)

Usando jQuery hay varias maneras de hacer esto, pero voy a elegir una particularmente curiosa: usar una expresión XPath.

$("//a[not(contains(@href,'sofanaranja.com'))]").addClass("externo");

Esto sería el equivalente a “busca todos los elementos ‘a’cuyo atributo src no contenga la cadena ‘sofanaranja.com’, y les añades la clase ‘externo’”.

(Lo de escribir expresiones XPath se sale un poco de la temática del post… : )

Javascript no intrusivo

Como vemos con este par de ejemplitos, los selectores de jQuery nos permiten hacer toda clase de perrerías (tanto en presentación como en comportamiento) sobre el DOM de nuestro documento sin (practicamente) guarrear el HTML.

Usando jQuery no hay excusa para ese crimen que es

... href="javascript:abreVentana()" ...

Me temo que seguiré comentando las bondades de jQuery una temporadita :D

Por qué me gusta jQuery, personalmente

• Porque ocupa poco (15Kb comprimida)
• Porque no le sobra nada, y lo poco que le falta es, casi siempre, innecesario :)
• Porque la documentación está actualizada, bien escrita, y tiene ejemplos claros de qué se puede hacer y cómo.
• Porque seleccionar elementos del DOM usando selectores CSS y XPath es droga dura: una vez que lo pruebas no puedes vivir sin ello.

Recursos interesantes…

Para trabajar con XPath, hace tiempo me encontré con AquaPath, una utilidad para Mac que vale su peso en oro…

Contenido relacionado:

• (aquí irían posts relacionados, pero creo que no tengo nada parecido a este…)

El resultado:

function setHover(className,hoverClassName) {
    var hoverDivs = document.getElementsByClassName(className);
    hoverDivs = $A(hoverDivs);
    hoverDivs.each(
        function(div){
            div.onmouseover = function(){
                Element.addClassName(this,hoverClassName);
            }
            div.onmouseout = function(){
                Element.removeClassName(this,hoverClassName);
            }
        }
    );
    }
function init (){
    setHover('hover','hoverclass');
}
Event.observe(window, 'load', init, false);

La idea es que a todos los elementos que queramos hacerles un hover les asignamos la clase “hover”, y definimos en otra clase “hoverclass” los atributos del estado hover.

A pesar de que en el código se usa una variable llamada ‘div’, funciona con cualquier elemento de la página…

Lo que hacemos, igual que con el método anterior, es buscar elementos que contengan la clase ‘hover’, y les asignamos la clase ‘hoverclass’en el evento ‘onmouseover’.

Más cosillas…

Gracias a tutiplén a demimismo por sugerir el uso de prototype.js. Creo que estoy enamorado de otra librería :D

[1]: http://prototype.conio.net/

Contenido relacionado:

• (aquí irían posts relacionados, pero creo que no tengo nada parecido a este…)

¿Cómo hacer un :hover en un DIV con Internet Explorer?

No sé si se suponía que debía saberlo, pero la verdad es que me pilló un poco por sorpresa…

¿Con #iddeldiv:hover, no?

(Comentario que demuestra mi total ignorancia con respecto a las capacidades de Explorer)

Me temo que Explorer sólo soporta :hover en los ‘a’…

Como uno es de naturaleza curiosa, me puse a trastear con el dilema, llegando a la siguiente solución (que no deja de ser una chapuza, pero que no sólo funciona en Explorer sino en Camino, Firefox y Safari):

<script>
    function replaceHover(){
        var hoverDivs = document.getElementsByTagName("div");
        for(var i=0; i<hoverDivs.length; i++){
            if(hoverDivs[i].className.indexOf('hover') != -1){
                //  ...guardamos las clases del DIV...
                var classes = hoverDivs[i].className;
                //  ...en onmouseover le añadimos una clase extra, 'hoverclass'...
                hoverDivs[i].onmouseover = function(){
                    this.className += ' hoverclass';
                }
                //  ...y se la quitamos en onmouseout
                hoverDivs[i].onmouseout = function(){
                    this.className = classes;
                }
            }
        }
    }
</script>

Que quiere decir, en román paladino:

• Obtener todos los DIVs del documento
• Mirar si el DIV tiene asignada una clase CSS ‘hover’
• Si es así, le asignamos un evento ‘onmouseover’que le añade la clase ‘hoverclass’(que tendrá alguna pijadilla del estilo de background-color: rosachicle, o algo por el estilo)
• Y ya puestos, se la quitamos cuando salga el ratón del DIV

Para disparar el cambio se llama a la función ‘replaceHover’desde el ‘onload’de body:

<body onload="replaceHover()">

Obviamente, el código se puede usar con otros tags… sólo habría que cambiar el

getElementsByTagName("div")

por

getElementsByTagName("nombre_del_tag_que_quieras")

Pos eso… agradecimientos especiales a [Furilo][1] por darme algo en qué pensar… :D

Update: un método mucho más elegante usando prototype.js

[1]: http://www.furilo.com

Contenido relacionado:

• (aquí irían posts relacionados, pero creo que no tengo nada parecido a este…)