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.