lunes, julio 16, 2007

Compendio 10 funciones de JavaScript

En busca de cómo mejorar la funcionalidad del lado de cliente de una de nuestras aplicaciones, me encontré con una serie de sitios que daban a conocer un listado de 10 funciones javascript, las más usadas, algunos de esos sitios coincidían en la mayoría de las funciones, otros, mostraban diferentes.

Por mi parte, os muestro las 10 funciones javascript que considero de mayor uso genérico, y que por una u otra razón, necesitamos tener a mano como referencia, ya que son las que solemos utilizar más a menudo.


Función 1. getElementById()

var elemento = document.getElementById(id);

Este método pertenece al objeto document. Con él obtendremos el objeto que hace referencia al elemento con un id en concreto.


Función 2. getElementsByTagName()

var array_elementos= elemento.getElementsByTagName(tag);

Sirve para obtener un array con todos los elementos con un tag concreto que están contenidos dentro de un elemento. Por ejemplo: deseamos cambiar el color del texto de todos los elementos con tag “A” contenidos dentro del elemento con id “links”:


<a href=”/”>Home</a>
<div id=”links”>
<a href=”http://google.com”>Google</a>
<a href=”http://ubuntu.com”>Ubuntu</a>
<a href=”http://debian.org”>Debian</a>
</div>

<script type=”text/javascript”>

// Obtenemos el elemento con id “links”
var el = document.getElementById(“links”);

// Ahora obtenemos todos los elementos con tag A que hay
// dentro del elemento 'el'
var as = el.getElementsByTagName(“A”);

// Y finalmente recorremos el array de elementos para
// cambiarles el color a cada uno
for (var i=0; i<as.length; i++) {
as[i].style.color = '#000'; // negro
}

</script>

Función 3. join()

var string = array.join(string);

El método join() pertenece al objeto Array (todos los arrays en JavaScript son un objeto Array), y nos servirá para unir todos los elementos de un array para forma una cadena de texto. Es el equivalente en PHP a implode().


Función 4. split()

Al igual que join(), split() también es un método del objeto Array, aunque sirve exactamente para lo contrario: dividir una cadena de texto en un array.

Truco: Usados ambos métodos conjuntamente podremos crear una función para sustituir un texto por otro en una cadena dada:


Función 5. focus()

elemento.focus();

Con este método conseguiremos pasar el foco a un elemento de un formulario.


Función 6. setTimeout() / setInterval()

var temporizador = setTimeout(funcion, milisegundos);
var intervalo = setInterval(funcion, milisegundos);

Ambos métodos (objeto window) nos sirven para ejecutar código javascript cada x milisegundos, bien para que se ejecute una sóla vez (setTimeout) o bien para que se ejecute ilimitadamente (setInterval). Ambos se pueden cancelar mediante clearTimeout(temporizador) y clearInterval(intervalo).


Función 7. addLoadEvent()

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.


Funicón 8. getElementsByClass()

Una gran función que mediante un nombre de clase (CSS), podremos encontrar los elementos que la compongan, devolviendo un arreglo de objetos para trabajar con ellos de forma más cómoda. Originalmente no fue creada por nadie en particular aunque con el tiempo los desarrolladores han ido añadiendo mejoras para depurar la función. Más acerca de esta función.


Función 9. getCookie(), setCookie(), deleteCookie()

La implementación de estas funcionalidades en PHP es más fácil.


Función 10. alert() / confirm() / prompt()

alert(mensaje);
var resultado = confirm(mensaje);
var resultado = prompt(mensaje, valor);

Con estos métodos (objeto window) mostraremos ventanas modales al usuario. Con alert() simplemente, como hemos visto en otros puntos, mostraremos un mensaje. Con confirm() haremos exactamente lo mismo, pero además obligará al usuario a seleccionar entre dos opciones, una positiva y otra negativa, que se devolverá como parámetro (boolean). Y con prompt() pediremos al usuario que introduzca un texto en una ventana modal.

confirm() es muy útil para confirmar clics en enlaces comprometidos, que hagan operaciones críticas como eliminación de datos.



Fuentes consultadas:

+ http://.../diez-funciones-imprescindibles-en-javascript/
+ http://.../top-ten-javascript
+ http://.../las-10-mejores-funciones-de-javascript/
+ http://www.desarrolloweb.com/articulos/705.php

No hay comentarios.: