Tips para estructurar código javascript

October 28, 08 by Max Villegas

En Ajaxian muestran un ejemplo de Como estructurar código JavaScript haciendo uso de “module pattern”, “global variable” que nos ayudará a mantener el código ordenado y libre colisiones ;)
(tags: patterns code javascript)

El drama de getElementsByClassName

September 27, 08 by Max Villegas

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

January 26, 08 by Max Villegas

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

Prototype 1.6 y Script.aculo.us 1.8

November 08, 07 by Max Villegas

Hay nueva versión de Prototype y de Scriptaculous, además de un libro titulado “Prototype y script.aculo.us: Nunca supiste que Javascript podía hacer esto”.

Si alguien me regala el pdf del libro seré feliz :)

ModalBox

October 29, 07 by Max Villegas

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

Test: ¿Cuánto sabes de Ajax?

October 27, 07 by Max Villegas

Me equivoqué en dos que me dio lata. Haz la prueba y dime cómo te fue…

Comparación entre jQuery y Prototype

October 26, 07 by Max Villegas

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

October 23, 07 by Max Villegas

“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

October 18, 07 by Max Villegas

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

Recursos para javascript

October 17, 07 by Max Villegas

Esta semana javascript la lleva en mi trabajo,  por eso esta lista de recursos para javascript me viene perfecto… Se agradece :)
vía: Sentido Web