1
00:00:00,420 --> 00:00:01,690
Ya Bienvenido.

2
00:00:01,980 --> 00:00:03,600
Así que tengo algunas muy buenas noticias.

3
00:00:03,600 --> 00:00:08,130
Finalmente es hora de que tomemos javascript y lo combinemos con nuestro H. METRO. S. evaluar.

4
00:00:08,250 --> 00:00:10,160
Esta es de lejos mi unidad favorita.

5
00:00:10,170 --> 00:00:13,800
Mi tema favorito para enseñar todo lo que he pasado toda mi vida enseñando.

6
00:00:13,860 --> 00:00:16,180
Es realmente donde javascript comienza a pagar.

7
00:00:16,200 --> 00:00:18,480
Así que hemos estado haciendo algunas aplicaciones simples hasta este momento.

8
00:00:18,540 --> 00:00:23,340
emocionante, pero todo va a cambiar ahora porque estamos a punto de liberar realmente el poder de Javascript.

9
00:00:23,340 --> 00:00:27,310
Lista fácil de hacer usando alertas y avisos y sé que no es muy

10
00:00:27,510 --> 00:00:31,830
Y luego esta unidad vamos a hacer cosas como hacer un juego interactivo, vamos a

11
00:00:31,830 --> 00:00:38,070
hacer una lista de tareas reales con una forma real con botones reales y casillas de verificación y Javascript detrás de ella

12
00:00:38,070 --> 00:00:43,200
y animaciones y todo tipo de cosas realmente interesantes. donde realmente sientes que hiciste algo no solo una

13
00:00:43,200 --> 00:00:48,360
pequeña línea de comando o una pequeña aplicación de consola de JavaScript sino algo real que podrías compartir.

14
00:00:48,840 --> 00:00:55,410
Entonces, la forma en que hacemos todo esto es a través de una tecnología llamada DOM que es eso.

15
00:00:55,530 --> 00:01:00,210
Entonces, esta lección servirá como introducción al DOM para hablar sobre algunas cosas en

16
00:01:00,210 --> 00:01:01,090
los próximos videos.

17
00:01:01,140 --> 00:01:05,450
Quiero comenzar por definir qué DOM es lo que representan esas letras.

18
00:01:05,460 --> 00:01:08,300
Quiero que entiendas bien por qué esto es emocionante.

19
00:01:08,310 --> 00:01:12,180
Voy a mostrarte algunas aplicaciones geniales que otras personas han creado utilizando estas cosas que vamos

20
00:01:12,180 --> 00:01:17,000
a aprender, luego vamos a hablar sobre lo que llamo la selección y luego manipular el flujo de trabajo.

21
00:01:17,250 --> 00:01:19,230
Entonces empecemos.

22
00:01:19,230 --> 00:01:20,910
Entonces, ¿por qué deberías preocuparte por todo esto?

23
00:01:21,000 --> 00:01:22,550
Bueno, hay muchas razones.

24
00:01:22,680 --> 00:01:29,550
perro interactuando con cada equipo y con las SS. Entonces, interactuamos con el Dom para hacer cosas como juegos.

25
00:01:29,790 --> 00:01:35,610
Prácticamente todas las aplicaciones web grandes que hay ahora mismo, como Twitter y Facebook Instagram YouTube

26
00:01:35,610 --> 00:01:40,890
Gmail, todas usan mucho javascript y la mayoría de ese javascript está interactuando con el

27
00:01:41,130 --> 00:01:46,740
Podríamos hacer tres en raya podríamos hacer que una plataforma sea un juego como Mario, podemos usarlo

28
00:01:46,740 --> 00:01:50,780
para hacer cosas más prácticas como los menús desplegables de validación de formas.

29
00:01:50,980 --> 00:01:52,760
Así es como hacemos que las páginas web sean interactivas.

30
00:01:52,770 --> 00:01:54,470
Es cómo podemos agregar animaciones.

31
00:01:54,600 --> 00:01:59,520
últimos años usé muchos javascript para manipular el Dom como mencioné antes. Primero voy a

32
00:01:59,520 --> 00:02:04,710
mostrarte algunos ejemplos antes de comenzar a definir estos términos hablan sobre cómo es el DOM.

33
00:02:04,710 --> 00:02:09,270
Y el último aquí realmente lo resume en casi todos los sitios increíbles, aunque

34
00:02:09,270 --> 00:02:10,040
en los

35
00:02:10,080 --> 00:02:11,870
Quiero mostrarte algunos sitios web.

