Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion 1-js/02-first-steps/01-hello-world/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Primero, veamos cómo adjuntamos un script a una página web. Para entornos del

## La etiqueta "script"

Los programas de JavaScript se pueden insertar en cualquier parte de un documento HTML con la ayuda de la etiqueta `<script>`.
Los programas de JavaScript se pueden insertar en casi cualquier parte de un documento HTML con el uso de la etiqueta `<script>`.

Por ejemplo:

Expand Down
24 changes: 0 additions & 24 deletions 1-js/04-object-basics/01-object/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,30 +92,6 @@ let user = {
```
Eso se llama una coma "final" o "colgante". Facilita agregar, eliminar y mover propiedades, porque todas las líneas se vuelven similares.

````smart header="Los objetos con const pueden cambiarse"
Toma en cuenta: un objeto declarado con `const` *puede* ser modificado.

Por ejemplo:

```js run
const user = {
name: "John"
};

*!*
user.name = "Pete"; // (*)
*/!*

alert(user.name); // Pete
```

Puede parecer que la linea `(*)` ocasionaría un error, pero no. El `const` restablece el valor de `user` pero no su contenido.

El `const` podría dar error solo si intentamos asignar `user=...` en la totalidad de su contenido.

Hay otra manera de crear objetos con propiedades constantes, las veremos después en el capítulo <info:property-descriptors>.
````

## Corchetes

La notación de punto no funciona para acceder a propiedades con claves de más de una palabra:
Expand Down
25 changes: 24 additions & 1 deletion 1-js/04-object-basics/02-object-copy/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ admin.name = 'Pete'; // cambiado por la referencia "admin"
alert(*!*user.name*/!*); // 'Pete', los cambios se ven desde la referencia "user"
```


Es como si tuviéramos un gabinete con dos llaves y usáramos una de ellas (`admin`) para acceder a él. Si más tarde usamos la llave (`user`), podemos ver los cambios.

## Comparación por referencia
Expand Down Expand Up @@ -230,6 +229,30 @@ Para corregir esto, debemos usar un bucle de clonación que examine cada valor d

Podemos usar recursividad para implementarlo. O, para no inventar la rueda, tomar una implementación existente, por ejemplo [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep) de la librería JavaScript [lodash](https://lodash.com).

````smart header="Los objetos con const pueden cambiarse"
Un efecto secundario importante de almacentar objetos como referencias es que un objeto declarado con `const` *puede* ser modificado.

Por ejemplo:

```js run
const user = {
name: "John"
};

*!*
user.name = "Pete"; // (*)
*/!*

alert(user.name); // Pete
```

Puede parecer que la linea `(*)` ocasionaría un error, pero no. El valor de `user` es constante, debe siempre hacer referencia al mismo objeto. Pero sus propiedades pueden cambiar libremente.

En otras palabras, `const user` solamente da error cuando intentamos asignar `user=...` como un todo.

Si realmente queremos hacer constantes las propiedades del objeto, es también posible pero usando métodos totalmente diferentes, las veremos después en el capítulo <info:property-descriptors>.
````

## Resumen

Los objetos son asignados y copiados por referencia. En otras palabras, una variable almacena no el valor del objeto sino una referencia (dirección de memoria) del valor. Entoncess copiar tal variable o pasarla como argumento de función copia la referencia, no el objeto.
Expand Down
6 changes: 4 additions & 2 deletions 2-ui/4-forms-controls/3-events-change-input/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,13 @@ Por ejemplo, el siguiente código evita tales eventos y muestra qué es los que

Por favor ten en cuenta que no solo es posible copiar/pegar texto, sino cualquier cosa. Por ejemplo, podemos copiar un archivo en el gestor de archivos del SO y pegarlo.

Hay una lista de métodos [en la especificación](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) que puede funcionar con diferentes tipos de datos incluyendo archivos, leer/escribir del portapapeles.
Esto es porque `clipboardData` implementa la interfaz `DataTransfer`, usada comúnmente para "arrastrar y soltar" y "copiar y pegar". Ahora esto está fuera de nuestro objetivo, pero puedes encontrar sus métodos [en la especificación](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).

Pero ten en cuenta que el portapapeles es algo a nivel "global" del SO. La mayoría de los navegadores dan acceso a leer/escribir del portapapeles dentro del alcance del usuario por cuestiones de seguridad, e.g. al manejar eventos `onclick`.
```warn header="ClipboardAPI: restricciones para seguridad del usuario"
El portapapeles es algo a nivel "global" del SO. Por cuestiones de seguridad, la mayoría de los navegadores dan acceso al portapapeles solamente bajo determinadas acciones del usuario, por ejemplo al manejar eventos `onclick`.

Además está prohibido generar eventos "personalizados" del portapapeles con `dispatchEvent` en todos los navegadores excepto Firefox.
```

## Resumen

Expand Down
2 changes: 1 addition & 1 deletion 2-ui/5-loading/01-onload-ondomcontentloaded/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ let analyticsData = { /* objeto con datos recopilados */ };

window.addEventListener("unload", function() {
navigator.sendBeacon("/analytics", JSON.stringify(analyticsData));
};
});
```

- La solicitud se envía como POST.
Expand Down
2 changes: 1 addition & 1 deletion 2-ui/5-loading/02-script-async-defer/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ El atributo `async` significa que el script es completamente independiente:
- `DOMContentLoaded` puede suceder antes que un script asincrónico (si un script asincrónico termina de cargar una vez la página está completa)
- ...o después de un script asincrónico (si tal script asincrónico es pequeño o está en cache)

En otras palabras, los scripts `async` cargan en segundo plano y se ejecutan cuando están listos. El DOM y otros scripts no esperan por ellos, y ellos no esperan por nada. Un totalmente independiente script que se ejecuta en cuanto se ha cargado. Tan simple como es posible, ¿cierto?
En otras palabras, los scripts `async` cargan en segundo plano y se ejecutan cuando están listos. El DOM y otros scripts no esperan por ellos, y ellos no esperan por nada. Un script totalmente independiente que se ejecuta en cuanto se ha cargado. Tan simple como es posible, ¿cierto?

Aquí hay un ejemplo similar al que vimos con `defer`: Dos scripts `long.js` y `small.js`, pero ahora con `async` en lugar de `defer`.

Expand Down