[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.46,0:00:05.74,Default,,0000,0000,0000,,Ahora quiero mostrarles una cosa más que podrían hacer con un evento en un objeto.
Dialogue: 0,0:00:05.74,0:00:09.94,Default,,0000,0000,0000,,Esta página web que hice, responde a la eterna pregunta:
Dialogue: 0,0:00:09.94,0:00:12.15,Default,,0000,0000,0000,,¿Qué es lo que dice el chico "Oh Noes"?
Dialogue: 0,0:00:12.15,0:00:16.60,Default,,0000,0000,0000,,O más específicamente, ¿cómo sonaría si pudieras oirlo?
Dialogue: 0,0:00:16.60,0:00:20.59,Default,,0000,0000,0000,,Si presionas el ratón en el enlace, el navegador te llevará a un archivo mp3,
Dialogue: 0,0:00:20.59,0:00:25.16,Default,,0000,0000,0000,,que se debería ejecutar en el navegador y responder esa pregunta ardiente.
Dialogue: 0,0:00:25.16,0:00:30.01,Default,,0000,0000,0000,,Sin embargo, no quisiera que el usuario dejara esta página web.
Dialogue: 0,0:00:30.01,0:00:33.44,Default,,0000,0000,0000,,Deberías poder escucharlo directamente en esta página.
Dialogue: 0,0:00:33.44,0:00:37.89,Default,,0000,0000,0000,,Podemos hacer eso con JavaScript, ejecutando una etiqueta ""
Dialogue: 0,0:00:37.89,0:00:40.96,Default,,0000,0000,0000,,tan pronto como el usuario presione el ratón en el enlace.
Dialogue: 0,0:00:40.96,0:00:45.11,Default,,0000,0000,0000,,En primer lugar, vamos a almacenar el enlace en una variable.
Dialogue: 0,0:00:45.11,0:00:55.18,Default,,0000,0000,0000,,'var ohnoesEl = document.getElementById("ohnoes");'
Dialogue: 0,0:00:55.77,0:00:58.10,Default,,0000,0000,0000,,Ahora vamos a definir la función de tipo "callback".
Dialogue: 0,0:00:58.10,0:01:03.74,Default,,0000,0000,0000,,Que va a ser una función muy interesante.
Dialogue: 0,0:01:03.74,0:01:10.16,Default,,0000,0000,0000,,Así que en esta función "callback", queremos crear una etiqueta "" dinámicamente.
Dialogue: 0,0:01:10.16,0:01:15.36,Default,,0000,0000,0000,,'var audioEl = document.createElement("audio");'
Dialogue: 0,0:01:15.82,0:01:19.82,Default,,0000,0000,0000,,Y ésta es una etiqueta nueva disponible en los navegadores modernos.
Dialogue: 0,0:01:19.82,0:01:26.10,Default,,0000,0000,0000,,Y luego "audio.src" es igual a..., y vamos a hacerla igual a
Dialogue: 0,0:01:26.10,0:01:32.56,Default,,0000,0000,0000,,lo que tenemos aquí arriba en "href", la etiqueta "" es muy parecida a la etiqueta "".
Dialogue: 0,0:01:32.56,0:01:37.34,Default,,0000,0000,0000,,Y luego también vamos a escribir: 'audioEl.autoplay = "true";'
Dialogue: 0,0:01:37.34,0:01:40.33,Default,,0000,0000,0000,,que va a hacer que se ejecute tan pronto como la añadamos a la página.
Dialogue: 0,0:01:40.33,0:01:42.95,Default,,0000,0000,0000,,Y finalmente, la añadimos a la página.
Dialogue: 0,0:01:42.95,0:01:45.57,Default,,0000,0000,0000,,Y en realidad no importa dónde la ponga,
Dialogue: 0,0:01:45.57,0:01:48.06,Default,,0000,0000,0000,,porque no la estamos viendo.
Dialogue: 0,0:01:48.06,0:01:52.30,Default,,0000,0000,0000,,Así que ahora, cuando presionen el ratón, se creará un audio, se asignará la fuente,
Dialogue: 0,0:01:52.30,0:01:55.39,Default,,0000,0000,0000,,se asignará el "autoplay" (autoejecutar), y se añadirá a la página.
Dialogue: 0,0:01:55.39,0:01:59.44,Default,,0000,0000,0000,,Finalmente, nos aseguramos de que se llame al detector de eventos,
Dialogue: 0,0:01:59.44,0:02:01.38,Default,,0000,0000,0000,,cuando se presione el ratón en el enlace.
Dialogue: 0,0:02:01.38,0:02:08.14,Default,,0000,0000,0000,,'ohnoesEl.addEventListener("click",'...
Dialogue: 0,0:02:08.28,0:02:12.95,Default,,0000,0000,0000,,... y luego sólo pasamos el nombre de la función.
Dialogue: 0,0:02:12.95,0:02:17.38,Default,,0000,0000,0000,,Ok, ya sabes cuál es el acuerdo: pausa la guía paso a paso y pruébalo.
Dialogue: 0,0:02:17.38,0:02:19.73,Default,,0000,0000,0000,,"tu-tu-tu"
Dialogue: 0,0:02:19.73,0:02:21.11,Default,,0000,0000,0000,,¿Qué pasó?
Dialogue: 0,0:02:21.11,0:02:26.34,Default,,0000,0000,0000,,Yo escuché ese sonido bajo y profundo del gruñido de "Oh Noes",
Dialogue: 0,0:02:26.34,0:02:29.79,Default,,0000,0000,0000,,pero el enlace todavía se abrió en una ventana nueva.
Dialogue: 0,0:02:29.79,0:02:33.48,Default,,0000,0000,0000,,Idealmente, una vez que el sonido se reproduce, el navegador no debería
Dialogue: 0,0:02:33.48,0:02:37.55,Default,,0000,0000,0000,,tratar de mandar al usuario a navegar al enlace, porque ya lo escuchó.
Dialogue: 0,0:02:37.55,0:02:42.92,Default,,0000,0000,0000,,La manera de hacer esto es diciéndole al navegador que cancele ese comportamiento predeterminado.
Dialogue: 0,0:02:42.92,0:02:47.15,Default,,0000,0000,0000,,Ves que, por defecto, cuando un usuario presiona el ratón en un enlace,
Dialogue: 0,0:02:47.15,0:02:50.32,Default,,0000,0000,0000,,el navegador envía al usuario a navegar a ese enlace.
Dialogue: 0,0:02:50.32,0:02:54.23,Default,,0000,0000,0000,,Pero si redefinimos la forma en que el enlace funciona, en JavaScript,
Dialogue: 0,0:02:54.23,0:02:58.00,Default,,0000,0000,0000,,muchas veces no queremos que el navegador nos mande a otro lado.
Dialogue: 0,0:02:58.00,0:03:02.73,Default,,0000,0000,0000,,Podemos decirle que se detenga, usando un método en la propiedad "event",
Dialogue: 0,0:03:02.73,0:03:05.30,Default,,0000,0000,0000,,llamado "preventDefault()".
Dialogue: 0,0:03:05.30,0:03:09.90,Default,,0000,0000,0000,,Así que tenemos que referirnos a ese objeto de evento que nos pasan,
Dialogue: 0,0:03:09.90,0:03:15.83,Default,,0000,0000,0000,,y luego aquí dentro escribimos: "e.preventDefault();".
Dialogue: 0,0:03:15.83,0:03:19.42,Default,,0000,0000,0000,,Esto le dice al navegador que evite el comportamiento predeterminado
Dialogue: 0,0:03:19.42,0:03:21.40,Default,,0000,0000,0000,,asociado a este evento.
Dialogue: 0,0:03:21.40,0:03:25.100,Default,,0000,0000,0000,,Ahora, pausa la guía paso a paso, y prueba de nuevo.
Dialogue: 0,0:03:25.100,0:03:28.38,Default,,0000,0000,0000,,Sólo escuchaste el sonido, ¿cierto?
Dialogue: 0,0:03:28.38,0:03:30.95,Default,,0000,0000,0000,,Ésta es una experiencia para el usuario mucho más agradable.
Dialogue: 0,0:03:30.95,0:03:34.96,Default,,0000,0000,0000,,Y eso es lo que se conoce como "mejora progresiva",
Dialogue: 0,0:03:34.96,0:03:39.51,Default,,0000,0000,0000,,a partir de una página web como HTML con un comportamiento predeterminado del navegador,
Dialogue: 0,0:03:39.51,0:03:44.65,Default,,0000,0000,0000,,pero luego mejorada con JavaScript para hacer una mejor experiencia.
Dialogue: 0,0:03:44.65,0:03:48.36,Default,,0000,0000,0000,,A menudo querrás utilizar "preventDefault" cuando
Dialogue: 0,0:03:48.36,0:03:50.44,Default,,0000,0000,0000,,estés adjuntando detectores de eventos al presionar el ratón en enlaces.
Dialogue: 0,0:03:50.44,0:03:54.45,Default,,0000,0000,0000,,Y probablemente también te veas usándolo cuando proceses formularios,
Dialogue: 0,0:03:54.45,0:03:57.48,Default,,0000,0000,0000,,debido a que el navegador tiene algunos comportamientos predeterminados en ese caso,
Dialogue: 0,0:03:57.48,0:03:59.26,Default,,0000,0000,0000,,cuando los envías a un servidor.
Dialogue: 0,0:03:59.26,0:04:02.64,Default,,0000,0000,0000,,Lo importante es mantener la experiencia del usuario en mente,
Dialogue: 0,0:04:02.64,0:04:06.73,Default,,0000,0000,0000,,y si esa experiencia del usuario no es la óptima en tu página web,
Dialogue: 0,0:04:06.73,0:04:08.95,Default,,0000,0000,0000,,encontrar la manera de mejorar.
Dialogue: 0,0:04:08.95,0:04:11.37,Default,,0000,0000,0000,,Puede ser que no te enseñemos todo aquí,
Dialogue: 0,0:04:11.37,0:04:15.50,Default,,0000,0000,0000,,pero en Internet hay miles de respuestas para ti.