diff --git a/.autocorrectignore b/.autocorrectignore new file mode 100644 index 00000000000000..cabe9364ee1033 --- /dev/null +++ b/.autocorrectignore @@ -0,0 +1,7 @@ +# AutoCorrect Link ignore rules. +# https://github.com/huacnlee/autocorrect +# +# Like `.gitignore`, this file to tell AutoCorrect which files need to check, some need to ignore. +files/ +docs/ +!files/zh-cn/ diff --git a/.autocorrectrc b/.autocorrectrc new file mode 100644 index 00000000000000..8b8f715da76117 --- /dev/null +++ b/.autocorrectrc @@ -0,0 +1,4 @@ +textRules: + 一二三,四五六.七八九: 0 + 一二三,四五六,七八九,一二三,四五六,七八九: 0 + 9.9亿: 0 diff --git a/.github/workflows/autocorrect-lint.yml b/.github/workflows/autocorrect-lint.yml new file mode 100644 index 00000000000000..5c28e32aaf0d37 --- /dev/null +++ b/.github/workflows/autocorrect-lint.yml @@ -0,0 +1,44 @@ +# This workflow to use AutoCorrect tool for checking the copywriting, correct spaces and punctuations for CJK contents. +# +# For example: +# +# - incorrect: "欢迎阅读MDN文档." +# - correct: "欢迎阅读 MDN 文档。" +# +# - incorrect: "Welcome，this is MDN Web Docs。" +# - correct: "Welcome, to read MDN Web Docs." +# +# More details: +# https://github.com/huacnlee/autocorrect +name: AutoCorrect Lint +on: + pull_request: + branches: + - main + +jobs: + lint: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v3 + + - name: Get changed files + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + BASE_SHA: ${{ github.event.pull_request.base.sha }} + HEAD_SHA: ${{ github.event.pull_request.head.sha }} + run: | + # Use the GitHub API to get the list of changed files + # documenation: https://docs.github.com/rest/commits/commits#compare-two-commits + DIFF_DOCUMENTS=$(gh api repos/{owner}/{repo}/compare/${{ env.BASE_SHA }}...${{ env.HEAD_SHA }} \ + --jq '.files | .[] | select(.status|IN("added", "modified", "renamed", "copied", "changed")) | .filename') + # filter out files that are not markdown + DIFF_DOCUMENTS=$(echo "${DIFF_DOCUMENTS}" | egrep -i "^files/zh-cn/" | xargs) + echo "DIFF_DOCUMENTS=${DIFF_DOCUMENTS}" >> $GITHUB_ENV + + - name: AutoCorrect changed content + if: ${{ env.DIFF_DOCUMENTS }} + uses: huacnlee/autocorrect-action@v2.6.2 + with: + args: ${{ env.DIFF_DOCUMENTS }} --lint --no-diff-bg-color diff --git a/.markdownlint-cli2.jsonc b/.markdownlint-cli2.jsonc index 97c9dbd1c8aa8e..82fefeca20a770 100644 --- a/.markdownlint-cli2.jsonc +++ b/.markdownlint-cli2.jsonc @@ -167,15 +167,14 @@ "replace": " ", "searchScope": "all" }, - // XXX Many instances still found in translated content // XXX zh-cn/zh-tw prefers em-dash instead - // { - // "name": "m-dash", - // "message": "Don't use '--'. Use m-dash — instead", - // "search": " -- ", - // "replace": " — ", - // "searchScope": "text" - // }, + { + "name": "m-dash", + "message": "Don't use '--'. Use m-dash — instead", + "search": " -- ", + "replace": " — ", + "searchScope": "text" + }, { "name": "relative-link", "message": "Internal links should start with '/'", @@ -229,5 +228,11 @@ } }, "customRules": ["markdownlint-rule-search-replace"], - "ignores": ["node_modules", "**/conflicting/**", "**/orphaned/**", ".github/"] + "ignores": [ + "node_modules", + ".git", + ".github", + "**/conflicting/**", + "**/orphaned/**" + ] } diff --git a/.prettierignore b/.prettierignore index 5e5e7000c9156b..fc7e94e53d6cca 100644 --- a/.prettierignore +++ b/.prettierignore @@ -19,29 +19,29 @@ build/ /files/fr/glossary/grid_axis/index.md /files/fr/glossary/grid_lines/index.md /files/fr/glossary/main_axis/index.md +/files/fr/learn/server-side/django/forms/index.md +/files/pt-br/learn/server-side/django/forms/index.md +/files/ru/learn/server-side/django/forms/index.md +/files/ru/learn/server-side/django/introduction/index.md +/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md /files/zh-cn/learn/css/howto/css_faq/index.md +/files/zh-cn/learn/server-side/django/forms/index.md # A full pass on all Markdown files is being performed. # The following folders still need a full pass: # es -/files/es/web/api/**/*.md /files/es/web/css/**/*.md -/files/es/web/html/**/*.md -/files/es/web/http/**/*.md -/files/es/web/javascript/**/*.md +/files/es/web/javascript/reference/**/*.md # fr -/files/fr/learn/server-side/**/*.md /files/fr/mozilla/add-ons/webextensions/api/**/*.md -/files/fr/web/api/**/*.md /files/fr/web/css/**/*.md /files/fr/web/html/**/*.md /files/fr/web/javascript/**/*.md # ja /files/ja/learn/css/**/*.md -/files/ja/learn/html/**/*.md /files/ja/learn/javascript/**/*.md /files/ja/learn/server-side/**/*.md /files/ja/mozilla/**/*.md @@ -56,7 +56,6 @@ build/ /files/ja/web/svg/**/*.md # ko -/files/ko/games/**/*.md /files/ko/glossary/**/*.md /files/ko/learn/**/*.md /files/ko/learn/css/**/*.md @@ -77,9 +76,6 @@ build/ /files/ko/web/svg/**/*.md # pt-br -/files/pt-br/learn/html/**/*.md -/files/pt-br/learn/javascript/**/*.md -/files/pt-br/learn/server-side/**/*.md /files/pt-br/web/api/**/*.md /files/pt-br/web/css/**/*.md /files/pt-br/web/html/**/*.md @@ -88,10 +84,6 @@ build/ /files/pt-br/web/svg/**/*.md # ru -/files/ru/learn/css/**/*.md -/files/ru/learn/html/**/*.md -/files/ru/learn/javascript/**/*.md -/files/ru/learn/server-side/**/*.md /files/ru/web/api/**/*.md /files/ru/web/css/**/*.md /files/ru/web/html/**/*.md @@ -100,8 +92,6 @@ build/ /files/ru/web/svg/**/*.md # zh-cn -/files/zh-cn/learn/javascript/**/*.md -/files/zh-cn/learn/server-side/**/*.md /files/zh-cn/web/api/**/*.md /files/zh-cn/web/css/**/*.md /files/zh-cn/web/html/**/*.md diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 0f47fcdad8af3b..0b332e22976662 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1873,8 +1873,8 @@ /es/docs/Web/CSS/Referencia_CSS/Extensiones_Mozilla /es/docs/Web/CSS/Mozilla_Extensions /es/docs/Web/CSS/Referencia_CSS/background-blend-mode /es/docs/Web/CSS/background-blend-mode /es/docs/Web/CSS/Referencia_CSS/mix-blend-mode /es/docs/Web/CSS/mix-blend-mode -/es/docs/Web/CSS/Selectores_CSS /es/docs/Web/CSS/CSS_Selectors -/es/docs/Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores /es/docs/Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors +/es/docs/Web/CSS/Selectores_CSS /es/docs/Web/CSS/CSS_selectors +/es/docs/Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores /es/docs/Web/CSS/CSS_selectors/Using_the_:target_pseudo-class_in_selectors /es/docs/Web/CSS/Selectores_atributo /es/docs/Web/CSS/Attribute_selectors /es/docs/Web/CSS/Selectores_hermanos_adyacentes /es/docs/Web/CSS/Adjacent_sibling_combinator /es/docs/Web/CSS/Selectores_hermanos_generales /es/docs/Web/CSS/General_sibling_combinator diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index b7b025d650fc18..b4dde34bf69d0c 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -6811,20 +6811,6 @@ "jota1410" ] }, - "Web/CSS/CSS_Selectors": { - "modified": "2019-07-09T01:16:13.123Z", - "contributors": [ - "missmakita", - "blanchart", - "Benji1337", - "metal-gogo", - "kikolevante" - ] - }, - "Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors": { - "modified": "2020-07-31T07:57:08.167Z", - "contributors": ["blanchart", "israel-munoz"] - }, "Web/CSS/CSS_Types": { "modified": "2019-03-18T21:35:39.343Z", "contributors": ["lajaso"] @@ -7069,6 +7055,20 @@ "modified": "2019-03-23T22:32:38.884Z", "contributors": ["javichito"] }, + "Web/CSS/CSS_selectors": { + "modified": "2019-07-09T01:16:13.123Z", + "contributors": [ + "missmakita", + "blanchart", + "Benji1337", + "metal-gogo", + "kikolevante" + ] + }, + "Web/CSS/CSS_selectors/Using_the_:target_pseudo-class_in_selectors": { + "modified": "2020-07-31T07:57:08.167Z", + "contributors": ["blanchart", "israel-munoz"] + }, "Web/CSS/CSS_text": { "modified": "2019-03-23T22:36:23.444Z", "contributors": ["pekechis"] diff --git a/files/es/learn/accessibility/html/index.md b/files/es/learn/accessibility/html/index.md index 715470725042b0..6965913541b45c 100644 --- a/files/es/learn/accessibility/html/index.md +++ b/files/es/learn/accessibility/html/index.md @@ -393,8 +393,8 @@ El siguiente es un ejemplo mucho mejor: ```html example-good
- - + +
``` 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 4a77b0a4547695..9a516a34d0ee20 100644 --- a/files/es/learn/server-side/django/admin_site/index.md +++ b/files/es/learn/server-side/django/admin_site/index.md @@ -107,9 +107,9 @@ Puedes editar un libro haciendo click en su nombre en la lista. La página de ed ![Admin Site - Book Edit](admin_book_modify.png) -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. ![Admin Site - BookInstance Add](admin_bookinstance_add.png) @@ -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: ![Admin Site - Improved Author Detail](admin_improved_author_detail.png) @@ -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): ![Admin Site - Book with Inlines](admin_improved_book_detail_inlines.png) diff --git a/files/es/learn/server-side/django/generic_views/index.md b/files/es/learn/server-side/django/generic_views/index.md index 56c1df78dcd466..f563975edd3325 100644 --- a/files/es/learn/server-side/django/generic_views/index.md +++ b/files/es/learn/server-side/django/generic_views/index.md @@ -59,13 +59,13 @@ urlpatterns = [ Como se discutió en el tutorial anterior, la URL debió previamente haber coincidido con `/catalog`, de modo que la vista será llamada en realidad para la URL: `/catalog/books/`. -La función de vista tiene un formato diferente al anterior -- eso es porque esta vista será en realidad implementada como una clase. Heredaremos desde una función de vista genérica existente que ya hace la mayoría de lo que queremos que esta función de vista haga, en lugar de escribir la nuestra propia desde el inicio. +La función de vista tiene un formato diferente al anterior — eso es porque esta vista será en realidad implementada como una clase. Heredaremos desde una función de vista genérica existente que ya hace la mayoría de lo que queremos que esta función de vista haga, en lugar de escribir la nuestra propia desde el inicio. Para las vistas basadas en clases de Django, accedemos a una función de vista apropiada llamando al método de clase `as_view()`. Esto hace todo el trabajo de crear una instancia de la clase, y asegurarse de que los métodos controladores correctos sean llamados para las solicitudes HTTP entrantes. ### Vista (basada en clases) -Podríamos fácilmente escribir la vista de lista de libros como una función regular (tal como nuestra vista de índice anterior), la cual consultaría a la base de datos por todos los libros, y luego llamar a `render()` para pasar dicha lista a una plantilla específica. Sin embargo, en lugar de eso usaremos una vista de lista genérica basada en clases (ListView) -- una clase que hereda desde una vista existente. Debido a que la vista genérica ya implementa la mayoría de la funcionalidad que necesitamos, y sigue la práctica adecuada de Django, seremos capaces de crear una vista de lista más robusta con menos código, menos repetición, y por último menos mantenimiento. +Podríamos fácilmente escribir la vista de lista de libros como una función regular (tal como nuestra vista de índice anterior), la cual consultaría a la base de datos por todos los libros, y luego llamar a `render()` para pasar dicha lista a una plantilla específica. Sin embargo, en lugar de eso usaremos una vista de lista genérica basada en clases (ListView) — una clase que hereda desde una vista existente. Debido a que la vista genérica ya implementa la mayoría de la funcionalidad que necesitamos, y sigue la práctica adecuada de Django, seremos capaces de crear una vista de lista más robusta con menos código, menos repetición, y por último menos mantenimiento. Abre **catalog/views.py**, y copia el siguiente código al final del archivo: @@ -78,7 +78,7 @@ class BookListView(generic.ListView): ¡Eso es todo! La vista genérica consultará a la base de datos para obtener todos los registros del modelo especificado (`Book`) y renderizará una plantilla ubicada en **/locallibrary/catalog/templates/catalog/book_list.html** (que crearemos más abajo). Dentro de la plantilla puedes acceder a la lista de libros mediante la variable de plantilla llamada `object_list` O `book_list` (esto es, genéricamente, "`nombre_del_modelo_list`"). -> **Nota:** Esta ruta complicada para la ubicación de la plantilla no es un error de digitación -- las vistas genéricas buscan plantillas en `/application_name/the_model_name_list.html` (`catalog/book_list.html` en este caso) dentro del directorio de la aplicación `/application_name/templates/` (`/catalog/templates/`). +> **Nota:** Esta ruta complicada para la ubicación de la plantilla no es un error de digitación — las vistas genéricas buscan plantillas en `/application_name/the_model_name_list.html` (`catalog/book_list.html` en este caso) dentro del directorio de la aplicación `/application_name/templates/` (`/catalog/templates/`). Puedes añadir atributos para cambiar el comportamiento por defecto de arriba. Por ejemplo, puedes especificar otro archivo de plantilla si necesitas tener múltiples vistas que usen el mismo modelo, o puedes querer usar un nombre diferente de variable de plantilla si `book_list` no resulta intuitivo para tu caso particular de uso de plantilla. Posiblemente la variación más útil es cambiar/filtrar el conjunto de resultados que se devuelve, así, en lugar de listar todos los libros podrías listar los 5 libros más leídos por otros usuarios. @@ -192,9 +192,9 @@ El código dentro del lazo crea un ítem de lista para cada libro, que muestra t Accedemos a los _campos_ del registro del libro asociado usando la "notación de punto" (ej. `book.title` y `book.author`), donde el texto que sigue a la palabra `book` es el nombre del campo (como se definió en el modelo). -También podemos invocar _funciones_ en el modelo desde dentro de nuestra plantilla -- en este caso invocamos a `book.get_absolute_url()` para obtener una URL que se podría usar para desplegar la página de detalle relacionada. Esto funciona siempre y cuando la función no tenga ningún argumento (¡no hay forma de enviar argumentos!). +También podemos invocar _funciones_ en el modelo desde dentro de nuestra plantilla — en este caso invocamos a `book.get_absolute_url()` para obtener una URL que se podría usar para desplegar la página de detalle relacionada. Esto funciona siempre y cuando la función no tenga ningún argumento (¡no hay forma de enviar argumentos!). -> **Nota:** Debemos tener cuidado de los "efectos secundarios" al invocar funciones en las plantillas. Aquí solo obtenemos una URL para desplegar, pero una función puede hacer casi cualquier cosa -- ¡no quisieramos borrar nuestra base de datos (por ejemplo) solo por renderizar nuestra plantilla! +> **Nota:** Debemos tener cuidado de los "efectos secundarios" al invocar funciones en las plantillas. Aquí solo obtenemos una URL para desplegar, pero una función puede hacer casi cualquier cosa — ¡no quisieramos borrar nuestra base de datos (por ejemplo) solo por renderizar nuestra plantilla! #### Actualizar la plantilla base @@ -208,7 +208,7 @@ Abre la plantilla base (**/locallibrary/catalog/templates/_base_generic.html_**) ### ¿Cómo se ve? -Aún no podrás ver la lista de libros, porque aún nos falta una dependencia -- el mapeo URL para las páginas de detalle de libros, que se necesita para crear los hipervínculos a los libros individuales. Mostraremos tanto la lista de libros como las vistas de detalle después de la siguiente sección. +Aún no podrás ver la lista de libros, porque aún nos falta una dependencia — el mapeo URL para las páginas de detalle de libros, que se necesita para crear los hipervínculos a los libros individuales. Mostraremos tanto la lista de libros como las vistas de detalle después de la siguiente sección. ## Página de detalle de libros @@ -438,7 +438,7 @@ Si lo necesitas puedes cambiar la plantilla usada y el nombre del objeto de cont #### ¿Qué sucede si el registro no existe? -Si un registro solicitado no existe, la vista de detalle genérica basada en clases lanzará automáticamente por tí una excepción de tipo Http404 -- en producción, esto desplegará automáticamente una página apropiada de "recurso no encontrado", que puedes personalizar si lo deseas. +Si un registro solicitado no existe, la vista de detalle genérica basada en clases lanzará automáticamente por tí una excepción de tipo Http404 — en producción, esto desplegará automáticamente una página apropiada de "recurso no encontrado", que puedes personalizar si lo deseas. Solo para darte una idea sobre cómo funciona esto, el fragmento de código de abajo demuestra cómo implementarías la vista basada en clases como una función, si **no** estuvieras usando la vista de detalle genérica basada en clases. @@ -560,7 +560,7 @@ Este método es necesario porque has declarado un campo `ForeignKey` (uno-a-much En este punto deberíamos haber creado todo lo necesario para desplegar tanto la lista de libros como las páginas de detalles de libros. Ejecuta el servidor (`python3 manage.py runserver`) y dirígete en tu navegador a `http://127.0.0.1:8000/`. -> **Advertencia:** No hagas click aún en ningún enlace de autor o de detalles de autores -- ¡los crearás en el reto! +> **Advertencia:** No hagas click aún en ningún enlace de autor o de detalles de autores — ¡los crearás en el reto! Haz click en el enlace **All books** para desplegar la lista de libros. @@ -586,7 +586,7 @@ class BookListView(generic.ListView): paginate_by = 10 ``` -Con esta adición, apenas tengas más de 10 registros la vista comenzará a paginar la información que envía a la plantilla. A las diferentes páginas se accede usando parámetros GET -- para acceder a la página 2 usarías la URL: `/catalog/books/?page=2`. +Con esta adición, apenas tengas más de 10 registros la vista comenzará a paginar la información que envía a la plantilla. A las diferentes páginas se accede usando parámetros GET — para acceder a la página 2 usarías la URL: `/catalog/books/?page=2`. ### Plantillas @@ -624,7 +624,7 @@ Usamos `\{{ request.path }}` para obtener la URL de la página actual para crear ### ¿Cómo se ve? -La captura de pantalla de abajo muestra cómo se ve la paginación -- si no has ingresado más de 10 títulos en tu base de datos, puedes probarlo más fácilmente reduciendo el número especificado en la línea `paginate_by` en tu archivo **catalog/views.py**. Para obtener el resultado de abajo lo cambiamos a `paginate_by = 2`. +La captura de pantalla de abajo muestra cómo se ve la paginación — si no has ingresado más de 10 títulos en tu base de datos, puedes probarlo más fácilmente reduciendo el número especificado en la línea `paginate_by` en tu archivo **catalog/views.py**. Para obtener el resultado de abajo lo cambiamos a `paginate_by = 2`. Los enlaces de paginación se muestran en la parte de abajo, con enlaces de next/previous desplegados dependiendo de en qué página estés diff --git a/files/es/learn/server-side/django/home_page/index.md b/files/es/learn/server-side/django/home_page/index.md index 09f8cb6f577916..3da1d87a9b715f 100644 --- a/files/es/learn/server-side/django/home_page/index.md +++ b/files/es/learn/server-side/django/home_page/index.md @@ -202,7 +202,7 @@ La plantilla base que pensamos usar para el siito web _LocalLibrary_ se muestra > **Nota:** También introducimos dos etiquetas de plantilla adicionales: `url` y `load static`. Se discute sobre ellas en secciones posteriores. -Crea un nuevo archivo -- **/locallibrary/catalog/templates/_base_generic.html_** -- y pon en él el siguiente contenido: +Crea un nuevo archivo — **/locallibrary/catalog/templates/_base_generic.html_** — y pon en él el siguiente contenido: ```django @@ -245,7 +245,7 @@ Crea un nuevo archivo -- **/locallibrary/catalog/templates/_base_generic.html_** ``` -La plantilla usa (e incluye) JavaScript y CSS desde [Bootstrap](http://getbootstrap.com/) para mejorar el diseño y la presentación de la página HTML. Usar Bootstrap u otro framework web del lado del cliente es una manera rápida de crear una página atractiva que puede escalarse bien en diferentes tamaños de navegador, y también nos permite concentrarnos en la presentación de la página sin tener que entrar en ninguno de los detalles -- ¡queremos enfocarnos nada más en el código del lado del servidor aquí! +La plantilla usa (e incluye) JavaScript y CSS desde [Bootstrap](http://getbootstrap.com/) para mejorar el diseño y la presentación de la página HTML. Usar Bootstrap u otro framework web del lado del cliente es una manera rápida de crear una página atractiva que puede escalarse bien en diferentes tamaños de navegador, y también nos permite concentrarnos en la presentación de la página sin tener que entrar en ninguno de los detalles — ¡queremos enfocarnos nada más en el código del lado del servidor aquí! La plantilla base también hace referencia a un archivo css local (**styles.css**) que brinda algo más de estilo. Crea **/locallibrary/catalog/static/css/styles.css** y pon en él el siguiente contenido: @@ -370,7 +370,7 @@ Aquí hay un par de tareas para probar tu familiaridad con consultas a modelos, ## Resumen -Hemos creado la página de inicio para nuestro sitio -- una página HTML que despliega algunos conteos de registros de la base de datos y contiene enlaces a otras de nuestras páginas que aún nos faltan por crear. Sobre la marcha hemos adquirido mucha información fundamental sobre mapeadores URL, vistas, consultas a la base de datos usando nuestros modelos, cómo enviar información a una plantilla desde nuestra vista, y cómo crear y extender plantillas. +Hemos creado la página de inicio para nuestro sitio — una página HTML que despliega algunos conteos de registros de la base de datos y contiene enlaces a otras de nuestras páginas que aún nos faltan por crear. Sobre la marcha hemos adquirido mucha información fundamental sobre mapeadores URL, vistas, consultas a la base de datos usando nuestros modelos, cómo enviar información a una plantilla desde nuestra vista, y cómo crear y extender plantillas. En nuestro siguiente artículo nos basaremos en nuestro conocimiento para crear las otras cuatro páginas. diff --git a/files/es/learn/server-side/django/sessions/index.md b/files/es/learn/server-side/django/sessions/index.md index 64135f54a99b24..9bc572bc060439 100644 --- a/files/es/learn/server-side/django/sessions/index.md +++ b/files/es/learn/server-side/django/sessions/index.md @@ -35,7 +35,7 @@ El framework de sesiones te permite implementar este tipo de comportamiento, pud ## ¿Qué son las sesiones? -Toda comunicación entre los navegadores web y los servidores se da a través del protocolo HTTP, que es _sin estado_. El hecho de que el protocolo sea sin estado significa que los mensajes entre el cliente y el servidor son completamente independientes entre sí -- no existe una noción de "secuencia" o comportamiento basado en mensajes previos. Como resultado, si quieres tener un sitio que guarde registro de la relación que tiene lugar con un cliente, necesitas implementarlo tú mismo. +Toda comunicación entre los navegadores web y los servidores se da a través del protocolo HTTP, que es _sin estado_. El hecho de que el protocolo sea sin estado significa que los mensajes entre el cliente y el servidor son completamente independientes entre sí — no existe una noción de "secuencia" o comportamiento basado en mensajes previos. Como resultado, si quieres tener un sitio que guarde registro de la relación que tiene lugar con un cliente, necesitas implementarlo tú mismo. Las sesiones son el mecanismo que usa Django (y la mayor parte de Internet) para guardar registro del "estado" entre el sitio y un navegador en particular. Las sesiones te permiten almacenar información arbitraria por navegador, y tener esta información disponible para el sitio cuando el navegador se conecta. Cada pieza individual de información asociada con una sesión se conoce como "clave", que se usa tanto para guardar como para recuperar la información. @@ -107,7 +107,7 @@ request.session.modified = True > **Nota:** Puedes cambiar el comportamiento para que el sitio actualice la base de datos y envíe la cookie en cada solicitud añádiendo `SESSION_SAVE_EVERY_REQUEST = True` a la configuración de tu proyecto (**locallibrary/locallibrary/settings.py**). -## Ejemplo simple -- obteniendo conteos de visitas +## Ejemplo simple — obteniendo conteos de visitas Como un ejemplo simple del mundo real, actualizaremos nuestra biblioteca para decirle al usuario actual cuántas veces ha visitado la página principal de _BibliotecaLocal_. diff --git a/files/es/web/api/animation/effect/index.md b/files/es/web/api/animation/effect/index.md index 3ff9fdcc24bf9e..7456a52ab102e9 100644 --- a/files/es/web/api/animation/effect/index.md +++ b/files/es/web/api/animation/effect/index.md @@ -3,7 +3,7 @@ title: Animation.effect slug: Web/API/Animation/effect --- - {{ APIRef("Web Animations") }} +{{ APIRef("Web Animations") }} La propiedad `Animation.effect` de la [Web Animations API](/es/docs/Web/API/Web_Animations_API) obtiene y establece el efecto objetivo de una animación. El efecto objetivo puede ser un objeto efecto de un tipo basado en {{domxref("AnimationEffectReadOnly")}}, como {{domxref("KeyframeEffect")}}, o `null`. diff --git a/files/es/web/api/animation/finish/index.md b/files/es/web/api/animation/finish/index.md index 50fbea6898a619..8e05c31ba2156c 100644 --- a/files/es/web/api/animation/finish/index.md +++ b/files/es/web/api/animation/finish/index.md @@ -45,11 +45,9 @@ interfaceElement.addEventListener("mousedown", function() { El siguiente ejemplo finaliza todas las animaciones en un solo elemento, independientemente de su dirección de reproducción. ```js -elem.getAnimations().forEach( - function(animation){ - return animation.finish(); - } -); +elem.getAnimations().forEach(function (animation) { + return animation.finish(); +}); ``` ## Especificaciones diff --git a/files/es/web/api/animation/finish_event/index.md b/files/es/web/api/animation/finish_event/index.md index 54785886a24dd4..0c99baf81efe14 100644 --- a/files/es/web/api/animation/finish_event/index.md +++ b/files/es/web/api/animation/finish_event/index.md @@ -41,8 +41,8 @@ hide(endingUI); // Cuando los créditos se hayan desvanecido, // volvemos a agregar los eventos de puntero cuando terminen. -bringUI.onfinish = function() { - endingUI.style.pointerEvents = 'auto'; +bringUI.onfinish = function () { + endingUI.style.pointerEvents = "auto"; }; ``` diff --git a/files/es/web/api/animation/finished/index.md b/files/es/web/api/animation/finished/index.md index 337aaf1d773b42..7ed39acc4b4176 100644 --- a/files/es/web/api/animation/finished/index.md +++ b/files/es/web/api/animation/finished/index.md @@ -26,16 +26,12 @@ El siguiente código espera a que todas las animaciones que se ejecutan en el el ```js Promise.all( - elem.getAnimations().map( - function(animation) { - return animation.finished - } - ) -).then( - function() { - return elem.remove(); - } -); + elem.getAnimations().map(function (animation) { + return animation.finished; + }), +).then(function () { + return elem.remove(); +}); ``` ## Especificaciones diff --git a/files/es/web/api/animation/pause/index.md b/files/es/web/api/animation/pause/index.md index fd53f5faa17215..badba2147c1eeb 100644 --- a/files/es/web/api/animation/pause/index.md +++ b/files/es/web/api/animation/pause/index.md @@ -34,15 +34,16 @@ Lanza un `InvalidStateError` si el {{domxref("Animation.currentTime", "currentTi ```js // animación de la magdalena que lentamente se está comiendo -var nommingCake = document.getElementById('eat-me_sprite').animate( -[ - { transform: 'translateY(0)' }, - { transform: 'translateY(-80%)' } -], { - fill: 'forwards', - easing: 'steps(4, end)', - duration: aliceChange.effect.timing.duration / 2 -}); +var nommingCake = document + .getElementById("eat-me_sprite") + .animate( + [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }], + { + fill: "forwards", + easing: "steps(4, end)", + duration: aliceChange.effect.timing.duration / 2, + }, + ); // realmente solo debe funcionar al hacer click, así que se pausa inicialmente: nommingCake.pause(); @@ -52,7 +53,7 @@ Adicionalmente, al restablecer: ```js // Una función multiusos para pausar las animaciones de Alicia, el pastelito y la botella que dice "drink me." -var stopPlayingAlice = function() { +var stopPlayingAlice = function () { aliceChange.pause(); nommingCake.pause(); drinking.pause(); diff --git a/files/es/web/api/animation/play/index.md b/files/es/web/api/animation/play/index.md index 34c034c612ee60..eb288c575ed3e0 100644 --- a/files/es/web/api/animation/play/index.md +++ b/files/es/web/api/animation/play/index.md @@ -27,29 +27,28 @@ En el ejemplo [Growing/Shrinking Alice Game](https://codepen.io/rachelnabors/pen ```js // El pastel tiene su propia animación: -var nommingCake = document.getElementById('eat-me_sprite').animate( -[ - { transform: 'translateY(0)' }, - { transform: 'translateY(-80%)' } -], { - fill: 'forwards', - easing: 'steps(4, end)', - duration: aliceChange.effect.timing.duration / 2 -}); +var nommingCake = document + .getElementById("eat-me_sprite") + .animate( + [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }], + { + fill: "forwards", + easing: "steps(4, end)", + duration: aliceChange.effect.timing.duration / 2, + }, + ); // Pausa la animación del pastel para que no se reproduzca inmediatamente. nommingCake.pause(); // Esta función se reproducirá cuando el usuario haga click o toque -var growAlice = function() { - +var growAlice = function () { // Reproduce la animación de Alicia. aliceChange.play(); // Reproduce la animación del pastel. nommingCake.play(); - -} +}; // Cuando el usuario hace click o toca, llama a growAlice, para reproducir todas las animaciones. cake.addEventListener("mousedown", growAlice, false); diff --git a/files/es/web/api/animation/playbackrate/index.md b/files/es/web/api/animation/playbackrate/index.md index 9ce4edf46282f9..fd11db36150dcd 100644 --- a/files/es/web/api/animation/playbackrate/index.md +++ b/files/es/web/api/animation/playbackrate/index.md @@ -28,10 +28,10 @@ Toma un número que puede ser 0, negativo o positivo. Los valores negativos invi En el ejemplo [Growing/Shrinking Alice Game](https://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010) , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia (`aliceChange`) se invierta para reducirse: ```js -var shrinkAlice = function() { +var shrinkAlice = function () { aliceChange.playbackRate = -1; aliceChange.play(); -} +}; // Con un toque o un click, Alicia se encogerá. bottle.addEventListener("mousedown", shrinkAlice, false); @@ -41,10 +41,10 @@ bottle.addEventListener("touchstart", shrinkAlice, false); Por el contrario, hacer click en el pastel hace que "crezca" reproduciendo `aliceChange` hacia adelante otra vez: ```js -var growAlice = function() { +var growAlice = function () { aliceChange.playbackRate = 1; aliceChange.play(); -} +}; // Con un toque o un click, Alicia crecerá. cake.addEventListener("mousedown", growAlice, false); @@ -54,23 +54,21 @@ cake.addEventListener("touchstart", growAlice, false); En otro ejemplo, [Red Queen's Race Game](https://codepen.io/rachelnabors/pen/PNGGaV?editors=0010), Alicia y La Reina Roja están ralentizandose constantemente: ```js -setInterval( function() { - +setInterval(function () { // Asegúrate de que la velocidad de reproducción nunca descienda por debajo de .4 - if (redQueen_alice.playbackRate > .4) { - redQueen_alice.playbackRate *= .9; + if (redQueen_alice.playbackRate > 0.4) { + redQueen_alice.playbackRate *= 0.9; } - }, 3000); ``` Pero hacer click o hacer tapping(pasar el puntero) sobre ellos hace que aceleren multiplicando su `playbackRate` (velocidad de reproducción): ```js -var goFaster = function() { +var goFaster = function () { redQueen_alice.playbackRate *= 1.1; -} +}; document.addEventListener("click", goFaster); document.addEventListener("touchstart", goFaster); diff --git a/files/es/web/api/animation/playstate/index.md b/files/es/web/api/animation/playstate/index.md index b556c5a24d39a6..3ffb4bf6daddc9 100644 --- a/files/es/web/api/animation/playstate/index.md +++ b/files/es/web/api/animation/playstate/index.md @@ -37,29 +37,25 @@ En el ejemplo [Growing/Shrinking Alice Game](https://codepen.io/rachelnabors/pen ```js // Configurando las animaciones de lágrimas -tears.forEach(function(el) { - el.animate( - tearsFalling, - { - delay: getRandomMsRange(-1000, 1000), // cada lágrima aleatoria - duration: getRandomMsRange(2000, 6000), // cada lágrima aleatoria - iterations: Infinity, - easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" - }); - el.playState = 'paused'; +tears.forEach(function (el) { + el.animate(tearsFalling, { + delay: getRandomMsRange(-1000, 1000), // cada lágrima aleatoria + duration: getRandomMsRange(2000, 6000), // cada lágrima aleatoria + iterations: Infinity, + easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)", + }); + el.playState = "paused"; }); - // Reproduce las lágrimas cayendo cuando el final necesita mostrarlas. -tears.forEach(function(el) { - el.playState = 'playing'; +tears.forEach(function (el) { + el.playState = "playing"; }); - // Reinicia la animación de las lágrimas y la detiene. -tears.forEach(function(el) { +tears.forEach(function (el) { el.playState = "paused"; el.currentTime = 0; }); diff --git a/files/es/web/api/animation/ready/index.md b/files/es/web/api/animation/ready/index.md index 534195537c0afe..af8d1a20e9b590 100644 --- a/files/es/web/api/animation/ready/index.md +++ b/files/es/web/api/animation/ready/index.md @@ -20,7 +20,7 @@ var readyPromise = Animation.ready; Un {{jsxref("Promise")}} que se resuelve cuando la animación esta lista para reproducirse. Por lo general, se usará una construcción similar a esta usando una promise lista: ```js -animation.ready.then(function() { +animation.ready.then(function () { // Hace lo que sea necesario cuando // la animación está lista para reproducirse }); @@ -32,7 +32,7 @@ En el siguiente ejemplo, el estado de la animación será `running(reproduciendo ```js animation.pause(); -animation.ready.then(function() { +animation.ready.then(function () { // Displays 'running' alert(animation.playState); }); diff --git a/files/es/web/api/animation/reverse/index.md b/files/es/web/api/animation/reverse/index.md index 049c2cb8d9b517..17fd1d00adc3b4 100644 --- a/files/es/web/api/animation/reverse/index.md +++ b/files/es/web/api/animation/reverse/index.md @@ -26,26 +26,26 @@ Ningun. En el ejemplo [Growing/Shrinking Alice Game](https://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010) , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia(`aliceChange`) sea reproducida al revés, lo que la hace más pequeña. Esto se hace estableciendo el {{ domxref("Animation.playbackRate") }} de `aliceChange` en `-1` de esta forma: ```js -var shrinkAlice = function() { +var shrinkAlice = function () { // reproduce la animación de Alicia al revés. aliceChange.playbackRate = -1; aliceChange.play(); // reproduce la animación de la botella. - drinking.play() -} + drinking.play(); +}; ``` Pero también se podría haber hecho lamando a `reverse()` en `aliceChange` así: ```js -var shrinkAlice = function() { +var shrinkAlice = function () { // reproduce la animación de Alicia al revés. aliceChange.reverse(); // reproduce la animación de la botella. - drinking.play() -} + drinking.play(); +}; ``` ## Especificaciones diff --git a/files/es/web/api/animation/starttime/index.md b/files/es/web/api/animation/starttime/index.md index d0d1f9f03872ae..41c692aebd66c4 100644 --- a/files/es/web/api/animation/starttime/index.md +++ b/files/es/web/api/animation/starttime/index.md @@ -26,10 +26,12 @@ Un número de punto flotante que representa el tiempo actual en milisegundos, o En el ejemplo [Running on Web Animations API example](https://codepen.io/rachelnabors/pen/zxYexJ?editors=0010), podemos sincronizar todos los nuevos gatos animados dándoles el mismo tiempo de inicio `startTime` que el gato original: ```js -var catRunning = document.getElementById ("withWAAPI").animate(keyframes, timing); +var catRunning = document + .getElementById("withWAAPI") + .animate(keyframes, timing); /* Una función que crea nuevos gatos. */ -function addCat(){ +function addCat() { var newCat = document.createElement("div"); newCat.classList.add("cat"); return newCat; diff --git a/files/es/web/api/atob/index.md b/files/es/web/api/atob/index.md index 2a71f25b99871e..b67886beff0749 100644 --- a/files/es/web/api/atob/index.md +++ b/files/es/web/api/atob/index.md @@ -3,6 +3,7 @@ title: WindowBase64.atob() slug: Web/API/atob original_slug: Web/API/WindowOrWorkerGlobalScope/atob --- + {{APIRef}} La función **WindowBase64.atob()** descodifica una cadena de datos que ha sido codificada utilizando la codificación en base-64. Puedes utilizar el método {{domxref("window.btoa()")}} para codificar y transmitir datos que, de otro modo podrían generar problemas de comunicación. Luego de ser transmitidos se puede usar el método window\.atob() para decodificar los datos de nuevo. Por ejemplo, puedes codificar, transmitir y decodificar los caracteres de control como valores ASCII 0 a 31. diff --git a/files/es/web/api/audiobuffer/index.md b/files/es/web/api/audiobuffer/index.md index afb0f7872f4eef..8a545a8864ccb9 100644 --- a/files/es/web/api/audiobuffer/index.md +++ b/files/es/web/api/audiobuffer/index.md @@ -42,7 +42,11 @@ El siguiente ejemplo muestra como se crea un `AudioBuffer` y rellena con un soni var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // Create an empty three-second stereo buffer at the sample rate of the AudioContext -var myArrayBuffer = audioCtx.createBuffer(2, audioCtx.sampleRate * 3, audioCtx.sampleRate); +var myArrayBuffer = audioCtx.createBuffer( + 2, + audioCtx.sampleRate * 3, + audioCtx.sampleRate, +); // Fill the buffer with white noise; // just random values between -1.0 and 1.0 diff --git a/files/es/web/api/battery_status_api/index.md b/files/es/web/api/battery_status_api/index.md index 1d5c38e42bf04e..128b01a7a8ba5e 100644 --- a/files/es/web/api/battery_status_api/index.md +++ b/files/es/web/api/battery_status_api/index.md @@ -22,8 +22,8 @@ La **API de Estado de Batería**, también conocida como "**Battery API**", prov En este ejemplo, observamos los cambios en el estado de la carga (este o no conectado y cargando) y en el nivel de la batería. Esto se hace escuchando los eventos [`chargingchange`](/es/docs/Web/Reference/Events/chargingchange), [`levelchange`](/es/docs/Web/Reference/Events/levelchange), [`chargingtimechange`](/es/docs/Web/Reference/Events/chargingtimechange) y [`dischargingtimechange`](/es/docs/Web/Reference/Events/dischargingtimechange). ```js -navigator.getBattery().then(function(battery) { - function updateAllBatteryInfo(){ +navigator.getBattery().then(function (battery) { + function updateAllBatteryInfo() { updateChargeInfo(); updateLevelInfo(); updateChargingInfo(); @@ -31,38 +31,41 @@ navigator.getBattery().then(function(battery) { } updateAllBatteryInfo(); - battery.addEventListener('chargingchange', function(){ + battery.addEventListener("chargingchange", function () { updateChargeInfo(); }); - function updateChargeInfo(){ - console.log("La batería esta cargando? " - + (battery.charging ? "Si" : "No")); + function updateChargeInfo() { + console.log( + "La batería esta cargando? " + (battery.charging ? "Si" : "No"), + ); } - battery.addEventListener('levelchange', function(){ + battery.addEventListener("levelchange", function () { updateLevelInfo(); }); - function updateLevelInfo(){ - console.log("Nivel de la batería: " - + battery.level * 100 + "%"); + function updateLevelInfo() { + console.log("Nivel de la batería: " + battery.level * 100 + "%"); } - battery.addEventListener('chargingtimechange', function(){ + battery.addEventListener("chargingtimechange", function () { updateChargingInfo(); }); - function updateChargingInfo(){ - console.log("Tiempo de carga de la batería: " - + battery.chargingTime + " segundos"); + function updateChargingInfo() { + console.log( + "Tiempo de carga de la batería: " + battery.chargingTime + " segundos", + ); } - battery.addEventListener('dischargingtimechange', function(){ + battery.addEventListener("dischargingtimechange", function () { updateDischargingInfo(); }); - function updateDischargingInfo(){ - console.log("Tiempo de descarga de la batería: " - + battery.dischargingTime + " segundos"); + function updateDischargingInfo() { + console.log( + "Tiempo de descarga de la batería: " + + battery.dischargingTime + + " segundos", + ); } - }); ``` diff --git a/files/es/web/api/batterymanager/charging/index.md b/files/es/web/api/batterymanager/charging/index.md index 2a3f20aad3b879..d293efe92170e8 100644 --- a/files/es/web/api/batterymanager/charging/index.md +++ b/files/es/web/api/batterymanager/charging/index.md @@ -10,7 +10,7 @@ Un valor boleano indicando si está cargando o no la batería del dispositivo (e ## Sintaxis ```js -var cargando = battery.charging +var cargando = battery.charging; ``` El valor de retorno, `cargando` indica si la `battery` se está cargando o no, el cual es un objeto {{domxref("BatteryManager")}}, está actualmente cargandose, si la batería se está cargando, este valor es `true`. De lo contrario el valor es `false`. @@ -26,11 +26,10 @@ El valor de retorno, `cargando` indica si la `battery` se está cargando o no, e ### Contenido JavaScript ```js -navigator.getBattery().then(function(battery) { +navigator.getBattery().then(function (battery) { + var cargando = battery.charging; - var cargando = battery.charging; - - document.querySelector('#cargando').textContent = cargando; + document.querySelector("#cargando").textContent = cargando; }); ``` diff --git a/files/es/web/api/batterymanager/chargingchange_event/index.md b/files/es/web/api/batterymanager/chargingchange_event/index.md index 61cb1011eaca5c..c866cd262469c3 100644 --- a/files/es/web/api/batterymanager/chargingchange_event/index.md +++ b/files/es/web/api/batterymanager/chargingchange_event/index.md @@ -13,7 +13,7 @@ Especifica un evento que escucha para recibir eventos [`chargingchange`](/es/doc ## Sintaxis ```js -battery.onchargingchange = funcRef +battery.onchargingchange = funcRef; ``` Donde `battery` es un objeto {{domxref("BatteryManager")}}, y `funcRef` es una función para llamar cuando se produce el evento [`chargingchange`](/es/docs/Web/Reference/Events/chargingchange). @@ -30,14 +30,13 @@ Donde `battery` es un objeto {{domxref("BatteryManager")}}, y `funcRef` es una f ### Contenido JavaScript ```js -navigator.getBattery().then(function(battery) { +navigator.getBattery().then(function (battery) { + battery.onchargingchange = chargingChange(); - battery.onchargingchange = chargingChange(); - - function chargingChange() { - document.querySelector('#level').textContent = battery.level; - document.querySelector('#chargingTime').textContent = battery.chargingTime; - } + function chargingChange() { + document.querySelector("#level").textContent = battery.level; + document.querySelector("#chargingTime").textContent = battery.chargingTime; + } }); ``` diff --git a/files/es/web/api/batterymanager/chargingtime/index.md b/files/es/web/api/batterymanager/chargingtime/index.md index 3e754fcc80952b..2ebe80aa91c124 100644 --- a/files/es/web/api/batterymanager/chargingtime/index.md +++ b/files/es/web/api/batterymanager/chargingtime/index.md @@ -32,7 +32,7 @@ Si la batería está descargándose el valor es [`Infinity`](/es/docs/Web/JavaSc ### Contenido JavaScript ```js -navigator.getBattery().then(function(battery) { +navigator.getBattery().then(function (battery) { var time = battery.chargingTime; document.querySelector("#chargingTime").textContent = battery.chargingTime; diff --git a/files/es/web/api/batterymanager/dischargingtime/index.md b/files/es/web/api/batterymanager/dischargingtime/index.md index d9e58e14266688..25863d6f6ddd26 100644 --- a/files/es/web/api/batterymanager/dischargingtime/index.md +++ b/files/es/web/api/batterymanager/dischargingtime/index.md @@ -34,10 +34,11 @@ o si el sistema es incapaz de calcular el tiempo de descarga. ### Contenido JavaScript ```js -navigator.getBattery().then(function(battery) { +navigator.getBattery().then(function (battery) { var time = battery.dischargingTime; - document.querySelector("#dischargingTime").textContent = battery.dischargingTime; + document.querySelector("#dischargingTime").textContent = + battery.dischargingTime; }); ``` diff --git a/files/es/web/api/batterymanager/level/index.md b/files/es/web/api/batterymanager/level/index.md index f5a24fded90849..5163b1b7b75d6a 100644 --- a/files/es/web/api/batterymanager/level/index.md +++ b/files/es/web/api/batterymanager/level/index.md @@ -30,19 +30,18 @@ Un número. #### JavaScript ```js -const getLevel = document.querySelector('#get-level'); -const output = document.querySelector('#output'); +const getLevel = document.querySelector("#get-level"); +const output = document.querySelector("#output"); -getLevel.addEventListener('click', async () => { +getLevel.addEventListener("click", async () => { if (!navigator.getBattery) { - output.textContent = 'El administrador de batería no es compatible'; + output.textContent = "El administrador de batería no es compatible"; } else { const manager = await navigator.getBattery(); const level = manager.level; output.textContent = `Battery level: ${level}`; } }); - ``` #### Resultado diff --git a/files/es/web/api/batterymanager/levelchange_event/index.md b/files/es/web/api/batterymanager/levelchange_event/index.md index 1d965760137666..3e850892d4991a 100644 --- a/files/es/web/api/batterymanager/levelchange_event/index.md +++ b/files/es/web/api/batterymanager/levelchange_event/index.md @@ -31,17 +31,16 @@ y `funcRef` es una función que se convoca cuando el evento de [`levelchange`](/ ### Contenido JavaScript ```js -navigator.getBattery().then(function(battery) { - battery.onlevelchange = function(){ - document.querySelector('#level').textContent = battery.level; - - if(battery.charging) { - document.querySelector('#stateBattery').textContent = - "Charging time: " + (battery.chargingTime / 60); - } - else { - document.querySelector('#stateBattery').textContent = - "Discharging time: " + (battery.dischargingTime / 60); +navigator.getBattery().then(function (battery) { + battery.onlevelchange = function () { + document.querySelector("#level").textContent = battery.level; + + if (battery.charging) { + document.querySelector("#stateBattery").textContent = + "Charging time: " + battery.chargingTime / 60; + } else { + document.querySelector("#stateBattery").textContent = + "Discharging time: " + battery.dischargingTime / 60; } }; }); diff --git a/files/es/web/api/beforeunloadevent/index.md b/files/es/web/api/beforeunloadevent/index.md index c73dbcd156b276..7ad68c7e0bae04 100644 --- a/files/es/web/api/beforeunloadevent/index.md +++ b/files/es/web/api/beforeunloadevent/index.md @@ -33,12 +33,12 @@ Cuando una cadena no vacía es asignada a la propiedad `returnValue` del Evento, ## Ejemplos ```js -window.addEventListener("beforeunload", function( event ) { - event.returnValue = "\o/"; +window.addEventListener("beforeunload", function (event) { + event.returnValue = "\\o/"; }); //is equivalent to -window.addEventListener("beforeunload", function( event ) { +window.addEventListener("beforeunload", function (event) { event.preventDefault(); }); ``` @@ -47,10 +47,10 @@ Los navegadores basado en Webkit no se basan en las especificaciones del cuadro ```js window.addEventListener("beforeunload", function (e) { - var confirmationMessage = "\o/"; + var confirmationMessage = "\\o/"; - (e || window.event).returnValue = confirmationMessage; //Gecko + IE - return confirmationMessage; //Webkit, Safari, Chrome etc. + (e || window.event).returnValue = confirmationMessage; //Gecko + IE + return confirmationMessage; //Webkit, Safari, Chrome etc. }); ``` diff --git a/files/es/web/api/blob/blob/index.md b/files/es/web/api/blob/blob/index.md index 419a83d29df839..476dc108501136 100644 --- a/files/es/web/api/blob/blob/index.md +++ b/files/es/web/api/blob/blob/index.md @@ -34,7 +34,7 @@ Un nuevo objeto {{domxref("Blob")}} conteniendo la información especificada. ```js var unaParteDeArchivo = ['hey!']; // un array de un solo DOMString -var oMiBlob = new Blob(unaParteDeArchivo, {type : 'text/html'}); // el blob +var oMiBlob = new Blob(unaParteDeArchivo, { type: "text/html" }); // el blob ``` ## Especificaciones diff --git a/files/es/web/api/blob/index.md b/files/es/web/api/blob/index.md index 340d6f4b70a21a..84a7010052b0f5 100644 --- a/files/es/web/api/blob/index.md +++ b/files/es/web/api/blob/index.md @@ -38,7 +38,7 @@ El siguiente código: ```js var aFileParts = ['hey!']; -var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob +var oMyBlob = new Blob(aFileParts, { type: "text/html" }); // the blob ``` es equivalente a: @@ -47,7 +47,7 @@ es equivalente a: var oBuilder = new BlobBuilder(); var aFileParts = ['hey!']; oBuilder.append(aFileParts[0]); -var oMyBlob = oBuilder.getBlob('text/xml'); // the blob +var oMyBlob = oBuilder.getBlob("text/xml"); // the blob ``` > **Advertencia:** La interfaz {{ domxref("BlobBuilder") }} ofrece otra manera de crear `Blob`, pero se encuentra ahora obsoleta y no debería volverse a utilizar. @@ -58,7 +58,7 @@ El siguiente código: ```js var typedArray = GetTheTypedArraySomehow(); -var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here +var blob = new Blob([typedArray], { type: "application/octet-binary" }); // pass a useful mime type here var url = URL.createObjectURL(blob); // url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf // now you can use the url in any context that regular URLs can be used in, for example img.src, etc. @@ -70,8 +70,8 @@ La única manera de leer contenido de un Blob es utilizando un {{domxref("FileRe ```js var reader = new FileReader(); -reader.addEventListener("loadend", function() { - // reader.result contains the contents of blob as a typed array +reader.addEventListener("loadend", function () { + // reader.result contains the contents of blob as a typed array }); reader.readAsArrayBuffer(blob); ``` diff --git a/files/es/web/api/caches/index.md b/files/es/web/api/caches/index.md index ab14933e192557..38471aef5bc51a 100644 --- a/files/es/web/api/caches/index.md +++ b/files/es/web/api/caches/index.md @@ -23,22 +23,22 @@ Un objeto {{domxref("CacheStorage")}}. El siguiente ejemplo muestra la forma en la que utilizarías una cache en un contexto de [service worker](/es/docs/Web/API/Service_Worker_API) para guardar assets _offline_. ```js -this.addEventListener('install', function(event) { +this.addEventListener("install", function (event) { event.waitUntil( - caches.open('v1').then(function(cache) { + caches.open("v1").then(function (cache) { return cache.addAll( - '/sw-test/', - '/sw-test/index.html', - '/sw-test/style.css', - '/sw-test/app.js', - '/sw-test/image-list.js', - '/sw-test/star-wars-logo.jpg', - '/sw-test/gallery/', - '/sw-test/gallery/bountyHunters.jpg', - '/sw-test/gallery/myLittleVader.jpg', - '/sw-test/gallery/snowTroopers.jpg' + "/sw-test/", + "/sw-test/index.html", + "/sw-test/style.css", + "/sw-test/app.js", + "/sw-test/image-list.js", + "/sw-test/star-wars-logo.jpg", + "/sw-test/gallery/", + "/sw-test/gallery/bountyHunters.jpg", + "/sw-test/gallery/myLittleVader.jpg", + "/sw-test/gallery/snowTroopers.jpg", ); - }) + }), ); }); ``` diff --git a/files/es/web/api/cachestorage/index.md b/files/es/web/api/cachestorage/index.md index f4edb0575f3f01..64714303057b15 100644 --- a/files/es/web/api/cachestorage/index.md +++ b/files/es/web/api/cachestorage/index.md @@ -51,46 +51,50 @@ In the second code block, we wait for a {{domxref("FetchEvent")}} to fire. We co Finally, return whatever the custom response ended up being equal to, using {{domxref("FetchEvent.respondWith")}}. ```js -self.addEventListener('install', function(event) { +self.addEventListener("install", function (event) { event.waitUntil( - caches.open('v1').then(function(cache) { + caches.open("v1").then(function (cache) { return cache.addAll([ - '/sw-test/', - '/sw-test/index.html', - '/sw-test/style.css', - '/sw-test/app.js', - '/sw-test/image-list.js', - '/sw-test/star-wars-logo.jpg', - '/sw-test/gallery/bountyHunters.jpg', - '/sw-test/gallery/myLittleVader.jpg', - '/sw-test/gallery/snowTroopers.jpg' + "/sw-test/", + "/sw-test/index.html", + "/sw-test/style.css", + "/sw-test/app.js", + "/sw-test/image-list.js", + "/sw-test/star-wars-logo.jpg", + "/sw-test/gallery/bountyHunters.jpg", + "/sw-test/gallery/myLittleVader.jpg", + "/sw-test/gallery/snowTroopers.jpg", ]); - }) + }), ); }); -self.addEventListener('fetch', function(event) { - event.respondWith(caches.match(event.request).then(function(response) { - // caches.match() always resolves - // but in case of success response will have value - if (response !== undefined) { - return response; - } else { - return fetch(event.request).then(function (response) { - // response may be used only once - // we need to save clone to put one copy in cache - // and serve second one - let responseClone = response.clone(); - - caches.open('v1').then(function (cache) { - cache.put(event.request, responseClone); - }); +self.addEventListener("fetch", function (event) { + event.respondWith( + caches.match(event.request).then(function (response) { + // caches.match() always resolves + // but in case of success response will have value + if (response !== undefined) { return response; - }).catch(function () { - return caches.match('/sw-test/gallery/myLittleVader.jpg'); - }); - } - })); + } else { + return fetch(event.request) + .then(function (response) { + // response may be used only once + // we need to save clone to put one copy in cache + // and serve second one + let responseClone = response.clone(); + + caches.open("v1").then(function (cache) { + cache.put(event.request, responseClone); + }); + return response; + }) + .catch(function () { + return caches.match("/sw-test/gallery/myLittleVader.jpg"); + }); + } + }), + ); }); ``` @@ -99,58 +103,58 @@ This snippet shows how the API can be used outside of a service worker context, ```js // Try to get data from the cache, but fall back to fetching it live. async function getData() { - const cacheVersion = 1; - const cacheName = `myapp-${ cacheVersion }`; - const url = 'https://jsonplaceholder.typicode.com/todos/1'; - let cachedData = await getCachedData( cacheName, url ); + const cacheVersion = 1; + const cacheName = `myapp-${cacheVersion}`; + const url = "https://jsonplaceholder.typicode.com/todos/1"; + let cachedData = await getCachedData(cacheName, url); - if ( cachedData ) { - console.log( 'Retrieved cached data' ); - return cachedData; - } + if (cachedData) { + console.log("Retrieved cached data"); + return cachedData; + } - console.log( 'Fetching fresh data' ); + console.log("Fetching fresh data"); - const cacheStorage = await caches.open( cacheName ); - await cacheStorage.add( url ); - cachedData = await getCachedData( cacheName, url ); - await deleteOldCaches( cacheName ); + const cacheStorage = await caches.open(cacheName); + await cacheStorage.add(url); + cachedData = await getCachedData(cacheName, url); + await deleteOldCaches(cacheName); - return cachedData; + return cachedData; } // Get data from the cache. -async function getCachedData( cacheName, url ) { - const cacheStorage = await caches.open( cacheName ); - const cachedResponse = await cacheStorage.match( url ); +async function getCachedData(cacheName, url) { + const cacheStorage = await caches.open(cacheName); + const cachedResponse = await cacheStorage.match(url); - if ( ! cachedResponse || ! cachedResponse.ok ) { - return false; - } + if (!cachedResponse || !cachedResponse.ok) { + return false; + } - return await cachedResponse.json(); + return await cachedResponse.json(); } // Delete any old caches to respect user's disk space. -async function deleteOldCaches( currentCache ) { - const keys = await caches.keys(); +async function deleteOldCaches(currentCache) { + const keys = await caches.keys(); - for ( const key of keys ) { - const isOurCache = 'myapp-' === key.substr( 0, 6 ); + for (const key of keys) { + const isOurCache = "myapp-" === key.substr(0, 6); - if ( currentCache === key || ! isOurCache ) { - continue; - } + if (currentCache === key || !isOurCache) { + continue; + } - caches.delete( key ); - } + caches.delete(key); + } } try { - const data = await getData(); - console.log( { data } ); -} catch ( error ) { - console.error( { error } ); + const data = await getData(); + console.log({ data }); +} catch (error) { + console.error({ error }); } ``` diff --git a/files/es/web/api/cachestorage/open/index.md b/files/es/web/api/cachestorage/open/index.md index 7eaadf22f0948d..4b1918d325e735 100644 --- a/files/es/web/api/cachestorage/open/index.md +++ b/files/es/web/api/cachestorage/open/index.md @@ -31,7 +31,7 @@ Una {{jsxref("Promise")}} que se resuelve en el objeto {{domxref("Cache")}} soli ## Ejemplos -Este ejemplo es de MDN [ejemplo de *service worker* simple](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker) (ve el [*service worker* simple ejecutándose en vivo](https://bncb2v.csb.app/)). +Este ejemplo es de MDN [ejemplo de _service worker_ simple](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker) (ve el [_service worker_ simple ejecutándose en vivo](https://bncb2v.csb.app/)). Aquí esperamos a que se active un {{domxref("InstallEvent")}}, luego se ejecuta {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} para gestionar el proceso de instalación de la aplicación. Esto consiste en llamar a `CacheStorage.open()` para crear una nueva @@ -53,8 +53,8 @@ self.addEventListener("install", (event) => { "/gallery/bountyHunters.jpg", "/gallery/myLittleVader.jpg", "/gallery/snowTroopers.jpg", - ]) - ) + ]), + ), ); }); ``` @@ -69,6 +69,6 @@ self.addEventListener("install", (event) => { ## Véase también -- [Usar *Service Workers*](/es/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Usar _Service Workers_](/es/docs/Web/API/Service_Worker_API/Using_Service_Workers) - {{domxref("Cache")}} - {{domxref("caches")}} diff --git a/files/es/web/api/canvas_api/index.md b/files/es/web/api/canvas_api/index.md index 5d74f0cbc75f1c..3bdc45a392c71f 100644 --- a/files/es/web/api/canvas_api/index.md +++ b/files/es/web/api/canvas_api/index.md @@ -25,10 +25,10 @@ Esto es un trozo de código que usa el método {{domxref("CanvasRenderingContext ### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); -ctx.fillStyle = 'green'; +ctx.fillStyle = "green"; ctx.fillRect(10, 10, 100, 100); ``` @@ -42,15 +42,16 @@ Edita este código para ver tus cambios en tiempo real en este canvas: +ctx.fillRect(10, 10, 100, 100); ``` ```js hidden -var canvas = document.getElementById('canvas'); +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); -var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var edit = document.getElementById('edit'); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas() { @@ -58,17 +59,17 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener('click', function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener('click', function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); -textarea.addEventListener('input', drawCanvas); -window.addEventListener('load', drawCanvas); +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); ``` {{ EmbedLiveSample('Código_editable', 700, 360) }} diff --git a/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.md b/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.md index 2ef534795b842e..ac8d441fe832ee 100644 --- a/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.md +++ b/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.md @@ -13,14 +13,13 @@ Al combinar las capacidades del elemento [`video`](/En/HTML/Element/Video) intro El documento XHTML que se utiliza para representar este contenido se muestra a continuación. ```html - + @@ -39,11 +38,11 @@ El documento XHTML que se utiliza para representar este contenido se muestra a c
-
- - + +
@@ -53,9 +52,9 @@ Los puntos clave a tener en cuenta son: 1. Este documento establece dos elemento - `canvas` + `canvas` - , con los identificadores de `c1` y `c2` . Canvas `c1` se utiliza para mostrar la imagen actual del video original, mientras que `c2` se utiliza para mostrar el video después de realizar la manipulación con el efecto croma; `c2` se carga previamente con la imagen fija que se utilizará para sustituir el fondo verde en el video. + , con los identificadores de `c1` y `c2` . Canvas `c1` se utiliza para mostrar la imagen actual del video original, mientras que `c2` se utiliza para mostrar el video después de realizar la manipulación con el efecto croma; `c2` se carga previamente con la imagen fija que se utilizará para sustituir el fondo verde en el video. 2. El código JavaScript es importado de un script llamado `main.js` ; este script utiliza JavaScript 1.8 características, de modo que la versión se especifica en la línea 22 al importar la secuencia de comandos. 3. Cuando se carga el documento, se ejecuta el método `processor.doLoad()` de `main.js`. diff --git a/files/es/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/es/web/api/canvas_api/tutorial/advanced_animations/index.md index 1ac3ad89541af3..460e2944696bdf 100644 --- a/files/es/web/api/canvas_api/tutorial/advanced_animations/index.md +++ b/files/es/web/api/canvas_api/tutorial/advanced_animations/index.md @@ -19,21 +19,21 @@ Vamos a usar una bola para nuestro estudio de la animación, entonces primero di Como siempre, necesitamos un entorno para dibujar. Para dibujar la bola, creamos un contenido `ball` lo cual contiene propiedades y un método `draw()`. ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); var ball = { x: 100, y: 100, radius: 25, - color: 'blue', - draw: function() { + color: "blue", + draw: function () { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); - } + }, }; ball.draw(); @@ -46,8 +46,8 @@ Nada especial aquí; la bola es en realidad un circulo sencillo y se dibuja con Ya que tenemos una bola, estamos listos agregar una animación básica así como aprendimos en el [último capítulo](/es/docs/Web/API/Canvas_API/Tutorial/Basic_animations) de esta tutoría. De nuevo, {{domxref("window.requestAnimationFrame()")}} nos ayuda controlar la animación. La bola empieza moverse por agregar un vector de velocidad a la posición. Para cada fotograma, también {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} el canvas para quitar los circulos viejos de los fotogramas anteriores. ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); var raf; var ball = { @@ -56,29 +56,29 @@ var ball = { vx: 5, vy: 2, radius: 25, - color: 'blue', - draw: function() { + color: "blue", + draw: function () { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); - } + }, }; function draw() { - ctx.clearRect(0,0, canvas.width, canvas.height); + ctx.clearRect(0, 0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; raf = window.requestAnimationFrame(draw); } -canvas.addEventListener('mouseover', function(e) { +canvas.addEventListener("mouseover", function (e) { raf = window.requestAnimationFrame(draw); }); -canvas.addEventListener('mouseout', function(e) { +canvas.addEventListener("mouseout", function (e) { window.cancelAnimationFrame(raf); }); @@ -107,8 +107,8 @@ Veamos como se ve en acción hasta este punto. Dirige el ratón dentro del canva ``` ```js hidden -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); var raf; var ball = { @@ -117,39 +117,37 @@ var ball = { vx: 5, vy: 2, radius: 25, - color: 'blue', - draw: function() { + color: "blue", + draw: function () { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); - } + }, }; function draw() { - ctx.clearRect(0,0, canvas.width, canvas.height); + ctx.clearRect(0, 0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; - if (ball.y + ball.vy > canvas.height || - ball.y + ball.vy < 0) { + if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } - if (ball.x + ball.vx > canvas.width || - ball.x + ball.vx < 0) { + if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestAnimationFrame(draw); } -canvas.addEventListener('mouseover', function(e) { +canvas.addEventListener("mouseover", function (e) { raf = window.requestAnimationFrame(draw); }); -canvas.addEventListener('mouseout', function(e) { +canvas.addEventListener("mouseout", function (e) { window.cancelAnimationFrame(raf); }); @@ -169,8 +167,8 @@ Esto reduce el vector vertical de velocidad para cada fotograma para que la bola ``` ```js hidden -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); var raf; var ball = { @@ -179,41 +177,39 @@ var ball = { vx: 5, vy: 2, radius: 25, - color: 'blue', - draw: function() { + color: "blue", + draw: function () { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); - } + }, }; function draw() { - ctx.clearRect(0,0, canvas.width, canvas.height); + ctx.clearRect(0, 0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; - ball.vy *= .99; - ball.vy += .25; + ball.vy *= 0.99; + ball.vy += 0.25; - if (ball.y + ball.vy > canvas.height || - ball.y + ball.vy < 0) { + if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } - if (ball.x + ball.vx > canvas.width || - ball.x + ball.vx < 0) { + if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestAnimationFrame(draw); } -canvas.addEventListener('mouseover', function(e) { +canvas.addEventListener("mouseover", function (e) { raf = window.requestAnimationFrame(draw); }); -canvas.addEventListener('mouseout', function(e) { +canvas.addEventListener("mouseout", function (e) { window.cancelAnimationFrame(raf); }); @@ -221,8 +217,8 @@ ball.draw(); ``` ```js -ball.vy *= .99; -ball.vy += .25; +ball.vy *= 0.99; +ball.vy += 0.25; ``` {{EmbedLiveSample("Second_demo", "610", "310")}} @@ -236,8 +232,8 @@ Hasta este punto hemos limpiado los fotogramas anteriores con el método {{domxr ``` ```js hidden -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); var raf; var ball = { @@ -246,42 +242,40 @@ var ball = { vx: 5, vy: 2, radius: 25, - color: 'blue', - draw: function() { + color: "blue", + draw: function () { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); - } + }, }; function draw() { - ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; + ctx.fillStyle = "rgba(255, 255, 255, 0.3)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; - ball.vy *= .99; - ball.vy += .25; + ball.vy *= 0.99; + ball.vy += 0.25; - if (ball.y + ball.vy > canvas.height || - ball.y + ball.vy < 0) { + if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } - if (ball.x + ball.vx > canvas.width || - ball.x + ball.vx < 0) { + if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestAnimationFrame(draw); } -canvas.addEventListener('mouseover', function(e) { +canvas.addEventListener("mouseover", function (e) { raf = window.requestAnimationFrame(draw); }); -canvas.addEventListener('mouseout', function(e) { +canvas.addEventListener("mouseout", function (e) { window.cancelAnimationFrame(raf); }); @@ -289,7 +283,7 @@ ball.draw(); ``` ```js -ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; +ctx.fillStyle = "rgba(255, 255, 255, 0.3)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ``` @@ -304,8 +298,8 @@ Para controlar la bola, podemos hacerla seguir nuestro ratón usando el evento [ ``` ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); var raf; var running = false; @@ -315,19 +309,19 @@ var ball = { vx: 5, vy: 1, radius: 25, - color: 'blue', - draw: function() { + color: "blue", + draw: function () { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); - } + }, }; function clear() { - ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; - ctx.fillRect(0,0,canvas.width,canvas.height); + ctx.fillStyle = "rgba(255, 255, 255, 0.3)"; + ctx.fillRect(0, 0, canvas.width, canvas.height); } function draw() { @@ -346,7 +340,7 @@ function draw() { raf = window.requestAnimationFrame(draw); } -canvas.addEventListener('mousemove', function(e) { +canvas.addEventListener("mousemove", function (e) { if (!running) { clear(); ball.x = e.clientX; @@ -355,14 +349,14 @@ canvas.addEventListener('mousemove', function(e) { } }); -canvas.addEventListener('click', function(e) { +canvas.addEventListener("click", function (e) { if (!running) { raf = window.requestAnimationFrame(draw); running = true; } }); -canvas.addEventListener('mouseout', function(e) { +canvas.addEventListener("mouseout", function (e) { window.cancelAnimationFrame(raf); running = false; }); diff --git a/files/es/web/api/canvas_api/tutorial/basic_animations/index.md b/files/es/web/api/canvas_api/tutorial/basic_animations/index.md index 8a3b2a275dbba9..3ca189d24c76c3 100644 --- a/files/es/web/api/canvas_api/tutorial/basic_animations/index.md +++ b/files/es/web/api/canvas_api/tutorial/basic_animations/index.md @@ -15,13 +15,13 @@ Probablemente la mayor limitación es que una vez que se dibuja una forma, se ma Estos son los pasos que necesitas para dibujar un cuadro: 1. **Limpiar el canvas** - A menos que las formas que vas a dibujar llenen el canvas completo (por ejemplo, una imagen de fondo), debes borrar cualquier forma que haya dibujado previamente. La forma más fácil de hacerlo es usar el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}. + A menos que las formas que vas a dibujar llenen el canvas completo (por ejemplo, una imagen de fondo), debes borrar cualquier forma que haya dibujado previamente. La forma más fácil de hacerlo es usar el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}. 2. **Guardar el estado del canvas** - Si estás cambiando alguna configuración (como estilos, transformaciones, etc.) que afecte el estado del canvas y deseas asegurarte de que se utiliza el estado original cada vez que se dibuja una figura, debes guardar ese estado original. + Si estás cambiando alguna configuración (como estilos, transformaciones, etc.) que afecte el estado del canvas y deseas asegurarte de que se utiliza el estado original cada vez que se dibuja una figura, debes guardar ese estado original. 3. **Dibujar formas animadas** - El paso en el que realizas el renderizado del cuadro actual. + El paso en el que realizas el renderizado del cuadro actual. 4. **Restaurar el estado del canvas** - Si has guardado el estado, restáuralo antes de dibujar un nuevo cuadro. + Si has guardado el estado, restáuralo antes de dibujar un nuevo cuadro. ## Controlando una animación @@ -52,45 +52,51 @@ Este ejemplo animado es un pequeño modelo de nuestro sistema solar. var sun = new Image(); var moon = new Image(); var earth = new Image(); -function init(){ - sun.src = 'canvas_sun.png'; - moon.src = 'canvas_moon.png'; - earth.src = 'canvas_earth.png'; +function init() { + sun.src = "canvas_sun.png"; + moon.src = "canvas_moon.png"; + earth.src = "canvas_earth.png"; window.requestAnimationFrame(draw); } function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + var ctx = document.getElementById("canvas").getContext("2d"); - ctx.globalCompositeOperation = 'destination-over'; - ctx.clearRect(0,0,300,300); // limpiar canvas + ctx.globalCompositeOperation = "destination-over"; + ctx.clearRect(0, 0, 300, 300); // limpiar canvas - ctx.fillStyle = 'rgba(0,0,0,0.4)'; - ctx.strokeStyle = 'rgba(0,153,255,0.4)'; + ctx.fillStyle = "rgba(0,0,0,0.4)"; + ctx.strokeStyle = "rgba(0,153,255,0.4)"; ctx.save(); - ctx.translate(150,150); + ctx.translate(150, 150); // La tierra var time = new Date(); - ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() ); - ctx.translate(105,0); - ctx.fillRect(0,-12,50,24); // Sombra - ctx.drawImage(earth,-12,-12); + ctx.rotate( + ((2 * Math.PI) / 60) * time.getSeconds() + + ((2 * Math.PI) / 60000) * time.getMilliseconds(), + ); + ctx.translate(105, 0); + ctx.fillRect(0, -12, 50, 24); // Sombra + ctx.drawImage(earth, -12, -12); // La luna ctx.save(); - ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() ); - ctx.translate(0,28.5); - ctx.drawImage(moon,-3.5,-3.5); + ctx.rotate( + ((2 * Math.PI) / 6) * time.getSeconds() + + ((2 * Math.PI) / 6000) * time.getMilliseconds(), + ); + ctx.translate(0, 28.5); + ctx.drawImage(moon, -3.5, -3.5); ctx.restore(); ctx.restore(); ctx.beginPath(); - ctx.arc(150,150,105,0,Math.PI*2,false); // Órbita terrestre + ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Órbita terrestre ctx.stroke(); - ctx.drawImage(sun,0,0,300,300); + ctx.drawImage(sun, 0, 0, 300, 300); window.requestAnimationFrame(draw); } @@ -109,14 +115,14 @@ init(); Este ejemplo dibuja una reloj animado, mostrando la hora actual. ```js -function clock(){ +function clock() { var now = new Date(); - var ctx = document.getElementById('canvas').getContext('2d'); + var ctx = document.getElementById("canvas").getContext("2d"); ctx.save(); - ctx.clearRect(0,0,150,150); - ctx.translate(75,75); - ctx.scale(0.4,0.4); - ctx.rotate(-Math.PI/2); + ctx.clearRect(0, 0, 150, 150); + ctx.translate(75, 75); + ctx.scale(0.4, 0.4); + ctx.rotate(-Math.PI / 2); ctx.strokeStyle = "black"; ctx.fillStyle = "white"; ctx.lineWidth = 8; @@ -124,11 +130,11 @@ function clock(){ // Aguja de la hora ctx.save(); - for (var i=0;i<12;i++){ + for (var i = 0; i < 12; i++) { ctx.beginPath(); - ctx.rotate(Math.PI/6); - ctx.moveTo(100,0); - ctx.lineTo(120,0); + ctx.rotate(Math.PI / 6); + ctx.moveTo(100, 0); + ctx.lineTo(120, 0); ctx.stroke(); } ctx.restore(); @@ -136,69 +142,71 @@ function clock(){ // Aguja del minuto ctx.save(); ctx.lineWidth = 5; - for (i=0;i<60;i++){ - if (i%5!=0) { + for (i = 0; i < 60; i++) { + if (i % 5 != 0) { ctx.beginPath(); - ctx.moveTo(117,0); - ctx.lineTo(120,0); + ctx.moveTo(117, 0); + ctx.lineTo(120, 0); ctx.stroke(); } - ctx.rotate(Math.PI/30); + ctx.rotate(Math.PI / 30); } ctx.restore(); var sec = now.getSeconds(); var min = now.getMinutes(); - var hr = now.getHours(); - hr = hr>=12 ? hr-12 : hr; + var hr = now.getHours(); + hr = hr >= 12 ? hr - 12 : hr; ctx.fillStyle = "black"; // Escribimos la hora ctx.save(); - ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec ) + ctx.rotate( + hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec, + ); ctx.lineWidth = 14; ctx.beginPath(); - ctx.moveTo(-20,0); - ctx.lineTo(80,0); + ctx.moveTo(-20, 0); + ctx.lineTo(80, 0); ctx.stroke(); ctx.restore(); // escribimos los minutos ctx.save(); - ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec ) + ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec); ctx.lineWidth = 10; ctx.beginPath(); - ctx.moveTo(-28,0); - ctx.lineTo(112,0); + ctx.moveTo(-28, 0); + ctx.lineTo(112, 0); ctx.stroke(); ctx.restore(); // escribimos los segundos ctx.save(); - ctx.rotate(sec * Math.PI/30); + ctx.rotate((sec * Math.PI) / 30); ctx.strokeStyle = "#D40000"; ctx.fillStyle = "#D40000"; ctx.lineWidth = 6; ctx.beginPath(); - ctx.moveTo(-30,0); - ctx.lineTo(83,0); + ctx.moveTo(-30, 0); + ctx.lineTo(83, 0); ctx.stroke(); ctx.beginPath(); - ctx.arc(0,0,10,0,Math.PI*2,true); + ctx.arc(0, 0, 10, 0, Math.PI * 2, true); ctx.fill(); ctx.beginPath(); - ctx.arc(95,0,10,0,Math.PI*2,true); + ctx.arc(95, 0, 10, 0, Math.PI * 2, true); ctx.stroke(); ctx.fillStyle = "rgba(0,0,0,0)"; - ctx.arc(0,0,3,0,Math.PI*2,true); + ctx.arc(0, 0, 3, 0, Math.PI * 2, true); ctx.fill(); ctx.restore(); ctx.beginPath(); ctx.lineWidth = 14; - ctx.strokeStyle = '#325FA2'; - ctx.arc(0,0,142,0,Math.PI*2,true); + ctx.strokeStyle = "#325FA2"; + ctx.arc(0, 0, 142, 0, Math.PI * 2, true); ctx.stroke(); ctx.restore(); @@ -225,7 +233,7 @@ var img = new Image(); // Variables de usuario - personalizar estas para cambiar la imagen cuando inicie el desplazamiento // dirección y velocidad. -img.src = 'capitan_meadows_yosemite_national_park.jpg'; +img.src = "capitan_meadows_yosemite_national_park.jpg"; var CanvasXSize = 800; var CanvasYSize = 200; var speed = 30; //más bajo es más rápido @@ -242,68 +250,68 @@ var clearX; var clearY; var ctx; -img.onload = function() { - imgW = img.width * scale; - imgH = img.height * scale; +img.onload = function () { + imgW = img.width * scale; + imgH = img.height * scale; - if (imgW > CanvasXSize) { - // imagen más grande que canvas - x = CanvasXSize - imgW; - } - if (imgW > CanvasXSize) { - // ancho de imagen más grande que canvas - clearX = imgW; - } else { - clearX = CanvasXSize; - } - if (imgH > CanvasYSize) { - // altura de la imagen más grande que canvas - clearY = imgH; - } else { - clearY = CanvasYSize; - } + if (imgW > CanvasXSize) { + // imagen más grande que canvas + x = CanvasXSize - imgW; + } + if (imgW > CanvasXSize) { + // ancho de imagen más grande que canvas + clearX = imgW; + } else { + clearX = CanvasXSize; + } + if (imgH > CanvasYSize) { + // altura de la imagen más grande que canvas + clearY = imgH; + } else { + clearY = CanvasYSize; + } - // obtener contexto de canvas - ctx = document.getElementById('canvas').getContext('2d'); + // obtener contexto de canvas + ctx = document.getElementById("canvas").getContext("2d"); - // establecer frecuencia de actualización - return setInterval(draw, speed); -} + // establecer frecuencia de actualización + return setInterval(draw, speed); +}; function draw() { - ctx.clearRect(0, 0, clearX, clearY); // clear the canvas - - // si la imagen es <= tamaño de Canvas - if (imgW <= CanvasXSize) { - // reiniciar, comenzar desde el principio - if (x > CanvasXSize) { - x = -imgW + x; - } - // dibujar image1 adicional - if (x > 0) { - ctx.drawImage(img, -imgW + x, y, imgW, imgH); - } - // dibujar image2 adicional - if (x - imgW > 0) { - ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH); - } + ctx.clearRect(0, 0, clearX, clearY); // clear the canvas + + // si la imagen es <= tamaño de Canvas + if (imgW <= CanvasXSize) { + // reiniciar, comenzar desde el principio + if (x > CanvasXSize) { + x = -imgW + x; + } + // dibujar image1 adicional + if (x > 0) { + ctx.drawImage(img, -imgW + x, y, imgW, imgH); + } + // dibujar image2 adicional + if (x - imgW > 0) { + ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH); } + } - // la imagen es > tamaño de Canvas - else { - // reiniciar, comenzar desde el principio - if (x > (CanvasXSize)) { - x = CanvasXSize - imgW; - } - // dibujar image adicional - if (x > (CanvasXSize-imgW)) { - ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); - } + // la imagen es > tamaño de Canvas + else { + // reiniciar, comenzar desde el principio + if (x > CanvasXSize) { + x = CanvasXSize - imgW; + } + // dibujar image adicional + if (x > CanvasXSize - imgW) { + ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); } - // dibujar imagen - ctx.drawImage(img, x, y,imgW, imgH); - // cantidad para moverse - x += dx; + } + // dibujar imagen + ctx.drawImage(img, x, y, imgW, imgH); + // cantidad para moverse + x += dx; } ``` diff --git a/files/es/web/api/canvas_api/tutorial/basic_usage/index.md b/files/es/web/api/canvas_api/tutorial/basic_usage/index.md index 0c380e79c65221..3f20f4e7820945 100644 --- a/files/es/web/api/canvas_api/tutorial/basic_usage/index.md +++ b/files/es/web/api/canvas_api/tutorial/basic_usage/index.md @@ -36,7 +36,7 @@ Por ejemplo, podremos proporcionar un texto descriptivo del contenido del canvas - + ``` @@ -55,8 +55,8 @@ Si el contenido alternativo no se necesita, un simple ` Canvas tutorial @@ -114,25 +116,25 @@ Para comenzar, daremos un vistazo a un simple ejemplo que dibuja dos rectangulos ```html - - - - - - + + + + + ``` diff --git a/files/es/web/api/canvas_api/tutorial/compositing/example/index.md b/files/es/web/api/canvas_api/tutorial/compositing/example/index.md index 5e6ea39c4f3551..eac53f9f787082 100644 --- a/files/es/web/api/canvas_api/tutorial/compositing/example/index.md +++ b/files/es/web/api/canvas_api/tutorial/compositing/example/index.md @@ -17,40 +17,62 @@ Este código establece los valores globales utilizados por el resto del programa ```js var canvas1 = document.createElement("canvas"); var canvas2 = document.createElement("canvas"); -var gco = [ 'source-over','source-in','source-out','source-atop', - 'destination-over','destination-in','destination-out','destination-atop', - 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', - 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', - 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' - ].reverse(); +var gco = [ + "source-over", + "source-in", + "source-out", + "source-atop", + "destination-over", + "destination-in", + "destination-out", + "destination-atop", + "lighter", + "copy", + "xor", + "multiply", + "screen", + "overlay", + "darken", + "lighten", + "color-dodge", + "color-burn", + "hard-light", + "soft-light", + "difference", + "exclusion", + "hue", + "saturation", + "color", + "luminosity", +].reverse(); var gcoText = [ -'Esta es la configuración predeterminada y dibuja nuevas formas sobre el contenido del canvas existente.', -'La nueva forma se dibuja solo donde la nueva forma y el canvas de destino se superponen. Todo lo demás se hace transparente.', -'La nueva forma se dibuja donde no se superpone al contenido del canvas existente.', -'La nueva forma solo se dibuja donde se solapa con el contenido del canvas existente.', -'Se dibujan nuevas formas detrás del contenido del canvas existente', -'El contenido del canvas existente se conserva donde la nueva forma y el contenido del canvas existente se superponen. Todo lo demás se hace transparente.', -'El contenido existente se mantiene donde no se superpone a la nueva forma.', -'El canvas existente solo se conserva donde se solapa con la nueva forma. La nueva forma se dibuja detrás del contenido del canvas.', -'Donde ambas formas se superponen, el color se determina agregando valores de color.', -'Solo se muestra la nueva forma.', -'Las formas se hacen transparentes donde ambas se superponen y se dibujan de manera normal en cualquier otro lugar.', -'Los píxeles de la capa superior se multiplican con el píxel correspondiente de la capa inferior. El resultado es una imagen más oscura. ', -'Los píxeles están invertidos, multiplicados e invertidos nuevamente. Una imagen más clara es el resultado (opuesto a multiplicar).', -'Una combinación de multiplicar y pantalla. Las partes oscuras en la capa base se oscurecen y las partes claras se vuelven más claras.', -'Conserva los píxeles más oscuros de ambas capas.', -'Conserva los píxeles más claros de ambas capas.', -'Divide la capa inferior por la capa superior invertida.', -'Divide la capa inferior invertida por la capa superior, y luego invierte el resultado.', -'Una combinación de multiplicar y pantalla como superposición, pero con la parte superior y la capa inferior intercambiado.', -'Una versión más suave de la luz dura. Negro puro o blanco no da como resultado negro o blanco puro.', -'Resta la capa inferior de la capa superior o viceversa para obtener siempre un valor positivo.', -'Al igual que la diferencia, pero con menor contraste.', -'Conserva la luma y el croma de la capa inferior, mientras adopta el tono de la capa superior.', -'Conserva la luma y el tono de la capa inferior, mientras adopta el croma de la capa superior.', -'Conserva la luma de la capa inferior, mientras adopta el matiz y el croma de la capa superior.', -'Conserva el tono y el croma de la capa inferior, mientras adopta la luma de la capa superior.' - ].reverse(); + "Esta es la configuración predeterminada y dibuja nuevas formas sobre el contenido del canvas existente.", + "La nueva forma se dibuja solo donde la nueva forma y el canvas de destino se superponen. Todo lo demás se hace transparente.", + "La nueva forma se dibuja donde no se superpone al contenido del canvas existente.", + "La nueva forma solo se dibuja donde se solapa con el contenido del canvas existente.", + "Se dibujan nuevas formas detrás del contenido del canvas existente", + "El contenido del canvas existente se conserva donde la nueva forma y el contenido del canvas existente se superponen. Todo lo demás se hace transparente.", + "El contenido existente se mantiene donde no se superpone a la nueva forma.", + "El canvas existente solo se conserva donde se solapa con la nueva forma. La nueva forma se dibuja detrás del contenido del canvas.", + "Donde ambas formas se superponen, el color se determina agregando valores de color.", + "Solo se muestra la nueva forma.", + "Las formas se hacen transparentes donde ambas se superponen y se dibujan de manera normal en cualquier otro lugar.", + "Los píxeles de la capa superior se multiplican con el píxel correspondiente de la capa inferior. El resultado es una imagen más oscura. ", + "Los píxeles están invertidos, multiplicados e invertidos nuevamente. Una imagen más clara es el resultado (opuesto a multiplicar).", + "Una combinación de multiplicar y pantalla. Las partes oscuras en la capa base se oscurecen y las partes claras se vuelven más claras.", + "Conserva los píxeles más oscuros de ambas capas.", + "Conserva los píxeles más claros de ambas capas.", + "Divide la capa inferior por la capa superior invertida.", + "Divide la capa inferior invertida por la capa superior, y luego invierte el resultado.", + "Una combinación de multiplicar y pantalla como superposición, pero con la parte superior y la capa inferior intercambiado.", + "Una versión más suave de la luz dura. Negro puro o blanco no da como resultado negro o blanco puro.", + "Resta la capa inferior de la capa superior o viceversa para obtener siempre un valor positivo.", + "Al igual que la diferencia, pero con menor contraste.", + "Conserva la luma y el croma de la capa inferior, mientras adopta el tono de la capa superior.", + "Conserva la luma y el tono de la capa inferior, mientras adopta el croma de la capa superior.", + "Conserva la luma de la capa inferior, mientras adopta el matiz y el croma de la capa superior.", + "Conserva el tono y el croma de la capa inferior, mientras adopta la luma de la capa superior.", +].reverse(); var width = 320; var height = 340; ``` @@ -60,22 +82,22 @@ var height = 340; Cuando se carga la página, este código se ejecuta para configurar y ejecutar el ejemplo: ```js -window.onload = function() { - // lum en sRGB - var lum = { - r: 0.33, - g: 0.33, - b: 0.33 - }; - // redimensionar canvas - canvas1.width = width; - canvas1.height = height; - canvas2.width = width; - canvas2.height = height; - lightMix() - colorSphere(); - runComposite(); - return; +window.onload = function () { + // lum en sRGB + var lum = { + r: 0.33, + g: 0.33, + b: 0.33, + }; + // redimensionar canvas + canvas1.width = width; + canvas1.height = height; + canvas2.width = width; + canvas2.height = height; + lightMix(); + colorSphere(); + runComposite(); + return; }; ``` @@ -83,75 +105,75 @@ Y este código, `runComposite()`, maneja la mayor parte del trabajo, dependiendo ```js function createCanvas() { - var canvas = document.createElement("canvas"); - canvas.style.background = "url("+op_8x8.data+")"; - canvas.style.border = "1px solid #000"; - canvas.style.margin = "5px"; - canvas.width = width/2; - canvas.height = height/2; - return canvas; + var canvas = document.createElement("canvas"); + canvas.style.background = "url(" + op_8x8.data + ")"; + canvas.style.border = "1px solid #000"; + canvas.style.margin = "5px"; + canvas.width = width / 2; + canvas.height = height / 2; + return canvas; } function runComposite() { - var dl = document.createElement("dl"); - document.body.appendChild(dl); - while(gco.length) { - var pop = gco.pop(); - var dt = document.createElement("dt"); - dt.textContent = pop; - dl.appendChild(dt); - var dd = document.createElement("dd"); - var p = document.createElement("p"); - p.textContent = gcoText.pop(); - dd.appendChild(p); + var dl = document.createElement("dl"); + document.body.appendChild(dl); + while (gco.length) { + var pop = gco.pop(); + var dt = document.createElement("dt"); + dt.textContent = pop; + dl.appendChild(dt); + var dd = document.createElement("dd"); + var p = document.createElement("p"); + p.textContent = gcoText.pop(); + dd.appendChild(p); - var canvasToDrawOn = createCanvas(); - var canvasToDrawFrom = createCanvas(); - var canvasToDrawResult = createCanvas(); + var canvasToDrawOn = createCanvas(); + var canvasToDrawFrom = createCanvas(); + var canvasToDrawResult = createCanvas(); - var ctx = canvasToDrawResult.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas1, 0, 0, width/2, height/2); - ctx.globalCompositeOperation = pop; - ctx.drawImage(canvas2, 0, 0, width/2, height/2); - ctx.globalCompositeOperation = "source-over"; - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText(pop, 5, height/2 - 5); - ctx.restore(); + var ctx = canvasToDrawResult.getContext("2d"); + ctx.clearRect(0, 0, width, height); + ctx.save(); + ctx.drawImage(canvas1, 0, 0, width / 2, height / 2); + ctx.globalCompositeOperation = pop; + ctx.drawImage(canvas2, 0, 0, width / 2, height / 2); + ctx.globalCompositeOperation = "source-over"; + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height / 2 - 20, width / 2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText(pop, 5, height / 2 - 5); + ctx.restore(); - var ctx = canvasToDrawOn.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas1, 0, 0, width/2, height/2); - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText('existing content', 5, height/2 - 5); - ctx.restore(); + var ctx = canvasToDrawOn.getContext("2d"); + ctx.clearRect(0, 0, width, height); + ctx.save(); + ctx.drawImage(canvas1, 0, 0, width / 2, height / 2); + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height / 2 - 20, width / 2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText("existing content", 5, height / 2 - 5); + ctx.restore(); - var ctx = canvasToDrawFrom.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas2, 0, 0, width/2, height/2); - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText('new content', 5, height/2 - 5); - ctx.restore(); + var ctx = canvasToDrawFrom.getContext("2d"); + ctx.clearRect(0, 0, width, height); + ctx.save(); + ctx.drawImage(canvas2, 0, 0, width / 2, height / 2); + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height / 2 - 20, width / 2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText("new content", 5, height / 2 - 5); + ctx.restore(); - dd.appendChild(canvasToDrawOn); - dd.appendChild(canvasToDrawFrom); - dd.appendChild(canvasToDrawResult); + dd.appendChild(canvasToDrawOn); + dd.appendChild(canvasToDrawFrom); + dd.appendChild(canvasToDrawResult); - dl.appendChild(dd); - } -}; + dl.appendChild(dd); + } +} ``` ### Funciones de utilidad @@ -159,60 +181,68 @@ function runComposite() { El programa se basa en una serie de funciones de utilidad. ```js -var lightMix = function() { - var ctx = canvas2.getContext("2d"); - ctx.save(); - ctx.globalCompositeOperation = "lighter"; - ctx.beginPath(); - ctx.fillStyle = "rgba(255,0,0,1)"; - ctx.arc(100, 200, 100, Math.PI*2, 0, false); - ctx.fill() - ctx.beginPath(); - ctx.fillStyle = "rgba(0,0,255,1)"; - ctx.arc(220, 200, 100, Math.PI*2, 0, false); - ctx.fill() - ctx.beginPath(); - ctx.fillStyle = "rgba(0,255,0,1)"; - ctx.arc(160, 100, 100, Math.PI*2, 0, false); - ctx.fill(); - ctx.restore(); - ctx.beginPath(); - ctx.fillStyle = "#f00"; - ctx.fillRect(0,0,30,30) - ctx.fill(); +var lightMix = function () { + var ctx = canvas2.getContext("2d"); + ctx.save(); + ctx.globalCompositeOperation = "lighter"; + ctx.beginPath(); + ctx.fillStyle = "rgba(255,0,0,1)"; + ctx.arc(100, 200, 100, Math.PI * 2, 0, false); + ctx.fill(); + ctx.beginPath(); + ctx.fillStyle = "rgba(0,0,255,1)"; + ctx.arc(220, 200, 100, Math.PI * 2, 0, false); + ctx.fill(); + ctx.beginPath(); + ctx.fillStyle = "rgba(0,255,0,1)"; + ctx.arc(160, 100, 100, Math.PI * 2, 0, false); + ctx.fill(); + ctx.restore(); + ctx.beginPath(); + ctx.fillStyle = "#f00"; + ctx.fillRect(0, 0, 30, 30); + ctx.fill(); }; ``` ```js -var colorSphere = function(element) { - var ctx = canvas1.getContext("2d"); - var width = 360; - var halfWidth = width / 2; - var rotate = (1 / 360) * Math.PI * 2; // por grado - var offset = 0; // scrollbar offset - var oleft = -20; - var otop = -20; - for (var n = 0; n <= 359; n ++) { - var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth); - var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); - gradient.addColorStop(0, "rgba(0,0,0,0)"); - gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)"); - gradient.addColorStop(1, "rgba(255,255,255,1)"); - ctx.beginPath(); - ctx.moveTo(oleft + halfWidth, otop); - ctx.lineTo(oleft + halfWidth, otop + halfWidth); - ctx.lineTo(oleft + halfWidth + 6, otop); - ctx.fillStyle = gradient; - ctx.fill(); - ctx.translate(oleft + halfWidth, otop + halfWidth); - ctx.rotate(rotate); - ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); - } +var colorSphere = function (element) { + var ctx = canvas1.getContext("2d"); + var width = 360; + var halfWidth = width / 2; + var rotate = (1 / 360) * Math.PI * 2; // por grado + var offset = 0; // scrollbar offset + var oleft = -20; + var otop = -20; + for (var n = 0; n <= 359; n++) { + var gradient = ctx.createLinearGradient( + oleft + halfWidth, + otop, + oleft + halfWidth, + otop + halfWidth, + ); + var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); + gradient.addColorStop(0, "rgba(0,0,0,0)"); + gradient.addColorStop( + 0.7, + "rgba(" + color.R + "," + color.G + "," + color.B + ",1)", + ); + gradient.addColorStop(1, "rgba(255,255,255,1)"); ctx.beginPath(); - ctx.fillStyle = "#00f"; - ctx.fillRect(15,15,30,30) + ctx.moveTo(oleft + halfWidth, otop); + ctx.lineTo(oleft + halfWidth, otop + halfWidth); + ctx.lineTo(oleft + halfWidth + 6, otop); + ctx.fillStyle = gradient; ctx.fill(); - return ctx.canvas; + ctx.translate(oleft + halfWidth, otop + halfWidth); + ctx.rotate(rotate); + ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); + } + ctx.beginPath(); + ctx.fillStyle = "#00f"; + ctx.fillRect(15, 15, 30, 30); + ctx.fill(); + return ctx.canvas; }; ``` @@ -220,76 +250,78 @@ var colorSphere = function(element) { // HSV (1978) = H: Hue / S: Saturation / V: Value Color = {}; Color.HSV_RGB = function (o) { - var H = o.H / 360, - S = o.S / 100, - V = o.V / 100, - R, G, B; - var A, B, C, D; - if (S == 0) { - R = G = B = Math.round(V * 255); - } else { - if (H >= 1) H = 0; - H = 6 * H; - D = H - Math.floor(H); - A = Math.round(255 * V * (1 - S)); - B = Math.round(255 * V * (1 - (S * D))); - C = Math.round(255 * V * (1 - (S * (1 - D)))); - V = Math.round(255 * V); - switch (Math.floor(H)) { - case 0: - R = V; - G = C; - B = A; - break; - case 1: - R = B; - G = V; - B = A; - break; - case 2: - R = A; - G = V; - B = C; - break; - case 3: - R = A; - G = B; - B = V; - break; - case 4: - R = C; - G = A; - B = V; - break; - case 5: - R = V; - G = A; - B = B; - break; - } + var H = o.H / 360, + S = o.S / 100, + V = o.V / 100, + R, + G, + B; + var A, B, C, D; + if (S == 0) { + R = G = B = Math.round(V * 255); + } else { + if (H >= 1) H = 0; + H = 6 * H; + D = H - Math.floor(H); + A = Math.round(255 * V * (1 - S)); + B = Math.round(255 * V * (1 - S * D)); + C = Math.round(255 * V * (1 - S * (1 - D))); + V = Math.round(255 * V); + switch (Math.floor(H)) { + case 0: + R = V; + G = C; + B = A; + break; + case 1: + R = B; + G = V; + B = A; + break; + case 2: + R = A; + G = V; + B = C; + break; + case 3: + R = A; + G = B; + B = V; + break; + case 4: + R = C; + G = A; + B = V; + break; + case 5: + R = V; + G = A; + B = B; + break; } - return { - R: R, - G: G, - B: B - }; + } + return { + R: R, + G: G, + B: B, + }; }; var createInterlace = function (size, color1, color2) { - var proto = document.createElement("canvas").getContext("2d"); - proto.canvas.width = size * 2; - proto.canvas.height = size * 2; - proto.fillStyle = color1; // top-left - proto.fillRect(0, 0, size, size); - proto.fillStyle = color2; // top-right - proto.fillRect(size, 0, size, size); - proto.fillStyle = color2; // bottom-left - proto.fillRect(0, size, size, size); - proto.fillStyle = color1; // bottom-right - proto.fillRect(size, size, size, size); - var pattern = proto.createPattern(proto.canvas, "repeat"); - pattern.data = proto.canvas.toDataURL(); - return pattern; + var proto = document.createElement("canvas").getContext("2d"); + proto.canvas.width = size * 2; + proto.canvas.height = size * 2; + proto.fillStyle = color1; // top-left + proto.fillRect(0, 0, size, size); + proto.fillStyle = color2; // top-right + proto.fillRect(size, 0, size, size); + proto.fillStyle = color2; // bottom-left + proto.fillRect(0, size, size, size); + proto.fillStyle = color1; // bottom-right + proto.fillRect(size, size, size, size); + var pattern = proto.createPattern(proto.canvas, "repeat"); + pattern.data = proto.canvas.toDataURL(); + return pattern; }; var op_8x8 = createInterlace(8, "#FFF", "#eee"); diff --git a/files/es/web/api/canvas_api/tutorial/compositing/index.md b/files/es/web/api/canvas_api/tutorial/compositing/index.md index d55a72fdf4c2d0..da646563ab32b8 100644 --- a/files/es/web/api/canvas_api/tutorial/compositing/index.md +++ b/files/es/web/api/canvas_api/tutorial/compositing/index.md @@ -16,7 +16,301 @@ No solo podemos dibujar formas nuevas detrás de las ya existentes sino que las Vea [ejemplos de composición](/es/docs/Web/API/Canvas_API/Tutorial/Compositing/Example) para el código de los siguientes ejemplos. -{{EmbedLiveSample("Ejemplo_de_composición", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}} +```js hidden +const canvas1 = document.createElement("canvas"); +const canvas2 = document.createElement("canvas"); +const gco = [ + "source-over", + "source-in", + "source-out", + "source-atop", + "destination-over", + "destination-in", + "destination-out", + "destination-atop", + "lighter", + "copy", + "xor", + "multiply", + "screen", + "overlay", + "darken", + "lighten", + "color-dodge", + "color-burn", + "hard-light", + "soft-light", + "difference", + "exclusion", + "hue", + "saturation", + "color", + "luminosity", +].reverse(); +const gcoText = [ + "This is the default setting and draws new shapes on top of the existing canvas content.", + "The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent.", + "The new shape is drawn where it doesn't overlap the existing canvas content.", + "The new shape is only drawn where it overlaps the existing canvas content.", + "New shapes are drawn behind the existing canvas content.", + "The existing canvas content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent.", + "The existing content is kept where it doesn't overlap the new shape.", + "The existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.", + "Where both shapes overlap the color is determined by adding color values.", + "Only the new shape is shown.", + "Shapes are made transparent where both overlap and drawn normal everywhere else.", + "The pixels of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result.", + "The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply)", + "A combination of multiply and screen. Dark parts on the base layer become darker, and light parts become lighter.", + "Retains the darkest pixels of both layers.", + "Retains the lightest pixels of both layers.", + "Divides the bottom layer by the inverted top layer.", + "Divides the inverted bottom layer by the top layer, and then inverts the result.", + "A combination of multiply and screen like overlay, but with top and bottom layer swapped.", + "A softer version of hard-light. Pure black or white does not result in pure black or white.", + "Subtracts the bottom layer from the top layer or the other way round to always get a positive value.", + "Like difference, but with lower contrast.", + "Preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.", + "Preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.", + "Preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.", + "Preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.", +].reverse(); +const width = 320; +const height = 340; +``` + +```js hidden +window.onload = () => { + // lum in sRGB + const lum = { + r: 0.33, + g: 0.33, + b: 0.33, + }; + // resize canvas + canvas1.width = width; + canvas1.height = height; + canvas2.width = width; + canvas2.height = height; + lightMix(); + colorSphere(); + runComposite(); + return; +}; +``` + +```js hidden +function createCanvas() { + const canvas = document.createElement("canvas"); + canvas.style.background = `url(${op_8x8.data})`; + canvas.style.border = "1px solid #000"; + canvas.style.margin = "5px"; + canvas.width = width / 2; + canvas.height = height / 2; + return canvas; +} + +function runComposite() { + const dl = document.createElement("dl"); + document.body.appendChild(dl); + while (gco.length) { + const pop = gco.pop(); + const dt = document.createElement("dt"); + dt.textContent = pop; + dl.appendChild(dt); + const dd = document.createElement("dd"); + const p = document.createElement("p"); + p.textContent = gcoText.pop(); + dd.appendChild(p); + + const canvasToDrawOn = createCanvas(); + const canvasToDrawFrom = createCanvas(); + const canvasToDrawResult = createCanvas(); + + let ctx = canvasToDrawResult.getContext("2d"); + ctx.clearRect(0, 0, width, height); + ctx.save(); + ctx.drawImage(canvas1, 0, 0, width / 2, height / 2); + ctx.globalCompositeOperation = pop; + ctx.drawImage(canvas2, 0, 0, width / 2, height / 2); + ctx.globalCompositeOperation = "source-over"; + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height / 2 - 20, width / 2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText(pop, 5, height / 2 - 5); + ctx.restore(); + + ctx = canvasToDrawOn.getContext("2d"); + ctx.clearRect(0, 0, width, height); + ctx.save(); + ctx.drawImage(canvas1, 0, 0, width / 2, height / 2); + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height / 2 - 20, width / 2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText("existing content", 5, height / 2 - 5); + ctx.restore(); + + ctx = canvasToDrawFrom.getContext("2d"); + ctx.clearRect(0, 0, width, height); + ctx.save(); + ctx.drawImage(canvas2, 0, 0, width / 2, height / 2); + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height / 2 - 20, width / 2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText("new content", 5, height / 2 - 5); + ctx.restore(); + + dd.appendChild(canvasToDrawOn); + dd.appendChild(canvasToDrawFrom); + dd.appendChild(canvasToDrawResult); + + dl.appendChild(dd); + } +} +``` + +```js hidden +const lightMix = () => { + const ctx = canvas2.getContext("2d"); + ctx.save(); + ctx.globalCompositeOperation = "lighter"; + ctx.beginPath(); + ctx.fillStyle = "rgba(255,0,0,1)"; + ctx.arc(100, 200, 100, Math.PI * 2, 0, false); + ctx.fill(); + ctx.beginPath(); + ctx.fillStyle = "rgba(0,0,255,1)"; + ctx.arc(220, 200, 100, Math.PI * 2, 0, false); + ctx.fill(); + ctx.beginPath(); + ctx.fillStyle = "rgba(0,255,0,1)"; + ctx.arc(160, 100, 100, Math.PI * 2, 0, false); + ctx.fill(); + ctx.restore(); + ctx.beginPath(); + ctx.fillStyle = "#f00"; + ctx.fillRect(0, 0, 30, 30); + ctx.fill(); +}; +``` + +```js hidden +const colorSphere = (element) => { + const ctx = canvas1.getContext("2d"); + const width = 360; + const halfWidth = width / 2; + const rotate = (1 / 360) * Math.PI * 2; // per degree + const offset = 0; // scrollbar offset + const oleft = -20; + const otop = -20; + for (let n = 0; n <= 359; n++) { + const gradient = ctx.createLinearGradient( + oleft + halfWidth, + otop, + oleft + halfWidth, + otop + halfWidth, + ); + const color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); + gradient.addColorStop(0, "rgba(0,0,0,0)"); + gradient.addColorStop(0.7, `rgba(${color.R}, ${color.G}, ${color.B}, 1)`); + gradient.addColorStop(1, "rgba(255,255,255,1)"); + ctx.beginPath(); + ctx.moveTo(oleft + halfWidth, otop); + ctx.lineTo(oleft + halfWidth, otop + halfWidth); + ctx.lineTo(oleft + halfWidth + 6, otop); + ctx.fillStyle = gradient; + ctx.fill(); + ctx.translate(oleft + halfWidth, otop + halfWidth); + ctx.rotate(rotate); + ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); + } + ctx.beginPath(); + ctx.fillStyle = "#00f"; + ctx.fillRect(15, 15, 30, 30); + ctx.fill(); + return ctx.canvas; +}; +``` + +```js hidden +// HSV (1978) = H: Hue / S: Saturation / V: Value +Color = {}; +Color.HSV_RGB = (o) => { + const S = o.S / 100; + let H = o.H / 360, + V = o.V / 100; + let R, G; + let A, B, C, D; + if (S === 0) { + R = G = B = Math.round(V * 255); + } else { + if (H >= 1) H = 0; + H *= 6; + D = H - Math.floor(H); + A = Math.round(255 * V * (1 - S)); + B = Math.round(255 * V * (1 - S * D)); + C = Math.round(255 * V * (1 - S * (1 - D))); + V = Math.round(255 * V); + switch (Math.floor(H)) { + case 0: + R = V; + G = C; + B = A; + break; + case 1: + R = B; + G = V; + B = A; + break; + case 2: + R = A; + G = V; + B = C; + break; + case 3: + R = A; + G = B; + B = V; + break; + case 4: + R = C; + G = A; + B = V; + break; + case 5: + R = V; + G = A; + B = B; + break; + } + } + return { R, G, B }; +}; + +const createInterlace = (size, color1, color2) => { + const proto = document.createElement("canvas").getContext("2d"); + proto.canvas.width = size * 2; + proto.canvas.height = size * 2; + proto.fillStyle = color1; // top-left + proto.fillRect(0, 0, size, size); + proto.fillStyle = color2; // top-right + proto.fillRect(size, 0, size, size); + proto.fillStyle = color2; // bottom-left + proto.fillRect(0, size, size, size); + proto.fillStyle = color1; // bottom-right + proto.fillRect(size, size, size, size); + const pattern = proto.createPattern(proto.canvas, "repeat"); + pattern.data = proto.canvas.toDataURL(); + return pattern; +}; + +const op_8x8 = createInterlace(8, "#FFF", "#eee"); +``` + +{{EmbedLiveSample("", 750, 6750)}} ## Trazado de Recorte @@ -39,7 +333,7 @@ En este ejemplo, utilizamos un trazado de recorte de forma circular para restrin ```js function dibuja() { - var ctx = document.getElementById('lienzo').getContext('2d'); + var ctx = document.getElementById("lienzo").getContext("2d"); ctx.fillRect(0, 0, 150, 150); ctx.translate(75, 75); @@ -50,8 +344,8 @@ function dibuja() { // pinta el fondo var lingrad = ctx.createLinearGradient(0, -75, 0, 75); - lingrad.addColorStop(0, '#232256'); - lingrad.addColorStop(1, '#143778'); + lingrad.addColorStop(0, "#232256"); + lingrad.addColorStop(1, "#143778"); ctx.fillStyle = lingrad; ctx.fillRect(-75, -75, 150, 150); @@ -59,13 +353,14 @@ function dibuja() { // dibuja las estrellas for (var j = 1; j < 50; j++) { ctx.save(); - ctx.fillStyle = '#fff'; - ctx.translate(75 - Math.floor(Math.random() * 150), - 75 - Math.floor(Math.random() * 150)); + ctx.fillStyle = "#fff"; + ctx.translate( + 75 - Math.floor(Math.random() * 150), + 75 - Math.floor(Math.random() * 150), + ); dibulaEstrella(ctx, Math.floor(Math.random() * 4) + 2); ctx.restore(); } - } function dibujaEstrella(ctx, r) { diff --git a/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.md b/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.md index daa4cbbf07e735..9bd5495cee80da 100644 --- a/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.md +++ b/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.md @@ -48,9 +48,9 @@ A continuación se muestra la función `draw()` de la página anterior, pero aho ```js function draw() { - const canvas = document.getElementById('canvas'); + const canvas = document.getElementById("canvas"); if (canvas.getContext) { - const ctx = canvas.getContext('2d'); + const ctx = canvas.getContext("2d"); ctx.fillRect(25, 25, 100, 100); ctx.clearRect(45, 45, 60, 60); @@ -114,9 +114,9 @@ Por ejemplo, el código para dibujar un triángulo sería algo así: ```js function draw() { - const canvas = document.getElementById('canvas'); + const canvas = document.getElementById("canvas"); if (canvas.getContext) { - const ctx = canvas.getContext('2d'); + const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(75, 50); @@ -144,26 +144,26 @@ Para probarlo por ti mismo, puedes utilizar el siguiente fragmento de código. S ```html hidden - - - + + + ``` ```js function draw() { - const canvas = document.getElementById('canvas'); + const canvas = document.getElementById("canvas"); if (canvas.getContext) { - const ctx = canvas.getContext('2d'); + const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Círculo externo ctx.moveTo(110, 75); - ctx.arc(75, 75, 35, 0, Math.PI, false); // Boca (en el sentido de las agujas del reloj) + ctx.arc(75, 75, 35, 0, Math.PI, false); // Boca (en el sentido de las agujas del reloj) ctx.moveTo(65, 65); - ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Ojo izquierdo + ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Ojo izquierdo ctx.moveTo(95, 65); - ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Ojo derecho + ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Ojo derecho ctx.stroke(); } } @@ -198,9 +198,9 @@ El ejemplo siguiente dibuja dos triángulos, uno relleno y otro contorneado. ```js function draw() { - const canvas = document.getElementById('canvas'); + const canvas = document.getElementById("canvas"); if (canvas.getContext) { - const ctx = canvas.getContext('2d'); + const ctx = canvas.getContext("2d"); // Triángulo relleno ctx.beginPath(); @@ -259,9 +259,9 @@ La sentencia para el parámetro `clockwise` hace que la primera y tercera fila s ```js function draw() { - const canvas = document.getElementById('canvas'); + const canvas = document.getElementById("canvas"); if (canvas.getContext) { - const ctx = canvas.getContext('2d'); + const ctx = canvas.getContext("2d"); for (let i = 0; i < 4; i++) { for (let j = 0; j < 3; j++) { @@ -312,17 +312,17 @@ Este ejemplo utiliza múltiples curvas cuadráticas de Bézier para representar ```html hidden - - - + + + ``` ```js function draw() { - const canvas = document.getElementById('canvas'); + const canvas = document.getElementById("canvas"); if (canvas.getContext) { - const ctx = canvas.getContext('2d'); + const ctx = canvas.getContext("2d"); // Ejemplo de curvas cuadráticas ctx.beginPath(); @@ -346,17 +346,17 @@ Este ejemplo dibuja un corazón utilizando curvas cúbicas de Bézier. ```html hidden - - - + + + ``` ```js function draw() { - const canvas = document.getElementById('canvas'); + const canvas = document.getElementById("canvas"); if (canvas.getContext) { - const ctx = canvas.getContext('2d'); + const ctx = canvas.getContext("2d"); // Ejemplo de curvas cúbicas ctx.beginPath(); @@ -397,9 +397,9 @@ Hasta ahora, cada ejemplo de esta página ha utilizado sólo un tipo de función ```js function draw() { - const canvas = document.getElementById('canvas'); + const canvas = document.getElementById("canvas"); if (canvas.getContext) { - const ctx = canvas.getContext('2d'); + const ctx = canvas.getContext("2d"); roundedRect(ctx, 12, 12, 150, 150, 15); roundedRect(ctx, 19, 19, 150, 150, 9); @@ -439,7 +439,7 @@ function draw() { ctx.lineTo(83, 116); ctx.fill(); - ctx.fillStyle = 'white'; + ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo(91, 96); ctx.bezierCurveTo(88, 96, 87, 99, 87, 101); @@ -453,7 +453,7 @@ function draw() { ctx.bezierCurveTo(107, 99, 106, 96, 103, 96); ctx.fill(); - ctx.fillStyle = 'black'; + ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(101, 102, 2, 0, Math.PI * 2, true); ctx.fill(); @@ -494,9 +494,9 @@ Veamos cómo podemos construir un objeto `Path2D`: - : El constructor **`Path2D()`** devuelve un objeto `Path2D` recién instanciado, opcionalmente con otra ruta como argumento (crea una copia), u opcionalmente con una cadena de caracteres formada por datos de un trazado [SVG path](/es/docs/Web/SVG/Tutorial/Paths). ```js -new Path2D(); // Objeto Path2D vacío +new Path2D(); // Objeto Path2D vacío new Path2D(path); // Copia de otro objecto Path2D -new Path2D(d); // Path2D a partir de datos de un trazado (SVG path) +new Path2D(d); // Path2D a partir de datos de un trazado (SVG path) ``` Todos los [Métodos de trazado](/es/docs/Web/API/CanvasRenderingContext2D#paths) como `moveTo`, `rect`, `arc` o `quadraticCurveTo`, etc., que hemos conocido anteriormente, están disponibles en los objetos `Path2D`. @@ -512,17 +512,17 @@ En este ejemplo, estamos creando un rectángulo y un círculo. Ambos se almacena ```html hidden - - - + + + ``` ```js function draw() { - const canvas = document.getElementById('canvas'); + const canvas = document.getElementById("canvas"); if (canvas.getContext) { - const ctx = canvas.getContext('2d'); + const ctx = canvas.getContext("2d"); const rectangle = new Path2D(); rectangle.rect(10, 10, 50, 50); @@ -545,7 +545,7 @@ Otra poderosa característica de la nueva API `Path2D` del canvas es el uso de d El trazado se moverá al punto (`M10 10`) y luego se moverá horizontalmente 80 puntos a la derecha (`h 80`), luego 80 puntos hacia abajo (`v 80`), luego 80 puntos a la izquierda (`h -80`), y luego de vuelta al inicio (`z`). Puedes ver este ejemplo en el [`constructor Path2D`](/es/docs/Web/API/Path2D/Path2D#using_svg_paths). ```js -const p = new Path2D('M10 10 h 80 v 80 h -80 Z'); +const p = new Path2D("M10 10 h 80 v 80 h -80 Z"); ``` {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}} diff --git a/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md index 6eb9414058f1a7..c13b11cf62ae99 100644 --- a/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md +++ b/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md @@ -238,7 +238,7 @@ zoomctx.drawImage( 0, 0, 200, - 200 + 200, ); ``` @@ -285,7 +285,7 @@ function draw(img) { 0, 0, 200, - 200 + 200, ); }; diff --git a/files/es/web/api/canvasrenderingcontext2d/arc/index.md b/files/es/web/api/canvasrenderingcontext2d/arc/index.md index 97c5cdcdb8bec2..c2f6ecaec4c4cd 100644 --- a/files/es/web/api/canvasrenderingcontext2d/arc/index.md +++ b/files/es/web/api/canvasrenderingcontext2d/arc/index.md @@ -43,8 +43,8 @@ Esto es sólo un simple fragmento de código dibujando un círculo. #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(75, 75, 50, 0, 2 * Math.PI); @@ -62,7 +62,8 @@ Edite el código de abajo y vea su actualización de cambios en vivo en el lienz +ctx.stroke(); ``` ```js hidden @@ -78,14 +79,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); @@ -102,19 +103,19 @@ En este ejemplo se dibujan diferentes formas para mostrar lo que es posible al u ``` ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); // Draw shapes for (var i = 0; i < 4; i++) { - for(var j = 0; j < 3; j++) { + for (var j = 0; j < 3; j++) { ctx.beginPath(); - var x = 25 + j * 50; // x coordinate - var y = 25 + i * 50; // y coordinate - var radius = 20; // Arc radius - var startAngle = 0; // Starting point on circle - var endAngle = Math.PI + (Math.PI * j) /2; // End point on circle - var anticlockwise = i % 2 == 1; // Draw anticlockwise + var x = 25 + j * 50; // x coordinate + var y = 25 + i * 50; // y coordinate + var radius = 20; // Arc radius + var startAngle = 0; // Starting point on circle + var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle + var anticlockwise = i % 2 == 1; // Draw anticlockwise ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); diff --git a/files/es/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/es/web/api/canvasrenderingcontext2d/beginpath/index.md index 13332a04ee0f3d..63f40a08c30f39 100644 --- a/files/es/web/api/canvasrenderingcontext2d/beginpath/index.md +++ b/files/es/web/api/canvasrenderingcontext2d/beginpath/index.md @@ -33,16 +33,16 @@ var ctx = canvas.getContext("2d"); // First path ctx.beginPath(); -ctx.strokeStyle = 'blue'; -ctx.moveTo(20,20); -ctx.lineTo(200,20); +ctx.strokeStyle = "blue"; +ctx.moveTo(20, 20); +ctx.lineTo(200, 20); ctx.stroke(); // Second path ctx.beginPath(); -ctx.strokeStyle = 'green'; -ctx.moveTo(20,20); -ctx.lineTo(120,120); +ctx.strokeStyle = "green"; +ctx.moveTo(20, 20); +ctx.lineTo(120, 120); ctx.stroke(); ``` @@ -67,7 +67,8 @@ ctx.beginPath(); ctx.strokeStyle = 'green'; ctx.moveTo(20,20); ctx.lineTo(120, 120); -ctx.stroke(); +ctx.stroke(); ``` ```js hidden @@ -83,14 +84,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); diff --git a/files/es/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/es/web/api/canvasrenderingcontext2d/clearrect/index.md index 36e9bbbb30ffb2..d70681709afd50 100644 --- a/files/es/web/api/canvasrenderingcontext2d/clearrect/index.md +++ b/files/es/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -45,10 +45,11 @@ Este es un simple fragmento (snippet) de código que usa el método **`clearRect #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); -ctx.beginPath(); ctx.moveTo(20, 20); +ctx.beginPath(); +ctx.moveTo(20, 20); ctx.lineTo(200, 20); ctx.lineTo(120, 120); ctx.closePath(); // draws last line of the triangle @@ -76,7 +77,8 @@ ctx.lineTo(120,120); ctx.closePath(); // draws last line of the triangle ctx.stroke(); -ctx.clearRect(10, 10, 100, 100); +ctx.clearRect(10, 10, 100, 100); ``` ```js hidden @@ -92,14 +94,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); diff --git a/files/es/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/es/web/api/canvasrenderingcontext2d/drawimage/index.md index 8a70c02de6e16a..7a403176944393 100644 --- a/files/es/web/api/canvasrenderingcontext2d/drawimage/index.md +++ b/files/es/web/api/canvasrenderingcontext2d/drawimage/index.md @@ -67,7 +67,7 @@ Este es sólo un simple fragmento de código que utiliza el método drawImage. ```js var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); -var image = document.getElementById('source'); +var image = document.getElementById("source"); ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); ``` @@ -89,7 +89,7 @@ ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); ```js hidden var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); -var image = document.getElementById('source'); +var image = document.getElementById("source"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); @@ -100,14 +100,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); diff --git a/files/es/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/es/web/api/canvasrenderingcontext2d/fillrect/index.md index 994fa0500ccad8..6291dc3e164839 100644 --- a/files/es/web/api/canvasrenderingcontext2d/fillrect/index.md +++ b/files/es/web/api/canvasrenderingcontext2d/fillrect/index.md @@ -2,6 +2,7 @@ title: CanvasRenderingContext2D.fillRect() slug: Web/API/CanvasRenderingContext2D/fillRect --- + {{APIRef}} El método **`CanvasRenderingContext2D.fillRect()`** de la API Canvas 2D dibuja un rectángulo relleno en la posición ( x, y ). El tamaño del rectángulo se determina por width (anchura) y height (altura). El estilo de relleno se determina por el atributo `fillStyle`. @@ -57,7 +58,8 @@ Edita el código que se encuentra a continuación y observa en vivo los cambios +ctx.fillRect(10, 10, 100, 100); ``` ```js hidden @@ -73,14 +75,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); diff --git a/files/es/web/api/canvasrenderingcontext2d/getimagedata/index.md b/files/es/web/api/canvasrenderingcontext2d/getimagedata/index.md index 6235cb45b5903b..f78c57a03aa3aa 100644 --- a/files/es/web/api/canvasrenderingcontext2d/getimagedata/index.md +++ b/files/es/web/api/canvasrenderingcontext2d/getimagedata/index.md @@ -50,8 +50,8 @@ Esto es sólo un simple fragmento de código que utiliza el método getImageData #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); ctx.rect(10, 10, 100, 100); ctx.fill(); diff --git a/files/es/web/api/canvasrenderingcontext2d/linecap/index.md b/files/es/web/api/canvasrenderingcontext2d/linecap/index.md index df7bf89183afea..d435ef2072647a 100644 --- a/files/es/web/api/canvasrenderingcontext2d/linecap/index.md +++ b/files/es/web/api/canvasrenderingcontext2d/linecap/index.md @@ -39,13 +39,13 @@ En este ejemplo se redondean los puntos finales de una línea recta. #### JavaScript ```js -const canvas = document.getElementById('canvas'); -const ctx = canvas.getContext('2d'); +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineWidth = 15; -ctx.lineCap = 'round'; +ctx.lineCap = "round"; ctx.lineTo(100, 100); ctx.stroke(); ``` @@ -65,12 +65,12 @@ La línea de la izquiera usa la opción por defecto `"butt"`. Esta es dibujada c ``` ```js -const canvas = document.getElementById('canvas'); -const ctx = canvas.getContext('2d'); -const lineCap = ['butt', 'round', 'square']; +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); +const lineCap = ["butt", "round", "square"]; // Draw guides -ctx.strokeStyle = '#09f'; +ctx.strokeStyle = "#09f"; ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(140, 10); @@ -79,7 +79,7 @@ ctx.lineTo(140, 140); ctx.stroke(); // Draw lines -ctx.strokeStyle = 'black'; +ctx.strokeStyle = "black"; for (let i = 0; i < lineCap.length; i++) { ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; diff --git a/files/es/web/api/canvasrenderingcontext2d/rotate/index.md b/files/es/web/api/canvasrenderingcontext2d/rotate/index.md index 785f3755989d97..257033e0491246 100644 --- a/files/es/web/api/canvasrenderingcontext2d/rotate/index.md +++ b/files/es/web/api/canvasrenderingcontext2d/rotate/index.md @@ -37,21 +37,21 @@ En este ejemplo se rota un rectangulo 45º. Nótese que el centro de rotación e #### JavaScript ```js -const canvas = document.getElementById('canvas'); -const ctx = canvas.getContext('2d'); +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); // origen del punto de transformación ctx.arc(0, 0, 5, 0, 2 * Math.PI); -ctx.fillStyle = 'blue'; +ctx.fillStyle = "blue"; ctx.fill(); // rectángulo sin rotar -ctx.fillStyle = 'gray'; +ctx.fillStyle = "gray"; ctx.fillRect(100, 0, 80, 20); // rectángulo rotado 45º -ctx.rotate(45 * Math.PI / 180); -ctx.fillStyle = 'red'; +ctx.rotate((45 * Math.PI) / 180); +ctx.fillStyle = "red"; ctx.fillRect(100, 0, 80, 20); // se reinicia la matriz de transformación a la matriz identidad @@ -83,11 +83,11 @@ Este ejemplo rota una figura alrededor del punto central de ésta. Para realizar La figura es un rectángulo con su esquina en (80, 60), un ancho de 140 y un alto de 30. El centro de la coordenada horizontal está en (80 + 140 / 2) = 150. Su centro en la coordenada vertical será (60 + 30 / 2) = 75. Por tanto, el punto central está en (150, 75). ```js -const canvas = document.getElementById('canvas'); -const ctx = canvas.getContext('2d'); +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); // rectángulo sin rotar -ctx.fillStyle = 'gray'; +ctx.fillStyle = "gray"; ctx.fillRect(80, 60, 140, 30); // Matriz de transformación @@ -96,7 +96,7 @@ ctx.rotate(Math.PI / 2); ctx.translate(-150, -75); // rectángulo rotado -ctx.fillStyle = 'red'; +ctx.fillStyle = "red"; ctx.fillRect(80, 60, 140, 30); ``` diff --git a/files/es/web/api/canvasrenderingcontext2d/save/index.md b/files/es/web/api/canvasrenderingcontext2d/save/index.md index adb796f3f46a4b..d41510e2cc92d4 100644 --- a/files/es/web/api/canvasrenderingcontext2d/save/index.md +++ b/files/es/web/api/canvasrenderingcontext2d/save/index.md @@ -37,13 +37,13 @@ Este ejemplo usa el método `save()` para guardar el estado por defecto y el mé #### JavaScript ```js -const canvas = document.getElementById('canvas'); -const ctx = canvas.getContext('2d'); +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); // Guardar el estado por defecto ctx.save(); -ctx.fillStyle = 'green'; +ctx.fillStyle = "green"; ctx.fillRect(10, 10, 100, 100); // Restaurar el estado por defecto diff --git a/files/es/web/api/cleartimeout/index.md b/files/es/web/api/cleartimeout/index.md index 186c623141827a..c9b5cea0b42b86 100644 --- a/files/es/web/api/cleartimeout/index.md +++ b/files/es/web/api/cleartimeout/index.md @@ -24,25 +24,33 @@ Ejecute el script de abajo en el contexto de una página web y haga clic en la p ```js var alarm = { - remind: function(aMessage) { + remind: function (aMessage) { alert(aMessage); delete this.timeoutID; }, - setup: function() { + setup: function () { this.cancel(); var self = this; - this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!"); + this.timeoutID = window.setTimeout( + function (msg) { + self.remind(msg); + }, + 1000, + "Wake up!", + ); }, - cancel: function() { - if(typeof this.timeoutID == "number") { + cancel: function () { + if (typeof this.timeoutID == "number") { window.clearTimeout(this.timeoutID); delete this.timeoutID; } - } + }, +}; +window.onclick = function () { + alarm.setup(); }; -window.onclick = function() { alarm.setup() }; ``` ## Notas diff --git a/files/es/web/api/clipboard_api/index.md b/files/es/web/api/clipboard_api/index.md index 73aa58d0077723..9fc47e5ba20c5b 100644 --- a/files/es/web/api/clipboard_api/index.md +++ b/files/es/web/api/clipboard_api/index.md @@ -15,8 +15,11 @@ Esta API está diseñada para reemplazar el acceso al portapapeles usando {{domx En vez de instanciar un objeto `Clipboard`, se puede acceder al portapapeles del sistema a través de la variable global {{domxref("Navigator.clipboard")}}: ```js -navigator.clipboard.readText().then( - clipText => document.querySelector(".editor").innerText += clipText); +navigator.clipboard + .readText() + .then( + (clipText) => (document.querySelector(".editor").innerText += clipText), + ); ``` Esta pieza de código lee el texto que hay en el portapapeles y lo añade al primer elemento que tenga la clase `editor`. Desde que {{domxref("Clipboard.readText", "readText()")}} (y también {{domxref("Clipboard.read", "read()")}}, de hecho) devuelve una cadena de texto vacía si el contenido del portapapeles no es texto, este código es seguro. diff --git a/files/es/web/api/console/index.md b/files/es/web/api/console/index.md index 93192db94f3e9c..eb4da1bd86551d 100644 --- a/files/es/web/api/console/index.md +++ b/files/es/web/api/console/index.md @@ -11,7 +11,7 @@ El objeto **`console`** provee acceso a la consola de depuración de los navegad El objeto `console` puede ser accedido desde cualquier objeto global. {{domxref("Window")}} en el ámbito de navegación y {{domxref("WorkerGlobalScope")}} como variantes específicas de `workers` a través de la propiedad `console`. Está expuesto como {{domxref("Window.console")}}, y puede ser referenciado como `console`. Por ejemplo: ```js -console.log("Falló al abrir el enlace especificado") +console.log("Falló al abrir el enlace especificado"); ``` Esta página documenta los [Métodos](#métodos) disponibles en el objeto `console` y da algunos ejemplos de [uso](#ejemplos). @@ -124,8 +124,8 @@ Cuando se pasa una cadena a uno de los métodos del objeto `console` que la acep Cada uno de ellos trae el siguiente argumento posterior a la cadena de la lista de parámetros. Por ejemplo: ```js -for (let i=0; i<5; i++) { - console.log("Hola, %s. Me has llamado %d veces.", "Bob", i+1); +for (let i = 0; i < 5; i++) { + console.log("Hola, %s. Me has llamado %d veces.", "Bob", i + 1); } ``` @@ -144,7 +144,10 @@ La salida se verá parecido a esto: Puedes usar la directiva `%c` para aplicar un estilo CSS a la salida de la consola: ```js -console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px"); +console.log( + "This is %cMy stylish message", + "color: yellow; font-style: italic; background-color: blue;padding: 2px", +); ``` El texto previo a la directiva no se verá afectado, pero el texto posterior a la directiva será estilizado usando las declaraciones CSS en el parámetro. @@ -154,7 +157,12 @@ El texto previo a la directiva no se verá afectado, pero el texto posterior a l Puedes usar `%c` varias veces: ```js -console.log("Varios estilos: %crojo %cnaranja", "color: red", "color: orange", "Mensaje adicional sin estilo"); +console.log( + "Varios estilos: %crojo %cnaranja", + "color: red", + "color: orange", + "Mensaje adicional sin estilo", +); ``` Las propiedadas utilizables junto con la directiva `%c` son las siguientes (al menos, en Firefox - pueden variar en otros navegadores): diff --git a/files/es/web/api/console/table/index.md b/files/es/web/api/console/table/index.md index 8f919b78faadff..333a8c30ba0cfb 100644 --- a/files/es/web/api/console/table/index.md +++ b/files/es/web/api/console/table/index.md @@ -27,7 +27,7 @@ console.table(["apples", "oranges", "bananas"]); ``` | (index) | Values | -|---------|-----------| +| ------- | --------- | | 0 | 'apples' | | 1 | 'oranges' | | 2 | 'bananas' | @@ -46,7 +46,7 @@ console.table(me); ``` | (index) | Values | -|-----------|----------| +| --------- | -------- | | firstName | 'Tyrone' | | lastName | 'Jones' | @@ -66,7 +66,7 @@ console.table(people); ``` | (index) | 0 | 1 | -|---------|----------|---------| +| ------- | -------- | ------- | | 0 | 'Tyrone' | 'Jones' | | 1 | 'Janet' | 'Smith' | | 2 | 'Maria' | 'Cruz' | @@ -89,7 +89,7 @@ console.table([tyrone, janet, maria]); Tenga en cuenta que si el array contiene objetos, las columnas se etiquetarán con el nombre de la propiedad. | (index) | firstName | lastName | -|---------|-----------|----------| +| ------- | --------- | -------- | | 0 | 'Tyrone' | 'Jones' | | 1 | 'Janet' | 'Smith' | | 2 | 'Maria' | 'Cruz' | @@ -107,7 +107,7 @@ console.table(family); ``` | (index) | firstName | lastName | -|----------|-----------|----------| +| -------- | --------- | -------- | | daughter | 'Maria' | 'Jones' | | father | 'Tyrone' | 'Jones' | | mother | 'Janet' | 'Jones' | @@ -130,7 +130,7 @@ console.table([tyrone, janet, maria], ["firstName"]); ``` | (index) | firstName | -|---------|-----------| +| ------- | --------- | | 0 | 'Tyrone' | | 1 | 'Janet' | | 2 | 'Maria' | diff --git a/files/es/web/api/createimagebitmap/index.md b/files/es/web/api/createimagebitmap/index.md index b06c1a25fca7dc..bdeb02d465082f 100644 --- a/files/es/web/api/createimagebitmap/index.md +++ b/files/es/web/api/createimagebitmap/index.md @@ -49,25 +49,25 @@ Una {{domxref("Promise")}} que es resuelta con un objeto {{domxref("ImageBitmap" El siguiente ejemplo carga un _sprite sheet_, extrae los _sprites_, y muestra cada uno de ellos en el _canvas_. Un _sprite sheet_ es una imagen que contiene multiples imágenes más pequeñas, que finalmente son utilizadas de manera individual. ```js -var canvas = document.getElementById('myCanvas'), -ctx = canvas.getContext('2d'), -image = new Image(); +var canvas = document.getElementById("myCanvas"), + ctx = canvas.getContext("2d"), + image = new Image(); // Esperar que el sprite sheet se cargue -image.onload = function() { +image.onload = function () { Promise.all([ // Recortar dos sprites del conjunto createImageBitmap(image, 0, 0, 32, 32), - createImageBitmap(image, 32, 0, 32, 32) - ]).then(function(sprites) { + createImageBitmap(image, 32, 0, 32, 32), + ]).then(function (sprites) { // Pintar cada uno de los sprites en el canvas ctx.drawImage(sprites[0], 0, 0); ctx.drawImage(sprites[1], 32, 32); }); -} +}; // Cargar el sprite sheet desde un archivo de imagen -image.src = 'sprites.png'; +image.src = "sprites.png"; ``` ## Especificaciones diff --git a/files/es/web/api/cssstyledeclaration/index.md b/files/es/web/api/cssstyledeclaration/index.md index 99a8766283b9a0..9d3a43f0c23c05 100644 --- a/files/es/web/api/cssstyledeclaration/index.md +++ b/files/es/web/api/cssstyledeclaration/index.md @@ -42,11 +42,11 @@ slug: Web/API/CSSStyleDeclaration ## Ejemplo ```js -var styleObj= document.styleSheets[0].cssRules[0].style; +var styleObj = document.styleSheets[0].cssRules[0].style; alert(styleObj.cssText); -for (var i = styleObj.length-1; i >= 0; i--) { - var nameString = styleObj[i]; - styleObj.removeProperty(nameString); +for (var i = styleObj.length - 1; i >= 0; i--) { + var nameString = styleObj[i]; + styleObj.removeProperty(nameString); } alert(styleObj.cssText); ``` diff --git a/files/es/web/api/cssstylesheet/insertrule/index.md b/files/es/web/api/cssstylesheet/insertrule/index.md index 67e5c3d5ef35b0..0b188fbe775cbf 100644 --- a/files/es/web/api/cssstylesheet/insertrule/index.md +++ b/files/es/web/api/cssstylesheet/insertrule/index.md @@ -51,24 +51,28 @@ addStylesheetRules([ ] ]); */ -function addStylesheetRules (decls) { - var styleEl = document.createElement('style'); +function addStylesheetRules(decls) { + var styleEl = document.createElement("style"); document.head.appendChild(styleEl); // Aparentemente ¿alguna versión de Safari necesita la siguiente linea? No lo sé. - styleEl.appendChild(document.createTextNode('')); + styleEl.appendChild(document.createTextNode("")); var s = styleEl.sheet; - for (var i=0, rl = rules.length; i < rl; i++) { - var j = 1, rule = rules[i], selector = decl[0], propStr = ''; + for (var i = 0, rl = rules.length; i < rl; i++) { + var j = 1, + rule = rules[i], + selector = decl[0], + propStr = ""; // Si el segundo argumento de una regla es una matriz de matrices, corrijamos nuestras variables. - if (Object.prototype.toString.call(rule[1][0]) === '[object Array]') { + if (Object.prototype.toString.call(rule[1][0]) === "[object Array]") { rule = rule[1]; j = 0; } - for (var pl=rule.length; j < pl; j++) { + for (var pl = rule.length; j < pl; j++) { var prop = rule[j]; - propStr += prop[0] + ':' + prop[1] + (prop[2] ? ' !important' : '') + ';\n'; + propStr += + prop[0] + ":" + prop[1] + (prop[2] ? " !important" : "") + ";\n"; } - s.insertRule(selector + '{' + propStr + '}', s.cssRules.length); + s.insertRule(selector + "{" + propStr + "}", s.cssRules.length); } } ``` diff --git a/files/es/web/api/customelementregistry/define/index.md b/files/es/web/api/customelementregistry/define/index.md index 3edf8178ab0241..ce625c87182cd4 100644 --- a/files/es/web/api/customelementregistry/define/index.md +++ b/files/es/web/api/customelementregistry/define/index.md @@ -36,11 +36,11 @@ Void. ### Excepciones -| Excepción | Descripción | -| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Excepción | Descripción | +| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `NotSupportedError` | El {{domxref("CustomElementRegistry")}} ya contiene una entrada con el mismo nombre o el mismo constructor (o se ha definido ya de alguna otra manera), o se ha especificado `extends` pero el elemento del que se está intentando extender es desconocido. | -| `SyntaxError` | El nombre proporcionado no es un [nombre válido de elemento personalizado](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name). | -| `TypeError` | El constructor referenciado no es un constructor | +| `SyntaxError` | El nombre proporcionado no es un [nombre válido de elemento personalizado](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name). | +| `TypeError` | El constructor referenciado no es un constructor | > **Nota:** A menudo se obtienen excepciones `NotSupportedError`s cuando el método `define()` está fallando, pero realmente es un problema relacionado con {{domxref("Element.attachShadow()")}}. @@ -58,66 +58,64 @@ class PopUpInfo extends HTMLElement { super(); // Crear una shadow root - var shadow = this.attachShadow({mode: 'open'}); + var shadow = this.attachShadow({ mode: "open" }); // Crear tres elementos span - var wrapper = document.createElement('span'); - wrapper.setAttribute('class','wrapper'); + var wrapper = document.createElement("span"); + wrapper.setAttribute("class", "wrapper"); - var icon = document.createElement('span'); - icon.setAttribute('class','icon'); - icon.setAttribute('tabindex', 0); + var icon = document.createElement("span"); + icon.setAttribute("class", "icon"); + icon.setAttribute("tabindex", 0); - var info = document.createElement('span'); - info.setAttribute('class','info'); + var info = document.createElement("span"); + info.setAttribute("class", "info"); // Coger el contenido del atributo text y ponerlo en el span info - var text = this.getAttribute('text'); + var text = this.getAttribute("text"); info.textContent = text; // Coger el contenido del atributo img (si existe) y ponerlo en el span icon var imgUrl; - if(this.hasAttribute('img')) { - imgUrl = this.getAttribute('img'); + if (this.hasAttribute("img")) { + imgUrl = this.getAttribute("img"); } else { - imgUrl = 'img/default.png'; + imgUrl = "img/default.png"; } // El span no puede tener directamente una imagen, pero si contener un elemento img - var img = document.createElement('img'); + var img = document.createElement("img"); img.src = imgUrl; icon.appendChild(img); // Crear los estilos CSS e incluirlos en el shadow DOM - var style = document.createElement('style'); - - style.textContent = '.wrapper {' + - 'position: relative;' + - '}' + - - '.info {' + - 'font-size: 0.8rem;' + - 'width: 200px;' + - 'display: inline-block;' + - 'border: 1px solid black;' + - 'padding: 10px;' + - 'background: white;' + - 'border-radius: 10px;' + - 'opacity: 0;' + - 'transition: 0.6s all;' + - 'position: absolute;' + - 'bottom: 20px;' + - 'left: 10px;' + - 'z-index: 3;' + - '}' + - - 'img {' + - 'width: 1.2rem' + - '}' + - - '.icon:hover + .info, .icon:focus + .info {' + - 'opacity: 1;' + - '}'; + var style = document.createElement("style"); + + style.textContent = + ".wrapper {" + + "position: relative;" + + "}" + + ".info {" + + "font-size: 0.8rem;" + + "width: 200px;" + + "display: inline-block;" + + "border: 1px solid black;" + + "padding: 10px;" + + "background: white;" + + "border-radius: 10px;" + + "opacity: 0;" + + "transition: 0.6s all;" + + "position: absolute;" + + "bottom: 20px;" + + "left: 10px;" + + "z-index: 3;" + + "}" + + "img {" + + "width: 1.2rem" + + "}" + + ".icon:hover + .info, .icon:focus + .info {" + + "opacity: 1;" + + "}"; // adjuntar los elementos creados (spans y estilo) al shadow DOM // notese que el span wrapper contiene los spans icon e info @@ -130,13 +128,13 @@ class PopUpInfo extends HTMLElement { } // Definir el nuevo elemento -customElements.define('popup-info', PopUpInfo); +customElements.define("popup-info", PopUpInfo); ``` ```html - + ``` > **Nota:** Los constructores de elementos personalizados autónomos deben extender {{domxref("HTMLElement")}}. @@ -160,35 +158,33 @@ class WordCount extends HTMLParagraphElement { // innerText está definido para objetos HTMLElement, mientras que textContent para todos los objetos Node // el operador || hace que obtengamos al menos uno de los dos - function countWords(node){ - var text = node.innerText || node.textContent + function countWords(node) { + var text = node.innerText || node.textContent; return text.split(/\s+/g).length; } - var count = 'Words: ' + countWords(wcParent); + var count = "Words: " + countWords(wcParent); // // Crear una shadow root - var shadow = this.attachShadow({mode: 'open'}); + var shadow = this.attachShadow({ mode: "open" }); // Crear un nodo span con el número de palabras - var text = document.createElement('span'); + var text = document.createElement("span"); text.textContent = count; // Añadirlo a la shadow root shadow.appendChild(text); - // Actualizar el contador cuando el contenido del elemento cambie - setInterval(function() { - var count = 'Words: ' + countWords(wcParent); + setInterval(function () { + var count = "Words: " + countWords(wcParent); text.textContent = count; - }, 200) - + }, 200); } } // Define the new element -customElements.define('word-count', WordCount, { extends: 'p' }); +customElements.define("word-count", WordCount, { extends: "p" }); ``` ```html diff --git a/files/es/web/api/customelementregistry/index.md b/files/es/web/api/customelementregistry/index.md index 6ceafdea2c3b9e..8325a8c6f0e939 100644 --- a/files/es/web/api/customelementregistry/index.md +++ b/files/es/web/api/customelementregistry/index.md @@ -32,35 +32,33 @@ class WordCount extends HTMLParagraphElement { // count words in element's parent element var wcParent = this.parentNode; - function countWords(node){ - var text = node.innerText || node.textContent + function countWords(node) { + var text = node.innerText || node.textContent; return text.split(/\s+/g).length; } - var count = 'Words: ' + countWords(wcParent); + var count = "Words: " + countWords(wcParent); // Create a shadow root - var shadow = this.attachShadow({mode: 'open'}); + var shadow = this.attachShadow({ mode: "open" }); // Create text node and add word count to it - var text = document.createElement('span'); + var text = document.createElement("span"); text.textContent = count; // Append it to the shadow root shadow.appendChild(text); - // Update count when element content changes - setInterval(function() { - var count = 'Words: ' + countWords(wcParent); + setInterval(function () { + var count = "Words: " + countWords(wcParent); text.textContent = count; - }, 200) - + }, 200); } } // Define the new element -customElements.define('word-count', WordCount, { extends: 'p' }); +customElements.define("word-count", WordCount, { extends: "p" }); ``` > **Nota:** The `CustomElementRegistry` is available through the {{domxref("Window.customElements")}} property. diff --git a/files/es/web/api/devicemotionevent/index.md b/files/es/web/api/devicemotionevent/index.md index 13e71f046f2255..3220fd8656dfa9 100644 --- a/files/es/web/api/devicemotionevent/index.md +++ b/files/es/web/api/devicemotionevent/index.md @@ -28,8 +28,8 @@ El evento `DeviceMotionEvent` proporciona a los desarrolladores información ace ## Ejemplo ```js -window.addEventListener('devicemotion', function(event) { - console.log(event.acceleration.x + ' m/s2'); +window.addEventListener("devicemotion", function (event) { + console.log(event.acceleration.x + " m/s2"); }); ``` diff --git a/files/es/web/api/document/adoptnode/index.md b/files/es/web/api/document/adoptnode/index.md index 69d54c96ec3198..62cf302fda85ec 100644 --- a/files/es/web/api/document/adoptnode/index.md +++ b/files/es/web/api/document/adoptnode/index.md @@ -21,11 +21,11 @@ node = document.adoptNode(externalNode); ## Ejemplo ```js -var iframe = document.querySelector('iframe'); -var iframeImages = iframe.contentDocument.querySelectorAll('img'); -var newParent = document.getElementById('images'); +var iframe = document.querySelector("iframe"); +var iframeImages = iframe.contentDocument.querySelectorAll("img"); +var newParent = document.getElementById("images"); -iframeImages.forEach(function(imgEl) { +iframeImages.forEach(function (imgEl) { newParent.appendChild(document.adoptNode(imgEl)); }); ``` diff --git a/files/es/web/api/document/alinkcolor/index.md b/files/es/web/api/document/alinkcolor/index.md index 01c261a362c8c6..8034ab2a7d46f7 100644 --- a/files/es/web/api/document/alinkcolor/index.md +++ b/files/es/web/api/document/alinkcolor/index.md @@ -10,8 +10,8 @@ Devuelve o define el color que tendrán los vínculos activos en el cuerpo (elem ## Sintaxis ```js -color = document.alinkColor -document.alinkColor =color +color = document.alinkColor; +document.alinkColor = color; ``` `color` es un texto que deberá llevar el nombre del color en inglés(e.g., `"blue"`, `"darkblue"`, etc.) o el valor hexadecimal del color (e.g., `#0000FF`) diff --git a/files/es/web/api/document/anchors/index.md b/files/es/web/api/document/anchors/index.md index 5be6d656f09ce4..58c25fd5b4cdae 100644 --- a/files/es/web/api/document/anchors/index.md +++ b/files/es/web/api/document/anchors/index.md @@ -18,56 +18,54 @@ Una {{domxref("HTMLCollection")}}. ## Ejemplo ```js -if ( document.anchors.length >= 5 ) { - dump("dump found too many anchors"); - window.location = "http://www.google.com"; +if (document.anchors.length >= 5) { + dump("dump found too many anchors"); + window.location = "http://www.google.com"; } ``` Lo siguiente es un ejemplo que puebla una Tabla de Contenido con cada ancla en la página: ```html - + - - -Test - - - - -

Title

-

Contents

- - -

Plants

-
    -
  1. Apples
    2. -
  2. Oranges
    3. -
  3. Pears
    4. -
- -

Veggies

-
    -
  1. Carrots
    2. -
  2. Celery
    3. -
  3. Beats
    4. -
- - + + + Test + + + +

Title

+

Contents

+ + +

Plants

+
    +
  1. Apples
    2. +
  2. Oranges
    3. +
  3. Pears
    4. +
+ +

Veggies

+
    +
  1. Carrots
    2. +
  2. Celery
    3. +
  3. Beats
    4. +
+ ``` diff --git a/files/es/web/api/document/applets/index.md b/files/es/web/api/document/applets/index.md index 9c601146adeb00..74abd35a1830ab 100644 --- a/files/es/web/api/document/applets/index.md +++ b/files/es/web/api/document/applets/index.md @@ -14,7 +14,7 @@ del documento. ### Sintaxis ```js -nodeList = document.applets +nodeList = document.applets; ``` ### Ejemplo diff --git a/files/es/web/api/document/bgcolor/index.md b/files/es/web/api/document/bgcolor/index.md index 83f14e91fa0fa8..6207ad14b46c99 100644 --- a/files/es/web/api/document/bgcolor/index.md +++ b/files/es/web/api/document/bgcolor/index.md @@ -10,9 +10,8 @@ slug: Web/API/Document/bgColor ### Sintaxis ```js -color = document.bgColor -document.bgColor = -color +color = document.bgColor; +document.bgColor = color; ``` ### Parámetros diff --git a/files/es/web/api/document/body/index.md b/files/es/web/api/document/body/index.md index ba1d2b87a6ee01..6fe0138d3d7648 100644 --- a/files/es/web/api/document/body/index.md +++ b/files/es/web/api/document/body/index.md @@ -12,8 +12,8 @@ Devuelve el nodo del `` o el nodo del `` del documento. ### Sintaxis ```js -objRef = document.body -document.body = objRef +objRef = document.body; +document.body = objRef; ``` ### Ejemplo diff --git a/files/es/web/api/document/characterset/index.md b/files/es/web/api/document/characterset/index.md index 2f2037ac1d59d3..a8c76b5087b950 100644 --- a/files/es/web/api/document/characterset/index.md +++ b/files/es/web/api/document/characterset/index.md @@ -12,16 +12,17 @@ Devuelve la codificación de caracteres (conjunto de caracteres) usado en el doc ### Sintaxis ```js -string = document.characterSet +string = document.characterSet; ``` ### Ejemplo ```html -// devuelve el conjunto de caracteres del documento, por ejemplo "ISO-8859-1 o UTF-8" + + ``` ### Notas diff --git a/files/es/web/api/document/clear/index.md b/files/es/web/api/document/clear/index.md index adef1eedbc8809..57fdd7732f86a4 100644 --- a/files/es/web/api/document/clear/index.md +++ b/files/es/web/api/document/clear/index.md @@ -12,7 +12,7 @@ No hace nada en versiones más recientes basado en Mozilla así como en Internet ## Síntaxis ```js -document.clear() +document.clear(); ``` ## Especificaciones diff --git a/files/es/web/api/document/cookie/index.md b/files/es/web/api/document/cookie/index.md index 02e3b1c5a98614..7795b1859226a2 100644 --- a/files/es/web/api/document/cookie/index.md +++ b/files/es/web/api/document/cookie/index.md @@ -58,7 +58,6 @@ document.cookie = "nombre=oeschger"; document.cookie = "comida_preferida=tripa"; function alertCookie() { alert(document.cookie); // visualizar: nombre=oeschger;comida favorita=tripa - } ``` @@ -74,7 +73,10 @@ function alertCookie() { document.cookie = "test1=Hola"; document.cookie = "test2=Mundo"; -var cookieValor = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1"); +var cookieValor = document.cookie.replace( + /(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, + "$1", +); function alertCookieValue() { alert(cookieValor); @@ -93,9 +95,15 @@ De manera a usar el siguiente código, favor remplace todas las veces la palabra ```js function hazUnaVez() { - if (document.cookie.replace(/(?:(?:^|.*;\s*)hacerAlgoUnaSolaVez\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") { + if ( + document.cookie.replace( + /(?:(?:^|.*;\s*)hacerAlgoUnaSolaVez\s*\=\s*([^;]*).*$)|^.*$/, + "$1", + ) !== "true" + ) { alert("Hacer algo aquí!"); - document.cookie = "hacerAlgoUnaSolaVez=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"; + document.cookie = + "hacerAlgoUnaSolaVez=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"; } } ``` diff --git a/files/es/web/api/document/createattribute/index.md b/files/es/web/api/document/createattribute/index.md index dbb30fc9c94505..6bda5780c10812 100644 --- a/files/es/web/api/document/createattribute/index.md +++ b/files/es/web/api/document/createattribute/index.md @@ -13,7 +13,7 @@ El método **`Document.createAttribute()`** crea un nuevo nodo de tipo atributo ## Sintaxis ```js -atributo = document.createAttribute(nombre) +atributo = document.createAttribute(nombre); ``` ### Parametros diff --git a/files/es/web/api/document/createdocumentfragment/index.md b/files/es/web/api/document/createdocumentfragment/index.md index ed9b2d1e0c182d..04034cbf3e0000 100644 --- a/files/es/web/api/document/createdocumentfragment/index.md +++ b/files/es/web/api/document/createdocumentfragment/index.md @@ -34,22 +34,20 @@ Este ejemplo crea una lista de los principales navegadores web en un _DocumentFr HTML ```html - + ``` JavaScript ```js -var element = document.getElementById('ul'); // assuming ul exists +var element = document.getElementById("ul"); // assuming ul exists var fragment = document.createDocumentFragment(); -var browsers = ['Firefox', 'Chrome', 'Opera', - 'Safari', 'Internet Explorer']; +var browsers = ["Firefox", "Chrome", "Opera", "Safari", "Internet Explorer"]; -browsers.forEach(function(browser) { - var li = document.createElement('li'); - li.textContent = browser; - fragment.appendChild(li); +browsers.forEach(function (browser) { + var li = document.createElement("li"); + li.textContent = browser; + fragment.appendChild(li); }); element.appendChild(fragment); diff --git a/files/es/web/api/document/createelement/index.md b/files/es/web/api/document/createelement/index.md index 95ecf9a3b911c3..862656e7e019e4 100644 --- a/files/es/web/api/document/createelement/index.md +++ b/files/es/web/api/document/createelement/index.md @@ -36,14 +36,14 @@ Crea un nuevo `
` y lo inserta antes del elemento con ID "`div1`". ### HTML ```html - + - - ||Trabajando con elementos|| - - -
El texto superior se ha creado dinámicamente.
- + + ||Trabajando con elementos|| + + +
El texto superior se ha creado dinámicamente.
+ ``` @@ -52,7 +52,7 @@ Crea un nuevo `
` y lo inserta antes del elemento con ID "`div1`". ```js document.body.onload = addElement; -function addElement () { +function addElement() { // crea un nuevo div // y añade contenido var newDiv = document.createElement("div"); diff --git a/files/es/web/api/document/createtextnode/index.md b/files/es/web/api/document/createtextnode/index.md index 0340608dcbcb54..c7a28191d25d60 100644 --- a/files/es/web/api/document/createtextnode/index.md +++ b/files/es/web/api/document/createtextnode/index.md @@ -19,29 +19,29 @@ var text = document.createTextNode(data); ## Ejemplo ```html - + - -createTextNode example - - - - - - - - -
- -

First line of paragraph.

- + + createTextNode example + + + + + + + + +
+ +

First line of paragraph.

+ ``` diff --git a/files/es/web/api/document/doctype/index.md b/files/es/web/api/document/doctype/index.md index 306b499e9889e7..5cb42ee69fd726 100644 --- a/files/es/web/api/document/doctype/index.md +++ b/files/es/web/api/document/doctype/index.md @@ -21,10 +21,17 @@ doctype = document.doctype; var doctypeObj = document.doctype; console.log( - "doctypeObj.name: " + doctypeObj.name + "\n" + - "doctypeObj.internalSubset: " + doctypeObj.internalSubset + "\n" + - "doctypeObj.publicId: " + doctypeObj.publicId + "\n" + - "doctypeObj.systemId: " + doctypeObj.systemId + "doctypeObj.name: " + + doctypeObj.name + + "\n" + + "doctypeObj.internalSubset: " + + doctypeObj.internalSubset + + "\n" + + "doctypeObj.publicId: " + + doctypeObj.publicId + + "\n" + + "doctypeObj.systemId: " + + doctypeObj.systemId, ); ``` diff --git a/files/es/web/api/document/documentelement/index.md b/files/es/web/api/document/documentelement/index.md index 52f4226a33be3f..f87e9920ab616e 100644 --- a/files/es/web/api/document/documentelement/index.md +++ b/files/es/web/api/document/documentelement/index.md @@ -24,8 +24,8 @@ var rootElement = document.documentElement; var firstTier = rootElement.childNodes; // firstTier el la NodeList de los hijos directos del elemento raízof the direct children of the root element for (var i = 0; i < firstTier.length; i++) { - // hacer algo con cada uno de los hijos directos del elemento raíz - // como firstTier[i] + // hacer algo con cada uno de los hijos directos del elemento raíz + // como firstTier[i] } ``` diff --git a/files/es/web/api/document/embeds/index.md b/files/es/web/api/document/embeds/index.md index 4ec5a27bc05f69..66aae3d3534d95 100644 --- a/files/es/web/api/document/embeds/index.md +++ b/files/es/web/api/document/embeds/index.md @@ -10,7 +10,7 @@ slug: Web/API/Document/embeds ## Sintaxis ```js -nodeList = document.embeds +nodeList = document.embeds; ``` ### Valor diff --git a/files/es/web/api/document/execcommand/index.md b/files/es/web/api/document/execcommand/index.md index b889864391cbc6..104afbb5d03346 100644 --- a/files/es/web/api/document/execcommand/index.md +++ b/files/es/web/api/document/execcommand/index.md @@ -12,7 +12,7 @@ Cuando un documento HTML se ha cambiado a `designMode`, el objeto de documento e ## Sintaxis ```js -execCommand(aCommandName, aShowDefaultUI, aValueArgument) +execCommand(aCommandName, aShowDefaultUI, aValueArgument); ``` ### Parámetros diff --git a/files/es/web/api/document/exitfullscreen/index.md b/files/es/web/api/document/exitfullscreen/index.md index 15d783427f1e76..3327505127e6f7 100644 --- a/files/es/web/api/document/exitfullscreen/index.md +++ b/files/es/web/api/document/exitfullscreen/index.md @@ -7,7 +7,7 @@ slug: Web/API/Document/exitFullscreen El método **`exitFullscreen()`** de {{domxref("Document")}} solicita que el elemento de este documento que se presenta actualmente en modo de pantalla completa se retire del modo de pantalla completa, restaurando el estado anterior de la pantalla. Esto generalmente revierte los efectos de una llamada previa a {{domxref("Element.requestFullscreen()")}}. -La excepción es si otro elemento ya estaba en modo de pantalla completa cuando el elemento actual se colocó en modo de pantalla completa usando `requestFullscreen()`. En ese caso, el elemento de pantalla completa anterior se restaura al estado de pantalla completa. En esencia, se mantiene un [stack](https://es.wikipedia.org/wiki/Stack_(abstract_data_type)) de elementos de pantalla completa. +La excepción es si otro elemento ya estaba en modo de pantalla completa cuando el elemento actual se colocó en modo de pantalla completa usando `requestFullscreen()`. En ese caso, el elemento de pantalla completa anterior se restaura al estado de pantalla completa. En esencia, se mantiene un [stack]() de elementos de pantalla completa. ## Sintaxis @@ -30,9 +30,9 @@ Este ejemplo hace que el documento actual entre y salga de una presentación a p ```js document.onclick = function (event) { if (document.fullscreenElement) { - document.exitFullscreen() + document.exitFullscreen(); } else { - document.documentElement.requestFullscreen() + document.documentElement.requestFullscreen(); } }; ``` diff --git a/files/es/web/api/document/getelementbyid/index.md b/files/es/web/api/document/getelementbyid/index.md index 1438abb8bc8cad..361c477869cb1c 100644 --- a/files/es/web/api/document/getelementbyid/index.md +++ b/files/es/web/api/document/getelementbyid/index.md @@ -29,14 +29,14 @@ elemento = document.getElementById(id); ```html - - Ejemplo getElementById - - -

Cualquier texto acá

- - - + + Ejemplo getElementById + + +

Cualquier texto acá

+ + + ``` @@ -44,8 +44,8 @@ elemento = document.getElementById(id); ```js function changeColor(newColor) { - var elem = document.getElementById('para'); - elem.style.color = newColor; + var elem = document.getElementById("para"); + elem.style.color = newColor; } ``` @@ -64,24 +64,24 @@ A diferencia de otros métodos similares, getElementById sólo está disponible ```html - - + + Documento - - + +
-

Hola Mundo 1

-

Hola Mundo 2

-

Hola palabra 3

-

Hola palabra 4

+

Hola Mundo 1

+

Hola Mundo 2

+

Hola palabra 3

+

Hola palabra 4

- + ``` @@ -91,8 +91,8 @@ Si no existe un elemento con la `id` solicitada, esta función devuelve `null`. ```js var element = document.createElement("div"); -element.id = 'testqq'; -var el = document.getElementById('testqq'); // el será null! +element.id = "testqq"; +var el = document.getElementById("testqq"); // el será null! ``` **Documentos no-HTML**. La implementación de DOM debe tener información que diga que atributos son del tipo ID. Los atributos con el nombre "id" son son del tipo ID a menos que se los defina en el DTD del documento. El atributo `id` es definido para ser del tipo ID en los casos comunes de [XHTML](/es/docs/XHTML), [XUL](/es/docs/Mozilla/Tech/XUL), y otros. Las implementaciones que no sepan si los atributos son o no del tipo ID se espera que retornen null. diff --git a/files/es/web/api/document/getelementsbyclassname/index.md b/files/es/web/api/document/getelementsbyclassname/index.md index 0da14a31724e89..445b60ab950a78 100644 --- a/files/es/web/api/document/getelementsbyclassname/index.md +++ b/files/es/web/api/document/getelementsbyclassname/index.md @@ -23,28 +23,31 @@ var elementos = elementoRaiz.getElementsByClassName(nombres); Obtener todos los elementos de la clase 'prueba' ```js -document.getElementsByClassName('prueba'); +document.getElementsByClassName("prueba"); ``` Obtener todos los elementos que tengan al mismo tiempo las clases 'rojo' y 'prueba' ```js -document.getElementsByClassName('rojo prueba'); +document.getElementsByClassName("rojo prueba"); ``` Obtener todos los elementos que tengan la clase 'prueba' y que estén dentro de un elemento de ID 'principal' ```js -document.getElementById('principal').getElementsByClassName('prueba'); +document.getElementById("principal").getElementsByClassName("prueba"); ``` También podemos usar los metodos de Array.prototype en cualquier {{ domxref("HTMLCollection") }} pasando el _HTMLCollection_ como el valor _this_ del método. Aquí buscaremos todos los elementos div de la clase 'test': ```js -var testElements = document.getElementsByClassName('test'); -var testDivs = Array.prototype.filter.call(testElements, function(testElement){ - return testElement.nodeName === 'DIV'; -}); +var testElements = document.getElementsByClassName("test"); +var testDivs = Array.prototype.filter.call( + testElements, + function (testElement) { + return testElement.nodeName === "DIV"; + }, +); ``` ## Especificaciones diff --git a/files/es/web/api/document/getelementsbyname/index.md b/files/es/web/api/document/getelementsbyname/index.md index f900fde1b9f918..b91df3bb18f143 100644 --- a/files/es/web/api/document/getelementsbyname/index.md +++ b/files/es/web/api/document/getelementsbyname/index.md @@ -10,7 +10,7 @@ Returns a nodelist collection with a given {{domxref("element.name","name")}} in ## Sintaxis ```js -elements = document.getElementsByName(name) +elements = document.getElementsByName(name); ``` - `elements` es una colección existente de {{domxref("NodeList")}} @@ -19,21 +19,21 @@ elements = document.getElementsByName(name) ## Ejemplo ```html - + - - ... - - - -
-
- - - + + ... + + + +
+
+ + + ``` diff --git a/files/es/web/api/document/getelementsbytagname/index.md b/files/es/web/api/document/getelementsbytagname/index.md index 3ce5e903328357..fe3a30d4de215e 100644 --- a/files/es/web/api/document/getelementsbytagname/index.md +++ b/files/es/web/api/document/getelementsbytagname/index.md @@ -12,7 +12,7 @@ Devuelve una lista de elementos con un nombre determinado. Se busca en todo el d ### Sintaxis ```js -elements = document.getElementsByTagName(name) +elements = document.getElementsByTagName(name); ``` - `elements` es una lista 'viva' (`NodeList`) de los elementos encontrados en el orden en que han aparecido en el árbol. @@ -26,74 +26,68 @@ Ten en cuenta que cuando el nodo en el que se invoca `getElementsByTagName`, no ```html + + ejemplo de getElementsByTagName - -ejemplo de getElementsByTagName + + + +

Algo de texto

+

Algo de texto

-function div2ParaElems() -{ - var div2 = document.getElementById("div2") - var div2Paras = div2.getElementsByTagName("p"); +
+

Algo de texto en div1

+

Algo de texto en div1

+

Algo de texto en div1

- var num = div2Paras.length; - - alert("Hay " + num + "

elementos en el elemento div2"); -} - - - - - -

Algo de texto

-

Algo de texto

- -
-

Algo de texto en div1

-

Algo de texto en div1

-

Algo de texto en div1

- -
-

Algo de texto en div2

-

Algo de texto en div2

+
+

Algo de texto en div2

+

Algo de texto en div2

+
-
- -

Algo de texto

-

Algo de texto

-
+

Algo de texto

+

Algo de texto

-
+
- +
- + + ``` diff --git a/files/es/web/api/document/getelementsbytagnamens/index.md b/files/es/web/api/document/getelementsbytagnamens/index.md index bdcb0aa6049989..c17dd3c0e41ee2 100644 --- a/files/es/web/api/document/getelementsbytagnamens/index.md +++ b/files/es/web/api/document/getelementsbytagnamens/index.md @@ -12,7 +12,7 @@ Devuelve una lista de elementos cuyo nombre pertenece a un determinado 'namespac ### Sintaxis ```js -elements = document.getElementsByTagNameNS(namespace,name) +elements = document.getElementsByTagNameNS(namespace, name); ``` - `elements` es una lista del tipo `NodeList` de los elementos encontrados, en el orden en el que aparecen en el árbol. @@ -29,74 +29,77 @@ Para usar el siguiente ejemplo, copia y pega en un documento con la extensión x ```html - - -ejemplo de getElementsByTagNameNS - - - - - -

Algo de texto exterior

-

Algo de texto exterior

- -
-

Algo de texto en div1

-

Algo de texto en div1

-

Algo de texto en div1

- -
-

Algo de texto en div2

-

Algo de texto en div2

+ + ejemplo de getElementsByTagNameNS + + + + + +

Algo de texto exterior

+

Algo de texto exterior

+ +
+

Algo de texto en div1

+

Algo de texto en div1

+

Algo de texto en div1

+ +
+

Algo de texto en div2

+

Algo de texto en div2

+
-
- -

Algo de texto exterior

-

Algo de texto exterior

-
+

Algo de texto exterior

+

Algo de texto exterior

-
+
- +
- + + ``` diff --git a/files/es/web/api/document/hasfocus/index.md b/files/es/web/api/document/hasfocus/index.md index 199e8e90d65626..be80813de99232 100644 --- a/files/es/web/api/document/hasfocus/index.md +++ b/files/es/web/api/document/hasfocus/index.md @@ -12,7 +12,7 @@ El atributo `hasFocus` devuelve `true` si el foco está en en algún sitio del d ### Sintaxis ```js -focused = element.hasFocus +focused = element.hasFocus; ``` ## Especificaciones diff --git a/files/es/web/api/document/head/index.md b/files/es/web/api/document/head/index.md index 46fff9f601b00e..95ead0547d645e 100644 --- a/files/es/web/api/document/head/index.md +++ b/files/es/web/api/document/head/index.md @@ -21,7 +21,7 @@ var aHead = document.head; alert(aHead.id); // "my-document-head"; -alert( document.head === document.querySelector("head") ); // true +alert(document.head === document.querySelector("head")); // true ``` ## Notas diff --git a/files/es/web/api/document/hidden/index.md b/files/es/web/api/document/hidden/index.md index b8083cf118980d..f650f4a0c90633 100644 --- a/files/es/web/api/document/hidden/index.md +++ b/files/es/web/api/document/hidden/index.md @@ -10,14 +10,14 @@ El **`Document.hidden`** Es una propiedad solo de lectura, retorna un valor Bool ## Sintaxis ```js -var boolean = document.hidden +var boolean = document.hidden; ``` ## Ejemplo ```js -document.addEventListener("visibilitychange", function() { - console.log( document.hidden ); +document.addEventListener("visibilitychange", function () { + console.log(document.hidden); // Modify behavior... }); ``` diff --git a/files/es/web/api/document_object_model/using_the_document_object_model/index.md b/files/es/web/api/document_object_model/using_the_document_object_model/index.md index afb1d8f1639f92..303e9c6fa77970 100644 --- a/files/es/web/api/document_object_model/using_the_document_object_model/index.md +++ b/files/es/web/api/document_object_model/using_the_document_object_model/index.md @@ -8,7 +8,7 @@ The W3C's DOM Level 1 Core is a powerful object model for changing the content t ## What is a content tree? -Many HTML authors may think of HTML as something flat -- a bunch of text with tags in the middle. However, it is something much more than that. Any HTML document (or for that matter any SGML document or XML document) is a tree structure. For example, the following document and tree structure are similar (although not identical -- see the notes on [whitespace in the DOM](/es/docs/Whitespace_in_the_DOM)): +Many HTML authors may think of HTML as something flat — a bunch of text with tags in the middle. However, it is something much more than that. Any HTML document (or for that matter any SGML document or XML document) is a tree structure. For example, the following document and tree structure are similar (although not identical — see the notes on [whitespace in the DOM](/es/docs/Whitespace_in_the_DOM)): ```html diff --git a/files/es/web/api/document_object_model/whitespace/index.md b/files/es/web/api/document_object_model/whitespace/index.md index 3443547829f901..bb5057ffa0984e 100644 --- a/files/es/web/api/document_object_model/whitespace/index.md +++ b/files/es/web/api/document_object_model/whitespace/index.md @@ -18,8 +18,8 @@ En el caso de HTML, los espacios en blanco se ignoran en gran medida: los espaci ### HTML largely ignores whitespace? -```html - +```html-nolint +

¡Hola mundo!

``` @@ -41,18 +41,18 @@ Cualquier carácter de espacio en blanco que esté fuera de los elementos HTML d Tomemos el siguiente documento, por ejemplo: -```html - +```html-nolint + - - Mi Documento - - -

Encabezado

-

- Párrafo -

- + + Mi Documento + + +

Encabezado

+

+ Párrafo +

+ ``` @@ -70,7 +70,7 @@ Tomemos otro ejemplo realmente simple. Para hacerlo más fácil, ilustramos todo Este ejemplo: -```html +```html-nolint

◦◦◦¡Hola◦⏎ ⇥⇥⇥⇥◦mundo!⇥◦◦

``` @@ -79,7 +79,7 @@ se representa en el navegador así: #### Ejemplo -```html hidden +```html-nolint hidden

¡Hola mundo!

``` @@ -100,35 +100,35 @@ Dentro de este contexto, el procesamiento de caracteres de espacio en blanco se 1. Primero, todos los espacios y tabulaciones inmediatamente antes y después de un salto de línea se ignoran, por lo que, si tomamos nuestro marcado de ejemplo anterior y aplicamos esta primera regla, obtenemos: - ```html -

◦◦◦¡Hola⏎ - ◦mundo!⇥◦◦

- ``` + ```html-nolint +

◦◦◦¡Hola⏎ + ◦mundo!⇥◦◦

+ ``` 2. A continuación, todos los caracteres de tabulación se tratan como caracteres de espacio, por lo que el ejemplo se convierte en: - ```html -

◦◦◦¡Hola⏎ - ◦mundo!◦◦◦

- ``` + ```html-nolint +

◦◦◦¡Hola⏎ + ◦mundo!◦◦◦

+ ``` 3. A continuación, los saltos de línea se convierten en espacios: - ```html -

◦◦◦¡Hola◦◦mundo!◦◦◦

- ``` + ```html +

◦◦◦¡Hola◦◦mundo!◦◦◦

+ ``` 4. Después de eso, cualquier espacio inmediatamente después de otro espacio (incluso a través de dos elementos en línea separados) se ignora, por lo que terminamos con: - ```html -

◦¡Hola◦mundo!◦

- ``` + ```html +

◦¡Hola◦mundo!◦

+ ``` 5. Y finalmente, las secuencias de espacios al principio y al final de una línea se eliminan, por lo que eventualmente obtenemos esto: - ```html -

¡Hola◦mundo!

- ``` + ```html +

¡Hola◦mundo!

+ ``` Es por eso que las personas que visitan la página web simplemente verán la frase "¡Hola mundo!" muy bien escrita en la parte superior de la página, en lugar de un "!Hola" con una sangría extraña, seguido de un "mundo!" en la línea debajo de esa. @@ -140,7 +140,7 @@ Anteriormente, solo miramos elementos que contienen elementos en línea y contex En este contexto, los espacios en blanco se tratan de manera muy diferente. Veamos un ejemplo para explicar cómo. Hemos marcado los espacios en blanco como antes. -```html +```html-nolint ⏎ ⇥
◦◦¡Hola◦◦
⏎ ⏎ @@ -154,7 +154,7 @@ Esto se renderiza así: #### Ejemplo -```html hidden +```html-nolint hidden
¡Hola
@@ -170,23 +170,23 @@ Podemos resumir cómo se maneja el espacio en blanco aquí de la siguiente maner 1. Debido a que estamos dentro de un contexto de formato de bloque, todo debe ser un bloque, por lo que nuestros 3 nodos de texto también se convierten en bloques, al igual que los 2 `
`s. Los bloques ocupan todo el ancho disponible y se apilan unos encima de los otros, lo cual significa que terminamos con un diseño compuesto por esta lista de bloques: - ```html - ⏎⇥ - ◦◦¡Hola◦◦ - ⏎◦◦◦ - ◦◦mundo!◦◦ - ◦◦⏎ - ``` + ```html + ⏎⇥ + ◦◦¡Hola◦◦ + ⏎◦◦◦ + ◦◦mundo!◦◦ + ◦◦⏎ + ``` 2. Esto luego se simplifica aún más aplicando las reglas de procesamiento para espacios en blanco en contextos de formato en línea a estos bloques: - ```html - - ¡Hola - - mundo! - - ``` + ```html + + ¡Hola + + mundo! + + ``` 3. Los 3 bloques vacíos que tenemos ahora no van a ocupar ningún espacio en el diseño final, porque no contienen nada, así que terminaremos con solo 2 bloques ocupando espacio en la página. Las personas que visitan la página web ven las palabras "!Hola" y "mundo!" en 2 líneas separadas, ya que esperarías que se distribuyeran 2 `
`s. El motor del navegador esencialmente ha ignorado todos los espacios en blanco que se agregaron en el código fuente. @@ -218,7 +218,7 @@ Considera este ejemplo (nuevamente, los espacios en blanco en el HTML están mar } ``` -```html +```html-nolint
    ⏎ ◦◦
  • ⏎ @@ -239,13 +239,22 @@ Esto se traduce de la siguiente manera: #### Ejemplo ```css hidden -.people-list { list-style-type: none; margin: 0; padding: 0; } -.people-list li { display: inline-block; width: 2em; height: 2em; background: #f06; border: 1px solid; } +.people-list { + list-style-type: none; + margin: 0; + padding: 0; +} +.people-list li { + display: inline-block; + width: 2em; + height: 2em; + background: #f06; + border: 1px solid; +} ``` ```html hidden
      -
    • @@ -255,7 +264,6 @@ Esto se traduce de la siguiente manera:
    • -
    ``` @@ -311,7 +319,7 @@ li { También puedes resolver este problema colocando los elementos de tu lista en la misma línea en la fuente, lo cual hace que los nodos de espacios en blanco no se creen en primer lugar: -```html +```html-nolint
  • ``` @@ -337,7 +345,6 @@ El siguiente código JavaScript define varias funciones que facilitan el manejo * espacios irrompibles (y también algunos otros caracteres). */ - /** * Determina si el contenido de texto de un nodo es completamente de espacios en blanco. * @@ -346,13 +353,11 @@ El siguiente código JavaScript define varias funciones que facilitan el manejo * @return True si todo el contenido de texto de |nod| es espacio en blanco, * de lo contrario false. */ -function is_all_ws( nod ) -{ +function is_all_ws(nod) { // Usa las características de String y RegExp de ECMA-262 Edición 3 - return !(/[^\t\n\r ]/.test(nod.textContent)); + return !/[^\t\n\r ]/.test(nod.textContent); } - /** * Determina si un nodo debe ser ignorado por las funciones del iterador. * @@ -363,10 +368,11 @@ function is_all_ws( nod ) * y de lo contrario false. */ -function is_ignorable( nod ) -{ - return ( nod.nodeType == 8) || // Un nodo comment - ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nodo text, todo es eeb +function is_ignorable(nod) { + return ( + nod.nodeType == 8 || // Un nodo comment + (nod.nodeType == 3 && is_all_ws(nod)) + ); // un nodo text, todo es eeb } /** @@ -382,8 +388,7 @@ function is_ignorable( nod ) * ignorable según |is_ignorable|, o * 2) null si no existe tal nodo. */ -function node_before( sib ) -{ +function node_before(sib) { while ((sib = sib.previousSibling)) { if (!is_ignorable(sib)) return sib; } @@ -400,8 +405,7 @@ function node_before( sib ) * ignorable según |is_ignorable|, o * 2) null si no existe tal nodo. */ -function node_after( sib ) -{ +function node_after(sib) { while ((sib = sib.nextSibling)) { if (!is_ignorable(sib)) return sib; } @@ -420,9 +424,8 @@ function node_after( sib ) * ignorable según |is_ignorable|, o * 2) null si no existe tal nodo. */ -function last_child( par ) -{ - var res=par.lastChild; +function last_child(par) { + var res = par.lastChild; while (res) { if (!is_ignorable(res)) return res; res = res.previousSibling; @@ -440,9 +443,8 @@ function last_child( par ) * ignorable según |is_ignorable|, o * 2) null si no existe tal nodo. */ -function first_child( par ) -{ - var res=par.firstChild; +function first_child(par) { + var res = par.firstChild; while (res) { if (!is_ignorable(res)) return res; res = res.nextSibling; @@ -459,13 +461,11 @@ function first_child( par ) * @return Una cadena que proporciona el contenido del nodo de texto con * espacios en blanco colapsados. */ -function data_of( txt ) -{ +function data_of(txt) { var data = txt.textContent; // Usa las características de String y RegExp de ECMA-262 Edición 3 data = data.replace(/[\t\n\r ]+/g, " "); - if (data.charAt(0) == " ") - data = data.substring(1, data.length); + if (data.charAt(0) == " ") data = data.substring(1, data.length); if (data.charAt(data.length - 1) == " ") data = data.substring(0, data.length - 1); return data; @@ -478,10 +478,8 @@ El siguiente código demuestra el uso de las funciones anteriores. Itera sobre l ```js var cur = first_child(document.getElementById("test")); -while (cur) -{ - if (data_of(cur.firstChild) == "Este es el tercer párrafo.") - { +while (cur) { + if (data_of(cur.firstChild) == "Este es el tercer párrafo.") { cur.className = "magic"; cur.firstChild.textContent = "Este es el párrafo mágico."; } diff --git a/files/es/web/api/element/innerhtml/index.md b/files/es/web/api/element/innerhtml/index.md index ba7d90e0b9ed3f..ebdb5b6d9c594c 100644 --- a/files/es/web/api/element/innerhtml/index.md +++ b/files/es/web/api/element/innerhtml/index.md @@ -59,9 +59,8 @@ document.body.innerHTML = ""; // Reemplaza el contenido de con una cadena El siguiente ejemplo recupera la sintaxis HTML actual del documento y reemplaza los caracteres "`<`" con la entidad HTML "`<`", convirtiendo esencialmente el HTML en texto plano. Esto luego se envuelve en un elemento [\
    ](/es/docs/Web/HTML/Element/pre). Entonces el valor de innerHTML se cambia a esta nueva cadena. Como resultado, se muestra en pantalla el código fuente completo de la página.
 
 ```js
-document.documentElement.innerHTML = "
    " +
-         document.documentElement.innerHTML.replace(/";
+document.documentElement.innerHTML =
+  "
    " + document.documentElement.innerHTML.replace(/";
 ```
 
 > **Nota:** Esta propiedad fue inicialmente implementada por navegadores web, y luego especificada por el WHATWG y el W3C en HTML5. Implementaciones antiguas no la implementarán exactamente igual. Por ejemplo, cuando el texto es ingresado en una caja de **texto multilinea (elemento `textarea`)**, Internet Explorer cambiará el valor de la propiedad `innerHTML` del **elemento `textarea`**, mientras que los navegadores Gecko no lo hacen.
diff --git a/files/es/web/api/htmlimageelement/index.md b/files/es/web/api/htmlimageelement/index.md
index acad2052f15372..370c116b8cb5b3 100644
--- a/files/es/web/api/htmlimageelement/index.md
+++ b/files/es/web/api/htmlimageelement/index.md
@@ -69,13 +69,13 @@ _Heredados de su padre, {{domxref("HTMLElement")}}._
 
 ```js
 var img1 = new Image(); // HTML5 Constructor
-img1.src = 'image1.png';
-img1.alt = 'alt';
+img1.src = "image1.png";
+img1.alt = "alt";
 document.body.appendChild(img1);
 
-var img2 = document.createElement('img'); // Uso DOM HTMLImageElement
-img2.src = 'image2.jpg';
-img2.alt = 'alt text';
+var img2 = document.createElement("img"); // Uso DOM HTMLImageElement
+img2.src = "image2.jpg";
+img2.alt = "alt text";
 document.body.appendChild(img2);
 
 // Usando la primera imagen en el documento
diff --git a/files/es/web/api/htmlinputelement/invalid_event/index.md b/files/es/web/api/htmlinputelement/invalid_event/index.md
index 3f41c72485698d..951990f776ec5b 100644
--- a/files/es/web/api/htmlinputelement/invalid_event/index.md
+++ b/files/es/web/api/htmlinputelement/invalid_event/index.md
@@ -43,19 +43,25 @@ Si un formulario es enviado con un valor inválido, los elementos pressentados s
 ```html
 
    
   
      
-    
      • 
-    
      • 
+    
    • 
+      
+    
      • 
+    
      • 
   
    
-
    
+
+
    
 ```
 
 ### JavaScript
 
 ```js
-const input = document.querySelector('input');
-const log = document.getElementById('log');
+const input = document.querySelector("input");
+const log = document.getElementById("log");
 
-input.addEventListener('invalid', logValue);
+input.addEventListener("invalid", logValue);
 
 function logValue(e) {
   log.textContent += e.srcElement.value;
diff --git a/files/es/web/api/htmlinputelement/select_event/index.md b/files/es/web/api/htmlinputelement/select_event/index.md
index f34060cad6519c..8d8fb9449f46ca 100644
--- a/files/es/web/api/htmlinputelement/select_event/index.md
+++ b/files/es/web/api/htmlinputelement/select_event/index.md
@@ -18,32 +18,32 @@ window.onselect = funcRef;
 
 ```html
 
-
-
-onselect test
-
-
-
-
-
-
-
-
-
+
+  
 
 ```
 
diff --git a/files/es/web/api/htmlmediaelement/canplay_event/index.md b/files/es/web/api/htmlmediaelement/canplay_event/index.md
index f5fffde17a9b4a..b3daa5a04c91c3 100644
--- a/files/es/web/api/htmlmediaelement/canplay_event/index.md
+++ b/files/es/web/api/htmlmediaelement/canplay_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'HTMLMediaElement: canplay'
+title: "HTMLMediaElement: canplay"
 slug: Web/API/HTMLMediaElement/canplay_event
 ---
 
@@ -8,27 +8,25 @@ El evento canplay es lanzado cuando el elemento [\