1
00:00:00,000 --> 00:00:02,997
Otra forma divertida de usar JavaScript

2
00:00:02,997 --> 00:00:05,620
en páginas web es animar las propiedades

3
00:00:05,620 --> 00:00:08,830
con el tiempo. Sin embargo, antes de que podamos hacer eso

4
00:00:08,837 --> 00:00:10,379
necesito asegurarme de que conoces

5
00:00:10,379 --> 00:00:12,032
otra variable global que está disponible

6
00:00:12,032 --> 00:00:14,934
en cada página web, la variable

7
00:00:14,934 --> 00:00:18,334
"window". Aquí, voy a escribir

8
00:00:18,334 --> 00:00:20,978
"console.log(window)" y puedes

9
00:00:20,978 --> 00:00:23,145
usar la pausa y revisar tus herramientas de desarrollador

10
00:00:23,145 --> 00:00:24,897
y ver lo que hay ahí dentro.

11
00:00:26,887 --> 00:00:30,643
¿Lo viste? Es enorme. Contiene

12
00:00:30,643 --> 00:00:34,113
tanto que es abrumador. Para hacerlo un poco

13
00:00:34,113 --> 00:00:36,519
menos abrumador, te mostraré

14
00:00:36,519 --> 00:00:38,436
algunas de mis propiedades y métodos favoritos

15
00:00:38,436 --> 00:00:40,675
que puedes acceder en esta variable.

16
00:00:40,675 --> 00:00:44,184
Existe "window.location" que tiene

17
00:00:44,184 --> 00:00:46,194
mucha información sobre la URL de

18
00:00:46,194 --> 00:00:50,332
la página. En realidad, vamos a seguir adelante

19
00:00:50,332 --> 00:00:52,762
y a escribir esto fuera de la página para que no

20
00:00:52,762 --> 00:00:55,145
tengas que poner pausa.

21
00:00:55,145 --> 00:00:59,995
Así que '"textContent += "The URL of this page is" (La URL de esta página es)

22
00:00:59,995 --> 00:01:04,097
+ window.location' y luego éste es

23
00:01:04,097 --> 00:01:06,803
un objeto, así que tenemos que buscar dentro y

24
00:01:06,803 --> 00:01:09,460
decimos "href" y aquí lo tenemos.

25
00:01:09,460 --> 00:01:12,608
Ésta es en realidad la URL de la página que tenemos

26
00:01:12,608 --> 00:01:14,887
de este lado.

27
00:01:14,887 --> 00:01:18,466
Otra propiedad, es "window.navigator.userAgent"

28
00:01:18,466 --> 00:01:21,675
que te informa sobre el navegador del

29
00:01:21,675 --> 00:01:28,308
usuario. Decimos '"The user agent is "+ (El agente de usuario es)

30
00:01:28,308 --> 00:01:33,063
window.navigator.userAgent;'.

31
00:01:33,063 --> 00:01:36,972
Ok, esta cadena de caracteres de "userAgent" probablemente

32
00:01:36,972 --> 00:01:40,639
te parezca un poco loca. No es necesariamente entendible

33
00:01:40,639 --> 00:01:42,846
para las personas, y

34
00:01:42,846 --> 00:01:45,116
no siempre tiene mucho sentido, por razones

35
00:01:45,116 --> 00:01:48,313
históricas. Así que muchos desarrolladores usan

36
00:01:48,313 --> 00:01:51,127
librerías para entender lo que en realidad esta

37
00:01:51,127 --> 00:01:53,287
cadena de caracteres significa y qué navegador están usando,

38
00:01:53,287 --> 00:01:56,169
y qué sistema operativo y todo eso, porque esto es

39
00:01:56,169 --> 00:02:00,544
muy extraño. Aquí hay una que no es tan

40
00:02:00,544 --> 00:02:05,332
extraña: "window.outerWidht" y "window.outerHeight".

41
00:02:05,332 --> 00:02:12,583
Así que digamos, '"This web page is "+ (Esta página web es)

42
00:02:12,583 --> 00:02:21,544
window.outerWidht + " by "+ window.outerHeight;'

43
00:02:21,544 --> 00:02:24,787
A mí me dice 1280 por 715, pero probablemente

44
00:02:24,787 --> 00:02:26,426
sea diferente para ti, dependiendo

45
00:02:26,426 --> 00:02:29,656
de cómo se vea tu página cuando estás viendo

46
00:02:29,656 --> 00:02:31,859
esta guía paso a paso.

47
00:02:31,859 --> 00:02:33,928
Ahora, déjame mostrarte algo un poco

48
00:02:33,928 --> 00:02:37,778
sorprendente. Voy a borrar la parte

49
00:02:37,778 --> 00:02:41,472
de "window" de esta línea de código.

50
00:02:43,472 --> 00:02:48,215
Lo que pasa es que sigue funcionando,

51
00:02:48,215 --> 00:02:50,543
esto es porque "window" es una variable

52
00:02:50,543 --> 00:02:53,242
global predeterminada en las páginas web. Cuando el

53
00:02:53,242 --> 00:02:56,531
navegador busca una variable que estás usando,

54
00:02:56,531 --> 00:02:59,407
la buscará en el objeto "window".

55
00:02:59,407 --> 00:03:02,773
Y cuando creas una nueva variable global,

56
00:03:02,773 --> 00:03:05,431
el objeto "window", en realidad,

57
00:03:05,431 --> 00:03:08,025
la almacena como una propiedad.

58
00:03:08,025 --> 00:03:10,482
Eso significa que no deberías declarar variables propias

59
00:03:10,482 --> 00:03:13,318
con nombres como "outerWidht" y "outerHeight"

60
00:03:13,318 --> 00:03:16,050
porque entonces ellas van a sobreescribir en "window.outerWidht"

61
00:03:16,050 --> 00:03:18,227
y "window.outerHeight".

62
00:03:18,227 --> 00:03:21,156
Generalmente, deberías evitar las variables globales

63
00:03:21,156 --> 00:03:24,478
juntas porque es muy fácil que choquen entre ellas

64
00:03:24,478 --> 00:03:26,090
o con otras variables existentes en el objeto

65
00:03:26,090 --> 00:03:29,266
"window". Para trabajar con seguridad extra,

66
00:03:29,266 --> 00:03:31,646
puedes poner prefijos en tus variables globales.

67
00:03:31,646 --> 00:03:35,921
Como en Khan Academy, escribimos "KA_" delante de

68
00:03:35,921 --> 00:03:39,979
cualquier variable global que debemos tener.

69
00:03:39,979 --> 00:03:42,007
Ok, éste es el objeto "window",

70
00:03:42,007 --> 00:03:44,427
ahora vamos a ver cómo podemos usar

71
00:03:44,427 --> 00:03:48,668
dos funciones para hacer animaciones.