Proyecto para practicar con bucles

Llegados a este punto en el curso es hora de hacer un pequeño ejercicio práctico algo más complejo, no mucho, no te asustes. Hay que crear un bucle for con las siguientes características:

1. Qué muestre el valor de la variable 20 veces exactamente. Pista: document.write().
2. Se deberá hacer obligatoriamente con decremento de 1 en la expresión final.
3. El valor del inicializador debe ser 10.
4. El valor de 0 se debe saltar.
5. El bucle tiene que tener un rango de 30 iteraciones aunque se iteren 21 y se muestren 20.
6. Se deberá mostrar al usuario un alert() antes de empezar el bucle que le avise de que este va a comenzar. También se informará al usuario de que el bucle ha terminado con un document.write().
7. El bucle solo será ejecutado si el usuario introduce la contraseña y usuario correctos (usuario: bucleAdmin contraseña: programacionFacil). Pista utiliza un prompt().

Esta práctica la hago porque es muy importante que empieces a desarrollar lógica de programación y que empieces a juntar todo lo que te he enseñado. En este caso, voy a mostrarte como hacer esto, pero intenta hacerlo antes cada uno de los apartados. No tiene porqué salirte bien, solo inténtalo o piensa al menos como irías haciendo cada una de las partes.

Vamos con los primeros requisitos. El valor del inicializador debe ser 10:

for(i=10;){}

El bucle tiene que tener un rango de 30 iteraciones.

for(i=10;i>=-19;){}

La expresión final debe ser con decremento. Por eso he puesto menos 20.

for(i=10;i>=-19;i--){}

Probemos de imprimir esto, a ver que pasa.

for(i=10;i>=-19;i--){
	document.write("El valor del bucle es: " + i + "<br>");
}

El valor del bucle es: 10
El valor del bucle es: 9
El valor del bucle es: 8
El valor del bucle es: 7
El valor del bucle es: 6
El valor del bucle es: 5
El valor del bucle es: 4
El valor del bucle es: 3
El valor del bucle es: 2
El valor del bucle es: 1
El valor del bucle es: 0
El valor del bucle es: -1
El valor del bucle es: -2
El valor del bucle es: -3
El valor del bucle es: -4
El valor del bucle es: -5
El valor del bucle es: -6
El valor del bucle es: -7
El valor del bucle es: -8
El valor del bucle es: -9
El valor del bucle es: -10
El valor del bucle es: -11
El valor del bucle es: -12
El valor del bucle es: -13
El valor del bucle es: -14
El valor del bucle es: -15
El valor del bucle es: -16
El valor del bucle es: -17
El valor del bucle es: -18
El valor del bucle es: -19

Realmente el bucle se está iterando 30 veces, ya que en este caso, está el 0 por en medio. Bien, podemos por ejemplo poner el valor de la condición de salida a -19 para cumplir con el requisito número 5.

No obstante, en este quinto requisito también se pide que se itere 21 veces en este rango de 30 iteraciones posibles. Para hacer esto, se puede utilizar un break.

for(i=10;i>=-19;i--){
	document.write("El valor del bucle es: " + i + "<br>");
	if (i == -10) {
		break;
	}
}

Ejecutando esto ahora, se ejecuta y muestra 21 veces contando el 0.

El valor del bucle es: 10
El valor del bucle es: 9
El valor del bucle es: 8
El valor del bucle es: 7
El valor del bucle es: 6
El valor del bucle es: 5
El valor del bucle es: 4
El valor del bucle es: 3
El valor del bucle es: 2
El valor del bucle es: 1
El valor del bucle es: 0
El valor del bucle es: -1
El valor del bucle es: -2
El valor del bucle es: -3
El valor del bucle es: -4
El valor del bucle es: -5
El valor del bucle es: -6
El valor del bucle es: -7
El valor del bucle es: -8
El valor del bucle es: -9
El valor del bucle es: -10

El quinto requisito también dice que solo se muestren 20 iteraciones pero que se ejecuten 21. Podemos por ejemplo hacer que se salte la impresión del valor 0.

for(i=10;i>=-19;i--){
	if (i == 0) {
		continue;
	}
	document.write("El valor del bucle es: " + i + "<br>");
	if (i == -10) {
		break;
	}
}

Esta vez el valor de 0 no se imprime. Es importante poner este nuevo if antes del document.write().

El valor del bucle es: 10
El valor del bucle es: 9
El valor del bucle es: 8
El valor del bucle es: 7
El valor del bucle es: 6
El valor del bucle es: 5
El valor del bucle es: 4
El valor del bucle es: 3
El valor del bucle es: 2
El valor del bucle es: 1
El valor del bucle es: -1
El valor del bucle es: -2
El valor del bucle es: -3
El valor del bucle es: -4
El valor del bucle es: -5
El valor del bucle es: -6
El valor del bucle es: -7
El valor del bucle es: -8
El valor del bucle es: -9
El valor del bucle es: -10

Es el momento de añadir los avisos al usuario, según el requisito número 6.

alert("El bucle va a comenzar.");

for(i=10;i>=-19;i--){
	if (i == 0) {
		continue;
	}
	document.write("El valor del bucle es: " + i + "<br>");
	if (i == -10) {
		break;
	}
}

document.write("El bucle ha finalizado.");

Con esto, aparecerá un alert() antes de ejecutar el bucle y un texto en el documento al finalizarlo.

Nos falta introducir lo del usuario y contraseña. Lo vamos a hacer con un cuatro variables, dos prompts y un if. Piensa que para cumplir con el requisito número 7 y que el bucle se ejecute solo si se pone bien el usuario y contraseña, debemos meter el bucle dentro de este nuevo if else para que controle su ejecución.

let usuario = "bucleAdmin";
let pass = "programacionFacil";
let introduceUsuario;
let introducePass;

introduceUsuario = prompt("Introduce el nombre de un usuario autorizado para ejecutar el bucle.");
introducePass = prompt("Introduce una contraseña.");

if (introduceUsuario != usuario || introducePass != pass) {
	alert("Error. Usuario y/o contraseña no válidos.");
}

else {
alert("El bucle va a comenzar.");

for(i=10;i>=-19;i--){
	if (i == 0) {
		continue;
	}
	document.write("El valor del bucle es: " + i + "<br>");
	if (i == -10) {
		break;
	}
}

document.write("El bucle ha finalizado.");
}

Espero que te haya gustado hacer algo un poco más complicado para ir saliendo de la zona de confort. Es normal si no sabías ni como empezar con el proyecto. Es algo muy grande en comparación con lo que se ha dado hasta ahora en el curso. No obstante, piensa que todo lo que hay en este código ya está explicado, simplemente lo hemos llevado un poco más allá. Si no has visto el vídeo, te lo recomiendo. Seguro que lo vas entendiendo mejor. Cualquier duda, déjame un comentario.