[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,,Now I want to show you one more thing\Nthat you could do with the `event` object.
Dialogue: 0,0:00:05.74,0:00:09.94,Default,,0000,0000,0000,,This webpage that I've made\Nanswers the eternal question:
Dialogue: 0,0:00:09.94,0:00:12.15,Default,,0000,0000,0000,,"What does Oh Noes say?"
Dialogue: 0,0:00:12.15,0:00:16.60,Default,,0000,0000,0000,,Or, more specifically, what would\Nhe sound like if you could hear him?
Dialogue: 0,0:00:16.60,0:00:20.59,Default,,0000,0000,0000,,If you click on the link,\Nyou'll be brought to an mp3 file
Dialogue: 0,0:00:20.59,0:00:25.16,Default,,0000,0000,0000,,that should play in the browser and\Nanswer that burning question for you.
Dialogue: 0,0:00:25.16,0:00:30.01,Default,,0000,0000,0000,,However, I don't want the user\Nto have to leave the webpage.
Dialogue: 0,0:00:30.01,0:00:33.44,Default,,0000,0000,0000,,You should be able to hear it\Ndirectly on the page.
Dialogue: 0,0:00:33.44,0:00:37.89,Default,,0000,0000,0000,,We can do that with JavaScript,\Nby playing an `` tag
Dialogue: 0,0:00:37.89,0:00:40.96,Default,,0000,0000,0000,,as soon as the user clicks the link.
Dialogue: 0,0:00:40.96,0:00:45.11,Default,,0000,0000,0000,,First, let's store the link\Nin a variable.
Dialogue: 0,0:00:45.11,0:00:48.08,Default,,0000,0000,0000,,(typing)
Dialogue: 0,0:00:55.77,0:00:58.10,Default,,0000,0000,0000,,Now let's define a callback function.
Dialogue: 0,0:00:58.10,0:01:03.74,Default,,0000,0000,0000,,This is going to be\Na pretty interesting one.
Dialogue: 0,0:01:03.74,0:01:10.16,Default,,0000,0000,0000,,So in that callback function, we want\Nto create an audio tag dynamically.
Dialogue: 0,0:01:10.16,0:01:12.03,Default,,0000,0000,0000,,(typing)
Dialogue: 0,0:01:15.82,0:01:19.82,Default,,0000,0000,0000,,And this is a nice new tag\Navailable in modern browsers.
Dialogue: 0,0:01:19.82,0:01:26.10,Default,,0000,0000,0000,,And then audio.src equals--\Nand we're going to set it equal to
Dialogue: 0,0:01:26.10,0:01:32.56,Default,,0000,0000,0000,,what the `href` is up here--\Nthe audio tag is a lot like the image tag.
Dialogue: 0,0:01:32.56,0:01:37.34,Default,,0000,0000,0000,,And then we're also going to say\N`audioEl.autoplay = true`,
Dialogue: 0,0:01:37.34,0:01:40.33,Default,,0000,0000,0000,,that'll make it play as soon as\Nwe add it to the page.
Dialogue: 0,0:01:40.33,0:01:42.95,Default,,0000,0000,0000,,And finally, we add it to the page.
Dialogue: 0,0:01:42.95,0:01:45.57,Default,,0000,0000,0000,,And it doesn't really matter\Nwhere I put it,
Dialogue: 0,0:01:45.57,0:01:48.06,Default,,0000,0000,0000,,since we're not really visualizing it.
Dialogue: 0,0:01:48.06,0:01:52.30,Default,,0000,0000,0000,,So now, when they click, it should\Ncreate an audio, set the source,
Dialogue: 0,0:01:52.30,0:01:55.39,Default,,0000,0000,0000,,set it to autoplay,\Nand add it to the page.
Dialogue: 0,0:01:55.39,0:01:59.44,Default,,0000,0000,0000,,Finally, we make sure that\Nthe event listener is called
Dialogue: 0,0:01:59.44,0:02:01.38,Default,,0000,0000,0000,,when the link is clicked.
Dialogue: 0,0:02:01.38,0:02:03.72,Default,,0000,0000,0000,,(typing)
Dialogue: 0,0:02:08.28,0:02:12.95,Default,,0000,0000,0000,,...and then we just pass in\Nthe name of the function.
Dialogue: 0,0:02:12.95,0:02:17.38,Default,,0000,0000,0000,,Okay, you know the deal:\Npause the talk-through, try it out.
Dialogue: 0,0:02:17.38,0:02:19.73,Default,,0000,0000,0000,,♪ humming ♪
Dialogue: 0,0:02:19.73,0:02:21.11,Default,,0000,0000,0000,,What happened?
Dialogue: 0,0:02:21.11,0:02:26.34,Default,,0000,0000,0000,,For me, the sound plays--\Nthat low, deep grumble of Oh Noes--
Dialogue: 0,0:02:26.34,0:02:29.79,Default,,0000,0000,0000,,but the link still opens up\Nin a new window.
Dialogue: 0,0:02:29.79,0:02:33.48,Default,,0000,0000,0000,,Ideally, once that sound played,\Nthe browser would no longer
Dialogue: 0,0:02:33.48,0:02:37.55,Default,,0000,0000,0000,,try to navigate the user to the link\Nbecause they've already heard it.
Dialogue: 0,0:02:37.55,0:02:42.92,Default,,0000,0000,0000,,The way to do this is to tell the browser\Nto cancel its default behavior.
Dialogue: 0,0:02:42.92,0:02:47.15,Default,,0000,0000,0000,,You see, by default,\Nwhen a user clicks a link
Dialogue: 0,0:02:47.15,0:02:50.32,Default,,0000,0000,0000,,the browser navigates\Nthe user to that link.
Dialogue: 0,0:02:50.32,0:02:54.23,Default,,0000,0000,0000,,But if we've overridden the way\Nthat the link works, in JavaScript,
Dialogue: 0,0:02:54.23,0:02:58.00,Default,,0000,0000,0000,,we often don't want the browser\Nto do that navigation.
Dialogue: 0,0:02:58.00,0:03:02.73,Default,,0000,0000,0000,,We can tell it to stop by using\Na method on the `event` property
Dialogue: 0,0:03:02.73,0:03:05.30,Default,,0000,0000,0000,,called `preventDefault()`.
Dialogue: 0,0:03:05.30,0:03:09.90,Default,,0000,0000,0000,,So we need to refer to that\Nevent object that we get passed,
Dialogue: 0,0:03:09.90,0:03:15.83,Default,,0000,0000,0000,,and then inside here, we say:\N`e.preventDefault();`
Dialogue: 0,0:03:15.83,0:03:19.42,Default,,0000,0000,0000,,This should tell the browser\Nto prevent the default behavior
Dialogue: 0,0:03:19.42,0:03:21.40,Default,,0000,0000,0000,,associated with this event.
Dialogue: 0,0:03:21.40,0:03:25.100,Default,,0000,0000,0000,,Now pause the talk-through,\Nand try it again.
Dialogue: 0,0:03:25.100,0:03:28.38,Default,,0000,0000,0000,,You just heard the sound, right?
Dialogue: 0,0:03:28.38,0:03:30.95,Default,,0000,0000,0000,,That is a much nicer user experience.
Dialogue: 0,0:03:30.95,0:03:34.96,Default,,0000,0000,0000,,And that is what is known as\N"progressive enhancement"--
Dialogue: 0,0:03:34.96,0:03:39.51,Default,,0000,0000,0000,,starting the webpage as HTML with\Nthe default browser behavior
Dialogue: 0,0:03:39.51,0:03:44.65,Default,,0000,0000,0000,,but then enhancing it with JavaScript\Nto be a richer experience.
Dialogue: 0,0:03:44.65,0:03:48.36,Default,,0000,0000,0000,,You'll often want to use this\N`preventDefault` when you're
Dialogue: 0,0:03:48.36,0:03:50.44,Default,,0000,0000,0000,,attaching click listeners to links.
Dialogue: 0,0:03:50.44,0:03:54.45,Default,,0000,0000,0000,,And you may also find yourself using it\Nwhen you're doing form processing,
Dialogue: 0,0:03:54.45,0:03:57.48,Default,,0000,0000,0000,,since the browser does some\Ndefault behavior there as well,
Dialogue: 0,0:03:57.48,0:03:59.26,Default,,0000,0000,0000,,submitting to a server.
Dialogue: 0,0:03:59.26,0:04:02.64,Default,,0000,0000,0000,,The important thing is to keep\Nthe user experience in mind,
Dialogue: 0,0:04:02.64,0:04:06.73,Default,,0000,0000,0000,,and if the user experience\Nisn't optimal on your webpage,
Dialogue: 0,0:04:06.73,0:04:08.95,Default,,0000,0000,0000,,figure out how to make it better.
Dialogue: 0,0:04:08.95,0:04:11.37,Default,,0000,0000,0000,,We may not be able\Nto teach you everything here,
Dialogue: 0,0:04:11.37,0:04:15.50,Default,,0000,0000,0000,,but the Internet has\Nthousands of answers for you.