El drama de getElementsByClassName

Hace rato que uso la librería jQuery por lo que me resulta súper fácil manipular elementos HTML por su su clase, independiente de su tagName (a, div, span, etc). Por ejemplo en una breve y simple líena puedo darle display:none a todos los elementos con clase hide:

//lo simple es bello
$(‘.hide’).hide();

En Prototype (que no ocupo desde que comencé a usar jQuery), aunque era un poco más complejo y limitado, tampoco daba muchos dolores de cabeza:

//Sólo hay que dominar bien los selectores tipo CSS de Prototype
$$(‘div.hide’).invoke(‘hide’);

Incluso era posible de esta forma:

//iteramos sobre cada elemento
documetnt.getElementsByClassName(‘hide’).(Element.hide);

Pero resulta que la función getElementsByClassName() aún no es un estándar (lo que significa
que obviamente no funciona de froma nativa ni en IE6 ni en IE7, pero sí en Firefox3, Safari y Chrome), por
lo tanto, para que funcione en IE debe estar soportada por la librería que ocupemos.

En el caso que estemos trabajando sin ninguna librería o que no esté soportada (por ejemplo en las versiones nuevas de Prototype está obsoleta), la podemos implementar fácilmente con el siguiente código:

document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp(‘\\b’+cl+’\\b’);
var elem = this.getElementsByTagName(‘*’);
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};

Referencias:

Lo nuevo de jquery 1.2

La librería jquery se ha transformado en mi preferida, tanto así que dejado de usar prototype, incluso en AyerViernes, por una cuestón de kb, ya es la librería oficial de los proyectos en curso.

El 14 de enero salió la versión 1.2.2 bug fix release que trae algunas cosas nuevas, entre las que destaca una mejora en la función .ready(), pues ahora puede usarse tanto de la forma tradicional como a través de .bind()


$(document).bind("ready", function(){
// put all your jQuery goodness in here.
});

o bien


$(document).ready(function() {
// put all your jQuery goodness in here.
});

Puedes ver lo nuevo de jquery 1.2.2 en su anuncio oficial

Jaxer… de cabeza a aprenderlo

De la mano de Aptana, Jaxer -también conocido como Ajax Server- se trae JavaScript, DOM, HTML y CSS al lado de los servidores.

Al fin veo un poco de luz al final de las tediosas validaciones. Es que el tema de los formularios web puede volverse en un verdadero lío.

En concreto lo que Jaxer hace es ejecutar el codigo ajax en el servidor y devolver la página resultante al browser, todo de forma asincrónica. ¡Cool no?

Ver más información, ejemplos y videos en ajaxian

La maravilla de JSON vs XML

Tengo mucho código para postear, pero me aguantaré unos días para hacerlo detalladamente en blogandia. Ahora sólo quiero sacrame un poco las ganas de hablar de JSON.

Algunas de las razones porque vale la pena trabajar con este tipo de notación son:

1-. Por sobre todo: orden. Trabajar javascript con JSON es por lejos más ordenado y simple que hacerlo de la forma clásica. A este orden “visual/mental” hay que agregar un punto tan o más importante que mi manía personal por el código elegante y ordenado: los nombres de las variables y funciones dificilmente interfieren con los nombres de variables y funciones de otras aplicaciones javascript que coexisten generalmente en un sitio web.

Por ejemplo, es perfectamente posible el siguiente escenario:

var aplicacion_uno = {
cargando : function(){
//código de esta funcion;
},
hide : function(){
$$(‘ul[class=hide]’).map(function(s){$(s.id).hide();});
}
}

var aplicacion_dos = {
cargando : function(){
//código de esta funcion;
},
hide : “se traduce como esconder”
}

2-. Para trabajar con gran cantidad de datos dinámicos de forma asincrónica es mucho más rápido que hacerlo con XML, en pruebas preliminares con firebug, para la siguiente consulta el tiempo de respuesta es de 164ms.

[{“modelo_generico”:”Chevrolet Corsa”,”t1″:”25.800″,”t2″:”21.900″,”t3″:”17.955″,”t4″:”15.750″,
“zonal”:”RENT A CAR ANTOFAGASTA”,”patente”:”WV-9955″,”fecha_inicio”:”2007-12-05″,
“fecha_termino”:”2007-12-15″},
{“modelo_generico”:”Chevrolet Corsa”,”t1″:”25.800″,”t2″:”21.900″,”t3″:”17.955″,”t4″:”15.750″,
“zonal”:”RENT A CAR ANTOFAGASTA “,”patente”:”WV-9960″,”fecha_inicio”:”2007-12-15″,
“fecha_termino”:”2007-12-20″}]

Mientras que para una cantidad evidentemente menor de datos en xml la respuesta menor que he obtenido es de 544ms.

<xml>
<contenido>
<status>ok</status>
<precio>45000</precio>
<pasajeros>1</pasajeros>
<dolar470</dolar>
</contenido>
</xml>

