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 133f92e581e4da..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_.` 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 e985a24f3fce0e..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 ``). 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 `
`). 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 `
- 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
- `](/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), [``](/es/docs/Web/CSS/time) y [``](/es/docs/Web/CSS/resolution)[.](/es/docs/Web/CSS/resolution) |
+| 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), [``](/es/docs/Web/CSS/time) y [``](/es/docs/Web/CSS/resolution)[.](/es/docs/Web/CSS/resolution) |
| [``](/es/docs/Web/CSS/percentage) | Un `` representa una fracción de algún otro valor, por ejemplo, `50%`. Los valores de porcentaje siempre son relativos a otra cantidad, por ejemplo, la longitud de un elemento es relativa a la longitud de su elemento padre. |
### Longitudes
@@ -94,17 +94,17 @@ La mayoría de estos valores son más útiles cuando se usan en una salida en fo
Las unidades de longitud relativa son relativas a algo más, por ejemplo, al tamaño de letra del elemento principal o al tamaño de la ventana gráfica. La ventaja de usar unidades relativas es que con una planificación cuidadosa puedes lograr que el tamaño del texto u otros elementos escalen en relación con todo lo demás en la página. En la tabla siguiente se enumeran algunas de las unidades más útiles para el desarrollo web.
-| Unidad | Relativa a |
-| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Unidad | Relativa a |
+| ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `em` | Tamaño de letra del elemento padre, en el caso de propiedades tipográficas como {{cssxref("font-size")}}, y tamaño de la fuente del propio elemento en el caso de otras propiedades, como {{cssxref("width")}}. |
-| `ex` | Altura x de la fuente del elemento. |
-| `ch` | La medida de avance (ancho) del glifo "0" de la letra del elemento. |
-| `rem` | Tamaño de la letra del elemento raíz. |
-| `lh` | Altura de la línea del elemento. |
-| `vw` | 1% del ancho de la ventana gráfica. |
-| `vh` | 1% de la altura de la ventana gráfica. |
-| `vmin` | 1% de la dimensión más pequeña de la ventana gráfica. |
-| `vmax` | 1% de la dimensión más grande de la ventana gráfica. |
+| `ex` | Altura x de la fuente del elemento. |
+| `ch` | La medida de avance (ancho) del glifo "0" de la letra del elemento. |
+| `rem` | Tamaño de la letra del elemento raíz. |
+| `lh` | Altura de la línea del elemento. |
+| `vw` | 1% del ancho de la ventana gráfica. |
+| `vh` | 1% de la altura de la ventana gráfica. |
+| `vmin` | 1% de la dimensión más pequeña de la ventana gráfica. |
+| `vmax` | 1% de la dimensión más grande de la ventana gráfica. |
#### Un ejemplo de análisis
diff --git a/files/es/learn/css/css_layout/flexbox/index.md b/files/es/learn/css/css_layout/flexbox/index.md
index 6fe3e6c71c86bb..2581620601ba66 100644
--- a/files/es/learn/css/css_layout/flexbox/index.md
+++ b/files/es/learn/css/css_layout/flexbox/index.md
@@ -304,7 +304,7 @@ A continuación, seleccionamos el primer elemento {{htmlelement ("div")}}. Prime
```css
article:nth-of-type(3) div:first-child {
- flex:1 100px;
+ flex: 1 100px;
display: flex;
flex-flow: row wrap;
align-items: center;
diff --git a/files/es/learn/css/css_layout/floats/index.md b/files/es/learn/css/css_layout/floats/index.md
index d32deb9193928d..056904cb20542f 100644
--- a/files/es/learn/css/css_layout/floats/index.md
+++ b/files/es/learn/css/css_layout/floats/index.md
@@ -51,11 +51,31 @@ Primero, empecemos con algo de HTML simple — añade lo siguiente al cuerpo de
Caja flotante
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet.
-
-Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
-
-Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+ dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+ ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+ laoreet sit amet.
+
+
+
+ Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
+ orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
+ ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+ ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
+ ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
+ a urna. Ut id ornare felis, eget fermentum sapien.
+
+
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+ tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+ sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+ vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+ penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
```
Ahora aplica el siguiente CSS a tu HTML (usando un elemento {{htmlelement("style")}} o un {{htmlelement("link")}} para separar el fichero `.css` — tú eliges):
@@ -65,14 +85,17 @@ body {
width: 90%;
max-width: 900px;
margin: 0 auto;
- font: .9em/1.2 Arial, Helvetica, sans-serif
+ font:
+ 0.9em/1.2 Arial,
+ Helvetica,
+ sans-serif;
}
.box {
width: 150px;
height: 100px;
border-radius: 5px;
- background-color: rgb(207,232,220);
+ background-color: rgb(207, 232, 220);
padding: 1em;
}
```
@@ -86,7 +109,7 @@ Si guardas y recargas la página, verás algo parecido a lo que esperarías: la
width: 150px;
height: 100px;
border-radius: 5px;
- background-color: rgb(207,232,220);
+ background-color: rgb(207, 232, 220);
padding: 1em;
}
```
@@ -100,11 +123,31 @@ Ahora, si guardas y recargas, podrás ver algo parecido a lo siguiente:
Caja flotante
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
-
-Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
-
-Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+ dolor, eu lacinia lorem placerat vulputate.
+
+
+
+ Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+ imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+ at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+ ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+ convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+ Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+ luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+ felis, eget fermentum sapien.
+
+
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+ tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+ sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+ vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+ penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
```
```css hidden
@@ -112,17 +155,20 @@ body {
width: 90%;
max-width: 900px;
margin: 0 auto;
- font: .9em/1.2 Arial, Helvetica, sans-serif
+ font:
+ 0.9em/1.2 Arial,
+ Helvetica,
+ sans-serif;
}
.box {
-float: left;
-margin-right: 15px;
-width: 150px;
-height: 150px;
-border-radius: 5px;
-background-color: rgb(207,232,220);
-padding: 1em;
+ float: left;
+ margin-right: 15px;
+ width: 150px;
+ height: 150px;
+ border-radius: 5px;
+ background-color: rgb(207, 232, 220);
+ padding: 1em;
}
```
@@ -138,7 +184,7 @@ Añade una clase `special` al primer párrafo de texto, el que sucede inmediatam
```css
.special {
- background-color: rgb(79,185,227);
+ background-color: rgb(79, 185, 227);
padding: 10px;
color: #fff;
}
@@ -153,35 +199,58 @@ Para que el efecto sea más fácil de ver, cambia el `margin-right` de tu elemen
Caja flotante
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
-
-Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
-
-Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+ dolor, eu lacinia lorem placerat vulputate.
+
+
+
+ Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+ imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+ at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+ ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+ convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+ Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+ luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+ felis, eget fermentum sapien.
+
+
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+ tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+ sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+ vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+ penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
```
```css hidden
body {
-width: 90%;
-max-width: 900px;
-margin: 0 auto;
-font: .9em/1.2 Arial, Helvetica, sans-serif
+ width: 90%;
+ max-width: 900px;
+ margin: 0 auto;
+ font:
+ 0.9em/1.2 Arial,
+ Helvetica,
+ sans-serif;
}
.box {
-float: left;
-margin: 15px;
-width: 150px;
-height: 150px;
-border-radius: 5px;
-background-color: rgb(207,232,220);
-padding: 1em;
+ float: left;
+ margin: 15px;
+ width: 150px;
+ height: 150px;
+ border-radius: 5px;
+ background-color: rgb(207, 232, 220);
+ padding: 1em;
}
.special {
-background-color: rgb(79,185,227);
-padding: 10px;
-color: #fff;
+ background-color: rgb(79, 185, 227);
+ padding: 10px;
+ color: #fff;
}
```
@@ -206,33 +275,56 @@ En el HTML del ejemplo anterior, añade una clase `cleared` al segundo párrafo
Caja flotante
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
-
-Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
-
-Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+ dolor, eu lacinia lorem placerat vulputate.
+
+
+
+ Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+ imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+ at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+ ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+ convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+ Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+ luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+ felis, eget fermentum sapien.
+
+
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+ tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+ sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+ vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+ penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
```
```css hidden
body {
-width: 90%;
-max-width: 900px;
-margin: 0 auto;
-font: .9em/1.2 Arial, Helvetica, sans-serif
+ width: 90%;
+ max-width: 900px;
+ margin: 0 auto;
+ font:
+ 0.9em/1.2 Arial,
+ Helvetica,
+ sans-serif;
}
.box {
-float: left;
-margin: 15px;
-width: 150px;
-height: 150px;
-border-radius: 5px;
-background-color: rgb(207,232,220);
-padding: 1em;
+ float: left;
+ margin: 15px;
+ width: 150px;
+ height: 150px;
+ border-radius: 5px;
+ background-color: rgb(207, 232, 220);
+ padding: 1em;
}
.cleared {
-clear: left;
+ clear: left;
}
```
@@ -252,7 +344,10 @@ Ahora ya sabes cómo limpiar un elemento que sigue a un elemento flotante, pero
Caja flotante
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+ aliquam dolor, eu lacinia lorem placerat vulputate.
+
```
@@ -260,7 +355,7 @@ En tu CSS, añade la siguiente regla para la clase `.wrapper` y después recarga
```css
.wrapper {
- background-color: rgb(79,185,227);
+ background-color: rgb(79, 185, 227);
padding: 10px;
color: #fff;
}
@@ -270,7 +365,7 @@ Además, elimina la clase `.cleared` anterior:
```css
.cleared {
- clear: left;
+ clear: left;
}
```
@@ -283,36 +378,59 @@ Verás que, como en el ejemplo en el que hemos puesto un color de fondo al párr
Caja flotante
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+ aliquam dolor, eu lacinia lorem placerat vulputate.
+
-Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
-
-Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+ Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+ imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+ at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+ ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+ convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+ Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+ luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+ felis, eget fermentum sapien.
+
+
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+ tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+ sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+ vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+ penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
```
```css hidden
body {
-width: 90%;
-max-width: 900px;
-margin: 0 auto;
-font: .9em/1.2 Arial, Helvetica, sans-serif
+ width: 90%;
+ max-width: 900px;
+ margin: 0 auto;
+ font:
+ 0.9em/1.2 Arial,
+ Helvetica,
+ sans-serif;
}
.wrapper {
-background-color: rgb(79,185,227);
-padding: 10px;
-color: #fff;
+ background-color: rgb(79, 185, 227);
+ padding: 10px;
+ color: #fff;
}
.box {
-float: left;
-margin: 15px;
-width: 150px;
-height: 150px;
-border-radius: 5px;
-background-color: rgb(207,232,220);
-padding: 1em;
+ float: left;
+ margin: 15px;
+ width: 150px;
+ height: 150px;
+ border-radius: 5px;
+ background-color: rgb(207, 232, 220);
+ padding: 1em;
}
```
@@ -341,41 +459,64 @@ Ahora recarga la página y la caja debería limpiarse. Esto es básicamente lo m
Caja flotante
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+ aliquam dolor, eu lacinia lorem placerat vulputate.
+
-Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
-
-Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+ Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+ imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+ at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+ ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+ convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+ Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+ luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+ felis, eget fermentum sapien.
+
+
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+ tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+ sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+ vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+ penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
```
```css hidden
body {
-width: 90%;
-max-width: 900px;
-margin: 0 auto;
-font: .9em/1.2 Arial, Helvetica, sans-serif
+ width: 90%;
+ max-width: 900px;
+ margin: 0 auto;
+ font:
+ 0.9em/1.2 Arial,
+ Helvetica,
+ sans-serif;
}
.wrapper {
-background-color: rgb(79,185,227);
-padding: 10px;
-color: #fff;
+ background-color: rgb(79, 185, 227);
+ padding: 10px;
+ color: #fff;
}
.box {
-float: left;
-margin: 15px;
-width: 150px;
-height: 150px;
-border-radius: 5px;
-background-color: rgb(207,232,220);
-padding: 1em;
+ float: left;
+ margin: 15px;
+ width: 150px;
+ height: 150px;
+ border-radius: 5px;
+ background-color: rgb(207, 232, 220);
+ padding: 1em;
}
.wrapper::after {
-content: "";
-clear: both;
-display: block;
+ content: "";
+ clear: both;
+ display: block;
}
```
@@ -389,7 +530,7 @@ Elimina el CSS clearfix que añadiste en la anterior sección y, en su lugar, a
```css
.wrapper {
- background-color: rgb(79,185,227);
+ background-color: rgb(79, 185, 227);
padding: 10px;
color: #fff;
overflow: auto;
@@ -401,36 +542,59 @@ Elimina el CSS clearfix que añadiste en la anterior sección y, en su lugar, a
Caja flotante
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+ aliquam dolor, eu lacinia lorem placerat vulputate.
+
-Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
-
-Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+ Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+ imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+ at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+ ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+ convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+ Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+ luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+ felis, eget fermentum sapien.
+
+
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+ tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+ sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+ vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+ penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
```
```css hidden
body {
-width: 90%;
-max-width: 900px;
-margin: 0 auto;
-font: .9em/1.2 Arial, Helvetica, sans-serif
+ width: 90%;
+ max-width: 900px;
+ margin: 0 auto;
+ font:
+ 0.9em/1.2 Arial,
+ Helvetica,
+ sans-serif;
}
.wrapper {
-background-color: rgb(79,185,227);
-padding: 10px;
-color: #fff;
-overflow: auto;
+ background-color: rgb(79, 185, 227);
+ padding: 10px;
+ color: #fff;
+ overflow: auto;
}
.box {
-float: left;
-margin: 15px;
-width: 150px;
-height: 150px;
-border-radius: 5px;
-background-color: rgb(207,232,220);
-padding: 1em;
+ float: left;
+ margin: 15px;
+ width: 150px;
+ height: 150px;
+ border-radius: 5px;
+ background-color: rgb(207, 232, 220);
+ padding: 1em;
}
```
@@ -444,7 +608,7 @@ La manera moderna de resolver este problema es usar el valor `flow-root` de la p
```css
.wrapper {
- background-color: rgb(79,185,227);
+ background-color: rgb(79, 185, 227);
padding: 10px;
color: #fff;
display: flow-root;
@@ -456,36 +620,59 @@ La manera moderna de resolver este problema es usar el valor `flow-root` de la p
Caja flotante
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+ aliquam dolor, eu lacinia lorem placerat vulputate.
+
-Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
-
-Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+ Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+ imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+ at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+ ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+ convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+ Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+ luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+ felis, eget fermentum sapien.
+
+
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+ tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+ sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+ vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+ penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
```
```css hidden
body {
-width: 90%;
-max-width: 900px;
-margin: 0 auto;
-font: .9em/1.2 Arial, Helvetica, sans-serif
+ width: 90%;
+ max-width: 900px;
+ margin: 0 auto;
+ font:
+ 0.9em/1.2 Arial,
+ Helvetica,
+ sans-serif;
}
.wrapper {
-background-color: rgb(79,185,227);
-padding: 10px;
-color: #fff;
-display: flow-root;
+ background-color: rgb(79, 185, 227);
+ padding: 10px;
+ color: #fff;
+ display: flow-root;
}
.box {
-float: left;
-margin: 15px;
-width: 150px;
-height: 150px;
-border-radius: 5px;
-background-color: rgb(207,232,220);
-padding: 1em;
+ float: left;
+ margin: 15px;
+ width: 150px;
+ height: 150px;
+ border-radius: 5px;
+ background-color: rgb(207, 232, 220);
+ padding: 1em;
}
```
diff --git a/files/es/learn/css/css_layout/grids/index.md b/files/es/learn/css/css_layout/grids/index.md
index 374ef190de32da..18d33e76cb4ffc 100644
--- a/files/es/learn/css/css_layout/grids/index.md
+++ b/files/es/learn/css/css_layout/grids/index.md
@@ -50,7 +50,7 @@ Para definir una cuadrícula utilizamos el valor `grid` de la propiedad {{cssxre
```css
.container {
- display: grid;
+ display: grid;
}
```
@@ -60,8 +60,8 @@ Para ver algo que se parezca más a una cuadrícula, necesitamos añadir columna
```css
.container {
- display: grid;
- grid-template-columns: 200px 200px 200px;
+ display: grid;
+ grid-template-columns: 200px 200px 200px;
}
```
@@ -72,31 +72,34 @@ body {
width: 90%;
max-width: 900px;
margin: 2em auto;
- font: .9em/1.2 Arial, Helvetica, sans-serif;
+ font:
+ 0.9em/1.2 Arial,
+ Helvetica,
+ sans-serif;
}
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
-}
+}
.container > div {
border-radius: 5px;
padding: 10px;
- background-color: rgb(207,232,220);
- border: 2px solid rgb(79,185,227);
+ background-color: rgb(207, 232, 220);
+ border: 2px solid rgb(79, 185, 227);
}
```
```html hidden
-
Uno
-
Dos
-
Tres
-
Cuatro
-
Cinco
-
Seis
-
Siete
+
Uno
+
Dos
+
Tres
+
Cuatro
+
Cinco
+
Seis
+
Siete
-
-
-Mi artículo
-Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
-
- Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-
-
-
-Otras cosas
-Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.
-
-
Contáctame: me@mysite.com
+
+
+ Mi artículo
+
+ Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+ imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
+ massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
+ egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
+ et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
+ imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
+ ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
+ commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+
+
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+ tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+ lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
+ quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
+ natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+
+
+ Otras cosas
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est.
+
+
+
Contáctame: me@mysite.com
-
-
-Mi artículo
-Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
-
- Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-
-
-
Otras cosas
-Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.
-
-
Contáctame: me@mysite.com
+
+
+ Mi artículo
+
+ Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+ imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
+ massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
+ egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
+ et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
+ imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
+ ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
+ commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+
+
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+ tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+ lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
+ quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
+ natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+
+
+ Otras cosas
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est.
+
+
+
Contáctame: me@mysite.com
-
-
-Mi artículo
-Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
-
- Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-
-
-
Otras cosas
-Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.
-
-
Contáctame: me@mysite.com
+
+
+ Mi artículo
+
+ Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+ imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
+ massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
+ egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
+ et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
+ imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
+ ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
+ commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+
+
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+ tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+ lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
+ quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
+ natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+
+
+ Otras cosas
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est.
+
+
+
Contáctame: me@mysite.com
-
Uno
-
Dos
-
Tres
+
Uno
+
Dos
+
Tres
-
Uno
-
Dos
-
Tres
-
Cuatro
-
Cinco
-
Seis
+
Uno
+
Dos
+
Tres
+
Cuatro
+
Cinco
+
Seis
-
Uno
-
Dos
-
Tres
+
Uno
+
Dos
+
Tres
Float
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+ dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+ ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+ laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+ tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+ neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+ volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+ pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+ lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+
```
```css
.box {
- float: left;
- width: 150px;
- height: 150px;
- margin-right: 30px;
+ float: left;
+ width: 150px;
+ height: 150px;
+ margin-right: 30px;
}
```
@@ -339,11 +357,11 @@ body {
}
p {
- background-color: rgb(207,232,220);
- border: 2px solid rgb(79,185,227);
- padding: 10px;
- margin: 10px;
- border-radius: 5px;
+ background-color: rgb(207, 232, 220);
+ border: 2px solid rgb(79, 185, 227);
+ padding: 10px;
+ margin: 10px;
+ border-radius: 5px;
}
```
@@ -371,30 +389,30 @@ Añadir este código dará el resultado siguiente:
El posicionamiento relativo
Soy un elemento básico de nivel de bloque.
-Este es mi elemento con posicionamiento relativo.
+Este es mi elemento con posicionamiento relativo.
Soy un elemento básico de nivel de bloque.
```
```css hidden
body {
-width: 500px;
-margin: 0 auto;
+ width: 500px;
+ margin: 0 auto;
}
p {
-background-color: rgb(207,232,220);
-border: 2px solid rgb(79,185,227);
-padding: 10px;
-margin: 10px;
-border-radius: 5px;
+ background-color: rgb(207, 232, 220);
+ border: 2px solid rgb(79, 185, 227);
+ padding: 10px;
+ margin: 10px;
+ border-radius: 5px;
}
```
```css
.positioned {
position: relative;
- background: rgba(255,84,104,.3);
- border: 2px solid rgb(255,84,104);
+ background: rgba(255, 84, 104, 0.3);
+ border: 2px solid rgb(255, 84, 104);
top: 30px;
left: 30px;
}
@@ -422,32 +440,32 @@ Aquí le damos a la propiedad {{cssxref ("position")}} de nuestro párrafo del m
Posicionamiento absoluto
Soy un elemento básico de nivel de bloque.
-Este es mi elemento con posicionamiento absoluto.
+Este es mi elemento con posicionamiento absoluto.
Soy un elemento básico de nivel de bloque.
```
```css hidden
body {
-width: 500px;
-margin: 0 auto;
+ width: 500px;
+ margin: 0 auto;
}
p {
-background-color: rgb(207,232,220);
-border: 2px solid rgb(79,185,227);
-padding: 10px;
-margin: 10px;
-border-radius: 5px;
+ background-color: rgb(207, 232, 220);
+ border: 2px solid rgb(79, 185, 227);
+ padding: 10px;
+ margin: 10px;
+ border-radius: 5px;
}
```
```css
.positioned {
- position: absolute;
- background: rgba(255,84,104,.3);
- border: 2px solid rgb(255,84,104);
- top: 30px;
- left: 30px;
+ position: absolute;
+ background: rgba(255, 84, 104, 0.3);
+ border: 2px solid rgb(255, 84, 104);
+ top: 30px;
+ left: 30px;
}
```
@@ -478,33 +496,61 @@ En este ejemplo nuestro HTML tiene tres párrafos de texto para poder tener una
Fijo
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
-
-Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+ dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+ ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+ laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+ tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+ neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+ volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+ pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+ lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+
+
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+ tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+ sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+ vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+ penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+ dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+ ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+ laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+ tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+ neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+ volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+ pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+ lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+
```
```css hidden
body {
-width: 500px;
-margin: 0 auto;
+ width: 500px;
+ margin: 0 auto;
}
.positioned {
-background: rgba(255,84,104,.3);
-border: 2px solid rgb(255,84,104);
-padding: 10px;
-margin: 10px;
-border-radius: 5px;
+ background: rgba(255, 84, 104, 0.3);
+ border: 2px solid rgb(255, 84, 104);
+ padding: 10px;
+ margin: 10px;
+ border-radius: 5px;
}
```
```css
.positioned {
- position: fixed;
- top: 30px;
- left: 30px;
+ position: fixed;
+ top: 30px;
+ left: 30px;
}
```
@@ -517,27 +563,55 @@ El posicionamiento pegajoso es el último método de posicionamiento que tenemos
```html hidden
Posicionamiento pegajoso
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+ dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+ ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+ laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+ tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+ neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+ volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+ pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+ lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+
Pegajoso
-Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+ tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+ sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+ vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+ penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+ dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+ ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+ laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+ tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+ neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+ volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+ pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+ lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+
```
```css hidden
body {
-width: 500px;
-margin: 0 auto;
+ width: 500px;
+ margin: 0 auto;
}
.positioned {
-background: rgba(255,84,104,.3);
-border: 2px solid rgb(255,84,104);
-padding: 10px;
-margin: 10px;
-border-radius: 5px;
+ background: rgba(255, 84, 104, 0.3);
+ border: 2px solid rgb(255, 84, 104);
+ padding: 10px;
+ margin: 10px;
+ border-radius: 5px;
}
```
@@ -568,15 +642,15 @@ Veamos un ejemplo. Primero, un código de marcado sencillo que crea un formulari
En primer lugar, díganos su nombre y edad.
Nombre:
-
Apellidos:
-
Edad:
-
```
@@ -599,7 +673,8 @@ form div {
display: table-row;
}
-form label, form input {
+form label,
+form input {
display: table-cell;
margin-bottom: 10px;
}
@@ -639,11 +714,10 @@ En el ejemplo siguiente comenzamos con un bloque de HTML dentro de un elemento `
```html
-
Diseño en columnas
-
- Párrafo 1.
-
Párrafo 2.
+
Diseño en columnas
+
Párrafo 1.
+
Párrafo 2.
-
Diseño en columnas
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
-
-
-
Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-
+
Diseño en columnas
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+ aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+ pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+ ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
+ ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
+ vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
+ Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
+ sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
+ Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
+ eget fermentum sapien.
+
+
+
+ Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+ ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+ est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+ tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+ lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+ vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+ penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
Flujo de los documentos básicos
-Soy un elemento básico de nivel de bloque. Mis elementos de nivel de bloque adyacentes se encuentran en líneas nuevas debajo de mí.
-
-Cubrimos por defecto el 100% del ancho de nuestro elemento principal, y somos tan altos como nuestro contenido secundario. Nuestro ancho y alto total es nuestro contenido + área de relleno + ancho/alto del borde.
-
-Estamos separados por nuestros márgenes. Debido al colapso del margen, estamos separados por el ancho de uno de nuestros márgenes, no por ambos.
-
-Los elementos en línea como este y este otro se ubican en la misma y la de los nodos de texto adyacentes, mientras hay espacio en la misma línea. Si un elemento en línea desborda, sigue por la línea siguiente, si es posible (como la que contiene este texto) , o simplemente pasa a una línea nueva, como hace esta imagen:
+
+ Soy un elemento básico de nivel de bloque. Mis elementos de nivel de bloque
+ adyacentes se encuentran en líneas nuevas debajo de mí.
+
+
+
+ Cubrimos por defecto el 100% del ancho de nuestro elemento principal, y somos
+ tan altos como nuestro contenido secundario. Nuestro ancho y alto total es
+ nuestro contenido + área de relleno + ancho/alto del borde.
+
+
+
+ Estamos separados por nuestros márgenes. Debido al colapso del margen, estamos
+ separados por el ancho de uno de nuestros márgenes, no por ambos.
+
+
+
+ Los elementos en línea como este y este otro se
+ ubican en la misma y la de los nodos de texto adyacentes, mientras hay espacio
+ en la misma línea. Si un elemento en línea desborda,
+ sigue por la línea siguiente, si es posible (como la que contiene este
+ texto) , o simplemente pasa a una línea nueva, como hace esta imagen:
+
```
```css
@@ -69,8 +88,8 @@ body {
}
p {
- background: rgba(255,84,104,0.3);
- border: 2px solid rgb(255,84,104);
+ background: rgba(255, 84, 104, 0.3);
+ border: 2px solid rgb(255, 84, 104);
padding: 10px;
margin: 10px;
}
diff --git a/files/es/learn/css/css_layout/responsive_design/index.md b/files/es/learn/css/css_layout/responsive_design/index.md
index 636b10a26e8b4b..1acd8cc3465e74 100644
--- a/files/es/learn/css/css_layout/responsive_design/index.md
+++ b/files/es/learn/css/css_layout/responsive_design/index.md
@@ -264,7 +264,7 @@ Esto significa que necesitamos especificar el tamaño de letra para el título d
Si observas el tipo de letra de una página HTML responsiva, en general vas a encontrar la siguiente etiqueta {{htmlelement ("meta")}} en la cabecera del documento.
```html
-` para que se muestren en una fila. Cualquier navegador que no sea compatible con el método de compaginación [CSS Grid](/es/docs/Learn/CSS/CSS_layout/Grids) verá la hilera de cajas como un diseño con el método de flotación. Un elemento de flotación que se convierte en un elemento de cuadrícula pierde el comportamiento de flotación, lo que significa que al convertir el contenedor en un contenedor de cuadrícula, los elementos de flotación se convierten en elementos de cuadrícula. Si el navegador admite el diseño de cuadrícula, muestra la vista de cuadrícula; si no, ignora las propiedades relacionadas con el diseño de cuadrícula y utiliza el diseño de flotación.
```css
-* {box-sizing: border-box;}
+* {
+ box-sizing: border-box;
+}
.wrapper {
- background-color: rgb(79,185,227);
+ background-color: rgb(79, 185, 227);
padding: 10px;
max-width: 400px;
display: grid;
@@ -77,7 +79,7 @@ En el ejemplo siguiente hemos especificado tres elementos de flotación `
`
.item {
float: left;
border-radius: 5px;
- background-color: rgb(207,232,220);
+ background-color: rgb(207, 232, 220);
padding: 1em;
}
```
@@ -114,10 +116,12 @@ Observa que si usas el CSS de esta manera puedes proporcionar una experiencia de
En la compaginación de flotación, el porcentaje se calcula con respecto al contenedor: 33,333% es un tercio del ancho del contenedor. Sin embargo, en el método Grid ese 33,333% se calcula con respecto al área de la cuadrícula en la que el elemento está ubicado, por lo que en realidad se convierte en un tercio del tamaño que queremos una vez que se introduce la compaginación en cuadrícula.
```css
-* {box-sizing: border-box;}
+* {
+ box-sizing: border-box;
+}
.wrapper {
- background-color: rgb(79,185,227);
+ background-color: rgb(79, 185, 227);
padding: 10px;
max-width: 400px;
display: grid;
@@ -127,7 +131,7 @@ En la compaginación de flotación, el porcentaje se calcula con respecto al con
.item {
float: left;
border-radius: 5px;
- background-color: rgb(207,232,220);
+ background-color: rgb(207, 232, 220);
padding: 1em;
width: 33.333%;
}
@@ -152,10 +156,12 @@ Consultar las propiedades te permite comprobar si un navegador admite alguna car
Si añadimos al ejemplo anterior una consulta de las propiedades, podemos usarla para volver a establecer a `auto` los anchos de nuestros elementos, si sabemos que hay compatibilidad para la compaginación en cuadrícula.
```css
-* {box-sizing: border-box;}
+* {
+ box-sizing: border-box;
+}
.wrapper {
- background-color: rgb(79,185,227);
+ background-color: rgb(79, 185, 227);
padding: 10px;
max-width: 400px;
display: grid;
@@ -165,14 +171,14 @@ Si añadimos al ejemplo anterior una consulta de las propiedades, podemos usarla
.item {
float: left;
border-radius: 5px;
- background-color: rgb(207,232,220);
+ background-color: rgb(207, 232, 220);
padding: 1em;
width: 33.333%;
}
@supports (display: grid) {
.item {
- width: auto;
+ width: auto;
}
}
```
diff --git a/files/es/learn/css/first_steps/getting_started/index.md b/files/es/learn/css/first_steps/getting_started/index.md
index 49a5425d5081d3..3e8cab36a57b99 100644
--- a/files/es/learn/css/first_steps/getting_started/index.md
+++ b/files/es/learn/css/first_steps/getting_started/index.md
@@ -45,28 +45,28 @@ Nuestro punto de partida es un documento HTML. Puedes copiar el código de abajo
```html
-
-
+
+
Empezamos con el CSS
-
-
-
+
+
Soy un título de nivel uno
-
Este es un párrafo de texto. En el texto hay un elemento span
-y también un enlace .
+
+ Este es un párrafo de texto. En el texto hay un
+ elemento span y también un
+ enlace .
+
Este es el segundo párrafo. Contiene un elemento destacado .
- Punto uno
- Punto dos
- Punto tres
+ Punto uno
+ Punto dos
+ Punto tres
-
-
-
+
```
@@ -81,7 +81,7 @@ Crea un archivo en la misma carpeta que tu documento HTML y guárdalo como `styl
Para vincular `styles.css` a `index.html`, añade la siguiente línea en algún lugar dentro del {{htmlelement ("head")}} del documento HTML:
```html
-
+
```
Este elemento {{htmlelement ("link")}} le dice al navegador que hay una hoja de estilo con el atributo `rel` y la ubicación de esa hoja de estilo como el valor del atributo `href`. Puedes probar si el CSS funciona añadiendo una regla a `styles.css`. Usando el editor de código, añade lo siguiente al archivo CSS:
@@ -109,8 +109,9 @@ p {
Puedes determinar múltiples selectores a la vez, separándolos con una coma. Si queremos que todos los párrafos y todos los elementos de la lista sean verdes, el código se verá así:
```css
-p, li {
- color: green;
+p,
+li {
+ color: green;
}
```
@@ -145,7 +146,7 @@ En tu documento HTML, añade al segundo elemento de la lista un [atributo de cla
```html
Punto uno
- Punto dos
+ Punto dos
Punto tres
```
diff --git a/files/es/learn/css/first_steps/how_css_is_structured/index.md b/files/es/learn/css/first_steps/how_css_is_structured/index.md
index 4ca9bf322d61d0..b3be4e2c2e60aa 100644
--- a/files/es/learn/css/first_steps/how_css_is_structured/index.md
+++ b/files/es/learn/css/first_steps/how_css_is_structured/index.md
@@ -49,12 +49,12 @@ En [Empezar con el CSS](/es/docs/Learn/CSS/First_steps/Getting_started), vincula
Una hoja de estilo externa significa que el CSS está escrito en un archivo independiente con una extensión `.css` y que lo vinculas desde un elemento `
` de HTML:
```html
-
+
-
+
Mi experimento CSS
-
+
¡Hola, mundo!
@@ -83,13 +83,13 @@ En el ejemplo anterior, el archivo CSS está en la misma carpeta que el document
```html
-
+
-
+
-
+
```
### Hoja de estilo interna
@@ -99,10 +99,10 @@ Una hoja de estilo interna es cuando no hay ningún archivo CSS externo, sino qu
En este caso, el HTML se vería así:
```html
-
+
-
+
Mi experimento CSS
-
-... contenido de las noticias de hoy ...
-
+
... contenido de las noticias de hoy ...
```
Si la misma propiedad se declara en ambas reglas, el conflicto se resuelve primero a través de la especificidad, a continuación, según el orden de las declaraciones CSS. El orden de las clases en el atributo `class` no es relevante.
@@ -163,6 +162,6 @@ div { color: black; }
Las reglas son más complicadas cuando el selector tiene varias partes. Se puede encontrar más información detallada acerca de cómo se calcula la especificidad del selector en el [capítulo 6.4.3 de la Especificación CSS 2.1](http://www.w3.org/TR/CSS21/cascade.html#specificity)
-#### ¿Qué hacen las propiedades -moz-*?
+#### ¿Qué hacen las propiedades -moz-\*?
Por favor, consulta la página [Extensiones CSS de Mozilla](/en/CSS_Reference/Mozilla_Extensions).
diff --git a/files/es/learn/css/howto/generated_content/index.md b/files/es/learn/css/howto/generated_content/index.md
index 83625a7bcf4673..b27e879bf198b4 100644
--- a/files/es/learn/css/howto/generated_content/index.md
+++ b/files/es/learn/css/howto/generated_content/index.md
@@ -62,7 +62,7 @@ Esta regla agrega un espacio y un ícono después de cada enlace que tiene la cl
```css
a.glossary::after {
- content: " " url("glossary-icon.gif");
+ content: " " url("glossary-icon.gif");
}
```
diff --git a/files/es/learn/css/styling_text/fundamentals/index.md b/files/es/learn/css/styling_text/fundamentals/index.md
index 8985319f857237..da9627544a83c4 100644
--- a/files/es/learn/css/styling_text/fundamentals/index.md
+++ b/files/es/learn/css/styling_text/fundamentals/index.md
@@ -52,12 +52,13 @@ Veamos las propiedades que permiten definir el estilo del tipo de letra. En este
Well I remember it as though it were a meal ago...
-
Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.
+
+ Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+ nestled its way into his mighty throat. Many a fat alley rat had met its
+ demise while staring point blank down the cavernous barrel of this awesome
+ prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+ had many a story to tell. But it was a rare occasion such as this that he did.
+
```
Puedes ver el [ejemplo completo en Github](http://mdn.github.io/learning-area/css/styling-text/fundamentals/) (consulta también [el código fuente](https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html).)
@@ -81,12 +82,13 @@ Esto mostrará el contenido de los párrafos en color rojo, en lugar del negro q
Well I remember it as though it were a meal ago...
-
Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.
+
+ Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+ nestled its way into his mighty throat. Many a fat alley rat had met its
+ demise while staring point blank down the cavernous barrel of this awesome
+ prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+ had many a story to tell. But it was a rare occasion such as this that he did.
+
```
{{ EmbedLiveSample('Color', '100%', 220) }}
@@ -202,12 +204,13 @@ Esto nos da el resultado siguiente:
Well I remember it as though it were a meal ago...
-
Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.
+
+ Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+ nestled its way into his mighty throat. Many a fat alley rat had met its
+ demise while staring point blank down the cavernous barrel of this awesome
+ prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+ had many a story to tell. But it was a rare occasion such as this that he did.
+
```
{{ EmbedLiveSample('Un_ejemplo_con_font-family', '100%', 220) }}
@@ -226,8 +229,10 @@ Las cosas se vuelven más complicadas cuando se empieza a alterar el tamaño del
```html
-
- Mi párrafo
+
+
+ Mi párrafo
+
```
@@ -244,12 +249,13 @@ Nuestro nuevo resultado es:
Well I remember it as though it were a meal ago...
-Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.
+
+ Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+ nestled its way into his mighty throat. Many a fat alley rat had met its
+ demise while staring point blank down the cavernous barrel of this awesome
+ prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+ had many a story to tell. But it was a rare occasion such as this that he did.
+
```
```css
@@ -310,12 +316,13 @@ Añadamos un par de estas propiedades a nuestro ejemplo. Nuestro nuevo resultado
Well I remember it as though it were a meal ago...
-Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.
+
+ Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+ nestled its way into his mighty throat. Many a fat alley rat had met its
+ demise while staring point blank down the cavernous barrel of this awesome
+ prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+ had many a story to tell. But it was a rare occasion such as this that he did.
+
```
```css
@@ -363,10 +370,11 @@ Las cuatro propiedades son las siguientes:
Puedes aplicar diversas sombras al mismo texto incluyendo múltiples valores de sombra separados por comas, por ejemplo:
```css
-text-shadow: -1px -1px 1px #aaa,
- 0px 4px 1px rgba(0,0,0,0.5),
- 4px 4px 5px rgba(0,0,0,0.7),
- 0px 0px 7px rgba(0,0,0,0.4);
+text-shadow:
+ -1px -1px 1px #aaa,
+ 0px 4px 1px rgba(0, 0, 0, 0.5),
+ 4px 4px 5px rgba(0, 0, 0, 0.7),
+ 0px 0px 7px rgba(0, 0, 0, 0.4);
```
Si aplicamos esto al elemento {{htmlelement("h1")}} de nuestro ejemplo _Tommy The Cat_, obtenemos esto:
@@ -376,12 +384,13 @@ Si aplicamos esto al elemento {{htmlelement("h1")}} de nuestro ejemplo _Tommy Th
Well I remember it as though it were a meal ago...
-Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.
+
+ Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+ nestled its way into his mighty throat. Many a fat alley rat had met its
+ demise while staring point blank down the cavernous barrel of this awesome
+ prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+ had many a story to tell. But it was a rare occasion such as this that he did.
+
```
```css hidden
@@ -392,10 +401,11 @@ html {
h1 {
font-size: 26px;
text-transform: capitalize;
- text-shadow: -1px -1px 1px #aaa,
- 0px 2px 1px rgba(0,0,0,0.5),
- 2px 2px 2px rgba(0,0,0,0.7),
- 0px 0px 3px rgba(0,0,0,0.4);
+ text-shadow:
+ -1px -1px 1px #aaa,
+ 0px 2px 1px rgba(0, 0, 0, 0.5),
+ 2px 2px 2px rgba(0, 0, 0, 0.7),
+ 0px 0px 3px rgba(0, 0, 0, 0.4);
}
h1 + p {
@@ -433,12 +443,13 @@ Si aplicamos `text-align: center;` al elemento {{htmlelement("h1")}} de nuestro
Well I remember as though it were a meal ago...
-Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.
+
+ Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+ nestled its way into his mighty throat. Many a fat alley rat had met its
+ demise while staring point blank down the cavernous barrel of this awesome
+ prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+ had many a story to tell. But it was a rare occasion such as this that he did.
+
```
```css hidden
@@ -449,10 +460,11 @@ html {
h1 {
font-size: 2.6rem;
text-transform: capitalize;
- text-shadow: -1px -1px 1px #aaa,
- 0px 2px 1px rgba(0,0,0,0.5),
- 2px 2px 2px rgba(0,0,0,0.7),
- 0px 0px 3px rgba(0,0,0,0.4);
+ text-shadow:
+ -1px -1px 1px #aaa,
+ 0px 2px 1px rgba(0, 0, 0, 0.5),
+ 2px 2px 2px rgba(0, 0, 0, 0.7),
+ 0px 0px 3px rgba(0, 0, 0, 0.4);
text-align: center;
}
@@ -484,12 +496,13 @@ Aplicando esto a los elementos {{htmlelement("p")}} en nuestro ejemplo nos darí
Well I remember it as though it were a meal ago...
-Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.
+
+ Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+ nestled its way into his mighty throat. Many a fat alley rat had met its
+ demise while staring point blank down the cavernous barrel of this awesome
+ prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+ had many a story to tell. But it was a rare occasion such as this that he did.
+
```
```css hidden
@@ -500,10 +513,11 @@ html {
h1 {
font-size: 2.6rem;
text-transform: capitalize;
- text-shadow: -1px -1px 1px #aaa,
- 0px 2px 1px rgba(0,0,0,0.5),
- 2px 2px 2px rgba(0,0,0,0.7),
- 0px 0px 3px rgba(0,0,0,0.4);
+ text-shadow:
+ -1px -1px 1px #aaa,
+ 0px 2px 1px rgba(0, 0, 0, 0.5),
+ 2px 2px 2px rgba(0, 0, 0, 0.7),
+ 0px 0px 3px rgba(0, 0, 0, 0.4);
text-align: center;
}
@@ -541,12 +555,13 @@ y obtendremos:
Well I remember it as though it were a meal ago...
-Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.
+
+ Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+ nestled its way into his mighty throat. Many a fat alley rat had met its
+ demise while staring point blank down the cavernous barrel of this awesome
+ prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+ had many a story to tell. But it was a rare occasion such as this that he did.
+
```
```css hidden
@@ -557,10 +572,11 @@ html {
h1 {
font-size: 2.6rem;
text-transform: capitalize;
- text-shadow: -1px -1px 1px #aaa,
- 0px 2px 1px rgba(0,0,0,0.5),
- 2px 2px 2px rgba(0,0,0,0.7),
- 0px 0px 3px rgba(0,0,0,0.4);
+ text-shadow:
+ -1px -1px 1px #aaa,
+ 0px 2px 1px rgba(0, 0, 0, 0.5),
+ 2px 2px 2px rgba(0, 0, 0, 0.7),
+ 0px 0px 3px rgba(0, 0, 0, 0.4);
text-align: center;
}
@@ -628,7 +644,10 @@ Se debe colocar una barra inclinada (_slash_) entre las propiedades {{cssxref("f
Un ejemplo completo se vería así:
```css
-font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+font:
+ italic normal bold normal 3em/1.5 Helvetica,
+ Arial,
+ sans-serif;
```
## Aprendizaje activo: Jugar a aplicar estilos
@@ -638,20 +657,37 @@ En esta sección de aprendizaje activo no proponemos ningún ejercicio específi
Si te equivocas, puedes volver a empezar con el botón _Reinicio_.
```html hidden
-
+
HTML Input
-
+
CSS Input
-
+ }
Output
-
+
-
```
@@ -664,8 +700,8 @@ let htmlCode = htmlInput.value;
let cssCode = cssInput.value;
const output = document.querySelector(".output");
-const styleElem = document.createElement('style');
-const headElem = document.querySelector('head');
+const styleElem = document.createElement("style");
+const headElem = document.querySelector("head");
headElem.appendChild(styleElem);
function drawOutput() {
@@ -673,7 +709,7 @@ function drawOutput() {
styleElem.textContent = cssInput.value;
}
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
htmlInput.value = htmlCode;
cssInput.value = cssCode;
drawOutput();
diff --git a/files/es/learn/css/styling_text/styling_links/index.md b/files/es/learn/css/styling_text/styling_links/index.md
index 8ff4cec6500f11..b62772dce52e58 100644
--- a/files/es/learn/css/styling_text/styling_links/index.md
+++ b/files/es/learn/css/styling_text/styling_links/index.md
@@ -96,28 +96,21 @@ Para empezar, escribiremos nuestro conjunto de reglas vacío:
```css
a {
-
}
-
a:link {
-
}
a:visited {
-
}
a:focus {
-
}
a:hover {
-
}
a:active {
-
}
```
@@ -148,31 +141,32 @@ a:link {
}
a:visited {
- color: #437A16;
+ color: #437a16;
}
a:focus {
border-bottom: 1px solid;
- background: #BAE498;
+ background: #bae498;
}
a:hover {
border-bottom: 1px solid;
- background: #CDFEAA;
+ background: #cdfeaa;
}
a:active {
background: #265301;
- color: #CDFEAA;
+ color: #cdfeaa;
}
```
También proporcionaremos algún ejemplo de HTML al que aplicar CSS:
```html
-
Dispones de varios navegadores, como Mozilla
-Firefox , Google Chrome y
-Microsoft Edge .
+
+ Dispones de varios navegadores, como Mozilla Firefox ,
+ Google Chrome y Microsoft Edge .
+
```
Poner los dos juntos nos da este resultado:
@@ -198,14 +192,25 @@ En esta sesión de aprendizaje activo, queremos que tomes nuestro conjunto de re
Si te equivocas, puedes volver a empezar pulsando el botón _Reinicio_. Si te quedas encallado, pulsa el botón _Mostrar la solución_ para recuperar el ejemplo anterior.
```html hidden
-
+
Entrada de HTML
-
-
-
Entrada CSS
-
+
+
Entrada CSS
+
-
-
Salida
-
-
-
+}
+
+
Salida
+
+
+
```
@@ -247,25 +263,26 @@ var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");
-var styleElem = document.createElement('style');
-var headElem = document.querySelector('head');
+var styleElem = document.createElement("style");
+var headElem = document.querySelector("head");
headElem.appendChild(styleElem);
function drawOutput() {
-output.innerHTML = htmlInput.value;
-styleElem.textContent = cssInput.value;
+ output.innerHTML = htmlInput.value;
+ styleElem.textContent = cssInput.value;
}
-reset.addEventListener("click", function() {
-htmlInput.value = htmlCode;
-cssInput.value = cssCode;
-drawOutput();
+reset.addEventListener("click", function () {
+ htmlInput.value = htmlCode;
+ cssInput.value = cssCode;
+ drawOutput();
});
-solution.addEventListener("click", function() {
-htmlInput.value = htmlCode;
-cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}';
-drawOutput();
+solution.addEventListener("click", function () {
+ htmlInput.value = htmlCode;
+ cssInput.value =
+ "p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}";
+ drawOutput();
});
htmlInput.addEventListener("input", drawOutput);
@@ -282,9 +299,12 @@ Una práctica común es incluir iconos en los enlaces para proporcionar más de
Echemos un vistazo a algunos elementos HTML y CSS que nos van a proporcionar el efecto que queremos. En primer lugar, algunos elementos HTML sencillos para dar estilo:
```html
-
Para obtener más información sobre el tiempo, visite nuestra página del tiempo ,
-mire la Wikipedia , o cheque
-Extreme Science .
+
+ Para obtener más información sobre el tiempo, visite nuestra
+ página del tiempo , mire la
+ Wikipedia , o cheque
+ Extreme Science .
+
```
A continuación, el CSS:
@@ -314,7 +334,8 @@ a:visited {
color: purple;
}
-a:focus, a:hover {
+a:focus,
+a:hover {
border-bottom: 1px solid;
}
@@ -323,7 +344,7 @@ a:active {
}
a[href*="http"] {
- background: url('external-link-52.png') no-repeat 100% 0;
+ background: url("external-link-52.png") no-repeat 100% 0;
background-size: 16px 16px;
padding-right: 19px;
}
@@ -353,14 +374,19 @@ En primer lugar, un poco de HTML:
```html
```
Y ahora nuestro CSS:
```css
-body,html {
+body,
+html {
margin: 0;
font-family: sans-serif;
}
@@ -389,7 +415,9 @@ li:last-child a {
margin-right: 0;
}
-a:link, a:visited, a:focus {
+a:link,
+a:visited,
+a:focus {
background: yellow;
}
diff --git a/files/es/learn/css/styling_text/styling_lists/index.md b/files/es/learn/css/styling_text/styling_lists/index.md
index 99d8efdc717f1e..25bc662c67a521 100644
--- a/files/es/learn/css/styling_text/styling_lists/index.md
+++ b/files/es/learn/css/styling_text/styling_lists/index.md
@@ -41,8 +41,10 @@ El HTML para nuestro ejemplo de lista se ve así:
```html
Shopping (unordered) list
-
Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.
+
+ Paragraph for reference, paragraph for reference, paragraph for reference,
+ paragraph for reference, paragraph for reference, paragraph for reference.
+
Humous
@@ -53,28 +55,40 @@ paragraph for reference, paragraph for reference, paragraph for reference.
Recipe (ordered) list
-Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.
+
+ Paragraph for reference, paragraph for reference, paragraph for reference,
+ paragraph for reference, paragraph for reference, paragraph for reference.
+
Toast pitta, leave to cool, then slice down the edge.
- Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+
+ Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+
Wash and chop the salad.
Fill pitta with salad, humous, and fried halloumi.
Ingredient description list
-Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.
+
+ Paragraph for reference, paragraph for reference, paragraph for reference,
+ paragraph for reference, paragraph for reference, paragraph for reference.
+
Humous
- A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.
+
+ A thick dip/sauce generally made from chick peas blended with tahini, lemon
+ juice, salt, garlic, and other ingredients.
+
Pitta
A soft, slightly leavened flatbread.
Halloumi
- A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.
+
+ A semi-hard, unripened, brined cheese with a higher-than-usual melting
+ point, usually made from goat/sheep milk.
+
Green salad
That green healthy stuff that many of us just use to garnish kebabs.
@@ -106,18 +120,22 @@ h2 {
font-size: 2rem;
}
-ul,ol,dl,p {
+ul,
+ol,
+dl,
+p {
font-size: 1.5rem;
}
-li, p {
+li,
+p {
line-height: 1.5;
}
/* Estilos para las listas de descripciones */
-
-dd, dt {
+dd,
+dt {
line-height: 1.5;
}
@@ -252,7 +270,9 @@ El atributo [`start`](/es/docs/Web/HTML/Element/ol#start) te permite empezar la
```html
Toast pitta, leave to cool, then slice down the edge.
- Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+
+ Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+
Wash and chop the salad.
Fill pitta with salad, humous, and fried halloumi.
@@ -269,7 +289,9 @@ El atributo [`reversed`](/es/docs/Web/HTML/Element/ol#reversed) empieza la lista
```html
Toast pitta, leave to cool, then slice down the edge.
- Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+
+ Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+
Wash and chop the salad.
Fill pitta with salad, humous, and fried halloumi.
@@ -288,7 +310,9 @@ El atributo [`value`](/es/docs/Web/HTML/Element/ol#value) te permite establecer
```html
Toast pitta, leave to cool, then slice down the edge.
- Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+
+ Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+
Wash and chop the salad.
Fill pitta with salad, humous, and fried halloumi.
@@ -312,9 +336,15 @@ En esta sesión de aprendizaje activo, queremos que tomes lo que has aprendido a
Si te equivocas, puedes volver a empezar con el botón _Reinicio_. Si te quedas encallado, pulsa el botón _Mostrar la solución_ para ver una posible solución.
```html hidden
-
+
HTML Input
-
-
-
CSS Input
-
-
-
Output
-
-
-
+
+
+
CSS Input
+
+
+
Output
+
+
+
```
@@ -347,25 +391,26 @@ var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");
-var styleElem = document.createElement('style');
-var headElem = document.querySelector('head');
+var styleElem = document.createElement("style");
+var headElem = document.querySelector("head");
headElem.appendChild(styleElem);
function drawOutput() {
-output.innerHTML = htmlInput.value;
-styleElem.textContent = cssInput.value;
+ output.innerHTML = htmlInput.value;
+ styleElem.textContent = cssInput.value;
}
-reset.addEventListener("click", function() {
-htmlInput.value = htmlCode;
-cssInput.value = cssCode;
-drawOutput();
+reset.addEventListener("click", function () {
+ htmlInput.value = htmlCode;
+ cssInput.value = cssCode;
+ drawOutput();
});
-solution.addEventListener("click", function() {
-htmlInput.value = htmlCode;
-cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}';
-drawOutput();
+solution.addEventListener("click", function () {
+ htmlInput.value = htmlCode;
+ cssInput.value =
+ "ul {\n list-style-type: square;\n}\n\nul li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}";
+ drawOutput();
});
htmlInput.addEventListener("input", drawOutput);
diff --git a/files/es/learn/css/styling_text/web_fonts/index.md b/files/es/learn/css/styling_text/web_fonts/index.md
index 32594bf7044eaf..0f7f6a8904eafd 100644
--- a/files/es/learn/css/styling_text/web_fonts/index.md
+++ b/files/es/learn/css/styling_text/web_fonts/index.md
@@ -122,9 +122,9 @@ Para implementar estos tipos de letra en tu ejemplo de demostración, sigue esto
3. Cada una de las funciones `url()` apunta a un archivo de tipo de letra que tenemos que importar a nuestro CSS. Necesitamos asegurarnos de que las rutas a los archivos son correctas, así que añade `fonts/` al inicio de cada ruta (ajusta la ruta como sea necesario).
4. Ahora puedes usar estos tipos de letra en tu lista de tipos de letra, al igual que cualquier tipo de letra seguro o predeterminado del sistema. Por ejemplo:
- ```css
- font-family: 'zantrokeregular', serif;
- ```
+ ```css
+ font-family: "zantrokeregular", serif;
+ ```
Con tu ejemplo de demostración, deberías obtener una página con unos agradables tipos de letra. Debido a que los tipos de letra se crean en diferentes tamaños, es posible que tengas que ajustar el tamaño, el espaciado, etc., para conseguir una apariencia más ordenada.
@@ -153,13 +153,14 @@ Vamos a explorar que la sintaxis correspondiente a `@font-face` que te ha genera
```css
@font-face {
- font-family: 'ciclefina';
- src: url('fonts/cicle_fina-webfont.eot');
- src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
- url('fonts/cicle_fina-webfont.woff2') format('woff2'),
- url('fonts/cicle_fina-webfont.woff') format('woff'),
- url('fonts/cicle_fina-webfont.ttf') format('truetype'),
- url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+ font-family: "ciclefina";
+ src: url("fonts/cicle_fina-webfont.eot");
+ src:
+ url("fonts/cicle_fina-webfont.eot?#iefix") format("embedded-opentype"),
+ url("fonts/cicle_fina-webfont.woff2") format("woff2"),
+ url("fonts/cicle_fina-webfont.woff") format("woff"),
+ url("fonts/cicle_fina-webfont.ttf") format("truetype"),
+ url("fonts/cicle_fina-webfont.svg#ciclefina") format("svg");
font-weight: normal;
font-style: normal;
}
diff --git a/files/es/learn/forms/basic_native_form_controls/index.md b/files/es/learn/forms/basic_native_form_controls/index.md
index 85ce4b9a1c506a..8116191bcc41c8 100644
--- a/files/es/learn/forms/basic_native_form_controls/index.md
+++ b/files/es/learn/forms/basic_native_form_controls/index.md
@@ -59,7 +59,7 @@ Un campo de texto de una sola línea se crea utilizando un elemento {{HTMLElemen
Aquí hay un ejemplo básico de campo de texto de una sola línea:
```html
-
+
```
Los campos de texto de una sola línea solo tienen una restricción verdadera: si escribes el texto con saltos de línea, el navegador elimina esos saltos de línea antes de enviar los datos al servidor.
@@ -75,7 +75,7 @@ _La captura de pantalla siguiente muestra los tipos de entrada de texto predeter
Uno de los tipos de entrada originales era el tipo de campo de texto `password`:
```html
-
+
```
El valor de la contraseña no añade restricciones especiales al texto que se introduce, pero oculta el valor que se introduce en el campo (por ejemplo, con puntos o asteriscos) para impedir que otros puedan leerlo.
@@ -89,7 +89,7 @@ Los navegadores reconocen las implicaciones de seguridad de enviar datos de form
Otro control de texto original es el tipo de entrada `hidden`. Se usa para crear un control de formulario que es invisible para el usuario, pero que aun así se envía al servidor junto con el resto de los datos del formulario una vez se transmiten; por ejemplo, es posible que desees enviar una marca de tiempo al servidor que indique cuándo se realizó un pedido. Al estar oculto, el usuario no puede ver ni editar su valor intencionadamente, el control nunca recibirá el foco y un lector de pantalla tampoco lo detectará.
```html
-
+
```
Si creas un elemento así, es necesario establecer sus atributos `name` y `value`. Su valor puede establecerse dinámicamente a través de JavaScript. El tipo de entrada oculta no debe tener ninguna etiqueta asociada.
@@ -111,7 +111,7 @@ Para una usabilidad/accesibilidad óptima, te recomendamos delimitar cada lista
Las casillas de verificación se crean estableciendo el atributo [`type`](/es/docs/Web/HTML/Attributes/type) del elemento {{HTMLElement ("input")}} en el valor {{HTMLElement ("input / checkbox", "checkbox")}}.
```html
-
+
```
Al incluir el atributo [`checked`](/es/docs/Web/HTML/Attributes/checked), la casilla de verificación se marca automáticamente cuando se carga la página. Al hacer clic en la casilla de verificación o en su etiqueta asociada, la casilla de verificación se activa o desactiva.
@@ -129,7 +129,7 @@ Debido a su naturaleza activa-inactiva, las casillas de verificación se conside
Un botón de opción se crea estableciendo el atributo [`type`](/es/docs/Web/HTML/Element/input#type) del elemento {{HTMLElement ("input")}} en el valor `radio`:
```html
-
+
```
Es posible asociar diversos botones de opción. Si comparten el mismo valor de atributo [`name`](/es/docs/Web/HTML/Element/input#name), se considera que están en el mismo grupo de botones. Solo un botón dentro de un grupo puede estar activado en cada momento. Esto significa que cuando uno de ellos se selecciona, todos los demás se deseleccionan automáticamente. Al enviar el formulario, solo se envía el valor del botón de opción seleccionado. Si ninguno de ellos está seleccionado, se considera que el conjunto completo de botones de opción está en un estado desconocido y no se envía ningún valor con el formulario. Cuando en un grupo de botones con el mismo nombre se selecciona uno de los botones de opción, no es posible deseleccionar todos los botones sin reiniciar el formulario.
@@ -140,15 +140,15 @@ Es posible asociar diversos botones de opción. Si comparten el mismo valor de a
@@ -180,31 +180,25 @@ A continuación puedes encontrar ejemplos de cada tipo de botón `
`, junt
### enviar
```html
-
- Este es un botón de envío
-
+
Este es un botón de envío
-
+
```
### reiniciar
```html
-
- Este es un botón de reinicio
-
+
Este es un botón de reinicio
-
+
```
### anónimo
```html
-
- Este es un botón anónimo
-
+
Este es un botón anónimo
-
+
```
Los botones siempre se comportan igual, independientemente de su usas un elemento {{HTMLElement ("button")}} o un elemento {{HTMLElement ("input")}}. Sin embargo, como puedes ver en los ejemplos, los elementos {{HTMLElement ("button")}} te permiten usar HTML en tu contenido, que se inserta entre las etiquetas `
` de apertura y cierre. Los elementos {{HTMLElement ("input")}}, por otro lado, son elementos vacíos; el contenido que muestran está inserto en el atributo `value` y, por lo tanto, solo acepta contenido de texto sin formato.
@@ -220,7 +214,7 @@ El control **botón de imagen** se muestra exactamente como un elemento {{HTMLEl
Se crea un botón de imagen usando un elemento {{HTMLElement ("input")}} con su atributo [`type`](/es/docs/Web/HTML/Element/input#type) establecido en el valor `image`. Este elemento admite exactamente el mismo conjunto de atributos que el elemento {{HTMLElement ("img")}}, además de todos los atributos que admiten el resto de botones de formulario.
```html
-
-
-
- Without JS
- With JS
-
-
-
-
-
- {{EmbedLiveSample("No_JS",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_2")}}
-
-
- {{EmbedLiveSample("JS",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_2")}}
-
-
-
-
- Check out the source code
-
-
-
-
-
-> **Nota:** If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.
+#### Without JS
+
+Check out the [full source code](/es/docs/Learn/Forms/How_to_build_custom_form_controls/Example_2#no_js).
+
+```html hidden
+
+```
-### Making the job easier
+```css hidden
+.widget select,
+.no-widget .select {
+ position: absolute;
+ left: -5000em;
+ height: 0;
+ overflow: hidden;
+}
+```
-In the code we are about to build, we will use the standard DOM API to do all the work we need. However, although DOM API support has gotten much better in browsers, there are always issues with legacy browsers (especially with good old Internet Explorer).
+{{EmbedLiveSample("Without_JS",120,130)}}
+
+#### With JS
+
+Check out the [full source code](/es/docs/Learn/Forms/How_to_build_custom_form_controls/Example_2#js).
+
+```html hidden
+
+```
-If you want to avoid trouble with legacy browsers, there are two ways to do so: using a dedicated framework such as [jQuery](http://jquery.com/), [$dom](https://github.com/julienw/dollardom), [prototype](http://prototypejs.org/), [Dojo](http://dojotoolkit.org/), [YUI](http://yuilibrary.com/), or the like, or by polyfilling the missing feature you want to use (which can easily be done through conditional loading, with the [yepnope](http://yepnopejs.com/) library for example).
+```css hidden
+.widget select,
+.no-widget .select {
+ position: absolute;
+ left: -5000em;
+ height: 0;
+ overflow: hidden;
+}
-The features we plan to use are the following (ordered from the riskiest to the safest):
+.select {
+ position: relative;
+ display: inline-block;
+}
-1. {{domxref("element.classList","classList")}}
+.select.active,
+.select:focus {
+ box-shadow: 0 0 3px 1px #227755;
+ outline: none;
+}
+
+.select .optList {
+ position: absolute;
+ top: 100%;
+ left: 0;
+}
+
+.select .optList.hidden {
+ max-height: 0;
+ visibility: hidden;
+}
+
+.select {
+ font-size: 0.625em; /* 10px */
+ font-family: Verdana, Arial, sans-serif;
+
+ box-sizing: border-box;
+
+ padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+ width: 10em; /* 100px */
+
+ border: 0.2em solid #000; /* 2px */
+ border-radius: 0.4em; /* 4px */
+
+ box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+
+ background: #f0f0f0;
+ background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: top;
+}
+
+.select:after {
+ content: "▼";
+ position: absolute;
+ z-index: 1;
+ height: 100%;
+ width: 2em; /* 20px */
+ top: 0;
+ right: 0;
+
+ padding-top: 0.1em;
+
+ box-sizing: border-box;
+
+ text-align: center;
+
+ border-left: 0.2em solid #000;
+ border-radius: 0 0.1em 0.1em 0;
+
+ background-color: #000;
+ color: #fff;
+}
+
+.select .optList {
+ z-index: 2;
+
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ background: #f0f0f0;
+ border: 0.2em solid #000;
+ border-top-width: 0.1em;
+ border-radius: 0 0 0.4em 0.4em;
+
+ box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+
+ box-sizing: border-box;
+
+ min-width: 100%;
+ max-height: 10em; /* 100px */
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.select .option {
+ padding: 0.2em 0.3em;
+}
+
+.select .highlight {
+ background: #000;
+ color: #ffffff;
+}
+```
+
+```js hidden
+window.addEventListener("load", () => {
+ const form = document.querySelector("form");
+
+ form.classList.remove("no-widget");
+ form.classList.add("widget");
+});
+```
+
+{{EmbedLiveSample("",120,130)}}
+
+> **Nota:** If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.
+
+### Making the job easier
+
+In the code we are about to build, we will use the standard DOM API to do all the work we need. However, although DOM API support has gotten much better in browsers, there are always issues with legacy browsers (especially with good old Internet Explorer).
+
+If you want to avoid trouble with legacy browsers, there are two ways to do so: using a dedicated framework such as [jQuery](https://jquery.com/), [$dom](https://github.com/julienw/dollardom), [prototype](http://prototypejs.org/), [Dojo](https://dojotoolkit.org/), [YUI](https://yuilibrary.com/), or the like, or by polyfilling the missing feature you want to use (which can easily be done through conditional loading, with the [yepnope](https://yepnopejs.com/) library for example).
+
+The features we plan to use are the following (ordered from the riskiest to the safest):
+
+1. {{domxref("element.classList","classList")}}
2. {{domxref("EventTarget.addEventListener","addEventListener")}}
3. [`forEach`](/es/docs/JavaScript/Reference/Global_Objects/Array/forEach) (This is not DOM but modern JavaScript)
4. {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
@@ -432,7 +925,7 @@ Beyond the availability of those specific features, there is still one issue rem
```js
NodeList.prototype.forEach = function (callback) {
Array.prototype.forEach.call(this, callback);
-}
+};
```
We weren't kidding when we said it's easy to do.
@@ -446,18 +939,17 @@ The ground is ready, we can now start to define all the functions that will be u
// It takes one parameter
// select : the DOM node with the `select` class to deactivate
function deactivateSelect(select) {
-
// If the widget is not active there is nothing to do
- if (!select.classList.contains('active')) return;
+ if (!select.classList.contains("active")) return;
// We need to get the list of options for the custom widget
- var optList = select.querySelector('.optList');
+ var optList = select.querySelector(".optList");
// We close the list of option
- optList.classList.add('hidden');
+ optList.classList.add("hidden");
// and we deactivate the custom widget itself
- select.classList.remove('active');
+ select.classList.remove("active");
}
// This function will be used each time the user wants to (de)activate the widget
@@ -465,9 +957,8 @@ function deactivateSelect(select) {
// select : the DOM node with the `select` class to activate
// selectList : the list of all the DOM nodes with the `select` class
function activeSelect(select, selectList) {
-
// If the widget is already active there is nothing to do
- if (select.classList.contains('active')) return;
+ if (select.classList.contains("active")) return;
// We have to turn off the active state on all custom widgets
// Because the deactivateSelect function fulfill all the requirement of the
@@ -476,19 +967,18 @@ function activeSelect(select, selectList) {
selectList.forEach(deactivateSelect);
// And we turn on the active state for this specific widget
- select.classList.add('active');
+ select.classList.add("active");
}
// This function will be used each time the user wants to open/closed the list of options
// It takes one parameter:
// select : the DOM node with the list to toggle
function toggleOptList(select) {
-
// The list is kept from the widget
- var optList = select.querySelector('.optList');
+ var optList = select.querySelector(".optList");
// We change the class of the list to show/hide it
- optList.classList.toggle('hidden');
+ optList.classList.toggle("hidden");
}
// This function will be used each time we need to highlight an option
@@ -496,18 +986,17 @@ function toggleOptList(select) {
// select : the DOM node with the `select` class containing the option to highlight
// option : the DOM node with the `option` class to highlight
function highlightOption(select, option) {
-
// We get the list of all option available for our custom select element
- var optionList = select.querySelectorAll('.option');
+ var optionList = select.querySelectorAll(".option");
// We remove the highlight from all options
optionList.forEach(function (other) {
- other.classList.remove('highlight');
+ other.classList.remove("highlight");
});
// We highlight the right option
- option.classList.add('highlight');
-};
+ option.classList.add("highlight");
+}
```
That's all you need in order to handle the various states of the custom widget.
@@ -516,18 +1005,17 @@ Next, we bind these functions to the appropriate events:
```js
// We handle the event binding when the document is loaded.
-window.addEventListener('load', function () {
- var selectList = document.querySelectorAll('.select');
+window.addEventListener("load", function () {
+ var selectList = document.querySelectorAll(".select");
// Each custom widget needs to be initialized
selectList.forEach(function (select) {
-
// as well as all its `option` elements
- var optionList = select.querySelectorAll('.option');
+ var optionList = select.querySelectorAll(".option");
// Each time a user hovers their mouse over an option, we highlight the given option
optionList.forEach(function (option) {
- option.addEventListener('mouseover', function () {
+ option.addEventListener("mouseover", function () {
// Note: the `select` and `option` variable are closures
// available in the scope of our function call.
highlightOption(select, option);
@@ -535,7 +1023,7 @@ window.addEventListener('load', function () {
});
// Each times the user click on a custom select element
- select.addEventListener('click', function (event) {
+ select.addEventListener("click", function (event) {
// Note: the `select` variable is a closure
// available in the scope of our function call.
@@ -546,7 +1034,7 @@ window.addEventListener('load', function () {
// In case the widget gain focus
// The widget gains the focus each time the user clicks on it or each time
// they use the tabulation key to access the widget
- select.addEventListener('focus', function (event) {
+ select.addEventListener("focus", function (event) {
// Note: the `select` and `selectList` variable are closures
// available in the scope of our function call.
@@ -555,7 +1043,7 @@ window.addEventListener('load', function () {
});
// In case the widget loose focus
- select.addEventListener('blur', function (event) {
+ select.addEventListener("blur", function (event) {
// Note: the `select` variable is a closure
// available in the scope of our function call.
@@ -568,9 +1056,224 @@ window.addEventListener('load', function () {
At that point, our widget will change state according to our design, but its value doesn't get updated yet. We'll handle that next.
-| Live example |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| {{EmbedLiveSample("Change_states",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_3")}} |
+#### Live example
+
+```html hidden
+
+```
+
+```css hidden
+.widget select,
+.no-widget .select {
+ position: absolute;
+ left: -5000em;
+ height: 0;
+ overflow: hidden;
+}
+
+.select {
+ position: relative;
+ display: inline-block;
+}
+
+.select.active,
+.select:focus {
+ box-shadow: 0 0 3px 1px #227755;
+ outline: none;
+}
+
+.select .optList {
+ position: absolute;
+ top: 100%;
+ left: 0;
+}
+
+.select .optList.hidden {
+ max-height: 0;
+ visibility: hidden;
+}
+
+.select {
+ font-size: 0.625em; /* 10px */
+ font-family: Verdana, Arial, sans-serif;
+
+ box-sizing: border-box;
+
+ padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+ width: 10em; /* 100px */
+
+ border: 0.2em solid #000; /* 2px */
+ border-radius: 0.4em; /* 4px */
+
+ box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+
+ background: #f0f0f0;
+ background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: top;
+}
+
+.select:after {
+ content: "▼";
+ position: absolute;
+ z-index: 1;
+ height: 100%;
+ width: 2em; /* 20px */
+ top: 0;
+ right: 0;
+
+ padding-top: 0.1em;
+
+ box-sizing: border-box;
+
+ text-align: center;
+
+ border-left: 0.2em solid #000;
+ border-radius: 0 0.1em 0.1em 0;
+
+ background-color: #000;
+ color: #fff;
+}
+
+.select .optList {
+ z-index: 2;
+
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ background: #f0f0f0;
+ border: 0.2em solid #000;
+ border-top-width: 0.1em;
+ border-radius: 0 0 0.4em 0.4em;
+
+ box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+
+ box-sizing: border-box;
+
+ min-width: 100%;
+ max-height: 10em; /* 100px */
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.select .option {
+ padding: 0.2em 0.3em;
+}
+
+.select .highlight {
+ background: #000;
+ color: #ffffff;
+}
+```
+
+```js hidden
+function deactivateSelect(select) {
+ if (!select.classList.contains("active")) return;
+
+ const optList = select.querySelector(".optList");
+
+ optList.classList.add("hidden");
+ select.classList.remove("active");
+}
+
+function activeSelect(select, selectList) {
+ if (select.classList.contains("active")) return;
+
+ selectList.forEach(deactivateSelect);
+ select.classList.add("active");
+}
+
+function toggleOptList(select, show) {
+ const optList = select.querySelector(".optList");
+
+ optList.classList.toggle("hidden");
+}
+
+function highlightOption(select, option) {
+ const optionList = select.querySelectorAll(".option");
+
+ optionList.forEach((other) => {
+ other.classList.remove("highlight");
+ });
+
+ option.classList.add("highlight");
+}
+
+window.addEventListener("load", () => {
+ const form = document.querySelector("form");
+
+ form.classList.remove("no-widget");
+ form.classList.add("widget");
+});
+
+window.addEventListener("load", () => {
+ const selectList = document.querySelectorAll(".select");
+
+ selectList.forEach((select) => {
+ const optionList = select.querySelectorAll(".option");
+
+ optionList.forEach((option) => {
+ option.addEventListener("mouseover", () => {
+ highlightOption(select, option);
+ });
+ });
+
+ select.addEventListener(
+ "click",
+ (event) => {
+ toggleOptList(select);
+ },
+ false,
+ );
+
+ select.addEventListener("focus", (event) => {
+ activeSelect(select, selectList);
+ });
+
+ select.addEventListener("blur", (event) => {
+ deactivateSelect(select);
+ });
+
+ select.addEventListener("keyup", (event) => {
+ if (event.keyCode === 27) {
+ deactivateSelect(select);
+ }
+ });
+ });
+});
+```
+
+| Live example |
+| ------------------------------------------------------------------------------------------- |
+| {{EmbedLiveSample("",120,130)}} |
| [Check out the source code](/es/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3) |
### Handling the widget's value
@@ -592,10 +1295,10 @@ function updateValue(select, index) {
var nativeWidget = select.previousElementSibling;
// We also need to get the value placeholder of our custom widget
- var value = select.querySelector('.value');
+ var value = select.querySelector(".value");
// And we need the whole list of options
- var optionList = select.querySelectorAll('.option');
+ var optionList = select.querySelectorAll(".option");
// We set the selected index to the index of our choice
nativeWidget.selectedIndex = index;
@@ -605,7 +1308,7 @@ function updateValue(select, index) {
// And we highlight the corresponding option of our custom widget
highlightOption(select, optionList[index]);
-};
+}
// This function returns the current selected index in the native widget
// It takes one parameter:
@@ -616,20 +1319,20 @@ function getIndex(select) {
var nativeWidget = select.previousElementSibling;
return nativeWidget.selectedIndex;
-};
+}
```
With these two functions, we can bind the native widgets to the custom ones:
```js
// We handle event binding when the document is loaded.
-window.addEventListener('load', function () {
- var selectList = document.querySelectorAll('.select');
+window.addEventListener("load", function () {
+ var selectList = document.querySelectorAll(".select");
// Each custom widget needs to be initialized
selectList.forEach(function (select) {
- var optionList = select.querySelectorAll('.option'),
- selectedIndex = getIndex(select);
+ var optionList = select.querySelectorAll(".option"),
+ selectedIndex = getIndex(select);
// We make our custom widget focusable
select.tabIndex = 0;
@@ -642,21 +1345,25 @@ window.addEventListener('load', function () {
// Each time a user clicks on an option, we update the value accordingly
optionList.forEach(function (option, index) {
- option.addEventListener('click', function (event) {
+ option.addEventListener("click", function (event) {
updateValue(select, index);
});
});
// Each time a user uses their keyboard on a focused widget, we update the value accordingly
- select.addEventListener('keyup', function (event) {
+ select.addEventListener("keyup", function (event) {
var length = optionList.length,
- index = getIndex(select);
+ index = getIndex(select);
// When the user hits the down arrow, we jump to the next option
- if (event.keyCode === 40 && index < length - 1) { index++; }
+ if (event.keyCode === 40 && index < length - 1) {
+ index++;
+ }
// When the user hits the up arrow, we jump to the previous option
- if (event.keyCode === 38 && index > 0) { index--; }
+ if (event.keyCode === 38 && index > 0) {
+ index--;
+ }
updateValue(select, index);
});
@@ -668,9 +1375,264 @@ In the code above, it's worth noting the use of the [`tabIndex`](/es/docs/Web/AP
With that, we're done! Here's the result:
-| Live example |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| {{EmbedLiveSample("Change_states",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_4")}} |
+```html hidden
+
+```
+
+```css hidden
+.widget select,
+.no-widget .select {
+ position: absolute;
+ left: -5000em;
+ height: 0;
+ overflow: hidden;
+}
+
+.select {
+ position: relative;
+ display: inline-block;
+}
+
+.select.active,
+.select:focus {
+ box-shadow: 0 0 3px 1px #227755;
+ outline: none;
+}
+
+.select .optList {
+ position: absolute;
+ top: 100%;
+ left: 0;
+}
+
+.select .optList.hidden {
+ max-height: 0;
+ visibility: hidden;
+}
+
+.select {
+ font-size: 0.625em; /* 10px */
+ font-family: Verdana, Arial, sans-serif;
+
+ box-sizing: border-box;
+
+ padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+ width: 10em; /* 100px */
+
+ border: 0.2em solid #000; /* 2px */
+ border-radius: 0.4em; /* 4px */
+
+ box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+
+ background: #f0f0f0;
+ background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: top;
+}
+
+.select:after {
+ content: "▼";
+ position: absolute;
+ z-index: 1;
+ height: 100%;
+ width: 2em; /* 20px */
+ top: 0;
+ right: 0;
+
+ padding-top: 0.1em;
+
+ box-sizing: border-box;
+
+ text-align: center;
+
+ border-left: 0.2em solid #000;
+ border-radius: 0 0.1em 0.1em 0;
+
+ background-color: #000;
+ color: #fff;
+}
+
+.select .optList {
+ z-index: 2;
+
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ background: #f0f0f0;
+ border: 0.2em solid #000;
+ border-top-width: 0.1em;
+ border-radius: 0 0 0.4em 0.4em;
+
+ box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+
+ box-sizing: border-box;
+
+ min-width: 100%;
+ max-height: 10em; /* 100px */
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.select .option {
+ padding: 0.2em 0.3em;
+}
+
+.select .highlight {
+ background: #000;
+ color: #ffffff;
+}
+```
+
+```js hidden
+function deactivateSelect(select) {
+ if (!select.classList.contains("active")) return;
+
+ const optList = select.querySelector(".optList");
+
+ optList.classList.add("hidden");
+ select.classList.remove("active");
+}
+
+function activeSelect(select, selectList) {
+ if (select.classList.contains("active")) return;
+
+ selectList.forEach(deactivateSelect);
+ select.classList.add("active");
+}
+
+function toggleOptList(select, show) {
+ const optList = select.querySelector(".optList");
+
+ optList.classList.toggle("hidden");
+}
+
+function highlightOption(select, option) {
+ const optionList = select.querySelectorAll(".option");
+
+ optionList.forEach((other) => {
+ other.classList.remove("highlight");
+ });
+
+ option.classList.add("highlight");
+}
+
+function updateValue(select, index) {
+ const nativeWidget = select.previousElementSibling;
+ const value = select.querySelector(".value");
+ const optionList = select.querySelectorAll(".option");
+
+ nativeWidget.selectedIndex = index;
+ value.innerHTML = optionList[index].innerHTML;
+ highlightOption(select, optionList[index]);
+}
+
+function getIndex(select) {
+ const nativeWidget = select.previousElementSibling;
+
+ return nativeWidget.selectedIndex;
+}
+
+window.addEventListener("load", () => {
+ const form = document.querySelector("form");
+
+ form.classList.remove("no-widget");
+ form.classList.add("widget");
+});
+
+window.addEventListener("load", () => {
+ const selectList = document.querySelectorAll(".select");
+
+ selectList.forEach((select) => {
+ const optionList = select.querySelectorAll(".option");
+
+ optionList.forEach((option) => {
+ option.addEventListener("mouseover", () => {
+ highlightOption(select, option);
+ });
+ });
+
+ select.addEventListener("click", (event) => {
+ toggleOptList(select);
+ });
+
+ select.addEventListener("focus", (event) => {
+ activeSelect(select, selectList);
+ });
+
+ select.addEventListener("blur", (event) => {
+ deactivateSelect(select);
+ });
+ });
+});
+
+window.addEventListener("load", () => {
+ const selectList = document.querySelectorAll(".select");
+
+ selectList.forEach((select) => {
+ const optionList = select.querySelectorAll(".option");
+ const selectedIndex = getIndex(select);
+
+ select.tabIndex = 0;
+ select.previousElementSibling.tabIndex = -1;
+
+ updateValue(select, selectedIndex);
+
+ optionList.forEach((option, index) => {
+ option.addEventListener("click", (event) => {
+ updateValue(select, index);
+ });
+ });
+
+ select.addEventListener("keyup", (event) => {
+ let index = getIndex(select);
+
+ if (event.key === "Escape") {
+ deactivateSelect(select);
+ }
+ if (event.key === "ArrowDown" && index < optionList.length - 1) {
+ index++;
+ }
+ if (event.key === "ArrowUp" && index > 0) {
+ index--;
+ }
+
+ updateValue(select, index);
+ });
+ });
+});
+```
+
+| Live example |
+| ------------------------------------------------------------------------------------------- |
+| {{EmbedLiveSample("",120,130)}} |
| [Check out the source code](/es/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4) |
But wait a second, are we really done?
@@ -679,7 +1641,7 @@ But wait a second, are we really done?
We have built something that works and though we're far from a fully-featured select box, it works nicely. But what we've done is nothing more than fiddle with the DOM. It has no real semantics, and even though it looks like a select box, from the browser's point of view it isn't one, so assistive technologies won't be able to understand it's a select box. In short, this pretty new select box isn't accessible!
-Fortunately, there is a solution and it's called [ARIA](/es/docs/Accessibility/ARIA). ARIA stands for "Accessible Rich Internet Application", and it's [a W3C specification](http://www.w3.org/TR/wai-aria/) specifically designed for what we are doing here: making web applications and custom widgets accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes is dead simple, so let's do it.
+Fortunately, there is a solution and it's called [ARIA](/es/docs/Accessibility/ARIA). ARIA stands for "Accessible Rich Internet Application", and it's [a W3C specification](https://www.w3.org/TR/wai-aria/) specifically designed for what we are doing here: making web applications and custom widgets accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes is dead simple, so let's do it.
### The `role` attribute
@@ -716,28 +1678,279 @@ The `aria-selected` attribute is used to mark which option is currently selected
```js
function updateValue(select, index) {
var nativeWidget = select.previousElementSibling;
- var value = select.querySelector('.value');
- var optionList = select.querySelectorAll('.option');
+ var value = select.querySelector(".value");
+ var optionList = select.querySelectorAll(".option");
// We make sure that all the options are not selected
optionList.forEach(function (other) {
- other.setAttribute('aria-selected', 'false');
+ other.setAttribute("aria-selected", "false");
});
// We make sure the chosen option is selected
- optionList[index].setAttribute('aria-selected', 'true');
+ optionList[index].setAttribute("aria-selected", "true");
nativeWidget.selectedIndex = index;
value.innerHTML = optionList[index].innerHTML;
highlightOption(select, optionList[index]);
-};
+}
```
-Here is the final result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as [NVDA](http://www.nvda-project.org/) or [VoiceOver](http://www.apple.com/accessibility/voiceover/)):
+Here is the final result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as [NVDA](http://www.nvda-project.org/) or [VoiceOver](https://www.apple.com/accessibility/voiceover/)):
+
+```html hidden
+
+```
+
+```css hidden
+.widget select,
+.no-widget .select {
+ position: absolute;
+ left: -5000em;
+ height: 0;
+ overflow: hidden;
+}
+
+.select {
+ position: relative;
+ display: inline-block;
+}
+
+.select.active,
+.select:focus {
+ box-shadow: 0 0 3px 1px #227755;
+ outline: none;
+}
+
+.select .optList {
+ position: absolute;
+ top: 100%;
+ left: 0;
+}
+
+.select .optList.hidden {
+ max-height: 0;
+ visibility: hidden;
+}
+
+.select {
+ font-size: 0.625em; /* 10px */
+ font-family: Verdana, Arial, sans-serif;
+
+ box-sizing: border-box;
+
+ padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+ width: 10em; /* 100px */
+
+ border: 0.2em solid #000; /* 2px */
+ border-radius: 0.4em; /* 4px */
+
+ box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+
+ background: #f0f0f0;
+ background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: top;
+}
+
+.select:after {
+ content: "▼";
+ position: absolute;
+ z-index: 1;
+ height: 100%;
+ width: 2em; /* 20px */
+ top: 0;
+ right: 0;
+
+ padding-top: 0.1em;
+
+ box-sizing: border-box;
+
+ text-align: center;
+
+ border-left: 0.2em solid #000;
+ border-radius: 0 0.1em 0.1em 0;
+
+ background-color: #000;
+ color: #fff;
+}
+
+.select .optList {
+ z-index: 2;
+
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ background: #f0f0f0;
+ border: 0.2em solid #000;
+ border-top-width: 0.1em;
+ border-radius: 0 0 0.4em 0.4em;
+
+ box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+
+ box-sizing: border-box;
+
+ min-width: 100%;
+ max-height: 10em; /* 100px */
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.select .option {
+ padding: 0.2em 0.3em;
+}
+
+.select .highlight {
+ background: #000;
+ color: #ffffff;
+}
+```
+
+```js hidden
+function deactivateSelect(select) {
+ if (!select.classList.contains("active")) return;
+
+ const optList = select.querySelector(".optList");
+
+ optList.classList.add("hidden");
+ select.classList.remove("active");
+}
+
+function activeSelect(select, selectList) {
+ if (select.classList.contains("active")) return;
+
+ selectList.forEach(deactivateSelect);
+ select.classList.add("active");
+}
+
+function toggleOptList(select, show) {
+ const optList = select.querySelector(".optList");
+
+ optList.classList.toggle("hidden");
+}
+
+function highlightOption(select, option) {
+ const optionList = select.querySelectorAll(".option");
+
+ optionList.forEach((other) => {
+ other.classList.remove("highlight");
+ });
+
+ option.classList.add("highlight");
+}
+
+function updateValue(select, index) {
+ const nativeWidget = select.previousElementSibling;
+ const value = select.querySelector(".value");
+ const optionList = select.querySelectorAll(".option");
+
+ optionList.forEach((other) => {
+ other.setAttribute("aria-selected", "false");
+ });
+
+ optionList[index].setAttribute("aria-selected", "true");
+
+ nativeWidget.selectedIndex = index;
+ value.innerHTML = optionList[index].innerHTML;
+ highlightOption(select, optionList[index]);
+}
+
+function getIndex(select) {
+ const nativeWidget = select.previousElementSibling;
+
+ return nativeWidget.selectedIndex;
+}
+
+window.addEventListener("load", () => {
+ const form = document.querySelector("form");
+
+ form.classList.remove("no-widget");
+ form.classList.add("widget");
+});
+
+window.addEventListener("load", () => {
+ const selectList = document.querySelectorAll(".select");
+
+ selectList.forEach((select) => {
+ const optionList = select.querySelectorAll(".option");
+ const selectedIndex = getIndex(select);
+
+ select.tabIndex = 0;
+ select.previousElementSibling.tabIndex = -1;
+
+ updateValue(select, selectedIndex);
+
+ optionList.forEach((option, index) => {
+ option.addEventListener("mouseover", () => {
+ highlightOption(select, option);
+ });
+
+ option.addEventListener("click", (event) => {
+ updateValue(select, index);
+ });
+ });
+
+ select.addEventListener("click", (event) => {
+ toggleOptList(select);
+ });
+
+ select.addEventListener("focus", (event) => {
+ activeSelect(select, selectList);
+ });
+
+ select.addEventListener("blur", (event) => {
+ deactivateSelect(select);
+ });
+
+ select.addEventListener("keyup", (event) => {
+ let index = getIndex(select);
+
+ if (event.keyCode === 27) {
+ deactivateSelect(select);
+ }
+ if (event.keyCode === 40 && index < optionList.length - 1) {
+ index++;
+ }
+ if (event.keyCode === 38 && index > 0) {
+ index--;
+ }
+
+ updateValue(select, index);
+ });
+ });
+});
+```
-| Live example |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| {{EmbedLiveSample("Change_states",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_5")}} |
+| Live example |
+| ------------------------------------------------------------------------------------------------- |
+| {{EmbedLiveSample("",120,130)}} |
| [Check out the final source code](/es/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_5) |
## Conclusion
@@ -746,9 +1959,9 @@ We have seen all the basics of building a custom form widget, but as you can see
Here are a few libraries you should consider before coding your own:
-- [jQuery UI](http://jqueryui.com/)
+- [jQuery UI](https://jqueryui.com/)
- [msDropDown](https://github.com/marghoobsuleman/ms-Dropdown)
-- [Nice Forms](http://www.emblematiq.com/lab/niceforms/)
+- [Nice Forms](https://www.emblematiq.com/lab/niceforms/)
- [And many more…](https://www.google.fr/search?q=HTML+custom+form+controls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a)
If you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. This is an exercise you can try to perform. Two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. Building an object to share that context would be wise. Also, you need to make it feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the Web standards they use vary. Have fun!
diff --git a/files/es/learn/forms/how_to_structure_a_web_form/index.md b/files/es/learn/forms/how_to_structure_a_web_form/index.md
index 4f99b1496e5015..e8581a29bef83a 100644
--- a/files/es/learn/forms/how_to_structure_a_web_form/index.md
+++ b/files/es/learn/forms/how_to_structure_a_web_form/index.md
@@ -54,15 +54,15 @@ Un pequeño ejemplo:
Tamaño del zumo de fruta
- Pequeño
- Mediano
- Grande
@@ -82,7 +82,8 @@ Debido a la influencia que tiene sobre las tecnologías de asistencia, el elemen
Como vimos en el artículo anterior, el elemento {{HTMLElement ("label")}} es la forma formal de definir una etiqueta para un control de un formulario HTML. Este es el elemento más importante si deseas crear formularios accesibles porque cuando se implementan correctamente, los lectores de pantalla leen la etiqueta de un elemento de formulario junto con las instrucciones relacionadas, y esto además resulta muy útil para los usuarios videntes. Tomemos este ejemplo que vimos en el artículo anterior:
```html
-Nombre: Nombre:
+` asociada correctamente con `
- Nombre:
```
@@ -108,11 +109,11 @@ Por ejemplo, al hacer clic en el texto de la etiqueta «Me gustan las cerezas»
```html
@@ -127,28 +128,32 @@ Estrictamente hablando, es posible poner varias etiquetas en un solo control de
Consideremos este ejemplo:
```html
-Los campos obligatorios se marcan con un * .
+Los campos obligatorios se marcan con un * .
```
@@ -183,117 +188,118 @@ Pongamos en práctica estas ideas y creemos un formulario un poco más complicad
1. Para comenzar, haz una copia local de nuestro [archivo de plantilla en blanco](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) y el [CSS de nuestro formulario de pago](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css) en un nuevo directorio de tu ordenador.
2. Añade dentro del elemento HTML {{htmlelement ("head")}} la línea siguiente para aplicar el CSS al HTML:
- ```html
-
-
- Corte de pelo
- Peluquería
- 12/09
- Gran idea
- 30
-
+
+ Corte de pelo
+ Peluquería
+ 12/09
+ Gran idea
+ 30
+
...
-
```
diff --git a/files/es/learn/html/tables/basics/index.md b/files/es/learn/html/tables/basics/index.md
index 56963bda6ff115..0a2821ba6cd5a2 100644
--- a/files/es/learn/html/tables/basics/index.md
+++ b/files/es/learn/html/tables/basics/index.md
@@ -218,18 +218,18 @@ Ya hemos hablado bastante sobre la teoría de las tablas, así que veamos un eje
2. El contenido de cada tabla está delimitado entre estas dos etiquetas: **[``](/es/docs/Web/HTML/Element/table)**. Añádelas al cuerpo de tu código HTML.
3. El contenedor más pequeño dentro de una tabla es una celda, que se crea con un elemento **[``](/es/docs/Web/HTML/Element/td)** ('td' significa 'table data', _datos de tabla_). Añade lo siguiente dentro de tus etiquetas de tabla:
- ```html
- Hola, soy tu primera celda.
- ```
+ ```html
+ Hola, soy tu primera celda.
+ ```
4. Si quieres una fila de cuatro celdas, tienes que copiar estas etiquetas tres veces. Actualiza el contenido de la tabla para que se vea así:
- ```html
- Hola, soy tu primera celda.
- Soy tu segunda celda.
- Soy tu tercera celda.
- Soy tu cuarta celda.
- ```
+ ```html
+ Hola, soy tu primera celda.
+ Soy tu segunda celda.
+ Soy tu tercera celda.
+ Soy tu cuarta celda.
+ ```
Como verás, las celdas no se colocan una debajo de la otra, sino que se alinean automáticamente entre sí en la misma fila. Cada elemento \ crea una sola celda, y juntas forman la primera fila. Cada celda que agregamos hace crecer la fila.
@@ -237,14 +237,14 @@ Para detener el crecimiento de esta fila y comenzar a colocar las celdas posteri
1. Coloca las cuatro celdas que has creado dentro de las etiquetas ` `, de esta forma:
- ```html
-
- Hola, soy tu primera celda.
- Soy tu segunda celda.
- Soy tu tercera celda.
- Soy tu cuarta celda.
-
- ```
+ ```html
+
+ Hola, soy tu primera celda.
+ Soy tu segunda celda.
+ Soy tu tercera celda.
+ Soy tu cuarta celda.
+
+ ```
2. Ahora que has hecho una fila, intenta hacer una o dos más: cada fila debe estar delimitada por un elemento `` adicional, con cada celda contenida en un ``.
@@ -307,10 +307,10 @@ Ahora nos vamos a centrar en los encabezados de tabla: celdas especiales que van
Hábitos alimentarios
Come las sobras de todos
-Mordisquea la comida
+ Mordisquea la comida
Come en abundancia
-Come hasta que revienta
+ Come hasta que revienta
```
@@ -399,14 +399,12 @@ El marcado inicial se ve así:
Semental
-
-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/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 by contact name:
-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
-
+
+ Enter number:
+ Generate integer squares
- Enter number:
- 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;
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.
- Adivina el numero:
+
+ 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.
+
+
+ Adivina el numero:
-
+ 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
- Adivina el número: Adivina el número: 5 === 2 + 4 // false |
| `!==` | No igual (¿no es lo mismo?) | 5 !== 2 + 4 // true |
-| `<` | Menor que | 6 < 10 // true |
-| `>` | Mayor que | 6 > 10 // false |
+| `<` | Menor que | 6 < 10 // true |
+| `>` | Mayor que | 6 > 10 // false |
### 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 11a0cad656ed3a..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;
}
```
@@ -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: 
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! 
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. 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 ``, luego llama al método [`getContext()`](/es/docs/Web/API/HTMLCanvasElement/getContext) para definir un contexto en el cual se pueda comenzar a dibujar. El resultado de la variable (`ctx`) es el objeto que representa directamente el área de dibujo del `` y permite dibujar elementos 2D en él.
@@ -85,12 +85,12 @@ Con esto se resuelven las propiedades del objeto, ¿Pero qué hacemos con los m
Para dibujar, añadiremos el siguiente método `draw()` al prototipo del objeto `Ball():`
```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);
ctx.fill();
-}
+};
```
Con esta función cada objeto pelota `Ball()` puede dibujarse en la pantalla utilizando el contexto 2D definido anteriormente (`ctx`)
@@ -111,18 +111,18 @@ Ya se puede empezar a testear el objeto.
2. Abra la consola de JavaScript en el navegador, y refresque la página, para que el tamaño del _canvas_ modifique sus dimensiones adaptándose al _viewport_ con la consola abierta.
3. Teclee lo siguiente en la consola para crear una nueva pelota.
- ```js
- var testBall = new Ball(50, 100, 4, 4, 'blue', 10);
- ```
+ ```js
+ var testBall = new Ball(50, 100, 4, 4, "blue", 10);
+ ```
4. Pruebe a llamar a las variables miembro:
- ```js
- testBall.x
- testBall.size
- testBall.color
- testBall.draw()
- ```
+ ```js
+ testBall.x;
+ testBall.size;
+ testBall.color;
+ testBall.draw();
+ ```
5. Al teclear la última línea, debería ver que la pelota se dibuja en alguna parte del _canvas_.
@@ -131,26 +131,26 @@ Ya se puede empezar a testear el objeto.
Ahora podemos dibujar una pelota en una posición dada, pero para empezar a moverla, se necesita una función de actualización de algún tipo. Podemos añadir el código a continuación, al final del archivo de JavaScript, para añidir un método de actualización `update()` en el prototipo de la clase `Ball()`
```js
-Ball.prototype.update = function() {
- if ((this.x + this.size) >= width) {
- this.velX = -(this.velX);
+Ball.prototype.update = function () {
+ if (this.x + this.size >= width) {
+ this.velX = -this.velX;
}
- if ((this.x - this.size) <= 0) {
- this.velX = -(this.velX);
+ if (this.x - this.size <= 0) {
+ this.velX = -this.velX;
}
- if ((this.y + this.size) >= height) {
- this.velY = -(this.velY);
+ if (this.y + this.size >= height) {
+ this.velY = -this.velY;
}
- if ((this.y - this.size) <= 0) {
- this.velY = -(this.velY);
+ if (this.y - this.size <= 0) {
+ this.velY = -this.velY;
}
this.x += this.velX;
this.y += this.velY;
-}
+};
```
Las cuatro primeras partes de la función verifican si la pelota ha alcanzado el borde del _canvas_. Si es así, se invierte la dirección de la velocidad, para que la pelota se mueva en la dirección contraria. Así, si la pelota va hacia arriba, (`velY` positiva) , entonces la velocidad vertical es cambiada, para que se mueva hacia abajo (`velY` negativa).
@@ -184,21 +184,21 @@ Todos los programas que generan animaciones normalmente tienen un bucle de anima
```js
function loop() {
- ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+ ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
ctx.fillRect(0, 0, width, height);
while (balls.length < 25) {
- var size = random(10,20);
+ var size = random(10, 20);
var ball = new Ball(
// la posición de las pelotas, se dibujará al menos siempre
// como mínimo a un ancho de la pelota de distancia al borde del
// canvas, para evitar errores en el dibujo
- random(0 + size,width - size),
- random(0 + size,height - size),
- random(-7,7),
- random(-7,7),
- 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
- size
+ random(0 + size, width - size),
+ random(0 + size, height - size),
+ random(-7, 7),
+ random(-7, 7),
+ `rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})`,
+ size,
);
balls.push(ball);
}
@@ -233,34 +233,37 @@ Ahora, un poco de diversión, añadamos la detección de colisiones a nuestro c
1. El primer paso, será añadir el código a continuación a continuación de donde se definió el método `update()`. (en código de `Ball.prototype.update`)
- ```js
- Ball.prototype.collisionDetect = function() {
- for (var j = 0; j < balls.length; j++) {
- if (!(this === balls[j])) {
- var dx = this.x - balls[j].x;
- var dy = this.y - balls[j].y;
- var distance = Math.sqrt(dx * dx + dy * dy);
-
- if (distance < this.size + balls[j].size) {
- balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
- }
- }
- }
- }
- ```
-
- Esta función es un poco complicada, así que no hay que preocuparse mucho si de momento no se comprende del todo.
-
- - Para cada pelota, necesitamos comprobar si chocará con cada una de las otras pelotas. Para esto, en un bucle `for` para recorrer todas las pelotas.
- - Dentro del bucle, usamos un `if` para comprobar si la pelota que estamos mirando en ese ciclo del bucle `for` es la pelota que estamos mirando. No queremos mirar si una pelota ha chocado consigo misma. Para esto miramos si la pelota actual (es decir la pelota que está invocando al método que resuelve la detección de colisiones) es la misma que la indicada por el bucle. Usamos un operador `!` para indicar una negación en la comparación, así que el código dentro de la condición solo se ejecuta si estamos mirando dos pelotas distintas.
- - Usamos un algoritmo común para comprobar la colisión de los dos pelotas. Básicamente miramos si el área de dos círculos se superponen. Esto se explica mejor en el enlace [detección de colision 2D](/es/docs/Games/Techniques/2D_collision_detection).
- - En este caso, únicamente se define la propiedad de `color` para las dos pelotas, cambiándolas a un nuevo color aleatorio. Se podría haber hecho cosas más complicadas, como que las pelotas rebotasen una con la otra de forma realista, pero esto habría supuesto un desarrollo más complejo. Para desarrollar esos efectos de simulación física, los desarrolladores tienden a usar librerías de física como [PhysicsJS](http://wellcaffeinated.net/PhysicsJS/), [matter.js](http://brm.io/matter-js/), [Phaser](http://phaser.io/), etc.
+ ```js
+ Ball.prototype.collisionDetect = function () {
+ for (var j = 0; j < balls.length; j++) {
+ if (!(this === balls[j])) {
+ var dx = this.x - balls[j].x;
+ var dy = this.y - balls[j].y;
+ var distance = Math.sqrt(dx * dx + dy * dy);
+
+ if (distance < this.size + balls[j].size) {
+ balls[j].color = this.color = `rgb(${random(0, 255)},${random(
+ 0,
+ 255,
+ )},${random(0, 255)})`;
+ }
+ }
+ }
+ };
+ ```
+
+ Esta función es un poco complicada, así que no hay que preocuparse mucho si de momento no se comprende del todo.
+
+ - Para cada pelota, necesitamos comprobar si chocará con cada una de las otras pelotas. Para esto, en un bucle `for` para recorrer todas las pelotas.
+ - Dentro del bucle, usamos un `if` para comprobar si la pelota que estamos mirando en ese ciclo del bucle `for` es la pelota que estamos mirando. No queremos mirar si una pelota ha chocado consigo misma. Para esto miramos si la pelota actual (es decir la pelota que está invocando al método que resuelve la detección de colisiones) es la misma que la indicada por el bucle. Usamos un operador `!` para indicar una negación en la comparación, así que el código dentro de la condición solo se ejecuta si estamos mirando dos pelotas distintas.
+ - Usamos un algoritmo común para comprobar la colisión de los dos pelotas. Básicamente miramos si el área de dos círculos se superponen. Esto se explica mejor en el enlace [detección de colision 2D](/es/docs/Games/Techniques/2D_collision_detection).
+ - En este caso, únicamente se define la propiedad de `color` para las dos pelotas, cambiándolas a un nuevo color aleatorio. Se podría haber hecho cosas más complicadas, como que las pelotas rebotasen una con la otra de forma realista, pero esto habría supuesto un desarrollo más complejo. Para desarrollar esos efectos de simulación física, los desarrolladores tienden a usar librerías de física como [PhysicsJS](http://wellcaffeinated.net/PhysicsJS/), [matter.js](http://brm.io/matter-js/), [Phaser](http://phaser.io/), etc.
2. También es necesario llamar este método en cada instante de la animación. `balls[i].update();` en la línea:
- ```js
- balls[i].collisionDetect();
- ```
+ ```js
+ balls[i].collisionDetect();
+ ```
3. Guardar y refrescar la demo de nuevo y podrá ver como las pelotas cambian de color cuando chocan entre ellas.
diff --git a/files/es/learn/javascript/objects/object_prototypes/index.md b/files/es/learn/javascript/objects/object_prototypes/index.md
index d8a458a6e2b9fe..ff32e5fa6f5368 100644
--- a/files/es/learn/javascript/objects/object_prototypes/index.md
+++ b/files/es/learn/javascript/objects/object_prototypes/index.md
@@ -33,18 +33,17 @@ En este ejemplo, hemos definido una función constructor, así:
```js
function Persona(nombre, apellido, edad, genero, intereses) {
-
// definiendo de propiedades y métodos
this.first = first;
this.last = last;
-//...
+ //...
}
```
Entonces hemos creado una instancia de un objeto como este:
```js
-var person1 = new Persona('Bob', 'Smith', 32, 'hombre', ['music', 'skiing']);
+var person1 = new Persona("Bob", "Smith", 32, "hombre", ["music", "skiing"]);
```
Si escribe "person1." en su consola JavaScript, debería ver que el navegador intenta completarlo automáticamente con los nombres de miembro disponibles en este objeto:
@@ -58,7 +57,7 @@ En esta lista, podra ver los miembros definidos en el objeto prototipo de person
Entonces, ¿qué sucede si llama a un método en `person1`, que está definido en `Object`? Por ejemplo:
```js
-person1.valueOf()
+person1.valueOf();
```
Este método [valueOf()](/es/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf) simplemente retornará el valor del objeto sobre el que se llama - ¡pruébalo y verás! En este caso, lo que pasa es que:
@@ -89,22 +88,22 @@ Así que `Object.prototype.watch()`, `Object.prototype.valueOf()`, etc., están
1. Puede comprobar las propiedades de los prototipos existentes - vuelva a nuestro ejemplo anterior e intente introducir lo siguiente en la consola JavaScript:
- ```js
- Person.prototype
- ```
+ ```js
+ Person.prototype;
+ ```
2. El resultado no le mostrará mucho - después de todo, no hemos definido nada en el prototipo de nuestro constructor personalizado! Por defecto, el prototipo de un constructor siempre comienza vacío. Ahora intente lo siguiente:
- ```js
- Object.prototype
- ```
+ ```js
+ Object.prototype;
+ ```
Verá un gran número de métodos definidos en la propiedad Prototype de Object, que están disponibles en los objetos que heredan de Object, como se ha mostrado anteriormente.
Verá otros ejemplos de herencia de cadena de prototipos en todo JavaScript - intente buscar los métodos y propiedades definidas en el prototipo de los objetos globales String, Date, Number y Array, por ejemplo. Todos ellos tienen un número de miembros definidos en su prototipo, por lo que, por ejemplo, cuando se crea una cadena, como ésta:
```js
-var myString = 'Esto es mi String.';
+var myString = "Esto es mi String.";
```
`myString` inmediatamente tiene una serie de métodos útiles disponibles en él, como [`split()`](/es/docs/Web/JavaScript/Reference/Global_Objects/String/split), [`indexOf()`](/es/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf), [`replace()`](/es/docs/Web/JavaScript/Reference/Global_Objects/String/replace), etc.
@@ -117,15 +116,15 @@ Anteriormente mostramos cómo [`Object.create()`](/es/docs/Web/JavaScript/Refere
1. Por ejemplo, pruebe esto en la consola JavaScript de su ejemplo anterior:
- ```js
- var person2 = Object.create(person1);
- ```
+ ```js
+ var person2 = Object.create(person1);
+ ```
2. Lo que hace create() es crear un nuevo objeto a partir de un objeto prototipo específico. Aquí, la person2 se crea utilizando la person1 como objeto prototipo. Puede comprobarlo introduciendo lo siguiente en la consola:
- ```js
- person2.__proto__
- ```
+ ```js
+ person2.__proto__;
+ ```
Esto devolverá el objeto Persona.
@@ -137,41 +136,44 @@ Como verá en la siguiente sección, las propiedades definidas en la propiedad P
1. Por ejemplo, pruebe estos comandos en la consola:
- ```js
- person1.constructor
- person2.constructor
- ```
+ ```js
+ person1.constructor;
+ person2.constructor;
+ ```
- Ambos deberían devolver el constructor `Person()`, ya que contienen la definición original de esas instancias.
+ Ambos deberían devolver el constructor `Person()`, ya que contienen la definición original de esas instancias.
- Un truco interesante es que se puede añadir paréntesis al final de la propiedad `constructor` (añadiendo todos los parámetros requeridos) para crear otra instancia desde ese constructor. Después de todo, el constructor es una función, por lo que puede ser invocada usando paréntesis; solamente se necesita incluir la palabra clave `new` para especificar que se quiere usar la función como un constructor.
+ Un truco interesante es que se puede añadir paréntesis al final de la propiedad `constructor` (añadiendo todos los parámetros requeridos) para crear otra instancia desde ese constructor. Después de todo, el constructor es una función, por lo que puede ser invocada usando paréntesis; solamente se necesita incluir la palabra clave `new` para especificar que se quiere usar la función como un constructor.
2. Inténtese esto en la consola:
- ```js
- let person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);
- ```
+ ```js
+ let person3 = new person1.constructor("Karen", "Stephenson", 26, "female", [
+ "playing drums",
+ "mountain climbing",
+ ]);
+ ```
3. Ahora intente acceder a las características del nuevo objeto, como:
- ```js
- person3.name.first
- person3.age
- person3.bio()
- ```
+ ```js
+ person3.name.first;
+ person3.age;
+ person3.bio();
+ ```
Esto funciona. No se necesita usarlo con frecuencia, pero puede ser realmente útil cuando se quiera crear una instancia nueva y por alguna razón no se tenga disponible fácilmente una referencia al constructor original.
La propiedad [`constructor`](/es/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor) tiene otros usos. Por ejemplo, si se tiene una instancia y se quiere devolver el nombre del que el constructor es una instancia, se puede usar lo siguiente:
```js
-instanceName.constructor.name
+instanceName.constructor.name;
```
Intente esto, por ejemplo:
```js
-person1.constructor.name
+person1.constructor.name;
```
> **Nota:** El valor de `constructor.name` puede cambiar (debido a herencia de prototipos, binding, preprocesores, transpiladores, etc.), por lo que para ejemplos más complejos es preferible usar el operador [`instanceof`](/es/docs/Web/JavaScript/Reference/Operators/instanceof) en su lugar.
@@ -182,17 +184,17 @@ Vamos a echar un vistazo a un ejemplo para modificar la propiedad `prototype` de
1. Regresemos a nuestro ejemplo [oojs-class-further-exercises.html](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html) y creemos una copia local del [código fuente](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html). Debajo del código JavaScript existente, agrega el siguiente código, el cuál añade un nuevo método a la propiedad `prototype` del constructor:
- ```js
- Person.prototype.farewell = function() {
- alert(this.name.first + ' has left the building. Bye for now!');
- };
- ```
+ ```js
+ Person.prototype.farewell = function () {
+ alert(this.name.first + " has left the building. Bye for now!");
+ };
+ ```
2. Guarda el código y abre la página en el navegador, e ingresa lo siguiente en la entrada de texto.
- ```js
- person1.farewell();
- ```
+ ```js
+ person1.farewell();
+ ```
Deberías obtener un mensaje de alerta mostrando el nombre de la persona como se define dentro del constructor. Esto es realmente útil, pero lo que es más útil es que toda la cadena de herencia se ha actualizado dinámicamente; automáticamente hace que este nuevo método esté disponible en todas las instancias del objeto creadas desde el constructor
@@ -219,13 +221,13 @@ Pero el método `farewell()` aún se encuentra disponible en la instancia `perso
Raramente verás propiedades definidas en la propiedad `prototype`, ya no son muy flexibles cuando son definidas de esta forma. Por ejemplo, puedes añadir una propiedad como esta:
```js
-Person.prototype.fullName = 'Bob Smith';
+Person.prototype.fullName = "Bob Smith";
```
Esto no es muy flexible, ya que la persona podría no llamarse así. Sería mucho mejor construir `fullname` desde `name.first` y `name.last`.
```js
-Person.prototype.fullName = this.name.first + ' ' + this.name.last;
+Person.prototype.fullName = this.name.first + " " + this.name.last;
```
Sin embargo esto no funciona, ya que `this` estará referenciando al scope global en este caso, no al scope de la función. Llamar esta propiedad retornaría `undefined undefined`. Esto funcionó bien en el método que declaramos anteriormente dentro del prototipo, porque se encuentra dentro del scope de la función, que se transferirá con éxito al scope de la instancia del objeto.Así que deberías definir propiedades constantes en el prototipo (p.e. una que nunca necesite cambiar), pero generalmente funciona mejor definir propiedades dentro del constructor.
diff --git a/files/es/learn/performance/index.md b/files/es/learn/performance/index.md
index 12cd75f7c07e5e..03dca5c6d4e3aa 100644
--- a/files/es/learn/performance/index.md
+++ b/files/es/learn/performance/index.md
@@ -46,6 +46,7 @@ Este tema contiene los siguientes módulos, en un orden sugerido para trabajar a
- [Mejores prácticas de rendimiento en JavaScript](/es/docs/Learn/Performance/JavaScript)
- : JavaScript, cuando se usa correctamente, puede permitir experiencias web interactivas e inmersivas, o puede dañar significativamente el tiempo de descarga, el tiempo de procesamiento, el rendimiento dentro de la aplicación, la duración de la batería y la experiencia del usuario. Este artículo describe algunas de las mejores prácticas de JavaScript que deben tenerse en cuenta para garantizar que incluso el contenido complejo tenga el mayor rendimiento posible.
- Rendimiento de fuentes web
+
- : Un aspecto que a menudo se pasa por alto en el panorama del rendimiento son las fuentes web. Las fuentes web son más prominentes que nunca en el diseño web, sin embargo, muchos desarrolladores simplemente las incorporan desde un servicio de terceros y no piensan en ello. En este artículo, cubriremos métodos para obtener sus archivos de fuentes lo más pequeños posible con una configuración y sub configuración de archivos eficientes. A partir de ahí, continuaremos hablando sobre cómo los navegadores envían mensajes de texto y cómo puede usar las funciones de CSS y JavaScript para garantizar que sus fuentes se representen rápidamente y con una interrupción mínima de la experiencia del usuario.
- [Rendimiento móvil](/es/docs/Learn/Performance/Mobile)
diff --git a/files/es/learn/server-side/django/admin_site/index.md b/files/es/learn/server-side/django/admin_site/index.md
index 88b40ca6b5102e..9a516a34d0ee20 100644
--- a/files/es/learn/server-side/django/admin_site/index.md
+++ b/files/es/learn/server-side/django/admin_site/index.md
@@ -1,5 +1,5 @@
---
-title: 'Tutorial Django Parte 4: Sitio de Administración de Django'
+title: "Tutorial Django Parte 4: Sitio de Administración de Django"
slug: Learn/Server-side/Django/Admin_site
---
@@ -107,9 +107,9 @@ Puedes editar un libro haciendo click en su nombre en la lista. La página de ed
-Ahora regresa a la página **Home** (usando el enlace _Home_ de la barra superior) y observa las listas **Author** y **Genre** -- ya deberías tener algunos registros creados de cuando añadiste los nuevos libros, pero puedes crear algunos más.
+Ahora regresa a la página **Home** (usando el enlace _Home_ de la barra superior) y observa las listas **Author** y **Genre** — ya deberías tener algunos registros creados de cuando añadiste los nuevos libros, pero puedes crear algunos más.
-Lo que no vas a tener es _BookInstances_, porque estas no se crean de los libros (si bien puedes crear un `Book` desde una `BookInstance` -- esta es la naturaleza de los campos `ForeignKey`). Regresa a la página _Home_ y presiona el botón **Add** relacionado para desplegar la pantalla _Add book instance_, como se muestra abajo. Nota el largo y globalmente único Id, que puede ser usado para identificar inequívocamente una única copia de un libro dentro de la biblioteca.
+Lo que no vas a tener es _BookInstances_, porque estas no se crean de los libros (si bien puedes crear un `Book` desde una `BookInstance` — esta es la naturaleza de los campos `ForeignKey`). Regresa a la página _Home_ y presiona el botón **Add** relacionado para desplegar la pantalla _Add book instance_, como se muestra abajo. Nota el largo y globalmente único Id, que puede ser usado para identificar inequívocamente una única copia de un libro dentro de la biblioteca.
@@ -211,7 +211,7 @@ class BookAdmin(admin.ModelAdmin):
Desafortunadamente, no podemos especificar directamente el campo `genre` en `list_display` porque es un campo `ManyToManyField` (Django previene esto porque habría un alto "costo" de acceso a base de datos si lo hiciera). En lugar de eso, definiremos una función `display_genre` para obtener la información como una cadena (esta es la función que hemos llamado arriba; la definiremos más abajo).
-> **Nota:** Obtener el `genre` podría no ser una buena idea aquí, debido al "costo" de la operación en la base de datos. Te mostramos cómo hacerlo porque llamar funciones desde tus modelos puede ser muy útil por otras razones -- por ejemplo para añadir un enlace _**Delete**_ junto a cada ítem en la lista.
+> **Nota:** Obtener el `genre` podría no ser una buena idea aquí, debido al "costo" de la operación en la base de datos. Te mostramos cómo hacerlo porque llamar funciones desde tus modelos puede ser muy útil por otras razones — por ejemplo para añadir un enlace _**Delete**_ junto a cada ítem en la lista.
Añade el siguiente código en tu modelo `Book` (**models.py**). Esto crea una cadena con los tres primeros valores del campo `genre` (si existen) y crea una `short_description` (descripción corta) que puede ser usada en el sitio de administración por este método.
@@ -263,7 +263,7 @@ class AuthorAdmin(admin.ModelAdmin):
El atributo `fields` lista solo los campos que se van a desplegar en el formulario, en orden. Los campos se despliegan en vertical por defecto, pero se desplegarán en horizontal si los agrupas en una tupla (como se muestra en los campos "date" arriba).
-Reinicia tu aplicación y ve a la vista de detalle de autor -- ahora debería aparecer como se muestra abajo:
+Reinicia tu aplicación y ve a la vista de detalle de autor — ahora debería aparecer como se muestra abajo:
@@ -290,7 +290,7 @@ class BookInstanceAdmin(admin.ModelAdmin):
)
```
-Cada sección tiene su propio título (o `None`, si no quieres un título) y una tupla de campos asociada en un diccionario -- el formato es complicado de describir pero bastante fácil de entender si observas el fragmento de código que se encuentra justo arriba.
+Cada sección tiene su propio título (o `None`, si no quieres un título) y una tupla de campos asociada en un diccionario — el formato es complicado de describir pero bastante fácil de entender si observas el fragmento de código que se encuentra justo arriba.
Reinicia y navega a una vista de instancia de libro (book instance); el formulario debería aparecer como se muestra abajo:
@@ -312,7 +312,7 @@ class BookAdmin(admin.ModelAdmin):
inlines = [BooksInstanceInline]
```
-Prueba recargando tu aplicación y observando la vista para un libro -- ahora deberías ver al final las instancias relacionadas a este libro (inmediatamente debajo de los campos de género del libro):
+Prueba recargando tu aplicación y observando la vista para un libro — ahora deberías ver al final las instancias relacionadas a este libro (inmediatamente debajo de los campos de género del libro):
diff --git a/files/es/learn/server-side/django/authentication/index.md b/files/es/learn/server-side/django/authentication/index.md
index 11b9fc8d423aaf..5ff0ff7972eed0 100644
--- a/files/es/learn/server-side/django/authentication/index.md
+++ b/files/es/learn/server-side/django/authentication/index.md
@@ -1,5 +1,5 @@
---
-title: 'Tutorial de Django Parte 8: Autenticación y permisos de Usuario'
+title: "Tutorial de Django Parte 8: Autenticación y permisos de Usuario"
slug: Learn/Server-side/Django/Authentication
---
@@ -13,7 +13,7 @@ En este tutorial mostraremos cómo permitir a los usuarios iniciar sesión en tu
Prerequisitos:
Completa todos los temas del tutorial anterior, incluyendo:
- Django Tutorial Part 7: Sessions framework .
@@ -71,13 +71,13 @@ Ya creaste tu primer usuario cuando revisamos el [sitio de administración de Dj
>
> ```python
> from django.contrib.auth.models import User
->
+>
> # Create user and save to the database
->
+>
> user = User.objects.create_user('myusername', 'myemail@crazymail.com', 'mypassword')
->
+>
> # Update fields and then save again
->
+>
> user.first_name = 'John'
> user.last_name = 'Citizen'
> user.save()
@@ -101,7 +101,7 @@ Ahora vamos a crear un usuario:
3. Ingresa un **Nombre de Usuario** "Username", **Contraseña** "Password" y **Confirmacion de Contraseña** "Password confirmation" apropiado para tu usuario de prueba.
4. Presiona **Save** "Guardar" para crear el usuario.
- El sitio de administrador creara el nuevo usuario e inmediatamente te llevara a la pantalla de _Change user_ "Cambios del usuario" donde puedes cambiar tu **nombre de usuario** "Username" y agregar informacion para los campos opcionales del modelo de Usuario "User". Estos campos incluyen el primer nombre "first name", el apellido "last name", la direcion de correo electronico "email adress", los estados de los usuarios y sus permisos "users status and permissions" (solo el indicador **Active** "Activo" deberia ser activado). Mas abajo puedes especificar los grupos y permisos del usuario, y ver datos importantes relacionados a el usuario (ej: la fecha en que se agrego y la fecha del ultimo inicio de sesion)
+ El sitio de administrador creara el nuevo usuario e inmediatamente te llevara a la pantalla de _Change user_ "Cambios del usuario" donde puedes cambiar tu **nombre de usuario** "Username" y agregar informacion para los campos opcionales del modelo de Usuario "User". Estos campos incluyen el primer nombre "first name", el apellido "last name", la direcion de correo electronico "email adress", los estados de los usuarios y sus permisos "users status and permissions" (solo el indicador **Active** "Activo" deberia ser activado). Mas abajo puedes especificar los grupos y permisos del usuario, y ver datos importantes relacionados a el usuario (ej: la fecha en que se agrego y la fecha del ultimo inicio de sesion)
5. 
6. En la seccion _Groups_ "Grupos", selecciona el grupo **Library Member** de la lista de grupos disponibles, y entonces presiona la **la flecha apuntando a la derecha** entre las dos cajas para moverlo dentro de la caja de _Chosen groups_ "Grupos seleccionados".
@@ -136,15 +136,15 @@ Navega hasta la URL `http://127.0.0.1:8000/accounts/` (¡Nota la barra inclinada
> **Nota:** Usando el metodo anterior, añade las siguientes URL's con sus respectivos nombres entre corchetes, los cuales pueden ser usados para revertir "reverse" el mapeado de las URL's. No necesitas implementar nada mas, el anterior mapeado de URL's asigna automaticamente las mencionadas URL's.
>
-> ```
-> ^accounts/login/$ [name='login']
-> ^accounts/logout/$ [name='logout']
-> ^accounts/password_change/$ [name='password_change']
-> ^accounts/password_change/done/$ [name='password_change_done']
-> ^accounts/password_reset/$ [name='password_reset']
-> ^accounts/password_reset/done/$ [name='password_reset_done']
-> ^accounts/reset/(?P[0-9A-Za-z_\-]+)/(?P[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$ [name='password_reset_confirm']
-> ^accounts/reset/done/$ [name='password_reset_complete']
+> ```python
+> accounts/ login/ [name='login']
+> accounts/ logout/ [name='logout']
+> accounts/ password_change/ [name='password_change']
+> accounts/ password_change/done/ [name='password_change_done']
+> accounts/ password_reset/ [name='password_reset']
+> accounts/ password_reset/done/ [name='password_reset_done']
+> accounts/ reset/// [name='password_reset_confirm']
+> accounts/ reset/done/ [name='password_reset_complete']
> ```
Ahora intenta navegar a la URL de inicio de sesion "login"(`http://127.0.0.1:8000/accounts/login/`). Esto fallara de nuevo, pero ahora con un error diciendote que no encuentra la plantilla "template" requerida (**registration/login.html**) por el buscador de directorios de plantillas . Veras el las siguientes lineas en la seccion amarilla en la parte superior:
@@ -172,15 +172,24 @@ Para este sitio pondremos nuestra pagina HTML en el directorio **"templates/regi
> |\_registration
> ```
-Para hacer estos directorios visibles al cargador de plantillas (es decir introducir este directorio en el buscador de directorios de plantillas) abre el archivo de configuracion del proyecto setting.py (**/locallibrary/locallibrary/settings.py)**, y actualiza la seccion de **TEMPLATES** con la linea **'DIRS'** como se muestra a continuacion.
+Para hacer estos directorios visibles al cargador de plantillas (es decir introducir este directorio en el buscador de directorios de plantillas) abre el archivo de configuracion del proyecto setting.py (**/locallibrary/locallibrary/settings.py)**
+
+A continuación, importa el módulo `os` (añade la siguiente línea al principio del archivo).
```python
-TEMPLATES = [
- {
- ...
- 'DIRS': ['./templates',],
- 'APP_DIRS': True,
- ...
+import os # necesario para el siguiente código
+```
+
+Actualiza la seccion de TEMPLATES con la linea 'DIRS' como se muestra a continuacion.
+
+```python
+ # …
+ TEMPLATES = [
+ {
+ # …
+ 'DIRS': [os.path.join(BASE_DIR, 'templates')],
+ 'APP_DIRS': True,
+ # …
```
### Plantilla inicio de sesión "login"
@@ -189,44 +198,42 @@ TEMPLATES = [
Crea un nuevo archivo HTML llamado /**locallibrary/templates/registration/login.html**. suministrado en el siguiente contenido :
-```html
+```django
{% extends "base_generic.html" %}
{% block content %}
-{% if form.errors %}
-Your username and password didn't match. Please try again.
-{% endif %}
+ {% if form.errors %}
+ Your username and password didn't match. Please try again.
+ {% endif %}
-{% if next %}
+ {% if next %}
{% if user.is_authenticated %}
- Your account doesn't have access to this page. To proceed,
- please login with an account that has access.
+ Your account doesn't have access to this page. To proceed,
+ please login with an account that has access.
{% else %}
- Please login to see this page.
+ Please login to see this page.
{% endif %}
-{% endif %}
-
-
-
-{# Assumes you setup the password_reset view in your URLconf #}
-Lost password?
+ {% endif %}
+
+
+
+ {# 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 %}
-
-
+{% block content %}
+
{% 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