10 funciones imprescindibles en Javascript

Estás en Inicio / Editorial / Javascript

21.06.2007

10 funciones imprescindibles en Javascript

Por Javier Perez | 78,166 Lecturas
Archivado 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.

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.

Referencia

Manual de referencia del DOM de Gecko

Califica esta nota:

(16 votos, promedio: 4.38 de 5)

Loading ...

Sobre el autor

Javier Perez
Experto en desarrollo web utilizando PHP y Javascript, además de XHTM/CSS, manupulación del DOM, AJAX, servicios web, desarrollador de extensiones para Firefox.

Comentarios

30 comentarios en total.

Aitor 21.06.2007 - 09:58 - #

Muy bien artículo…
Alekz 21.06.2007 - 15:07 - #

Gracias por el artículo, yo la verdad ando muy flojo en cuanto a JavaScript y esto me ha servido bastante, sobretodo lo de appendChild() no lo conocía y me pareció muy interesante.
Julio 22.06.2007 - 09:54 - #

Pero esto no son “funciones en Javascript”, sino métodos de objetos existentes.

El artículo esta bueno, pero yo -al ver el título- pense que eran funciones de usuario escritas en Javascript.

Saludos.
caricatos 24.06.2007 - 01:33 - #

Hola:

Aunque es una buena selección se echa en falta métodos como insertBefore (ya que se nombra appendChild), o hasChildNodes, cloneNode, setAttribute, getAttribute…

Tal vez sea una buena idea complementar este artículo con una selección de atributos y tal vez colecciones.

Saludos
VIRIDIANA 26.06.2007 - 11:26 - #

Hola.
Me perecio bueno, pero a mi que soy una aprendiz de javascript siento que me falto mas informacion, les sugiero compensarlo con mas instrucciones; los ejemplos estan super entendibles… FELICITACIONES¡¡¡¡¡
Javier 27.06.2007 - 01:38 - #

Muy bueno, Gracias!!
Jaime Olmo 27.06.2007 - 07:46 - #

Muy buena coleccion de tips. Todo novato debe enfocarse a dominar estas funciones. Gracias
flxruiz 27.06.2007 - 12:49 - #

Excelente articulo y los ejemplos son muy entendible
vinicioWEB 27.07.2007 - 15:54 - #

Muy bueno el artículo
wilfredo 01.08.2007 - 11:29 - #

muy bueno el articulo facil de entender..
Calamar 04.08.2007 - 05:19 - #

A mí la verdad es que me ha gustado. Ya conocía la mayoría pero nunca viene mal un repaso.

Y como ya han dicho los ejemplos bastante buenos.
ElGAto 25.08.2007 - 16:37 - #

estuvo muy bueno, justamente estaba buscando algo como el “document.createElement(tag)” .
De todas formas quisiera saber si el mismo método o algún otro te permiten crear el elemento con el ID incluido. EJ: quiero crear un esta es la capa 1.
Bueno estare muy agradecido por las sugerencias o posibles soluciones. gracias
ElGAto 25.08.2007 - 16:45 - #

el anterior mensje esta mal , por que reconocio el código que puse.
Volviendo…
EJ: quiero crear algo así “esta es la capa 1 “.
existe algun modo
Doctor Lecter 28.08.2007 - 06:19 - #

Muy bueno, muy simple y muy util.
la Carmenchu 23.10.2007 - 02:19 - #

Quééééééééé fuerte!!! Yo aquí buscando funciones en Javascript y me encuentro a un Javi por aquí!!!

Un besote malaguitas… A mí también me ha venido fenomenal
urix 27.11.2007 - 03:55 - #

Hola, me gustaria obtener los nombres de una picklist de un formulario… he intentado crmForm.all.(nombre campo).name, .text, y nada. alguien sabe como?
Alexander 05.12.2007 - 09:03 - #

Me parece un articulo muy bien formado y presentado, es una gran ayuda para quienes necesitamos referencias rapidas y sencillas sobre el javascript avanzado, me parece que deberian comentar un poco mas sobre el jquery se ve algo interesante y de gran ayuda
Felipe 22.01.2008 - 16:56 - #

Preciso el de split tiene error.
Zejulian velazquez zapata 23.01.2008 - 19:22 - #

esta exeplen eso de los scripts, deberian de publicar un poco mas de rutinas, apenas tengo dos semanas
marsupial 31.01.2008 - 10:49 - #

