chore(i18n,learn): processed translations (#41454)
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
This commit is contained in:
camperbot
GitHub
@@ -9,7 +9,7 @@ dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
|
||||
|
||||
# --description--
|
||||
|
||||
Es probable que en otros desafíos hayas visto un atributo `alt` en una etiqueta `img`. El texto `alt` describe el contenido de la imagen y proporciona una descripción alternativa en formato de texto. Esto ayuda en casos en que la imagen no se carga o que el usuario no pueda verla. También es aprovechado por los motores de búsqueda para interpretar el contenido de la imagen e incluirlo en los resultados de búsqueda. Aquí hay un ejemplo:
|
||||
Probablemente hayas visto un atributo `alt` en una etiqueta `img` en otros desafíos. El atributo`alt` describe el contenido de la imagen y proporciona un texto alternativo. Un atributo `alt` ayuda en los casos en que la imagen no se carga o un usuario no pueda verla. Los motores de búsqueda también lo utilizan para comprender que contiene una imagen e incluirla en los resultados de búsqueda. Aquí hay un ejemplo:
|
||||
|
||||
`<img src="importantLogo.jpeg" alt="Company logo">`
|
||||
|
||||
|
||||
@@ -9,9 +9,9 @@ dashedName: give-links-meaning-by-using-descriptive-link-text
|
||||
|
||||
# --description--
|
||||
|
||||
Los lectores de pantalla tienen diferentes opciones según el tipo de contenido que lea el dispositivo del usuario. Esto incluye saltar a (o pasar por alto) elementos importantes, saltar al contenido principal u obtener un resumen de la página a partir de los títulos. Otra opción es escuchar la narración de los enlaces disponibles en una página.
|
||||
Los lectores de pantalla tienen varias opciones para qué tipo de contenido lee su dispositivo. Estas opciones incluyen saltar a elementos de referencia (o sobre) o saltar al contenido principal, u obtener un resumen de la página en los títulos. Otra opción es escuchar la narración de los enlaces disponibles en una página.
|
||||
|
||||
Los lectores de pantalla hacen esto leyendo el texto del enlace, o lo que haya entre las etiquetas anchor (`a`). Tener una lista de enlaces que solo digan "clic aquí" o "leer más" no ayuda. En lugar de eso, debes utilizar un texto breve pero descriptivo dentro de las etiquetas `a` para proporcionar más significado a estos usuarios.
|
||||
Los lectores de pantalla hacen esto leyendo el texto del enlace, o lo que haya entre las etiquetas anchor (`a`). Tener una lista de enlaces que solo digan "clic aquí" o "leer más" no ayuda. En su lugar, utilice texto breve pero descriptivo dentro de las etiquetas `a` para proporcionar más significado a estos usuarios.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: improve-chart-accessibility-with-the-figure-element
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 introdujo el elemento `figure` junto con el elemento relacionado `figcaption`. Cuando se usan juntos, estos elementos envuelven una representación visual (como puede ser una imagen, diagrama o gráfico) junto con su leyenda. Esto representa una mejora doble de accesibilidad, porque agrupa contenido semánticamente relacionado y además proporciona un texto alternativo que explica el contenido visual del elemento `figure`.
|
||||
HTML5 introdujo el elemento `figure` y el `figcaption` relacionado. Cuando se usan juntos, estos elementos envuelven una representación visual (como puede ser una imagen, diagrama o gráfico) junto con su leyenda. Envolviendo estos elementos da un impulso de accesibilidad doble al agrupar semánticamente el contenido relacionado y proporciona una alternativa de texto explicando la figura `figure`.
|
||||
|
||||
En visualizaciones de datos como gráficos, la leyenda o "figcaption" puede ser utilizada para resumir en formato de texto las tendencias o conclusiones, para beneficio de usuarios con discapacidades visuales. Otro de los desafíos se ocupa cómo mover fuera de la pantalla una versión en formato de tabla con los datos del gráfico (usando CSS) para ayudar a usuarios de lectores de pantalla.
|
||||
|
||||
|
||||
@@ -9,11 +9,11 @@ dashedName: improve-form-field-accessibility-with-the-label-element
|
||||
|
||||
# --description--
|
||||
|
||||
La mejora de la accesibilidad con el marcado HTML semántico se aplica tanto al uso de nombres de etiquetas apropiados como de atributos. Los próximos desafíos cubren algunos escenarios importantes utilizando atributos en formularios.
|
||||
La mejora de la accesibilidad con el marcado semántico HTML se aplica al uso de nombres de etiquetas y atributos apropiados. Los próximos desafíos cubren algunos escenarios importantes utilizando atributos en formularios.
|
||||
|
||||
La etiqueta `label` contiene el texto para un elemento específico de control de formulario, por lo general el nombre o etiqueta para una elección. Esto vincula el significado al elemento y hace que el formulario se lea mejor. El atributo `for` en una etiqueta `label` asocia de manera explícita dicho `label` con el control de formulario utilizado por los lectores de pantalla.
|
||||
|
||||
Ya aprendiste sobre botones de radio y sus etiquetas en una lección de la sección de HTML básico. En esa lección, colocamos el elemento de entrada del botón de radio dentro de la etiqueta `label` junto con la etiqueta del texto para hacer que el texto se pueda cliquear. También, se puede utilizar el atributo `for` como se explicó en esta lección.
|
||||
Ya aprendiste sobre botones de radio y sus etiquetas en una lección de la sección de HTML básico. En esa lección, colocamos el elemento de entrada del botón de radio dentro de la etiqueta `label` junto con la etiqueta del texto para hacer que el texto se pueda cliquear. Otra forma de lograr esto es usando el atributo `for`, como se explica en esta lección.
|
||||
|
||||
El valor del atributo `for` debe ser igual al valor del atributo `id` del formulario de control. Por ejemplo:
|
||||
|
||||
|
||||
@@ -9,9 +9,9 @@ dashedName: improve-readability-with-high-contrast-text
|
||||
|
||||
# --description--
|
||||
|
||||
El bajo contraste entre los colores de primer plano y de fondo puede dificultar la lectura del texto. El contraste suficiente mejora la legibilidad de tu contenido, pero ¿qué significa exactamente "suficiente"?
|
||||
El bajo contraste entre los colores de primer plano y de fondo puede dificultar la lectura del texto. Suficiente contraste mejora la legibilidad de tu contenido, pero ¿qué significa exactamente "suficiente"?
|
||||
|
||||
Las Directrices de Accesibilidad al Contenido Web (WCAG) recomiendan al menos una relación de contraste de 4.5 a 1 para el texto normal. La relación se calcula comparando los valores de luminancia relativa de dos colores. Esto equilibra entre 1:1 para el mismo color, o sin contraste, y 21:1 para el blanco contra el negro, el contraste más fuerte. Hay muchas herramientas de comprobación de contraste disponibles en línea que calculan esta relación por ti.
|
||||
Las Directrices de Accesibilidad al Contenido Web (WCAG) recomiendan al menos una relación de contraste de 4.5 a 1 para el texto normal. La relación se calcula comparando los valores de luminancia relativa de dos colores. Esto varía de 1:1 para el mismo color, o ningún contraste, a 21:1 para blanco contra negro, el contraste más sustancial. Hay muchas herramientas de comprobación de contraste disponibles en línea que calculan esta relación por ti.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,13 +9,13 @@ dashedName: jump-straight-to-the-content-using-the-main-element
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 introdujo una serie de nuevos elementos que ofrecen a los desarrolladores más opciones al tiempo que incorporan características de accesibilidad. Estas etiquetas incluyen `main`, `header`, `footer`, `nav`, `article`, y `section`, entre otros.
|
||||
HTML5 introdujo varios elementos nuevos que dan a los desarrolladores más opciones y al mismo tiempo incorporan características de accesibilidad. Estas etiquetas incluyen `main`, `header`, `footer`, `nav`, `article`, y `section`, entre otros.
|
||||
|
||||
De forma predeterminada, un navegador muestra estos elementos de forma similar al humilde `div`. Sin embargo, usarlos cuando sea apropiado le da un significado adicional a tu lenguaje de marcado. El nombre de la etiqueta solo puede indicar el tipo de información que contiene, lo que agrega significado semántico a ese contenido. Las tecnologías de asistencia pueden acceder a esta información para proporcionar mejores opciones de resumen de páginas o de navegación a sus usuarios.
|
||||
|
||||
El elemento `main` se usa para envolver (lo adivinaste) el contenido principal, y solo debe haber uno por página. Está destinado a rodear la información que está relacionada con el tema central de su página. No está destinado a incluir elementos que se repiten en todas las páginas, como enlaces de navegación o banners.
|
||||
El elemento `main` se usa para envolver (lo adivinaste) el contenido principal, y solo debe haber uno por página. Su propósito es rodear la información relacionada con el tema central de tu página. No está destinado a incluir elementos que se repiten en todas las páginas, como enlaces de navegación o banners.
|
||||
|
||||
La etiqueta `main` también tiene una característica de referencia insertada que la tecnología de asistencia puede usar para navegar rápidamente al contenido principal. Si alguna vez has visto un enlace de "Saltar al contenido principal" en la parte superior de la página, el uso de la etiqueta `main` proporciona automáticamente esa funcionalidad a los dispositivos de asistencia.
|
||||
La etiqueta `main` también tiene una característica de referencia incrustada que la tecnología de asistencia puede utilizar para navegar al contenido principal rápidamente. Si alguna vez has visto un enlace de "Saltar al contenido principal" en la parte superior de la página, el uso de la etiqueta `main` proporciona automáticamente esa funcionalidad a los dispositivos de asistencia.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,15 +9,15 @@ dashedName: know-when-alt-text-should-be-left-blank
|
||||
|
||||
# --description--
|
||||
|
||||
En el último desafío, aprendiste que es obligatorio incluir un atributo `alt` al usar etiquetas `img`. Sin embargo, a veces las imágenes se agrupan con un título que ya las describe, o se usan solo para decoración. En estos casos `alt` el texto puede parecer redundante o innecesario.
|
||||
En el último desafío, aprendiste que es obligatorio incluir un atributo `alt` al usar etiquetas `img`. Sin embargo, a veces las imágenes se agrupan con un título que ya las describe, o se usan solo para decoración. En estos casos el texto `alt` puede parecer redundante o innecesario.
|
||||
|
||||
En situaciones en las que una ya está explicada con contenido de texto, o no agrega significado a una página, el `img` todavía necesita un atributo `alt`, pero se puede establecer en una cadena vacía. Aquí hay un ejemplo:
|
||||
Cuando una imagen ya se explica con el contenido de texto o no agrega significado a una página, `img` todavía necesita un atributo `alt`, pero se puede establecer en una cadena vacía. Aquí hay un ejemplo:
|
||||
|
||||
`<img src="visualDecoration.jpeg" alt="">`
|
||||
|
||||
Las imágenes de fondo generalmente también caen bajo la etiqueta "decorativa". Sin embargo, normalmente se aplican con reglas CSS y, por lo tanto, no forman parte del proceso de lectores de pantalla del lenguaje de marcado.
|
||||
|
||||
**Nota:** Para imágenes con subtítulos, es posible que desees incluir texto `alt`, ya que ayuda a los motores de búsqueda a catalogar el contenido de la imagen.
|
||||
**Nota:** Para imágenes con un título, es posible que aún desees incluir texto `alt` ya que ayuda a los motores de búsqueda a catalogar el contenido de la imagen.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
|
||||
|
||||
# --description--
|
||||
|
||||
¿Has notado que todos los desafíos de accesibilidad aplicados hasta ahora no han usado ningún CSS? Esto es para mostrar la importancia de un esquema de documento lógico, y el uso de etiquetas semánticamente significativas alrededor de tu contenido antes de introducir el aspecto de diseño visual.
|
||||
¿Has notado que todos los desafíos de accesibilidad aplicados hasta ahora no han usado ningún CSS? Esto muestra la importancia de utilizar un esquema de documento lógico y etiquetas semánticamente significativas alrededor de su contenido antes de introducir el aspecto de diseño visual.
|
||||
|
||||
Sin embargo, la magia de CSS también puede mejorar la accesibilidad en tu página cuando deseas ocultar visualmente contenido destinado solo para lectores de pantalla. Esto sucede cuando la información está en un formato visual (como un gráfico), pero los usuarios del lector de pantalla necesitan una presentación alternativa (como una tabla) para acceder a los datos. CSS se utiliza para colocar los elementos exclusivos de lector de pantalla fuera del área visual de la ventana del navegador.
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: make-links-navigable-with-html-access-keys
|
||||
|
||||
# --description--
|
||||
|
||||
HTML ofrece el atributo `accesskey` para especificar una tecla de acceso directo para activar o enfocar un elemento. Esto puede hacer que la navegación sea más eficiente para los usuarios de solo usan el teclado.
|
||||
HTML ofrece el atributo `accesskey` para especificar una tecla de acceso directo para activar o enfocar un elemento. Añadiendo un atributo `accesskey` puede hacer que la navegación sea más eficiente para los usuarios que solo utilizan teclado.
|
||||
|
||||
HTML5 permite que este atributo se use en cualquier elemento, pero es particularmente útil cuando se usa con elementos interactivos. Esto incluye enlaces, botones y controles de formulario.
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ El siguiente elemento HTML5 que agrega significado semántico y mejora la accesi
|
||||
|
||||
`header` comparte la función landmark integrada que viste con `main`, lo que permite a las tecnologías de asistencia navegar rápidamente a ese contenido.
|
||||
|
||||
**Nota:** El `header` está diseñado para usarse dentro de la etiqueta `body` de tu documento HTML. Esto es diferente al elemento `head`, que contiene el título de la página, metainformación, etc.
|
||||
**Nota:** El `header` está diseñado para usarse dentro de la etiqueta `body` de tu documento HTML. Es diferente al elemento `head`, que contiene el título de la página, la meta información, etc.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: standardize-times-with-the-html5-datetime-attribute
|
||||
|
||||
# --description--
|
||||
|
||||
Continuando con el tema de fechas, HTML5 también introdujo el elemento `time` junto con un atributo `datetime` para estandarizar las horas. Este es un elemento inline que puede ajustar una fecha u hora en una página. Un formato válido de esa fecha se mantiene mediante el atributo `datetime`. Este es el valor al que acceden los dispositivos de asistencia. Ayuda a evitar confusiones al indicar una versión estandarizada de una hora, incluso si está escrito de manera informal o coloquial en el texto.
|
||||
Continuando con el tema de fechas, HTML5 también introdujo el elemento `time` junto con un atributo `datetime` para estandarizar las horas. El atributo `datetime` es un elemento en línea que puede envolver una fecha o hora en una página. Un atributo `datetime` contiene un formato válido para esa fecha. Este es el valor al que acceden los dispositivos de asistencia. Ayuda a evitar la confusión al declarar una versión estandarizada de un tiempo, incluso si está escrita informal o coloquialmente en el texto.
|
||||
|
||||
Aquí hay un ejemplo:
|
||||
|
||||
|
||||
@@ -9,9 +9,9 @@ dashedName: wrap-content-in-the-article-element
|
||||
|
||||
# --description--
|
||||
|
||||
`article` es otro de los nuevos elementos HTML5 que agrega significado semántico a tu lenguaje de marcado. `article` es un elemento de sección, y se utiliza para envolver contenido independiente y autónomo. La etiqueta funciona bien con entradas de blog, publicaciones en el foro o artículos de noticias.
|
||||
`article` es otro de los nuevos elementos de HTML5 que añaden significado semántico a su marcado. `article` es un elemento seccionador y se utiliza para envolver contenido independiente y autónomo. La etiqueta funciona bien con entradas de blog, publicaciones en el foro o artículos de noticias.
|
||||
|
||||
Determinar si el contenido puede ser independiente suele ser una cuestión de criterio, pero hay un par de pruebas simples que puedes usar. Pregúntate, si elimino todo el contexto circundante, ¿ese contenido aún tendría sentido? Del mismo modo para el texto, ¿el contenido se mantendría si estuviera en una fuente RSS?
|
||||
Determinar si el contenido puede ser independiente suele ser una cuestión de criterio, pero puedes hacer un par de pruebas simples. Pregúntate, si elimino todo el contexto circundante, ¿ese contenido aún tendría sentido? Del mismo modo, para el texto, ¿se mantendría el contenido si estuviera en una fuente RSS?
|
||||
|
||||
Recuerda que las personas que usan tecnologías de asistencia dependen de un lenguaje de marcado organizado y semánticamente significativo para comprender mejor su trabajo.
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||
|
||||
El siguiente tema sobre formularios cubre la accesibilidad de los botones tipo radio. A cada opción se le da una `label` (etiqueta) con un atributo `for` vinculado al `id` del elemento correspondiente como se cubrió en el último desafío. Dado que los botones de radio a menudo vienen en un grupo donde el usuario debe elegir uno, hay una manera de mostrar semánticamente que las opciones son parte de un conjunto.
|
||||
|
||||
La etiqueta `fieldset` rodea toda la agrupación de botones de radio para lograr esto. A menudo utiliza una etiqueta `legend` para proporcionar una descripción para la agrupación, la cual es leída por los lectores de pantalla para cada elección en el elemento `fieldset`.
|
||||
La etiqueta `fieldset` rodea toda la agrupación de botones de radio para lograr esto. A menudo utiliza una etiqueta de `legend` para proporcionar una descripción para la agrupación, que lectores de pantalla leen por cada opción en el elemento `fieldset`.
|
||||
|
||||
El contenedor `fieldset` y la etiqueta `legend` no son necesarias cuando las opciones se explican por sí mismas, como selección de género. Usar `label` con el atributo `for` para cada botón de radio es suficiente.
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: comparison-with-the-greater-than-operator
|
||||
|
||||
El operador mayor que (`>`) compara los valores de dos números. Si el número a la izquierda es mayor que el número a la derecha, devuelve `true`. De lo contrario, devuelve `false`.
|
||||
|
||||
Como el operador de igualdad, el operador mayor que convertirá los tipos de datos de valores mientras los compara.
|
||||
Al igual que el operador de igualdad, el operador mayor que convertirá los tipos de datos de valores mientras los compara.
|
||||
|
||||
**Ejemplos**
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: comparison-with-the-greater-than-or-equal-to-operator
|
||||
|
||||
El operador mayor o igual que (`>=`) compara el valor de dos números. Si el número de la izquierda es mayor o igual que el número de la derecha, devuelve `true`. De lo contrario, devuelve `false`.
|
||||
|
||||
Al igual que el operador de igualdad, `>=` convertirá los tipos de datos al comparar.
|
||||
Al igual que el operador de igualdad, el operador mayor o igual que convertirá los tipos de datos mientras los compara.
|
||||
|
||||
**Ejemplos**
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: comparison-with-the-inequality-operator
|
||||
|
||||
# --description--
|
||||
|
||||
El operador de desigualdad (`!=`) es lo opuesto al operador de igualdad. Esto quiere decir que no es igual, y devuelve `false` cuando la comparación de igualdad devuelva `true` y *vice versa*. Tal como el operador de igualdad, el operador de desigualdad convertirá los tipos de datos mientras compara.
|
||||
El operador de desigualdad (`!=`) es lo opuesto al operador de igualdad. Esto quiere decir que no es igual, y devuelve `false` cuando la comparación de igualdad devuelva `true` y *vice versa*. Al igual que el operador de igualdad, el operador de desigualdad convertirá los tipos de datos mientras los compara.
|
||||
|
||||
**Ejemplos**
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: comparison-with-the-less-than-operator
|
||||
|
||||
# --description--
|
||||
|
||||
El operador <dfn>menor que</dfn> (`<`) compara los valores de dos números. Si el número a la izquierda es menor que el número a la derecha, devuelve `true`. De lo contrario, devuelve `false`. Al igual que el operador de igualdad, el operador <dfn>menor que</dfn> convertirá los tipos de datos mientras los compara.
|
||||
El operador menor que (`<`) compara los valores de dos números. Si el número a la izquierda es menor que el número a la derecha, devuelve `true`. De lo contrario, devuelve `false`. Al igual que el operador de igualdad, el operador menor que convertirá los tipos de datos mientras los compara.
|
||||
|
||||
**Ejemplos**
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: comparison-with-the-less-than-or-equal-to-operator
|
||||
|
||||
# --description--
|
||||
|
||||
El operador menor o igual que (`<=`) compara el valor de dos números. Si el número de la izquierda es menor o igual que el número de la derecha, devuelve `true`. Si el número a la izquierda es mayor que el número a la derecha, devuelve `false`. Al igual que el operador de igualdad, el operador menor o igual que convierte los tipos de datos.
|
||||
El operador menor o igual que (`<=`) compara el valor de dos números. Si el número de la izquierda es menor o igual que el número de la derecha, devuelve `true`. Si el número a la izquierda es mayor que el número a la derecha, devuelve `false`. Al igual que el operador de igualdad, el operador menor o igual que convertirá los tipos de datos mientras los compara.
|
||||
|
||||
**Ejemplos**
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: comparison-with-the-strict-inequality-operator
|
||||
|
||||
# --description--
|
||||
|
||||
El operador de estricta desigualdad `!==` es el opuesto lógico del operador de estricta igualdad. Esto significa "Estrictamente Desigual", y devuelve `false` cuando la comparación de estricta igualdad devolvería `true` y *vice versa*. Una estricta desigualdad no convertirá los tipos de datos.
|
||||
El operador de estricta desigualdad `!==` es el opuesto lógico del operador de estricta igualdad. Esto significa "Estrictamente Desigual", y devuelve `false` cuando la comparación de estricta igualdad devolvería `true` y *vice versa*. El operador de estricta desigualdad no convertirá los tipos de datos.
|
||||
|
||||
**Ejemplos**
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b6
|
||||
title: Escape Sequences in Strings
|
||||
title: Escapa secuencias en cadenas
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cvmqRh6'
|
||||
forumTopicId: 17567
|
||||
@@ -9,36 +9,36 @@ dashedName: escape-sequences-in-strings
|
||||
|
||||
# --description--
|
||||
|
||||
Quotes are not the only characters that can be <dfn>escaped</dfn> inside a string. There are two reasons to use escaping characters:
|
||||
Las comillas no son los únicos caracteres que pueden ser <dfn>escapados</dfn> dentro de una cadena. Hay dos razones para usar caracteres de escape:
|
||||
|
||||
1. To allow you to use characters you may not otherwise be able to type out, such as a carriage return.
|
||||
2. To allow you to represent multiple quotes in a string without JavaScript misinterpreting what you mean.
|
||||
1. Para permitir el uso de caracteres que de otra manera no te sería posible escribir, como un retorno de carro.
|
||||
2. Para permitirte representar múltiples comillas en una cadena sin que JavaScript malinterprete lo que quieres decir.
|
||||
|
||||
We learned this in the previous challenge.
|
||||
Esto lo aprendimos en el anterior desafío.
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>Code</th><th>Output</th></tr></thead><tbody><tr><td><code>\'</code></td><td>single quote</td></tr><tr><td><code>\"</code></td><td>double quote</td></tr><tr><td><code>\\</code></td><td>backslash</td></tr><tr><td><code>\n</code></td><td>newline</td></tr><tr><td><code>\r</code></td><td>carriage return</td></tr><tr><td><code>\t</code></td><td>tab</td></tr><tr><td><code>\b</code></td><td>word boundary</td></tr><tr><td><code>\f</code></td><td>form feed</td></tr></tbody></table>
|
||||
<table class='table table-striped'><thead><tr><th>Código</th><th>Resultado</th></tr></thead><tbody><tr><td><code>\'</code></td><td>comilla simple</td></tr><tr><td><code>\"</code></td><td>comilla doble</td></tr><tr><td><code>\\</code></td><td>barra invertida</td></tr><tr><td><code>\n</code></td><td>línea nueva</td></tr><tr><td><code>\r</code></td><td>retorno de carro</td></tr><tr><td><code>\t</code></td><td>tabulación</td></tr><tr><td><code>\b</code></td><td>límite de palabra</td></tr><tr><td><code>\f</code></td><td>fuente de formulario</td></tr></tbody></table>
|
||||
|
||||
*Note that the backslash itself must be escaped in order to display as a backslash.*
|
||||
*Ten en cuenta que la barra invertida en sí debe ser escapada para poder mostrarla como una barra invertida.*
|
||||
|
||||
# --instructions--
|
||||
|
||||
Assign the following three lines of text into the single variable `myStr` using escape sequences.
|
||||
Asigna las siguientes tres líneas de texto en la variable única `myStr` usando secuencias de escape.
|
||||
|
||||
<blockquote>FirstLine<br> \SecondLine<br>ThirdLine</blockquote>
|
||||
|
||||
You will need to use escape sequences to insert special characters correctly. You will also need to follow the spacing as it looks above, with no spaces between escape sequences or words.
|
||||
Necesitarás usar secuencias de escape para insertar correctamente los caracteres especiales. También necesitarás seguir el espaciado tal y como se ve arriba, sin espacios entre secuencias de escape o palabras.
|
||||
|
||||
**Note:** The indentation for `SecondLine` is achieved with the tab escape character, not spaces.
|
||||
**Nota:** La sangría para la segunda línea (`SecondLine`) se consigue con el carácter de escape de tabulación, no con espacios.
|
||||
|
||||
# --hints--
|
||||
|
||||
`myStr` should not contain any spaces
|
||||
`myStr` no debe contener ningún espacio
|
||||
|
||||
```js
|
||||
assert(!/ /.test(myStr));
|
||||
```
|
||||
|
||||
`myStr` should contain the strings `FirstLine`, `SecondLine` and `ThirdLine` (remember case sensitivity)
|
||||
`myStr` debe contener las cadenas `FirstLine`, `SecondLine` y `ThirdLine` (recuerda la sensibilidad a mayúsculas y minúsculas)
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -46,31 +46,31 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`FirstLine` should be followed by the newline character `\n`
|
||||
`FirstLine` debe ir seguido del carácter de línea nueva `\n`
|
||||
|
||||
```js
|
||||
assert(/FirstLine\n/.test(myStr));
|
||||
```
|
||||
|
||||
`myStr` should contain a tab character `\t` which follows a newline character
|
||||
`myStr` debe contener un carácter de tabulación `\t` seguido de un carácter de línea nueva
|
||||
|
||||
```js
|
||||
assert(/\n\t/.test(myStr));
|
||||
```
|
||||
|
||||
`SecondLine` should be preceded by the backslash character <code>\\</code>
|
||||
`SecondLine` debe estar precedida por el carácter de barra invertida `\`
|
||||
|
||||
```js
|
||||
assert(/\\SecondLine/.test(myStr));
|
||||
```
|
||||
|
||||
There should be a newline character between `SecondLine` and `ThirdLine`
|
||||
Debe haber un carácter de línea nueva entre `SecondLine` y `ThirdLine`
|
||||
|
||||
```js
|
||||
assert(/SecondLine\nThirdLine/.test(myStr));
|
||||
```
|
||||
|
||||
`myStr` should only contain characters shown in the instructions
|
||||
`myStr` solo debe contener caracteres mostrados en las instrucciones
|
||||
|
||||
```js
|
||||
assert(myStr === 'FirstLine\n\t\\SecondLine\nThirdLine');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b5
|
||||
title: Escaping Literal Quotes in Strings
|
||||
title: Escapa comillas literales en cadenas
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/c2QvgSr'
|
||||
forumTopicId: 17568
|
||||
@@ -9,31 +9,31 @@ dashedName: escaping-literal-quotes-in-strings
|
||||
|
||||
# --description--
|
||||
|
||||
When you are defining a string you must start and end with a single or double quote. What happens when you need a literal quote: `"` or `'` inside of your string?
|
||||
Cuando estás definiendo una cadena debes comenzar y terminar con una comilla simple o doble. ¿Qué pasa cuando necesitas una comilla literal: `"` o `'` dentro de tu cadena?
|
||||
|
||||
In JavaScript, you can <dfn>escape</dfn> a quote from considering it as an end of string quote by placing a <dfn>backslash</dfn> (<code>\\</code>) in front of the quote.
|
||||
En JavaScript, puedes <dfn>escapar</dfn> una comilla de considerarse un final de cadena colocando una <dfn>barra invertida</dfn> (`\`) delante de la comilla.
|
||||
|
||||
`var sampleStr = "Alan said, \"Peter is learning JavaScript\".";`
|
||||
|
||||
This signals to JavaScript that the following quote is not the end of the string, but should instead appear inside the string. So if you were to print this to the console, you would get:
|
||||
Esto indica a JavaScript que la siguiente comilla no es el final de la cadena, sino que debería aparecer dentro de la cadena. Así que si imprimieras esto en la consola, obtendrías:
|
||||
|
||||
`Alan said, "Peter is learning JavaScript".`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use <dfn>backslashes</dfn> to assign a string to the `myStr` variable so that if you were to print it to the console, you would see:
|
||||
Usa <dfn>barras invertidas</dfn> para asignar una cadena a la variable `myStr` de modo que si lo imprimieras en la consola, verías:
|
||||
|
||||
`I am a "double quoted" string inside "double quotes".`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use two double quotes (`"`) and four escaped double quotes (`\"`).
|
||||
Debes usar dos comillas dobles (`"`) y cuatro comillas dobles escapadas (`\"`).
|
||||
|
||||
```js
|
||||
assert(code.match(/\\"/g).length === 4 && code.match(/[^\\]"/g).length === 2);
|
||||
```
|
||||
|
||||
Variable myStr should contain the string: `I am a "double quoted" string inside "double quotes".`
|
||||
La variable myStr debe contener la cadena: `I am a "double quoted" string inside "double quotes".`
|
||||
|
||||
```js
|
||||
assert(/I am a "double quoted" string inside "double quotes(\."|"\.)$/.test(myStr));
|
||||
|
||||
Reference in New Issue
Block a user