jueves, 18 de febrero de 2010

10 funciones altamente aconsejables en Javascript

En la era de la información y en la denominada Web 2.0 no es posible sobrevivir sin tener un buen nivel de Javascript. En estos pequeños 10 puntos trataré de enriquecer un poco más la capacidad del lector, detallando algunos de las funciones/métodos más importantes de Javascript, junto con ejemplos prácticos.

Javascript es un leguaje de scripting interpretado orientado a pseudo-objetos, esto es, que no existe herencia, aunque se puede conseguir clonando una clase y añadiendo más métodos o propiedades. Casi todos los navegadores existentes pueden interpretar Javascript, ya que es de hecho un estándar: ECMAScript (ECMA = European Computer Manufacturers Association).

Pero sólo con el lenguaje JavaScript no podremos hacer nada en una página web. También necesitaremos el DOM (Document Object Model). El DOM es una estructura de objetos que representa absolutamente todos los elementos que componen una web, y mediante él conseguiremos acceder a información de la página web, añadir nuevos elementos, o modificarlos.


Función1: getElementById()
Uso: 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 concreto. Por ejemplo, queremos obtener el objeto del elemento “status”: 

Hola mundo...
Función 2: getElementsByTagName()
Uso: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. Veamos una ejemplo. Queremos cambiar el color del texto de todos los elementos con tag “A” contenidos dentro del elemento con id “links”: 

Home
Función3: join()  Uso: 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(). Ejemplo: Queremos unir todos los nombres de un array mediante comas: 
// Creamos el array de nombres
var nombres = ['Luis','Javier','Sancho','Roberto','Rafael','Manuel'];
// Unimos todos los elementos separándolos por comas
var juntos = nombres.join(“, “);
// Y lo mostramos
alert(juntos);
Función4: split()  Uso:var array = string.split(string); 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. Siguiendo con el ejemplo anterior: 
var juntos = “Luis, Javier, Sancho, Roberto”;
var nombres = juntos.split(“, “);
for (var i=0; i
Truco: Usados ambos métodos conjuntamente podremos crear una función para sustituir un texto por otro en una cadena dada: 
function str_replace(cadena, cambia_esto, por_esto) {
      return cadena.split(cambia_esto).join(por_esto);
}
alert(str_replace('Hola mundo!','mundo','world'));
Función5: addEventListener() / attachEvent()  Uso: Internet Explorer: elemento.attachEvent(“on”+evento, funcion); Resto de navegadores: elemento.addEventListener(evento, funcion, false); Ambos métodos hacen exactamente lo mismo, sólo que, como ocurre en otros cientos de ocasiones, Microsoft usa su propia implementación del DOM. Con este método añadiremos eventos a cualquier elemento de la página web, tal como onclick, onmouseover, onmouseout, etc. Veamos un ejemplo. Crearemos una función para la abstracción de navegadores, es decir, para que funcione tanto en IE como en Firefox o cualquier otro navegador; y después añadiremos el evento onclick a varios elementos DIV para que muestre su contenido mediante una alerta al hacer clic sobre ellos. 


Hola mundo!
Foo bar
Lorem Ipsum
Función6: focus()  Uso: elemento.focus(); Con este método conseguiremos pasar el foco a un elemento de un formulario. Ejemplo: 



      

Nombre
Apellidos
Función7: createElement() / appendChild()  Uso: var elemento = document.createElement(tag); Con éste método del objeto document crearíamos un nuevo elemento con un tag determinado. Ejemplo: var div = document.createElement('DIV'); Uso: elemento1.appendChild(elemento2); Con este método añadiremos el elemento “elemento2” a “elemento1”. En el siguiente ejemplo, añadiremos elementos a una lista de forma dinámica:
    Función8: removeChild()
    Uso: elemento.removeChild(hijo);

    Este método es el usado para eliminar elementos. Se elimina el elemento hijo del objeto. Si queremos eliminar un objeto concreto, tendremos que hacerlo de la siguiente manera: 

    // Obtenemos el elemento
var el = document.getElementById(“elemento-a-eliminar”);
// Obtenemos el padre de dicho elemento
// con la propiedad “parentNode”
var padre = el.parentNode;
// Eliminamos el hijo (el) del elemento padre
padre.removeChild(el);
    Función9: setTimeout() / setInterval()
    Uso: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). Veamos un ejemplo, donde se muestra la hora y fecha del sistema cada segundo en un DIV:

    Función10: alert() / confirm() / prompt()
    Uso: 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. Veamoslo con un ejemplo:

    // Pedimos al usuario que introduzca su nombre
var nombre = prompt(“Introduzca su nombre”);
// Pedimos confirmación
if (confirm(“¿Seguro que su nombre es ”+nombre+”?”)) {
      // Respuesta afirmativa...
      alert(“Hola ”+nombre);
}
    confirm() es muy útil para confirmar clics en enlaces comprometidos, que hagan operaciones críticas como eliminación de datos. 

    Eliminar registro
    Existen muchos más métodos a nuestra disposición, aunque hay que tener en cuenta que Internet Explorer no cumple el estándar ECMAScript/DOM (entre otros tantos estándares web), y puede que un método no funcione igual en IE que en Firefox o Safari.

    Aprenderse el DOM es fundamental para poder llegar a ser un buen profesional, pero por suerte para nosotros existen librerías Javascript que nos harán la vida mucho más fácil, como jQuery, la sensación del momento entre los programadores Javascript.

    Referencia

    * Manual de referencia del DOM de Gecko
    Publicado por
    Etiquetas: , ,

    No hay comentarios:

    Publicar un comentario

    Suscribirse a: Enviar comentarios (Atom)