Merge pull request #393 from danilobrinu/onload-onerror

onload and onerror

Author: Maksumi Murakami

2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.md

@@ -1,6 +1,6 @@
 
-The algorithm:
-1. Make `img` for every source.
-2. Add `onload/onerror` for every image.
-3. Increase the counter when either `onload` or `onerror` triggers.
-4. When the counter value equals to the sources count -- we're done: `callback()`.
+El algoritmo:
+1. Crear una `img` para cada fuente.
+2. Agregar los eventos `onload/onerror` para cada imágen.
+3. Incrementar el contador cuando el evento `onload` o el evento `onerror` se dispare.
+4. Cuando el valor del contador es igual a la cantidad de fuentes, hemos terminado: `callback()`.

2-ui/5-loading/03-onload-onerror/1-load-img-callback/task.md

@@ -2,35 +2,35 @@ importance: 4
 
 ---
 
-# Load images with a callback
+# Cargando imágenes con una un función de retorno (`callback`)
 
-Normally, images are loaded when they are created. So when we add `<img>` to the page, the user does not see the picture immediately. The browser needs to load it first.
+Normalmente, las imágenes son cargadas cuando son creadas. Entonces, cuando nosotros agregamos `<img>` a la página el usuario no ve la imágen inmediatamente. El navegador necesita cargarlo primero.
 
-To show an image immediately, we can create it "in advance", like this:
+Para mostrar una imágen inmediatamente, podemos crearlo "en avance", como esto:
 
 ```js
 let img = document.createElement('img');
 img.src = 'my.jpg';
 ```
 
-The browser starts loading the image and remembers it in the cache. Later, when the same image appears in the document (no matter how), it shows up immediately.
+El navegador comienza a cargar la imágen y lo guarda en el cache. Después cuando la misma imágen aparece en el documento (no importa cómo) la muestra inmediatamente.
 
-**Create a function `preloadImages(sources, callback)` that loads all images from the array `sources` and, when ready, runs `callback`.**
+**Crear una función `preloadImages(sources, callback)` que cargue todas las imágenes desde una lista de fuentes (`sources`) y, cuando esten listas, ejecutar la función de retorno (`callback`).**
 
-For instance, this will show an `alert` after the images are loaded:
+Por ejemplo: esto puede mostrar una alerta (`alert`) después de que la imágen sea cargada:
 
 ```js
 function loaded() {
-  alert("Images loaded")
+  alert("Imágenes cargadas")
 }
 
 preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);
 ```
 
-In case of an error, the function should still assume the picture "loaded".
+En caso de un error, la función debería seguir asumiendo que la imágen ha sido "cargada".
 
-In other words, the `callback` is executed when all images are either loaded or errored out.
+En otras palabras, la función de retorno (`callback`) es ejecutada cuando todas las imágenes han sido cargadas o no.
 
-The function is useful, for instance, when we plan to show a gallery with many scrollable images, and want to be sure that all images are loaded.
+La función es útil, por ejemplo, cuando planeamos mostrar una galería con muchas imágenes desplazables y estar seguros que todas las imágenes estan cargadas. 
 
-In the source document you can find links to test images, and also the code to check whether they are loaded or not. It should output `300`.
+En el documento fuente puedes encontrar enlaces para probar imágenes y también el codigo para verificar si han sido cargadas o no. Debería devolver `300`.

2-ui/5-loading/03-onload-onerror/article.md

@@ -1,187 +1,187 @@
-# Resource loading: onload and onerror
+# Carga de recursos: onload y onerror
 
-The browser allows us to track the loading of external resources -- scripts, iframes, pictures and so on.
+El navegador nos permite hacer seguimiento de la carga de recursos externos: scripts, iframes, imagenes y más.
 
-There are two events for it:
+Hay dos eventos para eso:
 
-- `onload` -- successful load,
-- `onerror` -- an error occurred.
+- `onload` -- cuando cargó exitosamente,
+- `onerror` -- cuando un error ha ocurrido.
 
-## Loading a script
+## Cargando un script
 
-Let's say we need to load a third-party script and call a function that resides there.
+Digamos que tenemos que cargar un script de terceros y llamar una función que se encuentra dentro.
 
-We can load it dynamically, like this:
+Podemos cargarlo dinámicamente de esta manera:
 
 ```js
-let script = document.createElement('script');
+let script = document.createElement("script");
 script.src = "my.js";
 
 document.head.append(script);
 ```
 
