Otra forma divertida de usar JavaScript

en páginas web es animar las propiedades

con el tiempo. Sin embargo, antes de que podamos hacer eso

necesito asegurarme de que conoces

otra variable global que está disponible

en cada página web, la variable

"window". Aquí, voy a escribir

"console.log(window)" y puedes

usar la pausa y revisar tus herramientas de desarrollador

y ver lo que hay ahí dentro.

¿Lo viste? Es enorme. Contiene

tanto que es abrumador. Para hacerlo un poco

menos abrumador, te mostraré

algunas de mis propiedades y métodos favoritos

que puedes acceder en esta variable.

Existe "window.location" que tiene

mucha información sobre la URL de

la página. En realidad, vamos a seguir adelante

y a escribir esto fuera de la página para que no

tengas que poner pausa.

Así que '"textContent += "The URL of this page is" (La URL de esta página es)

+ window.location' y luego éste es

un objeto, así que tenemos que buscar dentro y

decimos "href" y aquí lo tenemos.

Ésta es en realidad la URL de la página que tenemos

de este lado.

Otra propiedad, es "window.navigator.userAgent"

que te informa sobre el navegador del

usuario. Decimos '"The user agent is "+ (El agente de usuario es)

window.navigator.userAgent;'.

Ok, esta cadena de caracteres de "userAgent" probablemente

te parezca un poco loca. No es necesariamente entendible

para las personas, y

no siempre tiene mucho sentido, por razones

históricas. Así que muchos desarrolladores usan

librerías para entender lo que en realidad esta

cadena de caracteres significa y qué navegador están usando,

y qué sistema operativo y todo eso, porque esto es

muy extraño. Aquí hay una que no es tan

extraña: "window.outerWidht" y "window.outerHeight".

Así que digamos, '"This web page is "+ (Esta página web es)

window.outerWidht + " by "+ window.outerHeight;'

A mí me dice 1280 por 715, pero probablemente

sea diferente para ti, dependiendo

de cómo se vea tu página cuando estás viendo

esta guía paso a paso.

Ahora, déjame mostrarte algo un poco

sorprendente. Voy a borrar la parte

de "window" de esta línea de código.

Lo que pasa es que sigue funcionando,

esto es porque "window" es una variable

global predeterminada en las páginas web. Cuando el

navegador busca una variable que estás usando,

la buscará en el objeto "window".

Y cuando creas una nueva variable global,

el objeto "window", en realidad,

la almacena como una propiedad.

Eso significa que no deberías declarar variables propias

con nombres como "outerWidht" y "outerHeight"

porque entonces ellas van a sobreescribir en "window.outerWidht"

y "window.outerHeight".

Generalmente, deberías evitar las variables globales

juntas porque es muy fácil que choquen entre ellas

o con otras variables existentes en el objeto

"window". Para trabajar con seguridad extra,

puedes poner prefijos en tus variables globales.

Como en Khan Academy, escribimos "KA_" delante de

cualquier variable global que debemos tener.

Ok, éste es el objeto "window",

ahora vamos a ver cómo podemos usar

dos funciones para hacer animaciones.