3-. Si bien la forma de pasar los datos de un lado a otro es básicamente la misma para JSON y XML (Ajax.Request o $j.ajax con prototype y jquery respectivamente), la disponibilidad de ellos es radicalmente distinta. Mientras que con XML hay que parsear los datos según las etiquetas:

xmlparse : function(responseXMLCli){
var xml=responseXMLCli.responseXML.documentElement;
var item=xml.getElementsByTagName(‘contenido’)[0];
var pasajero=item.getElementsByTagName(‘pasajero’)[0].firstChild.data;
alert(pasajero)
}

con json quedan disponibles de inmediato

jsonready : function(data){
alert(data.pasajero)
}

ModalBox

Modalbox screenshoot

ModalBox es una librería Javascript que nos permite crear ventanas de diálogos 2.0-style sin tener que caer en la utilización de los horribles popups y la recarga de páginas, además nos permite encadenar diálogos, por ejemplo, para llenar cormularios en varios pasos.

ModalBox es similar a librerías como GrayBox o Lightbox; se basa en Prototype y script.aculo.us, y hace uso de XHTML/CSS 100% válido. Además usa AJAX en vez de obsoletos iframe para cargar el contenido, siendo más seguro por cuanto no permite acceder a páginas que no están en tu host.

Enlace: ModalBox

Comparación entre jQuery y Prototype

Remy Sharp ha realizado una comparación entre los frameworks jQuery y Prototype para explicar qué hace jQuery que no hace Prototype y al revés, además de mostrar cómo X procesos son realizados en cada una de las librarías.

El slide comprende las utility functions, los selectores, la manipulación DOM, DOM walking, eventos, Ajax transport, y deteción de browser.

Via: Ajaxian

8 Expresiones Regulares

“En el área de la programación las expresiones regulares son un método por medio del cual se pueden realizar búsquedas dentro de cadenas de caracteres. Sin importar si la búsqueda requerida es de dos caracteres en una cadena de 10 o si es necesario encontrar todas las apariciones de un patrón definido de caracteres en un archivo de millones de caracteres, las expresiones regulares proporcionan una solución para el problema. Adicionalmente, un uso derivado de la búsqueda de patrones es la validación de un formato específico en una cadena de caracteres dada, como por ejemplo fechas o identificadores”. (Wikipedia) Estas son 8 expresiones regulares para php que son de gran utilidad para validar datos en formularios:

Nombre de usuario
Acepta entre 4 y 28 caracteres de largo, alpha-numérico y acepta guiones_bajos.

$string = “userNaME4234432_”;
if (preg_match(‘/^[a-zd_]{4,28}$/i’, $string)) {
echo “example 1 successful.”;
}

Números de Teléfono
Esto validará número con el siguiente formato: (###)###-####

$string = “(032)555-5555”;
if (preg_match(‘/^((?[0-9]{3,3})?|[0-9]{3,3}[-. ]?)[ ][0-9]{3,3}[-. ]?[0-9]{4,4}$/’, $string)) {
echo “example 2 successful.”;
}

Direcciones de Email

$string = “first.last@domain.co.uk”;
if (preg_match(
‘/^[^0-9][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[@][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{2,4}$/’,
$string)) {
echo “example 3 successful.”;
}

Código Postal

$string = “55324-4324”;
if (preg_match(‘/^[0-9]{5,5}([- ]?[0-9]{4,4})?$/’, $string)) {
echo “example 4 successful.”;
}

IP Addresses

$string = “255.255.255.0”;
if (preg_match(
‘^(?:25[0-5]|2[0-4]d|1dd|[1-9]d|d)(?:[.](?:25[0-5]|2[0-4]d|1dd|[1-9]d|d)){3}$’,
$string)) {
echo “example 5 successful.”;
}

Hexadecimal Colors

$string = “#666666”;
if (preg_match(‘/^#(?:(?:[a-fd]{3}){1,2})$/i’, $string)) {
echo “example 6 successful.”;
}

Comentarios Multilínea

$string = “/* commmmment */”;
if (preg_match(‘/^[(/*)+.+(*/)]$/’, $string)) {
echo “example 7 successful.”;
}

Fechas

$string = “10/15/2007”;
if (preg_match(‘/^d{1,2}/d{1,2}/d{4}$/’, $string)) {
echo “example 8 successful.”;
}

fValidator: otro validador de formularios javascript

fValidator con imask

Hace unos días publiqué una entrada sobre la Livevalidation, un script para validar formualrios al vuelo con javascript, puntualmente con JQuery.

fValidator es otra librería destinada a lo mismo, pero esta vez orientada a los usuarios de Mootools, que podrán validar de forma rápida, cómoda y no obtrusiva sus formularios con fValidator.

Características a destacar:

  • Soporta varios formularios dentro de la misma página
  • Formatos predefinidos: required, alpha, alphanum, integer, real, date, email, phone, url. (todos personalizables)
  • Resaltado de campos en los eventos onValid y onInvalid
  • Mensajes de error justo tras el onBlur

Una buena posibilidad para usar esta herramienta es con iMask como complemento.
Enlace: fValidator