Dedicamos un poco
de tiempo para darles a conocer las 10 funciones más genéricas de javascript y
que forman parte de la mayoría de las aplicaciones del lado del cliente. Actualmente
sabemos el poder que a llegado a tener este lenguaje popular al lado del
cliente, a continuación conozcamos más sobre el poder y sus funciones de este
lenguaje.
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 eventoonload, 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.
0 comentarios:
Publicar un comentario