Nombre de dominio implícito |
- /en-US/docs/Learn
+ /es/docs/Learn
Este es el caso de uso más común para una URL absoluta dentro de un
documento HTML. El navegador utilizará el mismo protocolo y el mismo
@@ -143,7 +143,7 @@ Veamos algunos ejemplos para aclarar esto.
#### Ejemplos de URL relativas
-Para comprender mejor los siguientes ejemplos, supongamos que las URL se invocan desde el documento ubicado en la siguiente URL: `https://developer.mozilla.org/en-US/docs/Learn`
+Para comprender mejor los siguientes ejemplos, supongamos que las URL se invocan desde el documento ubicado en la siguiente URL: `https://developer.mozilla.org/es/docs/Learn`
@@ -156,7 +156,7 @@ Para comprender mejor los siguientes ejemplos, supongamos que las URL se invocan
intentará encontrar el documento en un subdirectorio del que contiene
el recurso actual. Entonces, en este ejemplo, realmente queremos
llegar a esta URL:
- https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs.
+ https://developer.mozilla.org/es/docs/Learn/Skills/Infrastructure/Understanding_URLs.
@@ -169,9 +169,9 @@ Para comprender mejor los siguientes ejemplos, supongamos que las URL se invocan
heredada del mundo del sistema de archivos UNIX, para decirle al
navegador que queremos subir desde un directorio. Aquí queremos
llegar a esta URL:
- https://developer.mozilla.org/en-US/docs/Learn/../CSS/display, que se
+ https://developer.mozilla.org/es/docs/Learn/../CSS/display, que se
puede simplificar a:
- https://developer.mozilla.org/en-US/docs/CSS/display.
+ https://developer.mozilla.org/es/docs/CSS/display.
diff --git a/files/es/learn/common_questions/web_mechanics/what_is_a_web_server/index.md b/files/es/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
index 754df6fb98dd83..e9a3cde7623799 100644
--- a/files/es/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
+++ b/files/es/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
@@ -12,10 +12,10 @@ En este articulo veremos que son los servidores, cómo funcionan y por qué son
Prerequisitos: |
Debes saber
- como funciona internet, y
- entendiendo la diferencia entre pagina web, sitio web, servidor y
motor de busqueda
diff --git a/files/es/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/es/learn/css/building_blocks/backgrounds_and_borders/index.md
index 5a637870e72ca7..d62af6d3f6d570 100644
--- a/files/es/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/es/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -42,8 +42,14 @@ La propiedad {{cssxref ("background")}} de CSS es una propiedad abreviada de una
```css
.box {
- background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
- url(big-star.png) center no-repeat, rebeccapurple;
+ background:
+ linear-gradient(
+ 105deg,
+ rgba(255, 255, 255, 0.2) 39%,
+ rgba(51, 56, 57, 1) 96%
+ ) center center / 400px 200px no-repeat,
+ url(big-star.png) center no-repeat,
+ rebeccapurple;
}
```
@@ -176,9 +182,12 @@ Si haces esto, las imágenes de fondo pueden quedar superpuestas entre sí. Los
Las otras propiedades `background-*` también pueden tener valores múltiples separados por comas, de la misma manera que `background-image`:
```css
-background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+background-image: url(image1.png), url(image2.png), url(image3.png),
+ url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
-background-position: 10px 20px, top right;
+background-position:
+ 10px 20px,
+ top right;
```
Cada valor de las diversas propiedades coincide con los valores que están en la misma posición en las otras propiedades. Arriba, por ejemplo, el valor para la propiedad `background-repeat` de `image1` será `no-repeat`. Sin embargo, ¿qué sucede cuando diferentes propiedades tienen una cantidad diferente de valores? La respuesta es que los valores que ocupan las posiciones más pequeñas se alternan cíclicamente: en el ejemplo anterior hay cuatro imágenes de fondo pero solo dos valores `background-position`. Los primeros dos valores de posición se aplicarán a las dos primeras imágenes, luego los valores volverán a asignarse cíclicamente: a `image3` se le dará el primer valor de posición, y a `image4` se le dará el segundo valor de posición.
diff --git a/files/es/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/es/learn/css/building_blocks/cascade_and_inheritance/index.md
index d9706dd4f98789..0d98aebd3a17b7 100644
--- a/files/es/learn/css/building_blocks/cascade_and_inheritance/index.md
+++ b/files/es/learn/css/building_blocks/cascade_and_inheritance/index.md
@@ -176,12 +176,12 @@ La cantidad de especificidad de un selector se mide usando cuatro valores difere
La tabla siguiente muestra algunos ejemplos concretos para ayudarte a entenderlo mejor. Analízalos y trata de entender por qué tienen la especificidad que les hemos dado. Aun no hemos explicado los selectores de forma detallada, pero puedes encontrar detalles de cada selector en los [selectores de referencia](/es/docs/Web/CSS/Selectores_CSS) de MDN.
-| Selector | Millares: | Centenas: | Decenas: | Unidades: | Especificidad total |
-| ------------------------------------------------------------------------------------------ | --------- | --------- | -------- | --------- | ------------------- |
-| `h1` | 0 | 0 | 0 | 1 | 0001 |
-| `h1 + p::first-letter` | 0 | 0 | 0 | 3 | 0003 |
-| `li > a[href*="en-US"] > .inline-warning` | 0 | 0 | 2 | 2 | 0022 |
-| `#identifier` | 0 | 1 | 0 | 0 | 0100 |
+| Selector | Millares: | Centenas: | Decenas: | Unidades: | Especificidad total |
+| -------------------------------------------------------------------------------------------------------------- | --------- | --------- | -------- | --------- | ------------------- |
+| `h1` | 0 | 0 | 0 | 1 | 0001 |
+| `h1 + p::first-letter` | 0 | 0 | 0 | 3 | 0003 |
+| `li > a[href*="en-US"] > .inline-warning` | 0 | 0 | 2 | 2 | 0022 |
+| `#identifier` | 0 | 1 | 0 | 0 | 0100 |
| Sin selector, con una regla en el atributo de un elemento [`style`](/es/docs/Web/HTML/Global_attributes#style) | 1 | 0 | 0 | 0 | 1000 |
Antes de continuar, vamos a ver un ejemplo:
diff --git a/files/es/learn/css/building_blocks/handling_different_text_directions/index.md b/files/es/learn/css/building_blocks/handling_different_text_directions/index.md
index baab8fe0a8dcba..03b83713be6bae 100644
--- a/files/es/learn/css/building_blocks/handling_different_text_directions/index.md
+++ b/files/es/learn/css/building_blocks/handling_different_text_directions/index.md
@@ -55,7 +55,7 @@ Los tres valores posibles para la propiedad [`writing-mode`](/es/docs/Web/CSS/wr
Así, la propiedad `writing-mode` está configurando en realidad la direccion en que los elementos de nivel bloque son desplegados en la página - ya sea de arriba abajo, derecha a izquierda, o de izquierda a derecha. Luego señala la dirección del flujo de texto en las frases.
-## Modos de escritura y diseño en bloque y lineal.
+## Modos de escritura y diseño en bloque y lineal
Ya hemos visto el diseño en bloque y lineal, y el hecho de que algunas cosas se muestran como elementos de bloque y otras como elementos lineales. Ésto se encuentra ligado al modo de escritura del documento, y no de la pantalla física. Los bloques sólo se presentan desde la parte superior a la inferior de la página si estas usando un modo de escritura que presente el texto horizontalmente, como el español.
diff --git a/files/es/learn/css/building_blocks/images_media_form_elements/index.md b/files/es/learn/css/building_blocks/images_media_form_elements/index.md
index 7f0fb822ae19c4..b3bacdbe9fa689 100644
--- a/files/es/learn/css/building_blocks/images_media_form_elements/index.md
+++ b/files/es/learn/css/building_blocks/images_media_form_elements/index.md
@@ -123,8 +123,8 @@ button,
input,
select,
textarea {
- font-family : inherit;
- font-size : 100%;
+ font-family: inherit;
+ font-size: 100%;
}
```
@@ -167,7 +167,8 @@ textarea {
font-family: inherit;
font-size: 100%;
box-sizing: border-box;
- padding: 0; margin: 0;
+ padding: 0;
+ margin: 0;
}
textarea {
diff --git a/files/es/learn/css/building_blocks/index.md b/files/es/learn/css/building_blocks/index.md
index 469ed9cd706467..2552b1a6beb45e 100644
--- a/files/es/learn/css/building_blocks/index.md
+++ b/files/es/learn/css/building_blocks/index.md
@@ -2,6 +2,7 @@
title: Bloques de construcción CSS
slug: Learn/CSS/Building_blocks
---
+
{{LearnSidebar}}
Este módulo retoma donde [Primeros pasos en CSS](/es/docs/Learn/CSS/First_steps) finalizó — ahora que estás familiarizado con el lenguaje y su sintaxis, y que tienes algo de experiencia en su uso, es hora de bucear un poco más profundo. Este módulo se centra en el estilo en cascada de css y en el concepto de herencia, también veremos todos los tipos de selectores, unidades, tamaños, estilos de fondo, bordes, debugging y mucho más.
@@ -13,7 +14,7 @@ El objetivo aqui es proveerte de herramientas para que puedas escribir código C
Antes de comenzar este módulo deberías poseer:
1. Un entendimiento básico de la utilización de una computadora y de la
- navegación web a nivel de usuario.
+ navegación web a nivel de usuario.
2. Un entorno básico constituido en base a lo dispuesto en la guía [Instalación de software básico](/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico), tanto como conocimiento acerca de la creación y la administración de archivos, como es detallado en [Dealing with files](/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files).
3. Una familiaridad básica con html, como es establecido en el módulo [Introdución a HTML](/es/docs/Learn/HTML/Introduccion_a_HTML).
4. Un entendimiento elemental de CSS, como es discutido en el módulo [CSS first steps](/es/docs/Learn/CSS/First_steps).
diff --git a/files/es/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/es/learn/css/building_blocks/selectors/attribute_selectors/index.md
index 74b0b0609b8796..d76c3c1a97cb40 100644
--- a/files/es/learn/css/building_blocks/selectors/attribute_selectors/index.md
+++ b/files/es/learn/css/building_blocks/selectors/attribute_selectors/index.md
@@ -38,12 +38,12 @@ Como ya explicamos en los artículos de HTML, los elementos pueden tener atribut
Estos selectores permiten seleccionar un elemento solo a partir de la presencia de un atributo (por ejemplo `href`) o a partir de varias coincidencias diferentes con respecto al valor del atributo.
-| Selector | Ejemplo | Descripción |
-| --- | --- | --- |
-| `[attr]` | `a[title]` | Relaciona elementos con un mismo nombre de atributo, _attr_ (el valor que se indica entre corchetes). |
-| `[attr=value]` | `a[href="https://example.com"]` | Relaciona elementos con un mismo nombre de atributo, _attr_, cuyo valor es exactamente el mismo, _value_ (la cadena de caracteres que se indica entre corchetes). |
-| `[attr~=value]` | `p[class~="special"]` | Relaciona los elementos con un mismo nombre de atributo, _attr_, cuyo valor es exactamente _value_, o los elementos con un mismo atributo _attr_ que contiene uno o más valores de los cuales, al menos uno, coincide con _value_.
Ten en cuenta que en una lista que incluya más de un valor, los distintos valores se separan con un espacio. |
-| `[attr\|=value]` | `div[lang\|="zh"]` | Relaciona los elementos con un mismo nombre de atributo, _attr_, cuyo valor puede ser exactamente _value_ o puede comenzar con _value_ seguido inmediatamente por un guion. |
+| Selector | Ejemplo | Descripción |
+| ---------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `[attr]` | `a[title]` | Relaciona elementos con un mismo nombre de atributo, _attr_ (el valor que se indica entre corchetes). |
+| `[attr=value]` | `a[href="https://example.com"]` | Relaciona elementos con un mismo nombre de atributo, _attr_, cuyo valor es exactamente el mismo, _value_ (la cadena de caracteres que se indica entre corchetes). |
+| `[attr~=value]` | `p[class~="special"]` | Relaciona los elementos con un mismo nombre de atributo, _attr_, cuyo valor es exactamente _value_, o los elementos con un mismo atributo _attr_ que contiene uno o más valores de los cuales, al menos uno, coincide con _value_.
Ten en cuenta que en una lista que incluya más de un valor, los distintos valores se separan con un espacio. |
+| `[attr\|=value]` | `div[lang\|="zh"]` | Relaciona los elementos con un mismo nombre de atributo, _attr_, cuyo valor puede ser exactamente _value_ o puede comenzar con _value_ seguido inmediatamente por un guion. |
En el ejemplo siguiente puedes observar cómo se utilizan estos selectores.
@@ -55,7 +55,7 @@ En el ejemplo siguiente puedes observar cómo se utilizan estos selectores.
## Selectores coincidentes con subcadenas
-Estos selectores permiten un tipo más avanzado de relación entre las subcadenas de caracteres que constituyen el valor del atributo. Por ejemplo, si tienes las clases `box-warning` y `box-error` y quieres encontrar todos los elementos que empiezan con la cadena de caracteres “box-”, puedes seleccionarlas ambas con `[class^="box-"]`.
+Estos selectores permiten un tipo más avanzado de relación entre las subcadenas de caracteres que constituyen el valor del atributo. Por ejemplo, si tienes las clases `box-warning` y `box-error` y quieres encontrar todos los elementos que empiezan con la cadena de caracteres "box-", puedes seleccionarlas ambas con `[class^="box-"]`.
| Selector | Ejemplo | Descripción |
| --------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
diff --git a/files/es/learn/css/building_blocks/selectors/combinators/index.md b/files/es/learn/css/building_blocks/selectors/combinators/index.md
index 3d6bc546923695..5624b9afb875e4 100644
--- a/files/es/learn/css/building_blocks/selectors/combinators/index.md
+++ b/files/es/learn/css/building_blocks/selectors/combinators/index.md
@@ -98,7 +98,8 @@ En el ejemplo siguiente seleccionamos todos los elementos `` que vienen despu
Puedes combinar cualquiera de los selectores de los artículos anteriores con selectores de combinación para seleccionar una parte del documento. Por ejemplo, podrías utilizar el código siguiente para seleccionar elementos de una lista con una clase «a» que son hijos directos de ` `:
```css
-ul > li[class="a"] { }
+ul > li[class="a"] {
+}
```
Ten cuidado cuando creas largas listas de selectores que seleccionan partes del documento muy específicas. Te será difícil volver a utilizar las reglas CSS porque has definido un selector muy específico para la ubicación del elemento en el marcado.
diff --git a/files/es/learn/css/building_blocks/selectors/index.md b/files/es/learn/css/building_blocks/selectors/index.md
index 0703af2f83b68e..c84143e1901a9f 100644
--- a/files/es/learn/css/building_blocks/selectors/index.md
+++ b/files/es/learn/css/building_blocks/selectors/index.md
@@ -61,7 +61,8 @@ h1 {
También los podrías combinar en una lista de selectores, separándolos con una coma.
```css
-h1, .special {
+h1,
+.special {
color: blue;
}
```
@@ -96,7 +97,8 @@ h1 {
Sin embargo, si se combinan, toda la regla se considera no válida y no se aplicará estilo ni a `h1` ni a la clase.
```css
-h1, ..special {
+h1,
+..special {
color: blue;
}
```
@@ -110,19 +112,22 @@ Hay diferentes agrupaciones de selectores, y conocer qué tipo de selector neces
Este grupo incluye selectores que delimitan un elemento HTML, como por ejemplo un ``.
```css
-h1 { }
+h1 {
+}
```
También incluye selectores que delimitan una clase:
```css
-.box { }
+.box {
+}
```
o un ID:
```css
-#unique { }
+#unique {
+}
```
### Selectores de atributo
@@ -130,13 +135,16 @@ o un ID:
Este grupo de selectores te proporciona diferentes formas de seleccionar elementos según la presencia de un atributo determinado en un elemento:
```css
-a[title] { }
+a[title] {
+}
```
O incluso hacer una selección basada en la presencia de un atributo que tiene un valor particular asignado:
```css
-a[href="https://example.com"] { }
+a[href="https://example.com"]
+{
+}
```
### Las pseudoclases y los pseudoelementos
@@ -144,13 +152,15 @@ a[href="https://example.com"] { }
Este grupo de selectores incluye pseudoclases, que aplican estilo a ciertos estados de un elemento. La pseudoclase `:hover`, por ejemplo, selecciona un elemento solo cuando se le pasa el ratón por encima.
```css
-a: hover {}
+a: hover {
+}
```
También incluye pseudoelementos, que seleccionan una parte determinada de un elemento en vez del elemento en sí. Por ejemplo, `::first-line` siempre selecciona la primera línea del texto que se encuentra dentro de un elemento (``, en el ejemplo siguiente), y actúa como si un elemento `` hubiera delimitado la primera línea, seleccionado y aplicado estilo.
```css
-p::first-line { }
+p::first-line {
+}
```
### Combinadores
@@ -158,7 +168,8 @@ p::first-line { }
El último grupo de selectores combina otros selectores con el fin de delimitar elementos de nuestros documentos. El ejemplo siguiente selecciona los párrafos que son hijos directos del elemento `` utilizando el operador de combinación hijo (`>`):
```css
-article > p { }
+article > p {
+}
```
## Próximos pasos
diff --git a/files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
index d6bc6277bf72f2..08b7411e3248e3 100644
--- a/files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
+++ b/files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
@@ -43,7 +43,7 @@ Una pseudoclase es un selector que marca los elementos que están en un estado e
Las pseudoclases son palabras clave que comienzan con dos puntos:
-```css
+```css-nolint
:pseudo-class-name
```
@@ -78,7 +78,7 @@ Algunas pseudoclases solo intervienen cuando el usuario interactúa con el docum
Los pseudoelementos se comportan de manera similar. Sin embargo, actúan como si hubieras añadido un elemento HTML totalmente nuevo en el marcado, en lugar de haber aplicado una clase nueva a los elementos presentes. Los pseudoelementos empiezan con un doble signo de dos puntos `::`.
-```css
+```css-nolint
::pseudo-element-name
```
@@ -133,69 +133,69 @@ Hay un gran número de pseudoclases y pseudoelementos, así que resulta útil te
### Las pseudoclases
-| Selector | Descripción |
-| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{ Cssxref(":active") }} | Selecciona un elemento cuando el usuario lo activa (por ejemplo, con un clic). |
-| {{ Cssxref(":any-link") }} | Selecciona los estados `:link` y `:visited` de un enlace. |
-| {{ Cssxref(":blank") }} | Selecciona un [elemento ``](/es/docs/Web/HTML/Elemento/input) cuyo valor de entrada está vacío. |
-| {{ Cssxref(":checked") }} | Selecciona un botón de opción o casilla de verificación en el estado que determines. |
-| {{ Cssxref(":current") }} | Selecciona el elemento que se muestra en ese momento, o un ancestro de ese elemento. |
-| {{ Cssxref(":default") }} | Selecciona uno o más elementos de interfaz de usuario cuyo valor es el predeterminado de entre un conjunto de elementos similares. |
-| {{ Cssxref(":dir") }} | Selecciona un elemento según su direccionalidad (valor del atributo [`dir`](/es/docs/Web/HTML/Global_attributes/dir) de HTML o propiedad [`direction`](/es/docs/Web/CSS/direction) de CSS). |
-| {{ Cssxref(":disabled") }} | Selecciona elementos de la interfaz de usuario que están en estado inactivo. |
-| {{ Cssxref(":empty") }} | Selecciona un elemento que no tiene elementos hijo, excepto por algún espacio en blanco opcional. |
-| {{ Cssxref(":enabled") }} | Selecciona elementos de la interfaz de usuario que están en estado activo. |
-| {{ Cssxref(":first") }} | En [Paged Media](/es/docs/Web/CSS/Paged_Media), selecciona la primera página. |
-| {{ Cssxref(":first-child") }} | Selecciona el primero entre elementos hermanos. |
-| {{ Cssxref(":first-of-type") }} | Selecciona el primero entre un tipo determinado de elementos hermanos. |
-| {{ Cssxref(":focus") }} | Selecciona el elemento que tiene el foco. |
-| {{ Cssxref(":focus-visible")}} | Selecciona el elemento que tiene el foco cuando el foco tiene que estar visible para el usuario. |
-| {{ Cssxref(":focus-within") }} | Selecciona el elemento que tiene el foco y el elemento con un descendiente que tiene el foco. |
-| {{ Cssxref(":future") }} | Selecciona los elementos que van después del elemento en curso. |
-| {{ Cssxref(":hover") }} | Selecciona un elemento cuando el usuario interactúa con él. |
-| {{ Cssxref(":indeterminate") }} | Selecciona elementos de interfaz de usuario cuyo valor está en un estado no determinado, por lo general se trata de [casillas de verificación](/es/docs/Web/HTML/Elemento/input/checkbox). |
-| {{ Cssxref(":in-range") }} | Selecciona un elemento cuyo valor se encuentra dentro de un rango de valores determinado. |
-| {{ Cssxref(":invalid") }} | Selecciona un elemento, como por ejemplo un ``, cuyo estado es no válido. |
-| {{ Cssxref(":lang") }} | Selecciona un elemento según el idioma (valor del atributo [lang](/es/docs/Web/HTML/Atributos_Globales/lang) de HTML). |
-| {{ Cssxref(":last-child") }} | Selecciona el último elemento de entre sus elementos hermanos. |
-| {{ Cssxref(":last-of-type") }} | Selecciona el último de entre los elementos hermanos de un tipo determinado. |
-| {{ Cssxref(":left") }} | En [Paged Media](/es/docs/Web/CSS/CSS_Pages) selecciona las páginas de la izquierda. |
-| {{ Cssxref(":link")}} | Selecciona los enlaces no visitados. |
-| {{ Cssxref(":local-link")}} | Selecciona los enlaces que dirigen a páginas que se encuentran en la misma página web que el documento activo. |
-| {{ Cssxref(":is", ":is()")}} | Selecciona cualquiera de los selectores de la lista de selección que se pase como valor de este selector. |
-| {{ Cssxref(":not") }} | Selecciona elementos que otros selectores no han seleccionado antes y que se han pasado como valor de este selector. |
-| {{ Cssxref(":nth-child") }} | Selecciona elementos de entre una lista de elementos hermanos. Los elementos hermanos están relacionados por una fórmula del tipo _an + b_ (por ejemplo, 2*n* + 1 seleccionaría los elementos 1, 3, 5, 7, etc., es decir, todos los impares). |
-| {{ Cssxref(":nth-of-type") }} | Selecciona elementos de entre una lista de elementos hermanos de un tipo determinado (por ejemplo, todos los elementos ``). Los elementos hermanos están relacionados por una fórmula del tipo _an + b_ (por ejemplo, 2*n* + 1 relacionaría en la secuencia ese tipo de elementos, los números 1, 3, 5, 7, etc., es decir, todos los impares). |
-| {{ Cssxref(":nth-last-child") }} | Selecciona elementos de entre una lista de elementos hermanos, contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo _an+b_ (por ejemplo, 2*n* + 1 r_elacionaría en la secuencia el último de los elementos de este tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final). |
-| {{ Cssxref(":nth-last-of-type") }} | Selecciona los elementos de entre una lista de elementos hermanos que son de un tipo determinado (por ejemplo, elementos ` `), contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo _an+b_ (por ejemplo, 2*n* + 1 relacionaría en la secuencia el último de los elementos de ese tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final). |
-| {{ Cssxref(":only-child") }} | Selecciona un elemento que no tiene elementos hermanos. |
-| {{ Cssxref(":only-of-type") }} | Selecciona un elemento que es el único de su tipo entre sus elementos hermanos. |
-| {{ Cssxref(":optional") }} | Selecciona los elementos de formulario que son innecesarios. |
-| {{ Cssxref(":out-of-range") }} | Selecciona un elemento cuyo valor está fuera de rango. |
-| {{ Cssxref(":past") }} | Selecciona los elementos que se encuentran antes del elemento activo. |
+| Selector | Descripción |
+| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{ Cssxref(":active") }} | Selecciona un elemento cuando el usuario lo activa (por ejemplo, con un clic). |
+| {{ Cssxref(":any-link") }} | Selecciona los estados `:link` y `:visited` de un enlace. |
+| {{ Cssxref(":blank") }} | Selecciona un [elemento ``](/es/docs/Web/HTML/Elemento/input) cuyo valor de entrada está vacío. |
+| {{ Cssxref(":checked") }} | Selecciona un botón de opción o casilla de verificación en el estado que determines. |
+| {{ Cssxref(":current") }} | Selecciona el elemento que se muestra en ese momento, o un ancestro de ese elemento. |
+| {{ Cssxref(":default") }} | Selecciona uno o más elementos de interfaz de usuario cuyo valor es el predeterminado de entre un conjunto de elementos similares. |
+| {{ Cssxref(":dir") }} | Selecciona un elemento según su direccionalidad (valor del atributo [`dir`](/es/docs/Web/HTML/Global_attributes/dir) de HTML o propiedad [`direction`](/es/docs/Web/CSS/direction) de CSS). |
+| {{ Cssxref(":disabled") }} | Selecciona elementos de la interfaz de usuario que están en estado inactivo. |
+| {{ Cssxref(":empty") }} | Selecciona un elemento que no tiene elementos hijo, excepto por algún espacio en blanco opcional. |
+| {{ Cssxref(":enabled") }} | Selecciona elementos de la interfaz de usuario que están en estado activo. |
+| {{ Cssxref(":first") }} | En [Paged Media](/es/docs/Web/CSS/Paged_Media), selecciona la primera página. |
+| {{ Cssxref(":first-child") }} | Selecciona el primero entre elementos hermanos. |
+| {{ Cssxref(":first-of-type") }} | Selecciona el primero entre un tipo determinado de elementos hermanos. |
+| {{ Cssxref(":focus") }} | Selecciona el elemento que tiene el foco. |
+| {{ Cssxref(":focus-visible")}} | Selecciona el elemento que tiene el foco cuando el foco tiene que estar visible para el usuario. |
+| {{ Cssxref(":focus-within") }} | Selecciona el elemento que tiene el foco y el elemento con un descendiente que tiene el foco. |
+| {{ Cssxref(":future") }} | Selecciona los elementos que van después del elemento en curso. |
+| {{ Cssxref(":hover") }} | Selecciona un elemento cuando el usuario interactúa con él. |
+| {{ Cssxref(":indeterminate") }} | Selecciona elementos de interfaz de usuario cuyo valor está en un estado no determinado, por lo general se trata de [casillas de verificación](/es/docs/Web/HTML/Elemento/input/checkbox). |
+| {{ Cssxref(":in-range") }} | Selecciona un elemento cuyo valor se encuentra dentro de un rango de valores determinado. |
+| {{ Cssxref(":invalid") }} | Selecciona un elemento, como por ejemplo un ``, cuyo estado es no válido. |
+| {{ Cssxref(":lang") }} | Selecciona un elemento según el idioma (valor del atributo [lang](/es/docs/Web/HTML/Atributos_Globales/lang) de HTML). |
+| {{ Cssxref(":last-child") }} | Selecciona el último elemento de entre sus elementos hermanos. |
+| {{ Cssxref(":last-of-type") }} | Selecciona el último de entre los elementos hermanos de un tipo determinado. |
+| {{ Cssxref(":left") }} | En [Paged Media](/es/docs/Web/CSS/CSS_Pages) selecciona las páginas de la izquierda. |
+| {{ Cssxref(":link")}} | Selecciona los enlaces no visitados. |
+| {{ Cssxref(":local-link")}} | Selecciona los enlaces que dirigen a páginas que se encuentran en la misma página web que el documento activo. |
+| {{ Cssxref(":is", ":is()")}} | Selecciona cualquiera de los selectores de la lista de selección que se pase como valor de este selector. |
+| {{ Cssxref(":not") }} | Selecciona elementos que otros selectores no han seleccionado antes y que se han pasado como valor de este selector. |
+| {{ Cssxref(":nth-child") }} | Selecciona elementos de entre una lista de elementos hermanos. Los elementos hermanos están relacionados por una fórmula del tipo _an + b_ (por ejemplo, 2*n* + 1 seleccionaría los elementos 1, 3, 5, 7, etc., es decir, todos los impares). |
+| {{ Cssxref(":nth-of-type") }} | Selecciona elementos de entre una lista de elementos hermanos de un tipo determinado (por ejemplo, todos los elementos ` `). Los elementos hermanos están relacionados por una fórmula del tipo _an + b_ (por ejemplo, 2*n* + 1 relacionaría en la secuencia ese tipo de elementos, los números 1, 3, 5, 7, etc., es decir, todos los impares). |
+| {{ Cssxref(":nth-last-child") }} | Selecciona elementos de entre una lista de elementos hermanos, contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo _an+b_ (por ejemplo, 2*n* + 1 r_elacionaría en la secuencia el último de los elementos de este tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final). |
+| {{ Cssxref(":nth-last-of-type") }} | Selecciona los elementos de entre una lista de elementos hermanos que son de un tipo determinado (por ejemplo, elementos ` `), contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo _an+b_ (por ejemplo, 2*n* + 1 relacionaría en la secuencia el último de los elementos de ese tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final). |
+| {{ Cssxref(":only-child") }} | Selecciona un elemento que no tiene elementos hermanos. |
+| {{ Cssxref(":only-of-type") }} | Selecciona un elemento que es el único de su tipo entre sus elementos hermanos. |
+| {{ Cssxref(":optional") }} | Selecciona los elementos de formulario que son innecesarios. |
+| {{ Cssxref(":out-of-range") }} | Selecciona un elemento cuyo valor está fuera de rango. |
+| {{ Cssxref(":past") }} | Selecciona los elementos que se encuentran antes del elemento activo. |
| {{ Cssxref(":placeholder-shown") }} | Selecciona el elemento de entrada que muestra texto de marcador de posición. |
-| {{ Cssxref(":playing") }} | Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede «reproducir» o «pausar», cuando el elemento está «en reproducción». |
-| {{ Cssxref(":paused") }} | Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede “«reproducir» o «pausar» cuando el elemento está «pausado». |
-| {{ Cssxref(":read-only") }} | Selecciona los elementos que el usuario no puede modificar. |
-| {{ Cssxref(":read-write") }} | Selecciona los elementos que el usuario puede modificar. |
-| {{ Cssxref(":required") }} | Selecciona los elementos de formulario que son necesarios. |
-| {{ Cssxref(":right") }} | En [Paged Media](/es/docs/Web/CSS/CSS_Pages) selecciona las páginas de la derecha. |
-| {{ Cssxref(":root") }} | Selecciona un elemento que es la raíz del documento. |
-| {{ Cssxref(":scope") }} | Selecciona cualquier elemento de ámbito. |
-| {{ Cssxref(":valid") }} | Selecciona un elemento como ``, en un estado válido. |
-| {{ Cssxref(":target") }} | Selecciona el elemento al que apunta la URL activa (es decir, cuyo ID coincide con el [identificador de fragmento de la URL](https://en.wikipedia.org/wiki/Fragment_identifier) activo). |
-| {{ Cssxref(":visited") }} | Selecciona los enlaces visitados. |
+| {{ Cssxref(":playing") }} | Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede «reproducir» o «pausar», cuando el elemento está «en reproducción». |
+| {{ Cssxref(":paused") }} | Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede «reproducir» o «pausar» cuando el elemento está «pausado». |
+| {{ Cssxref(":read-only") }} | Selecciona los elementos que el usuario no puede modificar. |
+| {{ Cssxref(":read-write") }} | Selecciona los elementos que el usuario puede modificar. |
+| {{ Cssxref(":required") }} | Selecciona los elementos de formulario que son necesarios. |
+| {{ Cssxref(":right") }} | En [Paged Media](/es/docs/Web/CSS/CSS_Pages) selecciona las páginas de la derecha. |
+| {{ Cssxref(":root") }} | Selecciona un elemento que es la raíz del documento. |
+| {{ Cssxref(":scope") }} | Selecciona cualquier elemento de ámbito. |
+| {{ Cssxref(":valid") }} | Selecciona un elemento como ``, en un estado válido. |
+| {{ Cssxref(":target") }} | Selecciona el elemento al que apunta la URL activa (es decir, cuyo ID coincide con el [identificador de fragmento de la URL](https://en.wikipedia.org/wiki/Fragment_identifier) activo). |
+| {{ Cssxref(":visited") }} | Selecciona los enlaces visitados. |
### Pseudoelementos
-| Selector | Descripción |
-| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| {{ Cssxref("::after") }} | Selecciona el elemento al que se puede aplicar estilo que aparece a continuación del contenido del elemento que lo origina. |
-| {{ Cssxref("::before") }} | Selecciona el elemento al que se puede aplicar estilo que aparece antes del contenido del elemento que lo origina. |
-| {{ Cssxref("::first-letter") }} | Selecciona la primera letra del elemento. |
+| Selector | Descripción |
+| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| {{ Cssxref("::after") }} | Selecciona el elemento al que se puede aplicar estilo que aparece a continuación del contenido del elemento que lo origina. |
+| {{ Cssxref("::before") }} | Selecciona el elemento al que se puede aplicar estilo que aparece antes del contenido del elemento que lo origina. |
+| {{ Cssxref("::first-letter") }} | Selecciona la primera letra del elemento. |
| {{ Cssxref("::first-line") }} | Selecciona la primera línea del elemento de contenido. |
-| {{ Cssxref("::grammar-error") }} | Selecciona una parte del documento que contiene un error de gramática indicado por el navegador. |
-| {{ Cssxref("::selection") }} | Selecciona la parte del documento que ha sido seleccionada. |
+| {{ Cssxref("::grammar-error") }} | Selecciona una parte del documento que contiene un error de gramática indicado por el navegador. |
+| {{ Cssxref("::selection") }} | Selecciona la parte del documento que ha sido seleccionada. |
| {{ Cssxref("::spelling-error") }} | Selecciona una parte del documento que contiene un error de ortografía indicado por el navegador. |
{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}
diff --git a/files/es/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/es/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
index c0e630a25e4950..a6a8fbb97b0634 100644
--- a/files/es/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
+++ b/files/es/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
@@ -59,7 +59,6 @@ Uno de los usos del selector universal es facilitar la legibilidad de los select
```css
article :first-child {
-
}
```
@@ -69,7 +68,6 @@ Para evitar esta confusión podemos añadir al selector `:first-child` el select
```css
article *:first-child {
-
}
```
diff --git a/files/es/learn/css/building_blocks/styling_tables/index.md b/files/es/learn/css/building_blocks/styling_tables/index.md
index be51aaf5745d01..027e56724c2408 100644
--- a/files/es/learn/css/building_blocks/styling_tables/index.md
+++ b/files/es/learn/css/building_blocks/styling_tables/index.md
@@ -33,7 +33,9 @@ Comencemos por echar un vistazo a una tabla HTML típica. Bueno, decimos típica
```html
- Un resumen de los grupos de música punk más famosos del Reino Unido
+
+ Un resumen de los grupos de música punk más famosos del Reino Unido
+
Grupo |
@@ -56,7 +58,7 @@ Comencemos por echar un vistazo a una tabla HTML típica. Bueno, decimos típica
London Calling |
- ... se han eliminado algunas filas por abreviar
+ ... se han eliminado algunas filas por abreviar
The Stranglers |
@@ -88,9 +90,9 @@ En esta sección de aprendizaje activo vamos a aplica estilo a nuestra tabla jun
2. Ahora crea un archivo nuevo llamado `style.css` y guárdalo con el resto de archivos, en la misma carpeta.
3. Enlaza el CSS al HTML copiando la línea siguiente en {{htmlelement("head")}}:
- ```html
-
- ```
+ ```html
+
+ ```
### Espaciado y distribución
@@ -122,7 +124,8 @@ thead th:nth-child(4) {
width: 35%;
}
-th, td {
+th,
+td {
padding: 20px;
}
```
@@ -150,7 +153,10 @@ En primer lugar, hemos ido a [Google Fonts](https://www.google.com/fonts) y hemo
Primero, añade el elemento {{htmlelement ("link")}} siguiente a tu encabezado HTML, justo encima del elemento ``:
```html
-
+
```
Ahora añade el CSS siguiente a tu archivo `style.css`, debajo de la línea añadida anterior:
@@ -159,11 +165,12 @@ Ahora añade el CSS siguiente a tu archivo `style.css`, debajo de la línea aña
/* typography */
html {
- font-family: 'helvetica neue', helvetica, arial, sans-serif;
+ font-family: "helvetica neue", helvetica, arial, sans-serif;
}
-thead th, tfoot th {
- font-family: 'Rock Salt', cursive;
+thead th,
+tfoot th {
+ font-family: "Rock Salt", cursive;
}
th {
@@ -201,14 +208,21 @@ Ahora, ¡a por los gráficos y los colores! Puesto que la tabla rezuma contenido
Empieza añadiendo el CSS siguiente a tu archivo `style.css`, de nuevo al final:
```css
-thead, tfoot {
+thead,
+tfoot {
background: url(leopardskin.jpg);
color: white;
text-shadow: 1px 1px 1px black;
}
-thead th, tfoot th, tfoot td {
- background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+thead th,
+tfoot th,
+tfoot td {
+ background: linear-gradient(
+ to bottom,
+ rgba(0, 0, 0, 0.1),
+ rgba(0, 0, 0, 0.5)
+ );
border: 3px solid purple;
}
```
@@ -257,7 +271,7 @@ Hay una última cosa que hacer con nuestra tabla: aplicar estilo al título. Par
```css
caption {
- font-family: 'Rock Salt', cursive;
+ font-family: "Rock Salt", cursive;
padding: 20px;
font-style: italic;
caption-side: bottom;
diff --git a/files/es/learn/css/building_blocks/the_box_model/index.md b/files/es/learn/css/building_blocks/the_box_model/index.md
index 5389f05a0f44f9..e2e31704610e81 100644
--- a/files/es/learn/css/building_blocks/the_box_model/index.md
+++ b/files/es/learn/css/building_blocks/the_box_model/index.md
@@ -159,7 +159,9 @@ Si quieres que todos tus elementos usen el modelo de cajas alternativo (opción
html {
box-sizing: border-box;
}
-*, *::before, *::after {
+*,
+*::before,
+*::after {
box-sizing: inherit;
}
```
diff --git a/files/es/learn/css/building_blocks/values_and_units/index.md b/files/es/learn/css/building_blocks/values_and_units/index.md
index ced949a9cdcb0e..fecd56efe7bed4 100644
--- a/files/es/learn/css/building_blocks/values_and_units/index.md
+++ b/files/es/learn/css/building_blocks/values_and_units/index.md
@@ -51,7 +51,7 @@ En el ejemplo siguiente hemos establecido el color de nuestro encabezado con una
```css
h1 {
color: black;
- background-color: rgb(197,93,161);
+ background-color: rgb(197, 93, 161);
}
```
@@ -63,11 +63,11 @@ Echemos un vistazo a algunos de los tipos de valores y unidades con los que pued
Al utilizar CSS te puedes encontrar con varios tipos de datos numéricos. Todos los siguientes están clasificados como tipos de datos numéricos:
-| Tipo de datos | Descripción |
-| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [``](/es/docs/Web/CSS/integer) | Un `` es un número entero, como `1024` o `-55`. |
-| [``](/es/docs/Web/CSS/number) | Un `` representa un número decimal; puede tener o no un punto de separación decimal con un componente fraccionario, por ejemplo: `0.255`, `128` o `-1.2`. |
-| `` | Una `` es un `` con una unidad asociada, por ejemplo: `45deg` (grados), `5s` (segundos) o `10px` (píxeles). `` es una categoría general que incluye los tipos [``](/es/docs/Web/CSS/length), [``](/es/docs/Web/CSS/angle), [`
-
-Cocodrilo |
+ Cocodrilo |
+ Pollo |
-Pollo |
-
-Gallina |
+ Gallina |
Gallo |
@@ -455,7 +453,7 @@ Usemos `colspan` y `rowspan` para mejorar esta tabla.
> **Nota:** Puedes encontrar nuestro ejemplo terminado en [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) en GitHub ([o consultarlo en vivo](http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)).
-## Proporcionar un estilo común a las columnas.
+## Proporcionar un estilo común a las columnas
Hay una última característica de la que queremos hablar en este artículo antes de continuar. El HTML tiene un método para definir información de estilo para una columna completa de datos en un solo lugar: los elementos **[``](/es/docs/Web/HTML/Elemento/col)** y **[``](/es/docs/Web/HTML/Elemento/colgroup)**. Estos atributos existen porque especificar el estilo de las columnas puede resultar enojoso e ineficiente; en general hay que especificar la información de estilo en _cada_ `` o ` | ` de la columna, o utilizar un selector complejo como {{cssxref(":nth-child()")}}.
@@ -500,14 +498,13 @@ Esto no es ideal, porque hay que repetir la información de estilo en las tres c
```html
-
-
+
+
+ Dato 1 |
-Dato 1 |
-
-Dato 2 |
+ Dato 2 |
Calcuta |
@@ -526,7 +523,7 @@ Si quisiéramos aplicar la información de estilo a ambas columnas, podríamos i
```html
-
+
```
diff --git a/files/es/learn/html/tables/structuring_planet_data/index.md b/files/es/learn/html/tables/structuring_planet_data/index.md
index 320bbf6346a245..96f03758819da6 100644
--- a/files/es/learn/html/tables/structuring_planet_data/index.md
+++ b/files/es/learn/html/tables/structuring_planet_data/index.md
@@ -1,5 +1,5 @@
---
-title: 'Evaluación: Estructurando datos planetarios'
+title: "Evaluación: Estructurando datos planetarios"
slug: Learn/HTML/Tables/Structuring_planet_data
original_slug: Learn/HTML/Tablas/Structuring_planet_data
---
diff --git a/files/es/learn/javascript/asynchronous/introducing/index.md b/files/es/learn/javascript/asynchronous/introducing/index.md
index 6d454d4ac08ec7..a1881f3893bf78 100644
--- a/files/es/learn/javascript/asynchronous/introducing/index.md
+++ b/files/es/learn/javascript/asynchronous/introducing/index.md
@@ -45,7 +45,7 @@ En este artículo, comenzaremos viendo el problema de las funciones síncronas d
Considere el siguiente código:
```js
-const name = 'Miriam';
+const name = "Miriam";
const greeting = `¡Hola, mi nombre es ${name}!`;
console.log(greeting);
// "¡Hola, mi nombre es Miriam!"
@@ -66,7 +66,7 @@ function makeGreeting(name) {
return `¡Hola, mi nombre es ${name}!`;
}
-const name = 'Miriam';
+const name = "Miriam";
const greeting = makeGreeting(name);
console.log(greeting);
// "¡Hola, mi nombre es Miriam!"
@@ -102,7 +102,7 @@ function isPrime(n) {
return n > 1;
}
-const random = (max) => Math.floor(Math.random() * max);
+const random = (max) => Math.floor(Math.random() * max);
function generatePrimes(quota) {
const primes = [];
@@ -115,15 +115,15 @@ function generatePrimes(quota) {
return primes;
}
-const quota = document.querySelector('#quota');
-const output = document.querySelector('#output');
+const quota = document.querySelector("#quota");
+const output = document.querySelector("#output");
-document.querySelector('#generate').addEventListener('click', () => {
+document.querySelector("#generate").addEventListener("click", () => {
const primes = generatePrimes(quota.value);
output.textContent = `¡Finalizado! se han generado ${quota.value} números primos`;
});
-document.querySelector('#reload').addEventListener('click', () => {
+document.querySelector("#reload").addEventListener("click", () => {
document.location.reload();
});
```
@@ -184,15 +184,15 @@ function generatePrimes(quota) {
return primes;
}
-const quota = document.querySelector('#quota');
-const output = document.querySelector('#output');
+const quota = document.querySelector("#quota");
+const output = document.querySelector("#output");
-document.querySelector('#generate').addEventListener('click', () => {
+document.querySelector("#generate").addEventListener("click", () => {
const primes = generatePrimes(quota.value);
output.textContent = `¡Finalizado! se han generado ${quota.value} números primos`;
});
-document.querySelector('#reload').addEventListener('click', () => {
+document.querySelector("#reload").addEventListener("click", () => {
document.location.reload();
});
```
@@ -232,23 +232,27 @@ pre {
```
```js
-const log = document.querySelector('.event-log');
+const log = document.querySelector(".event-log");
-document.querySelector('#xhr').addEventListener('click', () => {
- log.textContent = '';
+document.querySelector("#xhr").addEventListener("click", () => {
+ log.textContent = "";
const xhr = new XMLHttpRequest();
- xhr.addEventListener('loadend', () => {
+ xhr.addEventListener("loadend", () => {
log.textContent = `${log.textContent}Finalizado con el estado: ${xhr.status}`;
});
- xhr.open('GET', 'https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json');
+ xhr.open(
+ "GET",
+ "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json",
+ );
xhr.send();
- log.textContent = `${log.textContent}Inicio de la solicitud XHR\n`;});
+ log.textContent = `${log.textContent}Inicio de la solicitud XHR\n`;
+});
-document.querySelector('#reload').addEventListener('click', () => {
- log.textContent = '';
+document.querySelector("#reload").addEventListener("click", () => {
+ log.textContent = "";
document.location.reload();
});
```
diff --git a/files/es/learn/javascript/building_blocks/build_your_own_function/index.md b/files/es/learn/javascript/building_blocks/build_your_own_function/index.md
index b9d16fe4131fdf..be4bcf813b7179 100644
--- a/files/es/learn/javascript/building_blocks/build_your_own_function/index.md
+++ b/files/es/learn/javascript/building_blocks/build_your_own_function/index.md
@@ -12,12 +12,12 @@ Con la mayor parte de la teoría esencial tratada en el artículo anterior, este
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Objective: | Para proporcionar algo de práctica en la construcción de una función personalizada, y explicar algunos detalles asociados más útiles. |
-## Aprendizaje activo: construyamos una función.
+## Aprendizaje activo: construyamos una función
La función personalizada que vamos a construir se llamará `displayMessage()`. Mostrará un cuadro de mensaje personalizado en una página web y actuará como un reemplazo personalizado para la función de [alert()](/es/docs/Web/API/Window/alert) incorporada de un navegador. Hemos visto esto antes, pero solo refresquemos nuestros recuerdos. Escriba lo siguiente en la consola de JavaScript de su navegador, en la página que desee:
```js
-alert('This is a message');
+alert("This is a message");
```
La función `alert` tiene un argumento — el string que se muestra en la alerta. Prueba a variar el string para cambiar el mensaje.
@@ -35,42 +35,40 @@ Para empezar, vamos a poner juntos una función básica.
1. Comience accediendo al archivo [function-start.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html) y haciendo una copia local. Verás que el HTML es simple — el body unicamente tiene un botón. También hemos propocionado algunos estilos básicos de CSS para customizar el mensaje y un elemento {{htmlelement("script")}} vacío para poner nuestro JavaScript dentro.
2. Luego añade lo siguiente dentro del elemento `
-
```
@@ -125,7 +121,7 @@ No tienes que entender todo el código por ahora, pero vamos a echar un vistazo
```js
for (var i = 0; i < 100; i++) {
ctx.beginPath();
- ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
ctx.fill();
}
@@ -137,7 +133,7 @@ Si no usáramos un bucle aquí, tendríamos que repetir el siguiente código por
```js
ctx.beginPath();
-ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
ctx.fill();
```
@@ -159,21 +155,21 @@ Aquí tenemos:
1. La palabra reservada `for`, seguida por algunos paréntesis.
2. Dentro de los paréntesis tenemos tres ítems, separados por punto y coma (;):
- 1. Un **inicializador** - Este es usualmente una variable con un número asignado, que aumenta el número de veces que el bucle ha sijo ejecutado. También se le llama **contador** o **variable de conteo**.
- 2. Una **condición de salida** - como se mencionó previamente, ésta define cuando el bucle debería detenerse. Generalmente es una expresión que contiene un operador de comparación, una prueba para verificar ue la condición de término o salida ha sido cumplida.
- 3. Una **expresión final** - que es siempre evaluada o ejecutada cada vez que el bucle ha completado una iteración. Usualmente sirve para modificar al contador (incrementando su valor o algunas veces disminuyendolo), para aproximarse a la condición de salida.
+ 1. Un **inicializador** - Este es usualmente una variable con un número asignado, que aumenta el número de veces que el bucle ha sijo ejecutado. También se le llama **contador** o **variable de conteo**.
+ 2. Una **condición de salida** - como se mencionó previamente, ésta define cuando el bucle debería detenerse. Generalmente es una expresión que contiene un operador de comparación, una prueba para verificar ue la condición de término o salida ha sido cumplida.
+ 3. Una **expresión final** - que es siempre evaluada o ejecutada cada vez que el bucle ha completado una iteración. Usualmente sirve para modificar al contador (incrementando su valor o algunas veces disminuyendolo), para aproximarse a la condición de salida.
3. Algunos corchetes curvos que contienen un bloque de código - este código se ejecutará cada vez que se repita el bucle.
Observa un ejemplo real para poder entender esto más claramente.
```js
-var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
-var info = 'My cats are called ';
-var para = document.querySelector('p');
+var cats = ["Bill", "Jeff", "Pete", "Biggles", "Jasmin"];
+var info = "My cats are called ";
+var para = document.querySelector("p");
for (var i = 0; i < cats.length; i++) {
- info += cats[i] + ', ';
+ info += cats[i] + ", ";
}
para.textContent = info;
@@ -182,33 +178,27 @@ para.textContent = info;
Esto nos da el siguiente resultado:
```html hidden
-
+
-
+
Basic for loop example
-
+
-
-
-
+
-
```
@@ -223,9 +213,9 @@ Esto muestra un bucle siendo usado para iterar sobre los elementos de un arreglo
2. Se le ha dicho que debe ejecutarse hasta que no sea menor que la longitud del arreglo `cats`. Esto es importante - la condición de salida muestra la condicion bajo la cual el bucle seguirá iterando. Así, en este caso, mientras `i < cats.length` sea verdadero, el bucle seguirá ejecutándose.
3. Dentro del bucle, concatenamos el elemento del bucle actual (`cats[i]` es `cats[lo que sea i en ese momento]`) junto con una coma y un espacio, al final de la variable `info`. Así:
- 1. Durante la primera ejecución, `i = 0`, así `cats[0] + ', '` se concatenará con la información ("Bill, ").
- 2. Durante la segunda ejecución, `i = 1`, así `cats[1] + ', '` agregará el siguiente nombre ("Jeff, ").
- 3. Y así sucesivamente. Después de cada vez que se ejecute el bucle, se incrementará en 1 el valod de i (`i++`), entonces el proceso comenzará de nuevo.
+ 1. Durante la primera ejecución, `i = 0`, así `cats[0] + ', '` se concatenará con la información ("Bill, ").
+ 2. Durante la segunda ejecución, `i = 1`, así `cats[1] + ', '` agregará el siguiente nombre ("Jeff, ").
+ 3. Y así sucesivamente. Después de cada vez que se ejecute el bucle, se incrementará en 1 el valod de i (`i++`), entonces el proceso comenzará de nuevo.
4. Cuando `i` sea igual a `cats.length`, el bucle se detendrá, y el navegador se moverá al siguiente segmento de código bajo el bucle.
@@ -242,9 +232,9 @@ Idealmente querríamos cambiar la concatenacion al final de la última iteracion
```js
for (var i = 0; i < cats.length; i++) {
if (i === cats.length - 1) {
- info += 'and ' + cats[i] + '.';
+ info += "and " + cats[i] + ".";
} else {
- info += cats[i] + ', ';
+ info += cats[i] + ", ";
}
}
```
@@ -263,7 +253,7 @@ Digamos que queremos buscar a través de un arreglo de contactos y números tele
```html
-
+
Search
@@ -272,22 +262,29 @@ Digamos que queremos buscar a través de un arreglo de contactos y números tele
Ahora en el JavaScript:
```js
-var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
-var para = document.querySelector('p');
-var input = document.querySelector('input');
-var btn = document.querySelector('button');
-
-btn.addEventListener('click', function() {
+var contacts = [
+ "Chris:2232322",
+ "Sarah:3453456",
+ "Bill:7654322",
+ "Mary:9998769",
+ "Dianne:9384975",
+];
+var para = document.querySelector("p");
+var input = document.querySelector("input");
+var btn = document.querySelector("button");
+
+btn.addEventListener("click", function () {
var searchName = input.value;
- input.value = '';
+ input.value = "";
input.focus();
for (var i = 0; i < contacts.length; i++) {
- var splitContact = contacts[i].split(':');
+ var splitContact = contacts[i].split(":");
if (splitContact[0] === searchName) {
- para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+ para.textContent =
+ splitContact[0] + "'s number is " + splitContact[1] + ".";
break;
} else {
- para.textContent = 'Contact not found.';
+ para.textContent = "Contact not found.";
}
}
});
@@ -300,9 +297,9 @@ btn.addEventListener('click', function() {
3. We store the value entered into the text input in a variable called `searchName`, before then emptying the text input and focusing it again, ready for the next search.
4. Now onto the interesting part, the for loop:
- 1. We start the counter at `0`, run the loop until the counter is no longer less than `contacts.length`, and increment `i` by 1 after each iteration of the loop.
- 2. Inside the loop we first split the current contact (`contacts[i]`) at the colon character, and store the resulting two values in an array called `splitContact`.
- 3. We then use a conditional statement to test whether `splitContact[0]` (the contact's name) is equal to the inputted `searchName`. If it is, we enter a string into the paragraph to report what the contact's number is, and use `break` to end the loop.
+ 1. We start the counter at `0`, run the loop until the counter is no longer less than `contacts.length`, and increment `i` by 1 after each iteration of the loop.
+ 2. Inside the loop we first split the current contact (`contacts[i]`) at the colon character, and store the resulting two values in an array called `splitContact`.
+ 3. We then use a conditional statement to test whether `splitContact[0]` (the contact's name) is equal to the inputted `searchName`. If it is, we enter a string into the paragraph to report what the contact's number is, and use `break` to end the loop.
5. If the contact name does not match the entered search, the paragraph text is set to "Contact not found.", and the loop continues iterating.
@@ -323,52 +320,47 @@ for (var i = 1; i <= num; i++) {
continue;
}
- para.textContent += i + ' ';
+ para.textContent += i + " ";
}
```
Here's the output:
```html hidden
-
+
-
+
Integer squares generator
-
+
+
+
+ Generate integer squares
-
-
- Generate integer squares
-
- Output:
-
+ Output:
-
```
@@ -408,9 +400,9 @@ var i = 0;
while (i < cats.length) {
if (i === cats.length - 1) {
- info += 'and ' + cats[i] + '.';
+ info += "and " + cats[i] + ".";
} else {
- info += cats[i] + ', ';
+ info += cats[i] + ", ";
}
i++;
@@ -441,9 +433,9 @@ var i = 0;
do {
if (i === cats.length - 1) {
- info += 'and ' + cats[i] + '.';
+ info += "and " + cats[i] + ".";
} else {
- info += cats[i] + ', ';
+ info += cats[i] + ", ";
}
i++;
@@ -479,12 +471,12 @@ If you make a mistake, you can always reset the example with the "Reset" button.
```html hidden
Live output
-
-
-
+
Editable code
-Press Esc to move focus away from the code area (Tab inserts a tab character).
+
+ Press Esc to move focus away from the code area (Tab inserts a tab character).
+
-
-
+
+
```
@@ -525,9 +517,9 @@ body {
```
```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
var code = textarea.value;
var userEntry = textarea.value;
@@ -535,38 +527,39 @@ function updateCode() {
eval(textarea.value);
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
updateCode();
});
-solution.addEventListener('click', function() {
- if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+ if (solution.value === "Show solution") {
textarea.value = solutionEntry;
- solution.value = 'Hide solution';
+ solution.value = "Hide solution";
} else {
textarea.value = userEntry;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
}
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 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;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+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
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -578,8 +571,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -590,10 +586,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+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') {
+ if (solution.value === "Show solution") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -630,12 +626,14 @@ If you make a mistake, you can always reset the example with the "Reset" button.
```html hidden
Live output
- Admit:
- Refuse:
+ Admit:
+ Refuse:
Editable code
-Press Esc to move focus away from the code area (Tab inserts a tab character).
+
+ Press Esc to move focus away from the code area (Tab inserts a tab character).
+
-
-
+
+
```
@@ -680,9 +678,9 @@ body {
```
```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
var code = textarea.value;
var userEntry = textarea.value;
@@ -690,38 +688,39 @@ function updateCode() {
eval(textarea.value);
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
updateCode();
});
-solution.addEventListener('click', function() {
- if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+ if (solution.value === "Show solution") {
textarea.value = solutionEntry;
- solution.value = 'Hide solution';
+ solution.value = "Hide solution";
} else {
textarea.value = userEntry;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
}
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 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;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+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
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -733,8 +732,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -745,10 +747,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+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') {
+ if (solution.value === "Show solution") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -810,6 +812,6 @@ If there is anything you didn't understand, feel free to read through the articl
- [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
+- [What's the Best Way to Write a JavaScript For Loop?](https://www.impressivewebs.com/javascript-for-loop/) — some advanced loop best practices
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
diff --git a/files/es/learn/javascript/building_blocks/return_values/index.md b/files/es/learn/javascript/building_blocks/return_values/index.md
index 99f52592553442..769e5a6425ade5 100644
--- a/files/es/learn/javascript/building_blocks/return_values/index.md
+++ b/files/es/learn/javascript/building_blocks/return_values/index.md
@@ -16,8 +16,8 @@ Hay un último concepto esencial para que discutamos en este curso, para cerrar
**Los valores de retorno** son exactamente como suenan: los valores devueltos por la función cuando se completa. Ya has alcanzado los valores de retorno varias veces, aunque es posible que no hayas pensado en ellos explícitamente. Volvamos a un código familiar:
```js
-var myText = 'I am a string';
-var newString = myText.replace('string', 'sausage');
+var myText = "I am a string";
+var newString = myText.replace("string", "sausage");
console.log(newString);
// la función de cadena replace () toma una cadena,
// sustituyendo una subcadena con otra y devoviendo
@@ -38,10 +38,10 @@ To return a value from a custom function, you need to use ... wait for it ... th
```js
function draw() {
- ctx.clearRect(0,0,WIDTH,HEIGHT);
+ ctx.clearRect(0, 0, WIDTH, HEIGHT);
for (var i = 0; i < 100; i++) {
ctx.beginPath();
- ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
ctx.fill();
}
@@ -52,7 +52,7 @@ Inside each loop iteration, three calls are made to the `random()` function, to
```js
function randomNumber(number) {
- return Math.floor(Math.random()*number);
+ return Math.floor(Math.random() * number);
}
```
@@ -60,7 +60,7 @@ This could be written as follows:
```js
function randomNumber(number) {
- var result = Math.floor(Math.random()*number);
+ var result = Math.floor(Math.random() * number);
return result;
}
```
@@ -88,43 +88,43 @@ Let's have a go at writing our own functions featuring return values.
1. First of all, make a local copy of the [function-library.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html) file from GitHub. This is a simple HTML page containing a text {{htmlelement("input")}} field and a paragraph. There's also a {{htmlelement("script")}} element in which we have stored a reference to both HTML elements in two variables. This little page will allow you to enter a number into the text box, and display different numbers related to it in the paragraph below.
2. Let's add some useful functions to this `
+
```
Para usar la API, primero creamos una instancia del objeto `LatLng` usando el constructor `google.maps.LatLng()`, que toma los valores de nuestra {{domxref("Coordinates.latitude")}} y {{domxref("Coordinates.longitude")}} geolocalizada como parámetros:
```js
-var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+var latlng = new google.maps.LatLng(
+ position.coords.latitude,
+ position.coords.longitude,
+);
```
Este objeto quedará establecido como el valor de la propiedad `center` de un objeto de opciones que hemos llamado `myOptions`. Entonces crearemos una instancia de objeto para representar nuestro mapa llamando al constructor de `google.maps.Map()`, pasándole sus dos parámetros — una referencia al elemento {{htmlelement("div")}} donde queremos presentar el mapa (con ID `map_canvas`), y el objeto de opciones que acabamos de definir.
@@ -152,8 +163,8 @@ var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
- disableDefaultUI: true
-}
+ disableDefaultUI: true,
+};
var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
```
@@ -171,23 +182,23 @@ Cuando uses una API, debes estar seguro que conoces dónde están los puntos de
La API del Modelo de Objetos del Navegador (DOM) tiene un punto de acceso todavía más simple — sus características las podemos encontrar colgando del objeto {{domxref("Document")}}, o una instancia de un elemento HTML que queremos modificar de alguna forma, por ejemplo:
```js
-var em = document.createElement('em'); // crear un nuevo elemento em
-var para = document.querySelector('p'); // referencia a un elemento p existente
-em.textContent = 'Hello there!'; // dar al em algo de contenido textual
+var em = document.createElement("em"); // crear un nuevo elemento em
+var para = document.querySelector("p"); // referencia a un elemento p existente
+em.textContent = "Hello there!"; // dar al em algo de contenido textual
para.appendChild(em); // ubicar el em dentro del párrafo
```
Otras APIs tienen puntos de acceso ligeramente más complejos, que a menudo implican crear un contexto específico para escribir el código de la API. Por ejemplo, el objeto de contexto de la API Canvas se crea obteniendo una referencia al elemento {{htmlelement("canvas")}} en el que quieres dibujar, y a continuación invocando su método {{domxref("HTMLCanvasElement.getContext()")}}:
```js
-var canvas = document.querySelector('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.querySelector("canvas");
+var ctx = canvas.getContext("2d");
```
Cualquier cosa que queramos hacerle al canvas, se conseguirá llamando a las propiedades y métodos del objeto de contexto (que es una instancia de {{domxref("CanvasRenderingContext2D")}}), por ejemplo:
```js
-Ball.prototype.draw = function() {
+Ball.prototype.draw = function () {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
@@ -206,17 +217,18 @@ Algunas APIs web no contienen eventos, pero algunas otras sí contienen un buen
El siguiente código aporta un ejemplo simple de cómo se debe usar esto:
```js
-var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+var requestURL =
+ "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
var request = new XMLHttpRequest();
-request.open('GET', requestURL);
-request.responseType = 'json';
+request.open("GET", requestURL);
+request.responseType = "json";
request.send();
-request.onload = function() {
+request.onload = function () {
var superHeroes = request.response;
populateHeader(superHeroes);
showHeroes(superHeroes);
-}
+};
```
> **Nota:** puedes ver este código en acción en nuestro ejemplo [ajax.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html) ([verlo en vivo](http://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html)).
diff --git a/files/es/learn/javascript/first_steps/a_first_splash/index.md b/files/es/learn/javascript/first_steps/a_first_splash/index.md
index 0ae318d7e14749..89ee8c4538fe86 100644
--- a/files/es/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/es/learn/javascript/first_steps/a_first_splash/index.md
@@ -28,111 +28,117 @@ Teniendo esto en mente, veamos el ejemplo que vamos a construir en este artícul
En este artículo vamos a mostrarte cómo construir el juego que puedes ver abajo:
```html hidden
-
+
-
-
-
+
+
Juego adivina el número
-
+
-
+
Juego adivina el número
- Hemos seleccionado un número aleatorio entre 1 y 100. Fíjate si lo puedes adivinar en 10 turnos o menos. Vamos a decirte si tu número es más alto o más bajo.
-
+
+ Hemos seleccionado un número aleatorio entre 1 y 100. Fíjate si lo puedes
+ adivinar en 10 turnos o menos. Vamos a decirte si tu número es más alto o
+ más bajo.
+
+
+
+
+
-
+ function resetGame() {
+ guessCount = 1;
+ const resetParas = document.querySelectorAll(".resultParas p");
+ for (let i = 0; i < resetParas.length; i++) {
+ resetParas[i].textContent = "";
+ }
-
+ resetButton.parentNode.removeChild(resetButton);
+ guessField.disabled = false;
+ guessSubmit.disabled = false;
+ guessField.value = "";
+ guessField.focus();
+ lastResult.style.backgroundColor = "white";
+ randomNumber = Math.floor(Math.random() * 100) + 1;
+ }
+
+
```
@@ -153,21 +159,21 @@ Al observar este resumen, lo primero que podemos hacer es comenzar a desglosar e
5. A continuación, comprobar si el número es correcto.
6. Si es correcto:
- 1. Mostrar un mensaje de felicitaciones.
- 2. Hacer que el jugador no pueda introducir más intentos (esto arruinaría el juego).
- 3. Mostrar un control que permita al jugador volver a empezar el juego.
+ 1. Mostrar un mensaje de felicitaciones.
+ 2. Hacer que el jugador no pueda introducir más intentos (esto arruinaría el juego).
+ 3. Mostrar un control que permita al jugador volver a empezar el juego.
7. Si es incorrecto y al jugador todavía le quedan intentos:
- 1. Decirle al jugador que ha fallado.
- 2. Dejar que el jugador lo intente de nuevo.
- 3. Incrementa el número de intentos en 1.
+ 1. Decirle al jugador que ha fallado.
+ 2. Dejar que el jugador lo intente de nuevo.
+ 3. Incrementa el número de intentos en 1.
8. Si el jugador falla y no le quedan turnos:
- 1. Decirle al jugador que el juego se ha terminado.
- 2. Hacer que el jugador no pueda introducir más intentos (esto arruinaría el juego).
- 3. Mostrar un control que permita al jugador volver a empezar el juego.
+ 1. Decirle al jugador que el juego se ha terminado.
+ 2. Hacer que el jugador no pueda introducir más intentos (esto arruinaría el juego).
+ 3. Mostrar un control que permita al jugador volver a empezar el juego.
9. Una vez que el juego se reinicia, asegúrate de que la lógica del juego y la IU (interfaz de usuario) se restablezcan por completo, luego vuelve al paso 1.
@@ -181,9 +187,7 @@ El lugar donde agregaremos todo nuestro código es dentro del elemento {{htmlele
```html
```
@@ -194,12 +198,12 @@ Empecemos. En primer lugar, agrega las siguientes líneas dentro de tu elemento
```js
let randomNumber = Math.floor(Math.random() * 100) + 1;
-const guesses = document.querySelector('.guesses');
-const lastResult = document.querySelector('.lastResult');
-const lowOrHi = document.querySelector('.lowOrHi');
+const guesses = document.querySelector(".guesses");
+const lastResult = document.querySelector(".lastResult");
+const lowOrHi = document.querySelector(".lowOrHi");
-const guessSubmit = document.querySelector('.guessSubmit');
-const guessField = document.querySelector('.guessField');
+const guessSubmit = document.querySelector(".guessSubmit");
+const guessField = document.querySelector(".guessField");
let guessCount = 1;
let resetButton;
@@ -225,8 +229,9 @@ En nuestro ejemplo:
- Las siguientes dos constantes almacenan referencias a la entrada de texto y al botón "Enviar" del formulario, y se utilizan para controlar las respuestas del jugador más adelante.
```html
-
-
+
+
```
- Nuestras dos variables finales almacenan un conteo de intentos desde 1 (que se usa para tener un registro de cuántos intentos ha hecho el jugador), y una referencia al botón de reinicio que aún no existe (pero que lo hará más adelante).
@@ -239,7 +244,7 @@ A continuación, agrega lo siguiente debajo de tu código JavaScript anterior:
```js
function checkGuess() {
- alert('Soy un marcador de posición');
+ alert("Soy un marcador de posición");
}
```
@@ -275,34 +280,34 @@ Primero veamos los operadores aritméticos, por ejemplo:
También puedes usar el operador `+` para unir cadenas de texto (en programación, esto se llama _concatenación_). Intenta ingresar las siguientes líneas, una por una:
```js
-let name = 'Bingo';
+let name = "Bingo";
name;
-let hello = ' dice hola!';
+let hello = " dice hola!";
hello;
-let greeting = '¡' + name + hello;
+let greeting = "¡" + name + hello;
greeting;
```
También disponemos de algunos atajos de operadores, llamados [operadores de asignación](/es/docs/Web/JavaScript/Reference/Operators/Assignment_Operators) mejorada. Por ejemplo, si quieres simplemente agregar una nueva cadena de texto a una existente y devolver el resultado, puedes hacer esto:
```js
-name += ' dice hola!';
+name += " dice hola!";
```
Esto es equivalente a
```js
-name = name + ' dice hola!';
+name = name + " dice hola!";
```
Cuando ejecutamos pruebas de verdadero/falso (por ejemplo, dentro de condicionales — consulta [abajo](#conditionals)) usamos [operadores de comparación](/es/docs/Web/JavaScript/Reference/Operators/Comparison_Operators). Por ejemplo:
-| Operador | Descripción | Ejemplo |
-| -------- | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| Operador | Descripción | Ejemplo |
+| -------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `===` | Igualdad estricta (¿es exactamente lo mismo?) | 5 === 2 + 4 // false 'Chris' === 'Bob' // false 5 === 2 + 3 // true 2 === '2' // false; número versus cadena |
| `!==` | No igual (¿no es lo mismo?) | 5 !== 2 + 4 // true 'Chris' !== 'Bob' // true 5 !== 2 + 3 // false 2 !== '2' // true; número versus cadena |
-| `<` | Menor que | 6 < 10 // true 20 < 10 // false |
-| `>` | Mayor que | 6 > 10 // false 20 > 10 // true |
+| `<` | Menor que | 6 < 10 // true 20 < 10 // false |
+| `>` | Mayor que | 6 > 10 // false 20 > 10 // true |
### Condicionales
@@ -314,30 +319,30 @@ En este punto, reemplaza su función `checkGuess()` actual con esta versión:
function checkGuess() {
let userGuess = Number(guessField.value);
if (guessCount === 1) {
- guesses.textContent = 'Intentos anteriores: ';
+ guesses.textContent = "Intentos anteriores: ";
}
- guesses.textContent += userGuess + ' ';
+ guesses.textContent += userGuess + " ";
if (userGuess === randomNumber) {
- lastResult.textContent = '¡Felicidades! ¡Lo adivinaste!';
- lastResult.style.backgroundColor = 'green';
- lowOrHi.textContent = '';
+ lastResult.textContent = "¡Felicidades! ¡Lo adivinaste!";
+ lastResult.style.backgroundColor = "green";
+ lowOrHi.textContent = "";
setGameOver();
} else if (guessCount === 10) {
- lastResult.textContent = '¡¡¡Fin del juego!!!';
+ lastResult.textContent = "¡¡¡Fin del juego!!!";
setGameOver();
} else {
- lastResult.textContent = '¡Incorrecto!';
- lastResult.style.backgroundColor = 'red';
- if(userGuess < randomNumber) {
- lowOrHi.textContent = '¡El número es muy bajo!';
- } else if(userGuess > randomNumber) {
- lowOrHi.textContent = '¡El número es muy grande!';
+ lastResult.textContent = "¡Incorrecto!";
+ lastResult.style.backgroundColor = "red";
+ if (userGuess < randomNumber) {
+ lowOrHi.textContent = "¡El número es muy bajo!";
+ } else if (userGuess > randomNumber) {
+ lowOrHi.textContent = "¡El número es muy grande!";
}
}
guessCount++;
- guessField.value = '';
+ guessField.value = "";
guessField.focus();
}
```
@@ -348,7 +353,7 @@ Esto es un montón de código — ¡uf! Repasemos cada sección y expliquemos lo
- A continuación, encontramos nuestro primer bloque de código condicional (líneas 3-5 arriba). Un bloque de código condicional te permite ejecutar código de manera selectiva, dependiendo de si una determinada condición es verdadera o no. Se parece un poco a una función, pero no lo es. La forma más simple de bloque condicional comienza con la palabra clave `if`, luego algunos paréntesis, luego unas llaves. Dentro del paréntesis incluimos una prueba. Si la prueba devuelve `true`, ejecutamos el código dentro de las llaves. Si no, no lo hacemos y pasamos al siguiente segmento del código. En este caso, la prueba está verificando si la variable `guessCount` es igual a `1` (es decir, si este es el primer intento del jugador o no):
```js
- guessCount === 1
+ guessCount === 1;
```
Si es así, hacemos que el contenido del texto del párrafo de intentos sea igual a "`Intentos previos:`". Si no, no lo hacemos.
@@ -369,7 +374,7 @@ A estas alturas, hemos implementado correctamente la función `checkGuess()`, pe
Agrega la siguiente línea debajo de tu función `checkGuess()`:
```js
-guessSubmit.addEventListener('click', checkGuess);
+guessSubmit.addEventListener("click", checkGuess);
```
Aquí estamos agregando un escucha de eventos al botón `guessSubmit`. Este es un método toma dos valores de entrada (llamados _argumentos_) — el tipo de evento que queremos escuchar (en este caso, `click`) como una cadena, y el código que queremos ejecutar cuando ocurra el evento (en este caso la función `checkGuess()`). Ten en cuenta que no es necesario especificar los paréntesis al escribirlo dentro de {{domxref("EventTarget.addEventListener", "addEventListener()")}}.
@@ -384,10 +389,10 @@ Agreguemos la función `setGameOver()` al final de nuestro código y luego repas
function setGameOver() {
guessField.disabled = true;
guessSubmit.disabled = true;
- resetButton = document.createElement('button');
- resetButton.textContent = 'Iniciar nuevo juego';
+ resetButton = document.createElement("button");
+ resetButton.textContent = "Iniciar nuevo juego";
document.body.append(resetButton);
- resetButton.addEventListener('click', resetGame);
+ resetButton.addEventListener("click", resetGame);
}
```
@@ -401,19 +406,19 @@ function setGameOver() {
function resetGame() {
guessCount = 1;
- const resetParas = document.querySelectorAll('.resultParas p');
- for (let i = 0 ; i < resetParas.length ; i++) {
- resetParas[i].textContent = '';
+ const resetParas = document.querySelectorAll(".resultParas p");
+ for (let i = 0; i < resetParas.length; i++) {
+ resetParas[i].textContent = "";
}
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;
- guessField.value = '';
+ guessField.value = "";
guessField.focus();
- lastResult.style.backgroundColor = 'white';
+ lastResult.style.backgroundColor = "white";
randomNumber = Math.floor(Math.random() * 100) + 1;
}
@@ -439,7 +444,9 @@ Una parte del código anterior que debemos examinar detalladamente es el bucle [
Para empezar, de nuevo ve a tu [consola JavaScript de las herramientas para desarrolladores del navegador](/es/docs/Learn/Common_questions/What_are_browser_developer_tools) e introduce lo siguiente:
```js
-for (let i = 1 ; i < 21 ; i++) { console.log(i) }
+for (let i = 1; i < 21; i++) {
+ console.log(i);
+}
```
¿Que sucedió? Los números `1` a `20` se imprimieron en tu consola. Esto se debió al bucle. Un bucle `for` toma tres valores (argumentos) de entrada:
@@ -451,15 +458,15 @@ for (let i = 1 ; i < 21 ; i++) { console.log(i) }
Ahora veamos el ciclo en nuestro juego de adivinan el número — lo siguiente está dentro de la función `resetGame()`:
```js
-const resetParas = document.querySelectorAll('.resultParas p');
-for (let i = 0 ; i < resetParas.length ; i++) {
- resetParas[i].textContent = '';
+const resetParas = document.querySelectorAll(".resultParas p");
+for (let i = 0; i < resetParas.length; i++) {
+ resetParas[i].textContent = "";
}
```
Este código crea una variable que contiene una lista de todos los párrafos dentro de `` usando el método {{domxref("document.querySelectorAll", "querySelectorAll()")}}, luego recorre cada uno de ellos, eliminando el texto contenido a su paso.
-### Una pequeña explicación sobre objetos.
+### Una pequeña explicación sobre objetos
Agreguemos una mejora final más antes de entrar en esta explicación. Agrega la siguiente línea justo debajo de la línea `let resetButton;` cerca de la parte superior de tu JavaScript, luego guarda tu archivo:
@@ -474,7 +481,7 @@ Analicemos lo que está sucediendo aquí con un poco más de detalle. En JavaScr
En este caso particular, primero creamos una constante `guessField` que almacena una referencia al campo de texto del formulario en nuestro HTML — la siguiente línea se puede encontrar entre nuestras declaraciones cerca de la parte superior del código:
```js
-const guessField = document.querySelector('.guessField');
+const guessField = document.querySelector(".guessField");
```
Para obtener esta referencia, usamos el método {{domxref("document.querySelector", "querySelector()")}} del objeto {{domxref("document")}}. `querySelector()` toma un parámetro — un [selector CSS](/es/docs/Learn/CSS/Introduction_to_CSS/Selectors) que selecciona el elemento del que deseas una referencia.
@@ -496,39 +503,39 @@ Juguemos un poco con algunos objetos del navegador.
3. Escribe `guessField` y la consola te mostrará que la variable contiene un elemento {{htmlelement("input")}}. También notarás que la consola te ayuda completando automáticamente los nombres de los objetos que existen dentro del entorno de ejecución, ¡incluidas tus variables!
4. Ahora escribe lo siguiente:
- ```js
- guessField.value = 'Hola';
- ```
+ ```js
+ guessField.value = "Hola";
+ ```
- La propiedad `value` representa el valor actual ingresado en el campo de texto. Verás que al ingresar este comando, ¡hemos cambiado este valor!
+ La propiedad `value` representa el valor actual ingresado en el campo de texto. Verás que al ingresar este comando, ¡hemos cambiado este valor!
5. Ahora intenta escribir `guesses` en la consola y presiona Intro. La consola te muestra que la variable contiene un elemento {{htmlelement("p")}}.
6. Ahora intenta ingresar la siguiente línea:
- ```js
- guesses.value
- ```
+ ```js
+ guesses.value;
+ ```
- El navegador devuelve `undefined`, porque los párrafos no tienen la propiedad `value`.
+ El navegador devuelve `undefined`, porque los párrafos no tienen la propiedad `value`.
7. Para cambiar el texto dentro de un párrafo, necesitas la propiedad {{domxref("Node.textContent", "textContent")}} en su lugar. Prueba esto:
- ```js
- guesses.textContent = '¿Dónde está mi párrafo?';
- ```
+ ```js
+ guesses.textContent = "¿Dónde está mi párrafo?";
+ ```
8. Ahora, solo por diversión. Intenta ingresar las siguientes líneas, una por una:
- ```js
- guesses.style.backgroundColor = 'yellow';
- guesses.style.fontSize = '200%';
- guesses.style.padding = '10px';
- guesses.style.boxShadow = '3px 3px 6px black';
- ```
+ ```js
+ guesses.style.backgroundColor = "yellow";
+ guesses.style.fontSize = "200%";
+ guesses.style.padding = "10px";
+ guesses.style.boxShadow = "3px 3px 6px black";
+ ```
- Cada elemento de una página tiene una propiedad `style`, que a su vez contiene un objeto cuyas propiedades contienen todos los estilos CSS en línea aplicados a ese elemento. Esto nos permite establecer dinámicamente nuevos estilos CSS en elementos utilizando JavaScript.
+ Cada elemento de una página tiene una propiedad `style`, que a su vez contiene un objeto cuyas propiedades contienen todos los estilos CSS en línea aplicados a ese elemento. Esto nos permite establecer dinámicamente nuevos estilos CSS en elementos utilizando JavaScript.
-## Terminamos por ahora...
+## Terminamos por ahora
Así que eso es todo para construir el ejemplo. Llegaste al final, ¡bien hecho! Prueba tu código final, o [juega con nuestra versión final aquí](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Si no puedes hacer que el ejemplo funcione, compáralo con el [código fuente](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html).
diff --git a/files/es/learn/javascript/first_steps/arrays/index.md b/files/es/learn/javascript/first_steps/arrays/index.md
index e56be3293c2f02..02f88be14c4244 100644
--- a/files/es/learn/javascript/first_steps/arrays/index.md
+++ b/files/es/learn/javascript/first_steps/arrays/index.md
@@ -22,10 +22,10 @@ Si no tuvieramos matrices, tendríamos que almacenar cada elemento en una variab
Como en artículos anteriores, aprendamos sobre los aspectos básicos reales de las matrices ingresando algunos ejemplos en una consola de JavaScript. A continuación proporcionamos uno (también puedes [abrir en consola](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) en una pestaña o ventana separadas, o usar la [consola de desarrollador de navegador](/es/docs/Learn/Common_questions/What_are_browser_developer_tools), si lo prefieres).
```html hidden
-
+
-
+
JavaScript console
-
-
-
-
+
```
@@ -137,17 +132,17 @@ Las matrices se construyen con corchetes, que contiene una lista de elementos se
1. Digamos que queríamos almacenar una lista de compras en una matriz — haríamos algo como lo siguiente. Ingresa las siguientes líneas en la consola:
- ```js
- let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
- shopping;
- ```
+ ```js
+ let shopping = ["bread", "milk", "cheese", "hummus", "noodles"];
+ shopping;
+ ```
2. En este caso, cada elemento de la matriz es una cadena, pero ten en cuenta que puedes almacenar cualquier elemento en una matriz — cadena, número, objeto, otra variable, incluso otra matriz. También puedes mezclar y combinar tipos de elementos — no todos tienen que ser números, cadenas, etc. Prueba estos:
- ```js
- let sequence = [1, 1, 2, 3, 5, 8, 13];
- let random = ['tree', 795, [0, 1, 2]];
- ```
+ ```js
+ let sequence = [1, 1, 2, 3, 5, 8, 13];
+ let random = ["tree", 795, [0, 1, 2]];
+ ```
3. Intenta creando un par de matrices por tu cuenta, antes de continuar.
@@ -157,26 +152,26 @@ Puedes entonces acceder a elementos individuales en la matriz mediante la notaci
1. Ingresa lo siguiente en tu consola:
- ```js
- shopping[0];
- // returns "bread"
- ```
+ ```js
+ shopping[0];
+ // returns "bread"
+ ```
2. también puedes modificar un elemento en una matriz simplemente dando a un item de la matriz un nuevo valor. Prueba esto:
- ```js
- shopping[0] = 'tahini';
- shopping;
- // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]
- ```
+ ```js
+ shopping[0] = "tahini";
+ shopping;
+ // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]
+ ```
- > **Nota:** Lo dijimos antes, pero solo como recordatorio — ¡ las computadoras comienzan a contar desde 0!
+ > **Nota:** Lo dijimos antes, pero solo como recordatorio — ¡ las computadoras comienzan a contar desde 0!
3. Ten en cuenta que una matriz dentro de otra matriz se llama matriz multidimensional. Puedes acceder a los elementos de una matriz que estén dentro de otra, encadenando dos pares de corchetes. Por ejemplo, para acceder a uno de los elementos dentro de la matriz, que a su vez, es el tercer elemento dentro de la matriz `random` (ver sección anterior), podríamos hacer algo como esto:
- ```js
- random[2][2];
- ```
+ ```js
+ random[2][2];
+ ```
4. Intenta seguir jugando y haciendo algunas modificaciones más a tus ejemplos de matriz antes de continuar.
@@ -216,97 +211,104 @@ A menudo se te presentarán algunos datos brutos contenidos en una cadena larga
1. Vamos a jugar con esto, para ver como funciona. Primero, crea una cadena en tu consola:
- ```js
- let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
- ```
+ ```js
+ let myData = "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle";
+ ```
2. Ahora dividámoslo en cada coma:
- ```js
- let myArray = myData.split(',');
- myArray;
- ```
+ ```js
+ let myArray = myData.split(",");
+ myArray;
+ ```
3. Finalmente, intenta encontrar la longitud de tu nueva matriz y recuperar algunos elementos de ella:
- ```js
- myArray.length;
- myArray[0]; // the first item in the array
- myArray[1]; // the second item in the array
- myArray[myArray.length-1]; // the last item in the array
- ```
+ ```js
+ myArray.length;
+ myArray[0]; // the first item in the array
+ myArray[1]; // the second item in the array
+ myArray[myArray.length - 1]; // the last item in the array
+ ```
4. También puedes ir en la dirección opuesta usando el método {{jsxref("Array.prototype.join()","join()")}}. Prueba lo siguiente:
- ```js
- let myNewString = myArray.join(',');
- myNewString;
- ```
+ ```js
+ let myNewString = myArray.join(",");
+ myNewString;
+ ```
5. Otra forma de convertir una matriz en cadena es usar el método {{jsxref("Array.prototype.toString()","toString()")}}. `toString()` es posiblemente más simple que `join()` ya que no toma un parámetro, pero es más limitado. Con `join()` puedes especificar diferentes separadores (intenta ejecutar el Paso 4 con un caracter diferente a la coma).
- ```js
- let dogNames = ['Rocket','Flash','Bella','Slugger'];
- dogNames.toString(); //Rocket,Flash,Bella,Slugger
- ```
+ ```js
+ let dogNames = ["Rocket", "Flash", "Bella", "Slugger"];
+ dogNames.toString(); //Rocket,Flash,Bella,Slugger
+ ```
### Agregar y eliminar elementos de la matriz
Todavia no hemos cubierto la posibilidad de agregar y eliminar elementos de la matriz — echemos un vistazo a esto ahora. Usaremos la matriz `myArray` con la que terminamos en la última sección. Si todavía no has seguido esa sección, primero crea la matriz en tu consola:
```js
-let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
+let myArray = [
+ "Manchester",
+ "London",
+ "Liverpool",
+ "Birmingham",
+ "Leeds",
+ "Carlisle",
+];
```
Antes que nada, para añdir o eliminar un elemento al final de una matriz podemos usar {{jsxref("Array.prototype.push()","push()")}} y {{jsxref("Array.prototype.pop()","pop()")}} respectivamente.
1. primero usemos `push()` — nota que necesitas incluir uno o más elementos que desees agregas al final de tu matriz. Prueba esto:
- ```js
- myArray.push('Cardiff');
- myArray;
- myArray.push('Bradford', 'Brighton');
- myArray;
- ```
+ ```js
+ myArray.push("Cardiff");
+ myArray;
+ myArray.push("Bradford", "Brighton");
+ myArray;
+ ```
2. La nueva longitud de la matriz se devuelve cuando finaliza la llamada al método. Si quisieras almacenar la nueva longitud de matriz en una variable, podrías hacer algo como esto:
- ```js
- let newLength = myArray.push('Bristol');
- myArray;
- newLength;
- ```
+ ```js
+ let newLength = myArray.push("Bristol");
+ myArray;
+ newLength;
+ ```
3. Eliminar el último elemento de una matriz es tan simple como ejecutar `pop()` en ella. Prueba esto:
- ```js
- myArray.pop();
- ```
+ ```js
+ myArray.pop();
+ ```
4. El elemento que sé eliminó se devuelve cuando se completa la llamada al método. Para guardar este elemento en una variable, puedes hacer lo siguiente:
- ```js
- let removedItem = myArray.pop();
- myArray;
- removedItem;
- ```
+ ```js
+ let removedItem = myArray.pop();
+ myArray;
+ removedItem;
+ ```
{{jsxref("Array.prototype.unshift()","unshift()")}} y {{jsxref("Array.prototype.shift()","shift()")}} funcionan exactamente igual de `push()` y `pop()`, respectivamente, excepto que funcionan al principio de la matriz, no al final.
1. Primero `unshift()` — prueba el siguiente comando:
- ```js
- myArray.unshift('Edinburgh');
- myArray;
- ```
+ ```js
+ myArray.unshift("Edinburgh");
+ myArray;
+ ```
2. Ahora `shift()`; prueba estos!
- ```js
- let removedItem = myArray.shift();
- myArray;
- removedItem;
- ```
+ ```js
+ let removedItem = myArray.shift();
+ myArray;
+ removedItem;
+ ```
## Aprendizaje activo: ¡Imprimiendo esos productos!
@@ -323,18 +325,16 @@ Volvamos al ejemplo que describimos anteriormente — imprima los nombres de los
Live output
Editable code
- Press Esc to move focus away from the code area (Tab inserts a tab character).
+
+ Press Esc to move focus away from the code area (Tab inserts a tab character).
+
-
-
+
+
```
```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
var code = textarea.value;
var userEntry = textarea.value;
@@ -382,41 +382,41 @@ function updateCode() {
eval(textarea.value);
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
updateCode();
});
-solution.addEventListener('click', function() {
- if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+ if (solution.value === "Show solution") {
textarea.value = solutionEntry;
- solution.value = 'Hide solution';
+ solution.value = "Hide solution";
} else {
textarea.value = userEntry;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
}
updateCode();
});
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i < products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);';
+var jsSolution =
+ "var list = document.querySelector('.output ul');\nvar totalBox = document.querySelector('.output p');\nvar total = 0;\nlist.innerHTML = '';\ntotalBox.textContent = '';\n\nvar products = ['Underpants:6.99',\n 'Socks:5.99',\n 'T-shirt:14.99',\n 'Trousers:31.99',\n 'Shoes:23.99'];\n\nfor(var i = 0; i < products.length; i++) {\n var subArray = products[i].split(':');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + ' — $' + price;\n\n var listItem = document.createElement('li');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = 'Total: $' + total.toFixed(2);";
var solutionEntry = jsSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+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
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
-
if (e.keyCode === 27) {
textarea.blur();
}
@@ -426,8 +426,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -438,10 +441,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+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') {
+ if (solution.value === "Show solution") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -491,19 +494,16 @@ Para completar la aplicación necesitamos:
```html hidden
Live output
Editable code
- Press Esc to move focus away from the code area (Tab inserts a tab character).
-
+
+ Press Esc to move focus away from the code area (Tab inserts a tab character).
+
-
-
+
+
```
@@ -573,9 +573,9 @@ body {
```
```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
var code = textarea.value;
var userEntry = textarea.value;
@@ -583,38 +583,39 @@ function updateCode() {
eval(textarea.value);
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
updateCode();
});
-solution.addEventListener('click', function() {
- if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+ if (solution.value === "Show solution") {
textarea.value = solutionEntry;
- solution.value = 'Hide solution';
+ solution.value = "Hide solution";
} else {
textarea.value = userEntry;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
}
updateCode();
});
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}';
+var jsSolution =
+ "var list = document.querySelector('.output ul');\nvar searchInput = document.querySelector('.output input');\nvar searchBtn = document.querySelector('.output button');\n\nlist.innerHTML = '';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== '') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = '';\n\n for(var i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement('li');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = '';\n searchInput.focus();\n }\n}";
var solutionEntry = jsSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+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
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -626,8 +627,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -638,10 +642,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+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') {
+ if (solution.value === "Show solution") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
diff --git a/files/es/learn/javascript/first_steps/math/index.md b/files/es/learn/javascript/first_steps/math/index.md
index ee8ada68a4a009..7bc0b75e65e69e 100644
--- a/files/es/learn/javascript/first_steps/math/index.md
+++ b/files/es/learn/javascript/first_steps/math/index.md
@@ -38,7 +38,7 @@ La segunda parte de las buenas noticias es que, a diferencia de otros lenguajes
> **Nota:** En realidad, JavaScript tiene un segundo tipo de número, {{Glossary("BigInt")}}, que se utiliza para números enteros muy, muy grandes. Pero para los propósitos de este curso, solo nos preocuparemos por los valores numéricos.
-### Para mí, todo son números.
+### Para mí, todo son números
Juguemos un poco con algunos números para ponernos al día con la sintaxis básica que necesitamos. Coloca los comandos listados abajo en la [consola JavaScript de tus herramientas para desarrolladores](/es/docs/Learn/Common_questions/What_are_browser_developer_tools), o utiliza la sencilla consola integrada que verás abajo si lo prefieres.
@@ -46,22 +46,22 @@ Juguemos un poco con algunos números para ponernos al día con la sintaxis bás
1. Primero que todo, declara un par de variables e inicializalas con un entero y un flotante, respectivamente, luego escribe los nombres de esas variables para chequear que todo esté en orden:
- ```js
- var myInt = 5;
- var myFloat = 6.667;
- myInt;
- myFloat;
- ```
+ ```js
+ var myInt = 5;
+ var myFloat = 6.667;
+ myInt;
+ myFloat;
+ ```
2. Los valores numéricos están escritos sin comillas - Trata de declarar e inicializar un par de variables más que contengan números antes de continuar.
3. Ahora chequea que nuestras variables originales sean del mismo tipo. Hay un operador llamado {{jsxref("Operators/typeof", "typeof")}} en JavaScript hace esto. Digita las dos lineas siguientes:
- ```js
- typeof myInt;
- typeof myFloat;
- ```
+ ```js
+ typeof myInt;
+ typeof myFloat;
+ ```
- Obtendrás `"number"` en ambos casos — esto hace las cosas mucho más fáciles que si diferentes números tuvieran difetentes tipos, y tuvimos que lidiar con ellos de diferentes maneras. Uf !
+ Obtendrás `"number"` en ambos casos — esto hace las cosas mucho más fáciles que si diferentes números tuvieran difetentes tipos, y tuvimos que lidiar con ellos de diferentes maneras. Uf !
## Operadores Aritméticos
@@ -81,28 +81,28 @@ Probablemente no necesitemos enseñarte matemáticas básicas, pero nos gustarí
1. Primero, trata entrando un ejemplo simple por tu cuenta, como
- ```js
- 10 + 7
- 9 * 8
- 60 % 3
- ```
+ ```js
+ 10 + 7;
+ 9 * 8;
+ 60 % 3;
+ ```
2. Puedes tratar declarando e inicializando algunos números en variables, y probar usándolos en la suma - Las variables se comportarán exactamente como los valores que tienen para los fines de la suma. Por ejemplo:
- ```js
- var num1 = 10;
- var num2 = 50;
- 9 * num1;
- num2 / num1;
- ```
+ ```js
+ var num1 = 10;
+ var num2 = 50;
+ 9 * num1;
+ num2 / num1;
+ ```
3. Por último, trate entrando algunas expresiones complejas, como:
- ```js
- 5 + 10 * 3;
- num2 % 9 * num1;
- num2 + num1 / 8 + 2;
- ```
+ ```js
+ 5 + 10 * 3;
+ (num2 % 9) * num1;
+ num2 + num1 / 8 + 2;
+ ```
Es posible que parte de este último conjunto de sumas no te dé el resultado que esperabas; La siguiente sección bien podría dar la respuesta del por qué.
@@ -181,7 +181,7 @@ x = y; // x ahora contiene el mismo valor de y... 4
Pero hay algunos tipos más complejos, que proporcionan atajos útiles para mantener tu código más ordenado y más eficiente. Los más comunes se enumeran a continuación.:
-| Operador | Nombre | Propósito | Ejemplo | Atajo de |
+| Operador | Nombre | Propósito | Ejemplo | Atajo de |
| -------- | ------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------- | -------------------- |
| `+=` | Adición asignación | Suma el valor de la derecha al valor de la variable de la izquierda y returna el nuevo valor | `x = 3; x += 4;` | `x = 3; x = x + 4;` |
| `-=` | Resta asignación | Resta el valor de la derecha, del valor de la variable de la izquierda y retorna el nuevo valor. | `x = 6; x -= 3;` | `x = 6; x = x - 3;` |
@@ -249,18 +249,18 @@ Veremos cómo codificar dicha lógica cuando veamos declaraciones condicionales
```
```js
-var btn = document.querySelector('button');
-var txt = document.querySelector('p');
+var btn = document.querySelector("button");
+var txt = document.querySelector("p");
-btn.addEventListener('click', updateBtn);
+btn.addEventListener("click", updateBtn);
function updateBtn() {
- if (btn.textContent === 'Iniciar máquina') {
- btn.textContent = 'Detener máquina';
- txt.textContent = 'La máquina se inició!';
+ if (btn.textContent === "Iniciar máquina") {
+ btn.textContent = "Detener máquina";
+ txt.textContent = "La máquina se inició!";
} else {
- btn.textContent = 'Iniciar máquina';
- txt.textContent = 'La máquina se detuvo.';
+ btn.textContent = "Iniciar máquina";
+ txt.textContent = "La máquina se detuvo.";
}
}
```
diff --git a/files/es/learn/javascript/first_steps/silly_story_generator/index.md b/files/es/learn/javascript/first_steps/silly_story_generator/index.md
index d5cee09b1396be..b73d191148b072 100644
--- a/files/es/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/es/learn/javascript/first_steps/silly_story_generator/index.md
@@ -50,18 +50,18 @@ Variables y funciones iniciales:
1. en el archivo de texto sin procesar, copia todo el código bajo el encabezado "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" y pégalo en la parte superior del archivo main.js. Esto te dará tres variables que almacenan las referencias al campo de texto "Enter custom name" (`customName`), el botón "Generate random story" (`randomize`), y el elemento {{htmlelement("p")}} al fondo del cuerpo HTML en el que la historia será copiada en (`story`), respectivamente. Además, obtendrás una funcion llamada `randomValueFromArray()` que toma un array, y devuelve uno de los items guardados dentro del array al azar.
2. Ahora observa la segunda sección del archivo de texto sin procesar — "2. RAW TEXT STRINGS". Esta contiene cadenas de texto que actuarán como entrada en nuestro programa. Nos gustaría que mantengas estas variables internas dentro del archivo `main.js`:
- 1. Almacena la primera, la más larga, cadena de texto dentro de una variable llamada `storyText`.
- 2. Almacena el primer conjunto de tres cadenas dentro de un array llamado `insertX`.
- 3. Almacena el segundo conjunto de tres cadenas dentro de un array llamado `insertY`.
- 4. Almacena el tercer conjunto de tres cadenas dentro de un array llamado `insertZ`.
+ 1. Almacena la primera, la más larga, cadena de texto dentro de una variable llamada `storyText`.
+ 2. Almacena el primer conjunto de tres cadenas dentro de un array llamado `insertX`.
+ 3. Almacena el segundo conjunto de tres cadenas dentro de un array llamado `insertY`.
+ 4. Almacena el tercer conjunto de tres cadenas dentro de un array llamado `insertZ`.
Colocar el controlador de evento y la función incompleta:
1. Ahora regresa al archivo de texto sin procesar.
2. Copia el código encontrado bajo el encabezado "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" y pégalo al fondo de tu archivo `main.js` . Esto:
- - Añade un detector de eventos a la variable `randomize`, de manera que cuando al botón que esta representa se le haya dado un click, la función `result()` funcione.
- - Añade una definición de la función parcialmente completada `result()` a tu código. Por el resto de la evaluación, deberás llenar en líneas dentro de esta función para completarla y hacer que trabaje adecuadamente.
+ - Añade un detector de eventos a la variable `randomize`, de manera que cuando al botón que esta representa se le haya dado un click, la función `result()` funcione.
+ - Añade una definición de la función parcialmente completada `result()` a tu código. Por el resto de la evaluación, deberás llenar en líneas dentro de esta función para completarla y hacer que trabaje adecuadamente.
Completando la función `result()`:
@@ -71,10 +71,10 @@ Completando la función `result()`:
4. Dentro del primer bloque `if`, agregue otra llamada al método de reemplazo de cadena para reemplazar el nombre 'Bob' que se encuentra en la cadena `newStory` con la variable de `name`. En este bloque estamos diciendo "Si se ingresó un valor en la entrada de texto `customName` reemplace a Bob en la historia con ese nombre personalizado."
5. Dentro del segundo bloque `if`, se esta verificando si se ha seleccionado el botón de opción `uk` Si es así, queremos convertir los valores de peso y temperatura en la historia de libras and Fahrenheit a stones and grados centígrados. Lo que debe hacer es lo siguiente:
- 1. Busque las fórmulas para convertir libras a stone, and Fahrenheit en grados centígrados.
- 2. Dentro de la línea que define la variable de `weight`, reemplace 300 con un cálculo que convierta 300 libras en stones. Concatenar `'stone'` al final del resultado de la llamada `Math.round()`.
- 3. Al lado de la línea que define la variable de `temperature`, reemplace 94 con un cálculo que convierta 94 Fahrenheit en centígrados. Concatenar `'centigrade'` al final del resultado de la llamada `Math.round()`.
- 4. Justo debajo de las dos definiciones de variables, agregue dos líneas de reemplazo de cadena más que reemplacen '94 fahrenheit 'con el contenido de la variable de `temperature`, y '300 libras' con el contenido de la variable de `weight`.
+ 1. Busque las fórmulas para convertir libras a stone, and Fahrenheit en grados centígrados.
+ 2. Dentro de la línea que define la variable de `weight`, reemplace 300 con un cálculo que convierta 300 libras en stones. Concatenar `'stone'` al final del resultado de la llamada `Math.round()`.
+ 3. Al lado de la línea que define la variable de `temperature`, reemplace 94 con un cálculo que convierta 94 Fahrenheit en centígrados. Concatenar `'centigrade'` al final del resultado de la llamada `Math.round()`.
+ 4. Justo debajo de las dos definiciones de variables, agregue dos líneas de reemplazo de cadena más que reemplacen '94 fahrenheit 'con el contenido de la variable de `temperature`, y '300 libras' con el contenido de la variable de `weight`.
6. Finalmente, en la penúltima línea de la función, haga que la propiedad `textContent` de la variable de la `story` (que hace referencia al párrafo) sea igual a `newStory`.
@@ -84,7 +84,7 @@ Completando la función `result()`:
- Si no estás seguro si el JavaScript está siendo aplicado adecuadamente a tu HTML, intenta remover temporalmente todo el codigo del archivo JavaScript, agregar una instruccion simple que sabes que tendrá un efecto obvio, luego guarda y actualiza. El siguiente ejemplo cambia el fondo de {{htmlelement("html")}} - así la ventana se verá completamente roja si el JavaScript está siendo aplicado adecuadamente.:
```js
- document.querySelector('html').style.backgroundColor = 'red';
+ document.querySelector("html").style.backgroundColor = "red";
```
- [Math.round()](/es/docs/Web/JavaScript/Reference/Global_Objects/Math/round) es un método JavaScript integrado que simplemente redondea el resultado de un cálculo al número entero más cercano.
diff --git a/files/es/learn/javascript/first_steps/strings/index.md b/files/es/learn/javascript/first_steps/strings/index.md
index dbccf9b198bdb9..a5c766f3f6f1a9 100644
--- a/files/es/learn/javascript/first_steps/strings/index.md
+++ b/files/es/learn/javascript/first_steps/strings/index.md
@@ -24,10 +24,10 @@ Casi todos los programas que hemos mostrado hasta ahora en el curso han involucr
A primera vista, las cadenas se tratan de forma similar a los números, pero cuando profundizas empiezas a ver diferencias notables. Comencemos ingresando algunas líneas de texto básicas en la consola para familiarizarnos. Te proveeremos de una aquí abajo (también puedes [abrir la consola](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) en una pestaña o ventana separada, o usar la [consola de desarrollo del navegador](/es/docs/Learn/Common_questions/What_are_browser_developer_tools) si así lo prefieres).
```html hidden
-
+
-
+
Consola JavaScript
-
-
-
-
+
```
@@ -137,72 +132,72 @@ A primera vista, las cadenas se tratan de forma similar a los números, pero cua
1. Para comenzar, ingresa las siguientes líneas:
- ```js
- var string = 'La revolución no será televisada.';
- string;
- ```
+ ```js
+ var string = "La revolución no será televisada.";
+ string;
+ ```
- Al igual que con los números, declaramos una variable, iniciandola con el valor de una cadena, y luego retornamos dicho valor. La única diferencia es que al escribir una cadena, necesitas envolverla con comillas.
+ Al igual que con los números, declaramos una variable, iniciandola con el valor de una cadena, y luego retornamos dicho valor. La única diferencia es que al escribir una cadena, necesitas envolverla con comillas.
2. Si no lo haces, u olvidas una de las comillas, obtendrás un error. Intenta ingresando las siguientes líneas:
- ```js example-bad
- var malString = Esto es una prueba;
- var malString = 'Esto es una prueba;
- var malString = Esto es una prueba';
- ```
+ ```js example-bad
+ var malString = Esto es una prueba;
+ var malString = 'Esto es una prueba;
+ var malString = Esto es una prueba';
+ ```
- Estas líneas no funcionan porque el texto sin comillas alrededor es tomado como nombre de una variable, propiedad, palabra reservada, o algo similar. Si el navegador no las encuentra, entonces se recibe un error( ej. "missing ; before statement"). Si el navegador puede ver dónde comienza una cadena, pero no dónde termine, como se indica en la segunda oración, devuelve error (con "unterminated string literal"). Si tu programa devuelve estos errores, revisa desde el inicio que todas tus cadenas posean sus comillas.
+ Estas líneas no funcionan porque el texto sin comillas alrededor es tomado como nombre de una variable, propiedad, palabra reservada, o algo similar. Si el navegador no las encuentra, entonces se recibe un error( ej. "missing ; before statement"). Si el navegador puede ver dónde comienza una cadena, pero no dónde termine, como se indica en la segunda oración, devuelve error (con "unterminated string literal"). Si tu programa devuelve estos errores, revisa desde el inicio que todas tus cadenas posean sus comillas.
3. Lo siguiente funcionará si previamente definiste la variable `string` — inténtalo:
- ```js
- var maltring = string;
- malString;
- ```
+ ```js
+ var maltring = string;
+ malString;
+ ```
- `malString` ahora tiene el mismo valor que `string`.
+ `malString` ahora tiene el mismo valor que `string`.
### Comillas simples vs. comillas dobles
1. En JavaScript, puedes escoger entre comillas simple y dobles para envolver tus cadenas. Ambas funcionarán correctamente:
- ```js
- var simp = 'Comillas simples.';
- var dobl = "Comillas dobles.";
- simp;
- dobl;
- ```
+ ```js
+ var simp = "Comillas simples.";
+ var dobl = "Comillas dobles.";
+ simp;
+ dobl;
+ ```
2. Hay muy poca diferencia entre las dos, y la que utilices dependerá de tus preferencias personales. Sin embargo, deberías de elegir una y mantenerla; usar diferentes tipos de comillas en el código podría llegar a ser confuso, especialmente si utilizas diferentes comillas en la misma cadena. El siguiente ejemplo devolverá un error:
- ```js example-bad
- var badQuotes = 'What on earth?";
- ```
+ ```js example-bad
+ var badQuotes = 'What on earth?";
+ ```
3. El navegador pensará que la cadena no se ha cerrado correctamente, porque el otro tipo de cita que no estás usando, puede aparecer en la cadena. Por ejemplo, en estos dos casos su uso es correcto:
- ```js
- var sglDbl = 'Would you eat a "fish supper"?';
- var dblSgl = "I'm feeling blue.";
- sglDbl;
- dblSgl;
- ```
+ ```js
+ var sglDbl = 'Would you eat a "fish supper"?';
+ var dblSgl = "I'm feeling blue.";
+ sglDbl;
+ dblSgl;
+ ```
4. Sin embargo, no puedes usar el mismo tipo de comillas en el interior de una cadena que ya las tiene en los extremos. Lo siguiente devuelve error, porque confunde al navegador respecto de dónde termina la cadena:
- ```js example-bad
- var bigmouth = 'I've got no right to take my place...';
- ```
+ ```js example-bad
+ var bigmouth = 'I've got no right to take my place...';
+ ```
- Lo que nos lleva directamente al siguiente tema.
+ Lo que nos lleva directamente al siguiente tema.
### Escapando caracteres en una cadena
Para solucionar nuestro problema anterior, necesitamos "escapar" el asunto de las comillas. Escapar caracteres significa que les hacemos algo para asegurarnos que sean reconocidos como texto, y no parte del código. En JavaScript, colocamos una barra invertida justo antes del caracter. Intenta ésto:
```js
-var bigmouth = 'I\'ve got no right to take my place...';
+var bigmouth = "I've got no right to take my place...";
bigmouth;
```
@@ -212,28 +207,28 @@ Ahora funciona correctamente. Puedes escapar otros caracteres de la misma forma,
1. Concatenar es una elegante palabra de la programación que significa: "unir". Para unir cadenas en JavaScript el símbolo de más (+), el mismo operador que usamos para sumar números, pero en este contexto hace algo diferente. Vamos a probar un ejemplo en nuestra consola.
- ```js
- var one = 'Hello, ';
- var two = 'how are you?';
- var joined = one + two;
- joined;
- ```
+ ```js
+ var one = "Hello, ";
+ var two = "how are you?";
+ var joined = one + two;
+ joined;
+ ```
- El resultado de este código es una variable llamada `joined`, que contiene el valor: "Hello, how are you?" ("Hola, cómo estas?").
+ El resultado de este código es una variable llamada `joined`, que contiene el valor: "Hello, how are you?" ("Hola, cómo estas?").
2. En la última instancia del código, unimos dos strings, pero lo puedes hacer con cuantas desees, mientras que incluyas el símbolo de `+` entre ellas. Prueba esto:
- ```js
- var multiple = one + one + one + one + two;
- multiple;
- ```
+ ```js
+ var multiple = one + one + one + one + two;
+ multiple;
+ ```
3. También puedes usar una combinación de variables y strings reales. Prueba esto:
- ```js
- var response = one + 'I am fine — ' + two;
- response;
- ```
+ ```js
+ var response = one + "I am fine — " + two;
+ response;
+ ```
> **Nota:** Cuando ingresas una string real en tu código, entre comillas simples o dobles, se llama **string literal**.
@@ -246,12 +241,12 @@ Vamos a revisar la concatenación que usamos en la siguiente acción — veamos
```
```js
-var button = document.querySelector('button');
+var button = document.querySelector("button");
-button.onclick = function() {
- var name = prompt('What is your name?');
- alert('Hello ' + name + ', nice to see you!');
-}
+button.onclick = function () {
+ var name = prompt("What is your name?");
+ alert("Hello " + name + ", nice to see you!");
+};
```
{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}
@@ -262,38 +257,38 @@ Aquí estamos usando una función {{domxref("Window.prompt()", "Window.prompt()"
1. Entonces, ¿qué sucede cuando intentamos agregar (o concatenar) un string y un número? Vamos a probar en la consola:
- ```js
- 'Front ' + 242;
- ```
+ ```js
+ "Front " + 242;
+ ```
- Podrías esperar que diera un error, pero funciona a la perfección. Tratar de representar un string como un número no tiene sentido, pero representar un número como string si que lo tiene, así que el navegador convierte el número en una string y las muestra juntas.
+ Podrías esperar que diera un error, pero funciona a la perfección. Tratar de representar un string como un número no tiene sentido, pero representar un número como string si que lo tiene, así que el navegador convierte el número en una string y las muestra juntas.
2. Incluso puedes hacer esto con dos números — puedes forar un número para que se convierta en una string envolviéndolo entre comillas. Prueba lo siguiente (estamos utilizando el operador `typeof` para verificar si la variable es un número o una cadena):
- ```js
- var myDate = '19' + '67';
- typeof myDate;
- ```
+ ```js
+ var myDate = "19" + "67";
+ typeof myDate;
+ ```
3. Si tienes una variable numérica, que deseas convertir en una string, pero no cambiar de otra forma, o una variable string, que deseas convertir a número, pero no cambiarla de otra forma, puedes usar las siguientes construcciones:
- - El objecto {{jsxref("Number")}} convertirá cualquier cosa que se le pase en un número, si puede. Intenta lo siguiente:
+ - El objecto {{jsxref("Number")}} convertirá cualquier cosa que se le pase en un número, si puede. Intenta lo siguiente:
- ```js
- var myString = '123';
- var myNum = Number(myString);
- typeof myNum;
- ```
+ ```js
+ var myString = "123";
+ var myNum = Number(myString);
+ typeof myNum;
+ ```
- - Por otra parte, cada número tiene un método llamado [`toString()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) que convertirá el equivalente en una string. Prueba esto:
+ - Por otra parte, cada número tiene un método llamado [`toString()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) que convertirá el equivalente en una string. Prueba esto:
- ```js
- var myNum = 123;
- var myString = myNum.toString();
- typeof myString;
- ```
+ ```js
+ var myNum = 123;
+ var myString = myNum.toString();
+ typeof myString;
+ ```
- Estas construcciones pueden ser muy útiles en ciertas situaciones. Por ejemplo, si un usuario introduce un número en un campo de texto de un formulario, será un string. Sin embargo, si quieres añadir ese número a algo, lo necesitas convertir a número, así que puedes usar esta construcción para hacerlo. Hicimos exactamente esto en el ejercicio de ejemplo: Juego adivina el número en la línea 54 ([Juego Adivina el número, en la línea 54](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L54)).
+ Estas construcciones pueden ser muy útiles en ciertas situaciones. Por ejemplo, si un usuario introduce un número en un campo de texto de un formulario, será un string. Sin embargo, si quieres añadir ese número a algo, lo necesitas convertir a número, así que puedes usar esta construcción para hacerlo. Hicimos exactamente esto en el ejercicio de ejemplo: Juego adivina el número en la línea 54 ([Juego Adivina el número, en la línea 54](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L54)).
## Prueba tus habilidades
diff --git a/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.md b/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.md
index 18b840579623ca..ec7ea2b1de16ee 100644
--- a/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.md
+++ b/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.md
@@ -1,5 +1,5 @@
---
-title: 'Comprueba tus habilidades: Matematicas'
+title: "Comprueba tus habilidades: Matematicas"
slug: Learn/JavaScript/First_steps/Test_your_skills:_Math
---
@@ -63,7 +63,7 @@ Si desea que se evalúe su trabajo, o está atascado y quiere pedir ayuda:
1. Coloque su trabajo en un editor compartible en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) o [Glitch](https://glitch.com/). Puede escribir el código usted mismo o usar los archivos de punto de partida vinculados en las secciones anteriores.
2. Escriba una publicación solicitando evaluación o ayuda en la [categoría de aprendizaje del foro de Discourse de MDN](https://discourse.mozilla.org/c/mdn/learn). Su publicación debe incluir:
- - Un título descriptivo como "Evaluación buscada para la prueba de habilidad de Matemáticas 1".
- - Detalles de lo que ya ha probado y lo que le gustaría que hiciéramos, por ejemplo si está atascado y necesita ayuda, o desea una evaluación.
- - Un enlace al ejemplo que desea evaluar o con el que necesita ayuda, en un editor compartible en línea (como se mencionó en el paso 1). Esta es una buena práctica para comenzar: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.
- - Un enlace a la tarea real o página de evaluación, para que podamos encontrar la pregunta con la que necesita ayuda.
+ - Un título descriptivo como "Evaluación buscada para la prueba de habilidad de Matemáticas 1".
+ - Detalles de lo que ya ha probado y lo que le gustaría que hiciéramos, por ejemplo si está atascado y necesita ayuda, o desea una evaluación.
+ - Un enlace al ejemplo que desea evaluar o con el que necesita ayuda, en un editor compartible en línea (como se mencionó en el paso 1). Esta es una buena práctica para comenzar: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.
+ - Un enlace a la tarea real o página de evaluación, para que podamos encontrar la pregunta con la que necesita ayuda.
diff --git a/files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.md b/files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.md
index 44d833df977b76..3aed59995fc38f 100644
--- a/files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.md
+++ b/files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.md
@@ -1,5 +1,5 @@
---
-title: 'Prueba tus habilidades: Strings'
+title: "Prueba tus habilidades: Strings"
slug: Learn/JavaScript/First_steps/Test_your_skills:_Strings
original_slug: Learn/JavaScript/First_steps/Prueba_tus_habilidades:_Strings
---
@@ -64,9 +64,9 @@ En la tarea de cadena final, te hemos dado el nombre de un teorema, dos valores
1. Cámbiala de un literal de cadena normal a una plantilla literal.
2. Reemplaza los cuatro asteriscos con cuatro marcadores de posición en la plantilla literal. Estos deben ser:
- 1. El nombre del teorema.
- 2. Los dos valores numéricos que tenemos.
- 3. La longitud de la hipotenusa de un triángulo rectángulo, dado que las longitudes de los otros dos lados son iguales a los dos valores que tenemos. Deberás buscar cómo calcular esto a partir de lo que tienes. Haz el cálculo dentro del marcador de posición.
+ 1. El nombre del teorema.
+ 2. Los dos valores numéricos que tenemos.
+ 3. La longitud de la hipotenusa de un triángulo rectángulo, dado que las longitudes de los otros dos lados son iguales a los dos valores que tenemos. Deberás buscar cómo calcular esto a partir de lo que tienes. Haz el cálculo dentro del marcador de posición.
Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:
@@ -83,7 +83,7 @@ Si deseas que se evalúe tu trabajo o estás atascado y deseas pedir ayuda:
1. Coloca tu trabajo en un editor que se pueda compartir en línea, como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) o [Glitch](https://glitch.com/). Puedes escribir el código tú mismo o utilizar los archivos de punto de partida vinculados en las secciones anteriores.
2. Escribe una publicación solicitando evaluación y/o ayuda en la [categoría de aprendizaje del foro de discusión de MDN](https://discourse.mozilla.org/c/mdn/learn). Tu publicación debe incluir:
- - Un título descriptivo como "Se busca evaluación para la prueba de habilidad de Cadenas 1".
- - Detalles de lo que ya has probado y lo que te gustaría que hiciéramos, p. ej. si estás atascado y necesitas ayuda, o quiere una evaluación.
- - Un enlace al ejemplo que deseas evaluar o con el que necesitas ayuda, en un editor que se pueda compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para entrar — es muy difícil ayudar a alguien con un problema de codificación si no puedes ver su código.
- - Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que deseas ayuda.
+ - Un título descriptivo como "Se busca evaluación para la prueba de habilidad de Cadenas 1".
+ - Detalles de lo que ya has probado y lo que te gustaría que hiciéramos, p. ej. si estás atascado y necesitas ayuda, o quiere una evaluación.
+ - Un enlace al ejemplo que deseas evaluar o con el que necesitas ayuda, en un editor que se pueda compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para entrar — es muy difícil ayudar a alguien con un problema de codificación si no puedes ver su código.
+ - Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que deseas ayuda.
diff --git a/files/es/learn/javascript/first_steps/test_your_skills_colon__variables/index.md b/files/es/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
index 14d48740fe47b3..d05cfb404e0b9e 100644
--- a/files/es/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
+++ b/files/es/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
@@ -1,5 +1,5 @@
---
-title: '¡Pon a prueba tus habilidades!: Variables'
+title: "¡Pon a prueba tus habilidades!: Variables"
slug: Learn/JavaScript/First_steps/Test_your_skills:_variables
---
@@ -56,7 +56,7 @@ Si deseas que se evalúe tu trabajo o estás atascado y deseas pedir ayuda:
1. Coloca tu trabajo en un editor que se pueda compartir en línea, como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) o [Glitch](https://glitch.com/). Puedes escribir el código tú mismo o utilizar los archivos de punto de partida vinculados en las secciones anteriores.
2. Escribe una publicación solicitando evaluación y/o ayuda en la [categoría de aprendizaje del foro de discusión de MDN](https://discourse.mozilla.org/c/mdn/learn). Tu publicación debe incluir:
- - Un título descriptivo como Evaluación deseada para la prueba de habilidad de Variables 1.
- - Detalles de lo que ya has probado y lo que te gustaría que hiciéramos, p. ej. si estás atascado y necesitas ayuda, o quieres una evaluación.
- - Un enlace al ejemplo que deseas evaluar o con el que necesitas ayuda, en un editor que se pueda compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para empezar — es muy difícil ayudar a alguien con un problema de codificación si no puedes ver su código.
- - Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que deseas ayuda.
+ - Un título descriptivo como Evaluación deseada para la prueba de habilidad de Variables 1.
+ - Detalles de lo que ya has probado y lo que te gustaría que hiciéramos, p. ej. si estás atascado y necesitas ayuda, o quieres una evaluación.
+ - Un enlace al ejemplo que deseas evaluar o con el que necesitas ayuda, en un editor que se pueda compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para empezar — es muy difícil ayudar a alguien con un problema de codificación si no puedes ver su código.
+ - Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que deseas ayuda.
diff --git a/files/es/learn/javascript/first_steps/useful_string_methods/index.md b/files/es/learn/javascript/first_steps/useful_string_methods/index.md
index 94a4ff01f2379f..137771b0d571c6 100644
--- a/files/es/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/es/learn/javascript/first_steps/useful_string_methods/index.md
@@ -16,7 +16,7 @@ Ahora que hemos analizado los conceptos básicos de las cadenas, aumentemos la v
Ya lo dijimos antes, y lo diremos de nuevo — _todo_ es un objeto en JavaScript. Cuando creas una cadena, por ejemplo, usando:
```js
-let string = 'This is my string';
+let string = "This is my string";
```
Tu variable se convierte en una instancia del objeto cadena y, como resultado, tiene una gran cantidad de propiedades y métodos disponibles. Puedes ver esto si vas a la página de objeto {{jsxref("String")}} y miras la lista al costado de la página.
@@ -26,10 +26,10 @@ Tu variable se convierte en una instancia del objeto cadena y, como resultado, t
Ingresemos algunos ejemplos en una nueva consola. A continuación, proporcionamos uno (también puedes [abrir esta consola](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) en una ventana o pestaña por separado, o si prefieres usar la [consola de desarrolladores del navegador](/es/docs/Learn/Common_questions/What_are_browser_developer_tools)).
```html hidden
-
+
-
+
JavaScript console
-
-
-
-
+
```
@@ -136,7 +131,7 @@ Ingresemos algunos ejemplos en una nueva consola. A continuación, proporcionamo
Esto es fácil — simplemente usa la propiedad {{jsxref("String.prototype.length", "length")}} . Intenta ingresar las siguientes líneas:
```js
-let browserType = 'mozilla';
+let browserType = "mozilla";
browserType.length;
```
@@ -153,7 +148,7 @@ browserType[0];
¡ Las computadoras cuentan desde 0, no desde 1! Para extraer el último caracter de _cualquier_ cadena, podríamos usar la siguiente línea, combinando esta técnica con la propiedad `length` que vimos arriba:
```js
-browserType[browserType.length-1];
+browserType[browserType.length - 1];
```
El largo de "mozilla" es 7, pero es porque el contador comienza en 0, la posición del caracter es 6, por lo tanto, necesitamos `length-1`. Puedes usar esto para, por ejemplo, encontrar la primera letra de una serie de cadenas y ordenarlas alfabéticamente.
@@ -162,43 +157,43 @@ El largo de "mozilla" es 7, pero es porque el contador comienza en 0, la posici
1. Algunas veces querrás encontrar si hay una cadena más pequeña dentro de una más grande (generalmente decimos _si una subcadena está presente dentro de una cadena_). Esto se puede hacer utilizando el método {{jsxref("String.prototype.indexOf()", "indexOf()")}}, que toma un único [parámetro](/es/docs/Glossary/Parameter) — la subcadena que deseas buscar. Intenta esto:
- ```js
- browserType.indexOf('zilla');
- ```
+ ```js
+ browserType.indexOf("zilla");
+ ```
- Esto nos dá un resultado de 2, porque la subcadena "zilla" comienza en la posición 2 (0, 1, 2 — por tanto 3 caracteres en total) dentro de "mozilla". Tal código podría usarse para filtrar cadena. Por ejemplo, podemos tener una lista de direcciones web y solo queremos imprimir las que contienen "mozilla".
+ Esto nos dá un resultado de 2, porque la subcadena "zilla" comienza en la posición 2 (0, 1, 2 — por tanto 3 caracteres en total) dentro de "mozilla". Tal código podría usarse para filtrar cadena. Por ejemplo, podemos tener una lista de direcciones web y solo queremos imprimir las que contienen "mozilla".
2. Esto se puede hacer de otra manera, que posiblemente sea aún más efectiva. Intenta lo siguiente:
- ```js
- browserType.indexOf('vanilla');
- ```
+ ```js
+ browserType.indexOf("vanilla");
+ ```
- Esto debería darte un resultado de `-1` — Esto se devuelve cuando la subcadena, en este caso 'vanilla', no es encontrada en la cadena principal.
+ Esto debería darte un resultado de `-1` — Esto se devuelve cuando la subcadena, en este caso 'vanilla', no es encontrada en la cadena principal.
- Puedes usar esto para encontrar todas las instancias de las cadenas que **no** contengan la subcadena 'mozilla', o **hacerlo,** si usas el operador de negación, como se muestra a continuación. Podrías hacer algo como esto:
+ Puedes usar esto para encontrar todas las instancias de las cadenas que **no** contengan la subcadena 'mozilla', o **hacerlo,** si usas el operador de negación, como se muestra a continuación. Podrías hacer algo como esto:
- ```js
- if(browserType.indexOf('mozilla') !== -1) {
- // do stuff with the string
- }
- ```
+ ```js
+ if (browserType.indexOf("mozilla") !== -1) {
+ // do stuff with the string
+ }
+ ```
3. Cuando sabes donde comienza una subcadena dentro de una cadena, y sabes hasta cuál caracter deseas que termine, puede usarse {{jsxref("String.prototype.slice()", "slice()")}} para extraerla. Prueba lo siguiente:
- ```js
- browserType.slice(0,3);
- ```
+ ```js
+ browserType.slice(0, 3);
+ ```
- Esto devuelve "moz" — El primer parámetro es la posición del caracter en la que comenzar a extraer, y el segundo parámetro es la posición del caracter posterior al último a ser extraído. Por lo tanto, el corte ocurre desde la primera posición en adelante, pero excluyendo la última posición. En este ejemplo, dado que el índice inicial es 0, el segundo parámetro es igual a la longitud de la cadena que se devuelve.
+ Esto devuelve "moz" — El primer parámetro es la posición del caracter en la que comenzar a extraer, y el segundo parámetro es la posición del caracter posterior al último a ser extraído. Por lo tanto, el corte ocurre desde la primera posición en adelante, pero excluyendo la última posición. En este ejemplo, dado que el índice inicial es 0, el segundo parámetro es igual a la longitud de la cadena que se devuelve.
4. Además, si sabes que deseas extraer todos los caracteres restantes de una cadena después de cierto caracter, ¡no necesitas incluir el segundo parámetro! En cambio, solo necesitas incluir la posición del caracter desde donde deseas extraer los caracteres restante en la cadena. Prueba lo siguiente:
- ```js
- browserType.slice(2);
- ```
+ ```js
+ browserType.slice(2);
+ ```
- Esto devuelve "zilla" — debido a que la posición del caracter de 2 es la letra z, y como no incluiste un segundo parámetro, la subcadena que que se devolvío fué el resto de los caracteres de la cadena.
+ Esto devuelve "zilla" — debido a que la posición del caracter de 2 es la letra z, y como no incluiste un segundo parámetro, la subcadena que que se devolvío fué el resto de los caracteres de la cadena.
> **Nota:** El segundo parámetro de `slice()` es opcional: si no lo incluyes, el corte termina al final de la cadena original. Hay otras opciones también; estudia la página {{jsxref("String.prototype.slice()", "slice()")}} para ver que mas puedes averiguar.
@@ -209,7 +204,7 @@ Los métodos de cadena {{jsxref("String.prototype.toLowerCase()", "toLowerCase()
Intentemos ingresar las siguentes líneas para ver que sucede:
```js
-let radData = 'My NaMe Is MuD';
+let radData = "My NaMe Is MuD";
radData.toLowerCase();
radData.toUpperCase();
```
@@ -221,7 +216,7 @@ En una cadena puedes reemplazar una subcadena por otra usando el método {{jsxre
Toma dos parámetros — la cadena que deseas reemplazar, y la cadena con la que deseas reemplazarla. Prueba este ejemplo:
```js
-browserType.replace('moz','van');
+browserType.replace("moz", "van");
```
Ten en cuenta que para obtener realmente el valor actualizado reflejado en la variable `browserType` en un programa real, debes establecer que el valor de la variable sea el resultado de la operación; No solo actualiza el valor de la subcadena automáticamente. Así que tendrías que escribir esto: `browserType = browserType.replace('moz','van');`
@@ -244,15 +239,13 @@ En el primer ejercicio, comenzamos de manera simple — tenemos una matríz de m
Live output
Editable code
- Press Esc to move focus away from the code area (Tab inserts a tab character).
+
+ Press Esc to move focus away from the code area (Tab inserts a tab character).
+
-
-
+
+
```
@@ -305,9 +298,9 @@ body {
```
```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
var code = textarea.value;
var userEntry = textarea.value;
@@ -315,38 +308,39 @@ function updateCode() {
eval(textarea.value);
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
updateCode();
});
-solution.addEventListener('click', function() {
- if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+ if (solution.value === "Show solution") {
textarea.value = solutionEntry;
- solution.value = 'Hide solution';
+ solution.value = "Hide solution";
} else {
textarea.value = userEntry;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
}
updateCode();
});
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n \'Merry Christmas my love\',\n \'A happy Christmas to all the family\',\n \'You\\\'re all I want for Christmas\',\n \'Get well soon\'];\n\nfor(var i = 0; i < greetings.length; i++) {\n var input = greetings[i];\n if(greetings[i].indexOf(\'Christmas\') !== -1) {\n var result = input;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n }\n}';
+var jsSolution =
+ "var list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar greetings = ['Happy Birthday!',\n 'Merry Christmas my love',\n 'A happy Christmas to all the family',\n 'You\\'re all I want for Christmas',\n 'Get well soon'];\n\nfor(var i = 0; i < greetings.length; i++) {\n var input = greetings[i];\n if(greetings[i].indexOf('Christmas') !== -1) {\n var result = input;\n var listItem = document.createElement('li');\n listItem.textContent = result;\n list.appendChild(listItem);\n }\n}";
var solutionEntry = jsSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+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
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -358,8 +352,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -370,10 +367,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+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') {
+ if (solution.value === "Show solution") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -400,15 +397,13 @@ En este ejercicio tenemos los nombres de las ciudades del Reino Unido, Pero las
Live output
Editable code
- Press Esc to move focus away from the code area (Tab inserts a tab character).
+
+ Press Esc to move focus away from the code area (Tab inserts a tab character).
+
-
-
+
+
```
@@ -454,9 +449,9 @@ body {
```
```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
var code = textarea.value;
var userEntry = textarea.value;
@@ -464,38 +459,39 @@ function updateCode() {
eval(textarea.value);
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
updateCode();
});
-solution.addEventListener('click', function() {
- if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+ if (solution.value === "Show solution") {
textarea.value = solutionEntry;
- solution.value = 'Hide solution';
+ solution.value = "Hide solution";
} else {
textarea.value = userEntry;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
}
updateCode();
});
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i < cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}';
+var jsSolution =
+ "var list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];\n\nfor(var i = 0; i < cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement('li');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}";
var solutionEntry = jsSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+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
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -507,8 +503,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -519,10 +518,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+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') {
+ if (solution.value === "Show solution") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -560,15 +559,13 @@ Recomendamos hacerlo así:
Live output
Editable code
- Press Esc to move focus away from the code area (Tab inserts a tab character).
+
+ Press Esc to move focus away from the code area (Tab inserts a tab character).
+
-
-
+
+
```
@@ -619,9 +616,9 @@ body {
```
```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
var code = textarea.value;
var userEntry = textarea.value;
@@ -629,38 +626,39 @@ function updateCode() {
eval(textarea.value);
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
updateCode();
});
-solution.addEventListener('click', function() {
- if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+ if (solution.value === "Show solution") {
textarea.value = solutionEntry;
- solution.value = 'Hide solution';
+ solution.value = "Hide solution";
} else {
textarea.value = userEntry;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
}
updateCode();
});
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n \'GNF576746573fhdg4737dh4;Greenfield\',\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n \'SYB4f65hf75f736463;Stalybridge\',\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i < stations.length; i++) {\n var input = stations[i];\n var code = input.slice(0,3);\n var semiC = input.indexOf(\';\');\n var name = input.slice(semiC + 1);\n var result = code + \': \' + name;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n}';
+var jsSolution =
+ "var list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar stations = ['MAN675847583748sjt567654;Manchester Piccadilly',\n 'GNF576746573fhdg4737dh4;Greenfield',\n 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',\n 'SYB4f65hf75f736463;Stalybridge',\n 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];\n\nfor(var i = 0; i < stations.length; i++) {\n var input = stations[i];\n var code = input.slice(0,3);\n var semiC = input.indexOf(';');\n var name = input.slice(semiC + 1);\n var result = code + ': ' + name;\n var listItem = document.createElement('li');\n listItem.textContent = result;\n list.appendChild(listItem);\n}";
var solutionEntry = jsSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+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
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -672,8 +670,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -684,10 +685,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+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') {
+ if (solution.value === "Show solution") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
diff --git a/files/es/learn/javascript/first_steps/variables/index.md b/files/es/learn/javascript/first_steps/variables/index.md
index 973e6e3e7354ef..352f9850c18cdf 100644
--- a/files/es/learn/javascript/first_steps/variables/index.md
+++ b/files/es/learn/javascript/first_steps/variables/index.md
@@ -24,12 +24,12 @@ Una variable es un contenedor para un valor, como un número que podríamos usar
```
```js
-const button = document.querySelector('button');
+const button = document.querySelector("button");
-button.onclick = function() {
- let name = prompt('¿Cuál es tu nombre?');
- alert('¡Hola ' + name + ', encantado de verte!');
-}
+button.onclick = function () {
+ let name = prompt("¿Cuál es tu nombre?");
+ alert("¡Hola " + name + ", encantado de verte!");
+};
```
{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}
@@ -99,7 +99,7 @@ scoobyDoo;
Una vez que hayas declarado una variable, la puedes iniciar con un valor. Para ello, escribe el nombre de la variable, seguido de un signo igual (`=`), seguido del valor que deseas darle. Por ejemplo:
```js
-myName = 'Chris';
+myName = "Chris";
myAge = 37;
```
@@ -113,7 +113,7 @@ myAge;
Puedes declarar e iniciar una variable al mismo tiempo, así:
```js
-let myDog = 'Rover';
+let myDog = "Rover";
```
Esto probablemente es lo que harás la mayor parte del tiempo, ya que es más rápido que realizar las dos acciones en dos líneas separadas.
@@ -129,7 +129,7 @@ A continuación se explican un par de diferencias simples. No abordaremos todas
Para empezar, si escribes un programa JavaScript de varias líneas que declara e inicia una variable, puedes declarar una variable con `var` después de iniciarla y seguirá funcionando. Por ejemplo:
```js
-myName = 'Chris';
+myName = "Chris";
function logName() {
console.log(myName);
@@ -149,22 +149,22 @@ La elevación (`hoisting`) ya no funciona con `let`. Si cambiamos `var` a `let`
En segundo lugar, cuando usas `var`, puedes declarar la misma variable tantas veces como desees, pero con `let` no puedes. Lo siguiente funcionaría:
```js
-var myName = 'Chris';
-var myName = 'Bob';
+var myName = "Chris";
+var myName = "Bob";
```
Pero lo siguiente arrojaría un error en la segunda línea:
```js
-let myName = 'Chris';
-let myName = 'Bob';
+let myName = "Chris";
+let myName = "Bob";
```
Tendrías que hacer esto en su lugar:
```js
-let myName = 'Chris';
-myName = 'Bob';
+let myName = "Chris";
+myName = "Bob";
```
Nuevamente, esta es una sensata decisión del lenguaje. No hay razón para volver a declarar las variables — solo hace que las cosas sean más confusas.
@@ -176,7 +176,7 @@ Por estas y otras razones, se recomienda utilizar `let` tanto como sea posible e
Una vez que una variable se ha iniciado con un valor, puedes cambiar (o actualizar) ese valor simplemente dándole un valor diferente. Intenta ingresar las siguientes líneas en tu consola:
```js
-myName = 'Bob';
+myName = "Bob";
myAge = 40;
```
@@ -241,7 +241,7 @@ let myAge = 17;
Las `string`s (cadenas) son piezas de texto. Cuando le das a una variable un valor de cadena, debes encerrarlo entre comillas simples o dobles; de lo contrario, JavaScript intenta interpretarlo como otro nombre de variable.
```js
-let dolphinGoodbye = 'Hasta luego y gracias por todos los peces';
+let dolphinGoodbye = "Hasta luego y gracias por todos los peces";
```
### Booleanos
@@ -265,7 +265,7 @@ Aquí se está usando el operador "menor que" (`<`) para probar si 6 es menor qu
Un arreglo es un objeto único que contiene múltiples valores encerrados entre corchetes y separados por comas. Intenta ingresar las siguientes líneas en tu consola:
```js
-let myNameArray = ['Chris', 'Bob', 'Jim'];
+let myNameArray = ["Chris", "Bob", "Jim"];
let myNumberArray = [10, 15, 40];
```
@@ -287,13 +287,13 @@ En programación, un objeto es una estructura de código que modela un objeto de
Intenta ingresar la siguiente línea en tu consola:
```js
-let dog = { name : 'Spot', breed : 'Dalmatian' };
+let dog = { name: "Spot", breed: "Dalmatian" };
```
Para recuperar la información almacenada en el objeto, puedes utilizar la siguiente sintaxis:
```js
-dog.name
+dog.name;
```
Por ahora, no veremos más objetos. Puedes obtener más información sobre ellos en [un futuro módulo](/es/docs/Learn/JavaScript/Objects).
@@ -305,13 +305,13 @@ JavaScript es un "lenguaje tipado dinámicamente", lo cual significa que, a dife
Por ejemplo, si declaras una variable y le das un valor entre comillas, el navegador trata a la variable como una cadena (`string`):
```js
-let myString = 'Hello';
+let myString = "Hello";
```
Incluso si el valor contiene números, sigue siendo una cadena, así que ten cuidado:
```js
-let myNumber = '500'; // Vaya, esto sigue siendo una cadena
+let myNumber = "500"; // Vaya, esto sigue siendo una cadena
typeof myNumber;
myNumber = 500; // mucho mejor — ahora este es un número
typeof myNumber;
diff --git a/files/es/learn/javascript/first_steps/what_is_javascript/index.md b/files/es/learn/javascript/first_steps/what_is_javascript/index.md
index c9c815ec40fd74..a4233fbc67e1ff 100644
--- a/files/es/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/es/learn/javascript/first_steps/what_is_javascript/index.md
@@ -34,14 +34,14 @@ Luego, podemos agregar algo de CSS a la mezcla para que se vea bien:
```css
p {
- font-family: 'helvetica neue', helvetica, sans-serif;
+ font-family: "helvetica neue", helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
- border: 2px solid rgba(0,0,200,0.6);
- background: rgba(0,0,200,0.3);
- color: rgba(0,0,200,0.6);
- box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+ border: 2px solid rgba(0, 0, 200, 0.6);
+ background: rgba(0, 0, 200, 0.3);
+ color: rgba(0, 0, 200, 0.6);
+ box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
@@ -54,13 +54,13 @@ p {
Y finalmente, podemos agregar algo de JavaScript para implementar un comportamiento dinámico:
```js
-const para = document.querySelector('p');
+const para = document.querySelector("p");
-para.addEventListener('click', updateName);
+para.addEventListener("click", updateName);
function updateName() {
- let name = prompt('Enter a new name');
- para.textContent = 'Player 1: ' + name;
+ let name = prompt("Enter a new name");
+ para.textContent = "Player 1: " + name;
}
```
@@ -90,7 +90,7 @@ Generalmente se dividen en dos categorías.
Las **APIs del navegador** están integradas en tu navegador web y pueden exponer datos del entorno informático circundante o realizar tareas complejas y útiles. Por ejemplo:
- La {{domxref("Document_Object_Model", " API del DOM ( Document Object Model )")}} te permite manipular HTML y CSS, crear, eliminar y cambiar el HTML, aplicar dinámicamente nuevos estilos a tu página, etc. Cada vez que ves aparecer una ventana emergente en una página, o se muestra algún nuevo contenido (como vimos anteriormente en nuestra sencilla demostración), por ejemplo, ese es el DOM en acción.
-- La {{domxref("Geolocalization", "API de Geolocalización")}} recupera información geográfica. Así es como [Google Maps](https://www.google.com/maps) puede encontrar tu ubicación y trazarla en un mapa.
+- La {{domxref("Geolocation", "API de Geolocalización")}} recupera información geográfica. Así es como [Google Maps](https://www.google.com/maps) puede encontrar tu ubicación y trazarla en un mapa.
- Las APIs {{domxref("Canvas_API", "Canvas")}} y {{domxref("WebGL_API", "WebGL")}} te permiten crear gráficos animados en 2D y 3D. Las personas están haciendo cosas increíbles con estas tecnologías web — consulta [Experimentos de Chrome](https://www.chromeexperiments.com) y [webglsamples](https://webglsamples.org/).
- [APIs de audio y video](/es/Apps/Fundamentals/Audio_and_video_delivery) como {{domxref("HTMLMediaElement")}} y {{domxref("WebRTC API", "WebRTC")}} te permiten hacer cosas realmente interesantes con multimedia, como reproducir audio y video directamente en una página web, o tomar video de tu cámara web y mostrarlo en la computadora de otra persona (prueba nuestra sencilla [demostración instantánea](https://chrisdavidmills.github.io/snapshot/) para hacerte una idea).
@@ -126,13 +126,13 @@ Cada pestaña del navegador tiene su propio depósito separado para ejecutar có
Cuando el navegador encuentra un bloque de JavaScript, generalmente lo ejecuta en orden, de arriba a abajo. Esto significa que debes tener cuidado con el orden en el que colocas las cosas. Por ejemplo, volvamos al bloque de JavaScript que vimos en nuestro primer ejemplo:
```js
-const para = document.querySelector('p');
+const para = document.querySelector("p");
-para.addEventListener('click', updateName);
+para.addEventListener("click", updateName);
function updateName() {
- let name = prompt('Enter a new name');
- para.textContent = 'Player 1: ' + name;
+ let name = prompt("Enter a new name");
+ para.textContent = "Player 1: " + name;
}
```
@@ -174,31 +174,29 @@ JavaScript se aplica a tu página HTML de manera similar a CSS. Mientras que CSS
2. Abre el archivo en tu navegador web y en tu editor de texto. Verás que el HTML crea una página web simple que contiene un botón en el que se puede hacer clic.
3. A continuación, ve a tu editor de texto y agrega lo siguiente en tu `head`, justo antes de tu etiqueta de cierre ``:
- ```html
-
- ```
+ ```html
+
+ ```
4. Ahora agregaremos algo de JavaScript dentro de nuestro elemento {{htmlelement("script")}} para que la página haga algo más interesante — agrega el siguiente código justo debajo de la línea "// El código JavaScript va aquí":
- ```js
- document.addEventListener("DOMContentLoaded", function() {
- function createParagraph() {
- let para = document.createElement('p');
- para.textContent = 'You clicked the button!';
- document.body.appendChild(para);
- }
+ ```js
+ document.addEventListener("DOMContentLoaded", function () {
+ function createParagraph() {
+ let para = document.createElement("p");
+ para.textContent = "You clicked the button!";
+ document.body.appendChild(para);
+ }
- const buttons = document.querySelectorAll('button');
+ const buttons = document.querySelectorAll("button");
- for(let i = 0; i < buttons.length ; i++) {
- buttons[i].addEventListener('click', createParagraph);
- }
- });
- ```
+ for (let i = 0; i < buttons.length; i++) {
+ buttons[i].addEventListener("click", createParagraph);
+ }
+ });
+ ```
5. Guarda tu archivo y actualiza el navegador — ahora deberías ver que cuando haces clic en el botón, se genera un nuevo párrafo y se coloca debajo.
@@ -213,25 +211,25 @@ Esto funciona muy bien, pero ¿y si quisiéramos poner nuestro JavaScript en un
1. Primero, crea un nuevo archivo en el mismo directorio que tu archivo HTML del ejemplo. Como nombre ponle `script.js`; asegúrate de que el nombre tenga la extensión `.js`, ya que así es como se reconoce como JavaScript.
2. Reemplaza tu elemento {{htmlelement("script")}} actual con lo siguiente:
- ```html
-
- ```
+ ```html
+
+ ```
3. Dentro de `script.js`, agrega el siguiente script:
- ```js
- function createParagraph() {
- let para = document.createElement('p');
- para.textContent = 'You clicked the button!';
- document.body.appendChild(para);
- }
+ ```js
+ function createParagraph() {
+ let para = document.createElement("p");
+ para.textContent = "You clicked the button!";
+ document.body.appendChild(para);
+ }
- const buttons = document.querySelectorAll('button');
+ const buttons = document.querySelectorAll("button");
- for(let i = 0; i < buttons.length ; i++) {
- buttons[i].addEventListener('click', createParagraph);
- }
- ```
+ for (let i = 0; i < buttons.length; i++) {
+ buttons[i].addEventListener("click", createParagraph);
+ }
+ ```
4. Guarda y actualiza tu navegador, ¡y deberías ver lo mismo! Funciona igual, pero ahora tenemos nuestro JavaScript en un archivo externo. Por lo general, esto es bueno en términos de organización de tu código y para hacerlo reutilizable en varios archivos HTML. Además, el HTML es más fácil de leer sin grandes trozos de script en él.
@@ -243,8 +241,8 @@ Ten en cuenta que a veces te encontrarás con fragmentos de código JavaScript r
```js example-bad
function createParagraph() {
- let para = document.createElement('p');
- para.textContent = 'You clicked the button!';
+ let para = document.createElement("p");
+ para.textContent = "You clicked the button!";
document.body.appendChild(para);
}
```
@@ -266,10 +264,10 @@ El uso de una construcción de JavaScript pura te permite seleccionar todos los
#### Ejemplo
```js
-const buttons = document.querySelectorAll('button');
+const buttons = document.querySelectorAll("button");
-for(let i = 0; i < buttons.length ; i++) {
- buttons[i].addEventListener('click', createParagraph);
+for (let i = 0; i < buttons.length; i++) {
+ buttons[i].addEventListener("click", createParagraph);
}
```
@@ -368,8 +366,8 @@ Entonces, por ejemplo, podríamos anotar el JavaScript de nuestra última demost
// Función: crea un nuevo párrafo y lo agrega al final del cuerpo HTML.
function createParagraph() {
- let para = document.createElement('p');
- para.textContent = 'You clicked the button!';
+ let para = document.createElement("p");
+ para.textContent = "You clicked the button!";
document.body.appendChild(para);
}
@@ -380,10 +378,10 @@ function createParagraph() {
Cuando se presione cualquier botón, se ejecutará la función createParagraph().
*/
-const buttons = document.querySelectorAll('button');
+const buttons = document.querySelectorAll("button");
-for (let i = 0; i < buttons.length ; i++) {
- buttons[i].addEventListener('click', createParagraph);
+for (let i = 0; i < buttons.length; i++) {
+ buttons[i].addEventListener("click", createParagraph);
}
```
diff --git a/files/es/learn/javascript/first_steps/what_went_wrong/index.md b/files/es/learn/javascript/first_steps/what_went_wrong/index.md
index cafcab86fb50c5..3e6dcf57bba7d8 100644
--- a/files/es/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/es/learn/javascript/first_steps/what_went_wrong/index.md
@@ -38,17 +38,17 @@ Anteriormente en este curso, hicimos que escribieras algunos comandos JavaScript
1. Ve a la pestaña dónde tienes abierto `number-game-errors.html` y abre tu consola JavaScript. Deberías ver un mensaje de error con las siguientes líneas: ![](not-a-function.png)
2. Este es un error bastante fácil de rastrear, y el navegador le brinda varios bits de información útil para ayudarte (la captura de pantalla anterior es de Firefox, pero otros navegadores proporcionan información similar). De izquierda a derecha, tenemos:
- - Una "x" roja para indicar que se trata de un error.
- - Un mensaje de error para indicar qué salió mal: "TypeError: guessSubmit.addeventListener no es una función"
- - Un enlace a "Más información" que te lleva a una página de MDN dónde explica detalladamente qué significa este error.
- - El nombre del archivo JavaScript, que enlaza con la pestaña "Depurador" de las herramientas para desarrolladores. Si sigues este enlace, verás la línea exacta donde se resalta el error.
- - El número de línea donde está el error y el número de carácter en esa línea donde se detectó el error por primera vez. En este caso, tenemos la línea 86, carácter número 3.
+ - Una "x" roja para indicar que se trata de un error.
+ - Un mensaje de error para indicar qué salió mal: "TypeError: guessSubmit.addeventListener no es una función"
+ - Un enlace a "Más información" que te lleva a una página de MDN dónde explica detalladamente qué significa este error.
+ - El nombre del archivo JavaScript, que enlaza con la pestaña "Depurador" de las herramientas para desarrolladores. Si sigues este enlace, verás la línea exacta donde se resalta el error.
+ - El número de línea donde está el error y el número de carácter en esa línea donde se detectó el error por primera vez. En este caso, tenemos la línea 86, carácter número 3.
3. Si miramos la línea 86 en nuestro editor de código, encontraremos esta línea:
- ```js
- guessSubmit.addeventListener('click', checkGuess);
- ```
+ ```js
+ guessSubmit.addeventListener("click", checkGuess);
+ ```
4. El mensaje de error dice "`guessSubmit.addeventListener no es una función`", lo cual significa que el intérprete de JavaScript no reconoce la función que estamos llamando. A menudo, este mensaje de error en realidad significa que hemos escrito algo mal. Si no estás seguro de la ortografía correcta de una parte de la sintaxis, a menudo es bueno buscar la función en MDN. La mejor manera de hacer esto es, en tu navegador favorito, buscar "mdn _nombre-de-característica_". Aquí hay un atajo para ahorrarte algo de tiempo en esta instancia: [`addEventListener()`](/es/docs/Web/API/EventTarget/addEventListener).
5. Entonces, al mirar esta página, ¡el error parece ser que hemos escrito mal el nombre de la función!. Recuerda que JavaScript distingue entre mayúsculas y minúsculas, por lo que cualquier pequeña diferencia en la ortografía o en mayúsculas provocará un error. Cambiar `addeventListener` a `addEventListener` debería solucionar este problema. Hazlo ahora.
@@ -61,36 +61,36 @@ Anteriormente en este curso, hicimos que escribieras algunos comandos JavaScript
2. Ahora, si intentas ingresar un número y presionas el botón "Enviar respuesta", verás... ¡otro error! ![](variable-is-null.png)
3. Esta vez, el error que se informa es "`TypeError: lowOrHi es nulo`", en la línea 78.
- > **Nota:** [`Null`](/es/docs/Glossary/Null) es un valor especial que significa "nada" o "sin valor". Por lo tanto, `lowOrHi` ha sido declarado e iniciado, pero no con algún valor significativo — no tiene tipo ni valor.
+ > **Nota:** [`Null`](/es/docs/Glossary/Null) es un valor especial que significa "nada" o "sin valor". Por lo tanto, `lowOrHi` ha sido declarado e iniciado, pero no con algún valor significativo — no tiene tipo ni valor.
- > **Nota:** Este error no apareció tan pronto como se cargó la página porque este error ocurrió dentro de una función (dentro del bloque `checkGuess() {...}`). Como pronto aprenderás con más detalle en nuestro [artículo de funciones](/es/docs/Learn/JavaScript/Building_blocks/Functions), el código dentro de las funciones se ejecuta en un ámbito separado que el código fuera de las funciones. En este caso, el código no se ejecutó y el error no se lanzó hasta que la función `checkGuess()` se ejecutó en la línea 86.
+ > **Nota:** Este error no apareció tan pronto como se cargó la página porque este error ocurrió dentro de una función (dentro del bloque `checkGuess() {...}`). Como pronto aprenderás con más detalle en nuestro [artículo de funciones](/es/docs/Learn/JavaScript/Building_blocks/Functions), el código dentro de las funciones se ejecuta en un ámbito separado que el código fuera de las funciones. En este caso, el código no se ejecutó y el error no se lanzó hasta que la función `checkGuess()` se ejecutó en la línea 86.
4. Échale un vistazo a la línea 78 y verás el siguiente código:
- ```js
- lowOrHi.textContent = '¡El número es muy grande!';
- ```
+ ```js
+ lowOrHi.textContent = "¡El número es muy grande!";
+ ```
5. Esta línea está intentando establecer la propiedad `textContent` de la constante `lowOrHi` en una cadena de texto, pero no funciona porque `lowOrHi` no contiene lo que es supone. Veamos por qué es así — intenta buscar otras instancias de `lowOrHi` en el código. La primera instancia que encontrarás en JavaScript está en la línea 48:
- ```js
- const lowOrHi = document.querySelector('lowOrHi');
- ```
+ ```js
+ const lowOrHi = document.querySelector("lowOrHi");
+ ```
6. En este punto, estamos intentando hacer que la variable contenga una referencia a un elemento en el HTML del documento. Comprobemos si el valor es `null` después de ejecutar esta línea. Agrega el siguiente código en la línea 49:
- ```js
- console.log(lowOrHi);
- ```
+ ```js
+ console.log(lowOrHi);
+ ```
- > **Nota:** [`console.log()`](/es/docs/Web/API/Console/log) es una función de depuración realmente útil que imprime un valor en la consola. Por lo tanto, imprimirá el valor de `lowOrHi` en la consola tan pronto como intentemos configurarlo en la línea 48.
+ > **Nota:** [`console.log()`](/es/docs/Web/API/Console/log) es una función de depuración realmente útil que imprime un valor en la consola. Por lo tanto, imprimirá el valor de `lowOrHi` en la consola tan pronto como intentemos configurarlo en la línea 48.
7. Guarda y refresca, y ahora deberías ver el resultado de `console.log()` en tu consola. ![](console-log-output.png)Efectivamente, el valor de `lowOrHi` es `null` en este punto, así que definitivamente hay un problema con la línea 48.
8. Pensemos en cuál podría ser el problema. La línea 48 está utilizando un método [`document.querySelector()`](/es/docs/Web/API/Document/querySelector) para obtener una referencia a un elemento seleccionándolo con un selector CSS. Buscando más adelante en nuestro archivo, podemos encontrar el párrafo en cuestión:
- ```js
-
- ```
+ ```js
+
+ ```
9. Entonces necesitamos un selector de clase aquí, que comienza con un punto (`.`), pero el selector que se pasa al método `querySelector()` en la línea 48 no tiene punto. ¡Este podría ser el problema! Intenta cambiar `lowOrHi` a `.lowOrHi` en la línea 48.
10. Ahora guarda y refresca nuevamente, y tu declaración `console.log()` debería devolver el elemento ` ` que queremos. ¡Uf! ¡Otro error solucionado! Ahora puedes eliminar tu línea `console.log()`, o mantenerla como referencia más adelante — tu elección.
@@ -111,21 +111,21 @@ Obviamente hay un problema en la lógica del juego en alguna parte — el juego
1. Busca la variable `randomNumber` y las líneas donde se establece primero el número aleatorio. La instancia que almacena el número aleatorio que queremos adivinar al comienzo del juego debe estar alrededor de la línea número 44:
- ```js
- let randomNumber = Math.floor(Math.random()) + 1;
- ```
+ ```js
+ let randomNumber = Math.floor(Math.random()) + 1;
+ ```
- Y la que genera el número aleatorio antes de cada juego subsiguiente está alrededor de la línea 113:
+ Y la que genera el número aleatorio antes de cada juego subsiguiente está alrededor de la línea 113:
- ```js
- randomNumber = Math.floor(Math.random()) + 1;
- ```
+ ```js
+ randomNumber = Math.floor(Math.random()) + 1;
+ ```
2. Para comprobar si estas líneas son realmente el problema, volvamos a echar mano de nuestra amiga `console.log()` — inserta la siguiente línea directamente debajo de cada una de las dos líneas anteriores:
- ```js
- console.log(randomNumber);
- ```
+ ```js
+ console.log(randomNumber);
+ ```
3. Guarda y refresca, luego juega un par de veces — verás que `randomNumber` es igual a 1 en cada punto en el que se registra en la consola.
@@ -134,7 +134,7 @@ Obviamente hay un problema en la lógica del juego en alguna parte — el juego
Para solucionar esto, consideremos cómo está funcionando esta línea. Primero, invocamos a [`Math.random()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Math/random), que genera un número decimal aleatorio entre 0 y 1, p. ej. 0.5675493843.
```js
-Math.random()
+Math.random();
```
A continuación, pasamos el resultado de invocar a `Math.random()` a [`Math.floor()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Math/floor), que redondea el número pasado al número entero más cercano. Luego agregamos 1 a ese resultado:
@@ -146,13 +146,13 @@ Math.floor(Math.random()) + 1
Redondear un número decimal aleatorio entre 0 y 1 siempre devolverá 0, por lo que agregarle 1 siempre devolverá 1. Necesitamos multiplicar el número aleatorio por 100 antes de redondearlo hacia abajo. Lo siguiente nos daría un número aleatorio entre 0 y 99:
```js
-Math.floor(Math.random()*100);
+Math.floor(Math.random() * 100);
```
De ahí que queramos sumar 1, para darnos un número aleatorio entre 1 y 100:
```js
-Math.floor(Math.random()*100) + 1;
+Math.floor(Math.random() * 100) + 1;
```
Intenta actualizar ambas líneas de esta manera, luego guarda y refresca — ¡el juego ahora debería trabajar como pretendemos!
diff --git a/files/es/learn/javascript/howto/index.md b/files/es/learn/javascript/howto/index.md
index 68ec4fa0b53818..8e9d8b09253e01 100644
--- a/files/es/learn/javascript/howto/index.md
+++ b/files/es/learn/javascript/howto/index.md
@@ -38,8 +38,8 @@ Uno de los errores más comunes es declarar una función, pero no llamarla a nin
```js
function miFuncion() {
- alert('Esta es mi funcion.');
-};
+ alert("Esta es mi funcion.");
+}
```
Este código no hará nada a menos que lo llame, por ejemplo con
@@ -74,16 +74,16 @@ function saludo(nombre){
Cuando asigna algo normalmente en JavaScript, utiliza un solo signo igual, por ejemplo:
```js
-const miNumero= 0;
+const miNumero = 0;
```
Esto no funciona en los [Objetos](/es/docs/Learn/JavaScript/Objects), sin embargo, con los objetos, debe separar los nombres de los miembros de sus valores mediante dos puntos y separar cada miembro con una coma, por ejemplo:
```js
-const miObjeto= {
- nombre: 'Felipe',
- edad: 27
-}
+const miObjeto = {
+ nombre: "Felipe",
+ edad: 27,
+};
```
## Definiciones básicas
diff --git a/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md
index 432869ee83666d..f28d0199a2dd29 100644
--- a/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md
+++ b/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md
@@ -86,17 +86,17 @@ Este método agregará un detector de eventos `onkeydown` al objeto `window` par
```js
var _this = this;
-window.onkeydown = function(e) {
- if (e.keyCode === 65) {
- _this.x -= _this.velX;
- } else if (e.keyCode === 68) {
- _this.x += _this.velX;
- } else if (e.keyCode === 87) {
- _this.y -= _this.velY;
- } else if (e.keyCode === 83) {
- _this.y += _this.velY;
- }
+window.onkeydown = function (e) {
+ if (e.keyCode === 65) {
+ _this.x -= _this.velX;
+ } else if (e.keyCode === 68) {
+ _this.x += _this.velX;
+ } else if (e.keyCode === 87) {
+ _this.y -= _this.velY;
+ } else if (e.keyCode === 83) {
+ _this.y += _this.velY;
}
+};
```
Por tanto cuando se presiona una tecla, el evento del objeto [keyCode](/es/docs/Web/API/KeyboardEvent/keyCode) se consulta para averiguar que tecla se ha presionado. Si es uno de los cuatro representados por los códigos clave especificados, entonces el círculo maligno se moverá a la izquierda / derecha / arriba / abajo.
@@ -111,7 +111,7 @@ Este método actuará de una forma muy similar al método `collisionDetect()` de
- En el exterior de la declaración `if`, ya no es necesario comprobar si la bola actual en la iteración es la misma que la bola que está haciendo la comprobación, porque ya no es una bola, ¡es el círculo del mal! En su lugar, debe hacer una prueba para ver si existe la bola que se está verificando (¿con qué propiedad podría hacerlo?). Si no existe, ya ha sido devorado por el círculo maligno, por lo que no es necesario volver a comprobarlo.
- En el interior de la declaración `if`, ya no desea que los objetos cambien de color cuando se detecta una colisión; en cambio, desea que no existan más bolas que colisionen con el círculo maligno (una vez más, ¿cómo cree que haría eso?).
-### Trayendo el círculo del mal al programa.
+### Trayendo el círculo del mal al programa
Ahora que hemos definido el círculo maligno, debemos hacerlo aparecer en nuestra escena. Para hacerlo, necesitas hacer alguno cambios a la función `loop()`.
@@ -119,29 +119,29 @@ Ahora que hemos definido el círculo maligno, debemos hacerlo aparecer en nuestr
- En el punto en el que intera por todas las pelotas y llama a las funciones `draw()`, `update()`, y `collisionDetect()` para cada una, hazlo para que estas funciones solo sean llamadas si la bola actual existe.
- Llama a los métodos de la instancia de la pelota maligna `draw()`, `checkBounds()`, y `collisionDetect()` en cada iteración del bucle.
-### Implementando el contador de puntuación.
+### Implementando el contador de puntuación
Para implementar el contador de puntuación sigue estos pasos:
1. En tu archivo HTML añade un elemento {{HTMLElement("p")}} justo debajo del elemento {{HTMLElement("h1")}} que contiene el texto "Ball count: ".
2. En tu archivo CSS, agregue la siguiente regla en la parte inferior:
- ```css
- p {
- position: absolute;
- margin: 0;
- top: 35px;
- right: 5px;
- color: #aaa;
- }
- ```
+ ```css
+ p {
+ position: absolute;
+ margin: 0;
+ top: 35px;
+ right: 5px;
+ color: #aaa;
+ }
+ ```
3. En su JavaScript, realice las siguientes actualizaciones:
- - Cree una variable que almacene una referencia al párrafo.
- - Mantenga un recuento de la cantidad de bolas en la pantalla de alguna manera.
- - Incrementa el conteo y muestra el número actualizado de bolas cada vez que se agrega una bola a la escena.
- - Disminuye el conteo y muestra el número actualizado de bolas cada vez que el círculo maligno se come una bola (hace que no exista).
+ - Cree una variable que almacene una referencia al párrafo.
+ - Mantenga un recuento de la cantidad de bolas en la pantalla de alguna manera.
+ - Incrementa el conteo y muestra el número actualizado de bolas cada vez que se agrega una bola a la escena.
+ - Disminuye el conteo y muestra el número actualizado de bolas cada vez que el círculo maligno se come una bola (hace que no exista).
## Consejos
diff --git a/files/es/learn/javascript/objects/basics/index.md b/files/es/learn/javascript/objects/basics/index.md
index a6248040aed1e0..8becdb875629c1 100644
--- a/files/es/learn/javascript/objects/basics/index.md
+++ b/files/es/learn/javascript/objects/basics/index.md
@@ -33,28 +33,30 @@ Si ingresas `persona` en tu entrada de texto y presionas el botón, debes obtene
```js
var persona = {
- nombre: ['Bob', 'Smith'],
+ nombre: ["Bob", "Smith"],
edad: 32,
- genero: 'masculino',
- intereses: ['música', 'esquí'],
+ genero: "masculino",
+ intereses: ["música", "esquí"],
bio: function () {
- alert(this.nombre[0] + '' + this.nombre[1] + ' tiene ' + this.edad + ' años. Le gusta ' + this.intereses[0] + ' y ' + this.intereses[1] + '.');
+ alert(
+ `${this.nombre[0]} ${this.nombre[1]} tiene ${this.edad} años. Le gusta ${this.intereses[0]} y this.intereses[1].`,
+ );
+ },
+ saludo: function () {
+ alert("Hola, Soy " + this.nombre[0] + ". ");
},
- saludo: function() {
- alert('Hola, Soy '+ this.nombre[0] + '. ');
- }
};
```
Después de guardar y actualizar, intenta ingresar algunos de los siguientes en tu entrada de texto:
```js
-persona.nombre
-persona.nombre[0]
-persona.edad
-persona.intereses[1]
-persona.bio()
-persona.saludo()
+persona.nombre;
+persona.nombre[0];
+persona.edad;
+persona.intereses[1];
+persona.bio();
+persona.saludo();
```
¡Ahora tienes algunos datos y funcionalidades dentro de tu objeto, y ahora puedes acceder a ellos con una sintaxis simple y agradable!
@@ -67,8 +69,8 @@ Entonces, ¿qué está pasando aquí? Bien, un objeto se compone de varios miemb
var nombreObjeto = {
miembro1Nombre: miembro1Valor,
miembro2Nombre: miembro2Valor,
- miembro3Nombre: miembro3Valor
-}
+ miembro3Nombre: miembro3Valor,
+};
```
El valor de un miembro de un objeto puede ser prácticamente cualquier cosa: en nuestro objeto `persona` tenemos una cadena de texto, un número, dos arreglos y dos funciones. Los primeros cuatro elementos son elementos de datos y se denominan **propiedades** del objeto. Los dos últimos elementos son funciones que le permiten al objeto hacer algo con esos datos, y se les denomina **métodos** del objeto.
@@ -82,9 +84,9 @@ Es muy común crear un objeto utilizando un objeto literal cuando deseas transfe
Arriba, accediste a las propiedades y métodos del objeto usando **notación de punto (dot notation)**. El nombre del objeto (`persona`) actúa como el **espacio de nombre (namespace)**; al cual se debe ingresar primero para acceder a cualquier elemento **encapsulado** dentro del objeto. A continuación, escribe un punto y luego el elemento al que deseas acceder: puede ser el nombre de una simple propiedad, un elemento de una propiedad de arreglo o una llamada a uno de los métodos del objeto, por ejemplo:
```js
-persona.edad
-persona.intereses[1]
-persona.bio()
+persona.edad;
+persona.intereses[1];
+persona.bio();
```
### Espacios de nombres secundarios
@@ -107,22 +109,22 @@ nombre : {
Aquí estamos creando efectivamente un **espacio de nombre secundario (sub-namespace)**. Esto suena complejo, pero en realidad no es así: para acceder a estos elementos solo necesitas un paso adicional que es encadenar con otro punto al final. Prueba estos:
```js
-persona.nombre.pila
-persona.nombre.apellido
+persona.nombre.pila;
+persona.nombre.apellido;
```
**Importante**: en este punto, también deberás revisar tu código y cambiar cualquier instancia de
```js
-nombre[0]
-nombre[1]
+nombre[0];
+nombre[1];
```
a
```js
-nombre.pila
-nombre.apellido
+nombre.pila;
+nombre.apellido;
```
De lo contrario, sus métodos ya no funcionarán.
@@ -132,15 +134,15 @@ De lo contrario, sus métodos ya no funcionarán.
Hay otra manera de acceder a las propiedades del objeto, usando la notación de corchetes. En lugar de usar estos:
```js
-persona.edad
-persona.nombre.pila
+persona.edad;
+persona.nombre.pila;
```
Puedes usar
```js
-persona['edad']
-persona['nombre']['pila']
+persona["edad"];
+persona["nombre"]["pila"];
```
Esto se ve muy similar a cómo se accede a los elementos en un arreglo, y básicamente es lo mismo: en lugar de usar un número de índice para seleccionar un elemento, se esta utilizando el nombre asociado con el valor de cada miembro. No es de extrañar que los objetos a veces se denominen **arreglos asociativos**: asocian cadenas de texto a valores de la misma manera que las arreglos asocian números a valores.
@@ -151,28 +153,30 @@ Hasta ahora solo hemos buscado recuperar (u **obtener**) miembros del objeto: ta
```js
persona.edad = 45;
-persona['nombre']['apellido'] = 'Cratchit';
+persona["nombre"]["apellido"] = "Cratchit";
```
Intenta ingresar estas líneas y luego vuelve a ver a los miembros para ver cómo han cambiado:
```js
-persona.edad
-persona['nombre']['apellido']
+persona.edad;
+persona["nombre"]["apellido"];
```
Establecer miembros no solo es actualizar los valores de las propiedades y métodos existentes; también puedes crear miembros completamente nuevos. Prueba estos:
```js
-persona['ojos'] = 'avellana';
-persona.despedida = function() { alert("¡Adiós a todos!"); }
+persona["ojos"] = "avellana";
+persona.despedida = function () {
+ alert("¡Adiós a todos!");
+};
```
Ahora puedes probar a los nuevos miembros:
```js
-persona['ojos']
-person.despedida()
+persona["ojos"];
+person.despedida();
```
Un aspecto útil de la notación de corchetes es que se puede usar para establecer dinámicamente no solo los valores de los miembros, sino también los nombres de los miembros. Digamos que queremos que los usuarios puedan almacenar tipos de valores personalizados en sus datos personales, escribiendo el nombre y el valor del miembro en dos entradas de texto. Podríamos obtener esos valores de esta manera:
@@ -191,15 +195,15 @@ persona[nombrePerzonalizado] = valorPerzonalizado;
Para probar esto, intenta agregar las siguientes líneas en tu código, justo debajo de la llave de cierre del objeto `persona`:
```js
-var nombrePerzonalizado = 'altura';
-var valorPerzonalizado = '1.75m';
+var nombrePerzonalizado = "altura";
+var valorPerzonalizado = "1.75m";
persona[nombrePerzonalizado] = valorPerzonalizado;
```
Ahora intenta guardar y actualizar, e ingresa lo siguiente en tu entrada de texto:
```js
-persona.altura
+persona.altura;
```
Agregar una propiedad a un objeto no es posible con la notación de puntos, que solo puede aceptar un nombre de miembro literal, no un valor variable que apunte a un nombre.
@@ -220,18 +224,18 @@ Vamos a ilustrar lo que queremos decir con un par de objetos persona simplificad
```js
var persona1 = {
- nombre: 'Chris',
- saludo: function() {
- alert('¡Hola!, Soy '+ this.nombre + '.');
- }
-}
+ nombre: "Chris",
+ saludo: function () {
+ alert("¡Hola!, Soy " + this.nombre + ".");
+ },
+};
var persona2 = {
- nombre: 'Brian',
- saludo: function() {
- alert('¡Hola!, Soy '+ this.nombre + '.');
- }
-}
+ nombre: "Brian",
+ saludo: function () {
+ alert("¡Hola!, Soy " + this.nombre + ".");
+ },
+};
```
En este caso, `persona1.saludo()` mostrará "¡Hola!, Soy Chris"; `persona2.saludo()` por otro lado mostrará "¡Hola!, Soy Brian", aunque el código del método es exactamente el mismo en cada caso. Como dijimos antes, `this` es igual al objeto en el que está el código; esto no es muy útil cuando se escriben objetos literales a mano, pero realmente se vuelve útil cuando se generan objetos dinámicamente (por ejemplo, usando constructores) Todo se aclarará más adelante.
@@ -243,7 +247,7 @@ A medida que has estado repasando estos ejemplos, probablemente hayas pensando q
Entonces cuando usaste métodos de cadenas de texto como:
```js
-myCadena.split(',');
+myCadena.split(",");
```
Estabas usando un método disponible en una instancia de la clase [`String`](/es/docs/Web/JavaScript/Reference/Global_Objects/String). Cada vez que creas una cadena en tu código, esa cadena se crea automáticamente como una instancia de String, y por lo tanto tiene varios métodos/propiedades comunes disponibles en ella.
@@ -251,8 +255,8 @@ Estabas usando un método disponible en una instancia de la clase [`String`](/es
Cuando accediste al modelo de objetos del documento (document object model) usando líneas como esta:
```js
-var miDiv = document.createElement('div');
-var miVideo = document.querySelector('video');
+var miDiv = document.createElement("div");
+var miVideo = document.querySelector("video");
```
Estaba usando métodos disponibles en una instancia de la clase [`Document`](/es/docs/Web/API/Document). Para cada página web cargada, se crea una instancia de `Document`, llamada `document`, que representa la estructura, el contenido y otras características de la página entera, como su URL. De nuevo, esto significa que tiene varios métodos/propiedades comunes disponibles en él.
@@ -262,7 +266,7 @@ Lo mismo puede decirse de prácticamente cualquier otro Objeto/API incorporado q
Ten en cuenta que los Objetos/API incorporados no siempre crean instancias de objetos automáticamente. Como ejemplo, la [API de Notificaciones](/es/docs/Web/API/Notifications_API), que permite que los navegadores modernos activen las notificaciones del sistema, requiere que crees una instancia de un nuevo objeto para cada notificación que desees disparar. Intenta ingresar lo siguiente en tu consola de JavaScript:
```js
-var miNotificacion = new Notification('¡Hola!');
+var miNotificacion = new Notification("¡Hola!");
```
De nuevo, veremos qué son los constructores en un artículo posterior.
diff --git a/files/es/learn/javascript/objects/classes_in_javascript/index.md b/files/es/learn/javascript/objects/classes_in_javascript/index.md
index fe466835ab5451..0d0fa27904e875 100644
--- a/files/es/learn/javascript/objects/classes_in_javascript/index.md
+++ b/files/es/learn/javascript/objects/classes_in_javascript/index.md
@@ -34,7 +34,6 @@ Puedes utilizar la palabra clave {{jsxref("Statements/class", "class")}} para de
```js
class Person {
-
name;
constructor(name) {
@@ -44,7 +43,6 @@ class Person {
introduceSelf() {
console.log(`¡Hola!, soy ${this.name}`);
}
-
}
```
@@ -68,7 +66,7 @@ El constructor se define utilizando la palabra clave {{jsxref("Classes/construct
Dada la declaración de clase anterior, puedes crear y utilizar una nueva instancia de `Person` de la siguiente manera:
```js
-const gil = new Person('Gil');
+const gil = new Person("Gil");
gil.introduceSelf(); // ¡Hola!, soy Gil
```
@@ -81,11 +79,9 @@ En caso de que no necesites algún tipo de inicialización, puedes omitir al con
```js
class Animal {
-
sleep() {
- console.log('zzzzzzz');
+ console.log("zzzzzzz");
}
-
}
const spot = new Animal();
@@ -99,7 +95,6 @@ A partir de la clase `Person`, vamos a definir la subclase `Professor`.
```js
class Professor extends Person {
-
teaches;
constructor(name, teaches) {
@@ -108,7 +103,9 @@ class Professor extends Person {
}
introduceSelf() {
- console.log(`Mi nombre es ${this.name}, yo seré tu profesor de ${this.teaches}`);
+ console.log(
+ `Mi nombre es ${this.name}, yo seré tu profesor de ${this.teaches}`,
+ );
}
grade(paper) {
@@ -131,10 +128,10 @@ Podemos observar que hemos sobreescrito el método `introduceSelf()` de la super
Con esta declaración ahora podemos crear y usar profesores:
```js
-const walsh = new Professor('Walsh', 'Psicología');
-walsh.introduceSelf(); // 'Mi nombre es Walsh, yo seré tu profesor de Psicología'
+const walsh = new Professor("Walsh", "Psicología");
+walsh.introduceSelf(); // 'Mi nombre es Walsh, yo seré tu profesor de Psicología'
-walsh.grade('mi tarea'); // una calificación aleatoria
+walsh.grade("mi tarea"); // una calificación aleatoria
```
## Encapsulamiento
@@ -145,7 +142,6 @@ Aquí podemos ver la declaración de la clase `Student` que se encarga precisame
```js
class Student extends Person {
-
#year;
constructor(name, year) {
@@ -153,22 +149,22 @@ class Student extends Person {
this.#year = year;
}
-
introduceSelf() {
- console.log(`¡Hola! me llamo ${this.name} y estoy en el año ${this.#year}.`);
+ console.log(
+ `¡Hola! me llamo ${this.name} y estoy en el año ${this.#year}.`,
+ );
}
canStudyArchery() {
return this.#year > 1;
}
-
}
```
En la clase anterior, `year` es una [propiedad de dato privada](/es/docs/Web/JavaScript/Reference/Classes/Private_class_fields). Podemos crear un objeto `Student` que puede acceder a la propiedad `#year` internamente, sin embargo, si algún código que se encuentre afuera de la clase intenta acceder a la propiedad `#year`, el navegador lanzará un error:
```js
-const summers = new Student('Summers', 2)
+const summers = new Student("Summers", 2);
summers.introduceSelf(); // ¡Hola! me llamo Summers y estoy en el año 2.
summers.canStudyArchery(); // true
@@ -189,7 +185,7 @@ class Example {
}
#somePrivateMethod() {
- console.log('¿Me llamaste?');
+ console.log("¿Me llamaste?");
}
}
diff --git a/files/es/learn/javascript/objects/json/index.md b/files/es/learn/javascript/objects/json/index.md
index d8e7b739c0023a..121cbc71308ad7 100644
--- a/files/es/learn/javascript/objects/json/index.md
+++ b/files/es/learn/javascript/objects/json/index.md
@@ -37,11 +37,7 @@ Como se describió previamente, un JSON es una cadena cuyo formato recuerda al d
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
- "powers": [
- "Radiation resistance",
- "Turning tiny",
- "Radiation blast"
- ]
+ "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
@@ -72,14 +68,14 @@ Como se describió previamente, un JSON es una cadena cuyo formato recuerda al d
Si se carga este objeto en un programa de JavaScript, convertido (_parseado_) en una variable llamada `superHeroes` por ejemplo, se podría acceder a los datos que contiene utilizando la misma notación de punto/corchete que se revisó en el artículo [JavaScript object basics](/es/docs/Learn/JavaScript/Objects/Basics). Por ejemplo:
```js
-superHeroes.homeTown
-superHeroes['active']
+superHeroes.homeTown;
+superHeroes["active"];
```
Para acceder a los datos que se encuentran más abajo en la jerarquía, simplemente se debe concatenar los nombres de las propiedades y los índices de arreglo requeridos. Por ejemplo, para acceder al tercer superpoder del segundo héroe registrado en la lista de miembros, se debería hacer esto:
```js
-superHeroes['members'][1]['powers'][2]
+superHeroes["members"][1]["powers"][2];
```
1. Primero el nombre de la variable — `superHeroes`.
@@ -100,11 +96,7 @@ Anteriormente se mencionó que el texto JSON básicamente se parece a un objeto
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
- "powers": [
- "Radiation resistance",
- "Turning tiny",
- "Radiation blast"
- ]
+ "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
@@ -138,18 +130,16 @@ A continuación se muestra un ejemplo de cómo podemos utilizar algunos datos JS
Haga una copia local de los archivos [heroes.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html) y [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css). El último contiene un CSS simple para dar estilo a la página, mientras el primero contiene un HTML muy sencillo:
```html
-
+
-
+
```
Además de un elemento {{HTMLElement("script")}} que contiene el código JavaScript que se escribirá en este ejercicio. En este momento sólo contiene dos líneas, que hacen referencia a los elementos {{HTMLElement("header")}} y {{HTMLElement("section")}} y los almacena en variables:
```js
-const header = document.querySelector('header');
-const section = document.querySelector('section');
+const header = document.querySelector("header");
+const section = document.querySelector("section");
```
Los datos JSON se encuentran disponibles en GitHub en el siguiente enlace: .
@@ -164,43 +154,44 @@ Para obtener el JSON se utilizará un API llamado {{domxref("XMLHttpRequest")}}
1. Para empezar, se debe almacenar la URL del JSON que se quiere recuperar en una variable. Agregue lo siguiente al final del código JavaScript:
- ```js
- const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
- ```
+ ```js
+ const requestURL =
+ "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
+ ```
2. Para crear una solicitud, se necesita crear una nueva instancia de objeto de solicitud desde el constructor `XMLHttpRequest`, utilizando la palabra clave `new`. Agregue lo siguiente a continuación de la última línea:
- ```js
- const request = new XMLHttpRequest();
- ```
+ ```js
+ const request = new XMLHttpRequest();
+ ```
3. Ahora es necesario abrir una nueva solicitud utilizando el método [`open()`](/es/docs/Web/API/XMLHttpRequest/open). Agregue la siguiente línea:
- ```js
- request.open('GET', requestURL);
- ```
+ ```js
+ request.open("GET", requestURL);
+ ```
- Esto requiere al menos dos parámetros — Existen otros parámetros opcionales disponibles. Sólo se requieren los dos obligatorios para este ejemplo:
+ Esto requiere al menos dos parámetros — Existen otros parámetros opcionales disponibles. Sólo se requieren los dos obligatorios para este ejemplo:
- - El método HTTP a usar cuando se hace una solicitud en red. En este caso `GET` es adecuado, dado que sólo se estan recuperando algunos datos simples.
- - La URL a la que se realiza la solicitud — esta es la URL del archivo que se almacenó antes.
+ - El método HTTP a usar cuando se hace una solicitud en red. En este caso `GET` es adecuado, dado que sólo se estan recuperando algunos datos simples.
+ - La URL a la que se realiza la solicitud — esta es la URL del archivo que se almacenó antes.
4. Luego, agregue las siguientes dos lineas — establecemos el [`responseType`](/es/docs/Web/API/XMLHttpRequest/responseType) a JSON, de esta forma ese XHR sabe que el servidor estará retornando JSON y que esto debería ser convertido en segundo plano en un objeto JavaScript. Entonces se envía la solicitud con el método [`send()`](/es/docs/Web/API/XMLHttpRequest/send):
- ```js
- request.responseType = 'json';
- request.send();
- ```
+ ```js
+ request.responseType = "json";
+ request.send();
+ ```
5. La última parte de esta sección comprende la espera por la respuesta a retornar desde el servidor y luego, manejarla. Agregue el siguiente código bajo el código previo:
- ```js
- request.onload = function() {
- const superHeroes = request.response;
- populateHeader(superHeroes);
- showHeroes(superHeroes);
- }
- ```
+ ```js
+ request.onload = function () {
+ const superHeroes = request.response;
+ populateHeader(superHeroes);
+ showHeroes(superHeroes);
+ };
+ ```
En este punto se está almacenando la respuesta a la solicitud (disponible en la propiedad [`response`](/es/docs/Web/API/XMLHttpRequest/response)) en una variable llamada `superHeroes`; esta variable ahora contendrá el objeto JavaScript basado en el JSON. Luego se pasa el objeto como argumento a dos funciones — la primera llenará el `` con los datos correctos, mientras la segunda creará una tarjeta de información para cada héroe en el equipo y la insertará en ``.
@@ -212,12 +203,13 @@ Se han obtenido los datos desde el JSON y convertidos en un objeto de JavaScript
```js
function populateHeader(jsonObj) {
- const myH1 = document.createElement('h1');
- myH1.textContent = jsonObj['squadName'];
+ const myH1 = document.createElement("h1");
+ myH1.textContent = jsonObj["squadName"];
header.appendChild(myH1);
- const myPara = document.createElement('p');
- myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+ const myPara = document.createElement("p");
+ myPara.textContent =
+ "Hometown: " + jsonObj["homeTown"] + " // Formed: " + jsonObj["formed"];
header.appendChild(myPara);
}
```
@@ -230,24 +222,24 @@ Luego, agregue la siguiente función al final del código, que crea y muestra la
```js
function showHeroes(jsonObj) {
- const heroes = jsonObj['members'];
+ const heroes = jsonObj["members"];
for (var i = 0; i < heroes.length; i++) {
- const myArticle = document.createElement('article');
- const myH2 = document.createElement('h2');
- const myPara1 = document.createElement('p');
- const myPara2 = document.createElement('p');
- const myPara3 = document.createElement('p');
- const myList = document.createElement('ul');
+ const myArticle = document.createElement("article");
+ const myH2 = document.createElement("h2");
+ const myPara1 = document.createElement("p");
+ const myPara2 = document.createElement("p");
+ const myPara3 = document.createElement("p");
+ const myList = document.createElement("ul");
myH2.textContent = heroes[i].name;
- myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
- myPara2.textContent = 'Age: ' + heroes[i].age;
- myPara3.textContent = 'Superpowers:';
+ myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity;
+ myPara2.textContent = "Age: " + heroes[i].age;
+ myPara3.textContent = "Superpowers:";
const superPowers = heroes[i].powers;
for (var j = 0; j < superPowers.length; j++) {
- const listItem = document.createElement('li');
+ const listItem = document.createElement("li");
listItem.textContent = superPowers[j];
myList.appendChild(listItem);
}
@@ -283,7 +275,7 @@ A continuación, se utiliza un ciclo [for](/es/docs/Learn/JavaScript/Building_bl
El ejemplo anterior era simple en términos de acceder al objeto JavaScript, porque se programó la solicitud XHR para convertir el JSON de respuesta directamente en un objeto de JavaScript utilizando:
```js
-request.responseType = 'json';
+request.responseType = "json";
```
En algunas ocasiones, se recibirá una cadena JSON sin procesar, y será necesario convertirla en un objeto. Y cuando sea necesario enviar un objeto Javascript a través de la red, será necesario convertirlo a un JSON (una cadena) antes de ser enviado. Afortunadamente, estos dos problemas son muy comunes en el desarrollo web por lo que un objeto JSON integrado está disponible en los navegadores, que contiene los siguientes dos métodos:
@@ -294,25 +286,25 @@ En algunas ocasiones, se recibirá una cadena JSON sin procesar, y será necesar
El primer método se puede observar en el ejemplo [heroes-finished-json-parse.html](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html) (vea el [código fuente](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html)) — que realiza exactamente lo mismo que el ejemplo que se construyó previamente, excepto porque se determinó que el XHR devolviera el texto JSON sin procesar, luego se utiliza `parse()` para convertirlo en un objeto JavaScript. El extracto del código es el siguiente:
```js
-request.open('GET', requestURL);
-request.responseType = 'text'; // recibimos una cadena de tipo "string"
+request.open("GET", requestURL);
+request.responseType = "text"; // recibimos una cadena de tipo "string"
request.send();
-request.onload = function() {
+request.onload = function () {
const superHeroesText = request.response; // cogemos la cadena de response
const superHeroes = JSON.parse(superHeroesText); // la convertimos a objeto
populateHeader(superHeroes);
showHeroes(superHeroes);
-}
+};
```
Como es de suponer, `stringify()` trabaja de la forma opuesta. Intente ingresar las siguientes líneas en la consola de JavaScript de su navegador para verlo en acción:
```js
-const myJSON = { "name": "Chris", "age": "38" };
-myJSON
+const myJSON = { name: "Chris", age: "38" };
+myJSON;
const myString = JSON.stringify(myJSON);
-myString
+myString;
```
En este caso, se ha creado un objeto JavaScript, luego se comprueba lo que contiene, y entonces se convierte en una cadena JSON utilizando `stringify()` — guardando el valor retornado en una variable nueva — y comprobándolo nuevamente.
diff --git a/files/es/learn/javascript/objects/object_building_practice/index.md b/files/es/learn/javascript/objects/object_building_practice/index.md
index 12494073b67ef2..abc5bf24c5b9af 100644
--- a/files/es/learn/javascript/objects/object_building_practice/index.md
+++ b/files/es/learn/javascript/objects/object_building_practice/index.md
@@ -31,12 +31,12 @@ Para comenzar haga una copia en su computador de los archivos: [`index.html`](ht
La primera parte del script es:
```js
-var canvas = document.querySelector('canvas');
+var canvas = document.querySelector("canvas");
-var ctx = canvas.getContext('2d');
+var ctx = canvas.getContext("2d");
-var width = canvas.width = window.innerWidth;
-var height = canvas.height = window.innerHeight;
+var width = (canvas.width = window.innerWidth);
+var height = (canvas.height = window.innerHeight);
```
Este script obtiene una referencia del elemento `
-
- \{{ form.password.label_tag }} |
- \{{ form.password }} |
-
-
-
-
-
-
-
-
-{# Assumes you setup the password_reset view in your URLconf #}
-Lost password?
+ {% endif %}
+
+
+ {% csrf_token %}
+
+
+ \{{ form.username.label_tag }} |
+ \{{ form.username }} |
+
+
+ \{{ form.password.label_tag }} |
+ \{{ form.password }} |
+
+
+
+
+
+
+ {# Assumes you setup the password_reset view in your URLconf #}
+ Lost password?
{% endblock %}
```
@@ -252,7 +259,7 @@ Si navegas a la url de cierre de sesión (`http://127.0.0.1:8000/accounts/logout
Crea y abre el fichero /**locallibrary/templates/registration/logged_out.html**. Copia en él el siguiente texto:
-```html
+```django
{% extends "base_generic.html" %}
{% block content %}
@@ -276,16 +283,18 @@ Las siguientes plantillas pueden usarse como un punto de partida.
Este es el formulario para obtener la dirección del correo electrónico del usuario (para enviar el correo de reinicio de contraseña). Crea **/locallibrary/templates/registration/password_reset_form.html**, y establece el siguiente contenido:
-```html
+```django
{% extends "base_generic.html" %}
-{% block content %}
-
-{% csrf_token %}
- {% if form.email.errors %} \{{ form.email.errors }} {% endif %}
- \{{ form.email }}
-
-
+{% block content %}
+
+ {% csrf_token %}
+ {% if form.email.errors %}
+ \{{ form.email.errors }}
+ {% endif %}
+ \{{ form.email }}
+
+
{% endblock %}
```
@@ -293,7 +302,7 @@ Este es el formulario para obtener la dirección del correo electrónico del usu
Este formulario es mostrado después de que tu dirección de correo electrónico haya sido recogida. Crea **/locallibrary/templates/registration/password_reset_done.html**, y establece el siguiente contenido:
-```html
+```django
{% extends "base_generic.html" %}
{% block content %}
We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.
@@ -304,7 +313,7 @@ Este formulario es mostrado después de que tu dirección de correo electrónico
Esta plantilla suministra el texto HTML del correo electrónico, y contiene el enlace de reseteo que enviaremos a los usuarios. Crea **/locallibrary/templates/registration/password_reset_email.html**, y establece el siguiente contenido:
-```html
+```django
Someone asked for password reset for email \{{ email }}. Follow the link below:
\{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
```
@@ -313,7 +322,7 @@ Someone asked for password reset for email \{{ email }}. Follow the link below:
Esta página es donde introduces una nueva contraseña después de pinchar el enlace en el correo electrónico de reinicio de contraseña. Crea **/locallibrary/templates/registration/password_reset_confirm.html**, y establece el siguiente contenido:
-```html
+```django
{% extends "base_generic.html" %}
{% block content %}
@@ -353,7 +362,7 @@ Esta página es donde introduces una nueva contraseña después de pinchar el en
Este es el último paso de la plantilla de reinicio de contraseña, que es mostrada para notificarte cuando el reinicio de contraseña ha tenido éxito. Crea **/locallibrary/templates/registration/password_reset_complete.html**, y establece el siguiente contenido:
-```html
+```django
{% extends "base_generic.html" %}
{% block content %}
@@ -376,7 +385,9 @@ Serás capaz de probar la funcionalidad de reinicio de contraseña desde el enla
> **Nota:** El sistema de reinicio de contraseña requiere que tu sitio web soporte envío de correo, que está más allá del ámbito de este artículo, por lo que esta parte **no funcionará todavía**. Para permitir el testeo, establece la siguiente línea al final de tu fichero settings.py. Esto registra en la consola cualquier envío de correo electrónico (y así puedes copiar el enlace de reinicio de contraseña desde dicha consola).
>
-> `EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'`
+> ```python
+> EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
+> ```
>
> Para más información, ver [Sending email](https://docs.djangoproject.com/en/1.10/topics/email/) (Django docs).
@@ -392,7 +403,7 @@ Es típico que primero pruebes con la variable de plantilla `\{{ user.is_authent
Abre la plantilla base (**/locallibrary/catalog/templates/base_generic.html**) y copia el siguiente texto en el bloque `sidebar`, justamente antes de la etiqueta de plantilla `endblock` .
-```html
+```django
| | |