-
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.
