jueves, 9 de enero de 2014

Tutorial Javascript parte 6 - Estructuras de control (búcles: for, for in, while)




Bienvenid@s a un nueva parte del tutorial de Javascript, en esta ocasión vamos a continuar con aspectos importantes del Lenguaje Javascript y vamos continuar viendo las estructuras de control, en el capítulo anterior ya vimos las sentencias if-else y switch, en esta ocasión vamos a ver otras estructuras como son los búcles.

Los búcles son una parte de código reservada para ser ejecutada mientras se cumple una determinada condición, los búcles son muy necesarios en la programación, de hecho son la parte más dinámica del lenguaje.

Para este capítulo crea un archivo y guárdalo como fundamentos-5.js en la carpeta javascript e indica la ruta hacia el nuevo archivo en el index.html ...

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="javascript/fundamentos-5.js"></script>
</head>
<body>
</body>
</html>


A continuación vamos a ver los búcles for, for in y while.

Búcle for



Este búcle es uno de los más utilizados, de hecho es muy fácil entenderlo, el búcle iterará mientras la condición se cumpla, de lo contrario dejará de ejecutarse, los búcles son muy utilizados para recorrer los elementos de un Array, por ejemplo ...

var lista = ["uno", "dos", "tres"];
for (x = 0; x < lista.length; x++)
{
document.write(lista[x]);
}
//Regresará uno dos tres


La variable x irá incrementándose en 1 mientras la condición se cumpla, indexando 1 a 1 los elementos del array.

De hecho si quisieras salir de la ejecución del búcle antes de que llegase al final, puedes utilizar break para romper la ejecución del búcle.

var lista = ["uno", "dos", "tres"];
for (x = 0; x < lista.length; x++)
{
document.write(lista[x]);
if (x == 1)
{
break;
}
}
//Regresará uno dos


En este caso el búcle se detiene cuando x = 1, rompiendo la ejecución del búcle.

Búcle for in



Este búcle es muy interesante sobre todo para ir recorriendo las claves string de un array asociativo, por ejemplo ...

var lista = new Array();
lista["uno"] = 1;
lista["dos"] = 2;
lista["tres"] = 3;
for (clave in lista)
{
document.write(clave + " : " + lista[clave]);
}
//regresa uno:1dos:2tres:3


Como puedes ver el búcle for in es perfecto para recorrer elementos de un array asociativo.

Búcle while



El búcle while es otro de los búcles fundamentales de este lenguaje y necesario conocerlo, de hecho el resultado que se puede obtener con este búcle es prácticamente el mismo que con un búcle for, este búcle necesita previa declaración de una variable incrementable o decrementable, de hecho si no se incluye el búcle se convierte en búcle infinito.

var x = 0;
var limite = 10;
while (x < limite)
{
document.write(x);
x++;
}
//Regresa 0123456789


Si en el búcle no hubiese incluido x++ el búcle se hubiese convertido en búcle infinito.

Ahora vamos a ver un sencillo ejemplo, copia y pega el siguiente código en fundamentos-5.js y guárdalo ...

/*

Un búcle es una sentencia que se realiza repetidas veces a un trozo aislado de 
código, hasta que la condición asignada a dicho búcle deja de cumplirse

*/

/* for */

var paises = ["España", "Argentina", "Colombia", "Uruguay", "Perú"];

for (var x = 0; x <= paises.length-1; x++)
{
document.write("<p>" + paises[x] + "</p>");
if(x == 2)
{
break;
}
}

/* for in */

var productos = new Array();

productos["zapatos"] = 30;
productos["camisas"] = 15;
productos["pantalones"] = 50;

for (var clave in productos)
{
document.write("<p>" + clave + " : " + productos[clave] + "€</p>");
}

/* while */

var nombres = ["Pepe", "Manuel", "María"];
var x = 0;

while(x <= nombres.length-1)
{
document.write("<p>" + nombres[x] + "</p>");

if (x == 1)
{
break;
}
x++;


Ahora ejecuta index.html en el navegador ...



Ahora puedes practicar creando nuevos arrays y recorriendo sus elementos a través de los distintos búcles.