-...But how to run the function that is declared inside that script? We need to wait until the script loads, and only then we can call it.
+...pero ¿cómo podemos ejecutar la función que esta dentro del script? Necesitamos esperar hasta que el script haya cargado, y solo después podemos llamarlo.
 
 ```smart
-For our own scripts we could use [JavaScript modules](info:modules) here, but they are not widely adopted by third-party libraries.
+Para nuestros scripts podemos usar [JavaScript modules](info:modules) aquí, pero no está adoptado ampliamente por bibliotecas de terceros.
 ```
 
 ### script.onload
 
-The main helper is the `load` event. It triggers after the script was loaded and executed.
+El evento `load` se dispara después de que script sea cargado y ejecutado.
 
-For instance:
+Por ejemplo:
 
 ```js run untrusted
 let script = document.createElement('script');
 
-// can load any script, from any domain
+// podemos cargar cualquier script desde cualquier dominio
 script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
 document.head.append(script);
 
 *!*
 script.onload = function() {
-  // the script creates a helper function "_"
-  alert(_); // the function is available
+  // el script crea una función de ayuda "_"
+  alert(_); // la función está disponible
 };
 */!*
 ```
 
-So in `onload` we can use script variables, run functions etc.
+Entonces en `onload` podemos usar variables, ejecutar funciones, etc.
 
-...And what if the loading failed? For instance, there's no such script (error 404) or the server is down (unavailable).
+...¿y si la carga falla? Por ejemplo: no hay tal script (error 404) en el servidor o el servidor está caído (no diponible).
 
 ### script.onerror
 
-Errors that occur during the loading of the script can be tracked in an `error` event.
+Los errores que ocurren durante la carga de un script pueden ser rastreados en el evento `error`.
 
-For instance, let's request a script that doesn't exist:
+Por ejemplo, hagamos una petición a un script que no existe:
 
 ```js run
 let script = document.createElement('script');
-script.src = "https://example.com/404.js"; // no such script
+script.src = "https://example.com/404.js"; // no hay tal script
 document.head.append(script);
 
 *!*
 script.onerror = function() {
-  alert("Error loading " + this.src); // Error loading https://example.com/404.js
+  alert("Error al cargar " + this.src); // Error al cargar https://example.com/404.js
 };
 */!*
 ```
 
-Please note that we can't get HTTP error details here. We don't know if it was an error 404 or 500 or something else. Just that the loading failed.
+Por favor nota que como no podemos obtener detalles del error HTTP aquí, no podemos saber if fue un error 404 o algo diferente. Solo el error de carga.
 
 ```warn
-Events `onload`/`onerror` track only the loading itself.
+Los eventos `onload/onerror` rastrean solamente la carga de ellos mismos.
 
-Errors that may occur during script processing and execution are out of scope for these events. That is: if a script loaded successfully, then `onload` triggers, even if it has programming errors in it. To track script errors, one can use `window.onerror` global handler.
+Los errores que pueden ocurrir durante el procesamiento y ejecución están fuera del alcance para esos eventos. Eso es: si un script es cargado de manera exitosa, incluso si tiene errores de programación adentro, el evento `onload` se dispara. Para rastrear los errores del script un puede usar el manejador global `window.onerror`;
 ```
 
-## Other resources
+## Otros recursos
 
-The `load` and `error` events also work for other resources, basically for any resource that has an external `src`.
+Los eventos `load` y `error` también funcionan para otros recursos, básicamente para cualquiera que tenga una `src` externa.
 
-For example:
+Por ejemplo:
 
 ```js run
-let img = document.createElement('img');
+let img = document.createElement("img");
 img.src = "https://js.cx/clipart/train.gif"; // (*)
 
-img.onload = function() {
+img.onload = function () {
   alert(`Image loaded, size ${img.width}x${img.height}`);
 };
 
-img.onerror = function() {
+img.onerror = function () {
   alert("Error occurred while loading image");
 };
 ```
 
-There are some notes though:
+Sin embargo, hay algunas notas:
 