36
00:02:12,540 --> 00:02:17,370
Así que el primero es solo google y no sé cuánto prestas atención a

37
00:02:17,370 --> 00:02:20,910
esto, pero cuando comienzas a buscar algo en Google como Halo.

38
00:02:21,000 --> 00:02:27,060
Fíjate cómo obtengo esta cosa que parece que esto es todo su Timo. Se trata de algún tipo de div

39
00:02:27,060 --> 00:02:33,000
o algo que se está viendo y mostrando y está cambiando a medida que escribo cosas como si escribo hello

40
00:02:33,000 --> 00:02:34,020
kitty obtengo nuevos resultados.

41
00:02:34,020 --> 00:02:38,190
Todo eso está hecho con javascript, pero este es el tipo de cosas que vamos a poder hacer

42
00:02:38,190 --> 00:02:39,080
después de algunos videos.

43
00:02:39,120 --> 00:02:43,140
Por supuesto, no podremos escribir el backend que tiene Google, pero podremos hacer las cosas del

44
00:02:43,140 --> 00:02:43,770
front-end aquí.

45
00:02:43,770 --> 00:02:49,090
Todo el HMO todo el éxito de todos estos efectos que usted verá será capaz de replicar fácilmente.

46
00:02:49,110 --> 00:02:54,000
Entonces, lo siguiente que quiero resaltar es su sitio web, Tomi tiene este botón de cursos de

47
00:02:54,380 --> 00:02:59,280
Brough y cuando hago clic en él obtengo el menú deslizable que empuja todo hacia la derecha

48
00:02:59,280 --> 00:03:01,000
y tengo todas estas categorías para elegir.

49
00:03:01,290 --> 00:03:06,400
Y al pasar el cursor sobre una categoría, puede ver que aparece este submenú que aparece.

50
00:03:06,660 --> 00:03:11,140
Así que eso es todo lo que javascript se están agregando a la página.

51
00:03:11,140 --> 00:03:13,230
Estos son probablemente elementos de lista y etiquetas de anclaje.

52
00:03:13,350 --> 00:03:17,970
Se están agregando a la página que se oculta y se muestra en color está cambiando a medida que

53
00:03:18,420 --> 00:03:19,790
desplazo muchas cosas de interactividad.

54
00:03:19,830 --> 00:03:22,430
Entonces, lo próximo que quiero mostrar es uno de mis favoritos.

55
00:03:22,650 --> 00:03:24,560
Es un sitio web llamado ataque de almohadilla.

56
00:03:24,780 --> 00:03:26,030
Entonces esto es un poco diferente.

57
00:03:26,100 --> 00:03:31,410
No es realmente una aplicación web la que usarías, pero es un juguete realmente divertido y una gran demostración de lo que puedes

58
00:03:31,410 --> 00:03:33,210
hacer con H. T. ratón.

59
00:03:33,250 --> 00:03:37,940
SS En javascript, así que le recomiendo que siga adelante y pruebe esto por su cuenta.

60
00:03:38,080 --> 00:03:45,660
Patta tap dot com y tengo que hacer es comenzar a escribir en mi teclado en cada tecla que presiono corresponde a un sonido

61
00:03:45,660 --> 00:03:48,810
que se reproduce y una animación genial que se reproduce.

62
00:03:48,900 --> 00:03:51,940
Déjame mostrarte un ejemplo.

63
00:03:52,080 --> 00:03:54,100
Aqui hay otro más.

64
00:03:55,860 --> 00:03:57,040
Entonces puedes perderme en algún lado.

65
00:04:03,510 --> 00:04:06,010
Entonces, esto resume el tipo de cosas que podemos hacer.

66
00:04:06,120 --> 00:04:11,880
Tenemos interactividad en la que presiono una tecla para que el código se ejecute solo cuando presiono

67
00:04:11,890 --> 00:04:19,710
una tecla en particular y luego ese código no solo se reproduce como sonido, sino que también cambia lo que vemos visualmente.

68
00:04:19,710 --> 00:04:23,970
Por lo tanto, no solo se registra constantemente, no solo se usan las alertas, sino que se está cambiando

69
00:04:24,200 --> 00:04:26,280
la pantalla que salió en el CSSA que vemos.

70
00:04:26,700 --> 00:04:31,110
Así que espero que esos ejemplos te entusiasmen un poco con todas las cosas increíbles que

71
00:04:31,110 --> 00:04:31,790
estamos por aprender.