[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.100,Default,,0000,0000,0000,,Otra forma divertida de usar JavaScript
Dialogue: 0,0:00:02.100,0:00:05.62,Default,,0000,0000,0000,,en páginas web es animar las propiedades
Dialogue: 0,0:00:05.62,0:00:08.83,Default,,0000,0000,0000,,con el tiempo. Sin embargo, antes de que podamos hacer eso
Dialogue: 0,0:00:08.84,0:00:10.38,Default,,0000,0000,0000,,necesito asegurarme de que conoces
Dialogue: 0,0:00:10.38,0:00:12.03,Default,,0000,0000,0000,,otra variable global que está disponible
Dialogue: 0,0:00:12.03,0:00:14.93,Default,,0000,0000,0000,,en cada página web, la variable
Dialogue: 0,0:00:14.93,0:00:18.33,Default,,0000,0000,0000,,"window". Aquí, voy a escribir
Dialogue: 0,0:00:18.33,0:00:20.98,Default,,0000,0000,0000,,"console.log(window)" y puedes
Dialogue: 0,0:00:20.98,0:00:23.14,Default,,0000,0000,0000,,usar la pausa y revisar tus herramientas de desarrollador
Dialogue: 0,0:00:23.14,0:00:24.90,Default,,0000,0000,0000,,y ver lo que hay ahí dentro.
Dialogue: 0,0:00:26.89,0:00:30.64,Default,,0000,0000,0000,,¿Lo viste? Es enorme. Contiene
Dialogue: 0,0:00:30.64,0:00:34.11,Default,,0000,0000,0000,,tanto que es abrumador. Para hacerlo un poco
Dialogue: 0,0:00:34.11,0:00:36.52,Default,,0000,0000,0000,,menos abrumador, te mostraré
Dialogue: 0,0:00:36.52,0:00:38.44,Default,,0000,0000,0000,,algunas de mis propiedades y métodos favoritos
Dialogue: 0,0:00:38.44,0:00:40.68,Default,,0000,0000,0000,,que puedes acceder en esta variable.
Dialogue: 0,0:00:40.68,0:00:44.18,Default,,0000,0000,0000,,Existe "window.location" que tiene
Dialogue: 0,0:00:44.18,0:00:46.19,Default,,0000,0000,0000,,mucha información sobre la URL de
Dialogue: 0,0:00:46.19,0:00:50.33,Default,,0000,0000,0000,,la página. En realidad, vamos a seguir adelante
Dialogue: 0,0:00:50.33,0:00:52.76,Default,,0000,0000,0000,,y a escribir esto fuera de la página para que no
Dialogue: 0,0:00:52.76,0:00:55.14,Default,,0000,0000,0000,,tengas que poner pausa.
Dialogue: 0,0:00:55.14,0:00:59.100,Default,,0000,0000,0000,,Así que '"textContent += "The URL of this page is" (La URL de esta página es)
Dialogue: 0,0:00:59.100,0:01:04.10,Default,,0000,0000,0000,,+ window.location' y luego éste es
Dialogue: 0,0:01:04.10,0:01:06.80,Default,,0000,0000,0000,,un objeto, así que tenemos que buscar dentro y
Dialogue: 0,0:01:06.80,0:01:09.46,Default,,0000,0000,0000,,decimos "href" y aquí lo tenemos.
Dialogue: 0,0:01:09.46,0:01:12.61,Default,,0000,0000,0000,,Ésta es en realidad la URL de la página que tenemos
Dialogue: 0,0:01:12.61,0:01:14.89,Default,,0000,0000,0000,,de este lado.
Dialogue: 0,0:01:14.89,0:01:18.47,Default,,0000,0000,0000,,Otra propiedad, es "window.navigator.userAgent"
Dialogue: 0,0:01:18.47,0:01:21.68,Default,,0000,0000,0000,,que te informa sobre el navegador del
Dialogue: 0,0:01:21.68,0:01:28.31,Default,,0000,0000,0000,,usuario. Decimos '"The user agent is "+ (El agente de usuario es)
Dialogue: 0,0:01:28.31,0:01:33.06,Default,,0000,0000,0000,,window.navigator.userAgent;'.
Dialogue: 0,0:01:33.06,0:01:36.97,Default,,0000,0000,0000,,Ok, esta cadena de caracteres de "userAgent" probablemente
Dialogue: 0,0:01:36.97,0:01:40.64,Default,,0000,0000,0000,,te parezca un poco loca. No es necesariamente entendible
Dialogue: 0,0:01:40.64,0:01:42.85,Default,,0000,0000,0000,,para las personas, y
Dialogue: 0,0:01:42.85,0:01:45.12,Default,,0000,0000,0000,,no siempre tiene mucho sentido, por razones
Dialogue: 0,0:01:45.12,0:01:48.31,Default,,0000,0000,0000,,históricas. Así que muchos desarrolladores usan
Dialogue: 0,0:01:48.31,0:01:51.13,Default,,0000,0000,0000,,librerías para entender lo que en realidad esta
Dialogue: 0,0:01:51.13,0:01:53.29,Default,,0000,0000,0000,,cadena de caracteres significa y qué navegador están usando,
Dialogue: 0,0:01:53.29,0:01:56.17,Default,,0000,0000,0000,,y qué sistema operativo y todo eso, porque esto es
Dialogue: 0,0:01:56.17,0:02:00.54,Default,,0000,0000,0000,,muy extraño. Aquí hay una que no es tan
Dialogue: 0,0:02:00.54,0:02:05.33,Default,,0000,0000,0000,,extraña: "window.outerWidht" y "window.outerHeight".
Dialogue: 0,0:02:05.33,0:02:12.58,Default,,0000,0000,0000,,Así que digamos, '"This web page is "+ (Esta página web es)
Dialogue: 0,0:02:12.58,0:02:21.54,Default,,0000,0000,0000,,window.outerWidht + " by "+ window.outerHeight;'
Dialogue: 0,0:02:21.54,0:02:24.79,Default,,0000,0000,0000,,A mí me dice 1280 por 715, pero probablemente
Dialogue: 0,0:02:24.79,0:02:26.43,Default,,0000,0000,0000,,sea diferente para ti, dependiendo
Dialogue: 0,0:02:26.43,0:02:29.66,Default,,0000,0000,0000,,de cómo se vea tu página cuando estás viendo
Dialogue: 0,0:02:29.66,0:02:31.86,Default,,0000,0000,0000,,esta guía paso a paso.
Dialogue: 0,0:02:31.86,0:02:33.93,Default,,0000,0000,0000,,Ahora, déjame mostrarte algo un poco
Dialogue: 0,0:02:33.93,0:02:37.78,Default,,0000,0000,0000,,sorprendente. Voy a borrar la parte
Dialogue: 0,0:02:37.78,0:02:41.47,Default,,0000,0000,0000,,de "window" de esta línea de código.
Dialogue: 0,0:02:43.47,0:02:48.22,Default,,0000,0000,0000,,Lo que pasa es que sigue funcionando,
Dialogue: 0,0:02:48.22,0:02:50.54,Default,,0000,0000,0000,,esto es porque "window" es una variable
Dialogue: 0,0:02:50.54,0:02:53.24,Default,,0000,0000,0000,,global predeterminada en las páginas web. Cuando el
Dialogue: 0,0:02:53.24,0:02:56.53,Default,,0000,0000,0000,,navegador busca una variable que estás usando,
Dialogue: 0,0:02:56.53,0:02:59.41,Default,,0000,0000,0000,,la buscará en el objeto "window".
Dialogue: 0,0:02:59.41,0:03:02.77,Default,,0000,0000,0000,,Y cuando creas una nueva variable global,
Dialogue: 0,0:03:02.77,0:03:05.43,Default,,0000,0000,0000,,el objeto "window", en realidad,
Dialogue: 0,0:03:05.43,0:03:08.02,Default,,0000,0000,0000,,la almacena como una propiedad.
Dialogue: 0,0:03:08.02,0:03:10.48,Default,,0000,0000,0000,,Eso significa que no deberías declarar variables propias
Dialogue: 0,0:03:10.48,0:03:13.32,Default,,0000,0000,0000,,con nombres como "outerWidht" y "outerHeight"
Dialogue: 0,0:03:13.32,0:03:16.05,Default,,0000,0000,0000,,porque entonces ellas van a sobreescribir en "window.outerWidht"
Dialogue: 0,0:03:16.05,0:03:18.23,Default,,0000,0000,0000,,y "window.outerHeight".
Dialogue: 0,0:03:18.23,0:03:21.16,Default,,0000,0000,0000,,Generalmente, deberías evitar las variables globales
Dialogue: 0,0:03:21.16,0:03:24.48,Default,,0000,0000,0000,,juntas porque es muy fácil que choquen entre ellas
Dialogue: 0,0:03:24.48,0:03:26.09,Default,,0000,0000,0000,,o con otras variables existentes en el objeto
Dialogue: 0,0:03:26.09,0:03:29.27,Default,,0000,0000,0000,,"window". Para trabajar con seguridad extra,
Dialogue: 0,0:03:29.27,0:03:31.65,Default,,0000,0000,0000,,puedes poner prefijos en tus variables globales.
Dialogue: 0,0:03:31.65,0:03:35.92,Default,,0000,0000,0000,,Como en Khan Academy, escribimos "KA_" delante de
Dialogue: 0,0:03:35.92,0:03:39.98,Default,,0000,0000,0000,,cualquier variable global que debemos tener.
Dialogue: 0,0:03:39.98,0:03:42.01,Default,,0000,0000,0000,,Ok, éste es el objeto "window",
Dialogue: 0,0:03:42.01,0:03:44.43,Default,,0000,0000,0000,,ahora vamos a ver cómo podemos usar
Dialogue: 0,0:03:44.43,0:03:48.67,Default,,0000,0000,0000,,dos funciones para hacer animaciones.