Hola, muy buena coleccion, gracias Javier..
pero de paso queria comentar que no me funciono el codigo de la ‘Función7: createElement() / appendChild()’ pero cambie :
var ul = document.getElementById(“UL”);
por
var ul = document.getElementById(’lista’);
Y las comillas dobles por simples de toda la funcion, y todo bien. ¿Realmente nose xq las comillas dobles evitaban que funcionara el js?.
Zejulian velazquez zapata 04.03.2008 - 19:09 - #

exelente amigoz, me gustaria que se agregaran mas funciones o si asi lo desean yo les paso de las k tengo y las tengo en uzo.

ez todo noz vemoz en el futuro…!

VAI
Michael Palacios 06.03.2008 - 18:52 - #

ñam ñam bueno el articulo pero hay un error mas en la funcion 5 de addEventListener y attachEvent cuando declaras el metodo “nuevo_evento” en las lineas del if/else en la parte de “elemento.addEve…” y “elemento.att…” pusiste de parametro “function” cuando debio ser “funcion”…..
por lo demas buen trabajo y sigue asi……
marcis 12.03.2008 - 02:00 - #

split() es un método del objeto String, no de Array

Buena recopilación!!
espinete 14.04.2008 - 02:12 - #

Señor, cómo se pueden desarrollar extensiones para Firefox ?? saludos.
Patricio 22.05.2008 - 07:07 - #

En la funccion 8 dice:
var ul = document.getElementById(“UL”);
y debe ser:
var ul = document.getElementById(“lista”);
Jose Gregorio Leal 26.05.2008 - 18:53 - #

Hola tengo alguna experiencia con javascript.. no mucha.. pero hace poco me surgio este problema con getElementById.. Intente hacer una clase para implementar un indice de paginas y al intentar hacer getElementById dentro de uno los metodos siempre me dio null.. aun cuando el elemento con ese id existia.
Jose Gregorio Leal 26.05.2008 - 19:04 - #

function Index(totalpages,indexsize,containerId)
{
this.totalpages=totalpages;
this.page=0;
this.actualFirst=0;
this.size=indexsize;
this.containerId=containerId;

this.goNext = function goNext()
{
}

this.goBack = function goBack()
{
}

this.doRefresh = function doRefresh()
{
var html=”;
for(i=this.actualFirst;i<this.size;i++)
{
html+=’‘;
}
html+=”;
//aqui
document.getElementById(this.containerId).innerHTML = html;

}

}
var indice=new Index(20,4,’indice’);
indice.doRefresh();
edu 27.06.2008 - 07:55 - #

A mi me gustaría tener ayuda de como untilizar combos anidados con javascript.
Carlitos 27.07.2008 - 17:32 - #

Yo utilizo mucho javascript y nunca había usado estas funciones. Gracias, trataré de aprenderlas.
Joel Samuel Caihuaray Silva 29.08.2008 - 10:12 - #

Quisiera la solucion en javascript de como HALLAR EL MAYOR DE N NUMEROS.

Trackbacks

3 trackbacks en total.

Editorial

Otras Notas Relacionadas

Feed Editorial

Feed del sitio

10 funciones imprescindibles en Javascript

Función1: getElementById()

Uso: var elemento = document.getElementById(id);

Función 2: getElementsByTagName()

Uso:var array_elementos= elemento.getElementsByTagName(tag);

Función3: join()

Uso: var string = array.join(string);

Función4: split()

Uso:var array = string.split(string);

Función5: addEventListener() / attachEvent()

Uso: Internet Explorer: elemento.attachEvent(“on”+evento, funcion); Resto de navegadores: elemento.addEventListener(evento, funcion, false);

Función6: focus()

Uso: elemento.focus();

Función7: createElement() / appendChild()

Uso: var elemento = document.createElement(tag);

Uso: elemento1.appendChild(elemento2);

Función8: removeChild()

Uso: elemento.removeChild(hijo);

Función9: setTimeout() / setInterval()

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

Función10: alert() / confirm() / prompt()

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

Referencia

Sobre el autor

Comentarios

Trackbacks

Editorial

Otras Notas Relacionadas

Boletín

Uso: `var elemento = document.getElementById(id)`;

Uso:`var array_elementos= elemento.getElementsByTagName(tag);`

Uso: Internet Explorer: elemento.attachEvent(“on”+evento, funcion);
Resto de navegadores: elemento.addEventListener(evento, funcion, false);

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

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