onload and onerror

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

@@ -1,187 +1,188 @@
-# 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 como 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) esto, pero no esta 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 ejecuta 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 que si la carga falla? Por ejemplo: no hay tal script (error 404) en el servidor o el servidor esta caido (unavailable).
 
 ### script.onerror
 
-Errors that occur during the loading of the script can be tracked in an `error` event.
+Los errors que ocurren durante la carga de un script puede 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 ocurren durante el procesamiento y ejecución estan fuera del alcance para esos eventos. Eso es: si un script es cargado de manera exitosa, es decir cuando el evento `onload` se dispara, incluso si tiene errores de programación adentro. 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, basicamente para cualquier que tiene una externa `src`
 
-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:
+
+- La mayoría de recursos empiezan a cargarse cuando son agregados al documento. Pero `<img>` es una excepción, comienza la carga cuando tiene una fuente `(*)`.
+- 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.
 
-- 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.
+Por históricas razones.
 
-That's for historical reasons.
+## Política de origen cruzado
 
-## Crossorigin policy
+Hay algunas reglas: los scripts un sitio cuyo contenido no puede ser accedido de otro sitio. Por ejemplo: un script de `https://facebook.com` no puede leer la bandeja de correros del usuario en `https://gmail.com`.
 
-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`.
+O para ser mas precisos, un origen (dominio/puerto/protocolo trillizo) no puede acceder al contenido de otro. Entonces, incluso si tenemos un sub-dominio o solo otro puerto son diferentes origenes sin acceso al otro.
 
-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.
+Esta regla también afecta a recursos de otros dominios.
 
-This rule also affects resources from other domains.
+Si usamos un script de otro dominio y tiene un error,, no podemos obtener detalles del error.
 
-If we're using a script from another domain, and there's an error in it, we can't get error details.
+Por ejemplo, tomemos un script `error.js` que consta de un única llamda a una función (mala).
 
-For example, let's take a script `error.js` that consists of a single (bad) function call:
 ```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, 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 contruir uno nuestro) que escuchan lo 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 aplica 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.
+Tu puedes leer más sobre accesos de origen cruzado (`cross-origin`)
 
-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 las `cookies`, entonces `"anonymous"` es el camino a seguir:
 
 ```html run height=0
 <script>
@@ -192,15 +193,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 servedor provee una cabecera `Access-Control-Allow-Origin`, todo esta 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 imagenes `<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 exception es el `<iframe>`: for razones historicas siempre dispara el evento `load`, incluso sino 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.