Algo de música
Disfruto mucho tocando la batería. Uno de mis bateristas favoritos es Neal Peart, que toca en la banda Rush. Mi álbum favorito de Rush es actualmente Moving Pictures.
';
+let solutionEntry = htmlSolution;
+
+reset.addEventListener("click", () => {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = htmlSolution;
@@ -628,7 +607,7 @@ reset.addEventListener("click", function () {
updateCode();
});
-solution.addEventListener("click", function () {
+solution.addEventListener("click", () => {
if (solution.value === "Mostrar solución") {
textarea.value = solutionEntry;
solution.value = "Ocultar solución";
@@ -639,17 +618,13 @@ solution.addEventListener("click", function () {
updateCode();
});
-var htmlSolution =
- 'Un poco de música
Realmente disfruto tocar la batería. Uno de mis bateristas favoritos es Neal Peart, que toca en la banda Rush. Mi álbum favorito de Rush actualmente es Fotografías de la película.
';
-var solutionEntry = htmlSolution;
-
textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);
-// captura la tecla de tabulación en el área de texto y en su lugar
-// hace que se escriba una tabulación en la posición del cursor
+// 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) {
+textarea.onkeydown = (e) => {
if (e.keyCode === 9) {
e.preventDefault();
insertAtCaret("\t");
@@ -661,27 +636,26 @@ textarea.onkeydown = function (e) {
};
function insertAtCaret(text) {
- var scrollPos = textarea.scrollTop;
- var caretPos = textarea.selectionStart;
+ const scrollPos = textarea.scrollTop;
+ let caretPos = textarea.selectionStart;
- var front = textarea.value.substring(0, caretPos);
- var back = textarea.value.substring(
+ 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;
}
-// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
-
-textarea.onkeyup = function () {
+// Actualizar el userCode guardado cada vez que el usuario actualice el código de área de texto
+textarea.onkeyup = () => {
// Solo queremos guardar el estado cuando se muestra el código de usuario,
- // no es la solución, por lo que la solución no se guarda sobre el código del 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 {
@@ -692,78 +666,99 @@ textarea.onkeyup = function () {
};
```
-{{ EmbedLiveSample('Código_reproducible_3', 700, 600, "", "", "hide-codepen-jsfiddle") }}
+{{ EmbedLiveSample('Active_learning_Adding_some_features_to_an_HTML_document', 700, 500) }}
-### Los espacios en blanco en HTML
+### Espacios en blanco en HTML
-En los ejemplos anteriores se han incluido espacios en blanco y saltos de línea en el código. Esto realmente no es necesario. Los dos siguientes fragmentos de código son equivalentes:
+En los ejemplos anteriores, es posible que hayas notado que se incluyen muchos espacios en blanco en el código. Este paso es opcional. Estos dos fragmentos de código son equivalentes:
-```html
-Los perros son tontos.
+```html-nolint +Los perros son tontos.
-Los perros son tontos.
+Los perros + son + tontos.
``` -No importa cuántos espacios en blanco se utilicen (incluye tanto caracteres de espacio como saltos de línea) el intérprete de HTML reduce cada secuencia de espacio en blanco a un único espacio al interpretar el código. Entonces, ¿por qué utilizar espacios en blanco? La respuesta está en la legibilidad. +No importa cuánto espacio en blanco utilice dentro del contenido del elemento HTML (que puede incluir uno o más caracteres de espacio, o también saltos de línea), el analizador HTML reduce cada secuencia de espacio en blanco a un solo espacio al representar el código. Entonces, ¿por qué usar tanto espacio en blanco? La respuesta es la legibilidad. -Es más fácil comprender lo que está sucediendo en tu código si lo tienes bien formateado. En nuestro HTML cada elemento anidado está sangrado dos espacios más con respecto al exterior. Depende de ti qué estilo de formato utilizas (cuántos espacios para cada nivel de sangría, por ejemplo) pero debes plantearte el uso de algún tipo de formato. +Puede ser más fácil entender lo que está pasando en tu código si lo tienes bien formateado. En nuestro HTML tenemos cada elemento anidado indentado por dos espacios más que el que está dentro. Depende de usted elegir el estilo de formato (cuántos espacios para cada nivel de indentación, por ejemplo), pero debe considerar formatearlo. -## Referencias a entidades: Inclusión de caracteres especiales en HTML +Echemos un vistazo a cómo el navegador representa los dos párrafos anteriores con y sin espacios en blanco: -En HTML, los caracteres `<`, `>`,`"`,`'` y `&` son caracteres especiales. Forman parte de la sintaxis HTML. Entonces, ¿cómo incluye uno de estos caracteres especiales en tu texto? Por ejemplo, si deseas utilizar un signo comercial o menor que, y no hacer que se interprete como código. +{{ EmbedLiveSample('Whitespace_in_HTML', 700, 100) }} -Haces esto con referencias de caracteres. Estos son códigos especiales que representan caracteres, para ser usados en estas circunstancias exactas. Cada referencia de caracter comienza con un signo de ampersand (&) y finaliza con un punto y coma (;). +> **Nota:** El acceso a [innerHTML](/es/docs/Web/API/Element/innerHTML) de los elementos de JavaScript mantendrá intacto todo el espacio en blanco. +> Esto puede arrojar resultados inesperados si el navegador recorta el espacio en blanco. -| Caracter literal | Equivalente de referencia de caracteres | -| ---------------- | --------------------------------------- | -| < | \< | -| > | \> | -| " | \" | -| ' | \' | -| & | \& | +```js +const noWhitespace = document.getElementById("noWhitespace").innerHTML; +console.log(noWhitespace); +// "Los perros son tontos". -El equivalente de referencia de caracter podría recordarse fácilmente porque el texto que utiliza se puede ver como menor que para '\<' , cita para ' \" ' y de manera similar para otros. Para obtener más información sobre la referencia de entidad, consulta [Anexo:Referencias a entidades de caracteres XML y HTML](https://es.wikipedia.org/wiki/Anexo:Referencias_a_entidades_de_caracteres_XML_y_HTML) en (Wikipedia). +const whitespace = document.getElementById("whitespace").innerHTML; +console.log(whitespace); +// "Los perros +// son +// tontos." +``` -Considera los dos siguientes párrafos: +## Referencias de entidades: Incluir caracteres especiales en HTML -```html -En HTML, defines un párrafo con el elemento
-.
+En HTML, los caracteres `<`, `>`, `"`, `'` y `&` son caracteres especiales. Son partes de la sintaxis HTML en sí. Entonces, ¿cómo incluyes uno de estos caracteres especiales en tu texto? Por ejemplo, si desea usar un signo ampersand (&) o menor que, y no interpretarlo como código. + +Haces esto con referencias de caracteres. Estos son códigos especiales que representan caracteres, para ser utilizados en estas circunstancias exactas. Cada referencia de carácter comienza con un ampersand (&) y termina con un punto y coma (;). + +| Carácter literal | Referencia de carácter equivalente | +| ---------------- | ---------------------------------- | +| < | `<` | +| > | `>` | +| " | `"` | +| ' | `'` | +| & | `&` | -En HTML, defines un párrafo con el elemento <p>.
+El equivalente de referencia de carácter podría recordarse fácilmente porque el texto que utiliza puede verse como _menor que (less than, en inglés)_ para '\<', _comilla (quot, en inglés)_ para '\"' y de manera similar para otros. Para obtener más información sobre las referencias de entidades, consulta [Lista de referencias de entidades de caracteres XML y HTML](https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references) (Wikipedia). + +En el siguiente ejemplo, hay dos párrafos: + +```html-nolint +En HTML, se define un párrafo utilizando el elemento
.
+ +En HTML, se define un párrafo utilizando el elemento <p>.
``` -En la salida en vivo de abajo, puedes ver que el primer párrafo salió mal. El navegador interpreta la segunda instancia de `` como el inicio de un nuevo párrafo. El segundo párrafo se ve bien porque hemos remplazado `<` y `>` por sus referencias correspondientes. +En la salida en vivo a continuación, puede ver que el primer párrafo ha salido mal. El navegador interpreta la segunda instancia de `
` como comenzar un nuevo párrafo. El segundo párrafo se ve bien porque tiene corchetes angulares con referencias de caracteres. -{{ EmbedLiveSample('Referencias_a_entidades_Inclusión_de_caracteres_especiales_en_HTML', 700, 200) }} +{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "") }} -> **Nota:** En la Wikipedia se puede localizar un listado de todas las referencias de entidades de caracteres HTML disponibles: [Anexo:Referencias a entidades de caracteres XML y HTML](https://es.wikipedia.org/wiki/Anexo:Referencias_a_entidades_de_caracteres_XML_y_HTML). Observa que no necesitas usar ninguna referencia de entidad más para ningún otro de estos símbolos porque los navegadores modernos gestionan estos símbolos correctamente siempre y cuando en tu HTML hayas [establecido la codificación de el juego de caracteres universal UTF-8](/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_document's_character_encoding). +> **Nota:** No es necesario usar referencias de entidad para ningún otro símbolo, ya que los navegadores modernos manejarán bien los símbolos reales siempre que la [codificación de caracteres de tu HTML esté configurada en UTF-8](/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_documents_character_encoding). -## Comentarios HTML +## Comentarios en HTML -En HTML hay un mecanismo para escribir comentarios en el código. Los comentarios son ignorados por el navegador y, por tanto, son invisibles para el usuario. El propósito de los comentarios es permitirte incluir notas en el código para explicar tu lógica o codificación. Esto es muy útil si regresas a un código base después de estar ausente el tiempo suficiente como para no recordarlo por completo. Del mismo modo, los comentarios son invaluables ya que diferentes personas están realizando cambios y actualizaciones. +HTML tiene un mecanismo para escribir comentarios en el código. Los navegadores ignoran los comentarios, lo que hace que los comentarios sean invisibles para el usuario. El propósito de los comentarios es permitirle incluir notas en el código para explicar su lógica o codificación. Esto es muy útil si vuelve a una base de código después de estar ausente el tiempo suficiente para no recordarlo por completo. Del mismo modo, los comentarios son invaluables ya que diferentes personas están haciendo cambios y actualizaciones. -Para convertir en un comentario una sección de contenido de tu archivo HTML, debes delimitarlo con los marcadores especiales ``. Por ejemplo: +Para escribir un comentario en HTML, envuélvalo en los marcadores especiales ``. Por ejemplo: ```html -
No soy un comentario
+No estoy dentro de un comentario
- + ``` -Como puedes ver a continuación, el primer párrafo aparece, pero el segundo no. +Como puede ver a continuación, solo se muestra el primer párrafo en la salida en vivo. -{{ EmbedLiveSample('Comentarios_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }} +{{ EmbedLiveSample('HTML_comments', 700, 100, "", "") }} ## Resumen -Has llegado al final del artículo. Espero que hayas disfrutado del recorrido los conceptos básicos del HTML. -En este punto ya deberías entender el lenguaje, cómo funciona en un nivel básico y deberías poder escribir algunos elementos y atributos. También deberías poder escribir algunos elementos y atributos. Los artículos posteriores de este módulo profundizan en algunos de los temas aquí presentados, además de presentar otros conceptos del lenguaje. +¡Has llegado al final del artículo! Esperamos que hayas disfrutado de tu recorrido por los conceptos básicos de HTML. + +En este punto, debes entender cómo se ve HTML y cómo funciona a un nivel básico. También deberías poder escribir algunos elementos y atributos. Los artículos posteriores de este módulo profundizan en algunos de los temas introducidos aquí, así como en la presentación de otros conceptos del lenguaje. -> **Nota:** En este punto, a medida que empieces a aprender más sobre HTML, es posible que también desees comenzar a explorar los conceptos básicos de las Hojas de estilo en cascada (_Cascading style sheets_) o [CSS](/es/docs/Learn/CSS). CSS, es el lenguaje utilizado para estilizar páginas web. (por ejemplo, cambiar fuentes o colores, o alterar el diseño de la página) HTML y CSS funcionan bien juntos, como pronto descubrirás. +- A medida que comiences a aprender más sobre HTML, considera aprender los conceptos básicos de CSS (hojas de estilo en cascada). [CSS](/es/docs/Learn/CSS) es el lenguaje utilizado para dar estilo a las páginas web, como cambiar fuentes o colores o alterar el diseño de la página. HTML y CSS funcionan bien juntos, como pronto descubrirás. -## Ve también +## Vease también -- [Aplicación de color a elementos HTML mediante CSS](/es/docs/Web/HTML/Applying_color) +- [Aplicar color a elementos HTML usando CSS](/es/docs/Web/CSS/CSS_colors/Applying_color) {{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}} diff --git a/files/es/learn/javascript/building_blocks/looping_code/index.md b/files/es/learn/javascript/building_blocks/looping_code/index.md index 94a1e9e1c1cb04..2e25e6bb4869fb 100644 --- a/files/es/learn/javascript/building_blocks/looping_code/index.md +++ b/files/es/learn/javascript/building_blocks/looping_code/index.md @@ -1,499 +1,637 @@ --- -title: Bucles +title: Código de bucle slug: Learn/JavaScript/Building_blocks/Looping_code +l10n: + sourceCommit: e3faa375b0179de77a5eff00074e3d168a0a904c --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}} -Los lenguajes de programación son muy útiles para completar rápidamente tareas repetitivas, desde múltimples cálculos básicos hasta cualquier otra situación en donde tengas un montón de elementos de trabajo similares que completar. Aquí vamos a ver las estructuras de bucles disponibles en JavaScript que pueden manejar tales necesidades. +Los lenguajes de programación son muy útiles para completar rápidamente tareas repetitivas, desde múltiples cálculos básicos hasta casi cualquier otra situación en la que tenga que completar muchos elementos de trabajo similares. Aquí veremos las estructuras de bucle disponibles en JavaScript que manejan tales necesidades. -| Prerequisitos: | Conocimientos básicos de computación, entendimiento básico de HTML y CSS, [JavaScript first steps](/es/docs/Learn/JavaScript/First_steps). | -| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -| Objetivo: | Entender cómo usar bucles en JavaScript. | +| 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 ``, which we've selected using `var output = document.querySelector('.output');`. In comments, we've provided you with three code lines that need to be used somewhere inside the loop:
+- Bucle de 10 a 0. Te hemos proporcionado un inicializador: `let i = 10;`.
+- Para cada iteración, cree un nuevo párrafo y añádalo a la salida `
`, que hemos seleccionado usando `const output = document.querySelector('.output');`.
+ En los comentarios, le proporcionamos tres líneas de código que deben usarse en algún lugar dentro del bucle:
- - `var para = document.createElement('p');` — creates a new paragraph.
- - `output.appendChild(para);` — appends the paragraph to the output `
`.
- - `para.textContent =` — makes the text inside the paragraph equal to whatever you put on the right hand side, after the equals sign.
+ - `const para = document.createElement('p');`: crea un nuevo párrafo.
+ - `output.appendChild(para);`: añade el párrafo a la salida `
`.
+ - `para.textContent =`: hace que el texto dentro del párrafo sea igual a lo que pongas en el lado derecho, después del signo igual.
-- Different iteration numbers require different text to be put in the paragraph for that iteration (you'll need a conditional statement and multiple `para.textContent =` lines):
+- Los diferentes números de iteración requieren que se coloque un texto diferente en el párrafo para esa iteración (necesitarás una instrucción condicional y varias líneas de `para.textContent =`):
- - If the number is 10, print "Countdown 10" to the paragraph.
- - If the number is 0, print "Blast off!" to the paragraph.
- - For any other number, print just the number to the paragraph.
+ - Si el número es 10, imprima "Cuenta regresiva 10" en el párrafo.
+ - Si el número es 0, imprima "Blast off!" en el párrafo.
+ - Para cualquier otro número, imprime solo el número en el párrafo.
-- Remember to include an iterator! However, in this example we are counting down after each iteration, not up, so you **don't** want `i++` — how do you iterate downwards?
+- ¡Recuerda incluir un iterador! Sin embargo, en este ejemplo estamos contando hacia atrás después de cada iteración, no hacia arriba, por lo que **no** quieres `i++`: ¿cómo iteras hacia abajo?
-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.
+> **Nota:** Si comienza a escribir el bucle (por ejemplo, (while(i>=0)), es posible que el navegador se atasque porque aún no ha ingresado la condición final. Así que ten cuidado con esto. Puedes empezar a escribir tu código en un comentario para hacer frente a este problema y eliminar el comentario después de terminar.
-###### Active learning
+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
-).
-## Tracking and privacy
+## Rastreo y privacidad
-### Third-party cookies
+### Cookies de terceros
-Cookies have a domain associated to them. If this domain is the same as the domain of the page you are on, the cookies is said to be a _first-party cookie_. If the domain is different, it is said to be a _third-party cookie_. While first-party cookies are sent only to the server setting them, a web page may contain images or other components stored on servers in other domains (like ad banners). Cookies that are sent through these third-party components are called third-party cookies and are mainly used for advertising and tracking across the web. See for example the [types of cookies used by Google](https://www.google.com/policies/technologies/types/). Most browsers allow third-party cookies by default, but there are add-ons available to block them (for example, [Privacy Badger](https://addons.mozilla.org/en-US/firefox/addon/privacy-badger-firefox/) by the [EFF](https://www.eff.org/)).
+Las Cookies tienen un dominio asociado a ellas. Si este dominio es el mismo que el dominio de la página en la que el cliente se encuentra, se llama _cookie de origen_. Si el dominio es distinto, se denomina _cookie de terceros_. Si bien las cookies de origen se envían únicamente al servidor que las configura, una página web puede contener imágenes u otros componentes almacenados en servidores de otros dominios (como publicidad). Las cookies que se envían a través de estos componentes de terceros se utilizan principalmente para publicidad y seguimiento en la web. Por ejemplo, [los tipos de cookies utilizadas por Google](https://www.google.com/policies/technologies/types/).
-If you are not disclosing third-party cookies, consumer trust might get harmed if cookie use is discovered. A clear disclosure (such as in a privacy policy) tends to eliminate any negative effects of a cookie discovery. Some countries also have legislation about cookies. See for example Wikipedia's [cookie statement](https://wikimediafoundation.org/wiki/Cookie_statement).
+Un servidor de terceros puede crear un perfil del historial y los hábitos de navegación de un usuario basándose en las cookies que le envía el mismo navegador al acceder a varios sitios. Firefox, de forma predeterminada, bloquea las cookies de terceros que se sabe que contienen rastreadores. Las cookies de terceros (o simplemente las cookies de seguimiento) también pueden bloquearse mediante otras configuraciones o extensiones del navegador. El bloqueo de cookies puede provocar que algunos componentes de terceros (como los widgets de redes sociales) no funcionen según lo previsto.
-### Do-Not-Track
+Hay algunas funciones útiles disponibles para los desarrolladores que desean respetar la privacidad del usuario y minimizar el seguimiento de terceros:
-There are no legal or technological requirements for its use, but the {{HTTPHeader("DNT")}} header can be used to signal that a web application should disable either its tracking or cross-site user tracking of an individual user. See the {{HTTPHeader("DNT")}} header for more information.
+- Los servidores pueden (y deberían) configurar el atributo SameSite para especificar si se pueden enviar o no cookies de terceros.
+- Las cookies que tienen un estado de partición independiente (CHIPS) les permiten a los desarrolladores habilitar sus cookies en el almacenamiento particionado, con un contenedor de cookies separado por sitio de nivel superior. Esto permite que los usos válidos sin seguimiento de cookies de terceros sigan funcionando en navegadores que no permiten el uso de cookies para el seguimiento de terceros.
-### EU cookie directive
+## Regulaciones relacionadas a las cookies
-Requirements for cookies across the EU are defined in [Directive 2009/136/EC](http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32009L0136) of the European Parliament and came into effect on 25 May 2011. A directive is not a law by itself, but a requirement for EU member states to put laws in place that meet the requirements of the directive. The actual laws can differ from country to country.
+La legislación o normativa que cubre el uso de cookies incluye:
-In short the EU directive means that before somebody can store or retrieve any information from a computer, mobile phone or other device, the user must give informed consent to do so. Many websites have added banners since then to inform the user about the use of cookies.
+- El Reglamento General de Privacidad de Datos (RGPD) en la Unión Europea
+- La Directiva sobre la privacidad electrónica en la Unión Europea
+- Ley de Privacidad del Consumidor de California (CCPA)
-For more, see [this Wikipedia section](https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive) and consult state laws for the latest and most accurate information.
+Estas regulaciones tienen alcance global. Se aplican a cualquier sitio del internet al que accedan usuarios de estas jurisdicciones (la UE y California, con la salvedad de que la ley de California se aplica sólo a entidades con ingresos brutos superiores a 25 millones de dólares, entre otras cosas).
-### Zombie cookies and Evercookies
+Estas regulaciones incluyen requisitos tales como:
-A more radical approach to cookies are zombie cookies or "Evercookies" which are recreated after their deletion and are intentionally hard to delete forever. They are using the [Web storage API](/es/docs/Web/API/Web_Storage_API), Flash Local Shared Objects and other techniques to recreate themselves whenever the cookie's absence is detected.
+- Notificar a los usuarios que el sitio utiliza cookies.
+- Permitir a los usuarios escoger no recibir algunas o todas las cookies.
+- Permitir a los usuarios utilizar la mayor parte del servicio sin recibir cookies.
-- [Evercookie by Samy Kamkar](https://github.com/samyk/evercookie)
-- [Zombie cookies on Wikipedia](https://en.wikipedia.org/wiki/Zombie_cookie)
+Puede haber otras regulaciones que rijan el uso de cookies en tu ubicación. La carga de conocer y cumplir estas regulaciones recae sobre usted. Hay empresas que ofrecen un código de "banner de cookies" que le ayuda a cumplir con estas normativas.
-## See also
+## Otras formas de almacenar información en el navegador
+
+Otro enfoque para almacenar datos en el navegador es la [API de almacenamiento web](/es/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API). Las propiedades [window.sessionStorage](/es/docs/Web/API/Window/sessionStorage) y [window.localStorage](/es/docs/Web/API/Window/localStorage) corresponden a cookies de sesión y permanentes en duración, pero tienen límites de almacenamiento mayores que las cookies y nunca se envían a un servidor. Se pueden almacenar cantidades de datos más estructuradas y mayores utilizando la [API IndexedDB](/es/docs/Web/API/IndexedDB_API) o una biblioteca construida sobre ella.
+
+Existen algunas técnicas diseñadas para recrear las cookies después de eliminarlas. Se conocen como cookies "zombies". Estas técnicas violan los principios de privacidad y control del usuario, pueden violar las regulaciones de privacidad de datos y podrían exponer a un sitio web que las utilice a responsabilidad legal.
+
+## Véase También
- {{HTTPHeader("Set-Cookie")}}
- {{HTTPHeader("Cookie")}}
- {{domxref("Document.cookie")}}
- {{domxref("Navigator.cookieEnabled")}}
-- [Inspecting cookies using the Storage Inspector](/es/docs/Tools/Storage_Inspector)
+- [Inspeccionar cookies usando el Storage Inspector](/es/docs/Tools/Storage_Inspector)
- [Cookie specification: RFC 6265](https://tools.ietf.org/html/rfc6265)
- [Nicholas Zakas article on cookies](https://www.nczonline.net/blog/2009/05/05/http-cookies-explained/)
- [Nicholas Zakas article on cookies and security](https://www.nczonline.net/blog/2009/05/12/cookies-and-security/)
-- [HTTP cookie on Wikipedia](https://en.wikipedia.org/wiki/HTTP_cookie)
+- [HTTP cookies en Wikipedia]()
diff --git a/files/fr/glossary/accessible_name/index.md b/files/fr/glossary/accessible_name/index.md
new file mode 100644
index 00000000000000..6b344c14afc0a0
--- /dev/null
+++ b/files/fr/glossary/accessible_name/index.md
@@ -0,0 +1,33 @@
+---
+title: Nom accessible
+slug: Glossary/Accessible_name
+l10n:
+ sourceCommit: 1f7c54fce7dc72e99e3d22ece8958db1290a7062
+---
+
+{{GlossarySidebar}}
+
+Un **nom accessible** (accessible name en anglais) est le nom d'un élément d'interface utilisateur ; il s'agit du texte associé à un élément HTML qui fournit aux utilisateur·ice·s d'une technologie d'assistance une étiquette pour l'élément en question.
+
+Les noms accessibles indiquent l'objectif ou l'intention de l'élément. Cela aide les utilisateur·ice·s à comprendre à quoi sert l'élément et comment ils peuvent interagir avec lui. En général, les noms accessibles des éléments doivent être propres à une page. Cela permet aux utilisateur·ice·s de distinguer un élément des autres et d'identifier l'élément avec lequel ils veulent interagir.
+
+En fonction de l'élément et du balisage HTML, la valeur du nom accessible peut être dérivée du contenu visible (par exemple, le texte dans [``](/fr/docs/Web/HTML/Element/figcaption)) ou invisible (par exemple, l'attribut `aria-label` défini sur un élément), ou d'une combinaison des deux. La manière dont le nom accessible d'un élément est déterminé est basée sur [le calcul du nom accessible (en anglais)](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#name_calculation), qui est différent pour chaque élément.
+
+Il est préférable d'utiliser du texte visible comme noms accessibles. De nombreux éléments, notamment [``](/fr/docs/Web/HTML/Element/a), [``](/fr/docs/Web/HTML/Element/td) et [`
Live output
+```html oculto +Salida en vivo
-Editable code
+Código editable
- 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 -Live output
+```html oculto +Salida en vivo
-
-Admit:
-Refuse:
+Admitir:
+Rechazar:
Editable code
+Código editable
- 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")}} diff --git a/files/es/mdn/at_ten/index.md b/files/es/mdn/at_ten/index.md index 899ff8d447aa5a..006af4a4c68d3e 100644 --- a/files/es/mdn/at_ten/index.md +++ b/files/es/mdn/at_ten/index.md @@ -17,8 +17,6 @@ Por diez años, la comunidad MDN ha estado documentando la Web abierta. Desde la [Aprende más sobre contribuyendo](/es/docs/MDN_at_ten/Contributing_to_MDN) -{{TenthCampaignQuote}} - ## Subnav 1. [MDN en 10](/es/docs/MDN_at_ten/) diff --git a/files/es/mdn/writing_guidelines/page_structures/page_types/aria_page_template/index.md b/files/es/mdn/writing_guidelines/page_structures/page_types/aria_page_template/index.md new file mode 100644 index 00000000000000..f3b06671b9051a --- /dev/null +++ b/files/es/mdn/writing_guidelines/page_structures/page_types/aria_page_template/index.md @@ -0,0 +1,141 @@ +--- +title: "ARIA: Plantilla de página" +slug: MDN/Writing_guidelines/Page_structures/Page_types/ARIA_Page_Template +l10n: + sourceCommit: dad6b0e057cd37b4408cdede8b9f568c56df9a82 +--- + +{{MDNSidebar}} + +## Metadatos de la página + +### Title y slug + +Una página de rol de ARIA debe tener un `title` y un `slug` de `ARIA: Nombre del rol`. Por ejemplo, el [rol de botón](/es/docs/Web/Accessibility/ARIA/Roles/button_role) tiene un `title` y `slug` de `ARIA/NameOfTheRole_role` y el atributo [aria-labelledby](/es/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) tiene un `title` de `aria-labelledby`. + +### Principales macros + +Aparecen varias llamadas a macros en la parte superior de la sección de contenido. Debes actualizarlos o eliminarlos de acuerdo con los siguientes consejos: + +- \\{{deprecated_header}}: genera un banner de **Obsoleto** que indica que la tecnología está [obsoleta](/es/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#deprecated). Si no es así, puede eliminar la llamada de macro. +- \\{{ariaref}}: genera un menú lateral ARIA adecuado, dependiendo de las etiquetas que se incluyan en la página. + +### Etiquetas + +En las subpáginas de roles o atributos de ARIA, debes incluir las siguientes etiquetas (consulta la sección _Etiquetas_ en la parte inferior de la interfaz de usuario del editor): **ARIA**, **Reference**, **ARIA Role** o **ARIA Attribute**, _el nombre del Rol oo Atributo_ (por ejemplo **ARIA button** or **aria-labelledby**), **ARIA widget,** **Experimental** (si el atributo del rol es [experimental](/es/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)), y **Obsoleto** (si es [obsoleto](/es/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#deprecated)). + +### Especificaciones + +En el valor de la clave de metadatos `spec_urls`, actualice las URL para que apunten a los ID de url para las secciones correctas de las siguientes especificaciones: + +- [ARIA](https://w3c.github.io/aria/) +- [Prácticas de autoría de ARIA](https://w3c.github.io/aria-practices/) + +Recursos adicionales: + +- [Modelo de objetos de accesibilidad](https://wicg.github.io/aom/spec/) +- [ARIA en HTML](https://w3c.github.io/html-aria/) + +## Plantilla de página + +El párrafo de resumen comienza nombrando el rol o atributo y diciendo lo que hace. Idealmente, esto debería consistir en 1 o 2 oraciones cortas. Este contenido aparece como una sugerencia de herramienta en los enlaces a esta página, así que elabóralo bien. + +```html + +``` + +(Opcional) Incluya una breve descripción del ejemplo anterior. + +## Descripción + +Incluya una descripción completa del atributo o rol. + +### Roles, estados y propiedades de ARIA asociados + +- Nombre de los roles asociados + - : Explicación de requerimientos, enlace a páginas de características. +- Nombre de los atributos asociados + - : Explicación del requisito, enlace a las páginas del atributo, junto con el enlace a JS requerido para cambiar el valor, si corresponde. + +### Interacciones con el teclado + +### Funciones de JavaScript requeridas + +- Manejadores de eventos requeridos + - : Explicación de cada uno +- Cambio de valores de atributos + - : Explicación de cada uno + +> **Nota:** Incluye una nota sobre alternativas semánticas al uso de este rol o atributo. La primera regla de uso de ARIA es que puedes usar una función nativa con la semántica y el comportamiento que requieres ya incorporados, en lugar de reutilizar un elemento y **agregar** un rol, estado o propiedad de ARIA para hacerlo accesible, y luego hacerlo. Luego publique todos los detalles en la sección de mejores prácticas a continuación. + +## Ejemplos + +Tenga en cuenta que usamos el plural "Ejemplos" incluso si la página solo contiene un ejemplo. + +### Un encabezado descriptivo + +Cada ejemplo debe tener un encabezado H3 (`###`) que nombre el ejemplo. El encabezado debe ser descriptivo de lo que está haciendo el ejemplo. Por ejemplo, "Un ejemplo simple" no dice nada sobre el ejemplo y, por lo tanto, no es un buen encabezado. El encabezado debe ser conciso. Para una descripción más larga, use el párrafo después del encabezado. + +Consulta nuestra guía sobre cómo añadir [ejemplos de código](/es/docs/MDN/Writing_guidelines/Page_structures/Code_examples) para obtener más información. + +> **Nota:** A veces querrás enlazar a ejemplos dados en otra página. +> +> **Escenario 1:** Si tiene algunos ejemplos en esta página y algunos ejemplos más en otra página: +> +> Incluya un encabezado H3 (`###`) para cada ejemplo en esta página y luego un encabezado H3 final (`###`) con el texto "Más ejemplos", bajo el cual puede vincular los ejemplos en otras páginas. Por ejemplo: +> +> ```md +> ## Ejemplos +> +> ### Uso de la API fetch +> +> Ejemplo de Fetch +> +> ### Más ejemplos +> +> Enlaces a más ejemplos en otras páginas +> ``` +> +> **Escenario 2:** Si _solo_ tienes ejemplos en otra página y ninguno en esta página: +> +> No añada ningún encabezado H3; solo añada los enlaces directamente debajo del encabezado H2 "Ejemplos". Por ejemplo: +> +> ```md +> ## Ejemplos +> +> Para ver ejemplos de esta API, consulte [la página en fetch()](https://example.org). +> ``` + +## Problemas de accesibilidad + +Opcionalmente, advierte sobre cualquier posible problema de accesibilidad que exista con el uso de esta propiedad y cómo solucionarlos. Elimine esta sección si no hay ninguna para enumerar. + +## Mejores prácticas + +Opcionalmente, enumere las mejores prácticas que existen para este rol. Elimine la sección si no existe. + +### Beneficios añadidos + +- Rol asociado + - : Si ese rol es un padre, hijo o hermano requerido, y lo que hace. + +Cualquier beneficio adicional que esta función tenga para los usuarios no típicos de lectores de pantalla, como el reconocimiento de voz de Google o móvil. + +## Especificaciones + +`\{{Specifications}}` + +_Recuerde eliminar las comillas invertidas y la barra invertida para usar esta macro._ + +## Orden de precedencia + +¿Cuáles son las propiedades relacionadas y en qué orden se leerá este atributo o propiedad (qué propiedad tendrá prioridad sobre esta y qué propiedad se sobrescribirá)? + +## Compatibilidad con lectores de pantalla + +## Vease también + +Incluya enlaces a páginas de referencia y guías relacionadas con el rol o atributo actual. Para obtener más pautas, consulta la [sección Véase también](/es/docs/MDN/Writing_guidelines/Writing_style_guide#see_also_section) en la _Guía de estilo_. + +- link1 +- link2 diff --git a/files/es/web/http/cookies/index.md b/files/es/web/http/cookies/index.md index 725db3a168c550..81513b3606a4e9 100644 --- a/files/es/web/http/cookies/index.md +++ b/files/es/web/http/cookies/index.md @@ -181,41 +181,51 @@ Se presentan aquí algunas técnicas que se deberían usar para evitar que estas - Las cookies empleadas en acciones delicadas deberían de tener una vida útil breve. - Para más prevención visita [OWASP CSRF prevention cheat sheet](