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.
No hay comentarios:
Publicar un comentario