WEBVTT

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.

00:00:05.742 --> 00:00:09.936
Esta página web que hice, responde a la eterna pregunta:

00:00:09.936 --> 00:00:12.150
¿Qué es lo que dice el chico "Oh Noes"?

00:00:12.150 --> 00:00:16.599
O más específicamente, ¿cómo sonaría si pudieras oirlo?

00:00:16.599 --> 00:00:20.589
Si presionas el ratón en el enlace, el navegador te llevará a un archivo mp3,

00:00:20.589 --> 00:00:25.163
que se debería ejecutar en el navegador y responder esa pregunta ardiente.

00:00:25.163 --> 00:00:30.009
Sin embargo, no quisiera que el usuario dejara esta página web.

00:00:30.009 --> 00:00:33.445
Deberías poder escucharlo directamente en esta página.

00:00:33.445 --> 00:00:37.891
Podemos hacer eso con JavaScript, ejecutando una etiqueta ""

00:00:37.891 --> 00:00:40.957
tan pronto como el usuario presione el ratón en el enlace.

00:00:40.957 --> 00:00:45.109
En primer lugar, vamos a almacenar el enlace en una variable.

00:00:45.109 --> 00:00:55.178
'var ohnoesEl = document.getElementById("ohnoes");'

00:00:55.770 --> 00:00:58.099
Ahora vamos a definir la función de tipo "callback".

00:00:58.099 --> 00:01:03.735
Que va a ser una función muy interesante.

00:01:03.735 --> 00:01:10.165
Así que en esta función "callback", queremos crear una etiqueta "" dinámicamente.

00:01:10.165 --> 00:01:15.363
'var audioEl = document.createElement("audio");'

00:01:15.816 --> 00:01:19.825
Y ésta es una etiqueta nueva disponible en los navegadores modernos.

00:01:19.825 --> 00:01:26.104
Y luego "audio.src" es igual a..., y vamos a hacerla igual a

00:01:26.104 --> 00:01:32.563
lo que tenemos aquí arriba en "href", la etiqueta "" es muy parecida a la etiqueta "".

00:01:32.563 --> 00:01:37.335
Y luego también vamos a escribir: 'audioEl.autoplay = "true";'

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.

00:01:40.333 --> 00:01:42.953
Y finalmente, la añadimos a la página.

00:01:42.953 --> 00:01:45.574
Y en realidad no importa dónde la ponga,

00:01:45.574 --> 00:01:48.064
porque no la estamos viendo.

00:01:48.064 --> 00:01:52.295
Así que ahora, cuando presionen el ratón, se creará un audio, se asignará la fuente,

00:01:52.295 --> 00:01:55.387
se asignará el "autoplay" (autoejecutar), y se añadirá a la página.

00:01:55.387 --> 00:01:59.444
Finalmente, nos aseguramos de que se llame al detector de eventos,

00:01:59.444 --> 00:02:01.376
cuando se presione el ratón en el enlace.

00:02:01.376 --> 00:02:08.143
'ohnoesEl.addEventListener("click",'...

00:02:08.283 --> 00:02:12.951
... y luego sólo pasamos el nombre de la función.

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.

00:02:17.385 --> 00:02:19.729
"tu-tu-tu"

00:02:19.729 --> 00:02:21.110
¿Qué pasó?

00:02:21.110 --> 00:02:26.337
Yo escuché ese sonido bajo y profundo del gruñido de "Oh Noes",

00:02:26.337 --> 00:02:29.789
pero el enlace todavía se abrió en una ventana nueva.

00:02:29.789 --> 00:02:33.476
Idealmente, una vez que el sonido se reproduce, el navegador no debería

00:02:33.476 --> 00:02:37.548
tratar de mandar al usuario a navegar al enlace, porque ya lo escuchó.

00:02:37.548 --> 00:02:42.920
La manera de hacer esto es diciéndole al navegador que cancele ese comportamiento predeterminado.

00:02:42.920 --> 00:02:47.148
Ves que, por defecto, cuando un usuario presiona el ratón en un enlace,

00:02:47.148 --> 00:02:50.321
el navegador envía al usuario a navegar a ese enlace.

00:02:50.321 --> 00:02:54.226
Pero si redefinimos la forma en que el enlace funciona, en JavaScript,

00:02:54.226 --> 00:02:58.004
muchas veces no queremos que el navegador nos mande a otro lado.

00:02:58.004 --> 00:03:02.731
Podemos decirle que se detenga, usando un método en la propiedad "event",

00:03:02.731 --> 00:03:05.299
llamado "preventDefault()".

00:03:05.299 --> 00:03:09.897
Así que tenemos que referirnos a ese objeto de evento que nos pasan,

00:03:09.897 --> 00:03:15.830
y luego aquí dentro escribimos: "e.preventDefault();".

00:03:15.830 --> 00:03:19.420
Esto le dice al navegador que evite el comportamiento predeterminado

00:03:19.420 --> 00:03:21.399
asociado a este evento.

00:03:21.399 --> 00:03:25.995
Ahora, pausa la guía paso a paso, y prueba de nuevo.

00:03:25.995 --> 00:03:28.385
Sólo escuchaste el sonido, ¿cierto?

00:03:28.385 --> 00:03:30.949
Ésta es una experiencia para el usuario mucho más agradable.

00:03:30.949 --> 00:03:34.959
Y eso es lo que se conoce como "mejora progresiva",

00:03:34.959 --> 00:03:39.514
a partir de una página web como HTML con un comportamiento predeterminado del navegador,

00:03:39.514 --> 00:03:44.650
pero luego mejorada con JavaScript para hacer una mejor experiencia.

00:03:44.650 --> 00:03:48.361
A menudo querrás utilizar "preventDefault" cuando

00:03:48.361 --> 00:03:50.445
estés adjuntando detectores de eventos al presionar el ratón en enlaces.

00:03:50.445 --> 00:03:54.447
Y probablemente también te veas usándolo cuando proceses formularios,

00:03:54.447 --> 00:03:57.485
debido a que el navegador tiene algunos comportamientos predeterminados en ese caso,

00:03:57.485 --> 00:03:59.264
cuando los envías a un servidor.

00:03:59.264 --> 00:04:02.640
Lo importante es mantener la experiencia del usuario en mente,

00:04:02.640 --> 00:04:06.730
y si esa experiencia del usuario no es la óptima en tu página web,

00:04:06.730 --> 00:04:08.953
encontrar la manera de mejorar.

00:04:08.953 --> 00:04:11.366
Puede ser que no te enseñemos todo aquí,

00:04:11.366 --> 00:04:15.499
pero en Internet hay miles de respuestas para ti.