| Prerrequisitos: | ++ Conocimientos básicos de informática, una comprensión básica de HTML y CSS, + Primeros pasos de JavaScript . + | +
|---|---|
| Objetivo: | +Comprender cómo usar bucles en JavaScript. | +
Resultado:
``` -Here's the output: - -```html hidden - - - - -Output:
- - - - +btn.addEventListener("click", () => { + para.textContent = "Resultado: "; + const num = input.value; + input.value = ""; + input.focus(); + for (let i = 1; i <= num; i++) { + let sqRoot = Math.sqrt(i); + if (Math.floor(sqRoot) !== sqRoot) { + continue; + } + para.textContent += `${i} `; + } +}); ``` -{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }} +Este es el resultado: -1. In this case, the input should be a number (`num`). The `for` loop is given a counter starting at 1 (as we are not interested in 0 in this case), an exit condition that says the loop will stop when the counter becomes bigger than the input `num`, and an iterator that adds 1 to the counter each time. -2. Inside the loop, we find the square root of each number using [Math.sqrt(i)](/es/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt), then check whether the square root is an integer by testing whether it is the same as itself when it has been rounded down to the nearest integer (this is what [Math.floor()](/es/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) does to the number it is passed). -3. If the square root and the rounded down square root do not equal one another (`!==`), it means that the square root is not an integer, so we are not interested in it. In such a case, we use the `continue` statement to skip on to the next loop iteration without recording the number anywhere. -4. If the square root IS an integer, we skip past the if block entirely so the `continue` statement is not executed; instead, we concatenate the current `i` value plus a space on to the end of the paragraph content. +{{ EmbedLiveSample('omitir_iteraciones_con_continue', '100%', 100) }} -> **Nota:** You can view the [full source code on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html) too (also [see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)). +1. En este caso, la entrada debe ser un número (`num`). Al bucle `for` se le da un contador que comienza en 1 (ya que no estamos interesados en 0 en este caso), una condición de salida que dice que el bucle se detendrá cuando el contador se vuelva más grande que la entrada `num`, y un iterador que suma 1 al contador cada vez. +2. Dentro del bucle, encontramos la raíz cuadrada de cada número usando [Math.sqrt(i)](/es/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt), luego verificamos si la raíz cuadrada es un entero probando si es igual a sí misma cuando se ha redondeado al entero más cercano (esto es lo que [Math.floor()](/es/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) hace al número que se pasa). +3. Si la raíz cuadrada y la raíz cuadrada redondeada hacia abajo no son iguales entre sí (`!==`), significa que la raíz cuadrada no es un número entero, por lo que no nos interesa. En tal caso, usamos la instrucción `continue` para saltar a la siguiente iteración de bucle sin registrar el número en ninguna parte. +4. Si la raíz cuadrada es un número entero, omitimos por completo el bloque `if`, por lo que no se ejecuta la instrucción `continue`; en su lugar, concatenamos el valor `i` actual más un espacio al final del contenido del párrafo. -## while and do ... while +> **Nota:** También puedes ver el [código fuente completo en GitHub](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/integer-squares.html) (también [verlo en vivo](https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)). -`for` is not the only type of loop available in JavaScript. There are actually many others and, while you don't need to understand all of these now, it is worth having a look at the structure of a couple of others so that you can recognize the same features at work in a slightly different way. +## while y do...while -First, let's have a look at the [while](/es/docs/Web/JavaScript/Reference/Statements/while) loop. This loop's syntax looks like so: +`for` no es el único tipo de bucle disponible en JavaScript. En realidad, hay muchos otros y, aunque no es necesario que entiendas todos estos ahora, vale la pena echar un vistazo a la estructura de un par de otros para que puedas reconocer las mismas características en el trabajo de una manera ligeramente diferente. -``` -initializer -while (exit-condition) { - // code to run +Primero, echemos un vistazo al bucle [while](/es/docs/Web/JavaScript/Reference/Statements/while). La sintaxis de este bucle se ve así: - final-expression +```js-nolint +inicializador +while(condición) { + // código a ejecutar + + expresión-final } ``` -This works in a very similar way to the for loop, except that the initializer variable is set before the loop, and the final-expression is included inside the loop after the code to run — rather than these two items being included inside the parentheses. The exit-condition is included inside the parentheses, which are preceded by the `while` keyword rather than `for`. +Esto funciona de una manera muy similar al bucle `for`, excepto que la variable inicializadora se establece antes del bucle, y la expresión final se incluye dentro del bucle después del código a ejecutar, en lugar de que estos dos elementos se incluyan dentro de los paréntesis. +La condición se incluye dentro de los paréntesis, que están precedidos por la palabra clave `while` en lugar de `for`. -The same three items are still present, and they are still defined in the same order as they are in the for loop — this makes sense, as you still have to have an initializer defined before you can check whether it has reached the exit-condition; the final-condition is then run after the code inside the loop has run (an iteration has been completed), which will only happen if the exit-condition has still not been reached. +Los mismos tres elementos todavía están presentes, y todavía están definidos en el mismo orden en que están en el bucle for. +Esto se debe a que debe tener un inicializador definido antes de poder verificar si la condición es verdadera o no. +La expresión final se ejecuta después de que se haya ejecutado el código dentro del bucle (se ha completado una iteración), lo que solo ocurrirá si la condición sigue siendo cierta. -Let's have a look again at our cats list example, but rewritten to use a while loop: +Echemos un vistazo de nuevo a nuestro ejemplo de lista de gatos, pero reescrito para usar un bucle while: ```js -var i = 0; +const cats = ["Pete", "Biggles", "Jasmine"]; + +let myFavoriteCats = "Mis gatos se llaman "; + +let i = 0; while (i < cats.length) { if (i === cats.length - 1) { - info += "and " + cats[i] + "."; + myFavoriteCats += `y ${cats[i]}.`; } else { - info += cats[i] + ", "; + myFavoriteCats += `${cats[i]}, `; } i++; } + +console.log(myFavoriteCats); // "Mis gatos se llaman Pete, Biggles y Jasmine." ``` -> **Nota:** This still works just the same as expected — have a look at it [running live on GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) (also view the [full source code](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html)). +> **Nota:** Esto sigue funcionando exactamente como se esperaba: échale un vistazo al [código fuente completo](https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) (también puedes ver el [código fuente completo](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/while.html)). -The [do...while](/es/docs/Web/JavaScript/Reference/Statements/do...while) loop is very similar, but provides a variation on the while structure: +El bucle [do...while](/es/docs/Web/JavaScript/Reference/Statements/do...while) es muy similar, pero proporciona una variación en la estructura while: -``` -initializer +```js-nolint +inicializador do { - // code to run + // código a ejecutar - final-expression -} while (exit-condition) + expresión-final +} while (condición) ``` -In this case, the initializer again comes first, before the loop starts. The `do` keyword directly precedes the curly braces containing the code to run and the final-expression. +En este caso, el inicializador vuelve a aparecer primero, antes de que comience el bucle. La palabra clave precede directamente a las llaves que contienen el código a ejecutar y la expresión final. -The differentiator here is that the exit-condition comes after everything else, wrapped in parentheses and preceded by a `while` keyword. In a `do...while` loop, the code inside the curly braces is always run once before the check is made to see if it should be executed again (in while and for, the check comes first, so the code might never be executed). +La principal diferencia entre un bucle `do...while` y un bucle `while` es que _el código dentro de un bucle `do...while` siempre se ejecuta al menos una vez_. Esto se debe a que la condición viene después del código dentro del bucle. Así que siempre ejecutamos ese código, luego verificamos si necesitamos ejecutarlo de nuevo. En los bucles `while` y `for`, la comprobación es lo primero, por lo que es posible que el código nunca se ejecute. -Let's rewrite our cat listing example again to use a `do...while` loop: +Volvamos a escribir nuestro ejemplo de listado de gatos para usar un bucle de "do...while": ```js -var i = 0; +const cats = ["Pete", "Biggles", "Jasmine"]; + +let myFavoriteCats = "Mis gatos se llaman "; + +let i = 0; do { if (i === cats.length - 1) { - info += "and " + cats[i] + "."; + myFavoriteCats += `y ${cats[i]}.`; } else { - info += cats[i] + ", "; + myFavoriteCats += `${cats[i]}, `; } i++; } while (i < cats.length); + +console.log(myFavoriteCats); // "Mis gatos se llaman Pete, Biggles y Jasmine." ``` -> **Nota:** Again, this works just the same as expected — have a look at it [running live on GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) (also view the [full source code](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html)). +> **Nota:** De nuevo, esto funciona igual que lo esperado: échale un vistazo al [código fuente completo](https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) (también puedes ver el [código fuente completo](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/do-while.html)). -> **Advertencia:** **Important**: With while and do...while — as with all loops — you must make sure that the initializer is iterated so that it eventually reaches the exit condition. If not, the loop will go on forever, and either the browser will force it to stop, or it will crash. This is called an **infinite loop**. +> **Advertencia:** Con while y do...while, como con todos los bucles, debe asegurarse de que el inicializador se incremente o, según el caso, se disminuya, para que la condición finalmente se vuelva falsa. +> Si no, el bucle continuará para siempre y el navegador lo obligará a detenerse o se bloqueará. Esto se llama un **bucle infinito**. -## Active learning: Launch countdown! +## Aprendizaje activo: iniciar cuenta regresiva -In this exercise, we want you to print out a simple launch countdown to the output box, from 10 down to Blast off. Specifically, we want you to: +En este ejercicio, queremos que imprima una cuenta regresiva de lanzamiento simple para la caja de salida, desde 10 hasta Blastoff. +En concreto, queremos: -- Loop from 10 down to 0. We've provided you with an initializer — `var i = 10;`. -- For each iteration, create a new paragraph and append it to the output `- Press Esc to move focus away from the code area (Tab inserts a tab character). + Pulse Esc para alejar el foco del área de código (Tab inserta un carácter de + tabulación).
``` -```css hidden +```css html { font-family: sans-serif; } @@ -516,11 +654,11 @@ body { ``` ```js hidden -var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var solution = document.getElementById("solution"); -var code = textarea.value; -var userEntry = textarea.value; +const textarea = document.getElementById("code"); +const reset = document.getElementById("reset"); +const solution = document.getElementById("solution"); +let code = textarea.value; +let userEntry = textarea.value; function updateCode() { eval(textarea.value); @@ -530,30 +668,48 @@ reset.addEventListener("click", function () { textarea.value = code; userEntry = textarea.value; solutionEntry = jsSolution; - solution.value = "Show solution"; + solution.value = "Mostrar solución"; updateCode(); }); solution.addEventListener("click", function () { - if (solution.value === "Show solution") { + if (solution.value === "Mostrar solución") { textarea.value = solutionEntry; - solution.value = "Hide solution"; + solution.value = "Ocultar solución"; } else { textarea.value = userEntry; - solution.value = "Show solution"; + solution.value = "Mostrar solución"; } updateCode(); }); -var jsSolution = - "var output = document.querySelector('.output');\noutput.innerHTML = '';\n\nvar i = 10;\n\nwhile(i >= 0) {\n var para = document.createElement('p');\n if(i === 10) {\n para.textContent = 'Countdown ' + i;\n } else if(i === 0) {\n para.textContent = 'Blast off!';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}"; -var solutionEntry = jsSolution; +let jsSolution = `const output = document.querySelector('.output'); +output.innerHTML = ''; + +let i = 10; + +while (i >= 0) { + const para = document.createElement('p'); + if (i === 10) { + paragraphtextContent = \`Cuenta atrás \${i}\`; + } else if (i === 0) { + para.textContent = 'Blast off!'; + } else { + para.textContent = i; + } + + output.appendChild(para); + + i--; +}`; + +let solutionEntry = jsSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead +// detener la tabulación de la tecla tabulación fuera del área de texto y +// hacer que escriba una tabulación en la posición del cursor en su lugar textarea.onkeydown = function (e) { if (e.keyCode === 9) { @@ -567,28 +723,28 @@ textarea.onkeydown = function (e) { }; function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = textarea.value.substring(0, caretPos); - var back = textarea.value.substring( + const scrollPos = textarea.scrollTop; + let caretPos = textarea.selectionStart; + const front = textarea.value.substring(0, caretPos); + const back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); + textarea.value = front + text + back; - caretPos = caretPos + text.length; + caretPos += text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; } -// Update the saved userCode every time the user updates the text area code +// Actualizar el userCode guardado cada vez que el usuario actualice el código de área de texto -textarea.onkeyup = function () { - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if (solution.value === "Show solution") { +textarea.onkeyup = () => { + // Solo queremos guardar el estado cuando se muestra el código de usuario, + // no la solución, para que la solución no se guarde sobre el código de usuario + if (solution.value === "Mostrar solución") { userEntry = textarea.value; } else { solutionEntry = textarea.value; @@ -598,50 +754,53 @@ textarea.onkeyup = function () { }; ``` -{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }} +{{ EmbedLiveSample('aprendizaje_activo_iniciar_cuenta_regresiva', '100%', 900) }} -## Active learning: Filling in a guest list +## Aprendizaje activo: rellenar una lista de invitados -In this exercise, we want you to take a list of names stored in an array, and put them into a guest list. But it's not quite that easy — we don't want to let Phil and Lola in because they are greedy and rude, and always eat all the food! We have two lists, one for guests to admit, and one for guests to refuse. +En este ejercicio, queremos que tomes una lista de nombres almacenados en un arreglo y los pongas en una lista de invitados. Pero no es tan fácil: ¡no queremos dejar entrar a Phil y Lola porque son codiciosos y groseros, y siempre comen toda la comida! Tenemos dos listas, una para que los huéspedes la admitan y otra para que los huéspedes la rechacen. -Specifically, we want you to: +En concreto, queremos: -- Write a loop that will iterate from 0 to the length of the `people` array. You'll need to start with an initializer of `var i = 0;`, but what exit condition do you need? -- During each loop iteration, check if the current array item is equal to "Phil" or "Lola" using a conditional statement: +- Escribe un bucle que itere a través del arreglo `people`. +- Durante cada iteración de bucle, compruebe si el elemento del arreglo actual es igual a "Phil" o "Lola" utilizando una instrucción condicional: - - If it is, concatenate the array item to the end of the `refused` paragraph's `textContent`, followed by a comma and a space. - - If it isn't, concatenate the array item to the end of the `admitted` paragraph's `textContent`, followed by a comma and a space. + - Si es así, concatene el elemento del arreglo al final de `textContent` del párrafo `refused`, seguido de una coma y un espacio. + - Si no es así, concatene el elemento del arreglo hasta el final del `textContent` del párrafo `admitted`, seguido de una coma y un espacio. -We've already provided you with: +Ya te hemos proporcionado: -- `var i = 0;` — Your initializer. -- `refused.textContent +=` — the beginnings of a line that will concatenate something on to the end of `refused.textContent`. -- `admitted.textContent +=` — the beginnings of a line that will concatenate something on to the end of `admitted.textContent`. +- `refused.textContent +=`: los inicios de una línea que concatenará algo al final de `refused.textContent`. +- `admitted.textContent +=`; los inicios de una línea que concatenará algo al final de `admitted.textContent`. -Extra bonus question — after completing the above tasks successfully, you will be left with two lists of names, separated by commas, but they will be untidy — there will be a comma at the end of each one. Can you work out how to write lines that slice the last comma off in each case, and add a full stop to the end? Have a look at the [Useful string methods](/es/docs/Learn/JavaScript/First_steps/Useful_string_methods) article for help. +Pregunta de bonificación adicional: después de completar las tareas anteriores con éxito, te quedarán dos listas de nombres, separadas por comas, pero estarán desordenadas: habrá una coma al final de cada una. +¿Puedes averiguar cómo escribir líneas que corten la última coma en cada caso y añadir un punto al final? +Consulta el artículo [Métodos de cadenas útiles](/es/docs/Learn/JavaScript/First_steps/Useful_string_methods) para obtener ayuda. -If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution. +Si comete un error, siempre puede restablecer el ejemplo con el botón "Restablecer". +Si te quedas realmente atascado, pulsa "Mostrar solución" para ver una solución. -```html hidden -Admit:
-Refuse:
+Admitir:
+Rechazar:
- Press Esc to move focus away from the code area (Tab inserts a tab character). + Pulse Esc para alejar el foco del área de código (Tab inserta un carácter de + tabulación).
``` @@ -677,11 +836,11 @@ body { ``` ```js hidden -var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var solution = document.getElementById("solution"); -var code = textarea.value; -var userEntry = textarea.value; +const textarea = document.getElementById("code"); +const reset = document.getElementById("reset"); +const solution = document.getElementById("solution"); +let code = textarea.value; +let userEntry = textarea.value; function updateCode() { eval(textarea.value); @@ -691,30 +850,48 @@ reset.addEventListener("click", function () { textarea.value = code; userEntry = textarea.value; solutionEntry = jsSolution; - solution.value = "Show solution"; + solution.value = "Mostrar solución"; updateCode(); }); solution.addEventListener("click", function () { - if (solution.value === "Show solution") { + if (solution.value === "Mostrar solución") { textarea.value = solutionEntry; - solution.value = "Hide solution"; + solution.value = "Ocultar solución"; } else { textarea.value = userEntry; - solution.value = "Show solution"; + solution.value = "Mostrar solución"; } updateCode(); }); -var jsSolution = - "var people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];\n\nvar admitted = document.querySelector('.admitted');\nvar refused = document.querySelector('.refused');\n\nadmitted.textContent = 'Admit: ';\nrefused.textContent = 'Refuse: '\nvar i = 0;\n\ndo {\n if(people[i] === 'Phil' || people[i] === 'Lola') {\n refused.textContent += people[i] + ', ';\n } else {\n admitted.textContent += people[i] + ', ';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + '.';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + '.';"; -var solutionEntry = jsSolution; +const jsSolution = ` +const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce']; + +const admitted = document.querySelector('.admitted'); +const refused = document.querySelector('.refused'); + +admitted.textContent = 'Admitir: '; +refused.textContent = 'Rechazar: '; + +for (const person of people) { + if (person === 'Phil' || person === 'Lola') { + refused.textContent += \`\${person}, \`; + } else { + admitted.textContent += \`\${person}, \`; + } +} + +refused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + '.'; +admitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + '.';`; + +let solutionEntry = jsSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead +// detener la tabulación de la tecla tabulación fuera del área de texto y +// hacer que escriba una tabulación en la posición del cursor en su lugar textarea.onkeydown = function (e) { if (e.keyCode === 9) { @@ -728,28 +905,28 @@ textarea.onkeydown = function (e) { }; function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = textarea.value.substring(0, caretPos); - var back = textarea.value.substring( + const scrollPos = textarea.scrollTop; + let caretPos = textarea.selectionStart; + const front = textarea.value.substring(0, caretPos); + const back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); + textarea.value = front + text + back; - caretPos = caretPos + text.length; + caretPos += text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; } -// Update the saved userCode every time the user updates the text area code +// Actualizar el userCode guardado cada vez que el usuario actualice el código de área de texto -textarea.onkeyup = function () { - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if (solution.value === "Show solution") { +textarea.onkeyup = () => { + // Solo queremos guardar el estado cuando se muestra el código de usuario, + // no la solución, para que la solución no se guarde sobre el código de usuario + if (solution.value === "Mostrar solución") { userEntry = textarea.value; } else { solutionEntry = textarea.value; @@ -759,58 +936,75 @@ textarea.onkeyup = function () { }; ``` -{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }} +{{ EmbedLiveSample('aprendizaje_activo_rellenar_una_lista_de_invitados', '100%', 680) }} + +## ¿Qué tipo de bucle debes usar? + +Si está iterando a través de un arreglo o algún otro objeto que lo admita, y no necesita acceder a la posición de índice de cada elemento, entonces `for...of` es la mejor opción. Es más fácil de leer y hay menos para equivocarse. -## Which loop type should you use? +Para otros usos, los bucles `for`, `while` y `do...while` son en gran medida intercambiables. +Todos se pueden usar para resolver los mismos problemas, y cuál uses dependerá en gran medida de tus preferencias personales: cuál te resulta más fácil de recordar o más intuitivo. +Recomendaríamos `for`, al menos para empezar, ya que es probablemente el más fácil para recordar todo: el inicializador, la condición y la expresión final tienen que ir perfectamente entre paréntesis, por lo que es fácil ver dónde están y comprobar que no te los estás perdiendo. -For basic uses, `for`, `while`, and `do...while` loops are largely interchangeable. They can all be used to solve the same problems, and which one you use will largely depend on your personal preference — which one you find easiest to remember or most intuitive. Let's have a look at them again. +Echémosles un vistazo a todos de nuevo. -First `for`: +Primero `for...of`: +```js-nolint +for (const elemento of arreglo) { + // código a ejecutar +} ``` -for (initializer; exit-condition; final-expression) { - // code to run + +`for`: + +```js-nolint +for (inicializador; condición; expresión-final) { + // código a ejecutar } ``` `while`: -``` -initializer -while (exit-condition) { - // code to run +```js-nolint +inicializador +while(condición) { + // código a ejecutar - final-expression + expresión-final } ``` -and finally `do...while`: +y finalmente `do...while`: -``` -initializer +```js-nolint +inicializador do { - // code to run + // código a ejecutar - final-expression -} while (exit-condition) + expresión-final +} while (condición) ``` -We would recommend `for`, at least to begin with, as it is probably the easiest for remembering everything — the initializer, exit-condition, and final-expression all have to go neatly into the parentheses, so it is easy to see where they are and check that you aren't missing them. +> **Nota:** También hay otros tipos/características de bucle, que son útiles en situaciones avanzadas/especializadas y más allá del alcance de este artículo. Si quieres ir más allá con tu aprendizaje en bucle, lee nuestra [Guía de bucles e iteraciones](/es/docs/Web/JavaScript/Guide/Loops_and_iteration) avanzada. + +## Pon a prueba tus habilidades -> **Nota:** There are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced [Loops and iteration guide](/es/docs/Web/JavaScript/Guide/Loops_and_iteration). +Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar algunas pruebas adicionales para verificar que has conservado esta información antes de continuar. Consulta [Pon a prueba tus habilidades: bucles](/es/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Loops). -## Conclusion +## Conclusión -This article has revealed to you the basic concepts behind, and different options available when, looping code in JavaScript. You should now be clear on why loops are a good mechanism for dealing with repetitive code, and be raring to use them in your own examples! +Este artículo te ha revelado los conceptos básicos que hay detrás y las diferentes opciones disponibles al hacer bucles de código en JavaScript. +¡Ahora deberías tener claro por qué los bucles son un buen mecanismo para lidiar con el código repetitivo y tener ganas de usarlos en tus propios ejemplos! -If there is anything you didn't understand, feel free to read through the article again, or [contact us](/es/Learn#Contact_us) to ask for help. +Si hay algo que no entendiste, vuelve a leer el artículo o [ponte en contacto con nosotros](/es/docs/Learn#contact_us) para pedir ayuda. -## See also +## Vease también -- [Loops and iteration in detail](/es/docs/Web/JavaScript/Guide/Loops_and_iteration) -- [for statement reference](/es/docs/Web/JavaScript/Reference/Statements/for) -- [while](/es/docs/Web/JavaScript/Reference/Statements/while) and [do...while](/es/docs/Web/JavaScript/Reference/Statements/do...while) references -- [break](/es/docs/Web/JavaScript/Reference/Statements/break) and [continue](/es/docs/Web/JavaScript/Reference/Statements/continue) references -- [What's the Best Way to Write a JavaScript For Loop?](https://www.impressivewebs.com/javascript-for-loop/) — some advanced loop best practices +- [Bucles e iteración en detalle](/es/docs/Web/JavaScript/Guide/Loops_and_iteration) +- [for...of referencia](/es/docs/Web/JavaScript/Reference/Statements/for...of) +- [Referencia de la declaración for](/es/docs/Web/JavaScript/Reference/Statements/for) +- Referencias de [while](/es/docs/Web/JavaScript/Reference/Statements/while) y [do...while](/es/docs/Web/JavaScript/Reference/Statements/do...while) +- Referencias de [break](/es/docs/Web/JavaScript/Reference/Statements/break) y [continue](/es/docs/Web/JavaScript/Reference/Statements/continue) {{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}