Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,420 --> 00:00:08,310
So now that we know which key was pressed and how we can get its innerHTML, how can we play a different
2
00:00:08,310 --> 00:00:10,850
sound depending on which key was pressed?
3
00:00:11,280 --> 00:00:18,300
Well you might think to the if else statements that we learned in our introduction to Javascript modules,
4
00:00:18,960 --> 00:00:22,480
but there's actually seven keys in total,
5
00:00:22,500 --> 00:00:26,380
so we would have to write quite a few if else statements.
6
00:00:26,460 --> 00:00:32,610
Now in this area it would actually be easier to write what's called a switch statement which, just like
7
00:00:32,640 --> 00:00:34,170
a railroad switch,
8
00:00:34,340 --> 00:00:39,820
it will take the code down a different track depending on the value of a variable.
9
00:00:39,840 --> 00:00:44,140
So let's delete this line of code and let's start writing our switch statements.
10
00:00:44,130 --> 00:00:50,280
Now inside Atom, as soon as you start writing the word switch, then our auto suggest will helpfully give
11
00:00:50,280 --> 00:00:53,570
you the skeleton of a Javascript switch statement.
12
00:00:53,760 --> 00:00:58,850
So if you hit enter then it'll give you the bare bones of what it should look like.
13
00:00:59,580 --> 00:01:03,760
So you can see the keyword here, instead of if, is switch.
14
00:01:04,050 --> 00:01:10,110
And then afterwards we have a set of parentheses which includes the expression or the thing that we're
15
00:01:10,110 --> 00:01:11,690
going to switch on.
16
00:01:11,790 --> 00:01:18,480
And in our case, we're going to switch on the letter that is inside the innerHTML of each of these
17
00:01:18,480 --> 00:01:19,210
buttons.
18
00:01:19,260 --> 00:01:22,190
So let's create a variable that holds that value.
19
00:01:22,260 --> 00:01:29,490
So we'll call it buttonInnerHTML, and we'll set it to equal this,
20
00:01:29,490 --> 00:01:34,420
so remember that's the button that triggered the event, .innerHTML.
21
00:01:34,710 --> 00:01:43,300
So now let's switch the button's innerHTML, and, depending on the case, we'll tell it to do something different.
22
00:01:43,590 --> 00:01:48,030
So the first case is if that was equal to w.
23
00:01:48,300 --> 00:01:54,400
So remember our first button has an innerHTML of the letter w.
24
00:01:54,750 --> 00:01:57,190
So if it was the letter w,
25
00:01:57,300 --> 00:02:01,500
then we're going to tell it to play the tom 1 drum.
26
00:02:01,620 --> 00:02:06,870
So I'm going to take that code that I commented out and then put it in here so that it will play the
27
00:02:06,870 --> 00:02:08,830
first drum.
28
00:02:08,910 --> 00:02:16,710
Now after the first case is done, then there is a break statement, which tells the code to exit the switch
29
00:02:16,710 --> 00:02:20,250
statement and continue with the rest of the code.
30
00:02:20,250 --> 00:02:25,990
Now if buttonInnerHTML didn't happen to be equal to w, then it could be equal to something else.
31
00:02:26,190 --> 00:02:33,360
So in that case we would have to specify the next likely scenario, which is what if the innerHTML was
32
00:02:33,510 --> 00:02:36,610
a, i.e. the second button got clicked.
33
00:02:36,780 --> 00:02:44,740
Well, in this case, we're going to play the next sound instead, and we're going to play the tom-2.mp3.
34
00:02:44,910 --> 00:02:48,700
And once again we have to end our case with a break.
35
00:02:48,720 --> 00:02:55,380
So the switch statement looks a little bit weird, because instead of having, say for example, an open parentheses
36
00:02:55,380 --> 00:03:04,580
here and a closing parentheses here, it actually has a colon and a break keyword instead.
37
00:03:04,740 --> 00:03:09,780
But just know that it's basically the same thing. Between the colon and the break keyword are
38
00:03:09,820 --> 00:03:16,770
all the things we want the web site to carry out if the buttonInnerHTML was equal to this particular
39
00:03:16,770 --> 00:03:17,540
case.
40
00:03:17,610 --> 00:03:19,560
Now in this case,
41
00:03:19,560 --> 00:03:21,710
instead of calling both of our sounds
42
00:03:21,840 --> 00:03:27,770
audio, we should really give it a different name.
43
00:03:27,870 --> 00:03:31,520
So why don't we call our first one the sound that it's going to make,
44
00:03:31,590 --> 00:03:38,870
so tom1, and our second one tom2, after the sound file that's going to be played?
45
00:03:38,940 --> 00:03:44,070
And remember if you're going to change it here then you have to change it here as well so that you know
46
00:03:44,100 --> 00:03:47,230
that you're playing tom1 and you're playing tom2.
47
00:03:47,250 --> 00:03:54,600
Now I've just gone in and added all of the remaining cases for the key s, d, j, k and l.
48
00:03:54,620 --> 00:04:00,660
So now I've gone in and I've added all of the other remaining cases so that our web site knows what
49
00:04:00,660 --> 00:04:05,460
to do if the s key was pressed or the d or the j, k, l.
50
00:04:05,540 --> 00:04:09,890
Now the final case that we've got is actually the default case.
51
00:04:10,230 --> 00:04:16,980
Now the default is kind of like the else statement at the end of an if. It covers all of the other scenarios
52
00:04:16,980 --> 00:04:18,730
that we haven't specified.
53
00:04:18,960 --> 00:04:27,590
What if the buttonInnerHTML wasn't w, a, s, d, and instead it was something like 1 or comma?
54
00:04:28,020 --> 00:04:30,600
Well that's when the default will trigger.
55
00:04:30,630 --> 00:04:35,730
Now even though in most cases the default will likely never be triggered,
56
00:04:35,850 --> 00:04:41,400
it's still good practice to include it, as you can't always predict ahead of time what might go wrong
57
00:04:41,400 --> 00:04:42,030
in the future,
58
00:04:42,030 --> 00:04:42,580
right?
59
00:04:42,840 --> 00:04:45,890
And the value could always be something that you didn't expect.
60
00:04:46,080 --> 00:04:51,540
So let's just go ahead and add a console.log that logs the buttonInnerHTML
61
00:04:51,570 --> 00:04:53,580
that triggered the default case.
62
00:04:53,790 --> 00:05:00,510
So let's save, refresh our web site, and you can see now if I click on any of these buttons
63
00:05:03,700 --> 00:05:07,450
you can see that we get a different sound for each button click.
64
00:05:07,570 --> 00:05:08,990
That's pretty cool, right? Now
65
00:05:09,000 --> 00:05:15,820
in the next lesson we're going to dig into keyboard events and see how we can use the keyboard to trigger
66
00:05:15,820 --> 00:05:19,280
these sounds instead of having to press on the buttons.
67
00:05:19,380 --> 00:05:22,020
So for all of that and more, I'll see you on the next lesson.
6766
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.