martes, julio 24, 2012

Tutorial de desarrollo web, Parte XLII: Llamada a elementos HTML (II). Bucle for...in

La semana pasada veíamos cómo podíamos llamar mediante JavaScript a un elemento en concreto del documento al usar la función getElementById, la cual, ya que el identificador debe de ser único en nuestra página, nos devolverá el elemento con dicho identificador. Hoy vamos a aprender una función muy parecida a ésta, pero que nos podrá servir en otras ocasiones distintas: getElementsByName.
Recordaremos el atributo name que usábamos en HTML y que casi todos los elementos HTML podían tenerlo, y que tenían diversas utilidades, sobre todo en programación. Pues aquí podemos ver una utilidad, ya que, usando el getElementsByName podremos llamar a aquellos elementos que tengan un name concreto. Sin embargo, a diferencia del identificador, el nombre de los elementos podía repetirse. ¿Cual es el elemento que nos devolverá en este caso?
La verdad es que getElementById y getElementsByName no funcionan exactamente igual. En primer lugar fijémonos que la palabra "element" en el segundo caso está en plural, lo cual ya indica que el segundo nos puede devolver varios elementos. ¿Y cómo pueden en programación devolvernos varios elementos? Mediante un array. ¿O pensábais que no los usaríamos nunca para nada?
Veamos, por ejemplo, el siguiente código:

var redElements = document.getElementsByName("red");
for(var i = 0; i &tl; redElements.length; i++)
{
alert(redElements[i].value);
}

Este código tan simple presenta la siguiente situación: en la variable "redElements" guardamos todos los elementos que tengan el nombre "red" (que, por lo que podemos deducir más abajo, deben de ser "inputs"). De este modo, la variable "redElements" ahora contiene un array de elementos HTML. Mediante un bucle for (otra cosa de la que nos estábamos olvidando, ¿no?) recorremos el array desde el 0 hasta el tamaño del array (sin incluirlo, ya que es el símbolo "menor que", no el "menor o igual que") y vamos sacando su valor a través de un "alert". ¿Difícil? Creo yo que no.
Bueno, ya que estamos aquí, vamos a dejar esto un poco de lado y vamos a ver un poco de teoría básica de programación que hemos ido retrasando. Hemos visto hasta ahora tres tipos de bucles, el bucle while, el bucle do...while y el bucle for, pero lo cierto es que nos queda por ver un último bucle: el bucle for...in.
A diferencia de los anteriores bucles, que podían servir en casi cualquier situación, el bucle for...in (que en otros lenguajes es llamado for each) sólo sirve para recorrer "colecciones", el tipo de objeto al que pertenecen los arrays. De este modo, el anterior código con un bucle for...in quedaría así:

var redElements = document.getElementsByName("red");
for(element in redElements)
{
alert(element.value);
}

Os preguntaréis que qué lógica tiene lo que he escrito. Realmente es bastante sencillo: este bucle, como les digo, el propósito de este bucle es simplificar el recorrer colecciones. Por ello, le decimos, después de la palabra reservada in, que vamos a recorrer el array "redElements". Hasta ahí fácil, ¿no? Ahora supongo que querréis saber que es ese "element" que tenemos añadido.
Para facilitar el recorrer el array, el for...in le da un nombre genérico elegido por nosotros a la posición de array en la que nos encontremos, de modo que podemos usar ese nombre dentro del bucle (sólo dentro del bucle). Podemos considerarlo como una "variable provisional" en la que vamos guardando cada uno de los elementos del array (aunque en realidad sería un puntero más que una variable... pero eso ya estamos hablando de programación avanzada...). De la forma más sencilla posible, tenéis que entender que "element" dentro del bucle será equivalente al "redElements[i]" del anterior fragmento de código, sólo que nos ahorramos tener que usar la estructura de array y lo usamos como si fuera una variable simple (una ilusión ya que sigue formando parte del array).
Y, por ahora, eso es todo. Sé que últimamente los posts están siendo cortos, pero también es cierto que las cosas que vamos aprendiendo cada vez son más complejas, y saturarles con muchas cosas seguidas no es la mejor de las ideas.

EJERCICIO

En el ejercicio de esta semana vamos a ponernos un poco más serios. Vamos a crear cuatro cuadros de texto y un botón. En el primer cuadro de texto (que debe de ser más grande que los otros tres) el usuario deberá escribir su nombre completo (un nombre y dos apellidos) y, al pulsar el botón, el nombre se separará entre los otros tres campos, mostrando uno el nombre, otro el primer apellido y el último el segundo apellido. Los tres cuadros de texto "resultado" deben tener el mismo name entre ellos, mientras que el último deberá tener otro name distinto. Intentar hacerlo con bucle for, bucle for...in y sin bucle.

Y aquí termina otra semana más el tutorial de desarrollo web. ¡La semana que viene, más!

No hay comentarios: