1
00:00:00,461 --> 00:00:05,742
Ahora quiero mostrarles una cosa más que podrían hacer con un evento en un objeto.

2
00:00:05,742 --> 00:00:09,936
Esta página web que hice, responde a la eterna pregunta:

3
00:00:09,936 --> 00:00:12,150
¿Qué es lo que dice el chico "Oh Noes"?

4
00:00:12,150 --> 00:00:16,599
O más específicamente, ¿cómo sonaría si pudieras oirlo?

5
00:00:16,599 --> 00:00:20,589
Si presionas el ratón en el enlace, el navegador te llevará a un archivo mp3,

6
00:00:20,589 --> 00:00:25,163
que se debería ejecutar en el navegador y responder esa pregunta ardiente.

7
00:00:25,163 --> 00:00:30,009
Sin embargo, no quisiera que el usuario dejara esta página web.

8
00:00:30,009 --> 00:00:33,445
Deberías poder escucharlo directamente en esta página.

9
00:00:33,445 --> 00:00:37,891
Podemos hacer eso con JavaScript, ejecutando una etiqueta ""

10
00:00:37,891 --> 00:00:40,957
tan pronto como el usuario presione el ratón en el enlace.

11
00:00:40,957 --> 00:00:45,109
En primer lugar, vamos a almacenar el enlace en una variable.

12
00:00:45,109 --> 00:00:55,178
'var ohnoesEl = document.getElementById("ohnoes");'

13
00:00:55,770 --> 00:00:58,099
Ahora vamos a definir la función de tipo "callback".

14
00:00:58,099 --> 00:01:03,735
Que va a ser una función muy interesante.

15
00:01:03,735 --> 00:01:10,165
Así que en esta función "callback", queremos crear una etiqueta "" dinámicamente.

16
00:01:10,165 --> 00:01:15,363
'var audioEl = document.createElement("audio");'

17
00:01:15,816 --> 00:01:19,825
Y ésta es una etiqueta nueva disponible en los navegadores modernos.

18
00:01:19,825 --> 00:01:26,104
Y luego "audio.src" es igual a..., y vamos a hacerla igual a

19
00:01:26,104 --> 00:01:32,563
lo que tenemos aquí arriba en "href", la etiqueta "" es muy parecida a la etiqueta "".

20
00:01:32,563 --> 00:01:37,335
Y luego también vamos a escribir: 'audioEl.autoplay = "true";'

21
00:01:37,335 --> 00:01:40,333
que va a hacer que se ejecute tan pronto como la añadamos a la página.

22
00:01:40,333 --> 00:01:42,953
Y finalmente, la añadimos a la página.

23
00:01:42,953 --> 00:01:45,574
Y en realidad no importa dónde la ponga,

24
00:01:45,574 --> 00:01:48,064
porque no la estamos viendo.

25
00:01:48,064 --> 00:01:52,295
Así que ahora, cuando presionen el ratón, se creará un audio, se asignará la fuente,

26
00:01:52,295 --> 00:01:55,387
se asignará el "autoplay" (autoejecutar), y se añadirá a la página.

27
00:01:55,387 --> 00:01:59,444
Finalmente, nos aseguramos de que se llame al detector de eventos,

28
00:01:59,444 --> 00:02:01,376
cuando se presione el ratón en el enlace.

29
00:02:01,376 --> 00:02:08,143
'ohnoesEl.addEventListener("click",'...

30
00:02:08,283 --> 00:02:12,951
... y luego sólo pasamos el nombre de la función.

31
00:02:12,951 --> 00:02:17,385
Ok, ya sabes cuál es el acuerdo: pausa la guía paso a paso y pruébalo.

32
00:02:17,385 --> 00:02:19,729
"tu-tu-tu"

33
00:02:19,729 --> 00:02:21,110
¿Qué pasó?

34
00:02:21,110 --> 00:02:26,337
Yo escuché ese sonido bajo y profundo del gruñido de "Oh Noes",

35
00:02:26,337 --> 00:02:29,789
pero el enlace todavía se abrió en una ventana nueva.

36
00:02:29,789 --> 00:02:33,476
Idealmente, una vez que el sonido se reproduce, el navegador no debería

37
00:02:33,476 --> 00:02:37,548
tratar de mandar al usuario a navegar al enlace, porque ya lo escuchó.

38
00:02:37,548 --> 00:02:42,920
La manera de hacer esto es diciéndole al navegador que cancele ese comportamiento predeterminado.

39
00:02:42,920 --> 00:02:47,148
Ves que, por defecto, cuando un usuario presiona el ratón en un enlace,

40
00:02:47,148 --> 00:02:50,321
el navegador envía al usuario a navegar a ese enlace.

41
00:02:50,321 --> 00:02:54,226
Pero si redefinimos la forma en que el enlace funciona, en JavaScript,

42
00:02:54,226 --> 00:02:58,004
muchas veces no queremos que el navegador nos mande a otro lado.

43
00:02:58,004 --> 00:03:02,731
Podemos decirle que se detenga, usando un método en la propiedad "event",

44
00:03:02,731 --> 00:03:05,299
llamado "preventDefault()".

45
00:03:05,299 --> 00:03:09,897
Así que tenemos que referirnos a ese objeto de evento que nos pasan,

46
00:03:09,897 --> 00:03:15,830
y luego aquí dentro escribimos: "e.preventDefault();".

47
00:03:15,830 --> 00:03:19,420
Esto le dice al navegador que evite el comportamiento predeterminado

48
00:03:19,420 --> 00:03:21,399
asociado a este evento.

49
00:03:21,399 --> 00:03:25,995
Ahora, pausa la guía paso a paso, y prueba de nuevo.

50
00:03:25,995 --> 00:03:28,385
Sólo escuchaste el sonido, ¿cierto?

51
00:03:28,385 --> 00:03:30,949
Ésta es una experiencia para el usuario mucho más agradable.

52
00:03:30,949 --> 00:03:34,959
Y eso es lo que se conoce como "mejora progresiva",

53
00:03:34,959 --> 00:03:39,514
a partir de una página web como HTML con un comportamiento predeterminado del navegador,

54
00:03:39,514 --> 00:03:44,650
pero luego mejorada con JavaScript para hacer una mejor experiencia.

55
00:03:44,650 --> 00:03:48,361
A menudo querrás utilizar "preventDefault" cuando

56
00:03:48,361 --> 00:03:50,445
estés adjuntando detectores de eventos al presionar el ratón en enlaces.

57
00:03:50,445 --> 00:03:54,447
Y probablemente también te veas usándolo cuando proceses formularios,

58
00:03:54,447 --> 00:03:57,485
debido a que el navegador tiene algunos comportamientos predeterminados en ese caso,

59
00:03:57,485 --> 00:03:59,264
cuando los envías a un servidor.

60
00:03:59,264 --> 00:04:02,640
Lo importante es mantener la experiencia del usuario en mente,

61
00:04:02,640 --> 00:04:06,730
y si esa experiencia del usuario no es la óptima en tu página web,

62
00:04:06,730 --> 00:04:08,953
encontrar la manera de mejorar.

63
00:04:08,953 --> 00:04:11,366
Puede ser que no te enseñemos todo aquí,

64
00:04:11,366 --> 00:04:15,499
pero en Internet hay miles de respuestas para ti.