Contenido

Las 10 mejores funciones de Javascript

25 Nov

+ 27

Dustin Diaz, ha hecho una recopilación de las mejores funciones en Javascript, cuando empezé a leer este artículo pensé, «Serán las 10 que más le han gustado a él…», he terminado de leerlo y aplaudo su elección, sin duda son las mejores, o por lo menos las más útiles.

Esto no se puede aplicar a todos los proyectos ya que para cada uno requeríremos unas funciones u otras, dependiende siempre de nuestras necesidades. Lo que si es cierto que generalizando estas funciones son execepcionalmente buenas, he de ahi el motivo por el cual la mayoría de las grandes librerías las integren iguales o con una leve modificación.

10 – addEvent()

function addEvent(elm, evType, fn, useCapture) {
	if (elm.addEventListener) {
		elm.addEventListener(evType, fn, useCapture);
		return true;
	}
	else if (elm.attachEvent) {
		var r = elm.attachEvent('on' + evType, fn);
		return r;
	}
	else {
		elm['on' + evType] = fn;
	}
}

Empezamos fuerte, esta función se encarga de ayudarnos a gestionar los eventos de nuestra web, con ella podremos asignar a cualquier elemento un evento determinado, gracias al contenido de esta función el javascript no obstructivo es una realidad. Creada por Scott Andrew.

9 – addLoadEvent()

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	}
	else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

Se trata de una versión exclusivamente para el objeto window en el evento onload, de forma que podremos asignar una serie de funcionalidades a nuestro evento onload y ver el resultado al finalizar la carga de nuestra web. Tambien es posible usar addEvent() para realizar lo mismo. Creada por Simon Willison.

8 – getElementsByClass()

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

Una gran función que mediante un nombre de class, podremos encontrar los elementos que la compongan, devolviendo un array de objetos para trabar con ellos de forma más cómoda. Originalmente no fue creada por nadie en partícular aunque con el tiempo los desarrolladores han ido añadiendo mejoras para depurar la función.

7 – cssQuery()

Quizas la mejor aliada para trabajar con CSS desde Javascript, escrita por Dean Edwars, llama la atención por la cantidad de selectores que permite usar a la hora de realizar la consulta. Ver documentación.

6 – toggle()

function toggle(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != 'none' ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}
}

Esta función la habré implementado un millón de veces, es la típica que se usa una infinidad de veces y generalmente no sabes ni como se llama. Se trata de una función que oculta/muestra un elemento dependiendo de su estado anterior, osea mostrado lo que está oculto y viceversa.

5 – insertAfter()

function insertAfter(parent, node, referenceNode) {
	parent.insertBefore(node, referenceNode.nextSibling);
}

Esta no la había usado nunca, creada por Jeremy Keith, nos permite insertar un nodo despues de otro elemento padre.

4 – inArray() 

Array.prototype.inArray = function (value) {
	var i;
	for (i=0; i < this.length; i++) {
		if (this[i] === value) {
			return true;
		}
	}
	return false;
};

¿Cuantas veces has tenido que recorrer un array entero para saber si hay un valor o no? Pues esta función realiza la busqueda por ti.

function getCookie( name ) {
	var start = document.cookie.indexOf( name + "=" );
	var len = start + name.length + 1;
	if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
		return null;
	}
	if ( start == -1 ) return null;
	var end = document.cookie.indexOf( ';', len );
	if ( end == -1 ) end = document.cookie.length;
	return unescape( document.cookie.substring( len, end ) );
}

Función de manual para recoger datos de la cookie del cliente, muy cómoda y práctica.

2 – setCookie()

function setCookie( name, value, expires, path, domain, secure ) {
	var today = new Date();
	today.setTime( today.getTime() );
	if ( expires ) {
		expires = expires * 1000 * 60 * 60 * 24;
	}
	var expires_date = new Date( today.getTime() + (expires) );
	document.cookie = name+'='+escape( value ) +
		( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
		( ( path ) ? ';path=' + path : '' ) +
		( ( domain ) ? ';domain=' + domain : '' ) +
		( ( secure ) ? ';secure' : '' );
}

Función compañera a getCookie() con la cual podrás almacenar en el cliente los datos necesarios en forma de cookie.

1 – deleteCookie()

function deleteCookie( name, path, domain ) {
	if ( getCookie( name ) ) document.cookie = name + '=' +
			( ( path ) ? ';path=' + path : '') +
			( ( domain ) ? ';domain=' + domain : '' ) +
			';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}

Función encargada de eliminar cookies en el cliente.

Mención Honorífica – $()

function $() {
	var elements = new Array();
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == 'string')
			element = document.getElementById(element);
		if (arguments.length == 1)
			return element;
		elements.push(element);
	}
	return elements;
}

Con diferencia la función más extendida de la red, todas las librerías la usan e incluso le han añadido funcionalidades (como xPath en jQuery), consiguiendo una función muy pontente que nos volverá un elemento o una serie de elementos, únicamente pasando como parametro los id’s de los elementos deseados.

