Codificación aprenderaprogramar.com: CU01131E
CONCEPTO GENERAL DE BUCLE
Nos referimos a estructuras de repetición o bucles en alusión a instrucciones que permiten la repetición de procesos un número n de veces. Los bucles se pueden materializar con distintas instrucciones como for, while, etc. Un bucle se puede anidar dentro de otro dando lugar a que por cada repetición del proceso exterior se ejecute n veces el proceso interior. Lo veremos con ejemplos.
BUCLE CON INSTRUCCIÓN FOR. OPERADOR ++ Y --. SENTENCIA BREAK.
En JavaScript existen distintas modalidades de for. El caso más habitual, que es el que expondremos a continuación, lo denominaremos for normal o simplemente for. Conceptualmente el esquema más habitual es el siguiente:
La sintaxis habitual es: for (var i = unNumero; i < otroNumero; i++) { instrucciones a ejecutarse }, donde var i supone la declaración de una variable específica y temporal para el bucle. El nombre de la variable puede ser cualquiera, pero suelen usarse letras como i, j, k, etc. unNumero refleja el número en el que se empieza a contar, con bastante frecuencia es 0 ó 1. i < otroNumero ó i <= otroNumero refleja la condición que cuando se verifique supondrá la salida del bucle y el fin de las repeticiones. i++ utiliza el operador ++ cuyo significado es “incrementar la variable i en una unidad”. Este operador se puede usar en otras partes del código, no es exclusivo para los bucles for. Igualmente se dispone del operador “gemelo” – –, que realiza la operación en sentido contrario: reduce el valor de la variable en una unidad. Escribe el siguiente código y comprueba los resultados:
|
<!DOCTYPE html> <html> <head> <title>Ejemplo DOM - aprenderaprogramar.com</title> <meta charset="utf-8"> <style type="text/css"> body {background-color:white; font-family: sans-serif;} .boton{padding:15px; width: 200px; text-align:center; clear:both; color: white; border-radius: 40px; background: rgb(202, 60, 60);} </style> <script type="text/javascript"> function ejemploFor() { var palabra = 'Esternocleidomastoideo'; var subpalabra = new Array(); subpalabra[0]=''; var msg = 'Diez primeras letras: \n\n'; for (var i=1; i<=10; i++){subpalabra[i] = subpalabra[i-1] + palabra.charAt(i-1);} for (var i=1; i<=10; i++){msg = msg + subpalabra[i] +'\n';} msg = msg + '\nPalabra al revés: \n\n'; for (var i=palabra.length; i>0; i--){ msg = msg + palabra.charAt(i-1); } alert (msg); } </script> </head> <body> <h1>Portal web aprenderaprogramar.com</h1> <h2>Didáctica y divulgación de la programación</h2> <h3 class="boton" onclick="ejemploFor()">Pulsa aquí</h3> </body> </html> |
El resultado esperado es que se muestre lo siguiente:
Diez primeras letras:E
Es
Est
Este
Ester
Estern
Esterno
Esternoc
Esternocl
Esternocle
Palabra al revés:
oediotsamodielconretsE
Hemos usado el método charAt(i) que aplicado a una cadena de texto nos devuelve el carácter situado en la posición i (considerando que el primer carácter está en posición 0, el segundo en 1, etc.).
Un bucle for (o de cualquier otro tipo) puede ser interrumpido y finalizado en un momento intermedio de su ejecución mediante una instrucción break;. El uso de esta instrucción dentro de bucles solo tiene sentido cuando va controlada por un condicional que determina que si se cumple una condición, se interrumpe la ejecución del bucle. Por ejemplo: if (i==5) {break;}
Una posibilidad interesante es utilizar métodos para acceder a nodos del DOM y después recorrer dichos nodos con un bucle. Aquí mostramos un ejemplo donde además usamos arrays, el método length para conocer el número de elementos que forman un array y condicionales. Escribe el código y comprueba los resultados.
|
<!DOCTYPE html> <html> <head> <title>Ejemplo DOM - aprenderaprogramar.com</title> <meta charset="utf-8"> <style type="text/css"> body {background-color:white; font-family: sans-serif;} p {font-size: 24px; color: maroon; float: left; margin:10px; border: solid black; padding:10px;} .boton{padding:15px; width: 330px; text-align:center; clear:both; color: white; border-radius: 40px; background: rgb(202, 60, 60);} .boton:hover {background: rgb(66, 184, 221);} </style> <script type="text/javascript"> var izqda_dcha = true; function cambiarColores(elemento) { var color = ['#FF6633', '#FF9933', '#FFCC33', 'yellow']; var elementosObtenidos = document.getElementsByTagName(elemento); if (izqda_dcha == true) { for (var i=0; i<elementosObtenidos.length; i++) { elementosObtenidos[i].style.backgroundColor = color[i%4]; } } else { for (var j=elementosObtenidos.length-1; j>=0; j--) { elementosObtenidos[j].style.backgroundColor = color[(j+3)%4]; } } if (izqda_dcha == false) { izqda_dcha = true; } else { izqda_dcha = false; } } </script> </head> <body> <h1>Portal web aprenderaprogramar.com</h1> <h2>Didáctica y divulgación de la programación</h2> <div style="width:500px; float:left; margin-bottom:30px;"> <p>Manzana</p><p>Pera</p><p>Fresa</p><p>Ciruela</p> <p>Naranja</p><p>Kiwi</p><p>Pomelo</p><p>Melón</p> <p>Sandía</p><p>Mango</p><p>Papaya</p><p>Cereza</p> <p>Nectarina</p><p>Frambuesa</p></div> <h3 class="boton" onclick="cambiarColores('p')">Pulse aquí para cambiar colores</h3> </body> </html> |
El resultado esperado es que se muestren inicialmente las cajas con el texto de color blanco y que cuando pulsemos el botón cambien de color. Pulsando nuevamente el botón, los colores volverán a cambiar.
EJERCICIO
1) Crea una función que pida una palabra al usuario y usando un bucle for y el método charAt, muestre cada una de las letras que componen la entrada. Por ejemplo si se introduce “ave” debe mostrar:
Letra 1: a
Letra 2: v
Letra 3: e
2) Crea una función denominada mostrarContParrafos, que utilizando el acceso a los nodos del DOM de tipo párrafo, muestre el texto que contienen. Por ejemplo para el código de ejemplo visto anteriormente el resultado debería ser: Párrafo 1 contiene: manzana; Párrafo 2 contiene: pera. Párrafo 3 contiene: fresa. Párrafo 4 contiene … (etc., hasta que no haya más párrafos).
Puedes comprobar si tus respuestas son correctas consultando en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
