emmgfx

Aprender jQuery, 1: Qué és y por qué usarlo.

Qué és

jQuery es una librería de JavaScript, rápida y concisa que simplifica el tratamiento de documentos HTML, el control de eventos, animaciones, e interacciones AJAX para un desarrollo web rápido. jQuery está diseñado para cambiar la manera en que se escribe JavaScript.

Así (pero en inglés traducido por mi, espero que bien) es como se describe jQuery en la portada de su página oficial.

Aunque haya quien diga que no, yo creo que jQuery es una de las herramientas (por llamarlo de alguna manera) mejor documentadas que hay. Con un mínimo de interés y un poco de imaginación se puede entender rápidamente para qué sirve e imaginar en qué se podría aplicar. Eso sin contar la gran cantidad de recursos y ejemplos que existen, incluso en la misma documentación oficial de la librería. Así que en realidad, ni siquiera hace falta imaginación para entenderlo.

Por qué usarlo

Después de usar jQuery, pensar en dejar de utilizarlo y tener que escribir JavaScript sin algún framework (ya sea jQuery, mootools o cualquier otro) me parece una locura. En sério, sólo de pensar en verme obligado a usar XMLHttpRequest para los temas de AJAX y no poder recurrir a jQuery empiezo a idear excusas para evitarlo.

Y sii no te fias, puedes tener la certeza de que es una librería de calidad, y para demostrarlo en su portada nos recuerdan que Google, Dell, Digg, Technorati, Mozilla, WordPress, Drupal y una infinidad más de sitios utilizan su framework.

Por ejemplo, para hacer una carga de página externa con ajax, usando jQuery sería algo así:

$("#idcapa").load('url/relativa/fichero.php');

Y hacer algo parecido con JavaScript llano sería:

XHConn - Simple XMLHTTP Interface - bfults@gmail.com - 2005-04-08
Code licensed under Creative Commons Attribution-ShareAlike License

http://creativecommons.org/licenses/by-sa/2.0/

*/
function XHConn(){
  var xmlhttp, bComplete = false;
  try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
  catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
  catch (e) { try { xmlhttp = new XMLHttpRequest(); }
  catch (e) { xmlhttp = false; }}}
  if (!xmlhttp) return null;
  this.connect = function(sURL, sMethod, sVars, fnDone) {
    if (!xmlhttp) return false;
    bComplete = false;
    sMethod = sMethod.toUpperCase();
    try {
      if (sMethod == "GET"){
        xmlhttp.open(sMethod, sURL+"?"+sVars, true);
        sVars = "";
      }else{
        xmlhttp.open(sMethod, sURL, true);
        xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
        xmlhttp.setRequestHeader("Content-Type",
          "application/x-www-form-urlencoded");
      }
      xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && !bComplete){
          bComplete = true;
          fnDone(xmlhttp);
        }};
      xmlhttp.send(sVars);
    }
    catch(z) { return false; }
    return true;
  };
  return this;
}

var myConn = new XHConn();
if (!myConn) alert("XMLHTTP not available. Try a newer/better browser.");
var include_terminado = function (oXML) { document.getElementById('include').innerHTML = oXML.responseText; };
function include_dinamico (url){
	document.getElementById('include').innerHTML = "";
	myConn.connect("include.php", "GET", "variable="+url, include_terminado);
}

<a onclick="include_dinamico('hola');" href="#">Link</a>

Además de AJAX, jQuery trabaja con animaciones, DOM, eventos, y permite el uso de plug-ins. Y aunque la sintaxis pueda parecer extraña al principio, es bastante sencilla de entender y cuando se hacen un par de ejercicios en plan “copiar, pegar y modificar” se entiende rápidamente como funciona.

Y cuando me apetezca (dentro de un rato, mañana o quizá nunca), explicaré la sintaxis y otras cosas “importantes”.

PNGfix.js para Internet Explorer

Hasta la última versión de Internet Explorer, la 8 incluida, las imagenes en formato PNG siguen mostrandose mal. Es uno de los problemas más grandes de Internet Explorer, por que las especificaciones del formato estan estandarizadas desde hace unos 10 años y aunque han mejorado el soporte para él, el comportamiento sigue siendo risible.

Seguir leyendo y ver ó escribir comentarios →

Retrasar eventos y efectos de jQuery

No se si alguien lo habrá necesitado alguna vez, pero estoy seguro de que es un buen recurso a tener en cuenta… con la función setTimeout de Javascript podemos retrasar cualquier cosa, desde un write() hasta mezclas complejas de eventos y efectos en jQuery (o cualquier otro framework). La forma de uso es muy fácil, sólo hay que tener en cuenta una cosa, que funciona en milisengundos.

Por ejemplo:

setTimeout(
   function(){
      //Lo que debe pasar pasados 10 segundos (10mil milisegundos)
   }, 10000);

Es bastante fácil de utilizar, pero si alguien necesita más información puede visitar Klevo Blog, donde he encontrado un articulo que se explica bastante bien… pero esta en inglés.