-- Most resources start loading when they are added to the document. But `<img>` is an exception. It starts loading when it gets a src `(*)`.
-- For `<iframe>`, the `iframe.onload` event triggers when the iframe loading finished, both for successful load and in case of an error.
+- La mayoría de recursos empiezan a cargarse cuando son agregados al documento. Pero `<img>` es una excepción, comienza la carga cuando obtiene una fuente ".src" `(*)`.
+- Para `<iframe>`, el evento `iframe.onload` se dispara cuando el iframe ha terminado de cargar, tanto para una carga exitosa como en caso de un error.
 
-That's for historical reasons.
+Esto es por razones históricas.
 
-## Crossorigin policy
+## Política de origen cruzado
 
-There's a rule: scripts from one site can't access contents of the other site. So, e.g. a script at `https://facebook.com` can't read the user's mailbox at `https://gmail.com`.
+Hay una regla: los scripts de un sitio no pueden acceder al contenido de otro sitio. Por ejemplo: un script de `https://facebook.com` no puede leer la bandeja de correos del usuario en `https://gmail.com`.
 
-Or, to be more precise, one origin (domain/port/protocol triplet) can't access the content from another one. So even if we have a subdomain, or just another port, these are different origins with no access to each other.
+O para ser más precisos, un origen (el trío dominio/puerto/protocolo) no puede acceder al contenido de otro. Entonces, incluso si tenemos un sub-dominio o solo un puerto distinto, son considerados origenes diferentes sin acceso al otro.
 
-This rule also affects resources from other domains.
+Esta regla también afecta a recursos de otros dominios.
 
-If we're using a script from another domain, and there's an error in it, we can't get error details.
+Si usamos un script de otro dominio y tiene un error, no podemos obtener detalles del error.
 
-For example, let's take a script `error.js` that consists of a single (bad) function call:
+Por ejemplo, tomemos un script `error.js` que consta de un única llamada a una función (con errores).
 ```js
 // 📁 error.js
 noSuchFunction();
 ```
 
-Now load it from the same site where it's located:
+Ahora cargalo desde el mismo sitio donde esta alojado:
 
 ```html run height=0
 <script>
-window.onerror = function(message, url, line, col, errorObj) {
-  alert(`${message}\n${url}, ${line}:${col}`);
-};
+  window.onerror = function (message, url, line, col, errorObj) {
+    alert(`${message}\n${url}, ${line}:${col}`);
+  };
 </script>
 <script src="/article/onload-onerror/crossorigin/error.js"></script>
 ```
 
-We can see a good error report, like this:
+Podemos ver un buen reporte de error, como este:
 
 ```
 Uncaught ReferenceError: noSuchFunction is not defined
 https://javascript.info/article/onload-onerror/crossorigin/error.js, 1:1
 ```
 
-Now let's load the same script from another domain:
+Ahora carguemos el mismo script desde otro dominio:
 
 ```html run height=0
 <script>
-window.onerror = function(message, url, line, col, errorObj) {
-  alert(`${message}\n${url}, ${line}:${col}`);
-};
+  window.onerror = function (message, url, line, col, errorObj) {
+    alert(`${message}\n${url}, ${line}:${col}`);
+  };
 </script>
 <script src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
 ```
 
-The report is different, like this:
+El reporte es diferente, como este:
 
 ```
 Script error.
 , 0:0
 ```
 
-Details may vary depending on the browser, but the idea is the same: any information about the internals of a script, including error stack traces, is hidden. Exactly because it's from another domain.
+Los detalles pueden variar dependiendo del navegador, pero la idea es la misma: cualquier información sobre las partes internas de un script, incluyendo el rastreo de la pila de errores, se oculta. Exactamente porque es de otro dominio.
 
-Why do we need error details?
+¿Por qué necesitamos detalles de error?
 
-There are many services (and we can build our own) that listen for global errors using `window.onerror`, save errors and provide an interface to access and analyze them. That's great, as we can see real errors, triggered by our users. But if a script comes from another origin, then there's not much information about errors in it, as we've just seen.
+Hay muchos servicios (y podemos construir uno nuestro) que escuchan los errores globales usando `window.onerror`, guardan los errores y proveen una interfaz para acceder a ellos y analizarlos. Eso es grandioso ya que podemos ver los errores originales ocasionados por nuestros usuarios. Pero si el script viene desde otro origen no hay mucha información sobre los errores como acabamos de ver.
 
-Similar cross-origin policy (CORS) is enforced for other types of resources as well.
+También se aplican políticas similares de origen cruzado (CORS) a otros tipos de recursos.
 
