10 funciones imprescindibles en Javascript

Publicado el 21 de Junio, 2007

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.

Todos estos métodos pertenecen a objetos del DOM: window, document , y element.

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”:

<div>
      <span id=”status”>Hola mundo...</span>
</div>
<script type=”text/javascript”>
// Obtenemos el elemento “status”
var el = document.getElementById(“status”);
// Mostramos mediante una alerta el contenido del elemento
alert(el.innerHTML);
</script>

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”:

<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ó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.

<div id=”frases”>
      <div>Hola mundo!</div>
      <div>Foo bar</div>
      <div>Lorem Ipsum</div>
</div>
<script type=”text/javascript”>
// Creamos la funcion para añadir eventos
function nuevo_evento(elemento, evento, funcion) {
      if (elemento.addEventListener) {
            elemento.addEventListener(evento, function, false);
      } else {
            elemento.attachEvent(“on”+evento, function);
      }
}
// Obtenemos los elementos DIV a los que queremos añadir nuestro evento onclick
var divs = document.getElementById(“frases”).getElementsByTagName(“DIV”);
// Recorremos todos los divs
for (var i=0; i<divs.length; i++) {
      // Añadimos el evento onclick al div
      nuevo_evento(divs[i], “click”, function(){
            // Hacemos que muestre el contenido del DIV
           alert(this.innerHTML);
      });
}
</script>

Cuando hagamos clic en uno de los DIV, se nos mostrará una ventana de alerta con su contenido.

Función6: focus()

Uso: elemento.focus();

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

form>
      <input type=”text” id=”nombre” value=”Javier” />
      <input type=”text” id=”apellidos” value=”Perez” />
</form>
<a href=”#” onclick=”document.getElementById(“nombre”).focus()”>Nombre</a>
<a href=”#” onclick=”document.getElementById(“apellidos”).focus()”>Apellidos</a>

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:

<input type=”text” id=”texto” />
<input type=”button” value=”Crear” onclick=”crear()” />
<ul id=”lista”></ul>
<script type=”text/javascript”>
function crear() {
      // Obtenemos el valor entrado en la caja de texto
      var valor = document.getElementById(“texto”).value;
      // Creamos un nuevo elemento LI
      var li = document.createElement(“LI”);
      // Añadimos el valor introducido al nuevo elemento
      li.innerHTML = valor;
      // Añadimos el elemento LI a la lista UL
      var ul = document.getElementById(“UL”);
      ul.appendChild(li);
      // Vaciamos la caja de texto
      document.getElementById(“texto”).value = “”;
}
</script>

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:

<div id=”fecha”></div>
<script type=”text/javascript”>
      setInterval(function(){
            document.getElementById(“fecha”).innerHTML = new Date();
      },1000);
</script>

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.

<a href=”http://miweb.com/delete/record?id=123” onclick=”return confirm('¿Está seguro?');”>Eliminar registro</a>

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.