Podeis descargarlas todas desde la página de Dustin Diaz, o desde mi backup.

  • extrordinario el articulo, me ha sido de gran ayuda.

  • Hola:
    Muy interesante e instructivo.
    Creí que encontraría aquí la solución a mi problema, pero aún no la consigo en ninguna parte de la red.
    Tal vez quien lea este comentario la conozca:

    Tengo un array donde el elemento 0 es «hola» el elemento 1 es «mundo» …

    Si doy como infomacion «mundo» quiero que el script me responda :
    «‘mundo’ es el elemento x del array’
    donde x sea el índice que le corresponde a «mundo» en el array.

    Para un mejor entendimiento, en un documento html donde hay varias imágenes al hacer click sobre una cualquiera de ellas salga un alert que diga «Esta es la imagen numero X del documento» donde X sea el numero que le corresponde a esa imagen dentro el array document.images[].
    En síntesis como obtengo mediante programación el número o indice de un elemento dentro de un array ?????

  • Un artículo genial.

    Parece que hay un bug en la función 9 – addLoadEvent() con IE7 y que han solucionado añadiendole un IF.


    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } else {
    window.onload = function() {
    if (oldonload) {
    oldonload();
    }
    func();
    }
    }
    }

    Má información en la página de Simon: http://simon.incutio.com/archive/2004/05/26/addLoadEvent

    Un saludo desde alquiler-malaga.com

  • Tomás: leyendo detenidamente los scripts del artículo es fácil darse cuenta de que tan sólo una ligera modificación de inArray() (puesto #4) consigues ésto mismo que requieres. ahí va:

    Array.prototype.inArray = function (value) {
    var i;
    for (i=0; i

  • NOTA: Reenvío el mensaje, ya que compruebo que ha llegado cortado ¿un bug en el envío de comentarios?

    RF:
    Tomás: leyendo detenidamente los scripts del artículo es fácil darse cuenta de que tan sólo una ligera modificación de inArray() (puesto #4) consigues ésto mismo que requieres. ahí va:

    Array.prototype.inArray = function (value) {
    var i;
    for (i=0; i

  • NOTA2!!: bien, es la última vez que lo envío. esta vez el código en un bloque a ver si así no lo recorta!
    NOTA: Reenvío el mensaje, ya que compruebo que ha llegado cortado ¿un bug en el envío de comentarios?

    RF:
    Tomás: leyendo detenidamente los scripts del artículo es fácil darse cuenta de que tan sólo una ligera modificación de inArray() (puesto #4) consigues ésto mismo que requieres. ahí va:

    tan sólo cambiar las dos líneas de retorno por:
    return true -cambiarla por-> return i
    return false -cambiarla por->

    Array.prototype.inArray = function (value) {
    var i;
    for (i=0; i

    Como verás, en lugar de devolver verdadero o falso lo que hago es devolver el índice dentro del array del elemento encontrado (es lo que necesitas ¿no?) y -1 en caso de no encontrarse.
    Decir que ésta es una función que he escrito múltiples veces, muy útil, y que me extraña que no sea ésta la que figure y sí con la modificación true/false. Al fin y al cabo realiza una tarea más precisa y si tan sólo necesitas comprobar si existe o no, tomarás como -1 es false y distinto de -1 es true.

    Espero que sirva de ayuda. ah! y buena recopilación (a pesar de la puntilla ;) )

    Aburiño!

  • o el navegador me la está jugando (firefox 2.0) o es el script de la página, pero ahí va de nuevo! (parece ser que el problema está al enviar el signo menor que)
    NOTA2!!: bien, es la última vez que lo envío. esta vez el código en un bloque a ver si así no lo recorta!
    NOTA: Reenvío el mensaje, ya que compruebo que ha llegado cortado ¿un bug en el envío de comentarios?

    RF:
    Tomás: leyendo detenidamente los scripts del artículo es fácil darse cuenta de que tan sólo una ligera modificación de inArray() (puesto #4) consigues ésto mismo que requieres. ahí va:

    tan sólo cambiar las dos líneas de retorno por:
    return true -cambiarla por- return i
    return false -cambiarla por- return -1

    (puse el código de ejemplo de la función completa al final)

    Como verás, en lugar de devolver verdadero o falso lo que hago es devolver el índice dentro del array del elemento encontrado (es lo que necesitas ¿no?) y -1 en caso de no encontrarse.
    Decir que ésta es una función que he escrito múltiples veces, muy útil, y que me extraña que no sea ésta la que figure y sí con la modificación true/false. Al fin y al cabo realiza una tarea más precisa y si tan sólo necesitas comprobar si existe o no, tomarás como -1 es false y distinto de -1 es true.

    Espero que sirva de ayuda. ah! y buena recopilación (a pesar de la puntilla 😉 )

    Aburiño!

    FUNCIÓN:
    /*

    Array.prototype.inArray = function (value) {
    var i;
    for (i=0; i

  • NOTA: p3k, el simbolo < es el simbolo de apartura de tags… por ese motivo se corta.. puedes usar la entidad &lt;

    Por cierto, ¿para que modificamos el inArray()? Osea, si estamos buscando en el Array «CASA» ¿para que queremos que devuelva «CASA»?

    Tomas:
    Monté una especie de indexOf para Arrays que dado un criterio de busqueda te devuelve el indice de donde está ubicado. Quizas te sirva.

  • Hola aNieto2K: bien, ya se que es el símbolo de apertura de tags y precisamente en el útlimo mensaje use la entidad html equivalente y el error fue el mismo, aunque veo en tu comentarios que lo usas sin problema.

    Sobre la función, en realidad no propuse devolver «CASA» de nuevo, sinó el índice (la variable i en el ejemplo), básicamente lo que has puesto en el otro post (sobre indexOf) pero devolviendo -1 en lugar de false al no encontrar nada.

  • las funciones de Cookies funcionan en firefox pero NO en IE7.
    el get devuelve siempre null.
    sabes de que puede ser?

  • INTERESANTE EL CODIGO, PERO FALTA UN POCO DE EXPLICACION

  • Devuelve el índice de un array en función del contenido.

    function indexOfArray (sArray, sTexto) {
    var resultado=false;
    for (var i=0; i<sArray.length; i++) {
    if (sArray[i]==sTexto) { resultado=i}
    };
    return resultado;
    }

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.