Después de haber utilizado el bucle For (“Para”), a continuación, se describe el primero de los bucles denominados condicionales, ya que dependen de que una condición se cumpla para repetir las acciones que en ellos se especifican.
Este bucle es el denominado do…while, el cual se puede traducir por haz…mientras, el bucle tiene la siguiente sintaxis.
do {
Acción/es…;
Acción/es…;
} while ( condición_a_evaluar );El funcionamiento del bucle seria el siguiente, el flujo del programa entra en el bucle y ejecuta una vez las acciones que se especifican dentro del bloque, cuando haya ejecutado las acciones se evalúa la condición especificada, y en caso de cumplirse se vuelve a repetir el conjunto de acciones, en caso contrario se da por finalizada la ejecución del bucle.
Teniendo en cuenta la sintaxis anterior realizar un ejercicio en el cual se muestren los valores de 1 a 10.
// Ejercicios y prácticas de programación en JavaScript
// Crear variables auxiliares
var contador=0;
// Inicializar el contador
contador=1;
// repetir mientras que el contador tenga
// un valor inferior a 10
do {
// visualizar el valor de contador
console.log(contador);
// incrementar contador en una unidad
contador=contador+1;
} while(contador<11);
// Se ha de tener en cuenta que el no incrementar
// el contador puede tener como consecuencia
// la ejecución de un bucle infinito y por tanto
// el bloqueo del programa.
// Gracias por su visita a www.aprendoencasa.comEl resultado que se ha de obtener en la consola del navegador ha de ser similar al que se muestra a continuación.
Ejercicios JavaScript – Bucles
¡¡ Otro ejercicio con más dificultad !!, no desesperéis si no os sale, intentar realizar ejercicios más simples, hasta lograr entender el que se os plantea a continuación. Recordar que, para un programador, la paciencia y constancia no son virtudes, ¡son obligaciones! 🙂
El ejercicio que se plantea es rellenar una lista de un formulario con los números del 1 al 20 y traspasar a otra lista los números primos de la primera lista.
Para realizar estas acciones se han insertado tres botones, uno que genera los números del 1 al 20 en la primera lista, un segundo botón que permite borrar los números generados de la primera lista y por último otro botón que lee los números de la primera lista y traspasa a la segunda solo aquellos que sean primos.
Ejercicios JavaScript – Bucles do…while
Archivo: index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Bucle Do...While</title>
<meta charset="utf-8">
<meta name="author" content="josé sáez">
<meta name="generator" content="www.aprendoencasa.com">
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<!-- titulo -->
<h3>Bucle Do...While</h3>
<!-- formulario -->
<form action="#" name="formulario1" id="formulario1">
<!-- seccion izquierda con lista de números -->
<section class="izquierda">
<label for="lista1">Lista con números generados</label>
<br>
<select name="lista1" id="lista1" size="20"></select>
</section>
<!-- seccion central con los botones de acción -->
<section class="centro">
<button id="generar_numeros" name="generar_numeros" id="generar_numeros">Generar Números</button>
<button id="borrar_lista" name="borrar_lista" id="borrar_lista">Borrar Lista</button>
<button id="generar_primos" name="generar_primos" id="generar_primos">Generar Primos</button>
</section>
<!-- sección derecha con la lista de números primos -->
<section class="derecha ultimo">
<label for="lista2">Lista con números primos</label>
<br>
<select name="lista2" id="lista2" size="20"></select>
</section>
<div class="limpiar"></div>
</form>
<!-- cargar archivo de javascript -->
<script src="principal.js"></script>
</body>
</html>Archivo: estilos.css
/*
Incluir fuentes de google
*/
@import url('https://fonts.googleapis.com/css?family=Sansita');
/* fuente para todo el documento */
body {
font-family: 'Sansita', sans-serif;
}
/* Formulario */
body form {
width: 90%;
margin: 0 auto;
padding: 1%;
box-sizing: border-box;
border: 1px solid grey;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
/* Sección izquierda del formulario */
.izquierda, .centro, .derecha {
box-sizing: border-box;
float: left;
margin-right: 5%;
width: 30%;
}
label {
margin-bottom: 5px;
display: block;
text-align: center;
}
select {
width: 100%;
background-color: #66CC99;
color: #ffffff;
}
button {
border: none;
background-color: #0099CC;
padding: 5px;
width: 100%;
color: #ffffff;
height: 40px;
margin: 5px;
}
.ultimo {
margin-right: 0px;
}
.limpiar {
clear: both;
}Archivo: principal.js
/*
Bucle do ... while ejercicios y prácticas de programación aprendoencasa.com
*/
window.onload = function() {
document.getElementById("generar_numeros").addEventListener("click",function(e){
e.preventDefault();
var lista = document.getElementById("lista1");
lista.options.length = 0;
var contar=1;
do {
let opcion = document.createElement("option");
opcion.text = contar;
lista.add(opcion);
contar=contar+1;
} while(contar<=20);
});
document.getElementById("borrar_lista").addEventListener("click",function(e){
e.preventDefault();
var lista = document.getElementById("lista1");
lista.options.length = 0;
});
document.getElementById("generar_primos").addEventListener("click",function(e){
e.preventDefault();
let listap = document.getElementById("lista1");
let listas = document.getElementById("lista2");
let cuantoslistap = listap.options.length;
if(cuantoslistap>0) {
let contar=0;
do {
let numero = 0;
numero = listap.options[contar].text;
let divisor_inicial = 2;
let divisor_final = numero;
let divisores = divisor_inicial;
let primo = "si";
for(let d = divisor_inicial; d < divisor_final && primo=="si" ; d++ ) {
if( numero%d == 0 ) {
primo="no";
}
}
if(primo=="si") {
let opcion = document.createElement("option");
opcion.text = numero;
listas.add(opcion);
}
contar++;
} while(contar<cuantoslistap);
}
})
}Gracias por vuestra visita y un saludo!!!