-**To allow cross-origin access, the `<script>` tag needs to have the `crossorigin` attribute, plus the remote server must provide special headers.**
+**Para permitir el accesso de origen cruzado, la etiqueta `<script>` necesita tener el atributo `crossorigin`, además el servidor remoto debe proporcionar cabeceras especiales.**
 
-There are three levels of cross-origin access:
+Hay 3 niveles de acceso de origen cruzado:
 
-1. **No `crossorigin` attribute** -- access prohibited.
-2. **`crossorigin="anonymous"`** -- access allowed if the server responds with the header `Access-Control-Allow-Origin` with `*` or our origin. Browser does not send authorization information and cookies to remote server.
-3. **`crossorigin="use-credentials"`** -- access allowed if the server sends back the header `Access-Control-Allow-Origin` with our origin and `Access-Control-Allow-Credentials: true`. Browser sends authorization information and cookies to remote server.
+1. **Sin el atributo `crossorigin`** -- acceso prohibido.
+2. **`crossorigin="anonymous"`** -- acceso permitido si el servidor responde con la cabecera `Access-Control-Allow-Origin` con `*` o nuestro origen. El navegador no envía la información de la autorización y cookies al servidor remoto.
+3. **`crossorigin="use-credentials"`** -- acceso permitido si el servidor envia de vuelta la cabecera `Access-Control-Allow-Origin` con nuestro origen y `Access-Control-Allow-Credentials: true`. El navegador envía la información de la autorización y las cookies al servidor remoto.
 
 ```smart
-You can read more about cross-origin access in the chapter <info:fetch-crossorigin>. It describes the `fetch` method for network requests, but the policy is exactly the same.
+Puedes leer más sobre accesos de origen cruzado  en el capítulo <info:fetch-crossorigin>. Este describe el método `fetch` para requerimientos de red, pero la política es exactamente la misma.
 
-Such thing as "cookies" is out of our current scope, but you can read about them in the chapter <info:cookie>.
+Cosas como las "cookies" estan fuera de nuestro alcance, pero podemos leer sobre ellas en <info:cookie>.
 ```
 
-In our case, we didn't have any crossorigin attribute. So the cross-origin access was prohibited. Let's add it.
+En nuetro caso no teníamos ningún atributo de origen cruzado (`cross-origin`). Por lo que se prohibió el acceso de origen cruzado. Vamos a agregarlo.
 
-We can choose between `"anonymous"` (no cookies sent, one server-side header needed) and `"use-credentials"` (sends cookies too, two server-side headers needed).
+Podemos elegir entre `"anonymous"` (no se envian las cookies, una sola cabecera esa necesaria en el lado del servidor) y `"use-credentials"` (envias las cookies, dos cabeceras son necesarias en el lado del servidor).
 
-If we don't care about cookies, then `"anonymous"` is the way to go:
+Si no nos importan las `cookies`, entonces `"anonymous"` es el camino a seguir:
 
 ```html run height=0
 <script>
@@ -192,15 +192,15 @@ window.onerror = function(message, url, line, col, errorObj) {
 <script *!*crossorigin="anonymous"*/!* src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
 ```
 
-Now, assuming that the server provides an `Access-Control-Allow-Origin` header, everything's fine. We have the full error report.
+Ahora, asumiendo que el servidor brinda una cabecera `Access-Control-Allow-Origin`, todo está bien. Podemos tener el reporte completo del error.
 
-## Summary
+## Resumen
 
-Images `<img>`, external styles, scripts and other resources provide `load` and `error` events to track their loading:
+Las imágenes `<img>`, estilos externos, scripts y otros recursos proveen los eventos `load` y `error` para rastrear sus cargas:
 
-- `load` triggers on a successful load,
-- `error` triggers on a failed load.
+- `load` se ejecuta cuando la carga ha sido exitosa,
+- `error` se ejecuta cuando una carga ha fallado.
 
-The only exception is `<iframe>`: for historical reasons it always triggers `load`, for any load completion, even if the page is not found.
+La única excepción es el `<iframe>`: por razones históricas siempre dispara el evento `load`, incluso si no encontró la página.
 
-The `readystatechange` event also works for resources, but is rarely used, because `load/error` events are simpler.
+El evento `readystatechange` también funciona para recursos, pero es muy poco usado debido a que los eventos `load/error` son mas simples.